Added toggle to see password (#73)

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>

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,6 +209,7 @@ function Auth({ type }) {
                 required
               />
             </div>
+            <div className="password__wrapper">
               <Input
                 forwardRef={passwordRef}
                 onChange={(e) => validateOnChange(e, ((type === 'login') ? PASSWORD_REGEX : PASSWORD_STRENGHT_REGEX), BAD_PASSWORD_ERROR)}
@@ -215,8 +218,19 @@ function Auth({ type }) {
                 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' && (
               <>
+                <div className="password__wrapper">
                   <Input
                     forwardRef={confirmPasswordRef}
                     onChange={(e) => validateOnChange(e, new RegExp(`^(${passwordRef.current.value})$`), CONFIRM_PASSWORD_ERROR)}
@@ -225,6 +239,16 @@ function Auth({ type }) {
                     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)}

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;