Skip to content

Commit c07be28

Browse files
iyilm4ziyilm4z
committed
register component done
1 parent 7bccb28 commit c07be28

File tree

2 files changed

+146
-83
lines changed

2 files changed

+146
-83
lines changed

‎angular/src/account/register/register.component.html

Lines changed: 144 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,147 @@
1-
<div class="card" [@routerTransition]>
2-
<div class="body">
3-
<form novalidate
4-
#registerForm="ngForm"
5-
(ngSubmit)="save()">
6-
<h4 class="text-center">{{ "Register" | localize }}</h4>
7-
<div class="form-group form-float">
8-
<mat-form-field>
9-
<input matInput
10-
name="Name"
11-
[(ngModel)]="model.name"
12-
[placeholder]="'Name' | localize"
13-
required
14-
maxlength="32" />
15-
</mat-form-field>
16-
<mat-form-field>
17-
<input matInput
18-
name="Surname"
19-
[(ngModel)]="model.surname"
20-
[placeholder]="'Surname' | localize"
21-
required
22-
maxlength="32"/>
23-
</mat-form-field>
24-
<mat-form-field>
25-
<input matInput
26-
type="email"
27-
name="EmailAddress"
28-
[(ngModel)]="model.emailAddress"
29-
[placeholder]="'EmailAddress' | localize"
30-
required
31-
maxlength="255"
32-
pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$"/>
33-
</mat-form-field>
34-
<mat-form-field>
35-
<input matInput
36-
name="UserName"
37-
[(ngModel)]="model.userName"
38-
[placeholder]="'UserName' | localize"
39-
required
40-
maxlength="32"/>
41-
</mat-form-field>
42-
<mat-form-field>
43-
<input matInput
44-
name="Password"
45-
[(ngModel)]="model.password"
46-
[placeholder]="'Password' | localize"
47-
type="password"
48-
required
49-
maxlength="32"/>
50-
</mat-form-field>
1+
<div [@routerTransition]>
2+
<h4 class="text-center mb-3">{{ "Register" | localize }}</h4>
3+
<form autocomplete="off" #registerForm="ngForm" (ngSubmit)="save()">
4+
<div class="form-group">
5+
<div class="input-group">
6+
<input
7+
type="text"
8+
class="form-control"
9+
name="name"
10+
placeholder="{{ 'Name' | localize }}"
11+
required
12+
maxlength="64"
13+
[(ngModel)]="model.name"
14+
#nameModel="ngModel"
15+
#nameEl
16+
/>
17+
<div class="input-group-append">
18+
<div class="input-group-text">
19+
<span class="fas fa-arrow-left"></span>
20+
</div>
21+
</div>
5122
</div>
52-
<div class="form-actions text-center">
53-
<button mat-button
54-
type="button"
55-
[disabled]="saving"
56-
[routerLink]="['../login']">
57-
{{ "Back" | localize }}
58-
</button>
59-
<span>&nbsp;</span>
60-
<button mat-flat-button
61-
type="submit"
62-
flex="15"
63-
color="primary"
64-
[disabled]="!registerForm.form.valid || saving">
65-
{{ "Submit" | localize }}
66-
</button>
23+
<abp-validation-summary
24+
[control]="nameModel"
25+
[controlEl]="nameEl"
26+
></abp-validation-summary>
27+
</div>
28+
<div class="form-group">
29+
<div class="input-group">
30+
<input
31+
type="text"
32+
class="form-control"
33+
name="surname"
34+
placeholder="{{ 'Surname' | localize }}"
35+
required
36+
maxlength="64"
37+
[(ngModel)]="model.surname"
38+
#surnameModel="ngModel"
39+
#surnameEl
40+
/>
41+
<div class="input-group-append">
42+
<div class="input-group-text">
43+
<span class="fas fa-arrow-left"></span>
44+
</div>
45+
</div>
6746
</div>
68-
</form>
69-
</div>
47+
<abp-validation-summary
48+
[control]="surnameModel"
49+
[controlEl]="surnameEl"
50+
></abp-validation-summary>
51+
</div>
52+
<div class="form-group">
53+
<div class="input-group">
54+
<input
55+
type="email"
56+
class="form-control"
57+
name="emailAddress"
58+
placeholder="{{ 'EmailAddress' | localize }}"
59+
required
60+
maxlength="256"
61+
pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$"
62+
[(ngModel)]="model.emailAddress"
63+
#emailAddressModel="ngModel"
64+
#emailAddressEl
65+
/>
66+
<div class="input-group-append">
67+
<div class="input-group-text">
68+
<span class="fas fa-envelope"></span>
69+
</div>
70+
</div>
71+
</div>
72+
<abp-validation-summary
73+
[control]="emailAddressModel"
74+
[controlEl]="emailAddressEl"
75+
></abp-validation-summary>
76+
</div>
77+
<div class="form-group">
78+
<div class="input-group">
79+
<input
80+
type="email"
81+
class="form-control"
82+
name="userName"
83+
placeholder=" {{ 'UserName' | localize }}"
84+
required
85+
maxlength="32"
86+
[(ngModel)]="model.userName"
87+
#userNameModel="ngModel"
88+
#userNameEl
89+
/>
90+
<div class="input-group-append">
91+
<div class="input-group-text">
92+
<span class="fas fa-user"></span>
93+
</div>
94+
</div>
95+
</div>
96+
<abp-validation-summary
97+
[control]="userNameModel"
98+
[controlEl]="userNameEl"
99+
></abp-validation-summary>
100+
</div>
101+
<div class="form-group">
102+
<div class="input-group">
103+
<input
104+
type="password"
105+
class="form-control"
106+
name="password"
107+
placeholder="{{ 'Password' | localize }}"
108+
[(ngModel)]="model.password"
109+
required
110+
maxlength="32"
111+
#passwordModel="ngModel"
112+
#passwordEl
113+
/>
114+
<div class="input-group-append">
115+
<div class="input-group-text">
116+
<span class="fas fa-lock"></span>
117+
</div>
118+
</div>
119+
</div>
120+
<abp-validation-summary
121+
[control]="passwordModel"
122+
[controlEl]="passwordEl"
123+
></abp-validation-summary>
124+
</div>
125+
<div class="row">
126+
<div class="col-8">
127+
<button
128+
type="button"
129+
class="btn btn-default"
130+
[disabled]="saving"
131+
[routerLink]="['../login']"
132+
>
133+
<i class="fa fa-arrow-circle-left"></i> {{ "Back" | localize }}
134+
</button>
135+
</div>
136+
<div class="col-4">
137+
<button
138+
type="submit"
139+
class="btn btn-primary btn-block"
140+
[disabled]="!registerForm.form.valid || saving"
141+
>
142+
{{ "Register" | localize }}
143+
</button>
144+
</div>
145+
</div>
146+
</form>
70147
</div>

