refactor: immediately display login error

This commit is contained in:
Phan Huy Tran 2025-05-14 09:53:17 +02:00
commit 5f9d60d332
2 changed files with 33 additions and 31 deletions

View file

@ -2,9 +2,11 @@
<div class="modal-card max-w-md w-full">
<h2 class="modal-heading text-center">Anmelden</h2>
<div *ngIf="errorMessage" class="bg-accent-red text-white p-4 rounded mb-4">
{{ errorMessage }}
</div>
@if (errorMessage()) {
<div class="bg-accent-red text-white p-4 rounded mb-4">
{{ errorMessage() }}
</div>
}
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="space-y-4">
<div>
@ -19,14 +21,13 @@
placeholder="Gib deinen Benutzernamen oder E-Mail ein"
/>
<div
*ngIf="form['usernameOrEmail'].touched && form['usernameOrEmail'].errors"
class="text-accent-red mt-1 text-sm"
>
<span *ngIf="form['usernameOrEmail'].errors?.['required']">
Benutzername oder E-Mail ist erforderlich
</span>
</div>
@if (form['usernameOrEmail'].touched && form['usernameOrEmail'].errors) {
<div class="text-accent-red mt-1 text-sm">
@if (form['usernameOrEmail'].errors['required']) {
<span>Benutzername oder E-Mail ist erforderlich</span>
}
</div>
}
</div>
<div>
@ -41,21 +42,22 @@
placeholder="Gib dein Passwort ein"
/>
<div
*ngIf="form['password'].touched && form['password'].errors"
class="text-accent-red mt-1 text-sm"
>
<span *ngIf="form['password'].errors?.['required']">Passwort ist erforderlich</span>
</div>
@if (form['password'].touched && form['password'].errors) {
<div class="text-accent-red mt-1 text-sm">
@if (form['password'].errors['required']) {
<span>Passwort ist erforderlich</span>
}
</div>
}
</div>
<div class="pt-2">
<button
type="submit"
[disabled]="loginForm.invalid || isLoading"
[disabled]="loginForm.invalid || isLoading()"
class="button-primary w-full py-2.5 rounded"
>
{{ isLoading ? 'Anmeldung läuft...' : 'Anmelden' }}
{{ isLoading() ? 'Anmeldung läuft...' : 'Anmelden' }}
</button>
</div>
</form>