diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index 6e88d1bbd8ca2c3210389561a2c5c37747e0b799..5f51e4107e7691006ba99cbe60472cc3594ed0ed 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -3,6 +3,9 @@ <mat-form-field class="input-block"> <input matInput #userName placeholder="Username" [formControl]="usernameFormControl" [errorStateMatcher]="matcher" name="username"/> + <mat-error *ngIf="usernameFormControl.hasError('email') && !usernameFormControl.hasError('required')">Username must + be a <strong>valid</strong> email address. + </mat-error> <mat-error *ngIf="usernameFormControl.hasError('required')">Username is <strong>required</strong>.</mat-error> </mat-form-field> @@ -13,5 +16,7 @@ </mat-form-field> <button mat-raised-button color="primary" (click)="login(userName.value, userPassword.value)">Login</button> - <button mat-raised-button *ngIf="role === UserRole.PARTICIPANT" (click)="login('anonymus', 'nothing')">Login as guest</button> + <button mat-raised-button *ngIf="role === UserRole.PARTICIPANT" (click)="login('anonymus', 'nothing')">Login as + guest + </button> </form> diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts index cc56bda56f72b01f18e1aa52a38012c64f992163..9af20e5adc51ccb2bad27f843f5ae9097981da5b 100644 --- a/src/app/login/login.component.ts +++ b/src/app/login/login.component.ts @@ -24,7 +24,7 @@ export class LoginComponent implements OnInit { @Input() public role: UserRole; - usernameFormControl = new FormControl('', [Validators.required]); + usernameFormControl = new FormControl('', [Validators.required, Validators.email]); passwordFormControl = new FormControl('', [Validators.required]); matcher = new LoginErrorStateMatcher(); @@ -41,10 +41,11 @@ export class LoginComponent implements OnInit { username = username.trim(); password = password.trim(); - if (username !== '' && password !== '') { + if (!this.usernameFormControl.hasError('required') && !this.usernameFormControl.hasError('email') && + !this.passwordFormControl.hasError('required')) { this.authenticationService.login(username, password, this.role).subscribe(loginSuccessful => this.checkLogin(loginSuccessful)); } else { - this.notificationService.show('Login failed!'); + this.notificationService.show('Please fit the requirements shown above.'); } } @@ -57,7 +58,7 @@ export class LoginComponent implements OnInit { this.router.navigate(['participant']); } } else { - this.notificationService.show('Login failed!'); + this.notificationService.show('Username or password incorrect.'); } }