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

@@ -9,6 +9,7 @@ import {
 } from '@angular/core';
 import { InputTextModule } from 'primeng/inputtext';
 import {
+  AbstractControl,
   FormBuilder,
   FormControl,
   FormGroup,
@@ -19,7 +20,7 @@ import {
 import { ButtonModule } from 'primeng/button';
 import { CheckboxModule } from 'primeng/checkbox';
 import { PasswordModule } from 'primeng/password';
-import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+import { customEmailValidator, customPasswordValidator } from '../../shared/validator';
 
 type AuthAction = 'register' | 'signup';
 
@@ -66,41 +67,8 @@ export class RegisterRootComponent implements OnInit {
   }
 
   public ngOnInit(): void {
-    this.form = this.formBuilder.group({
+    this.initializeForm();
-      email: ['', {
+    this.setupValueChanges();
-        validators: [Validators.required, this.customEmailValidator()],
-        updateOn: 'change'
-      }],
-      password: ['', {
-        validators: [Validators.required, this.passwordValidator()],
-        updateOn: 'change'
-      }],
-      terms: [false, [Validators.requiredTrue]],
-    });
-
-    this.form.get('email')?.valueChanges.subscribe(value => {
-      const emailControl = this.form?.get('email');
-      if (emailControl) {
-        if (value.length >= 4) {
-          emailControl.setValidators([Validators.required, this.customEmailValidator()]);
-        } else {
-          emailControl.setValidators([Validators.required, Validators.minLength(4)]);
-        }
-        emailControl.updateValueAndValidity({ emitEvent: false });
-      }
-    });
-
-    this.form?.get('password')?.valueChanges.subscribe(value => {
-      const passwordControl = this.form?.get('password');
-      if (passwordControl) {
-        if (value.length >= 8) {
-          passwordControl.setValidators([Validators.required, this.passwordValidator()]);
-        } else {
-          passwordControl.setValidators([Validators.required, Validators.minLength(8)]);
-        }
-        passwordControl.updateValueAndValidity({ emitEvent: false });
-      }
-    });
   }
 
   public toggleAction(action: AuthAction): void {
@@ -113,41 +81,18 @@ export class RegisterRootComponent implements OnInit {
     }
     this.isDisplayButtons.set(false);
   }
-  onSubmit() {
-    const emailControl = this.form?.get('email');
-    const passwordControl = this.form?.get('password');
-    const termsControl = this.form?.get('terms');
 
-    // Markieren des E-Mail-Feldes als 'touched' und 'dirty', falls es leer ist oder ungültig
+  public onSubmit(): void {
-    if (!emailControl?.value || emailControl?.invalid) {
+    this.markControlsAsTouchedAndDirty(['email', 'password', 'terms']);
-      emailControl?.markAsTouched();
-      emailControl?.markAsDirty();
-      emailControl?.updateValueAndValidity();
-    }
-
-    // Markieren des Passwort-Feldes als 'touched' und 'dirty', falls es leer ist oder ungültig
-    if (!passwordControl?.value || passwordControl.invalid) {
-      passwordControl?.markAsTouched();
-      passwordControl?.markAsDirty();
-      passwordControl?.updateValueAndValidity();
-    }
-
-    if(!termsControl?.value || termsControl.invalid) {
-      termsControl?.markAsTouched();
-      termsControl?.markAsDirty();
-      termsControl?.updateValueAndValidity();
-    }
-
-    // Formularvalidierung
     if (this.form?.valid) {
-      // Logik zum Absenden des Formulars
+      if (this.isRegisterSignal()) {
-      console.log('Form submitted:', this.form.value);
+        this.register(this.form.value);
-    } else {
+      } else {
-      console.log('Form is invalid');
+        this.signin(this.form.value);
+      }
     }
   }
 
-
   public DEBUG_restSignal(): void {
     this.isRegisterSignal.set(false);
     this.isSignupSignal.set(false);
@@ -158,30 +103,69 @@ export class RegisterRootComponent implements OnInit {
     this.termsInvalid.set(null);
   }
 
-  public customEmailValidator(): ValidatorFn {
+  private initializeForm(): void {
-    return (control: AbstractControl): ValidationErrors | null => {
+    this.form = this.formBuilder.group({
-      const value = control.value;
+      email: new FormControl('', {
-      if (value.length < 4) {
+        validators: [Validators.required, customEmailValidator()],
-        console.log(value.length);
+        updateOn: 'change'
-        return { emailTooShort: true };
+      }),
+      password: new FormControl('', {
+        validators: [Validators.required, customPasswordValidator()],
+        updateOn: 'change'
+      }),
+      terms: new FormControl(false, {
+        validators: [Validators.requiredTrue],
+        updateOn: 'change'
+      })
+    });
+  }
+
+  private setupValueChanges(): void {
+    this.setupEmailValueChanges();
+    this.setupPasswordValueChanges();
+  }
+
+  private setupEmailValueChanges(): void {
+    const emailControl = this.form?.get('email') as AbstractControl;
+    emailControl.valueChanges.subscribe((value: string) => {
+      if (value.length >= 4) {
+        emailControl.setValidators([Validators.required, customEmailValidator()]);
+      } else {
+        emailControl.setValidators([Validators.required, Validators.minLength(4)]);
       }
-      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      emailControl.updateValueAndValidity({ emitEvent: false });
-      return emailPattern.test(value) ? null : { emailInvalid: true };
+    });
-    };
+  }
+  private setupPasswordValueChanges(): void {
+    const passwordControl = this.form?.get('password') as AbstractControl;
+    passwordControl.valueChanges.subscribe((value: string) => {
+      if (value.length >= 8) {
+        passwordControl.setValidators([Validators.required, customPasswordValidator()]);
+      } else {
+        passwordControl.setValidators([Validators.required, Validators.minLength(8)]);
+      }
+      passwordControl.updateValueAndValidity({ emitEvent: false });
+    });
   }
 
-  public passwordValidator(): ValidatorFn {
+  private markControlsAsTouchedAndDirty(controlNames: string[]): void {
-    return (control: AbstractControl): ValidationErrors | null => {
+    controlNames.forEach((controlName: string) => {
-      const value = control.value;
+      const control = this.form?.get(controlName);
-      return value.length >= 8 ? null : { passwordTooShort: true };
+      if (control) {
-    };
+        control.markAsTouched();
+        control.markAsDirty();
+        control.updateValueAndValidity();
+      }
+    });
   }
 
-  private signin(): void {
+  private signin(data: unknown): void {
     console.log('Signin...');
+    console.log(data);
   }
 
-  private register(): void {
+  private register(data: unknown): void {
     console.log('Register...');
+    console.log(data);
   }
 }

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

@@ -0,0 +1,12 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+export function customEmailValidator(): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = control.value;
+    if (value.length < 4) {
+      return { emailTooShort: true };
+    }
+    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailPattern.test(value) ? null : { emailInvalid: true };
+  };
+}

frontend/src/app/shared/validator/index.ts

@@ -0,0 +1,2 @@
+export * from './email-validator';
+export * from './password-validator'

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

@@ -0,0 +1,8 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+export function customPasswordValidator(): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = control.value;
+    return value.length >= 8 ? null : { passwordTooShort: true };
+  };
+}