Skip to content

Commit 3c1a29e

Browse files
sebinbenjaminsebinbenjamin
committed
feat: update the registration page UI w.r.t new design
1 parent 7f5c4ae commit 3c1a29e

File tree

6 files changed

+191
-154
lines changed

6 files changed

+191
-154
lines changed

‎src/app/models/auth.ts‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -28,45 +28,44 @@ export interface LoginUserCred {
2828
export interface UserRegResponse {
2929
id: number;
3030
user: {
31-
firstName: string;
32-
lastName: string;
31+
fullName: string;
3332
email: string;
33+
password: string;
3434
};
3535
position: {
3636
longitude: string;
3737
latitude: string;
3838
};
39-
type: string;
40-
firstLineOfAddress: string;
41-
secondLineOfAddress: string;
42-
country: string;
43-
placeId: string;
44-
postCode: string;
39+
type: UserType;
40+
firstLineOfAddress?: string;
41+
secondLineOfAddress?: string;
42+
placeId?: string;
43+
postCode?: string;
4544
city: string;
45+
country: string;
4646
phone: string;
4747
crisis: number;
4848
}
4949

5050
export interface UserRegData {
5151
user: {
52-
firstName: string;
53-
lastName: string;
52+
fullName: string;
5453
email: string;
5554
password: string;
5655
};
56+
type: UserType;
57+
crisis: number;
58+
phone: string;
5759
position: {
5860
longitude: string;
5961
latitude: string;
6062
};
61-
type: UserType;
62-
firstLineOfAddress: string;
63-
secondLineOfAddress: string;
64-
placeId: string;
65-
postCode: string;
63+
firstLineOfAddress?: string;
64+
secondLineOfAddress?: string;
65+
placeId?: string;
66+
postCode?: string;
6667
city: string;
6768
country: string;
68-
crisis: number;
69-
phone: string;
7069
}
7170

7271
export interface UserDataObservableType {

‎src/app/models/core-api.ts‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,6 @@ interface Position {
99
latitude: string;
1010
}
1111

12-
export interface User {
13-
firstName: string;
14-
lastName: string;
15-
email: string;
16-
}
17-
1812
interface Headers {
1913
normalizedNames?: any;
2014
lazyUpdate?: any;
@@ -36,6 +30,12 @@ interface NearbyParticipantsResponseBody {
3630
results: NearbyParticipant[];
3731
}
3832

33+
export interface User {
34+
firstName: string;
35+
lastName: string;
36+
email: string;
37+
}
38+
3939
export interface NearbyParticipant {
4040
id: number;
4141
user: User;
@@ -87,9 +87,3 @@ export interface UserProfileData {
8787
phone: string;
8888
crisis?: number;
8989
}
90-
91-
export interface AcceptRequestAPIParams {
92-
participantId: number;
93-
requestId: number;
94-
crisisId: number;
95-
}

‎src/app/pages/user-registration/user-registration.page.html‎

Lines changed: 98 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,56 @@
1-
<ion-header translucent class="hide-lg hide-xl">
2-
<ion-toolbar fixed [color]="userThemeColorPrimary">
3-
<ion-buttons slot="start">
4-
<ion-menu-button autoHide="false"></ion-menu-button>
5-
<ion-title>Quarantine Help</ion-title>
6-
</ion-buttons>
1+
<ion-header class="ion-no-border">
2+
<ion-toolbar>
3+
<ion-title>
4+
<ion-row class="ion-justify-content-start ion-align-items-center">
5+
<ion-back-button mode="md" icon="chevron-back"></ion-back-button>
6+
<ion-text class="about">
7+
<h1>Register</h1>
8+
</ion-text>
9+
</ion-row>
10+
</ion-title>
711
</ion-toolbar>
12+
<ion-row class="ion-justify-content-center ion-align-items-center ion-padding-top">
13+
<h4>
14+
{{ userType === 'HL' ? 'Volunteer' : 'Quarantined'}}
15+
</h4>
16+
</ion-row>
817
</ion-header>
918

10-
<ion-content class="ion-padding ion-margin">
11-
<ion-grid class="ion-padding top-spacer">
12-
<ion-segment [(ngModel)]="userType">
13-
<ion-segment-button value="AF">
14-
<ion-label>I'm Quarantined</ion-label>
15-
</ion-segment-button>
16-
<ion-segment-button value="HL">
17-
<ion-label>I Volunteer</ion-label>
18-
</ion-segment-button>
19-
</ion-segment>
19+
<ion-content class="ion-padding ion-margin ion-justify-content-center">
20+
<ion-grid class="ion-padding top-spacer ion-justify-content-center">
21+
22+
<!-- <ion-label>Quarantined</ion-label> -->
23+
2024

2125
<form [formGroup]="regForm">
2226
<ion-row class="ion-justify-content-center">
23-
<ion-col size-md="2" size-lg="2">
27+
<ion-col size-md="4" size-lg="4" size-xs="12">
2428
<ion-item>
25-
<ion-label color="medium" position="floating">First Name</ion-label>
26-
<ion-input required formControlName="firstName"></ion-input>
29+
<ion-label color="medium-text" position="floating">Full Name</ion-label>
30+
<ion-input required formControlName="fullName"></ion-input>
2731
</ion-item>
2832
<ion-item lines="none" class="formInvalid"
29-
*ngIf="(regForm.get('firstName').invalid && (regForm.get('firstName').dirty || regForm.get('firstName').touched))">
30-
<div *ngIf="regForm.get('firstName').errors.required">
33+
*ngIf="(regForm.get('fullName').invalid && (regForm.get('fullName').dirty || regForm.get('fullName').touched))">
34+
<div *ngIf="regForm.get('fullName').errors.required">
3135
First Name is required.
3236
</div>
3337
</ion-item>
3438
</ion-col>
39+
</ion-row>
3540

36-
<ion-col size-md="2" size-lg="2">
41+
<ion-row class="ion-justify-content-center">
42+
<ion-col size-md="4" size-lg="4" size-xs="12">
3743
<ion-item>
38-
<ion-label color="medium" position="floating">Last Name</ion-label>
39-
<ion-input required formControlName="lastName"></ion-input>
44+
<ion-label color="medium-text" position="floating">Email address </ion-label>
45+
<ion-input required formControlName="email" type="email"></ion-input>
4046
</ion-item>
4147
<ion-item lines="none" class="formInvalid"
42-
*ngIf="(regForm.get('lastName').invalid && (regForm.get('lastName').dirty || regForm.get('lastName').touched))">
43-
<div *ngIf="regForm.get('lastName').errors.required">
44-
Last Name is required.
48+
*ngIf="(regForm.get('email').invalid && (regForm.get('email').dirty || regForm.get('email').touched))">
49+
<div *ngIf="regForm.get('email').errors.required">
50+
Email address is required.
51+
</div>
52+
<div *ngIf="regForm.get('email').errors.email">
53+
Please enter a valid email.
4554
</div>
4655
</ion-item>
4756
</ion-col>
@@ -50,7 +59,50 @@
5059
<ion-row class="ion-justify-content-center">
5160
<ion-col size-md="4" size-lg="4" size-xs="12">
5261
<ion-item>
53-
<ion-label color="medium" position="floating"> Address Line </ion-label>
62+
<ion-label color="medium-text" position="floating">Phone Number </ion-label>
63+
<ion-input required formControlName="phoneNumber" type="tel"></ion-input>
64+
</ion-item>
65+
<ion-item lines="none" class="formInvalid"
66+
*ngIf="(regForm.get('phoneNumber').invalid && (regForm.get('phoneNumber').dirty || regForm.get('phoneNumber').touched))">
67+
<div *ngIf="regForm.get('phoneNumber').errors.required">
68+
Phone Number is required.
69+
</div>
70+
<div *ngIf="regForm.get('phoneNumber').errors.minlength">
71+
Please enter at least 8 digits.
72+
</div>
73+
<div *ngIf="regForm.get('phoneNumber').errors.maxlength">
74+
Number exceeded maximum length.
75+
</div>
76+
</ion-item>
77+
</ion-col>
78+
</ion-row>
79+
80+
<ion-row class="ion-justify-content-center">
81+
<ion-col size-md="4" size-lg="4" size-xs="12">
82+
<ion-item>
83+
<ion-label color="medium-text" position="floating">Password </ion-label>
84+
<ion-input [type]="passwordIcon === 'eye'? 'password':'text'" required formControlName="password"
85+
type="password"></ion-input>
86+
<ion-icon slot="end" [name]="passwordIcon" (click)="togglePasswordVisibility()" color="medium"
87+
class="ion-align-self-center">
88+
</ion-icon>
89+
</ion-item>
90+
<ion-item lines="none" class="formInvalid"
91+
*ngIf="(regForm.get('password').invalid && (regForm.get('password').dirty || regForm.get('password').touched))">
92+
<div *ngIf="regForm.get('password').errors.required">
93+
Password is required.
94+
</div>
95+
<div *ngIf="regForm.get('password').errors.minlength">
96+
Please enter minimum 8 characters.
97+
</div>
98+
</ion-item>
99+
</ion-col>
100+
</ion-row>
101+
102+
<ion-row class="ion-justify-content-center">
103+
<ion-col size-md="4" size-lg="4" size-xs="12">
104+
<ion-item>
105+
<ion-label color="medium-text" position="floating"> Address Line </ion-label>
54106
<ion-input required formControlName="address"></ion-input>
55107
</ion-item>
56108
<ion-list *ngIf="displayAddressSearchResult && addressResultList.length > 0" lines="none"
@@ -73,7 +125,7 @@
73125
<ion-row class="ion-justify-content-center">
74126
<ion-col size-md="4" size-lg="4" size-xs="12">
75127
<ion-item>
76-
<ion-label color="medium" position="floating"> Post Code </ion-label>
128+
<ion-label color="medium-text" position="floating"> Post Code </ion-label>
77129
<ion-input required formControlName="postCode"></ion-input>
78130
</ion-item>
79131
<ion-item lines="none" class="formInvalid"
@@ -88,7 +140,7 @@
88140
<ion-row class="ion-justify-content-center">
89141
<ion-col size-md="4" size-lg="4" size-xs="12">
90142
<ion-item>
91-
<ion-label color="medium" position="floating"> City </ion-label>
143+
<ion-label color="medium-text" position="floating"> City </ion-label>
92144
<ion-input required formControlName="city"></ion-input>
93145
</ion-item>
94146
<ion-item lines="none" class="formInvalid"
@@ -106,7 +158,7 @@
106158
<ion-row class="ion-justify-content-center">
107159
<ion-col size-md="4" size-lg="4" size-xs="12">
108160
<ion-item (click)="showCountrySearch()">
109-
<ion-label color="medium" position="floating"> Country </ion-label>
161+
<ion-label color="medium-text" position="floating"> Country </ion-label>
110162
<ion-input readonly="true" required formControlName="country"></ion-input>
111163
</ion-item>
112164
<ion-item *ngIf="displayCountrySearchResult" lines="none">
@@ -132,75 +184,21 @@
132184
</ion-col>
133185
</ion-row>
134186

135-
<ion-row class="ion-justify-content-center">
136-
<ion-col size-md="4" size-lg="4" size-xs="12">
137-
<ion-item>
138-
<ion-label color="medium" position="floating">Email address </ion-label>
139-
<ion-input required formControlName="email" type="email"></ion-input>
140-
</ion-item>
141-
<ion-item lines="none" class="formInvalid"
142-
*ngIf="(regForm.get('email').invalid && (regForm.get('email').dirty || regForm.get('email').touched))">
143-
<div *ngIf="regForm.get('email').errors.required">
144-
Email address is required.
145-
</div>
146-
<div *ngIf="regForm.get('email').errors.email">
147-
Please enter a valid email.
148-
</div>
149-
</ion-item>
150-
</ion-col>
151-
</ion-row>
152-
153-
<ion-row class="ion-justify-content-center">
154-
<ion-col size-md="4" size-lg="4" size-xs="12">
155-
<ion-item>
156-
<ion-label color="medium" position="floating">Phone Number </ion-label>
157-
<ion-input required formControlName="phoneNumber" type="tel"></ion-input>
158-
</ion-item>
159-
<ion-item lines="none" class="formInvalid"
160-
*ngIf="(regForm.get('phoneNumber').invalid && (regForm.get('phoneNumber').dirty || regForm.get('phoneNumber').touched))">
161-
<div *ngIf="regForm.get('phoneNumber').errors.required">
162-
Phone Number is required.
163-
</div>
164-
<div *ngIf="regForm.get('phoneNumber').errors.minlength">
165-
Please enter at least 8 digits.
166-
</div>
167-
<div *ngIf="regForm.get('phoneNumber').errors.maxlength">
168-
Number exceeded maximum length.
169-
</div>
170-
</ion-item>
171-
</ion-col>
172-
</ion-row>
173-
174-
<ion-row class="ion-justify-content-center">
175-
<ion-col size-md="4" size-lg="4" size-xs="12">
176-
<ion-item>
177-
<ion-label color="medium" position="floating">Password </ion-label>
178-
<ion-input [type]="passwordIcon === 'eye'? 'password':'text'" required formControlName="password"
179-
type="password"></ion-input>
180-
<ion-icon slot="end" [name]="passwordIcon" (click)="togglePasswordVisibility()" color="medium"
181-
class="ion-align-self-center">
182-
</ion-icon>
183-
</ion-item>
184-
<ion-item lines="none" class="formInvalid"
185-
*ngIf="(regForm.get('password').invalid && (regForm.get('password').dirty || regForm.get('password').touched))">
186-
<div *ngIf="regForm.get('password').errors.required">
187-
Password is required.
188-
</div>
189-
<div *ngIf="regForm.get('password').errors.minlength">
190-
Please enter minimum 8 characters.
191-
</div>
192-
</ion-item>
193-
</ion-col>
194-
</ion-row>
195-
196-
<ion-row class="ion-justify-content-center ion-padding-vertical">
197-
<ion-col size-md="4" size-lg="3" size-xs="8">
198-
<ion-button [color]="userThemeColorPrimary" shape="round" expand="full" size="default" fill="outline"
199-
[disabled]="(regFormClean || !regForm.valid)" (click)="registerUser()">
200-
Register
201-
</ion-button>
202-
</ion-col>
203-
</ion-row>
204187
</form>
205188
</ion-grid>
206189
</ion-content>
190+
191+
<ion-footer class="ion-no-border">
192+
<ion-row class="ion-justify-content-center ion-padding-top ">
193+
<ion-col size-md="4" size-lg="3" size-xs="8">
194+
<ion-button [color]="userThemeColorPrimary" shape="round" expand="full" size="default" fill="solid"
195+
[disabled]="(regFormClean || !regForm.valid)" (click)="registerUser()" class="submit-button">
196+
Register
197+
</ion-button>
198+
</ion-col>
199+
</ion-row>
200+
201+
<ion-row class="ion-justify-content-center ion-padding-bottom">
202+
<p>Already have an account? <a routerLink="/login"> Log in</a></p>
203+
</ion-row>
204+
</ion-footer>

‎src/app/pages/user-registration/user-registration.page.scss‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,35 @@
1+
ion-toolbar {
2+
margin-top: 8vh;
3+
}
4+
5+
h4 {
6+
margin: 0;
7+
padding: 0.5rem 2.5rem;
8+
background-color: #e9e9e9;
9+
}
10+
11+
form {
12+
margin: 0 10vw 10vw 10vw;
13+
}
14+
15+
a {
16+
text-decoration: none;
17+
color: var(--ion-color-tertiary);
18+
font-weight: bolder;
19+
}
20+
21+
.about {
22+
h1 {
23+
margin: 0;
24+
}
25+
}
26+
27+
.submit-button {
28+
font-weight: bolder;
29+
text-transform: none;
30+
font-size: medium;
31+
}
32+
133
// md upto lg devices
234
@media (min-width: 768px) {
335
ion-img {
@@ -38,6 +70,7 @@ ion-list {
3870
.search-list {
3971
background: var(--ion-color-light-tint);
4072
}
73+
4174
max-height: 25vh;
4275
overflow-y: scroll;
4376
background-color: var(--ion-color-medium-shade);

0 commit comments

Comments
 (0)