147 lines
5.8 KiB
HTML
147 lines
5.8 KiB
HTML
<div class="register-container">
|
|
<div class="register-card-wrapper">
|
|
<mat-card class="register-card">
|
|
<mat-card-header>
|
|
<div class="register-header">
|
|
<h1>Ihr Konto erstellen</h1>
|
|
<p>Werden Sie Teil von Tausenden von Fachkräften, die beeindruckende Lebensläufe erstellen</p>
|
|
</div>
|
|
</mat-card-header>
|
|
|
|
<mat-card-content>
|
|
<form [formGroup]="registerForm" (ngSubmit)="onRegister()" class="register-form">
|
|
<!-- Name Fields -->
|
|
<div class="name-row">
|
|
<mat-form-field appearance="outline" class="name-field">
|
|
<mat-label>Vorname</mat-label>
|
|
<input matInput
|
|
formControlName="firstName"
|
|
placeholder="Geben Sie Ihren Vornamen ein"
|
|
autocomplete="given-name">
|
|
<mat-icon matSuffix>person</mat-icon>
|
|
<mat-error *ngIf="hasFieldError('firstName')">
|
|
{{ getFieldError('firstName') }}
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="name-field">
|
|
<mat-label>Nachname</mat-label>
|
|
<input matInput
|
|
formControlName="lastName"
|
|
placeholder="Geben Sie Ihren Nachnamen ein"
|
|
autocomplete="family-name">
|
|
<mat-icon matSuffix>person</mat-icon>
|
|
<mat-error *ngIf="hasFieldError('lastName')">
|
|
{{ getFieldError('lastName') }}
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<!-- Email Field -->
|
|
<mat-form-field appearance="outline" class="full-width">
|
|
<mat-label>E-Mail-Adresse</mat-label>
|
|
<input matInput
|
|
type="email"
|
|
formControlName="email"
|
|
placeholder="Geben Sie Ihre E-Mail-Adresse ein"
|
|
autocomplete="email">
|
|
<mat-icon matSuffix>email</mat-icon>
|
|
<mat-error *ngIf="hasFieldError('email')">
|
|
{{ getFieldError('email') }}
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<!-- Password Field -->
|
|
<mat-form-field appearance="outline" class="full-width">
|
|
<mat-label>Password</mat-label>
|
|
<input matInput
|
|
[type]="hidePassword ? 'password' : 'text'"
|
|
formControlName="password"
|
|
placeholder="Create a secure password"
|
|
autocomplete="new-password">
|
|
<button mat-icon-button
|
|
matSuffix
|
|
type="button"
|
|
(click)="hidePassword = !hidePassword"
|
|
[attr.aria-label]="'Hide password'"
|
|
[attr.aria-pressed]="hidePassword">
|
|
<mat-icon>{{ hidePassword ? 'visibility_off' : 'visibility' }}</mat-icon>
|
|
</button>
|
|
<mat-error *ngIf="hasFieldError('password')">
|
|
{{ getFieldError('password') }}
|
|
</mat-error>
|
|
<mat-hint>Must contain uppercase, lowercase, number, and special character</mat-hint>
|
|
</mat-form-field>
|
|
|
|
<!-- Confirm Password Field -->
|
|
<mat-form-field appearance="outline" class="full-width">
|
|
<mat-label>Confirm Password</mat-label>
|
|
<input matInput
|
|
[type]="hideConfirmPassword ? 'password' : 'text'"
|
|
formControlName="confirmPassword"
|
|
placeholder="Confirm your password"
|
|
autocomplete="new-password">
|
|
<button mat-icon-button
|
|
matSuffix
|
|
type="button"
|
|
(click)="hideConfirmPassword = !hideConfirmPassword"
|
|
[attr.aria-label]="'Hide confirm password'"
|
|
[attr.aria-pressed]="hideConfirmPassword">
|
|
<mat-icon>{{ hideConfirmPassword ? 'visibility_off' : 'visibility' }}</mat-icon>
|
|
</button>
|
|
<mat-error *ngIf="hasFieldError('confirmPassword')">
|
|
{{ getFieldError('confirmPassword') }}
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<!-- Terms and Conditions -->
|
|
<div class="checkbox-section">
|
|
<mat-checkbox formControlName="acceptTerms" class="terms-checkbox">
|
|
I agree to the
|
|
<a href="/terms" target="_blank" class="terms-link">Terms of Service</a>
|
|
and
|
|
<a href="/privacy" target="_blank" class="terms-link">Privacy Policy</a>
|
|
</mat-checkbox>
|
|
<mat-error *ngIf="registerForm.get('acceptTerms')?.hasError('required') && registerForm.get('acceptTerms')?.touched">
|
|
You must accept the terms and conditions
|
|
</mat-error>
|
|
</div>
|
|
|
|
<!-- Newsletter Subscription -->
|
|
<div class="checkbox-section">
|
|
<mat-checkbox formControlName="newsletter" class="newsletter-checkbox">
|
|
Send me tips and updates about resume building
|
|
</mat-checkbox>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<app-loading-button
|
|
text="Create Account"
|
|
loadingText="Creating Account..."
|
|
formId="register-form"
|
|
icon="person_add"
|
|
color="primary"
|
|
size="large"
|
|
[disabled]="registerForm.invalid"
|
|
(clicked)="onRegister()"
|
|
class="register-button">
|
|
</app-loading-button>
|
|
</form>
|
|
</mat-card-content>
|
|
|
|
<mat-card-actions>
|
|
<div class="login-link">
|
|
<p>Already have an account?
|
|
<button mat-button
|
|
color="primary"
|
|
(click)="navigateToLogin()"
|
|
class="login-button">
|
|
Sign In
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</mat-card-actions>
|
|
</mat-card>
|
|
</div>
|
|
</div>
|