From 3c1a29e667ec82cfb5134f69b2216b960d5d2991 Mon Sep 17 00:00:00 2001 From: Sebin Benjamin Date: Sun, 24 Jan 2021 02:44:59 +1300 Subject: [PATCH] feat: update the registration page UI w.r.t new design --- src/app/models/auth.ts | 33 ++- src/app/models/core-api.ts | 18 +- .../user-registration.page.html | 198 +++++++++--------- .../user-registration.page.scss | 33 +++ .../user-registration.page.ts | 28 +-- src/theme/variables.scss | 35 +++- 6 files changed, 191 insertions(+), 154 deletions(-) diff --git a/src/app/models/auth.ts b/src/app/models/auth.ts index b98d3ad..3466019 100644 --- a/src/app/models/auth.ts +++ b/src/app/models/auth.ts @@ -28,45 +28,44 @@ export interface LoginUserCred { export interface UserRegResponse { id: number; user: { - firstName: string; - lastName: string; + fullName: string; email: string; + password: string; }; position: { longitude: string; latitude: string; }; - type: string; - firstLineOfAddress: string; - secondLineOfAddress: string; - country: string; - placeId: string; - postCode: string; + type: UserType; + firstLineOfAddress?: string; + secondLineOfAddress?: string; + placeId?: string; + postCode?: string; city: string; + country: string; phone: string; crisis: number; } export interface UserRegData { user: { - firstName: string; - lastName: string; + fullName: string; email: string; password: string; }; + type: UserType; + crisis: number; + phone: string; position: { longitude: string; latitude: string; }; - type: UserType; - firstLineOfAddress: string; - secondLineOfAddress: string; - placeId: string; - postCode: string; + firstLineOfAddress?: string; + secondLineOfAddress?: string; + placeId?: string; + postCode?: string; city: string; country: string; - crisis: number; - phone: string; } export interface UserDataObservableType { diff --git a/src/app/models/core-api.ts b/src/app/models/core-api.ts index 71872df..bfcfbbb 100644 --- a/src/app/models/core-api.ts +++ b/src/app/models/core-api.ts @@ -9,12 +9,6 @@ interface Position { latitude: string; } -export interface User { - firstName: string; - lastName: string; - email: string; -} - interface Headers { normalizedNames?: any; lazyUpdate?: any; @@ -36,6 +30,12 @@ interface NearbyParticipantsResponseBody { results: NearbyParticipant[]; } +export interface User { + firstName: string; + lastName: string; + email: string; +} + export interface NearbyParticipant { id: number; user: User; @@ -87,9 +87,3 @@ export interface UserProfileData { phone: string; crisis?: number; } - -export interface AcceptRequestAPIParams { - participantId: number; - requestId: number; - crisisId: number; -} diff --git a/src/app/pages/user-registration/user-registration.page.html b/src/app/pages/user-registration/user-registration.page.html index 3e787da..768b10f 100644 --- a/src/app/pages/user-registration/user-registration.page.html +++ b/src/app/pages/user-registration/user-registration.page.html @@ -1,47 +1,56 @@ - - - - - Quarantine Help - + + + + + + +

Register

+ + + + +

+ {{ userType === 'HL' ? 'Volunteer' : 'Quarantined'}} +

+ - - - - - I'm Quarantined - - - I Volunteer - - + + + + +
- + - First Name - + Full Name + -
+ *ngIf="(regForm.get('fullName').invalid && (regForm.get('fullName').dirty || regForm.get('fullName').touched))"> +
First Name is required.
+ - + + - Last Name - + Email address + -
- Last Name is required. + *ngIf="(regForm.get('email').invalid && (regForm.get('email').dirty || regForm.get('email').touched))"> +
+ Email address is required. +
+
+ Please enter a valid email.
@@ -50,7 +59,50 @@ - Address Line + Phone Number + + + +
+ Phone Number is required. +
+
+ Please enter at least 8 digits. +
+
+ Number exceeded maximum length. +
+ + + + + + + + Password + + + + + +
+ Password is required. +
+
+ Please enter minimum 8 characters. +
+ + + + + + + + Address Line - Post Code + Post Code - City + City - Country + Country @@ -132,75 +184,21 @@ - - - - Email address - - - -
- Email address is required. -
-
- Please enter a valid email. -
- - - - - - - - Phone Number - - - -
- Phone Number is required. -
-
- Please enter at least 8 digits. -
-
- Number exceeded maximum length. -
- - - - - - - - Password - - - - - -
- Password is required. -
-
- Please enter minimum 8 characters. -
- - - - - - - - Register - - - + + + + + + Register + + + + + +

Already have an account? Log in

+ + diff --git a/src/app/pages/user-registration/user-registration.page.scss b/src/app/pages/user-registration/user-registration.page.scss index 10a3a44..63e035d 100644 --- a/src/app/pages/user-registration/user-registration.page.scss +++ b/src/app/pages/user-registration/user-registration.page.scss @@ -1,3 +1,35 @@ +ion-toolbar { + margin-top: 8vh; +} + +h4 { + margin: 0; + padding: 0.5rem 2.5rem; + background-color: #e9e9e9; +} + +form { + margin: 0 10vw 10vw 10vw; +} + +a { + text-decoration: none; + color: var(--ion-color-tertiary); + font-weight: bolder; +} + +.about { + h1 { + margin: 0; + } +} + +.submit-button { + font-weight: bolder; + text-transform: none; + font-size: medium; +} + // md upto lg devices @media (min-width: 768px) { ion-img { @@ -38,6 +70,7 @@ ion-list { .search-list { background: var(--ion-color-light-tint); } + max-height: 25vh; overflow-y: scroll; background-color: var(--ion-color-medium-shade); diff --git a/src/app/pages/user-registration/user-registration.page.ts b/src/app/pages/user-registration/user-registration.page.ts index 4ec4d1f..c09bb35 100644 --- a/src/app/pages/user-registration/user-registration.page.ts +++ b/src/app/pages/user-registration/user-registration.page.ts @@ -2,12 +2,14 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { FormControl, Validators, FormGroup } from '@angular/forms'; import { Router, ActivatedRoute, Params } from '@angular/router'; import { Subscription } from 'rxjs'; +import { filter, debounceTime, distinctUntilChanged } from 'rxjs/operators'; import { UserType } from 'src/app/models/core-api'; import { GeoLocationService } from 'src/app/shared/services/geo-location/geo-location.service'; import { MiscService } from 'src/app/shared/services/misc/misc.service'; import { HEREMapService } from 'src/app/shared/services/HERE-map/here-map.service'; import { AuthService } from 'src/app/shared/services/auth/auth.service'; + import { LatLng } from '../../models/geo'; import { UserRegData, UserRegResponse } from 'src/app/models/auth'; import { @@ -15,7 +17,6 @@ import { defaultUserType, defaultPrimaryColor, } from 'src/app/constants/core-api'; -import { filter, debounceTime, distinctUntilChanged } from 'rxjs/operators'; import { countryList, isoCountry3To2Mapping, @@ -23,12 +24,12 @@ import { import { UserThemeColorPrimary } from 'src/app/models/ui'; interface UserAddress { - address: string; + address?: string; city: string; country: string; - countryCode: string; - postCode: string; - placeId: string; + countryCode?: string; + postCode?: string; + placeId?: string; } @Component({ selector: 'app-user-registration', @@ -68,8 +69,7 @@ export class UserRegistrationPage implements OnInit, OnDestroy { private route: ActivatedRoute ) { this.regForm = new FormGroup({ - firstName: new FormControl('', [Validators.required]), - lastName: new FormControl('', [Validators.required]), + fullName: new FormControl('', [Validators.required]), address: new FormControl('', [ Validators.required, Validators.minLength(3), @@ -138,20 +138,11 @@ export class UserRegistrationPage implements OnInit, OnDestroy { this.regFormClean = false; }); - // Provide user with instructions on filling the form. - this.miscService.presentAlert({ - header: 'Info', - subHeader: 'Registration Options', - buttons: ['Ok'], - message: `Please select I'm Quarantined if you are in quarantine and require assistance from volunteers. -

You may continue in the I Volunteer tab otherwise.`, - }); - // Start the loading animation for getting GPS data this.miscService .presentLoadingWithOptions({ duration: 0, - message: `Getting current location.`, + message: `Getting you location.`, }) .then((onLoadSuccess) => { this.loadingAniGPSData = onLoadSuccess; @@ -334,8 +325,7 @@ export class UserRegistrationPage implements OnInit, OnDestroy { }; userData.user = { - firstName: this.regForm.get('firstName').value, - lastName: this.regForm.get('lastName').value, + fullName: this.regForm.get('fullName').value, email: this.regForm.get('email').value, password: this.regForm.get('password').value, }; diff --git a/src/theme/variables.scss b/src/theme/variables.scss index 098c449..ff8e45b 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -89,6 +89,13 @@ --ion-color-themetext-shade: #04669e; --ion-color-themetext-tint: #1e82bc; + --ion-color-medium-text: #c0c0c0; + --ion-color-medium-text-rgb: 192, 192, 192; + --ion-color-medium-text-contrast: #000000; + --ion-color-medium-text-contrast-rgb: 0, 0, 0; + --ion-color-medium-text-shade: #a9a9a9; + --ion-color-medium-text-tint: #c6c6c6; + --ion-font-family: Questrial; // --ion-text-color: blue; // --ion-text-color-rgb: rgb(0, 0, 255); @@ -96,9 +103,9 @@ @media (prefers-color-scheme: dark) { /* - * Dark Colors - * ------------------------------------------- - */ + * Dark Colors + * ------------------------------------------- + */ body { --ion-color-primaryAF: #f2cfcf; @@ -185,13 +192,20 @@ --ion-color-themetext-shade: #04669e; --ion-color-themetext-tint: #1e82bc; + --ion-color-medium-text: #c0c0c0; + --ion-color-medium-text-rgb: 192, 192, 192; + --ion-color-medium-text-contrast: #000000; + --ion-color-medium-text-contrast-rgb: 0, 0, 0; + --ion-color-medium-text-shade: #a9a9a9; + --ion-color-medium-text-tint: #c6c6c6; + --ion-font-family: Questrial; } /* - * iOS Dark Theme - * ------------------------------------------- - */ + * iOS Dark Theme + * ------------------------------------------- + */ .ios body { --ion-background-color: #000000; @@ -313,6 +327,15 @@ --ion-color-tint: var(--ion-color-themetext-tint); } +.ion-color-medium-text { + --ion-color-base: var(--ion-color-medium-text); + --ion-color-base-rgb: var(--ion-color-medium-text-rgb); + --ion-color-contrast: var(--ion-color-medium-text-contrast); + --ion-color-contrast-rgb: var(--ion-color-medium-text-contrast-rgb); + --ion-color-shade: var(--ion-color-medium-text-shade); + --ion-color-tint: var(--ion-color-medium-text-tint); +} + @font-face { font-family: 'Questrial'; src: url('../assets/fonts/Questrial-Regular.ttf');