SZUT/casino
SZUT/casino
Archived
3
1
Fork 0
Code Issues Pull requests 2 Releases 162 Packages 2 Wiki Activity Actions

refactor: immediately display login error

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

34
frontend/src/app/feature/auth/login/login.component.html
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 }}
@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>
@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>
@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>

16
frontend/src/app/feature/auth/login/login.component.ts
View file

@ -1,8 +1,8 @@
import { Component } from '@angular/core';
import {Component, signal} from '@angular/core';
import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import {Router, RouterLink} from '@angular/router';
import {LoginRequest} from '../../../model/auth/LoginRequest';
import { AuthService } from '../../../service/auth.service';
import {AuthService} from '@service/auth.service';
import {CommonModule} from '@angular/common';
@Component({
@ -13,8 +13,8 @@ import { CommonModule } from '@angular/common';
})
export class LoginComponent {
loginForm: FormGroup;
errorMessage = '';
isLoading = false;
errorMessage = signal('');
isLoading = signal(false);
constructor(
private fb: FormBuilder,
@ -36,8 +36,8 @@ export class LoginComponent {
return;
}
this.isLoading = true;
this.errorMessage = '';
this.isLoading.set(true);
this.errorMessage.set('');
const loginRequest: LoginRequest = {
usernameOrEmail: this.form['usernameOrEmail'].value,
@ -49,8 +49,8 @@ export class LoginComponent {
this.router.navigate(['/home']);
},
error: (err) => {
this.isLoading = false;
this.errorMessage = err.error?.message || 'Failed to login. Please check your credentials.';
this.isLoading.set(false);
this.errorMessage.set(err.error?.message || 'Failed to login. Please check your credentials.');
},
});
}