Skip to content

Commit cfd0ecc

Browse files
khoadnguyenkhoadnguyen
authored
Merge pull request #124 from SoftStackFactory/105-register-page-render-issues
105 register page render issues
2 parents 5d09d55 + 9e9ab6e commit cfd0ecc

3 files changed

Lines changed: 121 additions & 90 deletions

File tree

‎src/pages/register/register.html‎

Lines changed: 83 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -16,56 +16,22 @@ <h1 id="title">INTRANSITION</h1>
1616
<div class="card-title">INTRANSITION</div>
1717
</div>
1818
-->
19+
<ion-grid>
1920

20-
<form class="form" [formGroup]='validate' (ngSubmit)='submitReg()'>
21-
<ion-item class="input" no-lines>
22-
<ion-input
23-
[(ngModel)]="registerUser.firstName"
24-
class="input"
25-
type="text"
26-
#first
27-
placeholder="First Name"
28-
formControlName='first'
29-
[class.invalid]="!validate.controls.first.valid && (validate.controls.first.dirty || submitAttempt)">
30-
</ion-input>
31-
</ion-item>
32-
<ion-item class="input" no-lines *ngIf="!validate.controls.first.valid && (validate.controls.first.dirty || submitAttempt)">
33-
<p class="invalid-text">Enter a valid name</p>
34-
</ion-item><br>
21+
<ion-row justify-content-center>
22+
<ion-col col-10>
23+
<h2 text-center>Transitioning from the military to civilian environment is more than just a job change.</h2>
24+
<br>
25+
<h2 id="lifechange" text-center>It's a life change.</h2>
26+
</ion-col>
27+
</ion-row>
3528

36-
<ion-item class="input" no-lines>
37-
<ion-input
38-
[(ngModel)]="registerUser.lastName"
39-
class="input"
40-
type="text"
41-
#last
42-
placeholder="Last Name"
43-
formControlName='last'
44-
[class.invalid]="!validate.controls.last.valid && (validate.controls.last.dirty || submitAttempt)"></ion-input>
45-
</ion-item>
46-
<ion-item class="input" no-lines *ngIf="!validate.controls.last.valid && (validate.controls.last.dirty || submitAttempt)">
47-
<p class="invalid-text">Enter a valid name</p>
48-
</ion-item><br>
49-
50-
51-
<ion-item class="input" no-lines>
52-
<ion-input
53-
[(ngModel)]="registerUser.email"
54-
class="input"
55-
type="email"
56-
#email
57-
placeholder="Email Address"
58-
formControlName='email'
59-
[class.invalid]="!validate.controls.email.valid && (validate.controls.email.dirty || submitAttempt)"></ion-input>
60-
</ion-item>
61-
<ion-item class="input" no-lines *ngIf="!validate.controls.email.valid && (validate.controls.email.dirty || submitAttempt)">
62-
<p class="invalid-text">Enter a valid email</p>
63-
</ion-item><br>
64-
29+
<form class="form" [formGroup]='validate' (ngSubmit)='submitReg()'>
6530
<ion-row justify-content-center>
66-
<ion-col col-10>
31+
<ion-col col-10 col-xl-7>
6732
<ion-item no-lines>
6833
<ion-input
34+
[(ngModel)]="registerUser.firstName"
6935
class="inputs"
7036
type="text"
7137
#first
@@ -74,69 +40,105 @@ <h1 id="title">INTRANSITION</h1>
7440
[class.invalid]="!validate.controls.first.valid && (validate.controls.first.dirty || submitAttempt)">
7541
</ion-input>
7642
</ion-item>
77-
<ion-item no-lines *ngIf="!validate.controls.first.valid && (validate.controls.first.dirty || submitAttempt)">
43+
<ion-item class="inputs" no-lines *ngIf="!validate.controls.first.valid && (validate.controls.first.dirty || submitAttempt)">
7844
<p class="invalid-text">Enter a valid name</p>
7945
</ion-item><br>
8046
</ion-col>
8147
</ion-row>
8248

