src/app/register/register.component.ts
| templateUrl | register.component.html |
Properties |
Methods |
Accessors |
constructor(formBuilder: FormBuilder, router: Router, authenticationService: AuthenticationService, userService: UserService, spinner: NgxSpinnerService, toastr: ToastrService)
|
|||||||||||||||||||||
|
Defined in src/app/register/register.component.ts:18
|
|||||||||||||||||||||
|
Parameters :
|
| ngOnDestroy |
ngOnDestroy()
|
|
Defined in src/app/register/register.component.ts:47
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/register/register.component.ts:34
|
|
Returns :
void
|
| onSubmit |
onSubmit()
|
|
Defined in src/app/register/register.component.ts:56
|
|
Returns :
void
|
| focus |
|
Defined in src/app/register/register.component.ts:14
|
| focus1 |
|
Defined in src/app/register/register.component.ts:15
|
| loading |
Default value : false
|
|
Defined in src/app/register/register.component.ts:17
|
| registerForm |
Type : FormGroup
|
|
Defined in src/app/register/register.component.ts:16
|
| submitted |
Default value : false
|
|
Defined in src/app/register/register.component.ts:18
|
| f |
getf()
|
|
Defined in src/app/register/register.component.ts:54
|
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { AlertService } from '../services/alert.service';
import { UserService } from '../services/user.service';
import { AuthenticationService } from '../services/authentication.service';
import { NgxSpinnerService } from 'ngx-spinner';
import { ToastrService } from 'ngx-toastr';
@Component({ templateUrl: 'register.component.html' })
export class RegisterComponent implements OnInit, OnDestroy {
focus;
focus1;
registerForm: FormGroup;
loading = false;
submitted = false;
constructor(
private formBuilder: FormBuilder,
private router: Router,
private authenticationService: AuthenticationService,
private userService: UserService,
private spinner: NgxSpinnerService,
private toastr: ToastrService
) {
// redirect to home if already logged in
if (this.authenticationService.currentUserValue) {
this.router.navigate(['/dashboard']);
}
}
ngOnInit() {
// tslint:disable-next-line: prefer-const
let body = document.getElementsByTagName('body')[0];
body.classList.add('login-page');
this.registerForm = this.formBuilder.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
username: ['', Validators.required],
password: ['', Validators.required]
});
}
ngOnDestroy() {
// tslint:disable-next-line: prefer-const
let body = document.getElementsByTagName('body')[0];
body.classList.remove('login-page');
}
// convenience getter for easy access to form fields
get f() { return this.registerForm.controls; }
onSubmit() {
this.spinner.show();
this.submitted = true;
// stop here if form is invalid
if (this.registerForm.invalid) {
this.toastr.warning('Form is invalid!');
this.spinner.hide();
}
else {
this.loading = true;
this.userService.register(this.registerForm.value)
.pipe(first())
.subscribe(
data => {
this.spinner.hide();
this.toastr.success('Registration successful');
this.router.navigate(['/login']);
},
error => {
this.toastr.error(error);
this.spinner.hide();
});
}
}
}
<body class="bg-primary">
<div class="bg-img-repeat" style="background-image: url('../../assets/img/pattern-shapes.png')">
<div id="layoutAuthentication">
<div id="layoutAuthentication_content">
<main>
<div class="container">
<div style="position: relative;">
<ngx-spinner bdOpacity=0.5 bdColor="rgba(51,51,51,0.85)" size="medium" color="#fff" type="line-scale" [fullScreen]="true">
<p style="color: white"> Openning connection to our database... </p>
</ngx-spinner>
</div>
<div class="row justify-content-center">
<!-- Register Form-->
<div class="col-xl-8 col-lg-9">
<div class="card my-5">
<div class="card-body p-5 text-center">
<div class="h3 font-weight-light mb-3">Create an Account</div>
<div class="small text-muted mb-2">Sign in using...</div>
<a class="btn btn-icon btn-facebook mx-1" href="javascript:void(0);"><i class="fab fa-facebook-f fa-fw fa-sm"></i></a><a class="btn btn-icon btn-github mx-1" href="javascript:void(0);"><i class="fab fa-github fa-fw fa-sm"></i></a><a class="btn btn-icon btn-google mx-1" href="javascript:void(0);"><i class="fab fa-google fa-fw fa-sm"></i></a><a class="btn btn-icon btn-twitter mx-1" href="javascript:void(0);"><i class="fab fa-twitter fa-fw fa-sm"></i></a>
</div>
<hr class="my-0" />
<div class="card-body p-5">
<div class="text-center small text-muted mb-4">...or enter your information below.</div>
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<alert></alert>
<label class="text-gray-600 small" for="emailExample">First Name</label>
<br>
<div class="input-group form-group-no-border input-lg" [ngClass]="{'input-group-focus':focus===true}">
<input type="text" placeholder="First Name" class="form-control" formControlName="firstName" (focus)="focus=true" (blur)="focus=false" />
</div>
<label class="text-gray-600 small" for="emailExample">Last Name</label>
<br>
<div class="input-group form-group-no-border input-lg" [ngClass]="{'input-group-focus':focus1===true}">
<input type="text" placeholder="Last Name" class="form-control" formControlName="lastName" (focus)="focus1=true" (blur)="focus1=false" />
</div>
<label class="text-gray-600 small" for="emailExample">Username</label>
<br>
<div class="input-group form-group-no-border input-lg" [ngClass]="{'input-group-focus':focus1===true}">
<input type="text" placeholder="Username" class="form-control" formControlName="username" (focus)="focus1=true" (blur)="focus1=false" />
</div>
<label class="text-gray-600 small" for="emailExample">Password</label>
<br>
<div class="input-group form-group-no-border input-lg" [ngClass]="{'input-group-focus':focus1===true}">
<input type="password" placeholder="Password (Min. 6 characters)" class="form-control" formControlName="password" (focus)="focus1=true" (blur)="focus1=false" />
</div>
<br>
<div class="form-group d-flex align-items-center justify-content-between">
<div class="custom-control custom-control-solid custom-checkbox">
<input class="custom-control-input small" id="customCheck1" type="checkbox" onchange="document.getElementById('createButton').disabled = !this.checked;"/><label class="custom-control-label mr-3" for="customCheck1">I accept the <a href="javascript:void(0);">terms & conditions</a>.</label>
</div>
<button class="btn btn-primary" id="createButton" disabled>Create Account</button>
</div>
</form>
</div>
<hr class="my-0" />
<div class="card-body px-5 py-4">
<div class="small text-center">Have an account? <a routerLink="/login">Sign in!</a></div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<div id="layoutAuthentication_footer">
<footer class="footer mt-auto footer-dark">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 small">Copyright © Your Website 2023</div>
<div class="col-md-6 text-md-right small">
<a href="#!">Privacy Policy</a>
·
<a href="#!">Terms & Conditions</a>
</div>
</div>
</div>
</footer>
</div>
</div>
</div>
</body>