Skip to content

Commit 836ed30

Browse files
khoadnguyenkhoadnguyen
authored
Merge branch 'dev' into 67-register-backend-functionality-and-updates
2 parents 45aa719 + 07329c8 commit 836ed30

15 files changed

Lines changed: 399 additions & 132 deletions

File tree

‎package-lock.json‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"zone.js": "0.8.26"
4848
},
4949
"devDependencies": {
50+
"@fortawesome/fontawesome-free": "^5.3.1",
5051
"@ionic/app-scripts": "^3.2.0",
5152
"@types/jest": "^23.3.3",
5253
"jest": "^23.6.0",

‎src/app/app.module.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { ErrorHandler, NgModule } from '@angular/core';
33
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
44
import { SplashScreen } from '@ionic-native/splash-screen';
55
import { StatusBar } from '@ionic-native/status-bar';
6+
import { HttpClientModule } from '@angular/common/http';
67

78
import { MyApp } from './app.component';
89
import { HomePage } from '../pages/home/home';
@@ -32,8 +33,8 @@ import { HttpClientModule } from '@angular/common/http';
3233
],
3334
imports: [
3435
BrowserModule,
35-
IonicModule.forRoot(MyApp),
36-
HttpClientModule
36+
HttpClientModule,
37+
IonicModule.forRoot(MyApp)
3738
],
3839
bootstrap: [IonicApp],
3940
entryComponents: [

‎src/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
1111
<link rel="manifest" href="manifest.json">
12+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
1213
<meta name="theme-color" content="#4e8ef7">
1314

1415
<!-- add to homescreen for ios -->

‎src/pages/login/login.html‎

Lines changed: 83 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
Ionic pages and navigation.
66
-->
77
<ion-header>
8-
<ion-navbar>
9-
<button ion-button menuToggle>
10-
<ion-icon name="menu"></ion-icon>
11-
</button>
12-
<ion-title>Register</ion-title>
13-
</ion-navbar>
8+
<ion-navbar>
9+
<button ion-button menuToggle>
10+
<ion-icon name="menu"></ion-icon>
11+
</button>
12+
<ion-title>Login</ion-title>
13+
</ion-navbar>
1414
</ion-header>
1515

1616
<ion-content>
@@ -19,72 +19,82 @@
1919
<h1 id="title">INTRANSITION</h1>
2020
</div>
2121

22-
<ion-grid fixed>
23-
24-
<br>
25-
26-
<ion-row>
27-
<ion-col col-1></ion-col>
28-
<ion-col>
29-
<h2 text-center>Transitioning from the military to civilian environment is more than just a job change.</h2>
30-
<br>
31-
<h2 id="lifechange" text-center>It's a life change.</h2>
32-
</ion-col>
33-
<ion-col col-1></ion-col>
34-
</ion-row>
35-
36-
<br>
37-
38-
<ion-row>
39-
<ion-col col-1></ion-col>
40-
<ion-col>
41-
<ion-label class="labels" style="font-size: 25px" stacked>EMAIL ADDRESS</ion-label>
42-
<ion-input class="inputs" type="email"></ion-input>
43-
<ion-icon class="icons" name="person"></ion-icon>
44-
</ion-col>
45-
<ion-col col-1></ion-col>
46-
</ion-row>
47-
48-
<ion-row>
49-
<ion-col col-1></ion-col>
50-
<ion-col>
51-
<ion-label class="labels" style="font-size: 25px" stacked>PASSWORD</ion-label>
52-
<ion-input class="inputs" type="password"></ion-input>
53-
<ion-icon class="icons" name="lock"></ion-icon>
54-
</ion-col>
55-
<ion-col col-1></ion-col>
56-
</ion-row>
57-
58-
<br>
59-
<br>
60-
61-
<ion-row>
62-
<ion-col col-2></ion-col>
63-
<ion-col>
64-
<button id="loginbutton" ion-button block>LOGIN</button>
65-
</ion-col>
66-
<ion-col col-2></ion-col>
67-
</ion-row>
68-
69-
<br>
70-
<br>
71-
72-
<ion-row>
73-
<ion-col col-1></ion-col>
74-
<ion-col>
75-
<h3 text-center>If you don't have an account yet, you can register now.</h3>
76-
</ion-col>
77-
<ion-col col-1></ion-col>
78-
</ion-row>
79-
80-
<ion-row style="padding-bottom:30px;">
81-
<ion-col col-2></ion-col>
82-
<ion-col>
83-
<button id="signupbutton" ion-button block>SIGN UP</button>
84-
</ion-col>
85-
<ion-col col-2></ion-col>
86-
</ion-row>
87-
88-
</ion-grid>
22+
<form [formGroup]="loginCreds" (ngSubmit)="login()">
23+
<ion-grid>
24+
25+
<ion-row>
26+
<ion-col col-1></ion-col>
27+
<ion-col>
28+
<h2 text-center>Transitioning from the military to civilian environment is more than just a job change.</h2>
29+
<br>
30+
<h2 id="lifechange" text-center>It's a life change.</h2>
31+
</ion-col>
32+
<ion-col col-1></ion-col>
33+
</ion-row>
34+
35+
<ion-row>
36+
<ion-col col-1></ion-col>
37+
<ion-col>
38+
<ion-label class="labels" style="font-size: 25px" stacked>EMAIL ADDRESS</ion-label>
39+
<ion-input formControlName="email" class="inputs" id="email" type="email"></ion-input>
40+
</ion-col>
41+
<ion-col col-1></ion-col>
42+
</ion-row>
43+
44+
<ion-row>
45+
<ion-col col-1></ion-col>
46+
<ion-col>
47+
<ion-item no-lines *ngIf="!loginCreds.controls.email.valid && (loginCreds.controls.email.dirty || submitAttempt)">
48+
<p class="invalid-text">Please enter a valid email</p>
49+
</ion-item><br>
50+
</ion-col>
51+
<ion-col col-1></ion-col>
52+
</ion-row>
53+
54+
<ion-row>
55+
<ion-col col-1></ion-col>
56+
<ion-col>
57+
<ion-label class="labels" style="font-size: 25px" stacked>PASSWORD</ion-label>
58+
<ion-input formControlName="password" class="inputs" id="password" type="password"></ion-input>
59+
</ion-col>
60+
<ion-col col-1></ion-col>
61+
</ion-row>
62+
63+
<ion-row>
64+
<ion-col col-1></ion-col>
65+
<ion-col>
66+
<ion-item no-lines *ngIf="!loginCreds.controls.password.valid && (loginCreds.controls.password.dirty || submitAttempt)">
67+
<p class="invalid-text">Please enter a password</p>
68+
</ion-item><br>
69+
</ion-col>
70+
<ion-col col-1></ion-col>
71+
</ion-row>
72+
73+
<ion-row>
74+
<ion-col col-2></ion-col>
75+
<ion-col>
76+
<button id="loginbutton" type="submit" ion-button block [disabled]="!loginCreds.valid">LOGIN</button>
77+
</ion-col>
78+
<ion-col col-2></ion-col>
79+
</ion-row>
80+
81+
<ion-row>
82+
<ion-col col-1></ion-col>
83+
<ion-col>
84+
<h3 text-center>If you don't have an account yet, you can register now.</h3>
85+
</ion-col>
86+
<ion-col col-1></ion-col>
87+
</ion-row>
88+
89+
<ion-row>
90+
<ion-col col-2></ion-col>
91+
<ion-col>
92+
<button (click)="toRegisterPage()" id="signupbutton" ion-button block>SIGN UP</button>
93+
</ion-col>
94+
<ion-col col-2></ion-col>
95+
</ion-row>
96+
97+
</ion-grid>
98+
</form>
8999

90100
</ion-content>

‎src/pages/login/login.scss‎

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,23 +25,42 @@ page-login {
2525

2626
.labels {
2727
color: rgb(96,96,96);
28-
font-size: 25px;
2928
}
3029

30+
#email:before {
31+
font-family: "Font Awesome 5 Free";
32+
font-size: 30px;
33+
font-weight: 900;
34+
color: rgb(130,180,64);
35+
content: "\f007";
36+
position: absolute;
37+
left: 10px;
38+
top: 10px;
39+
}
40+
41+
#password:before {
42+
font-family: "Font Awesome 5 Free";
43+
font-size: 30px;
44+
font-weight: 900;
45+
color: rgb(130,180,64);
46+
content: "\f023";
47+
position: absolute;
48+
left: 10px;
49+
top: 10px;
50+
}
51+
3152
.inputs {
53+
position: relative;
3254
border: 1px solid rgb(229, 230, 230);
3355
background-color: rgb(248, 248, 248);
3456
padding-left: 60px;
3557
font-size: 25px
3658
}
3759

