100 lines
3.6 KiB
HTML
100 lines
3.6 KiB
HTML
<div class="min-h-screen bg-deep-blue flex items-center justify-center">
|
|
<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>
|
|
|
|
<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"
|
|
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>
|
|
</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"
|
|
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>
|
|
</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"
|
|
/>
|
|
|
|
<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>
|
|
</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?
|
|
<a
|
|
routerLink="/login"
|
|
class="font-medium text-emerald hover:text-emerald-light transition-all duration-200"
|
|
>
|
|
Anmelden
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|