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 if (userOk && passwordOk) { this.loginService.login(this.username, this.password).then(ok => { if (ok) { this.message = 'Login successful'; // TODO: think about following action } else { this.message = 'Wrong credentials! Try again.'; } }); } } }