Skip to content

Commit 318b12b

Browse files
khoadnguyenkhoadnguyen
authored
Merge pull request #145 from SoftStackFactory/105-register-page-render-issues
105 register page render issues
2 parents 1c0822c + afa05cb commit 318b12b

7 files changed

Lines changed: 66 additions & 84 deletions

File tree

‎src/pages/login/login.html‎

Lines changed: 20 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -19,63 +19,52 @@
1919
<h1 id="title">INTRANSITION</h1>
2020
</div>
2121

22-
<form [formGroup]="loginCreds" (ngSubmit)="login()">
23-
<ion-grid>
2422

25-
<ion-row>
26-
<ion-col col-1></ion-col>
27-
<ion-col>
23+
<ion-grid>
24+
<form [formGroup]="loginCreds" (ngSubmit)="login()">
25+
26+
<ion-row justify-content-center>
27+
<ion-col col-7 col-xl-6>
2828
<h2 text-center>Transitioning from the military to civilian environment is more than just a job change.</h2>
2929
<br>
3030
<h2 id="lifechange" text-center>It's a life change.</h2>
3131
</ion-col>
32-
<ion-col col-1></ion-col>
3332
</ion-row>
3433

35-
<ion-row>
36-
<ion-col col-1></ion-col>
37-
<ion-col>
34+
<ion-row justify-content-center>
35+
<ion-col col-7>
3836
<ion-label class="labels" style="font-size: 25px" stacked>EMAIL ADDRESS</ion-label>
3937
<ion-input formControlName="email" class="inputs" id="email" type="email"></ion-input>
4038
</ion-col>
41-
<ion-col col-1></ion-col>
4239
</ion-row>
4340

44-
<ion-row>
45-
<ion-col col-1></ion-col>
46-
<ion-col>
41+
<ion-row justify-content-center>
42+
<ion-col col-7>
4743
<ion-item no-lines *ngIf="!loginCreds.controls.email.valid && (loginCreds.controls.email.dirty || submitAttempt)">
4844
<p class="invalid-text">Please enter a valid email</p>
4945
</ion-item><br>
5046
</ion-col>
51-
<ion-col col-1></ion-col>
5247
</ion-row>
5348

54-
<ion-row>
55-
<ion-col col-1></ion-col>
56-
<ion-col>
49+
<ion-row justify-content-center>
50+
<ion-col col-7>
5751
<ion-label class="labels" style="font-size: 25px" stacked>PASSWORD</ion-label>
5852
<ion-input formControlName="password" class="inputs" id="password" type="password"></ion-input>
5953
</ion-col>
60-
<ion-col col-1></ion-col>
6154
</ion-row>
6255

63-
<ion-row>
64-
<ion-col col-1></ion-col>
65-
<ion-col>
56+
<ion-row justify-content-center>
57+
<ion-col col-7>
6658
<ion-item no-lines *ngIf="!loginCreds.controls.password.valid && (loginCreds.controls.password.dirty || submitAttempt)">
6759
<p class="invalid-text">Enter a password between 6-30 characters using only letters and numbers</p>
6860
</ion-item><br>
6961
</ion-col>
70-
<ion-col col-1></ion-col>
7162
</ion-row>
7263

73-
<ion-row>
74-
<ion-col col-2></ion-col>
75-
<ion-col>
64+
<ion-row justify-content-center>
65+
<ion-col class="button-col" col-5>
7666
<button id="loginbutton" type="submit" ion-button block [disabled]="!loginCreds.valid">LOGIN</button>
7767
</ion-col>
78-
<ion-col col-2></ion-col>
7968
</ion-row>
8069

8170
<ion-row>
@@ -86,15 +75,14 @@ <h3 text-center>If you don't have an account yet, you can register now.</h3>
8675
<ion-col col-1></ion-col>
8776
</ion-row>
8877

