evenegas
90 lines
2.5 KiB
TypeScript
90 lines
2.5 KiB
TypeScript
"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";
|
|
|
|
export default function Page() {
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [error, setError] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
const router = useRouter();
|
|
|
|
const handleLogin = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const response = await axios.post("http://https://venus.acatlan.unam.mx/servicios_pcpuma_test/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("");
|
|
|
|
|
|
|
|
} catch (err: any) {
|
|
const message =
|
|
err.response?.data?.message || err.message || "Error al iniciar sesión";
|
|
setError(message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<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: 0.5 }}
|
|
>
|
|
<h2 className="text-dorado">Bienvenido al sistema de</h2>
|
|
<h1 className="text-dorado">Servicios PC PUMA y CEDETEC</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>}
|
|
|
|
<div className="d-flex gap-3">
|
|
<Button onClick={handleLogin} disabled={loading}>
|
|
{loading ? "Iniciando sesión..." : "Iniciar Sesión"}
|
|
</Button>
|
|
</div>
|
|
</motion.main>
|
|
</>
|
|
);
|
|
}
|