62 lines
2.4 KiB
HTML
62 lines
2.4 KiB
HTML
<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>
|