frontend/src/app/pages/register-root/register-root.component.html

@@ -1,7 +1,7 @@
-<div id="background">
+<!-- <div id="background">
   <div class="img-zone">
     <div class="img-wrapper">
-      <h1 (click)="DEBUG_restSignal()">Hi, Welcome to Ticket App.</h1>
+      <h1>Hi, Welcome to Ticket App.</h1>
     </div>
   </div>
   <div class="content-zone">
@@ -57,6 +57,11 @@
           <div class="signup">
             <button pButton type="submit" label="Anmelden"></button>
           </div>
+          <div class="change-mask">
+            <a (click)="switchMask()" (keyup.enter)="switchMask()" tabindex="0">
+              Kein Account? Erstellen Sie jetzt KOSTENFREI einen!
+            </a>
+          </div>
         </form>
       </div>
     }
@@ -98,8 +103,100 @@
               type="submit"
               label="✨ Jetzt KOSTENFREI loslegen ✨"></button>
           </div>
+          <div class="change-mask">
+            <a (click)="switchMask()" (keyup.enter)="switchMask()" tabindex="0">
+              Schon einen Account? Hier einloggen
+            </a>
+          </div>
         </form>
       </div>
     }
   </div>
+</div> -->
+<div id="background">
+  <div class="img-zone">
+    <div class="img-wrapper">
+      <h1>Hi, Welcome to Ticket App.</h1>
+    </div>
+  </div>
+  <div class="content-zone">
+    <h1>
+      @if (this.isSignupSignal()) {
+        Anmelden
+      } @else if (this.isRegisterSignal()) {
+        Registrieren
+      } @else {
+        Erste Schritte
+      }
+    </h1>
+
+    @if (this.isDisplayButtons()) {
+      <div class="action">
+        <button
+          pButton
+          type="button"
+          label="Anmelden"
+          (click)="toggleAction('signup')"></button>
+        <button
+          pButton
+          type="button"
+          label="Registrieren"
+          (click)="toggleAction('register')"></button>
+      </div>
+    }
+
+    <div
+      class="register-wrapper"
+      *ngIf="isSignupSignal() || isRegisterSignal()">
+      <form [formGroup]="form" *ngIf="form" (ngSubmit)="onSubmit()">
+        <div class="e-mail">
+          <div class="label">
+            <label for="email">E-Mail</label>
+          </div>
+          <input
+            pInputText
+            id="email"
+            formControlName="email"
+            aria-describedby="e-mail" />
+        </div>
+        <div class="password">
+          <div class="label">
+            <label for="password">Password</label>
+          </div>
+          <p-password
+            class="custom-p-password"
+            id="password"
+            formControlName="password"
+            aria-describedby="password"
+            [toggleMask]="true"></p-password>
+        </div>
+        @if (this.isRegisterSignal()) {
+          <div class="terms">
+            <p-checkbox
+              formControlName="terms"
+              label="Ich habe die AGB gelesen und stimme zu."
+              name="terms"
+              [binary]="true" />
+          </div>
+        }
+        <div class="signup">
+          <button
+            pButton
+            type="submit"
+            [label]="
+              isSignupSignal() ? 'Anmelden' : '✨ Jetzt KOSTENFREI loslegen ✨'
+            "></button>
+        </div>
+        <div class="change-mask">
+          <a (click)="switchMask()" (keyup.enter)="switchMask()" tabindex="0">
+            @if (this.isSignupSignal()) {
+              Kein Account? Erstellen Sie jetzt KOSTENFREI einen!
+            } @else {
+              Schon einen Account? Hier einloggen
+            }
+          </a>
+        </div>
+      </form>
+    </div>
+  </div>
 </div>

frontend/src/app/pages/register-root/register-root.component.scss

@@ -82,5 +82,13 @@
         min-width: 500px;
       }
     }
+    .change-mask {
+      padding-top: 1.33em;
+      display: flex;
+      justify-content: center;
+      a {
+        cursor: pointer;
+      }
+    }
   }
 }

frontend/src/app/pages/register-root/register-root.component.ts

@@ -8,7 +8,6 @@ import {
   effect,
 } from '@angular/core';
 import {
-  AbstractControl,
   FormBuilder,
   FormControl,
   FormGroup,
@@ -97,14 +96,16 @@ export class RegisterRootComponent implements OnInit {
     }
   }
 
-  public DEBUG_restSignal(): void {
+  public switchMask(): void {
-    this.isRegisterSignal.set(false);
+    this.resetFormValidation();
-    this.isSignupSignal.set(false);
-    this.isDisplayButtons.set(true);
 
-    this.emailInvalid.set(null);
+    if (this.isSignupSignal()) {
-    this.passwordInvalid.set(null);
+      this.isSignupSignal.set(false);
-    this.termsInvalid.set(null);
+      this.isRegisterSignal.set(true);
+    } else if (this.isRegisterSignal()) {
+      this.isSignupSignal.set(true);
+      this.isRegisterSignal.set(false);
+    }
   }
 
   private initializeForm(): void {
@@ -130,10 +131,10 @@ export class RegisterRootComponent implements OnInit {
   }
 
   private setupEmailValueChanges(): void {
-    const emailControl = this.form?.get('email') as AbstractControl;
+    const emailControl = this.form?.get('email');
 
-    emailControl.valueChanges.subscribe((value: string) => {
+    emailControl?.valueChanges.subscribe((value: string) => {
-      if (value.length >= 4) {
+      if (value?.length >= 4) {
         emailControl.setValidators([
           Validators.required,
           customEmailValidator(),
@@ -149,10 +150,10 @@ export class RegisterRootComponent implements OnInit {
   }
 
   private setupPasswordValueChanges(): void {
-    const passwordControl = this.form?.get('password') as AbstractControl;
+    const passwordControl = this.form?.get('password');
 
-    passwordControl.valueChanges.subscribe((value: string) => {
+    passwordControl?.valueChanges.subscribe((value: string) => {
-      if (value.length >= 8) {
+      if (value?.length >= 8) {
         passwordControl.setValidators([
           Validators.required,
           customPasswordValidator(),
@@ -179,6 +180,23 @@ export class RegisterRootComponent implements OnInit {
     });
   }
 
+  private resetFormValidation(): void {
+    ['email', 'password', 'terms'].forEach((controlName: string) => {
+      this.resetControlValidation(controlName);
+    });
+  }
+
+  private resetControlValidation(controlName: string): void {
+    const control = this.form?.get(controlName);
+
+    if (control) {
+      control.reset();
+      control.markAsPristine();
+      control.markAsUntouched();
+      control.updateValueAndValidity();
+    }
+  }
+
   private signin(data: unknown): void {
     console.log(data);
   }

frontend/src/app/shared/validator/email-validator.ts

@@ -4,6 +4,10 @@ export function customEmailValidator(): ValidatorFn {
   return (control: AbstractControl): ValidationErrors | null => {
     const value = control.value;
 
+    if (!value) {
+      return { emailInvalid: true };
+    }
+
     if (value.length < 4) {
       return { emailTooShort: true };
     }

frontend/src/app/shared/validator/password-validator.ts

@@ -4,6 +4,10 @@ export function customPasswordValidator(): ValidatorFn {
   return (control: AbstractControl): ValidationErrors | null => {
     const value = control.value;
 
+    if (!value) {
+      return { passwordTooShort: true };
+    }
+
     return value.length >= 8 ? null : { passwordTooShort: true };
   };
 }