‎angular/src/account/register/register.component.ts

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,17 @@ import { Component, Injector } from '@angular/core';
22
import { Router } from '@angular/router';
33
import { finalize } from 'rxjs/operators';
44
import { AppComponentBase } from '@shared/app-component-base';
5-
import { accountModuleAnimation } from '@shared/animations/routerTransition';
65
import {
76
AccountServiceProxy,
87
RegisterInput,
98
RegisterOutput
109
} from '@shared/service-proxies/service-proxies';
10+
import { accountModuleAnimation } from '@shared/animations/routerTransition';
1111
import { LoginService } from '../login/login.service';
1212

1313
@Component({
1414
templateUrl: './register.component.html',
15-
animations: [accountModuleAnimation()],
16-
styles: [
17-
`
18-
mat-form-field {
19-
width: 100%;
20-
}
21-
mat-checkbox {
22-
padding-bottom: 5px;
23-
}
24-
`
25-
]
15+
animations: [accountModuleAnimation()]
2616
})
2717
export class RegisterComponent extends AppComponentBase {
2818
model: RegisterInput = new RegisterInput();
@@ -37,10 +27,6 @@ export class RegisterComponent extends AppComponentBase {
3727
super(injector);
3828
}
3929

40-
back(): void {
41-
this._router.navigate(['/login']);
42-
}
43-
4430
save(): void {
4531
this.saving = true;
4632
this._accountService

0 commit comments

Comments
 (0)