Create registerMember admin component

src/interfaces/response.interface.ts

@@ -0,0 +1,4 @@
+export default interface Response<T> {
+    status: number;
+    data: T;
+}

src/pages/Admin/AdminPage.jsx

@@ -1,10 +1,10 @@
-import { useState, useContext } from "react";
+import { useContext } from "react";
 import styles from "./AdminPage.module.css";
-import ParticipationChart from "./components/chart/ParticipationChart.jsx";
 import IncompleteEvents from "./components/IncompleteEvent/IncompleteEvent.jsx";
 import PendingMembers from "./components/pendingMembers/PendingMembers.jsx";
 import { AuthContext } from "../../contexts/auth/AuthContext.js";
 import { useNavigate } from "react-router";
+import RegisterMember from "./components/registerMember/registerMember.tsx";
 
 
 function AdminPage() {
@@ -12,18 +12,11 @@ function AdminPage() {
     const { user } = useContext(AuthContext);
     const navigate = useNavigate();
 
-    const [selected, setSelected] = useState("3");
-    const [participationRate] = useState(89);
-
     if(!user.isAdmin) navigate("/");
 
     return (
         <div className={styles.container}>
-            <ParticipationChart
-                selected={selected}
-                setSelected={setSelected}
-                participationRate={participationRate}
-            />
+            <RegisterMember />
             <div className={styles.rightSection}>
                 <IncompleteEvents />
                 <PendingMembers />

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

@@ -0,0 +1,27 @@
+.leftBlock {
+    width: 40%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    min-height: calc(100vh - 260px);
+    box-sizing: border-box;
+    padding: 20px;
+    margin: 0;
+}
+
+.registerMemberHeader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+.registerForm {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
+}

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

@@ -0,0 +1,46 @@
+import React, { useState } from "react"
+import styles from "./registerMember.module.css"
+import TextInput from "../../../../components/ui/input/input"
+import Button from "../../../../components/ui/button/button";
+import Response from "../../../../interfaces/response.interface";
+import ResponseData from "./responseData.inteface";
+import adminCreateUser from "../../../../utils/users/adminCreateUser";
+
+
+const RegisterMember: React.FC = () => {
+
+    const [name, setName] = useState<string>("");
+    const [lastname, setLastName] = useState<string>("");
+    const [email, setEmail] = useState<string>("");
+    const [phone, setPhone] = useState<string>("");
+    const [password, setPassword] = 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);
+        }
+
+    }
+
+    return <div className={`${styles.leftBlock} glassCard`}>
+        <div className={styles.registerMemberHeader}>
+            <h2>Enregister un bénévole</h2>
+        </div>
+
+        <div className={styles.registerForm}>
+            <TextInput placeholder={"Prenom"} type={"text"} value={name} onChange={e => setName(e.target.value)}  />
+            <TextInput placeholder={"Nom"} type={"text"} value={lastname} onChange={e => setLastName(e.target.value)}  />
+            <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>
+
+            <Button variant={"default"} onClick={handleCreate}>Enregistrer</Button>
+        </div>
+    </div>
+}
+
+export default RegisterMember

src/pages/Admin/components/registerMember/responseData.inteface.ts

@@ -0,0 +1,4 @@
+export default interface ResponseData {
+    message: string;
+    password: string;
+}

src/utils/users/adminCreateUser.ts

@@ -0,0 +1,14 @@
+import fetchWrapper from "../fetchWrapper.js";
+import getXSRFToken from "../getXSRF.js";
+import Response from "../../interfaces/response.interface";
+
+export default async function adminCreateUser(email: string, name: string, lastname: string, phone: string): Promise<Response> {
+    const csrfToken = await getXSRFToken();
+
+    return fetchWrapper(
+        "/api/users/create",
+        { email, name, lastname, phone },
+        "POST",
+        { "X-XSRF-TOKEN": csrfToken }
+    );
+}