Merge pull request #36 from WildCodeSchool/feature/s05_client_passwor…

…dtoggle

add feature show hide password

client/src/assets/icons/eye-off.tsx

@@ -0,0 +1,27 @@
+import type { IconsProps } from "./icons";
+
+export const EyeOff = ({
+	fill = "currentColor",
+	className = "",
+}: IconsProps) => {
+	return (
+		<svg
+			className={className}
+			xmlns="http://www.w3.org/2000/svg"
+			width="20"
+			height="20"
+			viewBox="0 0 24 24"
+			fill={fill}
+			stroke="#FAF4E6"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<title>Eye-off</title>
+			<path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" />
+			<path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
+			<path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" />
+			<path d="m2 2 20 20" />
+		</svg>
+	);
+};

client/src/assets/icons/eye.tsx

@@ -0,0 +1,22 @@
+import type { IconsProps } from "./icons";
+
+export const Eye = ({ fill = "currentColor", className = "" }: IconsProps) => {
+	return (
+		<svg
+			className={className}
+			xmlns="http://www.w3.org/2000/svg"
+			width="20"
+			height="20"
+			viewBox="0 0 24 24"
+			fill={fill}
+			stroke="#FAF4E6"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<title>Eye</title>
+			<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
+			<circle cx="12" cy="12" r="3" />
+		</svg>
+	);
+};

client/src/components/_atoms/Inputs/TextInput/TextInput.scss

@@ -6,6 +6,7 @@
     gap: 0.5rem;
     padding-block: 0.5rem;
     color: $blue-100;
+    position: relative;
 
     input {
         border-radius: 7px;
@@ -15,5 +16,24 @@
         padding-inline: 2rem;
         color: $font-light;
         font-weight: $light;
+
+    }
+
+    .password-toggle{
+        position: absolute;
+        right: 1rem;
+        bottom: 1.5rem;
+        background: none;
+        border: none;
+        cursor: pointer;
+        height: min-content;
+        line-height: 0;
+        padding: 0;
+
+
+    .eyes{
+        mix-blend-mode: difference;
+    }
+
     }
 }

client/src/components/_atoms/Inputs/TextInput/TextInput.tsx

@@ -1,4 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
+import { Eye } from "@/assets/icons/eye.tsx";
+import { EyeOff } from "@/assets/icons/eye-off.tsx";
 import "./TextInput.scss";
 
 type TextInputTypes =
@@ -17,6 +19,8 @@ const TextInput = React.forwardRef<
 	HTMLInputElement,
 	{ type: TextInputTypes; required?: boolean; widthInPercentage?: number }
 >(({ type, required }, ref) => {
+	const [showPassword, setShowPassword] = useState(false);
+
 	let label = "";
 	let placeholder = "";
 
@@ -72,10 +76,31 @@ const TextInput = React.forwardRef<
 			{fieldRequired}
 			<input
 				ref={ref}
-				type={type}
+				type={type === "password" ? (showPassword ? "text" : "password") : type}
 				placeholder={placeholder}
 				required={required}
 			/>
+			{type === "password" && (
+				<button
+					type="button"
+					onMouseDown={(e) => {
+						e.preventDefault();
+						setShowPassword(!showPassword);
+					}}
+					className="password-toggle"
+					aria-label={
+						showPassword
+							? "Masquer le mot de passe"
+							: "Afficher le mot de passe"
+					}
+				>
+					{showPassword ? (
+						<EyeOff className="eyes" fill="none" />
+					) : (
+						<Eye className="eyes" fill="none" />
+					)}
+				</button>
+			)}
 		</label>
 	);
 });