projects/web-mev/src/app/features/user/register/register.component.ts
User Register Component
Display user registration form
| selector | mev-register-form |
| styleUrls | ./register.component.scss |
| templateUrl | ./register.component.html |
Properties |
Methods |
Accessors |
constructor(formBuilder: FormBuilder, router: Router, authenticationService: AuthenticationService, userService: UserService, notificationService: NotificationService)
|
||||||||||||||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onSubmit |
onSubmit()
|
|
Returns :
void
|
| loading |
Default value : false
|
| registerForm |
Type : FormGroup
|
| routeAnimationsElements |
Default value : ROUTE_ANIMATIONS_ELEMENTS
|
| submitted |
Default value : false
|
| f |
getf()
|
|
Convenience getter for easy access to form fields |
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { UserService } from '@app/core/user/user.service';
import { NotificationService } from '@core/core.module';
import { AuthenticationService } from '@app/core/authentication/authentication.service';
import { ROUTE_ANIMATIONS_ELEMENTS } from '@core/core.module';
import { RepeatPasswordValidator } from '@app/shared/validators/validators';
/**
* User Register Component
*
* Display user registration form
*/
@Component({
selector: 'mev-register-form',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;
registerForm: FormGroup;
loading = false;
submitted = false;
constructor(
private formBuilder: FormBuilder,
private router: Router,
private authenticationService: AuthenticationService,
private userService: UserService,
private readonly notificationService: NotificationService
) {
// redirect to workarea if already logged in
if (this.authenticationService.currentUserValue) {
this.router.navigate(['/workarea']);
}
}
ngOnInit(): void {
this.registerForm = this.formBuilder.group(
{
email: ['', Validators.required],
password: [
'',
[
Validators.required,
Validators.minLength(8),
Validators.pattern(
'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-_]).{8,}$'
)
]
],
confirm_password: ['', [Validators.required]]
},
{ validator: RepeatPasswordValidator }
);
}
/**
* Convenience getter for easy access to form fields
*/
get f() {
return this.registerForm.controls;
}
onSubmit() {
this.submitted = true;
if (this.registerForm.valid) {
this.loading = true;
this.userService
.register(this.registerForm.value)
.pipe(first())
.subscribe(
data => {
this.notificationService.success(
'Registration is successful. Please check your email to activate your account.'
);
this.router.navigate(['/login']);
},
error => {
this.notificationService.error(error);
this.loading = false;
}
);
}
}
}
<div class="container" rtl>
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="row justify-content-center">
<div class="col-md-8 form-group">
<mat-card>
<span class="d-flex justify-content-between align-items-baseline">
<h2>{{ 'mev.menu.register' | translate }}</h2>
</span>
<div class="row">
<mat-form-field class="col" [ngClass]="routeAnimationsElements">
<input matInput placeholder="E-mail"
formControlName="email" type="email" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
<mat-error *ngIf="submitted && f.email.errors">
E-mail is required
</mat-error>
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="col" [ngClass]="routeAnimationsElements">
<input matInput type="password" placeholder="Password"
formControlName="password" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
<div *ngIf="submitted && f.password.errors">
<mat-error *ngIf="f.password.errors.required">
Password is required
</mat-error>
<mat-error *ngIf="f.password.errors.minlength">
Password must be at least 8 characters
</mat-error>
<mat-error *ngIf="f.password.errors.pattern">
Password must have at least one uppercase letter, one lowercase letter, one number and one special character.
</mat-error>
</div>
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="col" [ngClass]="routeAnimationsElements">
<input matInput type="password" placeholder="Confirm password"
formControlName="confirm_password" [ngClass]="{ 'is-invalid': submitted && f.confirm_password.errors }" />
<div *ngIf="submitted && f.confirm_password.errors">
<mat-error *ngIf="f.confirm_password.errors.required">
Please confirm your password
</mat-error>
<mat-error *ngIf="f.confirm_password.errors.notMatched">
Confirm Password does not match with password.
</mat-error>
</div>
</mat-form-field>
</div>
<div class="row buttons d-flex justify-content-center pad">
<button type="submit" mat-raised-button color="accent" [disabled]="loading"
[ngClass]="routeAnimationsElements">
<span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
Register
</button>
<button type="button" mat-raised-button color="primary"
[ngClass]="routeAnimationsElements" routerLink="/about">
Cancel
</button>
</div>
</mat-card>
</div>
</div>
</form>
</div>
./register.component.scss
.main-heading {
text-transform: uppercase;
margin: 0 0 20px 0;
text-align: center;
}
mat-card {
margin-top: 50px;
margin-bottom: 20px;
}
mat-checkbox {
margin: 10px 0 20px 0;
}
.buttons {
margin: 20px 0;
}
button {
margin-right: 5px;
margin-left: 5px;
}