Formulario de REGISTRO ya probado

.gitignore

@@ -0,0 +1,7 @@
+# esto es lo que se va a ignorar, solo hay que agregarlo a la list
+
+
+Leer/
+node_modules/
+client/node_modules/
+*.docx

client/src/App.jsx

@@ -1,10 +1,12 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { AuthProvider } from "./context/AuthContext"
 
 import RegisterPage from "./pages/RegisterPage"
 import LoginPage from "./pages/LoginPage"
 
 function App() {
   return (
+    <AuthProvider>
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<h1>Home Page</h1>} />
@@ -16,44 +18,8 @@ function App() {
           <Route path="/profile" element={<h1>Profile</h1>} />
         </Routes>
       </BrowserRouter>
-  )
-}
-
-export default App
-
-
-
-/*function App (){
-  return (
-    <div>
-<h1 className="text-4xl font-bold">ESTA ES MI APP</h1>  
-</div>
-  );
-};
-
-export default App;*/
-
-/*import { BrowserRouter, Routes, Route } from 'react-router-dom'
-import { AuthProvider } from "./context/AuthContext"
-
-import RegisterPage from "./pages/RegisterPage"
-import LoginPage from "./pages/LoginPage"
-
-function App() {
-  return (
-    <AuthProvider>
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<h1>Home Page</h1>} />
-          <Route path="/login" element={<LoginPage />} />
-          <Route path="/register" element={<RegisterPage />} />
-          <Route path="/task" element={<h1>Task</h1>} />
-          <Route path="/add-task/:id" element={<h1>Add Task</h1>} />
-          <Route path="/profile" element={<h1>Profile</h1>} />
-        </Routes>
-      </BrowserRouter>
     </AuthProvider>
-  );
+  )
 }
 
-export default App*/
+export default App

client/src/context/AuthContext.jsx

@@ -1,5 +1,5 @@
-import { createContext, useState, useContext } from 'react';
-import { registerRequest } from "../api/auth";
+import { createContext, useState, useContext } from "react";
+import { registerRequest } from '../api/auth';
 
 export const AuthContext = createContext();
 
@@ -14,27 +14,29 @@ export const useAuth = () => {
 export const AuthProvider = ({ children }) => {
   const [user, setUser] = useState(null);
   const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [errors, setErrors] = useState([]);
 
   const signup = async (user) => {
-    try {
+    try{
       const res = await registerRequest(user);
       console.log(res.data);
       setUser(res.data);
       setIsAuthenticated(true);
-    } catch (error) {
-      console.log(error);
+
+    }catch(error){
+      console.log(error.response.data);
+      setErrors(error.response.data)
     }
   };
-
   return (
-    <AuthContext.Provider
-      value={{
-        signup,
-        user,
-        isAuthenticated,
-      }}
-    >
-      {children}
+  <AuthContext.Provider value={{
+    signup, 
+    user, 
+    isAuthenticated,
+    errors
+  }}
+  >
+    {children}
     </AuthContext.Provider>
-  );
+    );
 };

client/src/main.jsx

@@ -10,7 +10,8 @@ ReactDOM.createRoot(document.getElementById('root')).render(
   </React.StrictMode>
 )
 
-/*import { StrictMode } from 'react'
+/*
+import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.jsx'

client/src/pages/RegisterPage.jsx

@@ -1,14 +1,76 @@
+import { useForm } from "react-hook-form";
+import { useAuth } from "../context/AuthContext";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
 function RegisterPage() {
+  const {register, handleSubmit,formState:{errors}, } = useForm();
+  const { signup, isAuthenticated, errors: registerErrors } = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (isAuthenticated) navigate("/tasks");
+  }, [isAuthenticated]);
+
+  const onSubmit = handleSubmit(async (values) => {
+    signup(values);
+
+  });
+
   return (
-    <div>
-      <h1>Register Page Activo</h1> 
+    <div className="bg-zinc-800 max-w-md p-10 rounded-md">
+
+      <h1>FORMULARIO DE REGISTRO</h1>
+
+{
+  registerErrors.map((error, i) => (
+    <div className="bg-red-500 p-2 text-white" key={i}>
+      {error}
+    </div> 
+  ))
+}
+
+      <form onSubmit={onSubmit}>
+        <input
+          type="text"
+          {...register("username", { required: true })}
+          className="w-full bg-zinc-700 text-white px-4 py-2 rounded-md my-2 "
+          placeholder="username"
+        />
+        {errors.username && (
+          <p className="text-red-500">Usuario es requerido</p>
+        )}
+
+        <input
+          type="email"
+          {...register("email", { required: true })}
+          className="w-full bg-zinc-700 text-white px-4 py-2 rounded-md my-2"
+          placeholder="email"
+        />
+        {errors.email && (
+          <p className="text-red-500">email es requerido</p>
+        )}
+
+        <input
+          type="password"
+          {...register("password", { required: true })}
+          className="w-full bg-zinc-700 text-white px-4 py-2 rounded-md my-2"
+          placeholder="password"
+        />
+        {errors.password && (
+          <p className="text-red-500">Password es requerido</p>
+        )}
+
+        <button type="submit">REGISTER</button>
+      </form>
     </div>
   );
 }
 
 export default RegisterPage;
 
-/*import { useForm } from "react-hook-form";
+/*
+import { useForm } from "react-hook-form";
 import { useAuth } from "../context/AuthContext";
 import { useEffect } from "react";
 import { userNavigate } from "react-router-dom";