definma-ui/src/app/login/login.component.ts

import { Component, OnInit } from '@angular/core';
import {ValidationService} from '../validation.service';
import {LoginService} from '../login.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  message = '';  // message below login fields
  username = '';  // credentials
  password = '';
  validCredentials = false;  // true if entered credentials are valid

  constructor(
    private validate: ValidationService,
    private loginService: LoginService
  ) { }

  ngOnInit() {
  }

  login() {
    const {ok: userOk, error: userError} = this.validate.username(this.username);
    const {ok: passwordOk, error: passwordError} = this.validate.password(this.password);
    this.message = userError + (userError + passwordError === '' ? '' : '\n') + passwordError;  // display errors
    console.log(this.message);
    if (userOk && passwordOk) {
      this.loginService.login(this.username, this.password).then(ok => {
        if (ok) {
          this.message = 'Login successful';  // TODO: think about following action, write tests!
        }
        else {
          this.message = 'Wrong credentials! Try again.';
        }
      });
    }
  }

}