src/app/register/register.component.ts
selector | app-register |
styleUrls | register.component.scss |
templateUrl | register.component.html |
constructor(fb: FormBuilder, dataService: ApiService)
|
updateLabels |
updateLabels()
|
Update the location of the labels on the basis of whether the corresponding input field is empty; a UI asset.
Returns:
void
|
postData |
postData(frm: any)
|
Post the registration data obtained from the form UI.
Parameters :
Returns:
void
|
error |
error(str: string)
|
Pops up the error popup in case of any error encountered while registering the user.
Parameters :
Returns:
void
|
success |
success()
|
Notifies the user of successful registration.
Returns:
void
|
email: |
Getter function for the form's email field. |
form |
form: |
name |
name: |
Getter function for the form's name field. |
password |
password: |
Getter function for the form's password field. |
set |
set: |
submitElement |
submitElement: |
timeout |
timeout: |
username |
username: |
Getter function for the form's username field. |
import {Component, OnInit} from '@angular/core';
import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {first} from 'rxjs/operators';
import {ApiService} from '../api.service';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
form: FormGroup;
timeout: any;
set: NodeListOf<HTMLInputElement>;
submitElement: HTMLInputElement;
constructor(private fb: FormBuilder, private dataService: ApiService) {
this.form = this.fb.group({
name: new FormControl('', [Validators.required, Validators.minLength(1), Validators.maxLength(50)]),
username: new FormControl('', [Validators.required, Validators.minLength(5), Validators.maxLength(50), Validators.pattern(/^[a-zA-Z0-9_]+$/)]),
email: new FormControl('', [Validators.required, Validators.pattern(/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/)]),
password: new FormControl('', [Validators.required, Validators.minLength(8)]),
confirm_password: new FormControl('', [Validators.required, Validators.minLength(8)])
});
}
/**
* Getter function for the form's email field.
*/
get email(): AbstractControl {
return this.form.get('email');
}
/**
* Getter function for the form's password field.
*/
get password(): AbstractControl {
return this.form.get('password');
}
/**
* Getter function for the form's name field.
*/
get name(): AbstractControl {
return this.form.get('name');
}
/**
* Getter function for the form's username field.
*/
get username(): AbstractControl {
return this.form.get('name');
}
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');
}
});
});
}
/**
* Update the location of the labels on the basis of whether the corresponding input field is empty; a UI asset.
*/
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');
}
});
}
/**
* Post the registration data obtained from the form UI.
* @param frm - The FormGroup aggregate of the form data.
*/
postData(frm: any): void {
if (this.submitElement.classList.contains('disabled')) {
return;
}
this.submitElement.classList.add('disabled');
if (this.form.get('name').invalid) {
this.error('Invalid name. Please keep it 1 to 50 characters long.');
return;
} else if (this.form.get('username').invalid) {
this.error('Invalid username. Please keep it 5 to 50 characters long with only alphanumeric characters and underscores.');
return;
} else if (this.form.get('email').invalid) {
this.error('Invalid email address. Please recheck.');
return;
} else if (this.form.get('password').invalid || this.form.get('confirm_password').invalid) {
this.error('Invalid password or the passwords don\'t match. Please keep the password at least 8 characters long.');
this.form.get('password').setValue('');
this.form.get('confirm_password').setValue('');
return;
} else if (this.form.get('password').value !== this.form.get('confirm_password').value) {
this.error('Passwords don\'t match. Please recheck.');
this.form.get('password').setValue('');
this.form.get('confirm_password').setValue('');
return;
}
this.dataService.userReg(frm.value.name, frm.value.email, frm.value.password, frm.value.username)
.pipe(first())
.subscribe(
() => {
this.success();
},
(err: any) => {
console.log(err);
this.error('Could not register you. The username or the email ID already exists.');
});
}
/**
* Pops up the error popup in case of any error encountered while registering the user.
* @param str - The string to be displayed in 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);
}
/**
* Notifies the user of successful registration.
*/
success(): void {
const co = (document.getElementById('cover') as HTMLDivElement);
const pu = (document.getElementById('success') as HTMLDivElement);
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);
this.form.reset();
this.updateLabels();
}, 3000);
}
}