src/app/login/login.component.ts
| templateUrl | login.component.html |
Properties |
Methods |
Accessors |
constructor(formBuilder: FormBuilder, route: ActivatedRoute, router: Router, authenticationService: AuthenticationService, spinner: NgxSpinnerService, toastr: ToastrService)
|
|||||||||||||||||||||
|
Defined in src/app/login/login.component.ts:18
|
|||||||||||||||||||||
|
Parameters :
|
| ngOnDestroy |
ngOnDestroy()
|
|
Defined in src/app/login/login.component.ts:49
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/login/login.component.ts:34
|
|
Returns :
void
|
| onSubmit |
onSubmit()
|
|
Defined in src/app/login/login.component.ts:58
|
|
Returns :
void
|
| focus |
|
Defined in src/app/login/login.component.ts:14
|
| focus1 |
|
Defined in src/app/login/login.component.ts:15
|
| loginForm |
Type : FormGroup
|
|
Defined in src/app/login/login.component.ts:16
|
| returnUrl |
Type : string
|
|
Defined in src/app/login/login.component.ts:18
|
| submitted |
Default value : false
|
|
Defined in src/app/login/login.component.ts:17
|
| f |
getf()
|
|
Defined in src/app/login/login.component.ts:56
|
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { AlertService } from '../services/alert.service';
import { AuthenticationService } from '../services/authentication.service';
import { NgxSpinnerService } from 'ngx-spinner';
import { ToastrService } from 'ngx-toastr';
@Component({ templateUrl: 'login.component.html' })
export class LoginComponent implements OnInit, OnDestroy {
focus;
focus1;
loginForm: FormGroup;
submitted = false;
returnUrl: string;
constructor(
private formBuilder: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private authenticationService: AuthenticationService,
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.loginForm = this.formBuilder.group({
username: ['', Validators.required],
password: ['', Validators.required]
});
// get return url from route parameters or default to '/'
// tslint:disable-next-line: no-string-literal
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/timesheets-list';
}
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.loginForm.controls; }
onSubmit() {
this.spinner.show();
this.submitted = true;
// stop here if form is invalid
if (this.loginForm.invalid) {
this.toastr.warning('Form is invalid!');
this.spinner.hide();
}
else {
this.authenticationService.login(this.f.username.value, this.f.password.value)
.pipe(first())
.subscribe(
data => {
this.router.navigate([this.returnUrl]);
this.toastr.success('Login successful');
this.spinner.hide();
},
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>
<br>
<br>
<br>
<br>
<div class="row justify-content-center">
<div class="col-xl-5 col-lg-6 col-md-8 col-sm-11">
<div class="card my-5">
<div class="card-body p-5 text-center">
<div class="h3 font-weight-light mb-3">Sign In</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">
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<alert></alert>
<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}">
<br>
<input type="text" placeholder="Username" class="form-control" formControlName="username" (focus)="focus1=true" (blur)="focus1=false" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
<div *ngIf="submitted && f.username.errors" class="invalid-feedback">
<div *ngIf="f.username.errors.required">Username is required</div>
</div>
</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}">
<br>
<input type="password" placeholder="Password" class="form-control" formControlName="password" (focus)="focus1=true" (blur)="focus1=false" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">Password is required</div>
</div>
</div>
<br>
<div class="form-group d-flex align-items-center justify-content-between mb-0">
<div class="custom-control custom-control-solid custom-checkbox">
<input class="custom-control-input small" id="customCheck1" type="checkbox" />
<label class="custom-control-label" for="customCheck1">Remember password</label>
</div>
<br>
<button class="btn btn-primary">Login</button>
</div>
</form>
</div>
<hr class="my-0" />
<div class="card-body px-5 py-4">
<div class="small text-center">
New user? <a routerLink="/register">Create an account!</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 © Work-Flow 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>