File

src/app/register/register.component.ts

Metadata

selector app-register
styleUrls register.component.scss
templateUrl register.component.html

Constructor

constructor(fb: FormBuilder, dataService: ApiService)

Methods

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 :
  • frm
    • The FormGroup aggregate of the form data.
Returns: void
error
error(str: string)

Pops up the error popup in case of any error encountered while registering the user.

Parameters :
  • str
    • The string to be displayed in the popup.
Returns: void
success
success()

Notifies the user of successful registration.

Returns: void

Properties

email
email: AbstractControl

Getter function for the form's email field.

form
form: FormGroup
name
name: AbstractControl

Getter function for the form's name field.

password
password: AbstractControl

Getter function for the form's password field.

set
set: NodeListOf<HTMLInputElement>
submitElement
submitElement: HTMLInputElement
timeout
timeout: any
username
username: AbstractControl

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);

  }


}

results matching ""

    No results matching ""