add: added register page

front/src/main.tsx

@@ -4,12 +4,18 @@ import './index.css'
 
 import Home from './pages/Home'
 import Login from './pages/Login'
+import Register from './pages/Register'
+import Admin from './pages/Admin'
+import AddUser from './pages/AddUser'
 
 createRoot(document.getElementById('root')!).render(
   <BrowserRouter>
     <Routes>
       <Route path="/" element={<Home />} />
       <Route path="/login" element={<Login />} />
+      <Route path="/register" element={<Register />} />
+      <Route path="/admin" element={<Admin />} />
+      <Route path="/admin/adduser" element={<AddUser />} />
     </Routes>
   </BrowserRouter>,
 )

front/src/pages/AddUser.tsx

@@ -0,0 +1,59 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import axios from 'axios';
+
+export default function AddUser () {
+    const navigate = useNavigate();
+    const [token, setToken] = useState<string>("");
+    const [name, setName] = useState<string>("");
+    const [lastname, setLastname] = useState<string>("");
+    const [email, setEmail] = useState<string>("");
+    const [numero, setNumero] = useState<string>("");
+    const [password, setPassword] = useState<string>("");
+
+    useEffect(() => {
+        const storedToken = localStorage.getItem("token");
+        if (storedToken) {
+            setToken(storedToken);
+        } else {
+            navigate("/login");
+        }
+    }, []);
+
+    function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+        e.preventDefault();
+        if (name === "" || lastname === "" || email === "" || numero === "" || password === "") {
+            alert("Please fill in all fields");
+            return;
+        }
+        axios
+            .post("/api/users/add", {
+                token,
+                name,
+                lastname,
+                email,
+                numero,
+                password
+            })
+            .then(() => {
+                navigate("/admin");
+            })
+            .catch((error) => {
+                console.log(error.response.data);
+            });
+    }
+
+    return (
+        <div>
+            <h1>Add User</h1>
+            <form onSubmit={handleSubmit}>
+                <input type="text" id="name" name="name" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
+                <input type="text" id="lastname" name="lastname" placeholder="Lastname" value={lastname} onChange={(e) => setLastname(e.target.value)} />
+                <input type="text" id="email" name="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
+                <input type="text" id="numero" name="numero" placeholder="Numero" value={numero} onChange={(e) => setNumero(e.target.value)} />
+                <input type="password" id="password" name="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
+                <button type="submit">Add User</button>
+            </form>
+        </div>
+    )
+}

front/src/pages/Admin.tsx

@@ -0,0 +1,14 @@
+import { Link } from 'react-router-dom';
+
+export default function Admin () {
+    return (
+        <div>
+            <h1>Admin</h1>
+            <p>Welcome Admin</p>
+            <div>
+                <h2>Admin Panel</h2>
+                <p>Manage users, accounts, and cards.</p>
+            </div>
+        </div>
+    );
+}

front/src/pages/Login.tsx

@@ -24,7 +24,7 @@ export default function Login () {
                 navigate("/")
             })
             .catch((error) => {
-                alert("Login failed : " + error.response.data)
+                alert("Login failed : " + error.response)
             })
     }
 

front/src/pages/Register.tsx

@@ -0,0 +1,59 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import axios from 'axios';
+
+export default function Register () {
+    const navigate = useNavigate();
+    const [name, setName] = useState<string>("");
+    const [lastname, setLastname] = useState<string>("");
+    const [email, setEmail] = useState<string>("");
+    const [numero, setNumero] = useState<string>("");
+    const [password, setPassword] = useState<string>("");
+
+    function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+        e.preventDefault();
+        if (name === "" || lastname === "" || email === "" || numero === "" || password === "") {
+            alert("Please fill in all fields");
+            return;
+        }
+        axios
+            .post("/api/auth/register", {
+                name,
+                lastname,
+                email,
+                numero,
+                password
+            })
+            .then(() => {
+                axios
+                    .post("/api/auth/login", {
+                        email,
+                        password
+                    })
+                    .then((response) => {
+                        localStorage.setItem("token", response.data.token);
+                        navigate("/");
+                    })
+                    .catch((error) => {
+                        console.error(error.response.data);
+                    });
+            })
+            .catch((error) => {
+                console.error(error.response.data);
+            });
+    }
+
+    return (
+        <div>
+            <h1>Add User</h1>
+            <form onSubmit={handleSubmit}>
+                <input type="text" id="name" name="name" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
+                <input type="text" id="lastname" name="lastname" placeholder="Lastname" value={lastname} onChange={(e) => setLastname(e.target.value)} />
+                <input type="text" id="email" name="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
+                <input type="text" id="numero" name="numero" placeholder="Numero" value={numero} onChange={(e) => setNumero(e.target.value)} />
+                <input type="password" id="password" name="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
+                <button type="submit">Add User</button>
+            </form>
+        </div>
+    )
+}