add shortcut on login

src/pages/Register/RegisterPage.tsx

@@ -0,0 +1,140 @@
+import styles from "./RegisterPage.module.css";
+import Background from "../../components/Background/Background";
+import Input from "../../components/ui/Input/Input";
+import Button from "../../components/ui/Button/Button";
+import {useContext, useEffect, useState} from "react";
+import register from "../../utils/register.js";
+import { useNavigate } from "react-router";
+import { AuthContext } from "../../contexts/Auth/AuthContext";
+import Modal from "../../components/ui/Modal/Modal";
+import {AuthContextType } from "../../../src/contexts/Auth/AuthContext";
+
+
+function RegisterPage() {
+
+    const navigate = useNavigate();
+
+    const [email, setEmail] = useState("");
+    const [phone, setPhone] = useState("");
+    const [password, setPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [name, setName] = useState("");
+    const [lastName, setLastName] = useState("");
+    const [open, setOpen] = useState(false);
+    const [title, setTitle] = useState("");
+    const [message, setMessage] = useState("");
+    const { user, loading } = useContext(AuthContext) as AuthContextType
+
+    useEffect(() => {
+        if (!loading && user) {
+            navigate("/");
+        }
+    }, [loading, user]);
+
+    const handleModal = (t: string, m: string) => {
+        setTitle(t)
+        setMessage(m)
+        setOpen(true);
+    }
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+            handleSubmit();
+        }
+    };
+    
+    async function handleSubmit():Promise<void>
+     {
+       
+        if(!(password === confirmPassword)) handleModal("Mot de passe invalide", "Les mots de passes ne conrrespondent pas");
+        else if(password.length < 8) handleModal("Mot de passe invalide", "Le mot de passe doit faire plus de 8 charactères");
+        else {
+
+            const res = await register(email, password, name, lastName, phone);
+
+            if (res.status === 422) {
+                if (res.errors.email) handleModal("Adresse Email invalide", "Le formet de votre adresse Email n'est pas valide");
+                if (res.errors.phone) handleModal("Numéro de téléphone invalide", "Le formet de votre numéro de téléphone n'est pas valide");
+            } else navigate("/login");
+
+        }
+    }
+
+    const handlePhone = (e:React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        if (value === "" || /^[0-9 +]+$/.test(value)) {
+            setPhone(value);
+        }
+    };
+
+
+    return <Background className="">
+
+        <div className={styles.container}>
+
+            <h1 className={styles.title}>Créer un compte</h1>
+
+            <div className={`glassCard ${styles.inputContainer}`} onKeyDown={handleKeyDown}>
+
+                <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}>
+                    <Input
+                        value={phone}
+                        placeholder="Numéro de téléphone"
+                        onChange={handlePhone}
+                        style={{ width: '100%' }}
+                    />
+                </div>
+
+                <div className={styles.formGroup}>
+                    <Input password={true} onChange={e => setPassword(e.target.value)} value={password} placeholder={"Mot de passe"}/>
+                </div>
+
+                <div className={styles.formGroup}>
+                    <Input password={true} onChange={e => setConfirmPassword(e.target.value)} value={confirmPassword} placeholder={"Confirmer le mot de passe"} />
+                </div>
+
+                <div className={styles.logButton}>
+                    <Button variant={"transparent"} onClick={() => navigate("/login")}>Vous avez déjà un compte ?</Button>
+                    <Button variant={"default"} onClick={handleSubmit}> Créer le compte </Button>
+                </div>
+            </div>
+        </div>
+
+        <Modal open={open} onClose={() => setOpen(false)} title={title}>
+            <p>{message}</p>
+        </Modal>
+
+    </Background>
+}
+
+export default RegisterPage;
+
+