SES-89 Connected to backend for login #28
@ -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')">
|
||||||
|
@ -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();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user