Refactor landing page components and improve session management
- Updated the Dashboard component to simplify layout and styling. - Enhanced IconCircle component with improved CSS for better alignment and display. - Refactored global styles for consistency and clarity. - Improved LandingBody component to utilize Link for navigation. - Revamped Header component to manage navigation state more effectively. - Implemented a new LoginPage component for user authentication. - Introduced useSession hook for managing user session state. - Updated CargaArchivo component to use a consistent Button component. - Enhanced Consulta component for better error handling and display. - Cleaned up Footer component styling and structure.
This commit is contained in:
miguel
Generated
+10
@@ -12,6 +12,7 @@
|
||||
"bootstrap": "^5.3.6",
|
||||
"bootstrap-icons": "^1.13.1",
|
||||
"framer-motion": "^12.18.1",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"next": "15.3.3",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
@@ -1193,6 +1194,15 @@
|
||||
"node": ">=0.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/jwt-decode": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
|
||||
"integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/math-intrinsics": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
"bootstrap": "^5.3.6",
|
||||
"bootstrap-icons": "^1.13.1",
|
||||
"framer-motion": "^12.18.1",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"next": "15.3.3",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
|
||||
+42
-68
@@ -10,61 +10,38 @@ import { motion } from "framer-motion";
|
||||
|
||||
// Estilos CSS adicionales para el input group
|
||||
const inputGroupStyles = `
|
||||
.auth-page .input-group {
|
||||
display: flex !important;
|
||||
align-items: stretch !important;
|
||||
}
|
||||
|
||||
.auth-page .input-group .form-control {
|
||||
border-right: none !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.auth-page .input-group .btn {
|
||||
border-left: none !important;
|
||||
border-top-left-radius: 0 !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
padding: 0.375rem 0.75rem !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
min-width: 40px !important;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
|
||||
export default function Page() {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const router = useRouter();
|
||||
|
||||
const handleLogin = async () => {
|
||||
try {
|
||||
const response = await axios.post('http://localhost:4000/login', {
|
||||
const response = await axios.post("http://localhost:4000/login", {
|
||||
email: email,
|
||||
password: password,
|
||||
});
|
||||
|
||||
const token = response.data.access_token;
|
||||
localStorage.setItem('token', token);
|
||||
localStorage.setItem("token", token);
|
||||
|
||||
// Disparar evento personalizado para notificar cambio de token
|
||||
window.dispatchEvent(new Event('tokenChanged'));
|
||||
window.dispatchEvent(new Event("tokenChanged"));
|
||||
|
||||
// Limpiar formulario
|
||||
setEmail('');
|
||||
setPassword('');
|
||||
setError('');
|
||||
|
||||
setEmail("");
|
||||
setPassword("");
|
||||
setError("");
|
||||
|
||||
// Opcional: mostrar mensaje de éxito
|
||||
alert('Login exitoso. Ahora puedes acceder a Carga y Visualización.');
|
||||
alert("Login exitoso. Ahora puedes acceder a Carga y Visualización.");
|
||||
} catch (err: any) {
|
||||
const message =
|
||||
err.response?.data?.message ||
|
||||
err.message ||
|
||||
'Error al iniciar sesión';
|
||||
err.response?.data?.message || err.message || "Error al iniciar sesión";
|
||||
setError(message);
|
||||
}
|
||||
};
|
||||
@@ -72,49 +49,46 @@ export default function Page() {
|
||||
return (
|
||||
<>
|
||||
{/* Inyectar estilos CSS */}
|
||||
<style dangerouslySetInnerHTML={{ __html: inputGroupStyles }} />
|
||||
|
||||
|
||||
<motion.main
|
||||
className="auth-page flex-fill flex-grow-1 d-flex flex-column justify-content-center align-items-center"
|
||||
initial={{ y: 50, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ delay: 0, duration: .5 }}
|
||||
transition={{ delay: 0, duration: 0.5 }}
|
||||
>
|
||||
<h2 className="text-dorado">Bienvenido al sistema de</h2>
|
||||
<h1 className="text-azul">Carga Masiva</h1>
|
||||
<SimpleInput
|
||||
label="Usuario"
|
||||
className={{
|
||||
container: "w-300px mb-3",
|
||||
}}
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
<PasswordInput
|
||||
label="Contraseña"
|
||||
className={{
|
||||
container: "w-300px mb-3",
|
||||
input: "form-control",
|
||||
button: "btn btn-outline-secondary"
|
||||
}}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<p className="text-danger text-center mb-3">{error}</p>
|
||||
)}
|
||||
<h2 className="text-dorado">Bienvenido al sistema de</h2>
|
||||
<h1 className="text-azul">Carga Masiva</h1>
|
||||
<SimpleInput
|
||||
label="Usuario"
|
||||
className={{
|
||||
container: "w-300px mb-3",
|
||||
}}
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
<PasswordInput
|
||||
label="Contraseña"
|
||||
className={{
|
||||
container: "w-300px mb-3",
|
||||
input: "form-control",
|
||||
button: "btn btn-outline-secondary",
|
||||
}}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
|
||||
<div className="d-flex gap-3">
|
||||
<Button onClick={handleLogin}>Iniciar Sesión</Button>
|
||||
{/* <Button
|
||||
{error && <p className="text-danger text-center mb-3">{error}</p>}
|
||||
|
||||
<div className="d-flex gap-3">
|
||||
<Button onClick={handleLogin}>Iniciar Sesión</Button>
|
||||
{/* <Button
|
||||
onClick={() => router.replace("/visualizacion")}
|
||||
className="btn-success"
|
||||
>
|
||||
Iniciar Sin Contraseña
|
||||
</Button> */}
|
||||
</div>
|
||||
</div>
|
||||
</motion.main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
+3
-17
@@ -88,22 +88,8 @@ export default function Dashboard() {
|
||||
if (loading) return <p>Cargando...</p>;
|
||||
|
||||
return (
|
||||
<main
|
||||
className="roboto"
|
||||
style={{
|
||||
minHeight: "100vh",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex gap-4 flex-wrap mb-6"
|
||||
style={{
|
||||
padding: "2rem",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<main>
|
||||
<div className="flex gap-4 flex-wrap mb-6">
|
||||
<h2 className="text-xl font-semibold mb-4">Fuentes</h2>
|
||||
<div
|
||||
style={{
|
||||
@@ -131,7 +117,7 @@ export default function Dashboard() {
|
||||
</div>
|
||||
|
||||
<h2 className="text-xl font-semibold mt-6 mb-4">Descarga de Datos</h2>
|
||||
<Button onClick={handleDownload} className="mb-3">
|
||||
<Button onClick={handleDownload} className="mb-3" variant="azul">
|
||||
Descarga Base de Datos
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -7,32 +7,31 @@
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: 2rem auto;
|
||||
border-radius: 50%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.central-icon {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 40%;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
font-size: 2rem;
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1;
|
||||
}
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
.central-icon i {
|
||||
color: #000; /* Negro para el icono central */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.orbiting-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
@@ -1,92 +1,92 @@
|
||||
// IconCircle.tsx
|
||||
'use client';
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import './IconCircle.css';
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import "./IconCircle.css";
|
||||
|
||||
const iconClasses = [
|
||||
'bi bi-graph-up',
|
||||
'bi bi-lightning-fill',
|
||||
'bi bi-currency-exchange',
|
||||
'bi bi-globe2',
|
||||
'bi bi-bar-chart-line-fill',
|
||||
'bi bi-arrow-left-right',
|
||||
'bi bi-bank',
|
||||
'bi bi-boxes',
|
||||
"bi bi-graph-up",
|
||||
"bi bi-lightning-fill",
|
||||
"bi bi-currency-exchange",
|
||||
"bi bi-globe2",
|
||||
"bi bi-bar-chart-line-fill",
|
||||
"bi bi-arrow-left-right",
|
||||
"bi bi-bank",
|
||||
"bi bi-boxes",
|
||||
];
|
||||
|
||||
interface IconCircleProps {
|
||||
delay?: number;
|
||||
delay?: number;
|
||||
}
|
||||
|
||||
const IconCircle: React.FC<IconCircleProps> = ({ delay = 0 }) => {
|
||||
return (
|
||||
<div className="icon-circle">
|
||||
{/* Icono central fijo */}
|
||||
<motion.div
|
||||
className="central-icon"
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 1, delay }}
|
||||
>
|
||||
<i className="bi bi-stars"></i>
|
||||
</motion.div>
|
||||
return (
|
||||
<div className="icon-circle">
|
||||
{/* Icono central fijo */}
|
||||
<motion.div
|
||||
className="central-icon"
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 1, delay }}
|
||||
>
|
||||
<i className="bi bi-stars"></i>
|
||||
</motion.div>
|
||||
|
||||
{/* Contenedor que orbita con los iconos flotantes */}
|
||||
<motion.div
|
||||
className="orbiting-container"
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{
|
||||
duration: 30,
|
||||
repeat: Infinity,
|
||||
ease: "linear"
|
||||
}}
|
||||
>
|
||||
{iconClasses.map((iconClass, i) => {
|
||||
const angle = (i * 45) * (Math.PI / 180); // Convertir a radianes
|
||||
const radius = 130;
|
||||
const x = Math.cos(angle) * radius;
|
||||
const y = Math.sin(angle) * radius;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="floating-icon"
|
||||
style={{
|
||||
left: x,
|
||||
top: y,
|
||||
}}
|
||||
initial={{
|
||||
scale: 0,
|
||||
opacity: 0,
|
||||
}}
|
||||
animate={{
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
}}
|
||||
transition={{
|
||||
delay: delay + 0.5 + i * 0.1,
|
||||
duration: 0.5,
|
||||
type: 'spring',
|
||||
}}
|
||||
>
|
||||
<motion.i
|
||||
className={iconClass}
|
||||
animate={{
|
||||
rotate: 360
|
||||
}}
|
||||
transition={{
|
||||
duration: 20 + i * 2,
|
||||
repeat: Infinity,
|
||||
ease: "linear"
|
||||
}}
|
||||
></motion.i>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
{/* Contenedor que orbita con los iconos flotantes */}
|
||||
<motion.div
|
||||
className="orbiting-container"
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{
|
||||
duration: 30,
|
||||
repeat: Infinity,
|
||||
ease: "linear",
|
||||
}}
|
||||
>
|
||||
{iconClasses.map((iconClass, i) => {
|
||||
const angle = i * 45 * (Math.PI / 180); // Convertir a radianes
|
||||
const radius = 130;
|
||||
const x = Math.cos(angle) * radius;
|
||||
const y = Math.sin(angle) * radius;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="floating-icon"
|
||||
style={{
|
||||
left: x,
|
||||
top: y,
|
||||
}}
|
||||
initial={{
|
||||
scale: 0,
|
||||
opacity: 0,
|
||||
}}
|
||||
animate={{
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
}}
|
||||
transition={{
|
||||
delay: delay + 0.5 + i * 0.1,
|
||||
duration: 0.5,
|
||||
type: "spring",
|
||||
}}
|
||||
>
|
||||
<motion.i
|
||||
className={iconClass}
|
||||
animate={{
|
||||
rotate: 360,
|
||||
}}
|
||||
transition={{
|
||||
duration: 20 + i * 2,
|
||||
repeat: Infinity,
|
||||
ease: "linear",
|
||||
}}
|
||||
></motion.i>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconCircle;
|
||||
|
||||
+89
-107
@@ -3,120 +3,107 @@
|
||||
margin: none;
|
||||
}
|
||||
|
||||
/* Fondo general y tipografía */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Segoe UI', sans-serif;
|
||||
background: radial-gradient(circle at center, #f8f4ff, hsl(218, 45%, 37%));
|
||||
/* Fondo general y tipografía */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Segoe UI", sans-serif;
|
||||
background: radial-gradient(circle at center, #f8f4ff, hsl(218, 45%, 37%));
|
||||
|
||||
/* background: radial-gradient(circle at center, #f8f4ff, hsl(217, 100%, 89%)); */
|
||||
/* background: radial-gradient(circle at center, #f8f4ff, hsl(217, 100%, 89%)); */
|
||||
|
||||
color: #1a1a1a;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
color: #1a1a1a;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem 2rem;
|
||||
background: transparent;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* Header */
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem 2rem;
|
||||
background: transparent;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
header div:first-child {
|
||||
font-size: 1.5rem;
|
||||
color: #003d79;
|
||||
}
|
||||
header div:first-child {
|
||||
font-size: 1.5rem;
|
||||
color: #003d79;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* sombra suave */
|
||||
display: flex;
|
||||
gap: 1rem; /* espacio entre los <a> */
|
||||
}
|
||||
.nav-links {
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* sombra suave */
|
||||
display: flex;
|
||||
gap: 1rem; /* espacio entre los <a> */
|
||||
}
|
||||
|
||||
header a {
|
||||
margin: 0 0.75rem;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
header a {
|
||||
margin: 0 0.75rem;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
header button {
|
||||
margin-left: 0.5rem;
|
||||
padding: 0.4rem 1rem;
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
header button {
|
||||
margin-left: 0.5rem;
|
||||
padding: 0.4rem 1rem;
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
header button:first-of-type {
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
color: #555;
|
||||
}
|
||||
header button:first-of-type {
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
header button:last-of-type {
|
||||
background-color: #0033ff;
|
||||
color: white;
|
||||
}
|
||||
header button:last-of-type {
|
||||
background-color: #0033ff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Texto principal */
|
||||
strong {
|
||||
display: block;
|
||||
font-size: 2.5rem;
|
||||
margin: 2rem 0 1rem;
|
||||
}
|
||||
/* Texto principal */
|
||||
strong {
|
||||
display: block;
|
||||
font-size: 2.5rem;
|
||||
margin: 2rem 0 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
color: #555;
|
||||
/* max-width: 600px; */
|
||||
margin: 0 auto 1rem;
|
||||
}
|
||||
p {
|
||||
font-size: 1rem;
|
||||
color: #555;
|
||||
/* max-width: 600px; */
|
||||
margin: 0 auto 1rem;
|
||||
}
|
||||
|
||||
/* Botón principal */
|
||||
div > button {
|
||||
margin-top: 1rem;
|
||||
background-color: #003d79;
|
||||
color: white;
|
||||
padding: 0.7rem 2rem;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* Botón principal */
|
||||
div > button {
|
||||
background-color: #003d79;
|
||||
color: white;
|
||||
padding: 0.7rem 2rem;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Texto de "years of reliability" */
|
||||
div > div {
|
||||
/* display: flex; */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
div > div p {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
div > div p {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Scroll hint */
|
||||
body > p:last-of-type {
|
||||
margin-top: 2rem;
|
||||
font-size: 0.85rem;
|
||||
color: #aaa;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
/* Scroll hint */
|
||||
body > p:last-of-type {
|
||||
margin-top: 2rem;
|
||||
font-size: 0.85rem;
|
||||
color: #aaa;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.circle-background {
|
||||
margin-top: 0;
|
||||
@@ -125,7 +112,7 @@
|
||||
top: none;
|
||||
left: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: 100vh;
|
||||
z-index: -1; /* para que esté detrás de todo */
|
||||
pointer-events: none; /* no interfiere con el contenido */
|
||||
display: flex;
|
||||
@@ -142,11 +129,6 @@
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.invert {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,11 +3,15 @@
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import IconCircle from "./IconCircle";
|
||||
import Button from "@/components/button";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function LandingBody() {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<motion.main
|
||||
className="flex-fill"
|
||||
className="overflow-hidden"
|
||||
initial={{ y: 50, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ delay: 1, duration: 1 }}
|
||||
@@ -16,15 +20,19 @@ export default function LandingBody() {
|
||||
|
||||
<strong>Servicios de soporte técnico PCPUMA</strong>
|
||||
<p>
|
||||
Accede a PC PUMA Conecta para reportes especializados, módulos de soporte físico
|
||||
en campus, servicio de correo institucional y herramientas de gestión académica.
|
||||
|
||||
Accede a PC PUMA Conecta para reportes especializados, módulos de
|
||||
soporte físico en campus, servicio de correo institucional y
|
||||
herramientas de gestión académica.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<button onClick={() => window.open('https://www.acatlan.unam.mx/pcpuma/', '_blank')}>
|
||||
<Link
|
||||
href="https://www.acatlan.unam.mx/pcpuma/"
|
||||
target="_blank"
|
||||
className="btn btn-azul btn-lg rounded-pill mt-3"
|
||||
>
|
||||
Conoce PCPUMA
|
||||
</button>
|
||||
</Link>
|
||||
<div>
|
||||
<i></i>
|
||||
</div>
|
||||
|
||||
@@ -3,49 +3,31 @@
|
||||
import { motion } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
import { PageKey } from "../page";
|
||||
|
||||
|
||||
|
||||
interface HeaderProps {
|
||||
onNavClick: (page: any) => void;
|
||||
interface HeaderItem {
|
||||
label: string;
|
||||
page?: PageKey;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
interface HeaderProps {
|
||||
items: HeaderItem[];
|
||||
onClickItem: (page: PageKey) => void;
|
||||
}
|
||||
|
||||
export default function Header({ items, onClickItem }: HeaderProps) {
|
||||
const [currentPage, setCurrentPage] = useState<PageKey>("landing");
|
||||
|
||||
export default function Header({ onNavClick }: HeaderProps) {
|
||||
const [hasToken, setHasToken] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Función para verificar token
|
||||
const checkToken = () => {
|
||||
const token = localStorage.getItem('token');
|
||||
setHasToken(!!token);
|
||||
};
|
||||
|
||||
// Verificar token al montar
|
||||
checkToken();
|
||||
|
||||
// Escuchar cambios en localStorage
|
||||
const handleStorageChange = (e: StorageEvent) => {
|
||||
if (e.key === 'token') {
|
||||
checkToken();
|
||||
}
|
||||
};
|
||||
|
||||
// Escuchar evento personalizado para cambios de token
|
||||
const handleTokenChange = () => {
|
||||
checkToken();
|
||||
};
|
||||
|
||||
window.addEventListener('storage', handleStorageChange);
|
||||
window.addEventListener('tokenChanged', handleTokenChange);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('storage', handleStorageChange);
|
||||
window.removeEventListener('tokenChanged', handleTokenChange);
|
||||
};
|
||||
}, []);
|
||||
const handleItemClick = (item: HeaderItem) => {
|
||||
if (item.onClick) {
|
||||
item.onClick();
|
||||
} else if (item.page) {
|
||||
setCurrentPage(item.page);
|
||||
onClickItem(item.page);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.header
|
||||
@@ -69,33 +51,22 @@ export default function Header({ onNavClick }: HeaderProps) {
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* <div className="nav-links">
|
||||
<a href="">Trading</a>
|
||||
<a href="">Platforms</a>
|
||||
<a href="">Tools & Education</a>
|
||||
<a href="">About Us</a>
|
||||
<a href="">Partners</a>
|
||||
<a href="">Login</a>
|
||||
</div> */}
|
||||
|
||||
|
||||
|
||||
<nav className="nav-links">
|
||||
{[
|
||||
{ label: "Inicio", page: "landing" },
|
||||
{ label: "Login", page: "login", isLogin: true },
|
||||
{ label: "Consulta", page: "consulta" },
|
||||
|
||||
...(hasToken ? [
|
||||
{ label: "Carga", page: "carga" },
|
||||
|
||||
] : [])
|
||||
].map((item) => (
|
||||
{items.map((item) => (
|
||||
<a
|
||||
key={item.page}
|
||||
onClick={() => onNavClick(item.page)}
|
||||
className={item.isLogin ? "text-dorado fw-bold" : ""}
|
||||
style={item.isLogin ? { color: '#fbbf24', fontWeight: 'bold' } : {}}
|
||||
key={item.label}
|
||||
onClick={() => handleItemClick(item)}
|
||||
className={
|
||||
item.page && currentPage === item.page
|
||||
? "text-dorado fw-bold"
|
||||
: ""
|
||||
}
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
...(item.page && currentPage === item.page
|
||||
? { color: "#fbbf24", fontWeight: "bold" }
|
||||
: {}),
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
|
||||
+16
-43
@@ -1,14 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import "./globals.css";
|
||||
import "bootstrap-icons/font/bootstrap-icons.css";
|
||||
import IconCircle from "./IconCircle";
|
||||
import { motion } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
|
||||
import Header from "./new_header"; // ajusta la ruta si estás en otra carpeta
|
||||
import Footer from "@/components/layout/footer";
|
||||
import LandingBody from "./landing_body";
|
||||
import { useState } from "react";
|
||||
@@ -16,26 +10,20 @@ import Page from "../(auth)/page";
|
||||
import Dashboard from "../carga/page";
|
||||
import Consulta from "../visualizacion/page";
|
||||
|
||||
|
||||
type PageKey = "landing" | "login" | "carga" | "consulta" | "publico";
|
||||
|
||||
|
||||
const Home = () => {
|
||||
|
||||
|
||||
const [page, setPage] = useState<PageKey>("landing");
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1 }}
|
||||
className="page-wrapper d-flex flex-column min-vh-100"
|
||||
className="min-vh-100 d-flex flex-column"
|
||||
>
|
||||
{/* <Header onNavClick={setPage} /> */}
|
||||
|
||||
<div className="circle-background">
|
||||
{[150, 300, 450, 600, 900].map((size, i) => (
|
||||
<motion.div
|
||||
@@ -44,7 +32,7 @@ const Home = () => {
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 3 }}
|
||||
transition={{
|
||||
delay: 1 + i * 0.3, // empieza después de la animación del texto
|
||||
delay: 1 + i * 0.3,
|
||||
duration: 2,
|
||||
ease: "easeOut",
|
||||
}}
|
||||
@@ -56,37 +44,22 @@ const Home = () => {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* ⬇️ Tu contenido principal */}
|
||||
<Header onNavClick={setPage} />
|
||||
<div className="flex-grow-1 d-flex flex-column align-items-center justify-content-center text-center">
|
||||
{/* renderiza el body según el estado `page` */}
|
||||
{page === "landing" && <LandingBody />}
|
||||
{page === "login" && <Page />}
|
||||
{page === "carga" && <Dashboard />}
|
||||
{page === "consulta" && <Consulta />}
|
||||
</div>
|
||||
|
||||
{/* <LandingBody />*/}
|
||||
{/* renderiza el body según el estado `page` */}
|
||||
{page === "landing" && <LandingBody />}
|
||||
{page === "login" && <Page />}
|
||||
{page === "carga" && <Dashboard />}
|
||||
{/* <Login />
|
||||
|
||||
{page === "consulta" && <Consulta />}
|
||||
<contenidoAdmin1 />
|
||||
<contenidoWorker />
|
||||
<contenidoPublico /> */}
|
||||
|
||||
|
||||
|
||||
{/* <Login />
|
||||
|
||||
|
||||
<contenidoAdmin1 />
|
||||
<contenidoWorker />
|
||||
<contenidoPublico />
|
||||
*/}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<Footer></Footer>
|
||||
<Footer />
|
||||
</motion.div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
+33
-14
@@ -1,15 +1,8 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Roboto } from "next/font/google";
|
||||
|
||||
import 'bootstrap-icons/font/bootstrap-icons.css';
|
||||
import '@/styles/sass/bootstrap.scss';
|
||||
'use client';
|
||||
import "bootstrap-icons/font/bootstrap-icons.css";
|
||||
import "@/styles/sass/bootstrap.scss";
|
||||
import BootstrapClient from "@/components/bootstrap-client";
|
||||
|
||||
|
||||
const roboto = Roboto({
|
||||
weight: ["100", "300", "400", "500", "700", "900"],
|
||||
subsets: ["latin"],
|
||||
});
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
@@ -18,9 +11,35 @@ export default function RootLayout({
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body >
|
||||
|
||||
{children}
|
||||
<body className="overflow-hidden">
|
||||
<BootstrapClient />
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1 }}
|
||||
className="d-flex flex-column min-vh-100"
|
||||
>
|
||||
<div className="circle-background">
|
||||
{[150, 300, 450, 600, 900].map((size, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="circle"
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 3 }}
|
||||
transition={{
|
||||
delay: 1 + i * 0.3, // empieza después de la animación del texto
|
||||
duration: 2,
|
||||
ease: "easeOut",
|
||||
}}
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{children}
|
||||
</motion.div>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
+39
-70
@@ -1,93 +1,62 @@
|
||||
"use client";
|
||||
|
||||
import "./landing/globals.css";
|
||||
import "bootstrap-icons/font/bootstrap-icons.css";
|
||||
import IconCircle from "./landing/IconCircle";
|
||||
import { motion } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
|
||||
import Header from "./landing/new_header"; // ajusta la ruta si estás en otra carpeta
|
||||
import Header from "./landing/new_header";
|
||||
import Footer from "@/components/layout/footer";
|
||||
import LandingBody from "./landing/landing_body";
|
||||
import { useState } from "react";
|
||||
import Page from "./(auth)/page";
|
||||
import Dashboard from "./carga/page";
|
||||
import Consulta from "./visualizacion/page";
|
||||
import LoginPage from "@/containers/LoginPage";
|
||||
import { useSession } from "@/hooks/use-session";
|
||||
|
||||
export type PageKey = "landing" | "login" | "carga" | "consulta" | "publico";
|
||||
|
||||
type PageKey = "landing" | "login" | "carga" | "consulta" | "publico";
|
||||
|
||||
export interface HeaderItem {
|
||||
label: string;
|
||||
page?: PageKey;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const Home = () => {
|
||||
|
||||
|
||||
const [page, setPage] = useState<PageKey>("landing");
|
||||
const { loading, error, data } = useSession();
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem("token");
|
||||
location.reload();
|
||||
};
|
||||
|
||||
const items: HeaderItem[] = data?.id
|
||||
? [
|
||||
{ label: "Inicio", page: "landing" },
|
||||
{ label: "Consulta", page: "consulta" },
|
||||
{ label: "Carga", page: "carga" },
|
||||
{ label: "Público", page: "publico" },
|
||||
{ label: "Cerrar sesión", onClick: handleLogout },
|
||||
]
|
||||
: [
|
||||
{ label: "Consulta", page: "consulta" },
|
||||
{ label: "Inicio", page: "landing" },
|
||||
{ label: "Login", page: "login" },
|
||||
];
|
||||
|
||||
|
||||
console.log("items", items);
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1 }}
|
||||
className="page-wrapper d-flex flex-column min-vh-100"
|
||||
>
|
||||
<div className="circle-background">
|
||||
{[150, 300, 450, 600, 900].map((size, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="circle"
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 3 }}
|
||||
transition={{
|
||||
delay: 1 + i * 0.3, // empieza después de la animación del texto
|
||||
duration: 2,
|
||||
ease: "easeOut",
|
||||
}}
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<>
|
||||
<Header items={items} onClickItem={setPage} />
|
||||
|
||||
<div className="flex-grow-1 d-flex flex-column align-items-center justify-content-center text-center">
|
||||
{page === "landing" && <LandingBody />}
|
||||
{page === "login" && <LoginPage />}
|
||||
{page === "consulta" && <Consulta />}
|
||||
{page === "carga" && <Dashboard />}
|
||||
</div>
|
||||
|
||||
{/* ⬇️ Tu contenido principal */}
|
||||
<Header onNavClick={setPage} />
|
||||
|
||||
{/* <LandingBody />*/}
|
||||
{/* renderiza el body según el estado `page` */}
|
||||
{page === "landing" && <LandingBody />}
|
||||
{page === "login" && <Page />}
|
||||
{page === "carga" && <Dashboard />}
|
||||
|
||||
{page === "consulta" && <Consulta />}
|
||||
|
||||
|
||||
|
||||
{/* <Login />
|
||||
|
||||
|
||||
<contenidoAdmin1 />
|
||||
<contenidoWorker />
|
||||
<contenidoPublico />
|
||||
*/}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<Footer></Footer>
|
||||
</motion.div>
|
||||
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
export default Home;
|
||||
|
||||
@@ -9,7 +9,7 @@ export default function Consulta() {
|
||||
const [value, setValue] = useState("");
|
||||
const [resultados, setResultados] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!value) {
|
||||
@@ -18,7 +18,7 @@ export default function Consulta() {
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError('');
|
||||
setError("");
|
||||
setResultados([]);
|
||||
|
||||
try {
|
||||
@@ -41,53 +41,31 @@ export default function Consulta() {
|
||||
};
|
||||
|
||||
return (
|
||||
<main
|
||||
className="roboto"
|
||||
style={{
|
||||
minHeight: "100vh",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
padding: "2rem",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex gap-4 flex-wrap mb-6"
|
||||
style={{
|
||||
padding: "2rem",
|
||||
|
||||
width: "100%",
|
||||
maxWidth: "900px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
gap: "16px",
|
||||
flexWrap: "wrap",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<h2 className="text-xl font-semibold mb-4">Visualización De Datos</h2>
|
||||
<main>
|
||||
<div>
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-4">Consulta de servicios</h2>
|
||||
|
||||
<Input
|
||||
label="No.Cuenta"
|
||||
placeholder="Ingresa tu No.Cuenta"
|
||||
value={value}
|
||||
className={{
|
||||
container: "mb-3 text-start",
|
||||
}}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
/>
|
||||
|
||||
<Button onClick={handleSubmit}>
|
||||
{loading ? "Consultando..." : "Enviar Formulario"}
|
||||
{loading ? "Consultando..." : "Consultar"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p style={{ color: "red", marginTop: "0.5rem", textAlign: "center" }}>{error}</p>
|
||||
<p style={{ color: "red", marginTop: "0.5rem", textAlign: "center" }}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{resultados.length > 0 && (
|
||||
@@ -107,7 +85,11 @@ export default function Consulta() {
|
||||
{Object.keys(resultados[0]).map((key) => (
|
||||
<th
|
||||
key={key}
|
||||
style={{ padding: "1rem", textAlign: "left", borderBottom: "1px solid #ccc" }}
|
||||
style={{
|
||||
padding: "1rem",
|
||||
textAlign: "left",
|
||||
borderBottom: "1px solid #ccc",
|
||||
}}
|
||||
>
|
||||
{key.toUpperCase()}
|
||||
</th>
|
||||
@@ -118,7 +100,13 @@ export default function Consulta() {
|
||||
{resultados.map((item, idx) => (
|
||||
<tr key={idx}>
|
||||
{Object.values(item).map((val, i) => (
|
||||
<td key={i} style={{ padding: "0.75rem", borderBottom: "1px solid #eee" }}>
|
||||
<td
|
||||
key={i}
|
||||
style={{
|
||||
padding: "0.75rem",
|
||||
borderBottom: "1px solid #eee",
|
||||
}}
|
||||
>
|
||||
{String(val)}
|
||||
</td>
|
||||
))}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import Button from "./button";
|
||||
|
||||
const CargaArchivo: React.FC = () => {
|
||||
const [archivo, setArchivo] = useState<File | null>(null);
|
||||
@@ -34,7 +35,9 @@ const CargaArchivo: React.FC = () => {
|
||||
const data = await res.json();
|
||||
|
||||
if (res.ok) {
|
||||
alert(`Archivo subido correctamente (ID Movimiento: ${data.id_movimiento})`);
|
||||
alert(
|
||||
`Archivo subido correctamente (ID Movimiento: ${data.id_movimiento})`
|
||||
);
|
||||
setArchivo(null);
|
||||
if (data.errors && data.errors.length > 0) {
|
||||
setErrores(data.errors); // ← Mostrar ventana si hay errores
|
||||
@@ -56,29 +59,22 @@ const CargaArchivo: React.FC = () => {
|
||||
onChange={handleChange}
|
||||
className="mb-4 block text-sm"
|
||||
/>
|
||||
<button
|
||||
onClick={handleUpload}
|
||||
disabled={!archivo}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
|
||||
style={{
|
||||
backgroundColor: "#2563eb",
|
||||
color: "#fff",
|
||||
}}
|
||||
>
|
||||
<Button onClick={handleUpload} disabled={!archivo} variant="azul">
|
||||
Subir archivo
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
{/* Modal de errores */}
|
||||
{errores && (
|
||||
<div className="fixed top-10 right-10 bg-white border border-red-400 text-red-700 p-4 rounded-lg shadow-lg w-96 z-50">
|
||||
<div className="">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<strong className="text-lg">Reporte de Errores</strong>
|
||||
<button
|
||||
<Button
|
||||
variant="danger"
|
||||
onClick={() => setErrores(null)}
|
||||
className="text-red-600 font-bold text-xl hover:text-red-800"
|
||||
className="text-sm"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<i className="fas fa-times"></i>
|
||||
</Button>
|
||||
</div>
|
||||
<ul className="list-disc list-inside text-sm max-h-60 overflow-y-auto">
|
||||
{errores.map((error, index) => (
|
||||
|
||||
@@ -1,15 +1,12 @@
|
||||
import React from "react";
|
||||
|
||||
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
|
||||
export default function Footer() {
|
||||
const date = new Date();
|
||||
const year = date.getFullYear();
|
||||
|
||||
return (
|
||||
return (
|
||||
<motion.footer
|
||||
// Empieza 50px abajo y totalmente transparente
|
||||
initial={{ y: 50, opacity: 0 }}
|
||||
@@ -17,7 +14,7 @@ return (
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
// Retraso para que aparezca justo después del main
|
||||
transition={{ delay: 2, duration: 1, ease: "easeOut" }}
|
||||
className="p-3 text-center small text-muted opacity-50"
|
||||
className="p-3 text-center small text-muted"
|
||||
>
|
||||
<p className="mb-1">
|
||||
Hecho en México. Todos los derechos reservados 2025.
|
||||
@@ -29,5 +26,5 @@ return (
|
||||
institución.
|
||||
</p>
|
||||
</motion.footer>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
+12
-29
@@ -1,10 +1,9 @@
|
||||
'use client';
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState } from "react";
|
||||
|
||||
export interface PasswordInputProps
|
||||
extends Omit<
|
||||
React.InputHTMLAttributes<HTMLInputElement>,
|
||||
'type' | 'className'
|
||||
"type" | "className"
|
||||
> {
|
||||
/**
|
||||
* Texto de la etiqueta asociada al input (opcional).
|
||||
@@ -33,53 +32,37 @@ export default function PasswordInput(props: PasswordInputProps) {
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
// Determina el tipo de input según el estado de visibilidad
|
||||
const inputType = visible ? 'text' : 'password';
|
||||
const inputType = visible ? "text" : "password";
|
||||
const inputId =
|
||||
id ||
|
||||
name ||
|
||||
(label ? `password-${label.replace(/\s+/g, '-')}` : undefined);
|
||||
(label ? `password-${label.toLowerCase().replace(/\s+/g, "-")}` : undefined);
|
||||
|
||||
const toggleVisibility = () => setVisible((v) => !v);
|
||||
|
||||
return (
|
||||
<div className={className?.container || 'mb-3'}>
|
||||
<div className={className?.container || "mb-3"}>
|
||||
{label && inputId && (
|
||||
<label htmlFor={inputId} className={className?.label || 'form-label'}>
|
||||
<label htmlFor={inputId} className={className?.label || "form-label"}>
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
<div className="input-group" style={{ display: 'flex', alignItems: 'stretch' }}>
|
||||
<div className="input-group">
|
||||
<input
|
||||
id={inputId}
|
||||
name={name}
|
||||
type={inputType}
|
||||
className={className?.input || 'form-control'}
|
||||
style={{
|
||||
borderRight: 'none',
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
flex: 1
|
||||
}}
|
||||
className={className?.input || "form-control"}
|
||||
{...rest}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className={className?.button || 'btn btn-light border'}
|
||||
className={className?.button || "btn btn-light border"}
|
||||
onClick={toggleVisibility}
|
||||
aria-label={visible ? 'Ocultar contraseña' : 'Mostrar contraseña'}
|
||||
title={visible ? 'Ocultar contraseña' : 'Mostrar contraseña'}
|
||||
style={{
|
||||
borderLeft: 'none',
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
padding: '0.375rem 0.75rem',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
minWidth: '40px'
|
||||
}}
|
||||
aria-label={visible ? "Ocultar contraseña" : "Mostrar contraseña"}
|
||||
title={visible ? "Ocultar contraseña" : "Mostrar contraseña"}
|
||||
>
|
||||
<i className={`bi ${visible ? 'bi-eye-slash' : 'bi-eye'}`} />
|
||||
<i className={`bi ${visible ? "bi-eye-slash" : "bi-eye"}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
"use client";
|
||||
|
||||
import Button from "@/components/button";
|
||||
import SimpleInput from "@/components/input";
|
||||
import PasswordInput from "@/components/password";
|
||||
import React, { useState } from "react";
|
||||
import axios from "axios";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
// Estilos CSS adicionales para el input group
|
||||
|
||||
export default function LoginPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const router = useRouter();
|
||||
|
||||
const handleLogin = async () => {
|
||||
try {
|
||||
const response = await axios.post("http://localhost:4000/login", {
|
||||
email: email,
|
||||
password: password,
|
||||
});
|
||||
|
||||
const token = response.data.access_token;
|
||||
localStorage.setItem("token", token);
|
||||
|
||||
// Disparar evento personalizado para notificar cambio de token
|
||||
window.dispatchEvent(new Event("tokenChanged"));
|
||||
|
||||
// Limpiar formulario
|
||||
setEmail("");
|
||||
setPassword("");
|
||||
setError("");
|
||||
|
||||
// Opcional: mostrar mensaje de éxito
|
||||
alert("Login exitoso. Ahora puedes acceder a Carga y Visualización.");
|
||||
} catch (err: any) {
|
||||
const message =
|
||||
err.response?.data?.message || err.message || "Error al iniciar sesión";
|
||||
setError(message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.main
|
||||
className="d-flex flex-column justify-content-center align-items-center"
|
||||
initial={{ y: 50, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ delay: 0, duration: 0.5 }}
|
||||
>
|
||||
<h2 className="text-dorado fw-bold">Bienvenido al sistema de</h2>
|
||||
<h1 className="text-azul fw-bold">Carga Masiva</h1>
|
||||
<SimpleInput
|
||||
label="Usuario"
|
||||
className={{
|
||||
container: "w-300px mb-3",
|
||||
}}
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
<PasswordInput
|
||||
label="Contraseña"
|
||||
className={{
|
||||
container: "w-300px mb-3",
|
||||
}}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
|
||||
{error && <p className="text-danger text-center mb-3">{error}</p>}
|
||||
|
||||
<Button onClick={handleLogin} className="rounded-pill" variant="azul">
|
||||
Iniciar Sesión
|
||||
</Button>
|
||||
</motion.main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { jwtDecode } from "jwt-decode";
|
||||
|
||||
interface UserData {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
// ...otros campos que tenga tu token
|
||||
}
|
||||
|
||||
interface SessionState {
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
data: UserData | null;
|
||||
}
|
||||
|
||||
export function useSession(): SessionState {
|
||||
const [state, setState] = useState<SessionState>({
|
||||
loading: true,
|
||||
error: null,
|
||||
data: null,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
const token = localStorage.getItem("token");
|
||||
if (!token) {
|
||||
throw new Error("Token no encontrado");
|
||||
}
|
||||
|
||||
// Descomentar para funcionamiento real
|
||||
/* const decoded = jwtDecode<UserData>(token); */
|
||||
|
||||
setState({
|
||||
loading: false,
|
||||
error: null,
|
||||
data: {
|
||||
id: "12345", // Reemplazar con decoded.id
|
||||
name: "Usuario Ejemplo", // Reemplazar con decoded.name
|
||||
email: ""
|
||||
},
|
||||
});
|
||||
} catch (err: any) {
|
||||
setState({
|
||||
loading: false,
|
||||
error: err.message || "Error al decodificar el token",
|
||||
data: null,
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
return state;
|
||||
}
|
||||
Reference in New Issue
Block a user