140 lines
4.8 KiB
HTML
140 lines
4.8 KiB
HTML
<div class="min-h-screen bg-deep-blue flex items-center justify-center">
|
|
<div class="modal-card max-w-md w-full bg-deep-blue rounded-lg shadow-xl p-6 relative">
|
|
<button
|
|
(click)="closeDialog.emit()"
|
|
class="absolute top-4 right-4 text-text-secondary hover:text-white transition-colors"
|
|
aria-label="Dialog schließen"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
<h2 class="modal-heading text-center">Konto erstellen</h2>
|
|
|
|
@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>
|
|
<label for="email" class="text-text-secondary text-sm font-medium mb-1 block">E-Mail</label>
|
|
<input
|
|
id="email"
|
|
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"
|
|
/>
|
|
|
|
@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>
|
|
<label for="username" class="text-text-secondary text-sm font-medium mb-1 block"
|
|
>Benutzername</label
|
|
>
|
|
<input
|
|
id="username"
|
|
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"
|
|
/>
|
|
|
|
@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>
|
|
<label for="password" class="text-text-secondary text-sm font-medium mb-1 block"
|
|
>Passwort</label
|
|
>
|
|
<input
|
|
id="password"
|
|
type="password"
|
|
formControlName="password"
|
|
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"
|
|
placeholder="Erstelle ein Passwort"
|
|
/>
|
|
|
|
@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()"
|
|
class="button-primary w-full py-2.5 rounded"
|
|
>
|
|
{{ isLoading() ? 'Konto wird erstellt...' : 'Registrieren' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="mt-6 text-center">
|
|
<p class="text-sm text-text-secondary">
|
|
Bereits ein Konto?
|
|
<button
|
|
(click)="switchToLogin()"
|
|
class="font-medium text-emerald hover:text-emerald-light transition-all duration-200"
|
|
>
|
|
Anmelden
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|