Rename login Form

2025-11-15 23:34:46 +01:00
parent 6e97788f00
commit 840695cf90
2 changed files with 2 additions and 2 deletions
@@ -0,0 +1,79 @@
+import { useState } from "react";
+import login from "../../utils/login.js";
+import getUser from "../../utils/getUser.js";
+import styles from "./loginForm.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();
+
+        const res = await login(email, password);
+
+        if(res.status === 200) {
+            await getUser();
+            navigate("/");
+        }
+    }
+
+    const toggleShowPassword = () => {
+        setShowPassword(!showPassword);
+    };
+
+    return (
+        <div className={`${className} ${"glassCard"}`}>
+            <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}>
+                <div style={{ position: 'relative', width: '100%' }}>
+                    <Input
+                        type={showPassword ? "text" : "password"}
+                        value={password}
+                        placeholder="Mot de passe"
+                        onChange={e => setPassword(e.target.value)}
+                        style={{ width: '100%' }}
+                    />
+                    <button
+                        type="button"
+                        onClick={toggleShowPassword}
+                        style={{
+                            position: 'absolute',
+                            width: '30px',
+                            right: '10px',
+                            top: '50%',
+                            transform: 'translateY(-50%)',
+                            background: 'none',
+                            border: 'none',
+                            cursor: 'pointer',
+                            fontSize: '16px',
+                        }}
+                    >
+                        {showPassword ? '👁️' : '🔒'}
+                    </button>
+                </div>
+            </div>
+
+            <div className={styles.logButton}>
+                <Button onClick={handleSubmit} variant={"default"}> Se connecter </Button>
+            </div>
+        </div>
+    );
+}
+
+export default LoginForm;
+