Create register page

src/pages/Register/RegisterPage.jsx

@@ -0,0 +1,105 @@
+import styles from "./RegisterPage.module.css";
+import Background from "../../components/background/background.jsx";
+import Input from "../../components/ui/input/input.jsx";
+import Button from "../../components/ui/button/button.jsx";
+import { useState } from "react";
+import register from "../../utils/register.js";
+import { useNavigate } from "react-router";
+
+
+function RegisterPage() {
+
+    const navigate = useNavigate();
+
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [name, setName] = useState("");
+    const [lastName, setLastName] = useState("");
+
+    const [showPassword, setShowPassword] = useState(false);
+
+
+    async function handleSubmit(e) {
+        e.preventDefault();
+        const res = await register(email, password, name, lastName);
+        if (!res || res.status !== 200) throw new Error("Register error");
+        navigate("/login");
+    }
+
+    return <Background>
+
+        <div className={styles.container}>
+
+            <div className={"glassCard"}>
+
+                <h1>Créer un compte</h1>
+
+                <div className={styles.formGroup}>
+                    <Input
+                        value={name}
+                        placeholder="Prénom"
+                        onChange={e => setName(e.target.value)}
+                        style={{ width: '100%' }}
+                    />
+                </div>
+
+                <div className={styles.formGroup}>
+                    <Input
+                        value={lastName}
+                        placeholder="Nom"
+                        onChange={e => setLastName(e.target.value)}
+                        style={{ width: '100%' }}
+                    />
+                </div>
+
+                <div className={styles.formGroup}>
+                    <Input
+                        type="email"
+                        value={email}
+                        placeholder="Adresse mail"
+                        onChange={e => setEmail(e.target.value)}
+                        style={{ width: '100%' }}
+                    />
+                </div>
+                <div className={styles.formGroup}>
+                    <div style={{ position: 'relative', width: '100%' }}>
+                        <Input
+                            type={showPassword ? "text" : "password"}
+                            value={password}
+                            placeholder="Mot de passe"
+                            onChange={e => setPassword(e.target.value)}
+                            style={{ width: '100%' }}
+                        />
+                        <button
+                            type="button"
+                            onClick={() => setShowPassword(!showPassword)}
+                            style={{
+                                position: 'absolute',
+                                width: '30px',
+                                right: '10px',
+                                top: '50%',
+                                transform: 'translateY(-50%)',
+                                background: 'none',
+                                border: 'none',
+                                cursor: 'pointer',
+                                fontSize: '16px',
+                            }}
+                        >
+                            {showPassword ? '👁️' : '🔒'}
+                        </button>
+                    </div>
+                </div>
+
+                <div className={styles.logButton}>
+                    <Button variant={"transparent"} onClick={() => navigate("/login")}>Vous avez déjà un compte ?</Button>
+                    <Button variant={"default"} onClick={handleSubmit}> Se connecter </Button>
+                </div>
+            </div>
+        </div>
+
+    </Background>
+}
+
+export default RegisterPage;
+
+

src/pages/Register/RegisterPage.module.css

@@ -0,0 +1,29 @@
+.container {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    width: 30%;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    border-radius:12px;
+}
+
+:global(.glassCard) {
+    --glass-bg: #ffffff9f;
+}
+.logButton{
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 12px;
+}
+.formGroup{
+    margin-top:23px;
+}
+
+h1 {
+    overflow: visible;
+    text-align: center;
+}

src/router.js

@@ -2,12 +2,17 @@ import { createBrowserRouter } from "react-router";
 import Layout from "./layout.jsx";
 import HomePage from "./pages/Home/HomePage";
 import LoginPage from "./pages/Login/LoginPage";
+import RegisterPage from "./pages/Register/RegisterPage.jsx";
 
 const router = createBrowserRouter([
     {
       path: "/login",
       Component: LoginPage,
     },
+    {
+        path: "/register",
+        Component: RegisterPage,
+    },
     {
         path: "/",
         Component: Layout,

src/utils/register.js

@@ -0,0 +1,30 @@
+import getXSRFToken from "./getXSRF.js";
+
+export default async function register(email, password, name, lastname) {
+    const csrfToken = await getXSRFToken();
+
+    try {
+        const response = await fetch('http://localhost:8000/api/users/register', {
+            method: 'POST',
+            credentials: 'include',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-XSRF-TOKEN': csrfToken,
+                'Accept': 'application/json'
+            },
+            body: JSON.stringify({ email, password, name, lastname }),
+        });
+
+        console.log('Code HTTP :', response.status);
+
+        if (!response.ok) {
+            throw new Error(`Erreur HTTP ${response.status}`);
+        }
+
+        const data = await response.json();
+
+        return { status: response.status, data };
+    } catch (error) {
+        return error;
+    }
+}