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>

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>

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>

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;
-    }
 }

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 {

frontend/src/app/pages/login/login.service.ts

@@ -60,8 +60,7 @@ export class LoginService {
   performLogin(): void {
     const state = this.state;
 
-    // Check state is valid
-
+    if (this.isStateValid(state)) {
       this.userRestService
         .login(state.request)
         .then((response) => {
@@ -73,5 +72,12 @@ export class LoginService {
           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 });
+    }
+  }
+
+  isStateValid(state: LoginState): boolean {
+    return !!state.request.email?.trim().length && !!state.request.password?.length;
   }
 }

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>

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;
-    }
 }

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]

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;
 }

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;
     }

frontend/src/design_system/index.scss

@@ -1,2 +1,2 @@
 @use './button.scss';
-@use './input.scss';
+@use './form.scss';

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...",

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...",