Pagina registro

frontend/src/API/Api.js

@@ -3,15 +3,13 @@ const api = axios.create();
 
 const token = import.meta.env.VITE_JWT;
 
-const tokenSesion = () => {
-  const obtenerToken = localStorage.getItem("token");
-  const tokenn = JSON.parse(obtenerToken);
-  return tokenn;
-};
-const lol =tokenSesion();
-console.log( lol.token);
-
-
+// const tokenSesion = () => {
+//   const obtenerToken = localStorage.getItem("token");
+//   const tokenn = JSON.parse(obtenerToken);
+//   return tokenn;
+// };
+// const lol = tokenSesion();
+// console.log(lol.token);
 
 const headers = {
   "Content-Type": "application/json",
@@ -81,7 +79,8 @@ export async function fetchCowboysToday() {
   return resp.data;
 }
 
-// ----Login:
+// -------Login-------
+
 // Usuario y contraseña 🔐
 export async function inicioSesion(sesion) {
   const respuesta = await api.post(
@@ -90,3 +89,12 @@ export async function inicioSesion(sesion) {
   );
   return respuesta.data;
 }
+
+// Registro
+export async function registro(reg) {
+  const respuesta = await api.post(
+    `https://thecowboys.duckdns.org/api/registrar`,
+    reg
+  );
+  return respuesta.data;
+}

frontend/src/Hooks/useObtenerTonto.js

@@ -13,7 +13,7 @@ export const useObtenerTonto = () => {
       setTonto(data);
     } catch (error) {
       setErrorTonto(true);
-      console.log("Error al obtener datos:");
+      console.log("Error al obtener datos:", "Procesando un tonto");
     } finally {
       setCarga(false);
     }

frontend/src/Pagina/InicioDeSesión/Login.jsx

@@ -24,7 +24,7 @@ const Login = () => {
   const [errorInicioSesion, setInicioSesion] = useState(false);
   const navegar = useNavigate();
 
-  const IniciarSesion = async () => {
+  const iniciarSesion = async () => {
     try {
       const sesion = {
         email: email,
@@ -35,7 +35,6 @@ const Login = () => {
       navegar("/");
     } catch (error) {
       setInicioSesion(true);
-      console.log("manco");
     }
   };
 
@@ -44,6 +43,7 @@ const Login = () => {
       <h2>Iniciar Sesión</h2>
       <form>
         <div className="campoLogin">
+          {/* Correo Electrónico */}
           <label htmlFor="email">Correo Electrónico:</label>
           <input
             id="email"
@@ -56,6 +56,7 @@ const Login = () => {
           />
         </div>
         <div className="campoLogin">
+          {/* Contraseña */}
           <label htmlFor="password">Contraseña:</label>
           <input
             id="password"
@@ -72,7 +73,7 @@ const Login = () => {
             <button
               type="button"
               className="btn btn-dark"
-              onClick={IniciarSesion}
+              onClick={iniciarSesion}
             >
               Iniciar Sesión
             </button>
@@ -87,6 +88,7 @@ const Login = () => {
           </strong>
         </p>
       </form>
+      {/* Error */}
       {errorInicioSesion && (
         <p className="errorInicioSesion fondoNav">
           Oops, parece que el usuario o la contraseña no son correctos. ¿Quieres

frontend/src/Pagina/InicioDeSesión/Registro.jsx

@@ -1,40 +1,89 @@
-import { Link } from "react-router-dom";
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { registro } from "../../API/Api";
 
 const Registro = () => {
+  const [email, setEmail] = useState("");
+  const [contraseña1, setContraseña1] = useState("");
+  const [contraseña2, setContraseña2] = useState("");
+  const [errorRegistro, setErrorRegistro] = useState(false);
+  const [errorContraseña, setErrorContraseña] = useState(false);
+  const [errorVacio, setErrorVacio] = useState(false);
+  const navegar = useNavigate();
+
+  const btnRegistro = async () => {
+    setErrorRegistro(false);
+    setErrorContraseña(false);
+    setErrorVacio(false);
+    if (email == "" || contraseña1 == "" || contraseña2 === "") {
+      setErrorVacio(true);
+    } else {
+      if (contraseña1 !== contraseña2) {
+        setErrorContraseña(true);
+        return;
+      }
+      const reg = {
+        email: email,
+        password: contraseña1,
+      };
+      try {
+        await registro(reg);
+        navegar("/");
+      } catch (error) {
+        setErrorRegistro(true);
+      }
+    }
+  };
+
   return (
     <div className="inicioSesion">
       <h2>Registro</h2>
       <form>
         <div className="campoLogin">
+          {/* Correo Electrónico */}
           <label htmlFor="email">Correo Electrónico:</label>
           <input
             id="email"
             type="email"
             name="email"
             placeholder="Ingresa tu correo"
             required
-            // value={email}
-            // onChange={(e) => setEmail(e.target.value)}
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
           />
         </div>
         <div className="campoLogin">
-          <label htmlFor="password">Contraseña:</label>
+          {/* Contraseña 1 */}
+          <label htmlFor="password1">Contraseña:</label>
           <input
-            id="password"
+            id="password1"
             type="password"
             name="contrasena"
             placeholder="Ingresa tu contraseña"
             required
-            // value={contraseña}
-            // onChange={(e) => setContraseña(e.target.value)}
+            value={contraseña1}
+            onChange={(e) => setContraseña1(e.target.value)}
+          />
+        </div>
+        <div className="campoLogin">
+          {/* Contraseña 2 */}
+          <label htmlFor="password2">Contraseña:</label>
+          <input
+            id="password2"
+            type="password"
+            name="contrasena"
+            placeholder="Repita su contraseña"
+            required
+            value={contraseña2}
+            onChange={(e) => setContraseña2(e.target.value)}
           />
         </div>
         <div className="botonLogin">
           <Link>
             <button
               type="button"
               className="btn btn-dark"
-              // onClick={IniciarSesion}
+              onClick={btnRegistro}
             >
               Registrarse
             </button>
@@ -49,6 +98,24 @@ const Registro = () => {
           </strong>
         </p>
       </form>
+      {/* Errores */}
+      {errorRegistro && (
+        <p className="errorInicioSesion fondoNav">
+          Oops, parece que ese correo ya está registrado.
+        </p>
+      )}
+      {errorVacio && (
+        <p className="errorInicioSesion fondoNav">
+          Recuerda completar todos los campos obligatorios antes de entrar en el
+          pueblo.
+        </p>
+      )}
+      {errorContraseña && (
+        <p className="errorInicioSesion fondoNav">
+          Las contraseñas deben coincidir para continuar. ¡Asegurate de que sean
+          iguales!
+        </p>
+      )}
     </div>
   );
 };