fix: PasSword ⚔️ peek-a-boo in POW! #314

raae · Mar 22, 2022 · 1b38ad7 · 1b38ad7
1 parent bc1d134
commit 1b38ad7
Showing 1 changed file with 10 additions and 3 deletions.
diff --git 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,21 +79,21 @@ const SignInForm = ({ className, redirect, ...props }) => {
         required
         fullWidth
       />
-
       <TextField
         disabled={disabled}
         id="passwordInput"
         variant="outlined"
         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}