From 0be8c3f9251b07d362af62af322ed571395f1d51 Mon Sep 17 00:00:00 2001
From: kj1352 <nikhilkj24@gmail.com>
Date: Tue, 16 Feb 2021 21:08:32 +0530
Subject: [PATCH] Signup UI

---
 src/components/input/InputWidget.tsx |  3 ++-
 src/pages/login/Login.module.scss    |  2 +-
 src/pages/login/Login.tsx            |  2 +-
 src/pages/onboarding/Welcome.tsx     |  2 +-
 src/pages/signup/Signup.module.scss  | 25 ++++++++++++++++++++++++-
 src/pages/signup/Signup.tsx          | 16 +++++++++++-----
 6 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/components/input/InputWidget.tsx b/src/components/input/InputWidget.tsx
index 891596e..9f1ec95 100644
--- a/src/components/input/InputWidget.tsx
+++ b/src/components/input/InputWidget.tsx
@@ -7,6 +7,7 @@ type Props = {
     icon?: string,
     placeholder?: string,
     type: 'TEXT' | 'PASSWORD' | 'PHONE';
+    hideEye?: boolean
 };
 
 type OwnState = {
@@ -32,7 +33,7 @@ class InputWidget extends Component<Props, OwnState> {
 
             { this.props.type === 'PHONE' && <input type='tel' placeholder={this.props.placeholder} /> }
 
-            { this.props.type === 'PASSWORD' && 
+            { this.props.type === 'PASSWORD' && !this.props.hideEye &&
                 <IonButton className={styles.eyeButton} onClick={e => this.setState({ showPassword: !this.state.showPassword })}>
                     { this.state.showPassword && <IonIcon icon={eyeOffOutline}></IonIcon> }
                     { !this.state.showPassword && <IonIcon icon={eyeOutline}></IonIcon> }
diff --git a/src/pages/login/Login.module.scss b/src/pages/login/Login.module.scss
index 29c7c90..b3e180e 100644
--- a/src/pages/login/Login.module.scss
+++ b/src/pages/login/Login.module.scss
@@ -106,7 +106,7 @@
     font-size: 14px;
     color: var(--rock);    
 
-    a {
+    a, span {
         color: var(--shamrock);
         text-decoration: none;
     }
diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
index 2fdb281..176eb60 100644
--- a/src/pages/login/Login.tsx
+++ b/src/pages/login/Login.tsx
@@ -3,7 +3,7 @@ import { personOutline, lockOpenOutline } from 'ionicons/icons';
 import { Component } from 'react';
 import InputWidget from '../../components/input/InputWidget';
 import styles from './Login.module.scss';
-import { BrowserRouter as Router, Route, Link } from "react-router-dom"
+import { Link } from "react-router-dom";
 
 type Props = { };
 
diff --git a/src/pages/onboarding/Welcome.tsx b/src/pages/onboarding/Welcome.tsx
index 3fe7bc0..a39d436 100644
--- a/src/pages/onboarding/Welcome.tsx
+++ b/src/pages/onboarding/Welcome.tsx
@@ -32,7 +32,7 @@ class WelcomePage extends Component<Props, OwnState> {
                         </p>
 
                         <div className={styles.actionButtonsHolder}>
-                            <IonButton className={styles.actionButton} expand="block"> Create Account </IonButton>
+                            <IonButton className={styles.actionButton} expand="block" routerLink="/signup"> Create Account </IonButton>
                             <IonButton className={styles.actionButton} fill="outline" expand="block" routerLink="/login"> Login </IonButton>
                         </div>
                     </div>
diff --git a/src/pages/signup/Signup.module.scss b/src/pages/signup/Signup.module.scss
index 78527da..d93b273 100644
--- a/src/pages/signup/Signup.module.scss
+++ b/src/pages/signup/Signup.module.scss
@@ -66,6 +66,29 @@
     position: relative;
     animation: fadeIn 1s forwards;
 
+    .confirmationAction {
+        padding: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        overflow: visible;
+
+        label {
+            margin: 0;
+            font-size: 14px;
+            text-align: left;
+            color: var(--rock);
+        }
+
+        .toggle {
+            contain: none;
+            --handle-background: var(--apricot);
+            --handle-background-checked: var(--shamrock);
+            --background: var(--ash-dust);
+            --background-checked: var(--ash-dust);
+        }
+    }
+
     .separator {
         display: block;
         width: 100%;
@@ -119,7 +142,7 @@
     font-size: 14px;
     color: var(--rock);    
 
-    span {
+    span, a {
         color: var(--shamrock);
         text-decoration: none;
     }
diff --git a/src/pages/signup/Signup.tsx b/src/pages/signup/Signup.tsx
index 96ffa3a..b8d7a91 100644
--- a/src/pages/signup/Signup.tsx
+++ b/src/pages/signup/Signup.tsx
@@ -1,8 +1,9 @@
-import { IonContent, IonPage, IonButton } from '@ionic/react';
+import { IonContent, IonPage, IonButton, IonToggle } from '@ionic/react';
 import { personOutline, lockOpenOutline, mailOutline, phonePortraitOutline } from 'ionicons/icons';
 import { Component } from 'react';
 import InputWidget from '../../components/input/InputWidget';
 import styles from './Signup.module.scss';
+import { Link } from "react-router-dom";
 
 type Props = { };
 
@@ -47,15 +48,20 @@ class SignupPage extends Component<Props, OwnState> {
                     </div>
 
                     <div className={styles.input}>
-                        <InputWidget type={'PASSWORD'} icon={lockOpenOutline} placeholder={'Confirm Password'} />
+                        <InputWidget type={'PASSWORD'} hideEye={true} icon={lockOpenOutline} placeholder={'Confirm Password'} />
+                    </div>
+
+                    <div className={styles.confirmationAction}>
+                        <label> Login with fingerprint scanner </label>
+                        <IonToggle className={styles.toggle} />
                     </div>
 
                     <div className={styles.actionButtonsHolder}>
-                        <IonButton className={styles.actionButton} expand="block"> Login </IonButton>
-                    </div>                                      
+                        <IonButton className={styles.actionButton} expand="block"> Create </IonButton>
+                    </div>                    
                 </section>
 
-                <div className={ styles.navigationLink }> Already have an account? <a> Login </a> </div>
+                <div className={ styles.navigationLink }> Already have an account? <Link to='/login'> <span> Login </span> </Link> </div>
             </IonContent>
         </IonPage>
     };