### File

`src/app/login/login.component.ts`

### Metadata

selector | `app-login`
styleUrls | `login.component.scss`
templateUrl | `login.component.html`

### Constructor

`constructor(fb: FormBuilder, dataService: ApiService, router: Router)`

### 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`

### Properties

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

password
`password: `AbstractControl` </bcode>`

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

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

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

userData
`userData: `any` </bcode>`

username
`username: `AbstractControl` </bcode>`

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

    }

# results matching ""

# No results matching ""