diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index 6e88d1bbd8ca2c3210389561a2c5c37747e0b799..9a4d84a58c240ef460c7edd301c61d34af11e2fc 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -1,9 +1,11 @@ -<form (ngSubmit)="login(userName.value, userPassword.value)" fxLayout="column" fxLayoutAlign="space-around" +<form (ngSubmit)="login(userEmail.value, userPassword.value)" fxLayout="column" fxLayoutAlign="space-around" fxLayoutGap="10px"> <mat-form-field class="input-block"> - <input matInput #userName placeholder="Username" [formControl]="usernameFormControl" [errorStateMatcher]="matcher" + <input matInput #userEmail placeholder="E-mail" [formControl]="usernameFormControl" [errorStateMatcher]="matcher" name="username"/> - <mat-error *ngIf="usernameFormControl.hasError('required')">Username is <strong>required</strong>.</mat-error> + <mat-error *ngIf="usernameFormControl.hasError('email') && !usernameFormControl.hasError('required')">Please enter a <strong>valid</strong> e-mail address. + </mat-error> + <mat-error *ngIf="usernameFormControl.hasError('required')">E-mail is <strong>required</strong>.</mat-error> </mat-form-field> <mat-form-field class="input-block"> @@ -12,6 +14,8 @@ <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 *ngIf="role === UserRole.PARTICIPANT" (click)="login('anonymus', 'nothing')">Login as guest</button> + <button mat-raised-button color="primary" type="submit">Login</button> + <button mat-raised-button *ngIf="role === UserRole.PARTICIPANT" (click)="guestLogin()">Login as + guest + </button> </form> diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts index cc56bda56f72b01f18e1aa52a38012c64f992163..bb630ccc1b471064523a2ded42c40195a7b01eda 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,13 +41,18 @@ 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.'); } } + guestLogin(): void { + this.authenticationService.login('guest', 'guest', this.role).subscribe(loginSuccessful => this.checkLogin(loginSuccessful)); + } + private checkLogin(loginSuccessful: boolean) { if (loginSuccessful) { this.notificationService.show('Login successful!'); @@ -57,7 +62,7 @@ export class LoginComponent implements OnInit { this.router.navigate(['participant']); } } else { - this.notificationService.show('Login failed!'); + this.notificationService.show('Username or password incorrect.'); } }