SES-89 Connected to backend for login #28

Merged
s426128 merged 3 commits from SES-89 into master 2020-12-13 13:29:19 +01:00
3 changed files with 46 additions and 26 deletions
Showing only changes of commit 1412362b79 - Show all commits

View File

@ -23,7 +23,7 @@
formControlName="password" formControlName="password"
required required
placeholder="Password" placeholder="Password"
type="password" [type]="true ? 'password' : 'text'"
name="password"/> name="password"/>
<mat-icon matSuffix>lock</mat-icon> <mat-icon matSuffix>lock</mat-icon>
<mat-error *ngIf="signUpFormGroup?.get('newAccount')?.controls?.password?.hasError('required')"> <mat-error *ngIf="signUpFormGroup?.get('newAccount')?.controls?.password?.hasError('required')">
@ -37,7 +37,7 @@
formControlName="confirmPassword" formControlName="confirmPassword"
required required
placeholder="Confirm Password" placeholder="Confirm Password"
type="password" [type]="true ? 'password' : 'text'"
name="confirmPassword"/> name="confirmPassword"/>
<mat-icon matSuffix >lock</mat-icon> <mat-icon matSuffix >lock</mat-icon>
<mat-error *ngIf="signUpFormGroup?.get('newAccount')?.controls?.confirmPassword?.hasError('required')"> <mat-error *ngIf="signUpFormGroup?.get('newAccount')?.controls?.confirmPassword?.hasError('required')">

View File

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

View File

@ -1,8 +1,9 @@
import {Inject, Injectable} from '@angular/core'; import {Inject, Injectable} from '@angular/core';
import {HttpClient, HttpParams} from '@angular/common/http'; import {HttpClient, HttpParams} from '@angular/common/http';
import {Observable} from 'rxjs'; import {Observable, of, throwError} from 'rxjs';
import {ErrorResponse} from '../types/ErrorResponse'; import {ErrorResponse} from '../types/ErrorResponse';
import {Either} from '../types/Either'; import {Either} from '../types/Either';
import {switchMap} from 'rxjs/operators';
Injectable({ Injectable({
providedIn: 'root' providedIn: 'root'
@ -13,10 +14,18 @@ export class UserService {
this.baseUrl = baseUrl + this.baseUrl; 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() const params = new HttpParams()
.set('userName', login) .set('userName', login)
.set('password', password); .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);
}
})
);
} }
} }