d049048206
All checks were successful
CI / Get Changed Files (pull_request) Successful in 10s
CI / oxlint (pull_request) Successful in 26s
CI / Docker frontend validation (pull_request) Successful in 29s
CI / eslint (pull_request) Successful in 38s
CI / prettier (pull_request) Successful in 41s
CI / test-build (pull_request) Successful in 1m6s
CI / Checkstyle Main (pull_request) Successful in 1m29s
CI / Docker backend validation (pull_request) Successful in 1m27s
110 lines
3.6 KiB
HTML
110 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 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">Anmelden</h2>
|
|
|
|
@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>
|
|
<label for="usernameOrEmail" class="text-text-secondary text-sm font-medium mb-1 block">
|
|
Benutzername oder E-Mail
|
|
</label>
|
|
<input
|
|
id="usernameOrEmail"
|
|
type="text"
|
|
formControlName="usernameOrEmail"
|
|
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 deinen Benutzernamen oder E-Mail ein"
|
|
/>
|
|
|
|
@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>
|
|
<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="Gib dein Passwort ein"
|
|
/>
|
|
|
|
@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()"
|
|
class="button-primary w-full py-2.5 rounded"
|
|
>
|
|
{{ isLoading() ? 'Anmeldung läuft...' : 'Anmelden' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="mt-6 text-center">
|
|
<p class="text-sm text-text-secondary">
|
|
Passwort vergessen?
|
|
<button
|
|
(click)="switchToForgotPassword()"
|
|
class="font-medium text-emerald hover:text-emerald-light transition-all duration-200"
|
|
>
|
|
Passwort zurücksetzen
|
|
</button>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-6 text-center">
|
|
<p class="text-sm text-text-secondary">
|
|
Noch kein Konto?
|
|
<button
|
|
(click)="switchToRegister()"
|
|
class="font-medium text-emerald hover:text-emerald-light transition-all duration-200"
|
|
>
|
|
Registrieren
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|