feat(frontend): design système - tokens, composants ui et restylage des pages

Centralise les couleurs/rayons/espacements dispersés en dur dans chaque page (login, change-password, dashboard) en tokens CSS partagés, ajoute un petit set de composants standalone réutilisables (ev-button, ev-card, ev-alert, ev-badge) et intègre le logo EnerVision en en-tête des pages ainsi que dans Swagger/ReDoc côté backend. Refs #91
2026-09-17 11:14:02 +02:00
parent 3692d486c6
commit 9c78c6dc38
35 changed files with 724 additions and 288 deletions
@@ -1,36 +1,41 @@
 <div class="auth-page">
-  <form class="auth-card" [formGroup]="form" (ngSubmit)="onSubmit()">
-    <h1>Connexion</h1>
-    <p class="auth-subtitle">Accédez à votre espace EnerVision</p>
+  <form class="auth-card-wrapper" [formGroup]="form" (ngSubmit)="onSubmit()">
+    <ev-card>
+      <img src="logo.png" alt="EnerVision" class="auth-logo" />
+      <h1>Connexion</h1>
+      <p class="auth-subtitle">Accédez à votre espace EnerVision</p>

-    <label for="email">Email</label>
-    <input
-      id="email"
-      type="email"
-      formControlName="email"
-      autocomplete="username"
-      placeholder="vous@enervision.fr"
-    />
+      <label class="form-label" for="email">Email</label>
+      <input
+        id="email"
+        class="form-input"
+        type="email"
+        formControlName="email"
+        autocomplete="username"
+        placeholder="vous@enervision.fr"
+      />

-    <label for="password">Mot de passe</label>
-    <input
-      id="password"
-      type="password"
-      formControlName="password"
-      autocomplete="current-password"
-    />
+      <label class="form-label" for="password">Mot de passe</label>
+      <input
+        id="password"
+        class="form-input"
+        type="password"
+        formControlName="password"
+        autocomplete="current-password"
+      />

-    @if (errorMessage()) {
-      <p class="auth-error">
-        {{ errorMessage() }}
-        @if (retryAfterSeconds(); as seconds) {
-          (réessayez dans {{ seconds }}s)
-        }
-      </p>
-    }
+      @if (errorMessage()) {
+        <ev-alert severity="danger">
+          {{ errorMessage() }}
+          @if (retryAfterSeconds(); as seconds) {
+            (réessayez dans {{ seconds }}s)
+          }
+        </ev-alert>
+      }

-    <button type="submit" [disabled]="form.invalid || isLoading()">
-      {{ isLoading() ? 'Connexion...' : 'Se connecter' }}
-    </button>
+      <ev-button type="submit" [disabled]="form.invalid || isLoading()">
+        {{ isLoading() ? 'Connexion...' : 'Se connecter' }}
+      </ev-button>
+    </ev-card>
  </form>
 </div>