Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 29x 58x 58x 29x 58x 29x 58x 29x 58x 58x 58x 58x 29x 29x 58x 58x 58x 58x 29x 29x 58x 58x 58x 58x 29x 29x 58x 29x 58x 58x 58x 29x 58x 58x 58x 29x 29x | <div class="page-container">
<section class="register-card">
@if (registrationSucceeded()) {
<h1>{{ 'auth.register.welcome' | transloco }}</h1>
<p class="subtitle">
{{ 'auth.register.successSubtitle' | transloco }}
</p>
<p class="feedback success-box">
{{ 'auth.register.redirectCountdown' | transloco : { seconds: redirectCountdown() } }}
</p>
} @else {
<h1>{{ 'auth.register.title' | transloco }}</h1>
<p class="subtitle">
{{ 'auth.register.subtitle' | transloco }}
</p>
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()" novalidate>
<div class="field-group">
<label for="email">{{ 'auth.register.email' | transloco }}</label>
<input id="email" type="email" formControlName="email" [placeholder]="'auth.register.emailPlaceholder' | transloco"
autocomplete="email" [class.invalid]="isInvalid('email')" />
@if (isInvalid('email')) {
<small class="error">{{ 'auth.register.emailInvalid' | transloco }}</small>
}
</div>
<div class="field-group">
<label for="username">{{ 'auth.register.username' | transloco }}</label>
<input id="username" type="text" formControlName="username" [placeholder]="'auth.register.usernamePlaceholder' | transloco"
autocomplete="username" [class.invalid]="isInvalid('username')" />
@if (isInvalid('username')) {
<small class="error">{{ 'auth.register.usernameInvalid' | transloco }}</small>
}
</div>
<div class="field-group">
<label for="password">{{ 'auth.register.password' | transloco }}</label>
<input id="password" type="password" formControlName="password" [placeholder]="'auth.register.passwordPlaceholder' | transloco"
autocomplete="new-password" [class.invalid]="isInvalid('password')" />
@if (isInvalid('password')) {
<small class="error">{{ 'auth.register.passwordInvalid' | transloco }}</small>
}
</div>
<div class="field-group">
<label for="confirmPassword">{{ 'auth.register.confirmPassword' | transloco }}</label>
<input id="confirmPassword" type="password" formControlName="confirmPassword"
[placeholder]="'auth.register.confirmPasswordPlaceholder' | transloco" autocomplete="new-password"
[class.invalid]="isInvalid('confirmPassword') || !passwordsMatch()" />
@if (isInvalid('confirmPassword') || !passwordsMatch()) {
<small class="error">{{ 'auth.register.confirmPasswordInvalid' | transloco }}</small>
}
</div>
@if (submitError()) {
<p class="feedback error-box">{{ submitError() }}</p>
}
<button type="submit" class="register-btn" [disabled]="isSubmitting()">
{{ isSubmitting() ? ('auth.register.submitting' | transloco) : ('auth.register.submit' | transloco) }}
</button>
</form>
}
</section>
</div> |