SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.html

@@ -2,11 +2,11 @@
     <div formGroupName="newAccount" class="container">
       <mat-icon matSuffix class="arrow-back" (click)="GoToLoginPage()">arrow_back</mat-icon>
       <div class="primary-text header">Create an Account</div>
-      
+
       <mat-form-field class="form-container">
         <input
           matInput
-          formControlName="username" 
+          formControlName="username"
           placeholder="Username"
           type="text"
           required
@@ -18,12 +18,12 @@
       </mat-form-field>
 
       <mat-form-field class="form-container">
-        <input 
-          matInput 
-          formControlName="password" 
+        <input
+          matInput
+          formControlName="password"
           required
           placeholder="Password"
-          type="password"
+          [type]="true ? 'password' : 'text'"
           name="password"/>
         <mat-icon matSuffix>lock</mat-icon>
         <mat-error *ngIf="signUpFormGroup?.get('newAccount')?.controls?.password?.hasError('required')">
@@ -32,12 +32,12 @@
       </mat-form-field>
 
       <mat-form-field class="form-container">
-        <input 
-          matInput 
-          formControlName="confirmPassword" 
-          required 
+        <input
+          matInput
+          formControlName="confirmPassword"
+          required
           placeholder="Confirm Password"
-          type="password"
+          [type]="true ? 'password' : 'text'"
           name="confirmPassword"/>
         <mat-icon matSuffix >lock</mat-icon>
         <mat-error *ngIf="signUpFormGroup?.get('newAccount')?.controls?.confirmPassword?.hasError('required')">
@@ -55,4 +55,4 @@
         <mat-icon matSuffix class="arrow-forward">arrow_forward</mat-icon>
       </button>
     </div>
-  </div>
+  </div>

SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts

@@ -1,14 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { FormGroup, Validators, FormBuilder } from '@angular/forms';
 import { Router } from '@angular/router';
 import {UserService} from '../../../services/user.service';
+import {ErrorResponse} from '../../../types/ErrorResponse';
+import {Subscription} from 'rxjs';
 
 @Component({
   selector: 'app-sign-in',
   templateUrl: './sign-in.component.html',
   styleUrls: ['./sign-in.component.css']
 })
-export class SignInComponent {
+export class SignInComponent implements OnDestroy {
+  allSubscriptions = new Subscription();
+
   isExpanded = false;
   apiError = false;
   apiErrorMessage = '';
@@ -24,16 +28,19 @@ export class SignInComponent {
     })
   });
 
-  async onLoginButtonClick() {
-    const result = await this.userService.tryLogin(
+  onLoginButtonClick() {
+    this.allSubscriptions.add(
+      this.userService.tryLogin(
       this.signInFormGroup.get('signIn').value['username'],
-      this.signInFormGroup.get('signIn').value['password']);
-    if (result.isLeft) {
-      await this.router.navigate(['player']);
-    } else {
-      this.apiError = true;
-      this.apiErrorMessage = result.right.message;
-    }
+      this.signInFormGroup.get('signIn').value['password']).subscribe(
+      (success) => {
+        this.router.navigate(['player']);
+      },
+      (error: ErrorResponse) => {
+        this.apiError = true;
+        this.apiErrorMessage = error.message;
+      }
+    ));
   }
 
   onRegisterButtonClick(){
@@ -52,4 +59,8 @@ export class SignInComponent {
   toggle() {
     this.isExpanded = !this.isExpanded;
   }
+
+  ngOnDestroy() {
+    this.allSubscriptions.unsubscribe();
+  }
 }

SessionCompanion/SessionCompanion/ClientApp/src/services/user.service.ts

@@ -1,8 +1,9 @@
 import {Inject, Injectable} from '@angular/core';
 import {HttpClient, HttpParams} from '@angular/common/http';
-import {Observable} from 'rxjs';
+import {Observable, of, throwError} from 'rxjs';
 import {ErrorResponse} from '../types/ErrorResponse';
 import {Either} from '../types/Either';
+import {switchMap} from 'rxjs/operators';
 
 Injectable({
   providedIn: 'root'
@@ -13,10 +14,18 @@ export class UserService {
     this.baseUrl = baseUrl + this.baseUrl;
   }
 
-  async tryLogin(login: string, password: string): Promise<Either<number, ErrorResponse>> {
+  tryLogin(login: string, password: string): Observable<number> {
     const params = new HttpParams()
       .set('userName', login)
       .set('password', password);
-     return await this.http.get<Either<number, ErrorResponse>>(this.baseUrl + 'login', { params }).toPromise();
+     return this.http.get<Either<number, ErrorResponse>>(this.baseUrl + 'login', { params }).pipe(
+       switchMap(response => {
+         if (response.isLeft) {
+           return of(response.left);
+         } else {
+           return throwError(response.right);
+         }
+       })
+     );
   }
 }