first commit

src/app/auth/pages/login/login.html

@@ -0,0 +1,84 @@
+<div class="rounded-2xl p-6 shadow backdrop-blur animate-glow">
+  <div class="flex items-center gap-3">
+    <app-pmu-logo variant="default" />
+    <h1 class="text-xl font-semibold">Connexion</h1>
+  </div>
+
+  <p class="mt-1 text-sm">Accédez à votre espace PMU MALI</p>
+
+  <form class="mt-6 space-y-4" (ngSubmit)="submit()" [formGroup]="form">
+    <!-- Identifiant -->
+    <div>
+      <label class="text-sm">Identifiant</label>
+      <div class="relative mt-1">
+        <input
+          class="w-full rounded-md border p-2 bg-transparent outline-none focus:ring-2 focus:ring-[var(--ring)] placeholder:text-black/50 dark:placeholder:text-white/50"
+          type="text"
+          autocomplete="username"
+          placeholder="ex: AGENT001"
+          formControlName="identifiant"
+        />
+      </div>
+      @if (form.controls['identifiant'].touched && form.controls['identifiant'].invalid) {
+      <div class="mt-1 text-xs text-red-600">Identifiant requis</div>
+      }
+    </div>
+
+    <!-- Password -->
+    <div>
+      <label class="text-sm">Mot de passe</label>
+      <div class="relative mt-1">
+        <input
+          class="w-full rounded-md border p-2 pr-10 bg-transparent outline-none focus:ring-2 focus:ring-[var(--ring)] placeholder:text-black/60 dark:placeholder:text-white/60"
+          [type]="showPassword ? 'text' : 'password'"
+          autocomplete="current-password"
+          formControlName="password"
+          placeholder="••••••••"
+        />
+        <button
+          type="button"
+          class="absolute inset-y-0 right-2 my-auto text-sm opacity-70 hover:opacity-100"
+          (click)="showPassword = !showPassword"
+          aria-label="Afficher le mot de passe"
+        >
+          {{ showPassword ? 'Masquer' : 'Afficher' }}
+        </button>
+      </div>
+      @if (form.controls['password'].touched && form.controls['password'].invalid) {
+      <div class="mt-1 text-xs text-red-600">8 caractères minimum</div>
+      }
+    </div>
+
+    <!-- Submit -->
+    <button
+      type="submit"
+      class="inline-flex w-full items-center justify-center rounded-md cursor-pointer px-3 py-2 text-sm font-medium text-white bg-pmu-vert transition hover:opacity-90 disabled:opacity-40"
+      [disabled]="loading() || !form.valid"
+    >
+      @if (!loading()) {
+      <span>Se connecter</span>
+      } @if (loading()) {
+      <span class="inline-flex items-center gap-2">
+        <svg class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+          <circle
+            class="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          />
+          <path
+            class="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 0 1 8-8v4A4 4 0 0 0 8 12H4z"
+          />
+        </svg>
+        Connexion…
+      </span>
+      }
+    </button>
+  </form>
+
+  <div class="mt-6 text-xs">Plateforme de Jeux de la PMU.</div>
+</div>