From f710f4df96c6463749a3d36ff25a27968243fbc8 Mon Sep 17 00:00:00 2001 From: IO420 <320154041@pcpuma.acatlan.unam.mx> Date: Mon, 8 Dec 2025 18:02:33 -0600 Subject: [PATCH] added new style and fixed send token --- app/Components/auth/Login/Login.tsx | 2 + app/Components/auth/Logout/Logout.css | 1 - app/Components/auth/Logout/Logout.tsx | 3 + .../layout/BarNavigation/BarNavigation.css | 15 ++-- .../layout/Header/Header.module.css | 83 +++++++++++++++++-- app/Components/layout/Header/Header.tsx | 45 ++++++---- app/globals.css | 40 +-------- app/lib/getStudent.ts | 20 ++++- 8 files changed, 133 insertions(+), 76 deletions(-) diff --git a/app/Components/auth/Login/Login.tsx b/app/Components/auth/Login/Login.tsx index 4cd7228..c2557fb 100644 --- a/app/Components/auth/Login/Login.tsx +++ b/app/Components/auth/Login/Login.tsx @@ -33,9 +33,11 @@ function Login() { const token = data.access_token; const payload = JSON.parse(atob(token.split(".")[1])); const usuario = payload.usuario; + const role = payload.role; document.cookie = `token=${token}; path=/; SameSite=Strict`; document.cookie = `user=${usuario}; path=/; SameSite=Strict`; + document.cookie = `role=${role}; path=/; SameSite=Strict`; toast.success("Inicio de sesión exitoso"); router.push("/Impresiones"); diff --git a/app/Components/auth/Logout/Logout.css b/app/Components/auth/Logout/Logout.css index a346fa3..88d5711 100644 --- a/app/Components/auth/Logout/Logout.css +++ b/app/Components/auth/Logout/Logout.css @@ -16,7 +16,6 @@ color: transparent; padding: 2rem; font-size: 0px; - top: 15px; } .button-logout::after { diff --git a/app/Components/auth/Logout/Logout.tsx b/app/Components/auth/Logout/Logout.tsx index 3f8ab15..580eb85 100644 --- a/app/Components/auth/Logout/Logout.tsx +++ b/app/Components/auth/Logout/Logout.tsx @@ -10,6 +10,9 @@ export default function Logout() { const handleLogout = () => { Cookies.remove("token", { path: "/" }); + Cookies.remove("role", { path: "/" }); + Cookies.remove("user", { path: "/" }); + router.push("/"); }; diff --git a/app/Components/layout/BarNavigation/BarNavigation.css b/app/Components/layout/BarNavigation/BarNavigation.css index d7be174..7a26675 100644 --- a/app/Components/layout/BarNavigation/BarNavigation.css +++ b/app/Components/layout/BarNavigation/BarNavigation.css @@ -25,8 +25,8 @@ } .barNavigation li:hover { - background-color: #f9f9f9; - color: black; + background-color: #f3f4f6; + color: black !important; } .menuToggle { @@ -36,13 +36,12 @@ gap: 4px; cursor: pointer; padding: 10px; - margin-right: 10px; } .menuToggle div { width: 25px; height: 3px; - background-color: #7a7a7a; + background-color: #000000; border-radius: 4px; } @@ -79,7 +78,7 @@ } .subMenu ul:hover { - color: #5b8cc9; + color: #101113; } .subMenu:hover ul { @@ -103,6 +102,7 @@ justify-content: center; color: #383838; font-size: 1.5rem; + padding: 1rem; } .subMenu:hover > span, @@ -130,7 +130,7 @@ tbody { font-size: 1.25rem; } -@media (max-width: 800px) { +@media (max-width: 1000px) { .menuToggle { display: flex; position: relative; @@ -157,7 +157,7 @@ tbody { .barNavigation ul { position: absolute; - background-color: #003e79; + background-color: #fff; flex-direction: column; padding: 10px 0; align-items: center; @@ -171,7 +171,6 @@ tbody { } .barNavigation li:hover { - background-color: #d59f0f; color: white; border-radius: 0; border: none; diff --git a/app/Components/layout/Header/Header.module.css b/app/Components/layout/Header/Header.module.css index 3ec1a9e..0eb52bb 100644 --- a/app/Components/layout/Header/Header.module.css +++ b/app/Components/layout/Header/Header.module.css @@ -1,20 +1,23 @@ .logo { position: relative; z-index: 3; + object-fit: contain; } -.center { - display: flex; - height: 100%; - align-items: center; - width: 350px; +.logoContainer { + position: relative; + width: 100%; + max-width: 250px; + min-width: 200px; + height: auto; + aspect-ratio: 250/70; } .cedetecContainer { position: absolute; top: 0; right: 0; - width: 200px; + width: 300px; height: 100%; z-index: -1; } @@ -33,14 +36,80 @@ left: -20px; width: 100%; height: 30px; - min-width: 300px; background: linear-gradient(to right, #bd8c01 40%, #fff 100%); transform: skew(-45deg); z-index: 0; } +.header { + width: 100vw; + background-color: #fff; + display: grid; + grid-template-columns: auto 1fr; + padding: 0 10px; + position: relative; + z-index: 1; + align-items: end; +} + +.header::after { + content: ""; + top: 0; + left: -60px; + position: absolute; + background-color: #003e79; + height: 100%; + min-width: 350px; + transform: skew(45deg); + z-index: 2; +} + +.header::before { + content: ""; + top: 0; + left: -40px; + position: absolute; + background-color: rgb(1, 92, 184); + height: 100%; + width: 10%; + min-width: 350px; + transform: skew(45deg); + z-index: 2; +} + +.containerBarNav { + display: flex; + width: 100%; + height: 100%; + padding-left: 110px; + max-height: 60%; + align-items: end; +} + @media (max-width: 800px) { .yellowPart { + left: 0; background: #bd8c01; + transform: skew(0deg); + } + .header::after { + left: -100px; + } + .header::before { + left: -80px; + } +} + +@media (max-width: 400px) { + .header::after { + min-width: 100%; + transform: skew(25deg); + } + .header::before { + min-width: 100%; + transform: skew(25deg); + } + .containerBarNav { + padding-left: 0; } } diff --git a/app/Components/layout/Header/Header.tsx b/app/Components/layout/Header/Header.tsx index 1063eda..2bfca6b 100644 --- a/app/Components/layout/Header/Header.tsx +++ b/app/Components/layout/Header/Header.tsx @@ -4,36 +4,45 @@ import header from "./Header.module.css"; import Link from "next/link"; import BarNavigation from "../BarNavigation/BarNavigation"; import { usePathname } from "next/navigation"; +import { useEffect, useState } from "react"; function Header() { - const pathname = usePathname(); + const [role, setRole] = useState(""); + + useEffect(() => { + const cookies = Object.fromEntries( + document.cookie.split("; ").map((c) => c.split("=")) + ); + setRole(cookies.role || ""); + }, []); return ( -
+
- Logo FES - -
-
- {pathname !== "/" && } +
+ Logo FES +
+ +
+
+ {role === "ADMINISTRADOR" && } + {/*role === "operator" && */} + {/*role === "social" && */}
); diff --git a/app/globals.css b/app/globals.css index 1c3149d..3dab631 100644 --- a/app/globals.css +++ b/app/globals.css @@ -25,47 +25,13 @@ body { min-height: 100dvh; width: 100vw; overflow: hidden; + background-color: #f9f9f9; } main { position: relative; } -header { - display: grid; - grid-template-columns: auto 1fr; - padding: 0 20px; - position: relative; - z-index: 1; - height: 90px; - align-items: end; -} - -header::after { - content: ""; - top: 0; - left: -45px; - position: absolute; - background-color: #003e79; - height: 100%; - min-width: 350px; - transform: skew(45deg); - z-index: 2; -} - -header::before { - content: ""; - top: 0; - left: -25px; - position: absolute; - background-color: rgb(1, 92, 184); - height: 100%; - width: 10%; - min-width: 350px; - transform: skew(45deg); - z-index: 2; -} - footer { position: relative; display: flex; @@ -90,7 +56,6 @@ footer p { justify-items: center; height: 100%; width: 100%; - background-color: #f9f9f9; } @keyframes fadeInUp { @@ -571,9 +536,6 @@ table td:last-child { } @media (max-width: 800px) { - header { - padding: 6px 16px; - } .container { display: flex; diff --git a/app/lib/getStudent.ts b/app/lib/getStudent.ts index d2d501d..f4017b4 100644 --- a/app/lib/getStudent.ts +++ b/app/lib/getStudent.ts @@ -1,11 +1,25 @@ import axios from "axios"; import { envConfig } from "./config"; -import apiClient from "./apiClient"; +import { redirect } from "next/navigation"; +import { cookies } from "next/headers"; + +if (!envConfig.apiUrl) { + throw new Error("API URL is not defined in envConfig"); +} export async function GetStudent(numAcount: number) { + const cookieStore = cookies(); + const token = (await cookieStore).get("token")?.value; + + if (!token) redirect("/"); try { - const response = await apiClient.get( - `/student/${numAcount}` + const response = await axios.get( + `${envConfig.apiUrl}/student/${numAcount}`, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } ); return response.data;