From 053ac89e3cce7b5f2b3c0e542c1950d171d84537 Mon Sep 17 00:00:00 2001
From: Florian THIERRY <florian_thierry@ext.connect-tech.sncf>
Date: Mon, 21 Oct 2024 14:40:15 +0200
Subject: [PATCH] Misc changes about form inputs.

---
 .../publication-edition.component.html        |  2 +-
 .../submit-button.component.html              |  7 +++--
 .../src/app/pages/login/login.component.html  |  6 ++--
 .../src/app/pages/login/login.component.scss  | 13 --------
 .../src/app/pages/login/login.component.ts    |  3 +-
 frontend/src/app/pages/login/login.service.ts | 30 +++++++++++--------
 .../app/pages/signin/signin.component.html    |  6 ++--
 .../app/pages/signin/signin.component.scss    | 13 --------
 .../src/app/pages/signin/signin.component.ts  |  3 +-
 frontend/src/design_system/button.scss        |  4 +--
 .../design_system/{input.scss => form.scss}   | 15 +++++++++-
 frontend/src/design_system/index.scss         |  2 +-
 frontend/src/locale/messages-fr.json          |  3 +-
 frontend/src/locale/messages.json             |  1 +
 14 files changed, 54 insertions(+), 54 deletions(-)
 rename frontend/src/design_system/{input.scss => form.scss} (75%)

diff --git a/frontend/src/app/components/publication-edition/publication-edition.component.html b/frontend/src/app/components/publication-edition/publication-edition.component.html
index 439d537..d4212c8 100644
--- a/frontend/src/app/components/publication-edition/publication-edition.component.html
+++ b/frontend/src/app/components/publication-edition/publication-edition.component.html
@@ -92,7 +92,7 @@
         </mat-tab>
     </mat-tab-group>
     <footer>
-        <app-submit-button label="Save" [requestPending]="!!(isSaving$ | async)" i18n-label></app-submit-button>
+        <app-submit-button [requestPending]="!!(isSaving$ | async)" i18n>Save</app-submit-button>
         <button type="button" class="secondary" (click)="goPreviousLocation()" i18n>
             Cancel
         </button>
diff --git a/frontend/src/app/components/submit-button/submit-button.component.html b/frontend/src/app/components/submit-button/submit-button.component.html
index b5c47cd..7bd6057 100644
--- a/frontend/src/app/components/submit-button/submit-button.component.html
+++ b/frontend/src/app/components/submit-button/submit-button.component.html
@@ -1,8 +1,11 @@
-<button type="submit" [class]="color" [disabled]="disabled || requestPending" (click)="click.emit()">
+<button type="submit"
+        class="cod-button {{color}}"
+        [disabled]="disabled || requestPending"
+        (click)="click.emit()">
     @if (requestPending) {
         <mat-spinner class="spinner {{color}}" [diameter]="25"></mat-spinner>
     }
     <span>
-        {{ label }}
+        <ng-content/>
     </span>
 </button>
\ No newline at end of file
diff --git a/frontend/src/app/pages/login/login.component.html b/frontend/src/app/pages/login/login.component.html
index 0f5b59d..f4ec81f 100644
--- a/frontend/src/app/pages/login/login.component.html
+++ b/frontend/src/app/pages/login/login.component.html
@@ -1,4 +1,4 @@
-<form [formGroup]="loginForm" (submit)="performLogin()" ngNativeValidate>
+<form [formGroup]="loginForm" (submit)="performLogin()" class="cod-form card" ngNativeValidate>
     <h1 i18n>Login</h1>
     <div class="form-field">
         <mat-icon>mail</mat-icon>
@@ -17,7 +17,7 @@
         <input type="password" id="password" formControlName="password" required />
     </div>
     <div class="actions reversed">
-        <button type="submit" i18n>Send</button>
-        <a [routerLink]="['/signin']" class="button secondary" i18n>Create an account</a>
+        <app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>
+        <a [routerLink]="['/signin']" class="cod-button secondary" i18n>Create an account</a>
     </div>
 </form>
\ No newline at end of file
diff --git a/frontend/src/app/pages/login/login.component.scss b/frontend/src/app/pages/login/login.component.scss
index e643f7c..7aa78e0 100644
--- a/frontend/src/app/pages/login/login.component.scss
+++ b/frontend/src/app/pages/login/login.component.scss
@@ -4,17 +4,4 @@
     justify-content: center;
     align-items: center;
     padding: 1em;
