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;

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;
+}