8349
<ion-row justify-content-center>
84-
<ion-col col-10>
50+
<ion-col col-10 col-xl-7>
8551
<ion-item no-lines>
8652
<ion-input
53+
[(ngModel)]="registerUser.lastName"
54+
class="inputs"
8755
type="text"
8856
#last
8957
placeholder="Last Name"
9058
formControlName='last'
91-
[class.invalid]="!validate.controls.last.valid && (validate.controls.last.dirty || submitAttempt)">
92-
</ion-input>
59+
[class.invalid]="!validate.controls.last.valid && (validate.controls.last.dirty || submitAttempt)"></ion-input>
9360
</ion-item>
94-
<ion-item no-lines *ngIf="!validate.controls.last.valid && (validate.controls.last.dirty || submitAttempt)">
61+
<ion-item class="inputs" no-lines *ngIf="!validate.controls.last.valid && (validate.controls.last.dirty || submitAttempt)">
9562
<p class="invalid-text">Enter a valid name</p>
9663
</ion-item><br>
9764
</ion-col>
9865
</ion-row>
99-
10066

10167
<ion-row justify-content-center>
102-
<ion-col col-10>
68+
<ion-col col-10 col-xl-7>
10369
<ion-item no-lines>
104-
<ion-input
105-
type="password"
106-
#pass
107-
placeholder="Password"
108-
formControlName='password'
109-
[class.invalid]="!validate.controls.password.valid && (validate.controls.password.dirty || submitAttempt)">
110-
</ion-input>
70+
<ion-input
71+
[(ngModel)]="registerUser.email"
72+
class="inputs"
73+
type="email"
74+
#email
75+
placeholder="Email Address"
76+
formControlName='email'
77+
[class.invalid]="!validate.controls.email.valid && (validate.controls.email.dirty || submitAttempt)"></ion-input>
11178
</ion-item>
112-
<ion-item no-lines *ngIf="!validate.controls.password.valid && (validate.controls.password.dirty || submitAttempt)">
113-
<p class="invalid-text">Enter a password between 6-30 characters using only letters and numbers</p>
79+
<ion-item class="inputs" no-lines *ngIf="!validate.controls.email.valid && (validate.controls.email.dirty || submitAttempt)">
80+
<p class="invalid-text">Enter a valid email</p>
11481
</ion-item><br>
11582
</ion-col>
11683
</ion-row>
117-
84+
85+
<div formGroupName="pass">
86+
<ion-row justify-content-center>
87+
<ion-col col-10 col-xl-7>
88+
<ion-item no-lines>
89+
<ion-input
90+
class="inputs"
91+
type="password"
92+
#pass
93+
placeholder="Password"
94+
formControlName='password'
95+
[class.invalid]="!validate.controls.pass.controls.password.valid && (validate.controls.pass.controls.password.dirty || submitAttempt)">
96+
</ion-input>
97+
</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>
100+
</ion-item><br>
101+
</ion-col>
102+
</ion-row>
103+
104+
<ion-row justify-content-center>
105+
<ion-col col-10 col-xl-7>
106+
<ion-item no-lines>
107+
<ion-input
108+
class="inputs"
109+
type="password"
110+
#repass
111+
placeholder="Password Confirmation"
112+
formControlName='passwordCheck'
113+
[class.invalid]="!validate.controls.pass.controls.passwordCheck.valid && (validate.controls.pass.controls.passwordCheck.dirty || submitAttempt)">
114+
</ion-input>
115+
</ion-item>
116+
<ion-item class="inputs" no-lines *ngIf="!validate.controls.pass.valid && (validate.controls.pass.controls.passwordCheck.dirty || submitAttempt)">
117+
<p class="invalid-text">Passwords do not match</p>
118+
</ion-item><br>
119+
</ion-col>
120+
</ion-row>
121+
</div>
122+
123+
118124
<ion-row justify-content-center>
119-
<ion-col col-10>
120-
<ion-item no-lines>
121-
<ion-input
122-
type="password"
123-
#repass
124-
placeholder="Password Confirmation"
125-
formControlName='passwordCheck'
126-
[class.invalid]="!validate.controls.passwordCheck.valid && (validate.controls.passwordCheck.dirty || submitAttempt)">
127-
</ion-input>
128-
</ion-item>
129-
<ion-item no-lines *ngIf="!validate.controls.passwordCheck.valid && (validate.controls.passwordCheck.dirty || submitAttempt)">
130-
<p class="invalid-text">Passwords do not match</p>
131-
</ion-item>
125+
<ion-col col-8 col-xl-5>
126+
<button id="regButton" ion-button block [disabled]="!validate.valid" type="submit">REGISTER</button>
132127
</ion-col>
133128
</ion-row>
134-
<button id="register-button"color="secondary" ion-button [disabled]="!validate.valid" type="submit">REGISTER</button>
135129
</form>
136-
137-
<div class='login2'>
138-
<p id="sign-in">If you already have an account, sign in.</p>
139-
<button id="login-button"color="primary" ion-button (click)="goLogin()">LOGIN</button>
140-
</div>
130+
131+
<ion-row justify-content-center>
132+
<ion-col col-8>
133+
<h3 text-center>Login if you already have an account.</h3>
134+
</ion-col>
135+
</ion-row>
136+
137+
<ion-row justify-content-center>
138+
<ion-col class="button-col" col-8 col-xl-5>
139+
<button id="loginButton" ion-button block (click)="goLogin()">LOGIN</button>
140+
</ion-col>
141+
</ion-row>
142+
</ion-grid>
141143

