first commit

myteamwallet_frontend_modern/src/app/features/auth/register/register.html

@@ -0,0 +1,61 @@
+<div class="auth-page">
+  <mat-card class="auth-card">
+    <mat-card-header
+      ><mat-card-title>TeamWallet</mat-card-title
+      ><mat-card-subtitle>Konto erstellen</mat-card-subtitle></mat-card-header
+    >
+    <mat-card-content>
+      @if (loadingInvitation()) {
+        <div class="state"><mat-spinner diameter="32" /><span>Einladung wird geprüft …</span></div>
+      } @else if (invitation(); as invite) {
+        <div class="invite-summary">
+          <strong>{{ invite.teamName }}</strong
+          ><span>Du registrierst dich als {{ invite.playerName }}.</span>
+        </div>
+        <form [formGroup]="form" (ngSubmit)="onSubmit()">
+          <mat-form-field appearance="outline"
+            ><mat-label>E-Mail</mat-label
+            ><input matInput type="email" formControlName="email" autocomplete="email"
+          /></mat-form-field>
+          <div class="name-row">
+            <mat-form-field appearance="outline"
+              ><mat-label>Vorname</mat-label
+              ><input matInput formControlName="firstName" autocomplete="given-name"
+            /></mat-form-field>
+            <mat-form-field appearance="outline"
+              ><mat-label>Nachname</mat-label
+              ><input matInput formControlName="lastName" autocomplete="family-name"
+            /></mat-form-field>
+          </div>
+          <mat-form-field appearance="outline"
+            ><mat-label>Passwort</mat-label
+            ><input matInput type="password" formControlName="password" autocomplete="new-password"
+          /></mat-form-field>
+          <mat-form-field appearance="outline"
+            ><mat-label>Passwort wiederholen</mat-label
+            ><input
+              matInput
+              type="password"
+              formControlName="passwordConfirmation"
+              autocomplete="new-password"
+          /></mat-form-field>
+          @if (errorMessage()) {
+            <p class="error">{{ errorMessage() }}</p>
+          }
+          <button mat-flat-button type="submit" [disabled]="form.invalid || isSubmitting()">
+            @if (isSubmitting()) {
+              <mat-spinner diameter="20" />
+            } @else {
+              Konto erstellen
+            }
+          </button>
+        </form>
+      } @else {
+        <div class="state error">
+          <span>{{ errorMessage() }}</span
+          ><a mat-button routerLink="/auth/login">Zur Anmeldung</a>
+        </div>
+      }
+    </mat-card-content>
+  </mat-card>
+</div>