refactor: immediately display login error
This commit is contained in:
parent
b37e48da2e
commit
5f9d60d332
2 changed files with 33 additions and 31 deletions
|
@ -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>
|
||||
|
|
Reference in a new issue