Merge branch 'Lino' of https://github.com/jls846/front-censo into ale

src/components/BarNavigation.tsx

@@ -1,9 +1,12 @@
 "use client";
+
 import { useState } from "react";
-import "../app/styles/components/BarNavigation.scss";
+import { useRouter } from "next/navigation"; // ✅ Importa useRouter
+import "../app/styles/layout/BarNavigation.scss";
 import Link from "next/link";
 
 function BarNavigation() {
+  const router = useRouter(); // ✅ Para redirigir
   const [openMenu, setOpenMenu] = useState(false);
   const [openSubMenu, setOpenSubMenu] = useState<number | null>(null);
 
@@ -14,91 +17,42 @@ function BarNavigation() {
     }
   };
 
+  const cerrarSesion = () => {
+    if (typeof window !== "undefined") {
+      localStorage.removeItem("loggedIn");
+      router.push("/"); // ✅ Redirige al inicio
+    }
+    setOpenMenu(false); // Cierra menú móvil
+  };
+
   return (
     <nav className="barNavigation">
-      <div className={`menuToggle ${openMenu ? "" : ""}`} onClick={toggleMenu}>
+      <div className="menuToggle" onClick={toggleMenu}>
         <div></div>
         <div></div>
         <div></div>
       </div>
 
       <ul className={openMenu ? "active" : ""}>
-        <li className={`subMenu ${openSubMenu === 0 ? "open" : ""}`}>
-          <span onClick={() => toggleSubMenu(0)}>Inscripciónes</span>
-          <ul className="containerLinks" onClick={toggleMenu}>
-            <Link href="/AgregarTiempo" className="links">
-              <li>Agregar Tiempo</li>
-            </Link>
-            <Link href="/Inscripcion" className="links">
-              <li>Inscripción Usuario</li>
-            </Link>
-          </ul>
-        </li>
-
-        <li className={`subMenu ${openSubMenu === 1 ? "open" : ""}`}>
-          <span onClick={() => toggleSubMenu(1)}>Servicios</span>
-          <ul onClick={toggleMenu}>
-            <Link href="/Impresiones" className="links">
-              <li>Impresiones y Ploteo</li>
-            </Link>
-            <Link href="/AsignacionMesas" className="links">
-              <li>Asignacion de Mesas</li>
-            </Link>
-            <Link href="/AsignacionEquipo" className="links">
-              <li>Asignacion de Equipos</li>
-            </Link>
-            <Link href="/Monitor" className="links">
-              <li>Monitor</li>
-            </Link>
-          </ul>
-        </li>
-
-        <li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>
-          <span onClick={() => toggleSubMenu(2)}>Equipo</span>
-          <ul onClick={toggleMenu}>
-            <Link href="/InformacionEquipo" className="links">
-              <li>Informacion de Equipos</li>
-            </Link>
-            <Link href="/ActivosMantenimiento" className="links">
-              <li>Activos y en Mantenimiento</li>
-            </Link>
-            <Link href="/Mensajes" className="links">
-              <li>Mensajes</li>
-            </Link>
-            <Link href="/Programas" className="links">
-              <li>Programas</li>
-            </Link>
-          </ul>
-        </li>
-
-        <li className={`subMenu ${openSubMenu === 3 ? "open" : ""}`}>
-          <span onClick={() => toggleSubMenu(3)}>Reportes</span>
-          <ul onClick={toggleMenu}>
-            <Link href="/Reportes" className="links">
-              <li>Reportes</li>
-            </Link>
-            <Link href="/Inscritos" className="links">
-              <li>Inscritos</li>
-            </Link>
-            <Link href="/BitacoraSanciones" className="links">
-              <li>Bitacora y sanciones</li>
-            </Link>
-          </ul>
-        </li>
         <li className="subMenu" onClick={toggleMenu}>
-          <Link href="/QuitarSancion" className="links">
-            <span>Quitar sanción</span>
+          <Link href="/Escaner" className="links">
+            <span>Escanear</span>
           </Link>
         </li>
         <li className="subMenu" onClick={toggleMenu}>
-          <Link href="/CambiarPass" className="links">
-            <span> Cambiar contraseña</span>
+          <Link href="/AgregarEquipo" className="links">
+            <span>Agregar equipo</span>
           </Link>
         </li>
+        {/* ✅ Botón directo, sin onClick en el <li> */}
+        <li>
+          <button className="logout-button" onClick={cerrarSesion}>
+            Cerrar sesión
+          </button>
+        </li>
       </ul>
     </nav>
   );
 }
 
 export default BarNavigation;
-//IO

src/components/Login.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useState } from "react";
+import "../app/styles/layout/login.scss";
+import "../app/styles/base/globales.scss";
+import Image from "next/image";
+import Link from "next/link";
+
+export default function Login() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    // Autenticacion simulada
+  };
+
+  return (
+    <section className="containerGrid">
+      <div className="login-container">
+        <h2>Inicio de sesión</h2>
+        {error && <p className="error">{error}</p>}
+        <form onSubmit={handleSubmit}>
+          <div>
+            <label>Usuario</label>
+            <input
+              type="email"
+              placeholder="Correo"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+            />
+          </div>
+          <div>
+            <label>Contraseña</label>
+            <input
+              type="password"
+              placeholder="Contraseña"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+          </div>
+          <button type="submit">Iniciar sesión</button>
+          <Link href={"#"}>Olvidaste Contraseña?</Link>
+          <Link href={"#"}>Crear Cuenta</Link>
+        </form>
+      </div>
+
+      <div className="image-collage">
+        <div className="collage-item collage-1">
+          <Image src="/Piedra.jpg" alt="UNAM Icatlán" fill style={{ objectFit: 'cover' }} />
+        </div>
+        <div className="collage-item collage-2">
+          <Image src="/image 1.png" alt="UNAM Icatlán" fill style={{ objectFit: 'cover' }} />
+        </div>
+        <div className="collage-item collage-3">
+          <Image src="/estrella.jpg" alt="UNAM Icatlán" fill style={{ objectFit: 'cover' }} />
+        </div>
+        <div className="collage-item collage-4">
+          <Image src="/sorjuana.jpg" alt="UNAM Icatlán" fill style={{ objectFit: 'cover' }} />
+        </div>
+        <div className="collage-item collage-5">
+          <Image src="/fes.jpg" alt="UNAM Icatlán" fill style={{ objectFit: 'cover' }} />
+        </div>
+        <div className="collage-item collage-6">
+          <Image src="/picachu.jpg" alt="UNAM Icatlán" fill style={{ objectFit: 'cover' }} />
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/header.tsx

@@ -1,6 +1,6 @@
 "use client";
 import Image from "next/image";
-import header from "../app/styles/components/header.module.scss";
+import header from "../app/styles/layout/header.module.scss";
 import Link from "next/link";
 import BarNavigation from "./BarNavigation";
 
@@ -18,10 +18,10 @@ function Header() {
       >
         <Image
           className={header.logo}
-          src="/logo_fes.png"
+          src="/logo-blanco.png"
           alt="Logo FES"
-          width={200}
-          height={50}
+          width={250}
+          height={70}
         />
       </Link>
       <div className={header.yellowPart}></div>
@@ -30,7 +30,7 @@ function Header() {
           display: "flex",
           width: "100%",
           marginLeft: "40px",
-          marginTop: "45px",
+          marginTop: "40px",
           maxHeight: "50%",
           alignItems: "end",
         }}
@@ -43,4 +43,4 @@ function Header() {
 }
 
 export default Header;
-//IO
+//IO