diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index 39d0d9934ef580b34da970543f9822b674103ef8..800da983d8b40bc9fa7060c324e2165fbd1af096 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -1,9 +1,11 @@ <mat-form-field class="input-block"> <input matInput #userName placeholder="Username"/> + <mat-error *ngIf="usernameErrorMessage !== ''">{{ usernameErrorMessage }}</mat-error> </mat-form-field> <mat-form-field class="input-block"> <input matInput #userPassword type="password" placeholder="Password"/> + <mat-error *ngIf="passwordErrorMessage !== ''">{{ passwordErrorMessage }}</mat-error> </mat-form-field> <button mat-raised-button color="primary" (click)="login(userName.value, userPassword.value)">Login</button> diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts index 89883adf25c4136fc80dcbbf7ea43cdd0f92e8ff..3310c0e4b9b37e21b1c4c5f91c1f509b9b01849b 100644 --- a/src/app/login/login.component.ts +++ b/src/app/login/login.component.ts @@ -10,7 +10,12 @@ import { NotificationService } from '../notification.service'; }) export class LoginComponent implements OnInit { - constructor(public authenticationService: AuthenticationService, public router: Router, public notificationService: NotificationService) { + protected usernameErrorMessage = ''; + protected passwordErrorMessage = ''; + + constructor(public authenticationService: AuthenticationService, + public router: Router, + public notificationService: NotificationService) { } ngOnInit() { @@ -20,9 +25,11 @@ export class LoginComponent implements OnInit { username = username.trim(); password = password.trim(); - if (username === '' || password === '') { + if (username === '') { // ToDo: Handle username and password not correct event - console.log(`Username or password empty`); + this.usernameErrorMessage = 'Username is required'; + } else if (password === '') { + this.passwordErrorMessage = 'Password is required'; } else { this.authenticationService.login(username, password).subscribe(loginSuccessful => { console.log(loginSuccessful);