From 1d8e3a4513b8956778529bceaa38377337b0b200 Mon Sep 17 00:00:00 2001
From: SleeplessOne1917 <abias1122@gmail.com>
Date: Fri, 7 Jul 2023 14:23:21 -0400
Subject: [PATCH] Make show/hide password button use icon

---
 src/assets/symbols.svg                          | 7 +++++++
 src/shared/components/common/password-input.tsx | 5 ++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/assets/symbols.svg b/src/assets/symbols.svg
index 72214eaf..6e9c6ef9 100644
--- a/src/assets/symbols.svg
+++ b/src/assets/symbols.svg
@@ -258,5 +258,12 @@
       <path d="M8.72046 10.6397L14.9999 7.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
       <path d="M8.70605 13.353L15 16.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
     </symbol>
+    <symbol id="icon-eye" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
+      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    </symbol>
+    <symbol id="icon-eye-slash" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
+    </symbol>
   </defs>
 </svg>
diff --git a/src/shared/components/common/password-input.tsx b/src/shared/components/common/password-input.tsx
index d96f2ff8..0a5ea85f 100644
--- a/src/shared/components/common/password-input.tsx
+++ b/src/shared/components/common/password-input.tsx
@@ -4,6 +4,7 @@ import { NoOptionI18nKeys } from "i18next";
 import { Component, FormEventHandler, linkEvent } from "inferno";
 import { NavLink } from "inferno-router";
 import { I18NextService } from "../../services";
+import { Icon } from "./icon";
 
 interface PasswordInputProps {
   id: string;
@@ -115,8 +116,10 @@ class PasswordInput extends Component<PasswordInputProps, PasswordInputState> {
                 type="button"
                 id={id}
                 onClick={linkEvent(this, handleToggleShow)}
+                aria-label={show ? "Hide Password" : "Show Password"}
+                data-tippy-content={show ? "Hide Password" : "Show Password"}
               >
-                Button
+                <Icon icon={`eye${show ? "-slash" : ""}`} inline />
               </button>
             </div>
             {showForgotLink && (