From 51c9f182799ac2c828e6561f2c0c5b3d1a826422 Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Sun, 11 Jun 2023 17:40:06 +0200
Subject: [PATCH] [feature] add show password button

---
 .../modal/modal-types/login-modal.component.tsx          | 8 ++++++--
 src/renderer/components/svgs/bsm-icon.component.tsx      | 4 +++-
 .../components/svgs/icons/eye-cross-icon.component.tsx   | 9 +++++++++
 3 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 src/renderer/components/svgs/icons/eye-cross-icon.component.tsx

diff --git a/src/renderer/components/modal/modal-types/login-modal.component.tsx b/src/renderer/components/modal/modal-types/login-modal.component.tsx
index 74bb33ab..f7b29366 100644
--- a/src/renderer/components/modal/modal-types/login-modal.component.tsx
+++ b/src/renderer/components/modal/modal-types/login-modal.component.tsx
@@ -13,6 +13,7 @@ export const LoginModal: ModalComponent<{username: string, password: string, sta
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
     const [stay, setStay] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
     const t = useTranslation();
 
     const loggin = () => {
@@ -31,11 +32,14 @@ export const LoginModal: ModalComponent<{username: string, password: string, sta
         
         <div className="mb-2">
             <label className="block font-bold cursor-pointer tracking-wide text-gray-800 dark:text-gray-200" htmlFor="username">{t("modals.steam-login.inputs.username.label")}</label>
-            <input className="w-full bg-light-main-color-1 dark:bg-main-color-1 px-1 py-[2px] rounded-md outline-none" onChange={e => setUsername(e.target.value)} value={username} type="text" name="username" id="username" placeholder={t("modals.steam-login.inputs.username.placeholder")}/>
+            <input className="w-full bg-light-main-color-1 dark:bg-main-color-1 px-1 py-[2px] rounded-md outline-none h-8" onChange={e => setUsername(e.target.value)} value={username} type="text" name="username" id="username" placeholder={t("modals.steam-login.inputs.username.placeholder")}/>
         </div>
         <div className="mb-2 flex flex-col w-full">
             <label className="block font-bold cursor-pointer tracking-wide text-gray-800 dark:text-gray-200" htmlFor="password">{t("modals.steam-login.inputs.password.label")}</label>
-            <input className="w-full bg-light-main-color-1 dark:bg-main-color-1 px-1 py-[2px] rounded-md outline-none" onChange={e => setPassword(e.target.value)} value={password} type="password" name="password" id="password" placeholder={t("modals.steam-login.inputs.password.placeholder")}/>
+            <div className="bg-light-main-color-1 dark:bg-main-color-1 rounded-md flex box-border h-8">
+                <input className="grow px-1 py-[2px] outline-none bg-transparent" onChange={e => setPassword(e.target.value)} value={password} type={showPassword ? "text" : "password"} name="password" id="password" placeholder={t("modals.steam-login.inputs.password.placeholder")}/>
+                <BsmButton className="shrink-0 m-1 rounded-md p-0.5 !bg-light-main-color-3 dark:!bg-main-color-3" icon={showPassword ? "eye-cross" : "eye"} withBar={false} onClick={() => setShowPassword(prev => !prev)}/>
+            </div>
             {password?.length > 64 && (
                 <span className="text-orange-700 dark:text-orange-400 text-xs whitespace-normal max-w-full w-full overflow-hidden">{t("modals.steam-login.inputs.password.max-length-warning")}</span>
             )}
diff --git a/src/renderer/components/svgs/bsm-icon.component.tsx b/src/renderer/components/svgs/bsm-icon.component.tsx
index 00f7e567..ca8ee5b7 100644
--- a/src/renderer/components/svgs/bsm-icon.component.tsx
+++ b/src/renderer/components/svgs/bsm-icon.component.tsx
@@ -58,9 +58,10 @@ import { ModelTypeSaberIcon } from "./icons/model-type-saber-icon.component";
 import { ModelTypePlatformIcon } from "./icons/model-type-platform-icon.component";
 import { ModelTypeBloqIcon } from "./icons/model-type-bloq-icon.component";
 import { ChevronTopIcon } from "./icons/chevron-top-icon.component";
+import { EyeCrossIcon } from "./icons/eye-cross-icon.component";
 
 export type BsmIconType = BsvMapCharacteristic | MSModelType | (
-   "settings"|"trash"|"favorite"|"folder"|"bsNote"|"check"|"three-dots"|"twitch"|"eye"|"play"|"checkCircleIcon"|"discord"|"info"|
+   "settings"|"trash"|"favorite"|"folder"|"bsNote"|"check"|"three-dots"|"twitch"|"eye"|"play"|"checkCircleIcon"|"discord"|"info"|"eye-cross"|
    "terminal"|"desktop"|"oculus"|"add"|"cross"|"task"|"github"|"close"|"thumbUpFill"|"timerFill"|"pause"|"twitter"|"sync"|"chevron-top"|
    "copy"|"steam"|"edit"|"export"|"patreon"|"search"|"bsMapDifficulty"|"link"|"unlink"|"download"|"filter"|"mee6"|"volume-up"|"volume-off"|"volume-down"|
    "fr-FR-flag"|"es-ES-flag"|"en-US-flag"|"en-EN-flag"|"de-DE-flag"
@@ -124,6 +125,7 @@ export const BsmIcon = memo(({className, icon, style}: {className?: string, icon
         if(icon === "volume-down"){ return <VolumeDownIcon className={className} style={style}/> }
         if(icon === "volume-off"){ return <VolumeOffIcon className={className} style={style}/> }
         if(icon === "chevron-top"){ return <ChevronTopIcon className={className} style={style}/> }
+        if(icon === "eye-cross"){ return <EyeCrossIcon className={className} style={style}/> }
 
         if(icon === MSModelType.Avatar){ return <ModelTypeAvatarIcon className={className} style={style}/> }
         if(icon === MSModelType.Saber){ return <ModelTypeSaberIcon className={className} style={style}/> }
diff --git a/src/renderer/components/svgs/icons/eye-cross-icon.component.tsx b/src/renderer/components/svgs/icons/eye-cross-icon.component.tsx
new file mode 100644
index 00000000..6f05bc36
--- /dev/null
+++ b/src/renderer/components/svgs/icons/eye-cross-icon.component.tsx
@@ -0,0 +1,9 @@
+import { CSSProperties } from "react";
+
+export function EyeCrossIcon(props: {className?: string, style?: CSSProperties}) {
+    return (
+        <svg className={props.className} style={props.style} fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+            <path d="m635.275-425.427-57.355-57.196q18.979-55.826-23.134-94.928-42.112-39.101-93.757-21.963l-55.602-55.761q16.442-9.283 35.519-13.67 19.076-4.388 39.054-4.388 72.333 0 122.833 50.5T653.333-500q0 19.659-4.641 39.467-4.642 19.809-13.417 35.106Zm133.768 133.579-49.985-49.637q43.979-33.348 77.149-73.837 33.17-40.49 52.141-84.678-50.478-107.428-147.913-170.381t-213.768-62.953q-37.667 0-75.258 6.428-37.591 6.427-61.743 15.87l-56.594-57.102q37-16.333 88.464-27.166Q433-806.138 483.333-806.138q138.225 0 253.62 74.779 115.395 74.779 176.069 201.156 3.319 5.717 4.438 13.681 1.12 7.964 1.12 16.522 0 8.558-1.286 16.855-1.287 8.297-4.272 13.855-25.239 53.348-61.834 98.348-36.594 45-82.145 79.094Zm11.45 207.87-139.217-136.87q-34.841 13.08-76.326 20.033-41.486 6.953-84.95 6.953-140.384 0-256.286-74.899-115.902-74.898-176.736-201.196-3.319-6.224-4.438-13.855-1.12-7.63-1.12-16.188t1.453-16.808q1.453-8.25 4.105-13.808 20.92-44.203 51.975-84.964 31.054-40.761 71.337-76.92l-95.515-95.849q-10.224-10.065-10.224-24.162 0-14.098 10.478-24.417 10.065-10.225 24.663-10.225 14.597 0 24.822 10.225L829.312-132.13q9.558 9.558 9.525 23.362-.032 13.804-9.525 24.123-9.558 10.891-24.156 10.891-14.598 0-24.663-10.224Zm-559.66-557.87q-34.014 27.145-63.859 65.616-29.844 38.471-45.75 76.232 50.826 107.667 149.968 170.5 99.141 62.834 224.141 62.834 26.993 0 53.744-3.221 26.75-3.221 44.083-9.555l-54.667-55.334q-10.123 4.095-23.246 6.102-13.124 2.007-25.247 2.007-71.667 0-122.5-50.166Q306.667-427 306.667-500q0-12.551 1.888-25.127 1.887-12.576 5.742-23.366l-93.464-93.355Zm314.449 121.921Zm-133.325 66.615Z"/>
+        </svg>
+  )
+}