Create passwordInput component

src/components/loginform/loginForm.jsx

@@ -9,7 +9,6 @@ import { AuthContext } from "../../contexts/auth/AuthContext.js";
 function LoginForm({ className }) {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
-    const [showPassword, setShowPassword] = useState(false);
     let navigate = useNavigate();
     const { login } = useContext(AuthContext);
 
@@ -19,10 +18,6 @@ function LoginForm({ className }) {
         navigate("/");
     }
 
-    const toggleShowPassword = () => {
-        setShowPassword(!showPassword);
-    };
-
     return (
         <div className={`${className} glassCard ${styles.inputContainer}`}>
             <div className={styles.formgroup}>
@@ -35,32 +30,7 @@ function LoginForm({ className }) {
                 />
             </div>
             <div className={styles.formgroup}>
-                <div style={{ position: 'relative', width: '100%' }}>
+                <Input password={true} onChange={e => setPassword(e.target.value)} value={password} />
-                    <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}>

src/components/ui/input/input.jsx

@@ -1,13 +1,38 @@
 import styles from "./input.module.css";
+import { useState } from "react";
 
-const TextInput = ({ placeholder, onChange, value, borderStyle, ...props }) => {
+const TextInput = ({ placeholder, onChange, value, borderStyle, password, className, ...props }) => {
 
+    const [showPassword, setShowPassword] = useState(false);
 
     let inputBorderStyle = styles.square;
     if (borderStyle === "square") inputBorderStyle = styles.square;
     if(borderStyle === "rounded") inputBorderStyle = styles.rounded;
 
-    return <input className={`${styles.input} ${inputBorderStyle}`} onChange={onChange} placeholder={placeholder} value={value} {...props} />
+    const toggleShowPassword = () => {
+        setShowPassword(!showPassword);
+    };
+
+    if(password) return (
+        <div className={styles.passwordContainer}>
+            <TextInput
+                type={showPassword ? "text" : "password"}
+                value={value}
+                placeholder="Mot de passe"
+                onChange={onChange}
+                className={styles.passwordInput}
+            />
+            <button
+                type="button"
+                onClick={toggleShowPassword}
+                className={styles.passwordBtn}
+            >
+                {showPassword ? '👁️' : '🔒'}
+            </button>
+        </div>
+    );
+
+    return <input className={`${styles.input} ${inputBorderStyle} ${className}`} onChange={onChange} placeholder={placeholder} value={value} {...props} />
 };
 
 export default TextInput;

src/components/ui/input/input.module.css

@@ -30,3 +30,23 @@
     border-radius: 12px;
 }
 
+.passwordContainer {
+    position: relative;
+    width: 100%;
+}
+
+.passwordInput {
+    width: 100%;
+}
+
+.passwordBtn {
+    position: absolute;
+    width: 30px;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+}