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

refactor: throw proper error on registration conflict, handle properly

Browse source
This commit is contained in:
Phan Huy Tran 2025-05-14 10:32:44 +02:00
commit b4351ceaea
4 changed files with 93 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

83
frontend/src/app/feature/auth/register/register.component.html
View file

@ -2,9 +2,11 @@
<div class="modal-card max-w-md w-full">
<h2 class="modal-heading text-center">Konto erstellen</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]="registerForm" (ngSubmit)="onSubmit()" class="space-y-4">
<div>
@ -14,18 +16,26 @@
type="email"
formControlName="email"
class="w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200"
[ngClass]="{ 'border-accent-red': fieldErrors()['email'] }"
placeholder="Gib deine E-Mail-Adresse ein"
/>
<div
*ngIf="form['email'].touched && form['email'].errors"
class="text-accent-red mt-1 text-sm"
>
<span *ngIf="form['email'].errors?.['required']">E-Mail ist erforderlich</span>
<span *ngIf="form['email'].errors?.['email']">
Bitte gib eine gültige E-Mail-Adresse ein
</span>
</div>
@if (fieldErrors()['email']) {
<div class="text-accent-red mt-1 text-sm">
{{ fieldErrors()['email'] }}
</div>
}
@if (!fieldErrors()['email'] && form['email'].touched && form['email'].errors) {
<div class="text-accent-red mt-1 text-sm">
@if (form['email'].errors['required']) {
<span>E-Mail ist erforderlich</span>
}
@if (form['email'].errors['email']) {
<span>Bitte gib eine gültige E-Mail-Adresse ein</span>
}
</div>
}
</div>
<div>
@ -37,18 +47,26 @@
type="text"
formControlName="username"
class="w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200"
[ngClass]="{ 'border-accent-red': fieldErrors()['username'] }"
placeholder="Wähle einen Benutzernamen"
/>
<div
*ngIf="form['username'].touched && form['username'].errors"
class="text-accent-red mt-1 text-sm"
>
<span *ngIf="form['username'].errors?.['required']">Benutzername ist erforderlich</span>
<span *ngIf="form['username'].errors?.['minlength']">
Benutzername muss mindestens 3 Zeichen haben
</span>
</div>
@if (fieldErrors()['username']) {
<div class="text-accent-red mt-1 text-sm">
{{ fieldErrors()['username'] }}
</div>
}
@if (!fieldErrors()['username'] && form['username'].touched && form['username'].errors) {
<div class="text-accent-red mt-1 text-sm">
@if (form['username'].errors['required']) {
<span>Benutzername ist erforderlich</span>
}
@if (form['username'].errors['minlength']) {
<span>Benutzername muss mindestens 3 Zeichen haben</span>
}
</div>
}
</div>
<div>
@ -63,24 +81,25 @@
placeholder="Erstelle ein Passwort"
/>
<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>
<span *ngIf="form['password'].errors?.['minlength']">
Passwort muss mindestens 6 Zeichen haben
</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>
}
@if (form['password'].errors['minlength']) {
<span>Passwort muss mindestens 6 Zeichen haben</span>
}
</div>
}
</div>
<div class="pt-2">
<button
type="submit"
[disabled]="registerForm.invalid || isLoading"
[disabled]="registerForm.invalid || isLoading()"
class="button-primary w-full py-2.5 rounded"
>
{{ isLoading ? 'Konto wird erstellt...' : 'Registrieren' }}
{{ isLoading() ? 'Konto wird erstellt...' : 'Registrieren' }}
</button>
</div>
</form>