-
-    form {
-        width: 80%;
-        max-width: 20em;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        gap: 1em;
-        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
-        border-radius: .5em;
-        padding: 1em 1.5em;
-        background-color: #ffffff;
-    }
 }
\ No newline at end of file
diff --git a/frontend/src/app/pages/login/login.component.ts b/frontend/src/app/pages/login/login.component.ts
index 08b956d..4994263 100644
--- a/frontend/src/app/pages/login/login.component.ts
+++ b/frontend/src/app/pages/login/login.component.ts
@@ -5,13 +5,14 @@ import { Subscription, debounceTime, map } from 'rxjs';
 import { LoginService } from './login.service';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
+import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component";
 
 @Component({
   selector: 'app-login',
   standalone: true,
   templateUrl: './login.component.html',
   styleUrl: './login.component.scss',
-  imports: [ReactiveFormsModule, MatIconModule, RouterModule],
+  imports: [ReactiveFormsModule, MatIconModule, RouterModule, SubmitButtonComponent],
   providers: [LoginService, MatSnackBarModule]
 })
 export class LoginComponent implements OnInit, OnDestroy {
diff --git a/frontend/src/app/pages/login/login.service.ts b/frontend/src/app/pages/login/login.service.ts
index bc1eff8..cb0478b 100644
--- a/frontend/src/app/pages/login/login.service.ts
+++ b/frontend/src/app/pages/login/login.service.ts
@@ -60,18 +60,24 @@ export class LoginService {
   performLogin(): void {
     const state = this.state;
 
-    // Check state is valid
+    if (this.isStateValid(state)) {
+      this.userRestService
+        .login(state.request)
+        .then((response) => {
+          this.authenticationService.authenticate(response.accessToken, response.refreshToken);
+          this.snackBar.open($localize`Authentication succeeded!`, $localize`Close`, { duration: 5000 });
+          this.router.navigate(['/home']);
+        })
+        .catch((error) => {
+          console.error(error);
+          this.snackBar.open($localize`Authentication failed.`, $localize`Close`, { duration: 5000 });
+        });
+    } else {
+      this.snackBar.open($localize`Please, fill the inputs before send.`, $localize`Close`, { duration: 5000 });
+    }
+  }
 
-    this.userRestService
-      .login(state.request)
-      .then((response) => {
-        this.authenticationService.authenticate(response.accessToken, response.refreshToken);
-        this.snackBar.open($localize`Authentication succeeded!`, $localize`Close`, { duration: 5000 });
-        this.router.navigate(['/home']);
-      })
-      .catch((error) => {
-        console.error(error);
-        this.snackBar.open($localize`Authentication failed.`, $localize`Close`, { duration: 5000 });
-      });
+  isStateValid(state: LoginState): boolean {
+    return !!state.request.email?.trim().length && !!state.request.password?.length;
   }
 }
diff --git a/frontend/src/app/pages/signin/signin.component.html b/frontend/src/app/pages/signin/signin.component.html
index 68fc610..97ee0a4 100644
--- a/frontend/src/app/pages/signin/signin.component.html
+++ b/frontend/src/app/pages/signin/signin.component.html
@@ -1,4 +1,4 @@
-<form [formGroup]="signinForm" (submit)="performSignin()" ngNativeValidate>
+<form [formGroup]="signinForm" (submit)="performSignin()" class="cod-form card" ngNativeValidate>
     <h1 i18n>Signin</h1>
     <div class="form-field">
         <mat-icon>person</mat-icon>
@@ -33,7 +33,7 @@
         <input type="password" id="confirm-password" formControlName="confirmPassword" required />
     </div>
     <div class="actions reversed">
-        <button type="submit" i18n>Send</button>
-        <a [routerLink]="['/login']" class="button secondary" i18n>I already have an account</a>
+        <app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>
+        <a [routerLink]="['/login']" class="cod-button secondary" i18n>I already have an account</a>
     </div>
 </form>
\ No newline at end of file
diff --git a/frontend/src/app/pages/signin/signin.component.scss b/frontend/src/app/pages/signin/signin.component.scss
index e643f7c..7aa78e0 100644
--- a/frontend/src/app/pages/signin/signin.component.scss
+++ b/frontend/src/app/pages/signin/signin.component.scss
@@ -4,17 +4,4 @@
     justify-content: center;
     align-items: center;
     padding: 1em;
-
-    form {
-        width: 80%;
-        max-width: 20em;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        gap: 1em;
-        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
-        border-radius: .5em;
-        padding: 1em 1.5em;
-        background-color: #ffffff;
-    }
 }
