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

@@ -41,20 +41,18 @@
               pInputText
               id="email"
               formControlName="email"
-              [ngClass]="{ 'ng-invalid ng-dirty': emailInvalid() }"
               aria-describedby="e-mail" />
           </div>
           <div class="password">
             <div class="label">
               <label for="password">Password</label>
             </div>
-            <input
-              pInputText
+            <p-password
+              class="custom-p-password"
               id="password"
               formControlName="password"
               aria-describedby="password"
-              [ngClass]="{ 'ng-invalid ng-dirty': passwordInvalid() }"
-              type="password" />
+              [toggleMask]="true"></p-password>
           </div>
           <div class="signup">
             <button pButton type="submit" label="Anmelden"></button>
@@ -74,27 +72,24 @@
               pInputText
               id="email"
               formControlName="email"
-              [ngClass]="{ 'ng-invalid ng-dirty': emailInvalid() }"
               aria-describedby="e-mail" />
           </div>
           <div class="password">
             <div class="label">
               <label for="password">Password</label>
             </div>
-            <input
-              pInputText
+            <p-password
+              class="custom-p-password"
               id="password"
               formControlName="password"
               aria-describedby="password"
-              [ngClass]="{ 'ng-invalid ng-dirty': passwordInvalid() }"
-              type="password" />
+              [toggleMask]="true"></p-password>
           </div>
           <div class="terms">
             <p-checkbox
               formControlName="terms"
               label="Ich habe die AGB gelesen und stimme zu."
               name="terms"
-              [ngClass]="{ 'ng-invalid ng-dirty': termsInvalid() }"
               [binary]="true" />
           </div>
           <div class="signup">

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

@@ -62,6 +62,9 @@
       input {
         min-width: 500px;
       }
+      ::ng-deep p-password.custom-p-password div input {
+        min-width: 500px;
+      }
     }
 
     .terms {
@@ -81,12 +84,3 @@
     }
   }
 }
-
-// .ng-invalid.ng-dirty {
-//   border: 1px solid red;
-// }
-
-// .error {
-//   color: red;
-//   font-size: 12px;
-// }

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

@@ -6,7 +6,6 @@ import {
   WritableSignal,
   signal,
   effect,
-  DestroyRef,
 } from '@angular/core';
 import { InputTextModule } from 'primeng/inputtext';
 import {
@@ -19,6 +18,7 @@ import {
 } from '@angular/forms';
 import { ButtonModule } from 'primeng/button';
 import { CheckboxModule } from 'primeng/checkbox';
+import { PasswordModule } from 'primeng/password';
 
 type AuthAction = 'register' | 'signup';
 
@@ -32,6 +32,7 @@ type AuthAction = 'register' | 'signup';
     ReactiveFormsModule,
     ButtonModule,
     CheckboxModule,
+    PasswordModule,
   ],
   templateUrl: './register-root.component.html',
   styleUrl: './register-root.component.scss',
@@ -44,14 +45,11 @@ export class RegisterRootComponent implements OnInit {
   public isSignupSignal: WritableSignal<boolean> = signal(false);
   public isDisplayButtons: WritableSignal<boolean> = signal(true);
 
-  public emailInvalid: WritableSignal<boolean | null> = signal(null);
-  public passwordInvalid: WritableSignal<boolean | null> = signal(null);
-  public termsInvalid: WritableSignal<boolean | null> = signal(null);
+  public emailInvalid: WritableSignal<string | null> = signal(null);
+  public passwordInvalid: WritableSignal<string | null> = signal(null);
+  public termsInvalid: WritableSignal<string | null> = signal(null);
 
-  constructor(
-    private readonly formBuilder: FormBuilder,
-    private readonly destroyRef: DestroyRef
-  ) {
+  constructor(private readonly formBuilder: FormBuilder) {
     effect(() => {
       if (this.form) {
         if (this.isRegisterSignal()) {
@@ -68,8 +66,8 @@ export class RegisterRootComponent implements OnInit {
 
   public ngOnInit(): void {
     this.form = this.formBuilder.group({
-      email: ['', [Validators.required, Validators.email]],
-      password: ['', [Validators.required, Validators.minLength(6)]],
+      email: ['', [Validators.required]],
+      password: ['', [Validators.required, Validators.minLength(8)]],
       terms: [false, [Validators.requiredTrue]],
     });
   }
@@ -86,12 +84,9 @@ export class RegisterRootComponent implements OnInit {
   }
 
   public onSubmit(): void {
-    this.form?.markAllAsTouched();
-    this.updateFieldInvalidity();
-
-    if (this.isSignupSignal() && this.form?.valid) {
+    if (this.form && this.isSignupSignal() && this.form.valid) {
       this.signin();
-    } else if (this.isRegisterSignal() && this.form?.valid) {
+    } else if (this.form && this.isRegisterSignal() && this.form.valid) {
       this.register();
     }
   }
@@ -101,20 +96,9 @@ export class RegisterRootComponent implements OnInit {
     this.isSignupSignal.set(false);
     this.isDisplayButtons.set(true);
 
-    this.emailInvalid.set(false);
-    this.passwordInvalid.set(false);
-    this.termsInvalid.set(false);
-  }
-
-  private updateFieldInvalidity(): void {
-    this.emailInvalid.set(this.isFieldInvalid('email'));
-    this.passwordInvalid.set(this.isFieldInvalid('password'));
-    this.termsInvalid.set(this.isFieldInvalid('terms'));
-  }
-
-  private isFieldInvalid(field: string): boolean {
-    const formField = this.form?.get(field);
-    return !!formField && !formField.valid && formField.touched;
+    this.emailInvalid.set(null);
+    this.passwordInvalid.set(null);
+    this.termsInvalid.set(null);
   }
 
   private signin(): void {