Skip to content

Commit cf32a25

Browse files
ittipatkenittipatken
authored
feat: update welcome page UI (#42)
1 parent 08a313c commit cf32a25

3 files changed

Lines changed: 164 additions & 98 deletions

File tree

‎src/app/welcome/welcome.page.html‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,46 @@
11
<ion-content class="ion-text-center ion-padding" color="light">
2-
<ion-card id="mainCard">
2+
<ion-card id="mainCard" class="ion-margin ion-padding">
33
<ion-card-header>
4-
<ion-card-title>MDCU Recorded Lecture</ion-card-title>
4+
<ion-card-title class="ion-text-center" color="primary">
5+
MDCU Recorded Lecture
6+
</ion-card-title>
57
</ion-card-header>
6-
<ion-card-content>
78

9+
<ion-card-content>
810
@if (user) {
9-
<div>
10-
<h2>Hello, {{ user.displayName }}!</h2><br/>
11-
<ion-button expand="block" color="tertiary" (click)="goToHome()">
11+
<h2>Hello, {{ user.displayName }}!</h2><br />
12+
<ion-button expand="block" color="tertiary" shape="round" (click)="goToHome()">
1213
View Courses
1314
</ion-button>
14-
<ion-button expand="block" color="secondary" (click)="logout()">
15-
Sign out
15+
<ion-button expand="block" color="secondary" shape="round" (click)="logout()">
16+
Sign Out
1617
</ion-button>
17-
</div>
1818
} @else {
19-
<p>Sign in with your Docchula account</p><br/>
20-
<ion-button shape="round" slot="start" expand="full" color="tertiary" (click)="login()">
19+
<p class="ion-margin">Sign in with your Docchula account</p>
20+
<ion-button expand="full" shape="round" color="tertiary" class="ion-margin-top" (click)="login()">
2121
Sign in with Docchula
2222
</ion-button>
2323
}
24-
2524
</ion-card-content>
2625
</ion-card>
26+
2727
@if (isIAB) {
28-
<ion-card color="danger" class="browserCard">
28+
<ion-card color="danger" class="browserCard ion-margin">
2929
<ion-card-content>
3030
In-app browser is not supported. Please open this website in Safari/Chrome.
3131
</ion-card-content>
3232
</ion-card>
3333
}
3434
@if (isSafari) {
35-
<ion-card color="warning" class="browserCard">
35+
<ion-card color="warning" class="browserCard ion-margin">
3636
<ion-card-content>
3737
Your browser may not be able to play some video. Please try again using Google Chrome or Mozilla Firefox on Windows/Linux/macOS/Android.
3838
</ion-card-content>
3939
</ion-card>
4040
}
41-
<ion-text class="small-text" color="medium">The Student Union of the Faculty of Medicine, Chulalongkorn University</ion-text>
41+
42+
<ion-text class="ion-margin-top ion-text-center small-text" color="medium">
43+
The Student Union of the Faculty of Medicine, Chulalongkorn University
44+
</ion-text>
4245
</ion-content>
46+

‎src/app/welcome/welcome.page.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ ion-content {
66

77
#mainCard {
88
margin: 20vh auto 0.4rem auto;
9+
border-radius: 1rem;
910
}
1011

1112
.browserCard {

‎src/app/welcome/welcome.page.ts‎

Lines changed: 144 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,160 @@
1-
import { Component, OnDestroy, OnInit } from '@angular/core';
2-
import { AlertController, LoadingController, IonContent, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonButton, IonText } from '@ionic/angular/standalone';
3-
import { Router } from '@angular/router';
4-
import { ManService } from '../man.service';
5-
import { HttpErrorResponse } from '@angular/common/http';
6-
import { Subscription } from 'rxjs';
7-
import { User } from '@angular/fire/auth';
8-
import { AuthService } from '../auth.service';
1+
import { Component, OnDestroy, OnInit } from "@angular/core";
2+
import {
3+
AlertController,
4+
LoadingController,
5+
IonContent,
6+
IonCard,
7+
IonCardHeader,
8+
IonCardTitle,
9+
IonCardContent,
10+
IonButton,
11+
IonText,
12+
} from "@ionic/angular/standalone";
13+
import { Router } from "@angular/router";
14+
import { ManService } from "../man.service";
15+
import { HttpErrorResponse } from "@angular/common/http";
16+
import { Subscription } from "rxjs";
17+
import { User } from "@angular/fire/auth";
18+
import { AuthService } from "../auth.service";
919

1020
@Component({
11-
selector: 'app-welcome',
12-
templateUrl: './welcome.page.html',
13-
styleUrls: ['./welcome.page.scss'],
14-
imports: [IonContent, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonButton, IonText]
21+
selector: "app-welcome",
22+
templateUrl: "./welcome.page.html",
23+
styleUrls: ["./welcome.page.scss"],
24+
imports: [
25+
IonContent,
26+
IonCard,
27+
IonCardHeader,
28+
IonCardTitle,
29+
IonCardContent,
30+
IonButton,
31+
IonText,
32+
],
1533
})
1634
export class WelcomePage implements OnInit, OnDestroy {
17-
authStateSubscription: Subscription;
18-
isAuthChecked: boolean;
19-
user: User;
20-
isSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
21-
isIAB = /FBAN/.test(navigator.userAgent) || /FBAV/.test(navigator.userAgent) || /Line\//.test(navigator.userAgent);
35+
authStateSubscription: Subscription;
36+
isAuthChecked: boolean;
37+
user: User;
38+
isSafari =
39+
/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
40+
isIAB =
41+
/FBAN/.test(navigator.userAgent) ||
42+
/FBAV/.test(navigator.userAgent) ||
43+
/Line\//.test(navigator.userAgent);
2244

23-
constructor(
24-
private router: Router, private authService: AuthService,
25-
private manService: ManService, private loadingCtrl: LoadingController,
26-
public alertCtrl: AlertController) {
27-
}
45+
constructor(
46+
private router: Router,
47+
private authService: AuthService,
48+
private manService: ManService,
49+
private loadingCtrl: LoadingController,
50+
public alertCtrl: AlertController
51+
) {}
2852

29-
ngOnInit() {
30-
this.loadingCtrl.create({
31-
message: 'Authenticating...',
32-
duration: 7000
33-
}).then(loading => {
34-
loading.present();
35-
this.authStateSubscription = this.authService.user.subscribe((user) => {
36-
this.user = user;
37-
if (user) {
38-
// User is signed in.
39-
this.goToHome().then(() => {
40-
loading.dismiss();
41-
});
42-
} else {
43-
this.isAuthChecked = false;
44-
}
45-
loading.dismiss();
53+
ngOnInit() {
54+
this.loadingCtrl
55+
.create({
56+
message: "Authenticating...",
57+
duration: 7000,
58+
})
59+
.then((loading) => {
60+
loading.present();
61+
this.authStateSubscription = this.authService.user.subscribe((user) => {
62+
this.user = user;
63+
if (user) {
64+
// User is signed in.
65+
this.goToHome().then(() => {
66+
loading.dismiss();
4667
});
47-
}).catch(e => console.log('Reject', e));
48-
}
68+
} else {
69+
this.isAuthChecked = false;
70+
}
71+
loading.dismiss();
72+
});
73+
})
74+
.catch((e) => console.log("Reject", e));
75+
}
4976

50-
ngOnDestroy() {
51-
this.authStateSubscription.unsubscribe();
52-
}
77+
ngOnDestroy() {
78+
this.authStateSubscription.unsubscribe();
79+
}
5380

54-
login() {
55-
this.authService.signInWithPopup();
56-
}
81+
async login() {
82+
const loading = await this.loadingCtrl.create({
83+
message: "Signing in...",
84+
spinner: "crescent",
85+
});
86+
await loading.present();
5787

58-
logout() {
59-
this.authService.signOut().then().catch(e => console.log('Reject', e));
60-
this.isAuthChecked = false;
88+
try {
89+
await this.authService.signInWithPopup();
90+
} catch (e) {
91+
console.error("Login failed", e);
92+
await this.alertError(
93+
"Login Failed",
94+
"Unable to sign in. Please try again."
95+
);
96+
} finally {
97+
loading.dismiss();
6198
}
99+
}
62100

63-
goToHome() {
64-
if (this.isAuthChecked) {
65-
return this.router.navigate(['/home']);
66-
}
67-
this.user.getIdToken().then(idToken => {
68-
this.manService.setIdToken(idToken);
69-
this.manService.checkAuthorization().toPromise().then((result) => {
70-
if (result) {
71-
this.isAuthChecked = true;
72-
return this.router.navigate(['/home']);
73-
}
74-
}, (reason: HttpErrorResponse) => {
75-
if (reason instanceof ErrorEvent) {
76-
this.alertError('Client Error', 'Please check your network connection.');
77-
} else if (reason.status === 401) {
78-
this.alertError('Unregistered!', 'You are not allowed to access this website.');
79-
} else if ([500, 502, 503, 504].includes(reason.status)) {
80-
this.alertError('Server Error', 'Please contact administrator.');
81-
} else {
82-
this.manService.changeEndpoint();
83-
this.alertError('Connection Error', 'Unable to reach server. You may try again.');
84-
}
85-
});
86-
});
87-
return new Promise<void>(resolve => resolve());
101+
logout() {
102+
this.authService
103+
.signOut()
104+
.then()
105+
.catch((e) => console.log("Reject", e));
106+
this.isAuthChecked = false;
107+
}
108+
109+
goToHome() {
110+
if (this.isAuthChecked) {
111+
return this.router.navigate(["/home"]);
88112
}
113+
this.user.getIdToken().then((idToken) => {
114+
this.manService.setIdToken(idToken);
115+
this.manService
116+
.checkAuthorization()
117+
.toPromise()
118+
.then(
119+
(result) => {
120+
if (result) {
121+
this.isAuthChecked = true;
122+
return this.router.navigate(["/home"]);
123+
}
124+
},
125+
(reason: HttpErrorResponse) => {
126+
if (reason instanceof ErrorEvent) {
127+
this.alertError(
128+
"Client Error",
129+
"Please check your network connection."
130+
);
131+
} else if (reason.status === 401) {
132+
this.alertError(
133+
"Unregistered!",
134+
"You are not allowed to access this website."
135+
);
136+
} else if ([500, 502, 503, 504].includes(reason.status)) {
137+
this.alertError("Server Error", "Please contact administrator.");
138+
} else {
139+
this.manService.changeEndpoint();
140+
this.alertError(
141+
"Connection Error",
142+
"Unable to reach server. You may try again."
143+
);
144+
}
145+
}
146+
);
147+
});
148+
return new Promise<void>((resolve) => resolve());
149+
}
89150

90-
async alertError(header: string, message: string) {
91-
const alert = await this.alertCtrl.create({
92-
header,
93-
message,
94-
buttons: ['OK']
95-
});
151+
async alertError(header: string, message: string) {
152+
const alert = await this.alertCtrl.create({
153+
header,
154+
message,
155+
buttons: ["OK"],
156+
});
96157

97-
await alert.present();
98-
}
158+
await alert.present();
159+
}
99160
}

0 commit comments

Comments
 (0)