\ No newline at end of file
diff --git a/frontend/src/app/pages/signin/signin.component.ts b/frontend/src/app/pages/signin/signin.component.ts
index d2b8005..14fa510 100644
--- a/frontend/src/app/pages/signin/signin.component.ts
+++ b/frontend/src/app/pages/signin/signin.component.ts
@@ -6,11 +6,12 @@ import { Subscription, debounceTime, distinctUntilChanged, map } from 'rxjs';
 import { SigninService } from './signin.service';
 import { LoginService } from '../login/login.service';
 import { FormError } from '../../core/model/FormError';
+import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component";
 
 @Component({
   selector: 'app-signin',
   standalone: true,
-  imports: [ReactiveFormsModule, MatIconModule, RouterModule],
+  imports: [ReactiveFormsModule, MatIconModule, RouterModule, SubmitButtonComponent],
   templateUrl: './signin.component.html',
   styleUrl: './signin.component.scss',
   providers: [SigninService, LoginService]
diff --git a/frontend/src/design_system/button.scss b/frontend/src/design_system/button.scss
index b0c071a..61fdf30 100644
--- a/frontend/src/design_system/button.scss
+++ b/frontend/src/design_system/button.scss
@@ -1,4 +1,4 @@
-button, a.button {
+button.cod-btn, a.cod-button {
     padding: .8em 1.2em;
     border-radius: 10em;
     border: none;
@@ -21,6 +21,6 @@ button, a.button {
     }
 }
 
-a.button {
+a.cod-button {
     text-decoration: none;
 }
\ No newline at end of file
diff --git a/frontend/src/design_system/input.scss b/frontend/src/design_system/form.scss
similarity index 75%
rename from frontend/src/design_system/input.scss
rename to frontend/src/design_system/form.scss
index 2492982..ffc4e80 100644
--- a/frontend/src/design_system/input.scss
+++ b/frontend/src/design_system/form.scss
@@ -1,4 +1,17 @@
-form {
+form.cod-form {
+    &.card {
+        width: 80%;
+        max-width: 20em;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 1em;
+        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+        border-radius: .5em;
+        padding: 1em 1.5em;
+        background-color: #ffffff;
+    }
+
     h1 {
         margin: 0;
     }
diff --git a/frontend/src/design_system/index.scss b/frontend/src/design_system/index.scss
index a6c204c..c878f89 100644
--- a/frontend/src/design_system/index.scss
+++ b/frontend/src/design_system/index.scss
@@ -1,2 +1,2 @@
 @use './button.scss';
-@use './input.scss';
\ No newline at end of file
+@use './form.scss';
\ No newline at end of file
diff --git a/frontend/src/locale/messages-fr.json b/frontend/src/locale/messages-fr.json
index 0ad0f17..c82c0df 100644
--- a/frontend/src/locale/messages-fr.json
+++ b/frontend/src/locale/messages-fr.json
@@ -60,6 +60,7 @@
     "2308975396733519902": "Créer un compte",
     "1037765878727976611": "Connexion réussie",
     "6034686865111167926": "Une erreur est survenue lors de la connexion.",
+    "5304730975301536612": "Veuillez renseigner tous les champs avant de valider.",
     "1041423751558601074": "Vos publications",
     "5463894166935799864": "Rédiger une nouvelle publication",
     "1519054954638405159": "Chargement de la liste de vos publications...",
@@ -90,4 +91,4 @@
     "3461230574295546047": "J'ai déjà un compte",
     "5052944271008222026": "Les mots de passe saisis sont différents."
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/locale/messages.json b/frontend/src/locale/messages.json
index 79b4ea4..d292200 100644
--- a/frontend/src/locale/messages.json
+++ b/frontend/src/locale/messages.json
@@ -60,6 +60,7 @@
     "2308975396733519902": "Create an account",
     "1037765878727976611": "Authentication succeeded!",
     "6034686865111167926": "Authentication failed.",
+    "5304730975301536612": "Please, fill the inputs before send.",
     "1041423751558601074": "Your publications",
     "5463894166935799864": "Add a new publication",
     "1519054954638405159": "Publication loading...",