src/app/login/login.component.ts
selector | app-login |
styleUrls | ./login.component.scss |
templateUrl | ./login.component.html |
Properties |
Methods |
Accessors |
constructor(fb: FormBuilder, dataService: ApiService, router: Router)
|
||||||||||||
Defined in src/app/login/login.component.ts:18
|
||||||||||||
Parameters :
|
error | ||||||
error(str: string)
|
||||||
Defined in src/app/login/login.component.ts:78
|
||||||
Parameters :
Returns :
void
|
ngOnInit |
ngOnInit()
|
Defined in src/app/login/login.component.ts:35
|
Returns :
void
|
postData | ||||||
postData(form: FormGroup)
|
||||||
Defined in src/app/login/login.component.ts:60
|
||||||
Parameters :
Returns :
void
|
updateLabels |
updateLabels()
|
Defined in src/app/login/login.component.ts:50
|
Returns :
void
|
form |
Type : FormGroup
|
Defined in src/app/login/login.component.ts:14
|
set |
Type : NodeListOf<HTMLInputElement>
|
Defined in src/app/login/login.component.ts:18
|
submitElement |
Type : HTMLInputElement
|
Defined in src/app/login/login.component.ts:17
|
timeout |
Type : any
|
Defined in src/app/login/login.component.ts:15
|
userData |
Type : any
|
Defined in src/app/login/login.component.ts:16
|
username |
getusername()
|
Defined in src/app/login/login.component.ts:27
|
password |
getpassword()
|
Defined in src/app/login/login.component.ts:31
|
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');
}
});
});
}
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');
}
});
}
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();
});
}
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);
}
}
<form (ngSubmit)="postData(form)" [formGroup]="form" action="" id="login_form" novalidate>
<div class="form-row">
<label for="username">Username</label>
<input formControlName="username" id="username" spellcheck="false" type="text">
</div>
<div class="form-row">
<label for="password">Password</label>
<input formControlName="password" id="password" spellcheck="false" type="password">
</div>
<div class="form-row">
<input id="submit" type="submit" value="Submit">
</div>
</form>
<div id="cover">
<div class="popup" id="success">
<div class="title">Success</div>
<p class="desc">
Submitted the query successfully. Resetting the form to the initial values.
</p>
</div>
<div class="popup" id="error">
<div class="title">Error</div>
<p class="desc">
An error encountered while submitting the query. Please check your network and for the validity of the
information.
</p>
</div>
</div>
./login.component.scss
form {
margin-top: 50px;
width: 100%;
text-align: center;
label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.form-row {
input {
display: relative;
margin: 10px;
background: none;
border: 1px solid var(--color);
color: inherit;
font: inherit;
width: 25%;
padding: 5px 8px;
transition: all 0.25s;
&:focus {
background: var(--dark);
transform: scale(1.01);
}
}
input[type=submit] {
width: auto;
cursor: pointer;
-webkit-transition: 0.2s all;
-o-transition: 0.2s all;
transition: 0.2s all;
&:hover {
background: #ddf;
color: #113;
}
&.disabled {
opacity: 0.2;
cursor: default;
&:hover {
background: transparent;
}
}
}
label {
position: absolute;
margin-left: 20px;
margin-top: 15px;
-webkit-transition: 0.15s all;
-o-transition: 0.15s all;
transition: 0.15s all;
&.active {
-webkit-transform: translateX(calc(-100% - 20px));
-ms-transform: translateX(calc(-100% - 20px));
transform: translateX(calc(-100% - 20px));
font-size: 1.1em;
}
}
}
}
#cover {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100%;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
-webkit-transition: all 0.25s;
-o-transition: all 0.25s;
transition: all 0.25s;
opacity: 0;
display: none;
&.active {
opacity: 1;
}
}
.popup {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) scale(0);
-ms-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
width: 25vw;
border: 2px solid var(--color);
z-index: 100;
padding: 20px;
-webkit-transition: all 0.25s;
-o-transition: all 0.25s;
transition: all 0.25s;
&#success {
background-color: #060e;
}
&#error {
background-color: #600e;
}
.title {
font-size: 1.2em;
}
&.active {
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
@media only screen and (max-width: 1340px) {
.form-row {
input[type=text],
input[type=email],
input[type=password] {
width: 50% !important;
}
}
.popup {
width: 50vw !important;
}
}
@media only screen and (max-width: 700px) {
.form-row {
margin: 20px 0;
input[type=text],
input[type=email],
input[type=password] {
width: 80% !important;
}
label {
z-index: 5;
&.active {
background: #113 !important;
-webkit-transform: translate(-10px, -20px) !important;
-ms-transform: translate(-10px, -20px) !important;
transform: translate(-10px, -20px) !important;
}
}
}
.popup {
width: 75vw !important;
}
}