Create passwordInput component

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;