initial

apps/web/src/app/pages/register.component.ts

@@ -0,0 +1,83 @@
+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),
+    });
+  }
+}