correctifs

angular.json

@@ -30,8 +30,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "2mb",
+                  "maximumError": "3mb"
                 },
                 {
                   "type": "anyComponentStyle",

src/app/components/login/login.component.html

@@ -1,43 +1,33 @@
-<div class="form-container">
-  <h1>Formulaire de connexion :</h1>
-
-  <mat-form-field class="form-field">
-    <mat-label>Enter your login</mat-label>
-    <input matInput placeholder="pat" [formControl]="login" required />
-    <mat-error *ngIf="login.invalid"></mat-error>
+<form [formGroup]="loginForm" (ngSubmit)="loginAction()">
+  <mat-form-field>
+    <mat-label>Login</mat-label>
+    <input matInput formControlName="login" required />
+    <mat-error *ngIf="loginForm.controls.login.invalid">
+      Login is required
+    </mat-error>
   </mat-form-field>
 
-  <mat-form-field class="form-field">
-    <mat-label>Enter your password</mat-label>
+  <mat-form-field>
+    <mat-label>Password</mat-label>
     <input
       matInput
       [type]="hide ? 'password' : 'text'"
-      [formControl]="password"
+      formControlName="password"
       required />
     <button
       mat-icon-button
       matSuffix
       (click)="hide = !hide"
-      [attr.aria-label]="'Hide password'"
-      [attr.aria-pressed]="hide">
+      [attr.aria-label]="'Hide password'">
       <mat-icon>{{ hide ? 'visibility_off' : 'visibility' }}</mat-icon>
     </button>
-    <mat-error *ngIf="password.invalid">{{ errorMessage }}</mat-error>
+    <mat-error *ngIf="loginForm.controls.password.invalid">
+      Password is required
+    </mat-error>
   </mat-form-field>
 
-  <button
-    mat-flat-button
-    color="primary"
-    (click)="loginAction()"
-    [disabled]="login.invalid || password.invalid">
-    Se connecter
-  </button>
+  <button mat-raised-button type="submit">Login</button>
 
-  <!-- Message de retour de l'inscription -->
-  <div *ngIf="successLogin" class="success-message">
-    {{ successLogin }}
-  </div>
-  <div *ngIf="errorLogin" class="error-message">
-    {{ errorLogin }}
-  </div>
-</div>
+  <div *ngIf="errorLogin">{{ errorLogin }}</div>
+  <div *ngIf="successLogin">{{ successLogin }}</div>
+</form>

src/app/components/login/login.component.ts

@@ -6,6 +6,8 @@ import {
   FormsModule,
   ReactiveFormsModule,
   NgForm,
+  FormGroup,
+  FormBuilder,
 } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -34,41 +36,37 @@ import { User } from 'src/app/models/user.model';
 export class LoginComponent {
   hide = true;
 
-  email = new FormControl('', [Validators.required, Validators.email]);
-
-  login = new FormControl('', [Validators.required]);
-
-  password = new FormControl('', [Validators.required]);
+  loginForm = this.formBuilder.group({
+    login: ['', Validators.required],
+    password: ['', Validators.required],
+  });
 
   errorMessage = '';
 
   successLogin = '';
   errorLogin = '';
 
-  constructor(private userService: UserService) {
-    merge(this.email.statusChanges, this.email.valueChanges).pipe(
-      takeUntilDestroyed()
-    );
+  constructor(
+    private userService: UserService,
+    private formBuilder: FormBuilder
+  ) {
+    this.userService = userService;
   }
 
   loginAction() {
-    console.log('login user :', this.login.value);
+    const formValue = this.loginForm.value;
 
-    const form: any = {
-      value: {
-        login: this.login.value,
-        password: this.password.value,
-      },
-    };
-    this.userService.loginUser(form).subscribe((response) => {
-      console.log('response :', response);
-      if ((response as any).success) {
-        this.successLogin = 'Vous êtes connecté.';
-        this.errorLogin = '';
-      } else {
-        this.errorLogin = "L'authentification a échoué.";
-        this.successLogin = '';
-      }
-    });
+    this.userService
+      .loginUser(formValue.login!, formValue.password!)
+      .subscribe((response) => {
+        console.log('response :', response);
+        if (response.success) {
+          this.successLogin = 'Vous êtes connecté.';
+          this.errorLogin = '';
+        } else {
+          this.errorLogin = "L'authentification a échoué.";
+          this.successLogin = '';
+        }
+      });
   }
 }

src/app/components/register/register.component.html

@@ -1,4 +1,4 @@
-<div class="form-container">
+<form [formGroup]="registerForm" (ngSubmit)="register()">
   <h1>Formulaire d'inscription :</h1>
 
   <mat-form-field class="form-field">
@@ -6,21 +6,19 @@
     <input
       matInput
       placeholder="pat@example.com"
-      [formControl]="email"
-      (blur)="updateErrorMessage()"
+      formControlName="email"
       required />
-    <mat-error *ngIf="email.invalid">{{ errorMessage }}</mat-error>
+    <mat-error *ngIf="registerForm.controls.email.invalid">{{
+      errorMessage
+    }}</mat-error>
   </mat-form-field>
 
   <mat-form-field class="form-field">
     <mat-label>Enter your login</mat-label>
-    <input
-      matInput
-      placeholder="pat"
-      [formControl]="login"
-      (blur)="updateErrorMessage()"
-      required />
-    <mat-error *ngIf="login.invalid">{{ errorMessage }}</mat-error>
+    <input matInput placeholder="pat" formControlName="login" required />
+    <mat-error *ngIf="registerForm.controls.login.invalid">{{
+      errorMessage
+    }}</mat-error>
   </mat-form-field>
 
   <mat-form-field class="form-field">
@@ -28,8 +26,7 @@
     <input
       matInput
       [type]="hide ? 'password' : 'text'"
-      [formControl]="password"
-      (blur)="updateErrorMessage()"
+      formControlName="password"
       required />
     <button
       mat-icon-button
@@ -39,16 +36,12 @@
       [attr.aria-pressed]="hide">
       <mat-icon>{{ hide ? 'visibility_off' : 'visibility' }}</mat-icon>
     </button>
-    <mat-error *ngIf="password.invalid">{{ errorMessage }}</mat-error>
+    <mat-error *ngIf="registerForm.controls.password.invalid">{{
+      errorMessage
+    }}</mat-error>
   </mat-form-field>
 
-  <button
-    mat-flat-button
-    color="primary"
-    (click)="register()"
-    [disabled]="email.invalid || login.invalid || password.invalid">
-    Créer un compte
-  </button>
+  <button mat-flat-button color="primary" type="submit">Créer un compte</button>
 
   <!-- Message de retour de l'inscription -->
   <div *ngIf="successRegister" class="success-message">
@@ -57,4 +50,4 @@
   <div *ngIf="errorRegister" class="error-message">
     {{ errorRegister }}
   </div>
-</div>
+</form>

src/app/components/register/register.component.ts

@@ -6,6 +6,7 @@ import {
   FormsModule,
   ReactiveFormsModule,
   NgForm,
+  FormBuilder,
 } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -34,54 +35,42 @@ import { User } from 'src/app/models/user.model';
 export class RegisterComponent {
   hide = true;
 
-  email = new FormControl('', [Validators.required, Validators.email]);
-
-  login = new FormControl('', [Validators.required]);
-
-  password = new FormControl('', [Validators.required]);
-
+  registerForm = this.formBuilder.group({
+    email: ['', Validators.required],
+    login: ['', Validators.required],
+    password: ['', Validators.required],
+  });
   errorMessage = '';
 
   successRegister = '';
   errorRegister = '';
 
-  constructor(private userService: UserService) {
-    merge(this.email.statusChanges, this.email.valueChanges)
-      .pipe(takeUntilDestroyed())
-      .subscribe(() => this.updateErrorMessage());
-  }
-
-  updateErrorMessage() {
-    if (this.email.hasError('required')) {
-      this.errorMessage = 'You must enter a value';
-    } else if (this.email.hasError('email')) {
-      this.errorMessage = 'Not a valid email';
-    } else if (this.login.hasError('required')) {
-      this.errorMessage = 'You must enter a login';
-    } else {
-      this.errorMessage = '';
-    }
+  constructor(
+    private userService: UserService,
+    private formBuilder: FormBuilder
+  ) {
+    this.userService = userService;
   }
 
   register() {
-    console.log('registering user :', this.login.value);
+    const formRegisterValue = this.registerForm.value;
 
-    const form: any = {
-      value: {
-        login: this.login.value,
-        password: this.password.value,
-      },
-    };
-    this.userService.postUser(form).subscribe((response) => {
-      console.log('response :', response);
-      if ((response as any).success) {
-        this.successRegister = 'Votre compte a été créé avec succès.';
-        this.errorRegister = '';
-      } else {
-        this.errorRegister =
-          "L'inscription a échoué : un compte avec ce login existe déjà.";
-        this.successRegister = '';
-      }
-    });
+    this.userService
+      .postUser(
+        formRegisterValue.email!,
+        formRegisterValue.login!,
+        formRegisterValue.password!
+      )
+      .subscribe((response) => {
+        console.log('response :', response);
+        if (response.success) {
+          this.successRegister = 'Votre compte a été créé avec succès.';
+          this.errorRegister = '';
+        } else {
+          this.errorRegister =
+            "L'inscription a échoué : un compte avec ce login existe déjà.";
+          this.successRegister = '';
+        }
+      });
   }
 }

src/app/services/user.service.ts

@@ -12,23 +12,28 @@ export class UserService {
 
   constructor(private http: HttpClient) {}
 
-  postUser(form: NgForm): Observable<HttpResponse<Response>> {
-    let body = {
-      login: form.value.login,
-      password: form.value.password,
+  postUser(
+    email: string,
+    login: string,
+    password: string
+  ): Observable<Response> {
+    const body = {
+      email: email,
+      login: login,
+      password: password,
       permissions: 0,
     };
 
-    return this.http.post<any>(`${this.API_URL}/users`, body);
+    return this.http.post<Response>(`${this.API_URL}/users`, body);
   }
 
-  loginUser(form: NgForm): Observable<HttpResponse<Response>> {
-    let body = {
-      login: form.value.login,
-      password: form.value.password,
+  loginUser(login: string, password: string): Observable<Response> {
+    const body = {
+      login: login,
+      password: password,
     };
 
-    return this.http.post<any>(`${this.API_URL}/users/login`, body);
+    return this.http.post<Response>(`${this.API_URL}/users/login`, body);
   }
 }