Skip to content

Commit a575a44

Browse files
iyilm4ziyilm4z
committed
Migrate account register to @angular/material components #4 
1 parent cbd8626 commit a575a44

File tree

2 files changed

+128
-93
lines changed

2 files changed

+128
-93
lines changed

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

Lines changed: 68 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,70 @@
11
<div class="card" [@routerTransition]>
2-
<div #cardBody class="body">
3-
<form #registerForm="ngForm" method="post" novalidate (ngSubmit)="save()">
4-
<h4 class="text-center">{{ "Register" | localize }}</h4>
5-
6-
<div class="form-group form-float">
7-
<div class="form-line">
8-
<input materialInput class="form-control" autoFocus type="text" [(ngModel)]="model.name" name="Name" required maxlength="32" />
9-
<label class="form-label">{{ 'Name' | localize }}</label>
10-
</div>
11-
</div>
12-
13-
<div class="form-group form-float">
14-
<div class="form-line">
15-
<input materialInput class="form-control" type="text" [(ngModel)]="model.surname" name="Surname" required maxlength="32" />
16-
<label class="form-label">{{ 'Surname' | localize }}</label>
17-
</div>
18-
</div>
19-
20-
<div class="form-group form-float">
21-
<div class="form-line">
22-
<input materialInput class="form-control" type="email" [(ngModel)]="model.emailAddress" name="EmailAddress" required maxlength="255" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$" />
23-
<label class="form-label">{{ 'EmailAddress' | localize }}</label>
24-
</div>
25-
</div>
26-
27-
<div class="form-group form-float">
28-
<div class="form-line">
29-
<input materialInput class="form-control" type="text" autocomplete="off" [(ngModel)]="model.userName" name="UserName" required maxlength="32" />
30-
<label class="form-label">{{ 'UserName' | localize }}</label>
31-
</div>
32-
</div>
33-
34-
<div class="form-group form-float">
35-
<div class="form-line">
36-
<input materialInput class="form-control" type="password" [(ngModel)]="model.password" name="Password" required maxlength="32" />
37-
<label class="form-label">{{ 'Password' | localize }}</label>
38-
</div>
39-
</div>
40-
41-
<div class="form-actions">
42-
<button [disabled]="saving" [routerLink]="['../login']" type="button" class="btn btn-default">{{ "Back" | localize }}</button>
43-
<button type="submit" class="btn btn-success" [disabled]="!registerForm.form.valid">{{ "Submit" | localize }}</button>
44-
</div>
45-
46-
</form>
47-
</div>
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>
51+
</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>
67+
</div>
68+
</form>
69+
</div>
4870
</div>

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

Lines changed: 60 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,69 @@
1-
import { Component, Injector, ElementRef, AfterViewInit, ViewChild } from '@angular/core';
2-
import { Router } from '@angular/router';
3-
import { AccountServiceProxy, RegisterInput, RegisterOutput } from '@shared/service-proxies/service-proxies'
4-
import { AppComponentBase } from '@shared/app-component-base';
5-
import { LoginService } from '../login/login.service';
6-
import { accountModuleAnimation } from '@shared/animations/routerTransition';
7-
import { finalize } from 'rxjs/operators';
1+
import { Component, Injector } from "@angular/core";
2+
import { Router } from "@angular/router";
3+
import { finalize } from "rxjs/operators";
4+
import { AppComponentBase } from "@shared/app-component-base";
5+
import { accountModuleAnimation } from "@shared/animations/routerTransition";
6+
import {
7+
AccountServiceProxy,
8+
RegisterInput,
9+
RegisterOutput
10+
} from "@shared/service-proxies/service-proxies";
11+
import { LoginService } from "../login/login.service";
812

913
@Component({
10-
templateUrl: './register.component.html',
11-
animations: [accountModuleAnimation()]
14+
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+
]
1226
})
13-
export class RegisterComponent extends AppComponentBase implements AfterViewInit {
27+
export class RegisterComponent extends AppComponentBase {
28+
model: RegisterInput = new RegisterInput();
29+
saving: boolean = false;
1430

15-
@ViewChild('cardBody') cardBody: ElementRef;
31+
constructor(
32+
injector: Injector,
33+
private _accountService: AccountServiceProxy,
34+
private _router: Router,
35+
private _loginService: LoginService
36+
) {
37+
super(injector);
38+
}
1639

17-
model: RegisterInput = new RegisterInput();
40+
back(): void {
41+
this._router.navigate(["/login"]);
42+
}
1843

19-
saving: boolean = false;
44+
save(): void {
45+
this.saving = true;
46+
this._accountService
47+
.register(this.model)
48+
.pipe(
49+
finalize(() => {
50+
this.saving = false;
51+
})
52+
)
53+
.subscribe((result: RegisterOutput) => {
54+
if (!result.canLogin) {
55+
this.notify.success(this.l("SuccessfullyRegistered"));
56+
this._router.navigate(["/login"]);
57+
return;
58+
}
2059

21-
constructor(
22-
injector: Injector,
23-
private _accountService: AccountServiceProxy,
24-
private _router: Router,
25-
private readonly _loginService: LoginService
26-
) {
27-
super(injector);
28-
}
29-
30-
ngAfterViewInit(): void {
31-
$(this.cardBody.nativeElement).find('input:first').focus();
32-
}
33-
34-
back(): void {
35-
this._router.navigate(['/login']);
36-
}
37-
38-
save(): void {
60+
//Autheticate
3961
this.saving = true;
40-
this._accountService.register(this.model)
41-
.pipe(finalize(() => { this.saving = false; }))
42-
.subscribe((result:RegisterOutput) => {
43-
if (!result.canLogin) {
44-
this.notify.success(this.l('SuccessfullyRegistered'));
45-
this._router.navigate(['/login']);
46-
return;
47-
}
48-
49-
//Autheticate
50-
this.saving = true;
51-
this._loginService.authenticateModel.userNameOrEmailAddress = this.model.userName;
52-
this._loginService.authenticateModel.password = this.model.password;
53-
this._loginService.authenticate(() => { this.saving = false; });
54-
});
55-
}
62+
this._loginService.authenticateModel.userNameOrEmailAddress = this.model.userName;
63+
this._loginService.authenticateModel.password = this.model.password;
64+
this._loginService.authenticate(() => {
65+
this.saving = false;
66+
});
67+
});
68+
}
5669
}

0 commit comments

Comments
 (0)