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 #185

Merged
csimonis merged 2 commits from refactor-login into main 2025-05-14 07:59:32 +00:00
Conversation 1 Commits 2 Files changed 2 +31 -27
2 changed files with 31 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

40
frontend/src/app/feature/auth/login/login.component.html
View file

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

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