Add phone and password confirmation

src/pages/Register/RegisterPage.jsx

@@ -5,6 +5,7 @@ import Button from "../../components/ui/button/button.jsx";
 import { useState } from "react";
 import register from "../../utils/register.js";
 import { useNavigate } from "react-router";
+import {isNumber} from "chart.js/helpers";
 
 
 function RegisterPage() {
@@ -12,20 +13,31 @@ 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 [showPassword, setShowPassword] = useState(false);
-
-
     async function handleSubmit(e) {
         e.preventDefault();
-        const res = await register(email, password, name, lastName);
+
+        if(password === confirmPassword && password.length >= 8) {
+            const res = await register(email, password, name, lastName, phone);
             if (!res || res.status !== 200) throw new Error("Register error");
             navigate("/login");
         }
 
+    }
+
+    const handlePhone = (e) => {
+        const value = e.target.value;
+        if (value === "" || /^[0-9 +]+$/.test(value)) {
+            setPhone(value);
+        }
+    };
+
+
     return <Background>
 
         <div className={styles.container}>
@@ -61,8 +73,22 @@ function RegisterPage() {
                         style={{ width: '100%' }}
                     />
                 </div>
+
                 <div className={styles.formGroup}>
-                    <Input password={true} onChange={e => setPassword(e.target.value)} value={password} />
+                    <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}>

src/utils/register.js

@@ -1,6 +1,6 @@
 import getXSRFToken from "./getXSRF.js";
 
-export default async function register(email, password, name, lastname) {
+export default async function register(email, password, name, lastname, phone) {
     const csrfToken = await getXSRFToken();
 
     try {
@@ -12,7 +12,7 @@ export default async function register(email, password, name, lastname) {
                 'X-XSRF-TOKEN': csrfToken,
                 'Accept': 'application/json'
             },
-            body: JSON.stringify({ email, password, name, lastname }),
+            body: JSON.stringify({ email, password, name, lastname, phone }),
         });
 
         console.log('Code HTTP :', response.status);