85 lines
2.9 KiB
HTML
85 lines
2.9 KiB
HTML
<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>
|