From 06a2d3c45baf371d7aefef19ca6966b65ec20ea5 Mon Sep 17 00:00:00 2001
From: Sebin  Benjamin <sebinbenjamin@gmail.com>
Date: Sun, 24 Jan 2021 12:45:22 +1300
Subject: [PATCH] feat: update login page UI to v2.0

---
 src/app/pages/login/login.page.html           | 56 +++++++++----------
 src/app/pages/login/login.page.scss           | 28 +++++++---
 src/app/pages/login/login.page.ts             | 26 +++++++--
 .../pages/my-requests/my-requests.page.scss   |  1 -
 .../select-user-type.page.scss                |  8 +--
 src/global.scss                               |  1 +
 6 files changed, 71 insertions(+), 49 deletions(-)

diff --git a/src/app/pages/login/login.page.html b/src/app/pages/login/login.page.html
index 560458e..84f9867 100644
--- a/src/app/pages/login/login.page.html
+++ b/src/app/pages/login/login.page.html
@@ -1,25 +1,30 @@
-<ion-header translucent class="hide-lg hide-xl">
-  <ion-row class="ion-padding-start ion-padding-top ion-justify-content-center ion-align-items-center">
-    <ion-col size="4" class="ion-padding-end">
-      <ion-img src="assets/icons/120X200.png" alt="Quarantine Help Logo"></ion-img>
-    </ion-col>
-    <ion-col size="8">
-      <ion-text color="primary-text" class="menu-header">
-        <h3>Quarantine Help</h3>
-      </ion-text>
-    </ion-col>
+<ion-header class="ion-no-border">
+  <ion-toolbar>
+    <ion-title>
+      <ion-row class="ion-justify-content-start ion-align-items-center">
+        <ion-back-button mode="md" icon="chevron-back"></ion-back-button>
+        <ion-text class="about">
+          <h1>Login</h1>
+        </ion-text>
+      </ion-row>
+    </ion-title>
+  </ion-toolbar>
+  <ion-row class="ion-justify-content-center ion-align-items-center ion-padding-top">
+    <h4>
+      {{ userType === 'HL' ? 'Volunteer' : 'Quarantined'}}
+    </h4>
   </ion-row>
 </ion-header>
 
 <ion-content>
-  <ion-card>
+  <ion-card class="ion-justify-content-center">
     <ion-grid>
       <form [formGroup]="loginForm">
         <ion-row class="ion-justify-content-center formHeight">
           <ion-col class="ion-align-self-center" size-md="4" size-lg="3" size-xs="10">
             <ion-list>
               <ion-item lines="inset">
-                <ion-label color="dark" position="floating">Email Id</ion-label>
+                <ion-label color="medium-text" position="floating">Email Id</ion-label>
                 <ion-input type="email" formControlName="email" required></ion-input>
               </ion-item>
               <ion-item lines="none" class="formInvalid"
@@ -32,12 +37,12 @@ <h3>Quarantine Help</h3>
                 </div>
               </ion-item>
               <ion-item lines="inset">
-                <ion-label color="dark" position="floating">Password</ion-label>
+                <ion-label color="medium-text" position="floating">Password</ion-label>
                 <ion-input clearOnEdit="false" [type]="passwordIcon === 'eye'? 'password':'text' "
                   formControlName="password" required>
                 </ion-input>
-                <ion-icon slot="end" [name]="passwordIcon" (click)="togglePasswordVisibility()" [color]="userThemeColorPrimary"
-                  class="ion-align-self-end">
+                <ion-icon slot="end" [name]="passwordIcon" (click)="togglePasswordVisibility()"
+                  [color]="userThemeColorPrimary" class="ion-align-self-end">
                 </ion-icon>
               </ion-item>
               <ion-item lines="none" class="formInvalid"
@@ -51,21 +56,22 @@ <h3>Quarantine Help</h3>
               </ion-item>
             </ion-list>
             <ion-item lines="none" class="ion-margin-top">
-              <ion-button expand="block" type="submit" class="ion-margin-top" shape="round" fill="outline"
-                size="default" (click)="loginUser()" [disabled]="(pageClean || !loginForm.valid)">
-                <ion-text color="primary-text"><strong>Login</strong></ion-text>
+              <ion-button [color]="userThemeColorPrimary" expand="block" type="submit" class="ion-margin-top"
+                shape="round" fill="solid" size="large" (click)="loginUser()"
+                [disabled]="(pageClean || !loginForm.valid)">
+                <ion-text><strong class="login-button">Log in</strong></ion-text>
               </ion-button>
             </ion-item>
           </ion-col>
         </ion-row>
-        <ion-row class="ion-justify-content-center ion-align-items-center">
+        <ion-row class="ion-justify-content-center ion-align-items-center ion-padding-vertical">
           <ion-item lines="none">
             <ion-text color="primary-text" class="ion-text-center">
               I'm a new user, &nbsp;
             </ion-text>
-            <ion-text color="primary-text" ion-button (click)="registerUser()" class="ion-justify-content-center ion-align-items-center">
-              <strong>Register &nbsp;</strong>
-              <ion-icon name="chevron-forward-circle-outline" class="reg-icon"></ion-icon>
+            <ion-text color="tertiary" ion-button (click)="registerUser()"
+              class="ion-justify-content-center ion-align-items-center">
+              <strong>Register</strong>
             </ion-text>
           </ion-item>
         </ion-row>
@@ -73,9 +79,3 @@ <h3>Quarantine Help</h3>
     </ion-grid>
   </ion-card>
 </ion-content>
