IO/front-Censo
2
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

create new component call login

Browse Source
This commit is contained in:
Lino
2025-10-23 14:58:17 -06:00
parent a058b2d126
commit 9f45a40eff
6 changed files with 47 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/page.tsx
+4 -39
View File
@@ -1,40 +1,5 @@
"use client"; // <-- OBLIGATORIO
import Login from "@/components/Login";
import { useState } from "react";
import { useRouter } from "next/navigation";
import "../app/styles/layout/login.scss";
export default function Login() {
const router = useRouter();
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const mockUsers = [
{ email: "admin@escuela.com", password: "1234" },
{ email: "usuario@escuela.com", password: "abcd" },
];
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const user = mockUsers.find(u => u.email === email && u.password === password);
if (user) {
localStorage.setItem("loggedIn", "true");
router.push("/dashboard");
} else {
setError("Usuario o contraseña incorrectos");
}
};
return (
<div className="login-container">
<h2>Iniciar sesión</h2>
{error && <p className="error">{error}</p>}
<form onSubmit={handleSubmit}>
<input type="email" placeholder="Correo" value={email} onChange={(e) => setEmail(e.target.value)} required />
<input type="password" placeholder="Contraseña" value={password} onChange={(e) => setPassword(e.target.value)} required />
<button type="submit">Ingresar</button>
</form>
</div>
);
}
export default function page() {
return <Login />;
}
src/app/styles/layout/BarNavigation.scss
-9
View File
@@ -24,10 +24,6 @@
font-size: 1.5rem;
}
.barNavigation li:hover {
background-color: #bd8c01;
}
.barNavigation ul.active {
display: flex;
width: 100%;
@@ -109,11 +105,6 @@
font-size: 1.5rem;
}
.subMenu:hover > span,
.subMenu > a:hover > span {
color: white;
}
.containerLinks {
padding: 0 !important;
border-radius: 0 0 4px 4px;
src/app/styles/layout/header.module.scss
+2 -2
View File
@@ -45,7 +45,7 @@
.header::after {
content: "";
top: 0;
left: -40px;
left: -60px;
position: absolute;
background-color: #003e79;
height: 100%;
@@ -57,7 +57,7 @@
.header::before {
content: "";
top: 0;
left: -20px;
left: -40px;
position: absolute;
background-color: rgb(1, 92, 184);
height: 100%;
src/app/styles/layout/login.scss
+1 -1
View File
@@ -1,7 +1,7 @@
.login-container {
width: 300px;
margin: 100px auto;
padding: 30px;
padding: 2rem;
border: 1px solid #ccc;
border-radius: 10px;
background: #f8f9fa;
src/components/BarNavigation.tsx
+1 -63
View File
@@ -23,68 +23,6 @@ function BarNavigation() {
</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>
@@ -101,4 +39,4 @@ function BarNavigation() {
}
export default BarNavigation;
//IO
//IO
src/components/Login.tsx
+39
View File
@@ -0,0 +1,39 @@
"use client";
import { useState } from "react";
import "../app/styles/layout/login.scss";
export default function Login() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
};
return (
<div className="login-container">
<h2>Iniciar sesión</h2>
{error && <p className="error">{error}</p>}
<form onSubmit={handleSubmit}>
<input
type="email"
placeholder="Correo"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<input
type="password"
placeholder="Contraseña"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<button type="submit">Ingresar</button>
</form>
</div>
);
}