From 65d55d66603afed59231015be49621100fe26311 Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Tue, 14 Sep 2021 09:01:31 +0530
Subject: [PATCH] Added toggle to see password (#73)

---
 public/res/ic/outlined/eye.svg   | 13 ++++++++
 src/app/templates/auth/Auth.jsx  | 56 +++++++++++++++++++++++---------
 src/app/templates/auth/Auth.scss | 16 +++++++++
 3 files changed, 69 insertions(+), 16 deletions(-)
 create mode 100644 public/res/ic/outlined/eye.svg

diff --git a/public/res/ic/outlined/eye.svg b/public/res/ic/outlined/eye.svg
new file mode 100644
index 0000000..fb31e4f
--- /dev/null
+++ b/public/res/ic/outlined/eye.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<g>
+		<path d="M12,19c-4.4,0-8-4-9.3-5.8c-0.6-0.7-0.6-1.7,0-2.4C4,9,7.6,5,12,5s8,4,9.3,5.8c0.6,0.7,0.6,1.7,0,2.4C20,15,16.4,19,12,19
+			z M12,7c-3.6,0-6.9,3.8-7.8,5c0.9,1.2,4.2,5,7.8,5s6.9-3.8,7.8-5C18.9,10.8,15.6,7,12,7z"/>
+	</g>
+	<circle cx="12" cy="12" r="3"/>
+</g>
+</svg>
diff --git a/src/app/templates/auth/Auth.jsx b/src/app/templates/auth/Auth.jsx
index 09202ef..cf4b51d 100644
--- a/src/app/templates/auth/Auth.jsx
+++ b/src/app/templates/auth/Auth.jsx
@@ -8,10 +8,12 @@ import * as auth from '../../../client/action/auth';
 
 import Text from '../../atoms/text/Text';
 import Button from '../../atoms/button/Button';
+import IconButton from '../../atoms/button/IconButton';
 import Input from '../../atoms/input/Input';
 import Spinner from '../../atoms/spinner/Spinner';
 import ScrollView from '../../atoms/scroll/ScrollView';
 
+import EyeIC from '../../../../public/res/ic/outlined/eye.svg';
 import CinnySvg from '../../../../public/res/svg/cinny.svg';
 
 // This regex validates historical usernames, which don't satisfy today's username requirements.
@@ -207,24 +209,46 @@ function Auth({ type }) {
                 required
               />
             </div>
-            <Input
-              forwardRef={passwordRef}
-              onChange={(e) => validateOnChange(e, ((type === 'login') ? PASSWORD_REGEX : PASSWORD_STRENGHT_REGEX), BAD_PASSWORD_ERROR)}
-              id="auth_password"
-              type="password"
-              label="Password"
-              required
-            />
+            <div className="password__wrapper">
+              <Input
+                forwardRef={passwordRef}
+                onChange={(e) => validateOnChange(e, ((type === 'login') ? PASSWORD_REGEX : PASSWORD_STRENGHT_REGEX), BAD_PASSWORD_ERROR)}
+                id="auth_password"
+                type="password"
+                label="Password"
+                required
+              />
+              <IconButton
+                onClick={() => {
+                  if (passwordRef.current.type === 'password') {
+                    passwordRef.current.type = 'text';
+                  } else passwordRef.current.type = 'password';
+                }}
+                size="extra-small"
+                src={EyeIC}
+              />
+            </div>
             {type === 'register' && (
               <>
-                <Input
-                  forwardRef={confirmPasswordRef}
-                  onChange={(e) => validateOnChange(e, new RegExp(`^(${passwordRef.current.value})$`), CONFIRM_PASSWORD_ERROR)}
-                  id="auth_confirmPassword"
-                  type="password"
-                  label="Confirm password"
-                  required
-                />
+                <div className="password__wrapper">
+                  <Input
+                    forwardRef={confirmPasswordRef}
+                    onChange={(e) => validateOnChange(e, new RegExp(`^(${passwordRef.current.value})$`), CONFIRM_PASSWORD_ERROR)}
+                    id="auth_confirmPassword"
+                    type="password"
+                    label="Confirm password"
+                    required
+                  />
+                  <IconButton
+                    onClick={() => {
+                      if (confirmPasswordRef.current.type === 'password') {
+                        confirmPasswordRef.current.type = 'text';
+                      } else confirmPasswordRef.current.type = 'password';
+                    }}
+                    size="extra-small"
+                    src={EyeIC}
+                  />
+                </div>
                 <Input
                   forwardRef={emailRef}
                   onChange={(e) => validateOnChange(e, EMAIL_REGEX, BAD_EMAIL_ERROR)}
diff --git a/src/app/templates/auth/Auth.scss b/src/app/templates/auth/Auth.scss
index 875801d..678b90f 100644
--- a/src/app/templates/auth/Auth.scss
+++ b/src/app/templates/auth/Auth.scss
@@ -122,6 +122,22 @@
   }
 }
 
+.password__wrapper {
+  margin-top: var(--sp-tight);
+  position: relative;
+
+  & .ic-btn {
+    position: absolute;
+    right: 6px;
+    bottom: 6px;
+    border-radius: calc(var(--bo-radius) / 2);
+    [dir=rtl] & {
+      left: 6px;
+      right: unset;
+    }
+  }
+}
+
 @media (max-width: 462px) {
   .auth__wrapper {
     padding: 0;