-
-<ion-footer class="ion-no-border">
-  <ion-row class="ion-justify-content-center ion-padding-bottom ion-margin-bottom">
-    <ion-text class="ion-text-center" [color]="userThemeColorPrimary"> About us</ion-text>
-  </ion-row>
-</ion-footer>
diff --git a/src/app/pages/login/login.page.scss b/src/app/pages/login/login.page.scss
index 7eaf6e6..57bf458 100644
--- a/src/app/pages/login/login.page.scss
+++ b/src/app/pages/login/login.page.scss
@@ -1,15 +1,21 @@
 ion-toolbar {
-  --border-color: transparent;
+  margin-top: 8vh;
+}
+
+h4 {
+  margin: 0;
+  padding: 0.5rem 2.5rem;
+  background-color: #e9e9e9;
 }
 
 ion-button {
-  width: 70vw;
+  width: 40vw;
   margin-left: auto;
   margin-right: auto;
 }
 
-ion-text{
-  strong{
+ion-text {
+  strong {
     vertical-align: middle;
   }
 }
@@ -18,6 +24,14 @@ ion-icon {
   vertical-align: middle;
 }
 
+form {
+  margin: 0 10vw 10vw 10vw;
+}
+
+.login-button {
+  text-transform: none;
+}
+
 .reg-icon {
   zoom: 1.5;
 }
@@ -45,7 +59,7 @@ ion-card {
 }
 
 //md upto lg devices
-@media (min-width:768px) {
+@media (min-width: 768px) {
   ion-img {
     max-width: 50vw;
     max-height: 200px;
@@ -53,7 +67,7 @@ ion-card {
 }
 
 // xl and above devices
-@media (min-width:1200px) {
+@media (min-width: 1200px) {
   ion-toolbar {
     height: 15vh;
   }
@@ -62,4 +76,4 @@ ion-card {
     max-width: 25vw;
     max-height: 12vh;
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/pages/login/login.page.ts b/src/app/pages/login/login.page.ts
index 3e77f2c..75ccac0 100644
--- a/src/app/pages/login/login.page.ts
+++ b/src/app/pages/login/login.page.ts
@@ -1,17 +1,21 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { AlertController } from '@ionic/angular';
+import { AlertController, MenuController } from '@ionic/angular';
 import { FormControl, Validators, FormGroup } from '@angular/forms';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
-import { MenuController } from '@ionic/angular';
 
 import { AuthService } from 'src/app/shared/services/auth/auth.service';
 import { MiscService } from 'src/app/shared/services/misc/misc.service';
 import { StorageService } from 'src/app/shared/services/storage/storage.service';
+
 import { LoginUserCred, LoginResponse } from '../../models/auth';
 import { UserType } from 'src/app/models/core-api';
 import { UserThemeColorPrimary } from 'src/app/models/ui';
-import { StorageKeys } from 'src/app/constants/core-api';
+import {
+  defaultPrimaryColor,
+  defaultUserType,
+  StorageKeys,
+} from 'src/app/constants/core-api';
 
 @Component({
   selector: 'app-login',
@@ -35,6 +39,7 @@ export class LoginPage implements OnInit, OnDestroy {
     private miscService: MiscService,
     private router: Router,
     private menu: MenuController,
+    private route: ActivatedRoute,
     private storageService: StorageService
   ) {
     this.userThemeColorPrimary = 'primaryAF';
@@ -65,8 +70,17 @@ export class LoginPage implements OnInit, OnDestroy {
     // this.loginForm.controls.email.setValue('testuser1@patient.com');
     // this.loginForm.controls.password.setValue('testuser1');
     // HL user
-    this.loginForm.controls.email.setValue('testuser4@patient.com');
-    this.loginForm.controls.password.setValue('testuser4');
+    this.loginForm.controls.email.setValue('');
+    this.loginForm.controls.password.setValue('');
+
+    this.userType = defaultUserType;
+    this.userThemeColorPrimary = defaultPrimaryColor;
+
+    this.route.queryParams.subscribe((params: Params) => {
+      this.userType = params.userType;
+      this.userThemeColorPrimary =
+        this.userType === 'AF' ? 'primaryAF' : 'primaryHL';
+    });
 
     this.loginSubs = this.loginForm.valueChanges.subscribe((change) => {
       this.pageClean = false;
diff --git a/src/app/pages/my-requests/my-requests.page.scss b/src/app/pages/my-requests/my-requests.page.scss
index 2c41114..6403f49 100644
--- a/src/app/pages/my-requests/my-requests.page.scss
+++ b/src/app/pages/my-requests/my-requests.page.scss
@@ -42,7 +42,6 @@ app-footer-nav {
 
 .create-button {
   text-transform: none;
-  --box-shadow: #00000029 0px 3px 6px;
 }
 
 // md upto lg devices
diff --git a/src/app/pages/select-user-type/select-user-type.page.scss b/src/app/pages/select-user-type/select-user-type.page.scss
index 1dad229..f22ea56 100644
--- a/src/app/pages/select-user-type/select-user-type.page.scss
+++ b/src/app/pages/select-user-type/select-user-type.page.scss
@@ -1,8 +1,3 @@
-ion-button {
-  --box-shadow: 0px 3px 6px #00000029;
-  font-size: medium;
-}
-
 ion-grid {
   display: flex;
   flex-direction: row;
@@ -29,7 +24,6 @@ ion-button {
   margin-right: auto;
 }
 
-
 .footer-icon {
   width: 17vw;
   height: auto;
@@ -50,4 +44,4 @@ ion-button {
   --padding-start: 0.8vh;
   --padding-end: 0.8vh;
   --padding-bottom: 0.8vh;
-}
\ No newline at end of file
+}
diff --git a/src/global.scss b/src/global.scss
index f710af8..3ea24f2 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -27,6 +27,7 @@
 
 ion-button {
   --box-shadow: 0px 3px 6px #00000029;
+  font-size: medium;
 }
 
 .toast-service-class {