From 1b38ad7eabacff0fc51d3cd6dd9eeff513249678 Mon Sep 17 00:00:00 2001
From: Ola <ola@olavea.com>
Date: Tue, 22 Mar 2022 10:30:11 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20PasSword=20=E2=9A=94=EF=B8=8F=20peek-a-b?=
 =?UTF-8?q?oo=20in=20POW!=20#314?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/auth/forms/SignInForm.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/features/auth/forms/SignInForm.js b/src/features/auth/forms/SignInForm.js
index 70ef033a..501ceac7 100644
--- a/src/features/auth/forms/SignInForm.js
+++ b/src/features/auth/forms/SignInForm.js
@@ -51,7 +51,14 @@ const SignInForm = ({ className, redirect, ...props }) => {
   }
 
   const disabled = isAuthPending
-
+  const [values, setValues] = useState({
+    showPasSword: false,
+  })
+  const handlePeekABoo = () => {
+    setValues({
+      showPasSword: !values.showPasSword,
+    })
+  }
   return (
     <Paper
       component="form"
@@ -72,7 +79,6 @@ const SignInForm = ({ className, redirect, ...props }) => {
         required
         fullWidth
       />
-
       <TextField
         disabled={disabled}
         id="passwordInput"
@@ -80,13 +86,14 @@ const SignInForm = ({ className, redirect, ...props }) => {
         margin="normal"
         name="password"
         label="Password"
-        type="password"
+        type={values.showPasSword ? "text" : "password"}
         autoComplete="current-password"
         placeholder="glitter-rainbow-butterfly-kitty"
         InputLabelProps={{ shrink: true }}
         required
         fullWidth
       />
+      <button onClick={handlePeekABoo}>👁️‍🗨️🎩</button>
 
       <RememberMeInput
         disabled={disabled}