Signup UI

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> }

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;
     }

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 = { };
 

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>

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;
     }

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>
     };