added form validation

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

@@ -1,15 +1,15 @@
 <div id="background">
   <div class="img-zone">
     <div class="img-wrapper">
-      <h1>Hi, Welcome to Ticket App.</h1>
+      <h1 (click)="DEBUG_restSignal()">Hi, Welcome to Ticket App.</h1>
     </div>
   </div>
   <div class="content-zone">
     <h1>
       @if (this.isSignupSignal()) {
-        Registrieren
-      } @else if (this.isRegisterSignal()) {
         Anmelden
+      } @else if (this.isRegisterSignal()) {
+        Registrieren
       } @else {
         Erste Schritte
       }
@@ -21,12 +21,45 @@
           pButton
           type="button"
           label="Anmelden"
-          (click)="toggleAction('register')"></button>
+          (click)="toggleAction('signup')"></button>
         <button
           pButton
           type="button"
           label="Registrieren"
-          (click)="toggleAction('signup')"></button>
+          (click)="toggleAction('register')"></button>
+      </div>
+    }
+
+    @if (this.isSignupSignal()) {
+      <div class="register-wrapper">
+        <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"
+              [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
+              id="password"
+              formControlName="password"
+              aria-describedby="password"
+              [ngClass]="{ 'ng-invalid ng-dirty': passwordInvalid() }"
+              type="password" />
+          </div>
+          <div class="signup">
+            <button pButton type="submit" label="Anmelden"></button>
+          </div>
+        </form>
       </div>
     }
 
@@ -41,6 +74,7 @@
               pInputText
               id="email"
               formControlName="email"
+              [ngClass]="{ 'ng-invalid ng-dirty': emailInvalid() }"
               aria-describedby="e-mail" />
           </div>
           <div class="password">
@@ -52,10 +86,22 @@
               id="password"
               formControlName="password"
               aria-describedby="password"
+              [ngClass]="{ 'ng-invalid ng-dirty': passwordInvalid() }"
               type="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">
-            <button pButton type="submit" label="Anmelden"></button>
+            <button
+              pButton
+              type="submit"
+              label="✨ Jetzt KOSTENFREI registrieren ✨"></button>
           </div>
         </form>
       </div>

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

@@ -53,9 +53,10 @@
     }
 
     .e-mail,
-    .password {
+    .password,
+    .terms {
       .label {
-        font-size: 1.5em;
+        font-size: 1;
       }
 
       input {
@@ -63,8 +64,12 @@
       }
     }
 
+    .terms {
+      padding-top: 1.33em;
+    }
+
     .password {
-      padding-top: 3em;
+      padding-top: 2em;
     }
 
     .signup {
@@ -76,3 +81,12 @@
     }
   }
 }
+
+// .ng-invalid.ng-dirty {
+//   border: 1px solid red;
+// }
+
+// .error {
+//   color: red;
+//   font-size: 12px;
+// }

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

@@ -5,16 +5,22 @@ import {
   OnInit,
   WritableSignal,
   signal,
+  effect,
+  DestroyRef,
 } from '@angular/core';
 import { InputTextModule } from 'primeng/inputtext';
 import {
   FormBuilder,
+  FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
   Validators,
 } from '@angular/forms';
 import { ButtonModule } from 'primeng/button';
+import { CheckboxModule } from 'primeng/checkbox';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { debounceTime } from 'rxjs/operators';
 
 type AuthAction = 'register' | 'signup';
 
@@ -27,6 +33,7 @@ type AuthAction = 'register' | 'signup';
     InputTextModule,
     ReactiveFormsModule,
     ButtonModule,
+    CheckboxModule,
   ],
   templateUrl: './register-root.component.html',
   styleUrl: './register-root.component.scss',
@@ -34,27 +41,91 @@ type AuthAction = 'register' | 'signup';
 })
 export class RegisterRootComponent implements OnInit {
   public form: FormGroup | undefined;
+  
   public isRegisterSignal: WritableSignal<boolean> = signal(false);
   public isSignupSignal: WritableSignal<boolean> = signal(false);
   public isDisplayButtons: WritableSignal<boolean> = signal(true);
 
-  constructor(private readonly formBuilder: FormBuilder) {}
+  public emailInvalid: WritableSignal<boolean | null> = signal(true);
+  public passwordInvalid: WritableSignal<boolean | null> = signal(null);
+  public termsInvalid: WritableSignal<boolean | null> = signal(null);
 
-  ngOnInit() {
+  constructor(
-    this.form = this.formBuilder.group({
+    private readonly formBuilder: FormBuilder,
-      email: ['', [Validators.required, Validators.email]],
+    private readonly destroyRef: DestroyRef
-      password: ['', [Validators.required, Validators.minLength(6)]],
+  ) {
+    effect(() => {
+      if (this.form) {
+        if (this.isRegisterSignal()) {
+          this.form.addControl(
+            'terms',
+            new FormControl(false, Validators.requiredTrue)
+          );
+        } else {
+          this.form.removeControl('terms');
+        }
+      }
     });
   }
 
-  public toggleAction(action: AuthAction) {
+  public ngOnInit(): void {
-    const isRegister = action === 'register';
+    this.form = this.formBuilder.group({
-    this.isRegisterSignal.set(isRegister);
+      email: ['', [Validators.required, Validators.email]],
-    this.isSignupSignal.set(!isRegister);
+      password: ['', [Validators.required, Validators.minLength(6)]],
+      terms: [false, [Validators.requiredTrue]],
+    });
+
+    this.form.statusChanges
+      .pipe(debounceTime(500), takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => {
+        this.updateFieldInvalidity();
+      });
+  }
+
+  public toggleAction(action: AuthAction): void {
+    if (action === 'register') {
+      this.isRegisterSignal.set(true);
+      this.isSignupSignal.set(false);
+    } else {
+      this.isRegisterSignal.set(false);
+      this.isSignupSignal.set(true);
+    }
     this.isDisplayButtons.set(false);
   }
 
-  public onSubmit() {
+  public onSubmit(): void {
-    console.log('signup');
+    this.form?.markAllAsTouched();
+    this.updateFieldInvalidity();
+
+    if (this.isSignupSignal() && this.form?.valid) {
+      this.signin();
+    } else if (this.isRegisterSignal() && this.form?.valid) {
+      this.register();
+    }
+  }
+
+  public DEBUG_restSignal(): void {
+    this.isRegisterSignal.set(false);
+    this.isSignupSignal.set(false);
+    this.isDisplayButtons.set(true);
+  }
+
+  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;
+  }
+
+  private signin(): void {
+    console.log('Signin...');
+  }
+
+  private register(): void {
+    console.log('Register...');
   }
 }

frontend/src/styles.scss

@@ -2,6 +2,9 @@
 @import 'primeng/resources/themes/lara-light-blue/theme.css';
 @import 'primeng/resources/primeng.css';
 
+// PrimeNG icons
+@import 'primeicons/primeicons.css';
+
 html,
 body {
   height: 100%;