Control errors and feedback

src/pages/Admin/components/registerMember/registerMember.module.css

@@ -25,3 +25,7 @@
     align-items: center;
     justify-content: center;
 }
+
+.modalContent {
+    text-align: center;
+}

src/pages/Admin/components/registerMember/registerMember.tsx

@@ -5,6 +5,7 @@ import Button from "../../../../components/ui/button/button";
 import Response from "../../../../interfaces/response.interface";
 import ResponseData from "./responseData.inteface";
 import adminCreateUser from "../../../../utils/users/adminCreateUser";
+import Modal from "../../../../components/ui/modal/modal";
 
 
 const RegisterMember: React.FC = () => {
@@ -15,14 +16,36 @@ const RegisterMember: React.FC = () => {
     const [phone, setPhone] = useState<string>("");
     const [password, setPassword] = useState<string>("");
 
+    const [open, setOpen] = useState<boolean>(false);
+    const [title, setTitle] = useState<string>("");
+    const [message, setMessage] = useState<string>("");
+
 
     const handleCreate = async (): Promise<void> => {
 
         if(name !== "" || lastname !== "" || email !== "" || phone !== "" ) {
             const response: Response<ResponseData> = await adminCreateUser(email, name, lastname, phone);
-            if(response.status === 200) setPassword(response.data.password);
+            if(response.status === 200) {
+                setPassword(response.data.password);
+                setTitle(`Utilisateur enregistré avec succès`);
+                setMessage(`L'utilisateur ${name} ${lastname} a été enregistré avec le mot de passe: ${response.data.password}`);
+                setOpen(true);
+            } else {
+                setTitle(`Erreur`);
+                setMessage(`Une erreur est survenue lors de l'enregistrement de ${name} ${lastname}`);
+                setOpen(true);
+            }
+        } else {
+            setTitle("Erreur");
+            setMessage("Un des champs n'a pas été rempli");
+            setOpen(true);
+        }
     }
 
+    const showPassword = (): void => {
+        setTitle(`Mot de passe de ${name} ${lastname}`);
+        setMessage(password);
+        setOpen(true);
     }
 
     return <div className={`${styles.leftBlock} glassCard`}>
@@ -36,10 +59,15 @@ const RegisterMember: React.FC = () => {
             <TextInput placeholder={"Adresse Email"} type={"text"} value={email} onChange={e => setEmail(e.target.value)}  />
             <TextInput placeholder={"Numéro de téléphone"} type={"text"} value={phone} onChange={e => setPhone(e.target.value)}  />
 
-            <p>{password !== "" && `Mot de passe: ${password}`}</p>
+            {password !== "" && <Button onClick={showPassword}> Afficher le mot de passe </Button>}
 
             <Button variant={"default"} onClick={handleCreate}>Enregistrer</Button>
         </div>
+
+        <Modal open={open} onClose={() => setOpen(false)} title={title}>
+            <p className={styles.modalContent}>{message}</p>
+        </Modal>
+
     </div>
 }