89-
<ion-row>
90-
<ion-col col-2></ion-col>
91-
<ion-col>
78+
</form>
79+
80+
<ion-row justify-content-center>
81+
<ion-col class="button-col" col-5>
9282
<button (click)="toRegisterPage()" id="signupbutton" ion-button block>SIGN UP</button>
9383
</ion-col>
94-
<ion-col col-2></ion-col>
9584
</ion-row>
9685

97-
</ion-grid>
98-
</form>
86+
</ion-grid>
9987

10088
</ion-content>

‎src/pages/login/login.scss‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,12 +64,14 @@ page-login {
6464

6565
#loginbutton {
6666
background-color: rgb(130,180,64);
67-
font-size: 25px
67+
font-size: 25px;
68+
height: 2.1em;
6869
}
6970

7071
#signupbutton {
7172
background-color: rgb(42,61,79);
72-
font-size: 25px
73+
font-size: 25px;
74+
height: 2.1em;
7375
}
7476

7577
@media screen and (orientation:portrait){
@@ -79,7 +81,7 @@ page-login {
7981
@media screen and (orientation:landscape){
8082
.button{
8183
margin:auto;
82-
width:60%;
84+
width:80%;
8385
height: 2.1em;
8486
}
8587
#loginbutton {
@@ -98,7 +100,7 @@ page-login {
98100

99101
.inputs {
100102
margin: auto;
101-
width: 70%;
103+
width: 80%;
102104
}
103105

104106
.icons {

‎src/pages/login/login.ts‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,6 @@ import { DashboardPage } from '../dashboard/dashboard';
77

88
import { UserProvider } from '../../providers/user/user'
99

10-
11-
/**
12-
* Generated class for the LoginPage page.
13-
*
14-
* See https://ionicframework.com/docs/components/#navigation for more info on
15-
* Ionic pages and navigation.
16-
*/
17-
1810
@Component({
1911
selector: 'page-login',
2012
templateUrl: 'login.html',

‎src/pages/register/register.html‎

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -19,101 +19,99 @@ <h1 id="title">INTRANSITION</h1>
1919
<ion-grid>
2020

2121
<ion-row justify-content-center>
22-
<ion-col col-10>
22+
<ion-col col-7 col-xl-6>
2323
<h2 text-center>Transitioning from the military to civilian environment is more than just a job change.</h2>
2424
<br>
2525
<h2 id="lifechange" text-center>It's a life change.</h2>
2626
</ion-col>
2727
</ion-row>
2828

2929
<form class="form" [formGroup]='validate' (ngSubmit)='submitReg()'>
30+
3031
<ion-row justify-content-center>
31-
<ion-col col-10 col-xl-7>
32+
<ion-col col-7 col-xl-6>
3233
<ion-item no-lines>
3334
<ion-input
34-
[(ngModel)]="registerUser.firstName"
3535
class="inputs"
3636
type="text"
37-
#first
3837
placeholder="First Name"
3938
formControlName='first'
4039
[class.invalid]="!validate.controls.first.valid && (validate.controls.first.dirty || submitAttempt)">
4140
</ion-input>
4241
</ion-item>
43-
<ion-item class="inputs" no-lines *ngIf="!validate.controls.first.valid && (validate.controls.first.dirty || submitAttempt)">
42+
<ion-item no-lines *ngIf="!validate.controls.first.valid && (validate.controls.first.dirty || submitAttempt)">
4443
<p class="invalid-text">Enter a valid name</p>
4544
</ion-item><br>
4645
</ion-col>
4746
</ion-row>
4847

4948
<ion-row justify-content-center>
50-
<ion-col col-10 col-xl-7>
49+
<ion-col col-7 col-xl-6>
5150
<ion-item no-lines>
5251
<ion-input
53-
[(ngModel)]="registerUser.lastName"
5452
class="inputs"
5553
type="text"
56-
#last
5754
placeholder="Last Name"
5855
formControlName='last'
5956
[class.invalid]="!validate.controls.last.valid && (validate.controls.last.dirty || submitAttempt)"></ion-input>
6057
</ion-item>
61-
<ion-item class="inputs" no-lines *ngIf="!validate.controls.last.valid && (validate.controls.last.dirty || submitAttempt)">
58+
<ion-item no-lines *ngIf="!validate.controls.last.valid && (validate.controls.last.dirty || submitAttempt)">
6259
<p class="invalid-text">Enter a valid name</p>
6360
</ion-item><br>
6461
</ion-col>
6562
</ion-row>
6663

6764
<ion-row justify-content-center>
68-
<ion-col col-10 col-xl-7>
65+
<ion-col col-7 col-xl-6>
6966
<ion-item no-lines>
7067
<ion-input
71-
[(ngModel)]="registerUser.email"
7268
class="inputs"
7369
type="email"
74-
#email
7570
placeholder="Email Address"
7671
formControlName='email'
7772
[class.invalid]="!validate.controls.email.valid && (validate.controls.email.dirty || submitAttempt)"></ion-input>
7873
</ion-item>
79-
<ion-item class="inputs" no-lines *ngIf="!validate.controls.email.valid && (validate.controls.email.dirty || submitAttempt)">
74+
<ion-item no-lines *ngIf="!validate.controls.email.valid && (validate.controls.email.dirty || submitAttempt)">
8075
<p class="invalid-text">Enter a valid email</p>
8176
</ion-item><br>
8277
</ion-col>
8378
</ion-row>
8479

8580
<div formGroupName="pass">
8681
<ion-row justify-content-center>
87-
<ion-col col-10 col-xl-7>
82+
<ion-col col-7 col-xl-6>
8883
<ion-item no-lines>
8984
<ion-input
9085
class="inputs"
9186
type="password"
92-
#pass
9387
placeholder="Password"
9488
formControlName='password'
9589
[class.invalid]="!validate.controls.pass.controls.password.valid && (validate.controls.pass.controls.password.dirty || submitAttempt)">
9690
</ion-input>
9791
</ion-item>
98-
<ion-item class="inputs" no-lines *ngIf="!validate.controls.pass.controls.password.valid && (validate.controls.pass.controls.password.dirty || submitAttempt)">
99-
<p class="invalid-text">Enter a password between 6-30 characters using only letters and numbers</p>
92+
<ion-item no-lines *ngIf="!validate.controls.pass.controls.password.valid && (validate.controls.pass.controls.password.dirty || submitAttempt)">
93+
<p class="invalid-text">Enter a password between 6-30 characters using letters and numbers</p>
10094
</ion-item><br>
10195
</ion-col>
10296
</ion-row>
10397

10498
<ion-row justify-content-center>
105-
<ion-col col-10 col-xl-7>
99+
<ion-col col-7 col-xl-6>
106100
<ion-item no-lines>
107101
<ion-input
108102
class="inputs"
109103
type="password"
110-
#repass
111104
placeholder="Password Confirmation"
112105
formControlName='passwordCheck'
113106
[class.invalid]="!validate.controls.pass.controls.passwordCheck.valid && (validate.controls.pass.controls.passwordCheck.dirty || submitAttempt)">
114107
</ion-input>
115108
</ion-item>
116-
<ion-item class="inputs" no-lines *ngIf="!validate.controls.pass.valid && (validate.controls.pass.controls.passwordCheck.dirty || submitAttempt)">
109+
</ion-col>
110+
</ion-row>
111+
112+
<ion-row justify-content-center>
113+
<ion-col col-7 col-xl-6>
114+
<ion-item no-lines *ngIf="!validate.controls.pass.valid && (validate.controls.pass.controls.passwordCheck.dirty || submitAttempt)">
117115
<p class="invalid-text">Passwords do not match</p>
118116
</ion-item><br>
119117
</ion-col>
@@ -122,10 +120,11 @@ <h2 id="lifechange" text-center>It's a life change.</h2>
122120

123121

124122
<ion-row justify-content-center>
125-
<ion-col col-8 col-xl-5>
123+
<ion-col col-5 col-xl-4>
126124
<button id="regButton" ion-button block [disabled]="!validate.valid" type="submit">REGISTER</button>
127125
</ion-col>
128126
</ion-row>
127+
129128
</form>
130129

131130
<ion-row justify-content-center>
@@ -135,7 +134,7 @@ <h3 text-center>Login if you already have an account.</h3>
135134
</ion-row>
136135

137136
<ion-row justify-content-center>
138-
<ion-col class="button-col" col-8 col-xl-5>
137+
<ion-col class="button-col" col-5 col-xl-4>
139138
<button id="loginButton" ion-button block (click)="goLogin()">LOGIN</button>
140139
</ion-col>
141140
</ion-row>

‎src/pages/register/register.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,15 @@ page-register {
66
}
77

88
#regButton {
9-
font-size: 25px;
109
background-color: rgb(130,180,64);
10+
font-size: 25px;
11+
height: 2.1em;
1112
}
1213

1314
#loginButton {
1415
background-color: rgb(42,61,79);
15-
font-size: 25px
16+
font-size: 25px;
17+
height: 2.1em;
1618
}
1719

1820
#text {

‎src/pages/register/register.ts‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,23 @@
11
import { Component } from '@angular/core';
22
import { NavController, NavParams } from 'ionic-angular';
3-
import { Validators, FormBuilder, FormGroup, FormControl} from '@angular/forms';
3+
import { Validators, FormBuilder, FormGroup} from '@angular/forms';
44
import { PasswordValidator } from '../../validators/password.validator';
55
import { UserProvider } from '../../providers/user/user';
66
import { WizardPage } from '../wizard/wizard'
77
import { LoginPage } from '../login/login';
88

9-
10-
119
@Component({
1210
selector: 'page-register',
1311
templateUrl: 'register.html',
1412
})
1513
export class RegisterPage {
1614

17-
registerUser: any = {
18-
firstName: '',
19-
lastName: '',
20-
email: '',
21-
password: ''
22-
}
15+
registerUser: any = {}
2316

2417
private validate: FormGroup
2518
submitAttempt: boolean = false;
2619

27-
constructor(public navCtrl: NavController, public navParams: NavParams, private formBuilder: FormBuilder, public _user: UserProvider) {
20+
constructor(public navCtrl: NavController, public navParams: NavParams, private formBuilder: FormBuilder, public _userService: UserProvider) {
2821

2922
this.validate = this.formBuilder.group({
3023
first: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
@@ -43,15 +36,21 @@ export class RegisterPage {
4336
}
4437

4538
submitReg() {
39+
this.registerUser = {
40+
firstName: this.validate.value.first,
41+
lastName: this.validate.value.last,
42+
email: this.validate.value.email,
43+
password: this.validate.value.pass.password
44+
}
45+
console.log('validate object', this.validate.value)
4646
this.submitAttempt = true
47-
console.log('submitReg() runs', this.validate)
48-
this._user.sendReg(this.registerUser)
47+
console.log('submitReg() runs', this.registerUser)
48+
this._userService.sendReg(this.registerUser)
4949
.subscribe( (data: any) => {
5050
console.log('data from submitReg()', data)
5151
},
5252
err => {
5353
console.error('err from register:', err)
54-
//this.presentToast()
5554
},
5655
() => {
5756
this.navCtrl.setRoot(WizardPage, {registered: this.registerUser})

‎src/providers/user/user.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ export class UserProvider {
1919
}
2020

2121
sendReg(user) {
22-
console.log('sendReg() runs')
23-
return this.http.post(this.requestUrl + 'appUsers', user)
22+
console.log('sendReg() runs', user)
23+
return this.http.post(this.requestUrl + '/appUsers', user)
2424
}
2525

2626

2727
login(creds) {
28-
return this.http.post(this.requestUrl + 'appUsers/login', creds);
28+
return this.http.post(this.requestUrl + '/appUsers/login', creds);
2929
}
3030
}

0 commit comments

Comments
 (0)