use ui components

src/components/form/form.jsx

@@ -1,47 +1,27 @@
-/*import { useState } from "react";
-import login from "../../utils/login.js";
-import getUser from "../../utils/getUser.js";
-import styles from "./form.module.css";
-function LoginForm({ className }) {
-    const [email, setEmail] = useState('');
-    const [password, setPassword] = useState('');
-    async function handleSubmit(e) {
-        e.preventDefault();
-        await login(email, password);
-        getUser();
-    }
-    return (
-        <div className={`${className} ${"glassCard"}`}>
-            <div className={styles.formgroup}>
-                <input type="email" id="email" value={email}  placeholder="Adresse mail" onChange={e => setEmail(e.target.value)} required/>
-            </div>
-
-            <div className={styles.formgroup}>
-                <input type="password" id="password" value={password} placeholder="Mot de passe" onChange={e => setPassword(e.target.value)} required/>
-                <br/>
-            </div>
-            <div className={styles.logButton} >
-                     <button className={styles.loginButton} onClick={e => handleSubmit(e)}>Se connecter</button>
-            </div>
-        </div>
-    );
-}
-export default LoginForm;*/
-
 import { useState } from "react";
 import login from "../../utils/login.js";
 import getUser from "../../utils/getUser.js";
 import styles from "./form.module.css";
+import Button from "../ui/button/button.jsx";
+import Input from "../ui/input/input.jsx";
+import { useNavigate } from "react-router";
 
 function LoginForm({ className }) {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const [showPassword, setShowPassword] = useState(false);
 
+    let navigate = useNavigate();
+
     async function handleSubmit(e) {
         e.preventDefault();
-        await login(email, password);
+
-        getUser();
+        const res = await login(email, password);
+
+        if(res.status === 200) {
+            await getUser();
+            navigate("/");
+        }
     }
 
     const toggleShowPassword = () => {
@@ -51,27 +31,22 @@ function LoginForm({ className }) {
     return (
         <div className={`${className} ${"glassCard"}`}>
             <div className={styles.formgroup}>
-                <input
+                <Input
                     type="email"
-                    id="email"
-                    className={styles.input} 
                     value={email}
                     placeholder="Adresse mail"
                     onChange={e => setEmail(e.target.value)}
-                    required
+                    style={{ width: '100%' }}
                 />
             </div>
             <div className={styles.formgroup}>
                 <div style={{ position: 'relative', width: '100%' }}>
-                    <input
+                    <Input
                         type={showPassword ? "text" : "password"}
-                        id="password"
-                        className={styles.input} 
                         value={password}
                         placeholder="Mot de passe"
                         onChange={e => setPassword(e.target.value)}
-                        required
+                        style={{ width: '100%' }}
-                        style={{ width: '100%', paddingRight: '40px' }}
                     />
                     <button
                         type="button"
@@ -92,8 +67,9 @@ function LoginForm({ className }) {
                     </button>
                 </div>
             </div>
+
             <div className={styles.logButton}>
-                <button className={styles.loginButton} onClick={handleSubmit}>Se connecter</button>
+                <Button onClick={handleSubmit} variant={"default"}> Se connecter </Button>
             </div>
         </div>
     );