File
Metadata
selector |
app-login |
styleUrls |
login.component.scss |
templateUrl |
login.component.html |
Methods
updateLabels
|
updateLabels()
|
Updates the state of the labels, whether a label is inside the textbox or out of it; an asset of the UI.
Returns: void
|
postData
|
postData(form: FormGroup)
|
Posts the login form data to the server and verifies the credentials; in case the credentials match, logs in the user by updating the token value and redirecting to the home page.
Parameters :
-
form
- The FormGroup aggregate of the form data.
Returns: void
|
error
|
error(str: string)
|
Pops up the red error box in case of an error and thus notifies the user of incorrect credentials or other errors.
Parameters :
-
str
- The string to be displayed inside the popup.
Returns: void
|
set
|
set: NodeListOf<HTMLInputElement>
|
submitElement
|
submitElement: HTMLInputElement
|
import {Component, OnInit} from '@angular/core';
import {AbstractControl, FormBuilder, FormGroup, Validators} from '@angular/forms';
import {Router} from '@angular/router';
import {first} from 'rxjs/operators';
import {ApiService} from '../api.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
form: FormGroup;
timeout: any;
userData: any;
submitElement: HTMLInputElement;
set: NodeListOf<HTMLInputElement>;
constructor(private fb: FormBuilder, private dataService: ApiService, private router: Router) {
this.form = this.fb.group({
username: ['', [Validators.required, Validators.minLength(5)]],
password: ['', Validators.required]
});
}
get username(): AbstractControl {
return this.form.get('username');
}
get password(): AbstractControl {
return this.form.get('password');
}
ngOnInit(): void {
this.submitElement = document.getElementById('submit') as HTMLInputElement;
this.set = document.querySelectorAll('input:not([type=submit])');
this.set.forEach(item => {
item.addEventListener('focus', () => {
item.parentElement.querySelector('label').classList.add('active');
});
item.addEventListener('blur', () => {
if (item.value === '') {
item.parentElement.querySelector('label').classList.remove('active');
}
});
});
}
/**
* Updates the state of the labels, whether a label is inside the textbox or out of it; an asset of the UI.
*/
updateLabels(): void {
this.set.forEach(item => {
if (item.value !== '' && item.value !== null) {
item.parentElement.querySelector('label').classList.add('active');
} else {
item.parentElement.querySelector('label').classList.remove('active');
}
});
}
/**
* Posts the login form data to the server and verifies the credentials; in case the credentials match, logs in the user by updating the
* token value and redirecting to the home page.
* @param form - The FormGroup aggregate of the form data.
*/
postData(form: FormGroup): void {
if (this.submitElement.classList.contains('disabled')) {
return;
}
this.submitElement.classList.add('disabled');
this.dataService.userLogin(form.value.username, form.value.password)
.pipe(first())
.subscribe(data => {
this.userData = data;
const redirect = this.dataService.redirectUrl ? this.dataService.redirectUrl : '/home';
this.router.navigate([redirect]).then();
}, () => {
this.error('Incorrect username or password.');
form.get('password').reset();
});
}
/**
* Pops up the red error box in case of an error and thus notifies the user of incorrect credentials or other errors.
* @param str - The string to be displayed inside the popup.
*/
error(str: string): void {
const co = (document.getElementById('cover') as HTMLDivElement);
const pu = (document.getElementById('error') as HTMLDivElement);
pu.querySelector('.desc').innerHTML = str;
co.querySelectorAll('.popup').forEach(item => {
item.classList.remove('active');
});
co.style.display = 'block';
setTimeout(() => {
co.classList.add('active');
pu.classList.add('active');
}, 100);
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
pu.classList.remove('active');
co.classList.remove('active');
setTimeout(() => {
co.style.display = 'none';
this.submitElement.classList.remove('disabled');
}, 500);
}, 3000);
}
}