diff --git a/src/app/modules/accounts/accounts.ts b/src/app/modules/accounts/accounts.ts
index 1629f85..917f130 100644
--- a/src/app/modules/accounts/accounts.ts
+++ b/src/app/modules/accounts/accounts.ts
@@ -1,10 +1,13 @@
-import {Component} from '@angular/core'
-import {FormBuilder, FormControl, Validators} from '@angular/forms'
-import {SubscribingComponent} from '../shared/components/subscribing.component'
+import {Component, HostListener, ViewChild} from '@angular/core'
+import {FormControl, Validators} from '@angular/forms'
+import {ErrorHandlingComponent} from '../shared/components/subscribing.component'
import {AccountService} from './services/account.service'
import {AppState} from '../shared/app-state'
-import {ErrorService} from '../shared/service/error.service'
+import {ErrorHandler, ErrorService} from '../shared/service/error.service'
import {ActivatedRoute, Router} from '@angular/router'
+import {CreForm, ICreForm} from "../shared/components/forms/forms";
+import {take, takeUntil} from "rxjs/operators";
+import {AlertService} from "../shared/service/alert.service";
@Component({
selector: 'cre-login',
@@ -13,13 +16,20 @@ import {ActivatedRoute, Router} from '@angular/router'
'cre-form { min-width: 25rem; margin-top: 50vh; transform: translateY(-70%) }'
]
})
-export class Login extends SubscribingComponent {
+export class Login extends ErrorHandlingComponent {
+ @ViewChild(CreForm) form: ICreForm
+
userIdControl = new FormControl(null, Validators.compose([Validators.required, Validators.pattern(new RegExp('^[0-9]+$'))]))
passwordControl = new FormControl(null, Validators.required)
+ errorHandlers: ErrorHandler[] = [{
+ filter: error => error.status === 403,
+ messageProducer: () => 'Les identifiants entrés sont invalides'
+ }]
+
constructor(
- private formBuilder: FormBuilder,
private accountService: AccountService,
+ private alertService: AlertService,
private appState: AppState,
errorService: ErrorService,
router: Router,
@@ -29,12 +39,27 @@ export class Login extends SubscribingComponent {
this.appState.title = 'Connexion'
}
+ // Allows to send the form by pressing Enter
+ @HostListener('window:keyup.enter', ['$event'])
+ onEnterKeyEvent() {
+ if (this.form.formGroup) {
+ this.submit()
+ }
+ }
+
submit() {
- this.accountService.login(
- this.userIdControl.value,
- this.passwordControl.value,
- () => this.urlUtils.navigateTo('/color')
- )
+ // Does not use SubscribingComponent shortcut because backend doesn't return expected error type
+ this.accountService.login(this.userIdControl.value, this.passwordControl.value)
+ .pipe(take(1), takeUntil(this.destroy$))
+ .subscribe({
+ error: error => this.handleLoginError(error)
+ })
+ }
+
+ private handleLoginError(error) {
+ if (error.status === 403) {
+ this.alertService.pushError('Les identifiants entrés sont invalides')
+ }
}
get controls(): { userId: FormControl, password: FormControl } {
diff --git a/src/app/modules/accounts/login.html b/src/app/modules/accounts/login.html
index 0521fdb..7ec17e8 100644
--- a/src/app/modules/accounts/login.html
+++ b/src/app/modules/accounts/login.html
@@ -18,10 +18,11 @@
-
-
+
+ Connexion
+
diff --git a/src/app/modules/accounts/pages/login/login.component.ts b/src/app/modules/accounts/pages/login/login.component.ts
index 1802a7c..da31ab5 100644
--- a/src/app/modules/accounts/pages/login/login.component.ts
+++ b/src/app/modules/accounts/pages/login/login.component.ts
@@ -44,10 +44,12 @@ export class LoginComponent extends ErrorHandlingComponent implements OnInit {
}
submit() {
- this.accountService.login(
- this.idFormControl.value,
- this.passwordFormControl.value,
- () => this.router.navigate(['/color'])
+ this.subscribe(
+ this.accountService.login(
+ this.idFormControl.value,
+ this.passwordFormControl.value
+ ),
+ response => console.log(response)
)
}
}
diff --git a/src/app/modules/accounts/services/account.service.ts b/src/app/modules/accounts/services/account.service.ts
index dbf3362..22ad500 100644
--- a/src/app/modules/accounts/services/account.service.ts
+++ b/src/app/modules/accounts/services/account.service.ts
@@ -1,6 +1,6 @@
import {Injectable, OnDestroy} from '@angular/core'
-import {Subject} from 'rxjs'
-import {take, takeUntil} from 'rxjs/operators'
+import {Observable, Subject} from 'rxjs'
+import {take, takeUntil, tap} from 'rxjs/operators'
import {AppState} from '../../shared/app-state'
import {HttpClient, HttpResponse} from '@angular/common/http'
import {environment} from '../../../../environments/environment'
@@ -55,7 +55,32 @@ export class AccountService implements OnDestroy {
}
}
- login(id: number, password: string, success: () => void) {
+ login(userId: number, password: string): Observable {
+ globalLoadingWheel.show()
+ const request$ = this.http.post(`${environment.apiUrl}/login`, {id: userId, password}, {
+ withCredentials: true,
+ observe: 'response' as 'body'
+ }).pipe(
+ take(1),
+ takeUntil(this.destroy$)
+ )
+
+ request$.subscribe({
+ next: (response: HttpResponse) => {
+ globalLoadingWheel.hide()
+
+ // TODO: Login user
+ },
+ error: error => {
+ globalLoadingWheel.hide()
+ this.errorService.handleError(error)
+ }
+ })
+
+ return request$
+ }
+
+ loginOld(id: number, password: string, success: () => void) {
const loginForm = {id, password}
globalLoadingWheel.show()
this.http.post(`${environment.apiUrl}/login`, loginForm, {
diff --git a/src/app/modules/recipes/add.html b/src/app/modules/recipes/add.html
index aa827e1..a4eec0d 100644
--- a/src/app/modules/recipes/add.html
+++ b/src/app/modules/recipes/add.html
@@ -3,7 +3,7 @@
Retour
-
+
diff --git a/src/app/modules/shared/components/forms/buttons.ts b/src/app/modules/shared/components/forms/buttons.ts
index 2c70ed1..ed1da16 100644
--- a/src/app/modules/shared/components/forms/buttons.ts
+++ b/src/app/modules/shared/components/forms/buttons.ts
@@ -2,7 +2,7 @@ import {Component, ContentChild, EventEmitter, Input, Output} from '@angular/cor
import {ICreForm} from './forms';
@Component({
- selector: 'cre-submit-button',
+ selector: 'cre-form-submit-button',
templateUrl: 'submit-button.html'
})
export class CreSubmitButton {
diff --git a/src/app/modules/shared/components/forms/form.html b/src/app/modules/shared/components/forms/form.html
index 1d6e89b..4b966b8 100644
--- a/src/app/modules/shared/components/forms/form.html
+++ b/src/app/modules/shared/components/forms/form.html
@@ -5,7 +5,7 @@
-
diff --git a/src/app/modules/shared/components/forms/forms.ts b/src/app/modules/shared/components/forms/forms.ts
index 7619f15..ae2f5d3 100644
--- a/src/app/modules/shared/components/forms/forms.ts
+++ b/src/app/modules/shared/components/forms/forms.ts
@@ -2,7 +2,7 @@ import {Component, ContentChild, Directive, Input, OnInit, ViewEncapsulation} fr
import {FormBuilder, FormGroup} from '@angular/forms'
export interface ICreForm {
- form: FormGroup
+ formGroup: FormGroup
valid: boolean
invalid: boolean
}
@@ -35,7 +35,7 @@ export class CreForm implements ICreForm, OnInit {
@ContentChild(CreFormActions) formActions: CreFormActions
@Input() formControls: { [key: string]: any }
- form: FormGroup
+ formGroup: FormGroup
constructor(
private formBuilder: FormBuilder
@@ -43,7 +43,7 @@ export class CreForm implements ICreForm, OnInit {
}
ngOnInit(): void {
- this.form = this.formBuilder.group(this.formControls)
+ this.formGroup = this.formBuilder.group(this.formControls)
}
get hasActions(): boolean {
@@ -51,10 +51,10 @@ export class CreForm implements ICreForm, OnInit {
}
get valid(): boolean {
- return this.form && this.form.valid
+ return this.formGroup && this.formGroup.valid
}
get invalid(): boolean {
- return !this.form || this.form.invalid
+ return !this.formGroup || this.formGroup.invalid
}
}
diff --git a/src/app/modules/shared/components/inputs/inputs.ts b/src/app/modules/shared/components/inputs/inputs.ts
index cfca06f..7b53fef 100644
--- a/src/app/modules/shared/components/inputs/inputs.ts
+++ b/src/app/modules/shared/components/inputs/inputs.ts
@@ -1,5 +1,6 @@
import {
- AfterViewInit, ChangeDetectorRef,
+ AfterViewInit,
+ ChangeDetectorRef,
Component,
ContentChild,
Directive,
@@ -16,7 +17,7 @@ import {
import {AbstractControl, FormControl, ValidationErrors, ValidatorFn, Validators} from '@angular/forms'
import {COMMA, ENTER} from '@angular/cdk/keycodes'
import {isObservable, Observable, Subject} from 'rxjs'
-import {map, startWith, takeUntil} from 'rxjs/operators'
+import {map, takeUntil} from 'rxjs/operators'
import {MatChipInputEvent} from '@angular/material/chips'
import {MatAutocomplete, MatAutocompleteSelectedEvent} from '@angular/material/autocomplete'