Merge branch '57-login-screen-login-component-logic' into 'master'

Resolve "login screen - login component logic" - fix

Closes #57

See merge request swtp-block-ws17/arsnova-angular-frontend!56

src/app/login/login.component.html

-<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>

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.');
     }
   }