From d3b1ed75f409ab8224452fc3d4fc54a6efa1c38c Mon Sep 17 00:00:00 2001
From: Lukas Kimpel <lukas.kimpel@mni.thm.de>
Date: Tue, 6 Mar 2018 18:09:43 +0100
Subject: [PATCH] Add error handling for username and password input
---
src/app/login/login.component.html | 20 +++++++++++---------
src/app/login/login.component.ts | 23 ++++++++++++++---------
2 files changed, 25 insertions(+), 18 deletions(-)
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 800da983d..ac1a501a1 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1,11 +1,13 @@
-<mat-form-field class="input-block">
- <input matInput #userName placeholder="Username"/>
- <mat-error *ngIf="usernameErrorMessage !== ''">{{ usernameErrorMessage }}</mat-error>
-</mat-form-field>
+<form>
+ <mat-form-field class="input-block">
+ <input matInput #userName placeholder="Username" [formControl]="usernameFormControl" [errorStateMatcher]="matcher" name="username" />
+ <mat-error *ngIf="usernameFormControl.hasError('required')">Username is <strong>required</strong>.</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>
+ <mat-form-field class="input-block">
+ <input matInput #userPassword type="password" placeholder="Password" [formControl]="passwordFormControl" [errorStateMatcher]="matcher" name="password" />
+ <mat-error *ngIf="passwordFormControl.hasError('required')">Password is <strong>required</strong>.</mat-error>
+ </mat-form-field>
-<button mat-raised-button color="primary" (click)="login(userName.value, userPassword.value)">Login</button>
+ <button mat-raised-button color="primary" (click)="login(userName.value, userPassword.value)">Login</button>
+</form>
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 3310c0e4b..d60ef87df 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -2,6 +2,15 @@ import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from '../authentication.service';
import { Router } from '@angular/router';
import { NotificationService } from '../notification.service';
+import { ErrorStateMatcher } from '@angular/material';
+import { FormControl, FormGroupDirective, NgForm, ReactiveFormsModule, Validators } from '@angular/forms';
+
+export class LoginErrorStateMatcher implements ErrorStateMatcher {
+ isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+ const isSubmitted = form && form.submitted;
+ return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
+ }
+}
@Component({
selector: 'app-login',
@@ -10,8 +19,10 @@ import { NotificationService } from '../notification.service';
})
export class LoginComponent implements OnInit {
- protected usernameErrorMessage = '';
- protected passwordErrorMessage = '';
+ usernameFormControl = new FormControl('', [Validators.required]);
+ passwordFormControl = new FormControl('', [Validators.required]);
+
+ matcher = new LoginErrorStateMatcher();
constructor(public authenticationService: AuthenticationService,
public router: Router,
@@ -25,14 +36,8 @@ export class LoginComponent implements OnInit {
username = username.trim();
password = password.trim();
- if (username === '') {
- // ToDo: Handle username and password not correct event
- this.usernameErrorMessage = 'Username is required';
- } else if (password === '') {
- this.passwordErrorMessage = 'Password is required';
- } else {
+ if (username !== '' && password !== '') {
this.authenticationService.login(username, password).subscribe(loginSuccessful => {
- console.log(loginSuccessful);
if (loginSuccessful) {
this.notificationService.show('Login successful!');
this.router.navigate(['rooms']);
--
GitLab