### 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` </bcode>`
Getter function for the form's email field.

form
`form: `FormGroup` </bcode>`

name
`name: `AbstractControl` </bcode>`
Getter function for the form's name field.

password
`password: `AbstractControl` </bcode>`
Getter function for the form's password field.

set
`set: `NodeListOf<HTMLInputElement>` </bcode>`

submitElement
`submitElement: `HTMLInputElement` </bcode>`

timeout
`timeout: `any` </bcode>`

username
`username: `AbstractControl` </bcode>`
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 ""