vista crearCuenta y forgot_Password agregados

This commit is contained in:
jls846
2025-10-29 19:37:59 -06:00
parent 3f8f73db89
commit 1fde69d321
4 changed files with 208 additions and 4 deletions
+1 -1
View File
@@ -41,7 +41,7 @@ export default function Dashboard() {
}
};
// 🔒 Cerrar sesión
// Cerrar sesión
const cerrarSesion = () => {
localStorage.removeItem("loggedIn");
router.push("/");
+124
View File
@@ -0,0 +1,124 @@
"use client";
import { useState } from "react";
import "../styles/layout/login.scss"; // puedes usar los mismos estilos
import "../styles/base/globales.scss";
import Link from "next/link";
import axios from "axios";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";
function CrearCuenta() {
const [nombre, setNombre] = useState("");
const [correo, setCorreo] = useState("");
const [password, setPassword] = useState("");
const [confirmarPassword, setConfirmarPassword] = useState("");
const [loading, setLoading] = useState(false);
const router = useRouter();
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (password !== confirmarPassword) {
toast.error("Las contraseñas no coinciden");
return;
}
setLoading(true);
try {
const response = await axios.post(
`${process.env.NEXT_PUBLIC_API_URL}/auth/register`,
{
nombre,
correo,
contraseña: password,
}
);
toast.success("Cuenta creada correctamente");
router.push("/"); // redirige al login
} catch (err: unknown) {
if (axios.isAxiosError(err)) {
if (err.response) {
toast.error(
err.response.data?.message || "Error al crear la cuenta"
);
} else if (err.request) {
toast.error("No se pudo conectar con el servidor");
} else {
toast.error("Ocurrió un error inesperado");
}
} else {
toast.error("Ocurrió un error inesperado");
}
} finally {
setLoading(false);
}
};
return (
<section className="containerGrid">
<div className="login-container">
<h2>Crear cuenta</h2>
<form onSubmit={handleSubmit}>
<div>
<label>Nombre de usuario</label>
<input
type="text"
placeholder="Escribe tu nombre"
value={nombre}
onChange={(e) => setNombre(e.target.value)}
required
/>
</div>
<div>
<label>Correo electrónico</label>
<input
type="email"
placeholder="Tu correo"
value={correo}
onChange={(e) => setCorreo(e.target.value)}
required
/>
</div>
<div>
<label>Contraseña</label>
<input
type="password"
placeholder="Crea una contraseña"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
<div>
<label>Confirmar contraseña</label>
<input
type="password"
placeholder="Repite tu contraseña"
value={confirmarPassword}
onChange={(e) => setConfirmarPassword(e.target.value)}
required
/>
</div>
<button type="submit" disabled={loading}>
{loading ? "Creando cuenta..." : "Registrarse"}
</button>
<Link href="/">¿Ya tienes cuenta? Inicia sesión</Link>
</form>
</div>
</section>
);
}
export default CrearCuenta;
+80
View File
@@ -0,0 +1,80 @@
"use client";
import { useState } from "react";
import axios from "axios";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";
import "../styles/base/globales.scss"; // ajusta ruta si tu proyecto la tiene en otro sitio
export default function ForgotPasswordPage() {
const [email, setEmail] = useState("");
const [loading, setLoading] = useState(false);
const router = useRouter();
const validateEmail = (e: string) => {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
};
const handleSubmit = async (ev: React.FormEvent<HTMLFormElement>) => {
ev.preventDefault();
if (!validateEmail(email)) {
toast.error("Ingresa un correo válido.");
return;
}
try {
setLoading(true);
const res = await axios.post("/api/auth/forgot-password", { email });
if (res.status === 200) {
toast.success("Si existe esa cuenta, recibirás un correo con instrucciones.");
// Opcional: redirigir al login después de enviar
setTimeout(() => router.push("/"), 1200);
} else {
toast.error("Ocurrió un error. Intenta de nuevo.");
}
} catch (error:any ) {
// manejar mensajes de error desde el servidor si vienen
const msg = error?.response?.data?.message ?? "Error al enviar el correo.";
toast.error(msg);
} finally {
setLoading(false);
}
};
return (
<main className="forgot-password-page" style={{ maxWidth: 520, margin: "4rem auto", padding: "1.5rem" }}>
<h1>¿Olvidaste tu contraseña?</h1>
<p>Escribe el correo asociado a tu cuenta y te enviaremos instrucciones para restablecerla.</p>
<form onSubmit={handleSubmit} className="forgot-form" style={{ display: "grid", gap: 12 }}>
<label htmlFor="email">Correo electrónico</label>
<input
id="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="tu@correo.com"
required
style={{ padding: "0.6rem", borderRadius: 8, border: "1px solid #ccc" }}
/>
<button
type="submit"
disabled={loading}
style={{
padding: "0.7rem 1rem",
borderRadius: 8,
border: "none",
cursor: loading ? "not-allowed" : "pointer"
}}
>
{loading ? "Enviando..." : "Enviar instrucciones"}
</button>
<div style={{ marginTop: 8 }}>
<a href="/">Recordé mi contraseña Iniciar sesión</a>
</div>
</form>
</main>
);
}
+3 -3
View File
@@ -32,7 +32,7 @@ export default function Login() {
document.cookie = `token=${token}; path=/; SameSite=Strict`;
router.push("/Escaner");
} catch (err: any) {
} catch (err: unknown) {
if (axios.isAxiosError(err)) {
if (err.response) {
toast.error(
@@ -77,8 +77,8 @@ export default function Login() {
/>
</div>
<button type="submit">Iniciar sesión</button>
<Link href={"#"}>Olvidaste Contraseña?</Link>
<Link href={"#"}>Crear Cuenta</Link>
<Link href={"/forgotPassword"}>Olvidaste Contraseña?</Link>
<Link href={"/crearCuenta"}>Crear Cuenta</Link>
</form>
</div>