Skip to content

Commit 6d74036

Browse files
jthk1106jthk1106
committed
corrected render issues and working on fixing styling inconsistencies, mostly done
1 parent b7c5996 commit 6d74036

2 files changed

Lines changed: 91 additions & 50 deletions

File tree

‎src/pages/register/register.html‎

Lines changed: 81 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -17,64 +17,85 @@ <h1 id="title">INTRANSITION</h1>
1717
</div>
1818
-->
1919
<ion-grid>
20+
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>
28+
2029
<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>
30+
<ion-row justify-content-center>
31+
<ion-col col-10>
32+
<ion-item no-lines>
33+
<ion-input
34+
[(ngModel)]="registerUser.firstName"
35+
class="inputs"
36+
type="text"
37+
#first
38+
placeholder="First Name"
39+
formControlName='first'
40+
[class.invalid]="!validate.controls.first.valid && (validate.controls.first.dirty || submitAttempt)">
41+
</ion-input>
42+
</ion-item>
43+
<ion-item class="inputs" no-lines *ngIf="!validate.controls.first.valid && (validate.controls.first.dirty || submitAttempt)">
44+
<p class="invalid-text">Enter a valid name</p>
45+
</ion-item><br>
46+
</ion-col>
47+
</ion-row>
3548

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+
<ion-row justify-content-center>
50+
<ion-col col-10>
51+
<ion-item no-lines>
52+
<ion-input
53+
[(ngModel)]="registerUser.lastName"
54+
class="inputs"
55+
type="text"
56+
#last
57+
placeholder="Last Name"
58+
formControlName='last'
59+
[class.invalid]="!validate.controls.last.valid && (validate.controls.last.dirty || submitAttempt)"></ion-input>
60+
</ion-item>
61+
<ion-item class="inputs" no-lines *ngIf="!validate.controls.last.valid && (validate.controls.last.dirty || submitAttempt)">
62+
<p class="invalid-text">Enter a valid name</p>
63+
</ion-item><br>
64+
</ion-col>
65+
</ion-row>
4966

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>
67+
<ion-row justify-content-center>
68+
<ion-col col-10>
69+
<ion-item no-lines>
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>
78+
</ion-item>
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>
81+
</ion-item><br>
82+
</ion-col>
83+
</ion-row>
6484

6585
<div formGroupName="pass">
6686
<ion-row justify-content-center>
6787
<ion-col col-10>
6888
<ion-item no-lines>
6989
<ion-input
90+
class="inputs"
7091
type="password"
7192
#pass
7293
placeholder="Password"
7394
formControlName='password'
7495
[class.invalid]="!validate.controls.pass.controls.password.valid && (validate.controls.pass.controls.password.dirty || submitAttempt)">
7596
</ion-input>
7697
</ion-item>
77-
<ion-item no-lines *ngIf="!validate.controls.pass.controls.password.valid && (validate.controls.pass.controls.password.dirty || submitAttempt)">
98+
<ion-item class="inputs" no-lines *ngIf="!validate.controls.pass.controls.password.valid && (validate.controls.pass.controls.password.dirty || submitAttempt)">
7899
<p class="invalid-text">Enter a password between 6-30 characters using only letters and numbers</p>
79100
</ion-item><br>
80101
</ion-col>
@@ -84,27 +105,37 @@ <h1 id="title">INTRANSITION</h1>
84105
<ion-col col-10>
85106
<ion-item no-lines>
86107
<ion-input
108+
class="inputs"
87109
type="password"
88110
#repass
89111
placeholder="Password Confirmation"
90112
formControlName='passwordCheck'
91113
[class.invalid]="!validate.controls.pass.controls.passwordCheck.valid && (validate.controls.pass.controls.passwordCheck.dirty || submitAttempt)">
92114
</ion-input>
93115
</ion-item>
94-
<ion-item no-lines *ngIf="!validate.controls.pass.valid && (validate.controls.pass.controls.passwordCheck.dirty || submitAttempt)">
116+
<ion-item class="inputs" no-lines *ngIf="!validate.controls.pass.valid && (validate.controls.pass.controls.passwordCheck.dirty || submitAttempt)">
95117
<p class="invalid-text">Passwords do not match</p>
96-
</ion-item>
118+
</ion-item><br>
97119
</ion-col>
98120
</ion-row>
99121
</div>
100122

101-
<button id="register-button"color="secondary" ion-button [disabled]="!validate.valid" type="submit">REGISTER</button>
123+
124+
<ion-row justify-content-center>
125+
<ion-col col-8>
126+
<button id="regButton" ion-button block [disabled]="!validate.valid" type="submit">REGISTER</button>
127+
</ion-col>
128+
</ion-row>
102129
</form>
103-
104-
<div class='login2'>
105-
<p id="sign-in">If you already have an account, sign in.</p>
106-
<button id="login-button"color="primary" ion-button (click)="goLogin()">LOGIN</button>
107-
</div>
130+
131+
<ion-row justify-content-center>
132+
<ion-col col-8>
133+
<div>
134+
<h3 text-center>Login if you already have an account.</h3>
135+
<button id="loginButton" ion-button block (click)="goLogin()">LOGIN</button>
136+
</div>
137+
</ion-col>
138+
</ion-row>
108139
</ion-grid>
109140

110141
</ion-content>

‎src/pages/register/register.scss‎

Lines changed: 10 additions & 0 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;

0 commit comments

Comments
 (0)