From 1fde69d3216e61785c2afd35320b7c0f305a9c22 Mon Sep 17 00:00:00 2001
From: jls846 <jlussanchez123@gmail.com>
Date: Wed, 29 Oct 2025 19:37:59 -0600
Subject: [PATCH] vista crearCuenta y forgot_Password agregados

---
 src/app/(Operador)/Escaner/page.tsx |   2 +-
 src/app/crearCuenta/page.tsx        | 124 ++++++++++++++++++++++++++++
 src/app/forgotPassword/page.tsx     |  80 ++++++++++++++++++
 src/app/login/Login.tsx             |   6 +-
 4 files changed, 208 insertions(+), 4 deletions(-)
 create mode 100644 src/app/crearCuenta/page.tsx
 create mode 100644 src/app/forgotPassword/page.tsx

diff --git a/src/app/(Operador)/Escaner/page.tsx b/src/app/(Operador)/Escaner/page.tsx
index fdf5936..d59b7d4 100644
--- a/src/app/(Operador)/Escaner/page.tsx
+++ b/src/app/(Operador)/Escaner/page.tsx
@@ -41,7 +41,7 @@ export default function Dashboard() {
     }
   };
 
-  // 🔒 Cerrar sesión
+  //  Cerrar sesión
   const cerrarSesion = () => {
     localStorage.removeItem("loggedIn");
     router.push("/");
diff --git a/src/app/crearCuenta/page.tsx b/src/app/crearCuenta/page.tsx
new file mode 100644
index 0000000..5cd4415
--- /dev/null
+++ b/src/app/crearCuenta/page.tsx
@@ -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;
\ No newline at end of file
diff --git a/src/app/forgotPassword/page.tsx b/src/app/forgotPassword/page.tsx
new file mode 100644
index 0000000..98e3cf1
--- /dev/null
+++ b/src/app/forgotPassword/page.tsx
@@ -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>
+  );
+}
diff --git a/src/app/login/Login.tsx b/src/app/login/Login.tsx
index 1e9d988..081dcfa 100644
--- a/src/app/login/Login.tsx
+++ b/src/app/login/Login.tsx
@@ -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>