update form validation

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

@@ -19,7 +19,11 @@
         disabled
         required
       />
-      <div class="error-msg"></div>
+      <div class="error-msg">
+        @if (!authData.params) {
+        <p>Click <a routerLink="">here</a> to resend the registration email.</p>
+        }
+      </div>
       <input
         type="password"
         id="password"
@@ -30,6 +34,8 @@
         [(ngModel)]="authData.password"
         pattern="[^<>]*"
         minlength="6"
+        [class.error-border]="password.invalid && password.touched"
+        [disabled]="!authData.params"
         required
       />
       <div class="error-msg">
@@ -47,6 +53,11 @@
         [(ngModel)]="authData.passwordConfirm"
         pattern="[^<>]*"
         minlength="6"
+        [class.error-border]="
+          authData.password !== authData.passwordConfirm &&
+          passwordConfirm.touched
+        "
+        [disabled]="!authData.params"
         required
       />
       <div class="error-msg">
@@ -58,7 +69,8 @@
       <app-btn-large
         [value]="'Get Started'"
         [disabled]="
-          !isUserEmailValid(authData.mail) && authData.mail.length > 0
+          (!isUserEmailValid(authData.mail) && authData.mail.length > 0) ||
+          !authData.params
         "
       ></app-btn-large>
     </form>

frontend/src/app/components/auth/register/register.component.scss

@@ -49,6 +49,14 @@ section {
     font-size: 12px !important;
     font-weight: 400 !important;
   }
+  a {
+    color: $red;
+    text-decoration: underline;
+    cursor: pointer;
+    &:hover {
+      text-decoration: none;
+    }
+  }
 }
 
 .register-form {
@@ -77,4 +85,7 @@ section {
       background-color: rgba($white, 0.1);
     }
   }
+  .error-border {
+    border: 1px solid red;
+  }
 }

frontend/src/app/components/auth/register/register.component.ts

@@ -1,21 +1,34 @@
 import { Component } from '@angular/core';
 import { BtnLargeComponent } from '../../../shared/components/btn-large/btn-large.component';
 import { FormsModule, NgForm } from '@angular/forms';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-register',
   standalone: true,
-  imports: [BtnLargeComponent, FormsModule],
+  imports: [BtnLargeComponent, FormsModule, RouterLink],
   templateUrl: './register.component.html',
   styleUrl: './register.component.scss',
 })
 export class RegisterComponent {
   authData = {
-    mail: 'test@test.de',
+    mail: '',
+    params: false,
     password: '',
     passwordConfirm: '',
   };
 
+  constructor(private route: ActivatedRoute) {}
+
+  ngOnInit(): void {
+    this.route.queryParams.subscribe((params) => {
+      this.authData.mail = params['mail'] || '';
+      this.authData.mail
+        ? (this.authData.params = true)
+        : (this.authData.params = false);
+    });
+  }
+
   isUserEmailValid(emailValue: string) {
     const emailRegex = /^[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,}$/;
     return emailRegex.test(emailValue);

frontend/src/app/components/home/home.component.ts

@@ -2,8 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { HeaderComponent } from './header/header.component';
 import { FooterComponent } from './footer/footer.component';
 import { AuthComponent } from '../auth/auth.component';
-import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
-import { filter } from 'rxjs/operators';
+import { ActivatedRoute } from '@angular/router';
 import { RegisterComponent } from '../auth/register/register.component';
 
 @Component({