84 lines
2.7 KiB
TypeScript
84 lines
2.7 KiB
TypeScript
import { HttpClient } from '@angular/common/http';
|
|
import { Component, Inject, signal } from '@angular/core';
|
|
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
import { RouterLink } from '@angular/router';
|
|
import { apiErrorMessage } from '../shared/api-error';
|
|
import { API_BASE_URL } from '../shared/api-base-url';
|
|
|
|
@Component({
|
|
selector: 'app-register',
|
|
imports: [ReactiveFormsModule, RouterLink],
|
|
template: `
|
|
<section class="panel wide">
|
|
<h1>Registrieren</h1>
|
|
<form [formGroup]="form" (ngSubmit)="submit()">
|
|
<div class="grid">
|
|
<label>
|
|
Benutzername
|
|
<input formControlName="username" autocomplete="username">
|
|
</label>
|
|
<label>
|
|
Anzeigename
|
|
<input formControlName="displayName" autocomplete="name">
|
|
</label>
|
|
</div>
|
|
<label>
|
|
E-Mail
|
|
<input type="email" formControlName="email" autocomplete="email">
|
|
</label>
|
|
<label>
|
|
Passwort
|
|
<input type="password" formControlName="password" autocomplete="new-password">
|
|
</label>
|
|
@if (message()) {
|
|
<p class="message" [class.error]="failed()">{{ message() }}</p>
|
|
}
|
|
<button type="submit" [disabled]="form.invalid || loading()">
|
|
{{ loading() ? 'Registrierung laeuft' : 'Registrieren' }}
|
|
</button>
|
|
</form>
|
|
<div class="actions">
|
|
<a routerLink="/login">Zum Login</a>
|
|
</div>
|
|
</section>
|
|
`,
|
|
})
|
|
export class RegisterComponent {
|
|
readonly loading = signal(false);
|
|
readonly failed = signal(false);
|
|
readonly message = signal('');
|
|
readonly form;
|
|
|
|
constructor(
|
|
private readonly fb: FormBuilder,
|
|
private readonly http: HttpClient,
|
|
@Inject(API_BASE_URL) private readonly apiBaseUrl: string,
|
|
) {
|
|
this.form = this.fb.nonNullable.group({
|
|
username: ['', [Validators.required, Validators.minLength(3), Validators.pattern(/^[a-zA-Z0-9._-]+$/)]],
|
|
displayName: ['', Validators.required],
|
|
email: ['', [Validators.required, Validators.email]],
|
|
password: ['', [Validators.required, Validators.minLength(12)]],
|
|
});
|
|
}
|
|
|
|
submit(): void {
|
|
if (this.form.invalid) {
|
|
return;
|
|
}
|
|
|
|
this.loading.set(true);
|
|
this.failed.set(false);
|
|
this.message.set('');
|
|
this.http.post<{ message: string }>(`${this.apiBaseUrl}/registration`, this.form.getRawValue()).subscribe({
|
|
next: (response) => this.message.set(response.message),
|
|
error: (error) => {
|
|
this.failed.set(true);
|
|
this.message.set(apiErrorMessage(error));
|
|
this.loading.set(false);
|
|
},
|
|
complete: () => this.loading.set(false),
|
|
});
|
|
}
|
|
}
|