142144
</ion-content>

‎src/pages/register/register.scss‎

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
page-register {
2+
3+
h2 {
4+
margin-top: 1.8rem;
5+
font-size: 2.4rem;
6+
}
7+
28
#regButton {
39
font-size: 25px;
410
background-color: rgb(130,180,64);
@@ -9,6 +15,10 @@ page-register {
915
font-size: 25px
1016
}
1117

18+
#text {
19+
font-size: 25px
20+
}
21+
1222
#header {
1323
display: flex;
1424
padding: 65px;
@@ -32,6 +42,10 @@ page-register {
3242
}
3343

3444
.inputs {
45+
position: relative;
46+
border: 1px solid #e5e6e6;
47+
background-color: #f8f8f8;
48+
padding-left: 10px;
3549
font-size: 25px;
3650
}
3751

@@ -76,12 +90,12 @@ page-register {
7690
max-width: 2800px;
7791
font-size: 3vw;
7892
}
79-
@media screen and (min-width:2300px) {
93+
/* @media screen and (min-width:2300px) {
8094
.message {
8195
font-size: 60px;
8296
margin: 5vh auto 5vh auto ;
8397
}
84-
}
98+
}
8599
86100
.input {
87101
margin: .4vw auto;
@@ -99,7 +113,7 @@ page-register {
99113
//margin-top:10px;
100114
outline: none;
101115
border:1px solid #cccccc
102-
}
116+
}
103117
::-webkit-input-placeholder {
104118
font-size: 3vw;
105119
color: rgb(136, 136, 136);
@@ -112,7 +126,7 @@ page-register {
112126
position: relative;
113127
top: -13px;
114128
}
115-
}
129+
} */
116130

117131
#register-button{
118132
text-align: center;
@@ -176,6 +190,21 @@ page-register {
176190
#header {
177191
padding: 20px;
178192
}
193+
194+
page-login .inputs {
195+
margin: auto;
196+
width: 70%;
197+
font-size: 25px;
198+
}
199+
200+
#loginButton {
201+
font-size: 25px;
202+
height: 2.1em;
203+
}
204+
#regButton{
205+
font-size: 25px;
206+
height: 2.1em;
207+
}
179208
}
180209

181210
.invalid {

‎src/pages/register/register.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,11 @@ export class RegisterPage {
2929
this.validate = this.formBuilder.group({
3030
first: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
3131
last: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
32-
email: ['', Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])]
33-
// pass: this.formBuilder.group({
34-
// password: ['', Validators.compose([Validators.minLength(6), Validators.maxLength(30), Validators.pattern('[a-zA-Z0-9 ]*'), Validators.required])],
35-
// passwordCheck: ['', Validators.required]
36-
// }, {validator: PasswordValidator})
32+
email: ['', Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])],
33+
pass: this.formBuilder.group({
34+
password: ['', Validators.compose([Validators.minLength(6), Validators.maxLength(30), Validators.pattern('[a-zA-Z0-9 ]*'), Validators.required])],
35+
passwordCheck: ['', Validators.required]
36+
}, {validator: PasswordValidator})
3737
})
3838

3939
}

0 commit comments

Comments
 (0)