38-
.icons {
39-
color: rgb(130,180,64);
40-
font-size: 35px;
41-
position: absolute;
42-
top: 60px;
43-
left: 20px
44-
}
60+
.invalid-text {
61+
font-size: 20px;
62+
color: #ea6153;
63+
}
4564

4665
#loginbutton {
4766
background-color: rgb(130,180,64);
@@ -86,8 +105,17 @@ page-login {
86105
left: 140px;
87106
}
88107

108+
.invalid-text {
109+
font-size: 20px;
110+
color: #ea6153;
111+
margin: auto;
112+
width: 70%;
113+
}
114+
89115
.labels {
90116
padding-left: 15%;
117+
font-size: 25px;
118+
91119
}
92120

93121

‎src/pages/login/login.ts‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
import { Component } from '@angular/core';
22
import { NavController, NavParams } from 'ionic-angular';
3+
import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
4+
5+
import { RegisterPage } from '../register/register';
6+
import { DashboardPage } from '../dashboard/dashboard';
7+
8+
import { UserProvider } from '../../providers/user/user'
9+
310

411
/**
512
* Generated class for the LoginPage page.
@@ -14,11 +21,36 @@ import { NavController, NavParams } from 'ionic-angular';
1421
})
1522
export class LoginPage {
1623

17-
constructor(public navCtrl: NavController, public navParams: NavParams) {
24+
private loginCreds : FormGroup;
25+
26+
constructor(public navCtrl: NavController, public navParams: NavParams, public _userService: UserProvider, private formBuilder: FormBuilder) {
27+
this.loginCreds = this.formBuilder.group({
28+
email: ['', Validators.compose([Validators.required,
29+
Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])],
30+
password: ['', Validators.required],
31+
});
1832
}
1933

2034
ionViewDidLoad() {
2135
console.log('ionViewDidLoad LoginPage');
2236
}
2337

38+
login() {
39+
this._userService.login(this.loginCreds.value)
40+
.subscribe(
41+
(res) => {
42+
alert("you're logged in!")
43+
this.toDashboard();
44+
},
45+
(err) => alert("Invalid credentials")
46+
)
47+
}
48+
49+
toRegisterPage() {
50+
this.navCtrl.push(RegisterPage)
51+
}
52+
53+
toDashboard() {
54+
this.navCtrl.setRoot(DashboardPage);
55+
}
2456
}

0 commit comments

Comments
 (0)