init commit

src/app/auth/register/register.component.html

@@ -0,0 +1,146 @@
+<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>