feat(newsletter): V3

src/app/newsletter-subscription/newsletter-subscription.component.html

-<div fxLayout="column" class="content-container full-screen">
-  <div class="section-container" fxLayout="column" fxLayoutAlign="center center">
-    <div class="subscriptionForm">
-      <div *ngIf="subscriptionMod"><h1>Inscription à la newsletter</h1></div>
-      <div *ngIf="!subscriptionMod"><h1>Désabonnement de la newsletter</h1></div>
-      <form [formGroup]="subscriptionForm" (ngSubmit)="onSubmit()">
-        <div class="form-group">
-          <label for="email">Courriel personnel</label>
-          <div fxLayout="row" fxLayoutGap="13px">
-            <input
-              type="email"
-              autocomplete="on"
-              formControlName="email"
-              class="form-input"
-              [ngClass]="{ 'is-invalid': submitted && f.email.errors }"
-            />
-          </div>
-          <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
-            <div *ngIf="f.email.errors.required">L'adresse e-mail est requise</div>
-            <div *ngIf="f.email.errors.pattern">L'adresse e-mail doit être valide</div>
-          </div>
-        </div>
-        <div class="button" fxLayout="row" fxLayoutAlign="space-around center">
-          <app-button [variant]="'secondary'" [label]="'Annuler'" [routerLink]="'/home'" />
-          <app-button
-            [variant]="'primary'"
-            [label]="subscriptionMod ? 'S\'inscrire' : 'Se désinscrire'"
-            [type]="'submit'"
-            [disabled]="loading"
-          />
-        </div>
-      </form>
+<form class="newsletterForm" [formGroup]="subscriptionForm" (ngSubmit)="onSubmit()">
+  <h2 *ngIf="subscriptionMod">Inscription à la newsletter</h2>
+  <h2 *ngIf="!subscriptionMod">Désabonnement de la newsletter</h2>
+
+  <app-input
+    id="email"
+    label="Courriel personnel"
+    autocomplete="on"
+    size="large"
+    [status]="
+      subscriptionForm.get('email').value ? (subscriptionForm.get('email').invalid ? 'error' : 'success') : null
+    "
+    [value]="subscriptionForm.get('email').value"
+    (valueChange)="subscriptionForm.get('email').setValue($event)"
+  />
+
+  <div class="actions">
+    <div class="buttons">
+      <app-button [variant]="'secondary'" [label]="'Annuler'" [routerLink]="'/home'" />
+      <app-button
+        [variant]="'primary'"
+        [label]="subscriptionMod ? 'S\'inscrire' : 'Se désinscrire'"
+        [type]="'submit'"
+        [disabled]="loading"
+      />
     </div>
-    <div *ngIf="!subscriptionMod">
-      <a class="btn-side" routerLink="/newsletter">Inscription</a>
-    </div>
-    <div *ngIf="subscriptionMod">
-      <a class="btn-side" routerLink="/newsletter-unsubscribe"> Désabonnement </a>
+
+    <div class="link">
+      <a *ngIf="!subscriptionMod" routerLink="/newsletter">Inscription</a>
+      <a *ngIf="subscriptionMod" routerLink="/newsletter-unsubscribe">Désabonnement</a>
     </div>
   </div>
-</div>
+</form>

src/app/newsletter-subscription/newsletter-subscription.component.scss

-@import 'color';
+.newsletterForm {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: fit-content;
+  padding: 1rem 0;
+  margin: auto;
 
-.subscriptionPasswordForm {
-  max-width: 500px;
-}
-
-.button {
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
+  .actions {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 
-.form-input {
-  background-color: $white;
-  width: 100%;
-}
+    .buttons {
+      display: flex;
+      gap: 1rem;
+    }
 
-.btn-side {
-  color: #4f4f4f;
-  text-decoration: underline;
+    .link {
+      display: flex;
+      place-content: center;
+    }
+  }
 }