From 355de791a048ba96f4378298c356ed507569de1c Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Fri, 2 Aug 2024 04:45:47 +0200
Subject: [PATCH] form validation error query

---
 .../auth/register/register.component.html       | 17 +++++++++++++++++
 .../auth/register/register.component.scss       | 15 ++++++++++++++-
 .../auth/register/register.component.ts         |  2 +-
 frontend/src/assets/style/colors.scss           |  1 +
 4 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/auth/register/register.component.html b/frontend/src/app/components/auth/register/register.component.html
index 0e2f8bc..fb4fc9a 100644
--- a/frontend/src/app/components/auth/register/register.component.html
+++ b/frontend/src/app/components/auth/register/register.component.html
@@ -16,8 +16,10 @@
         placeholder="Email Address"
         autocomplete="email"
         [(ngModel)]="authData.mail"
+        disabled
         required
       />
+      <div class="error-msg"></div>
       <input
         type="password"
         id="password"
@@ -26,8 +28,15 @@
         placeholder="Enter a password"
         autocomplete="new-password"
         [(ngModel)]="authData.password"
+        pattern="[^<>]*"
+        minlength="6"
         required
       />
+      <div class="error-msg">
+        @if (authData.password.length < 6 && password.touched) {
+        <p>Password is too short, min 6 characters</p>
+        }
+      </div>
       <input
         type="password"
         id="passwordConfirm"
@@ -36,8 +45,16 @@
         placeholder="Confirm password"
         autocomplete="new-password"
         [(ngModel)]="authData.passwordConfirm"
+        pattern="[^<>]*"
+        minlength="6"
         required
       />
+      <div class="error-msg">
+        @if (authData.password !== authData.passwordConfirm &&
+        passwordConfirm.touched) {
+        <p>The passwords do not match</p>
+        }
+      </div>
       <app-btn-large
         [value]="'Get Started'"
         [disabled]="
diff --git a/frontend/src/app/components/auth/register/register.component.scss b/frontend/src/app/components/auth/register/register.component.scss
index 8288390..148f486 100644
--- a/frontend/src/app/components/auth/register/register.component.scss
+++ b/frontend/src/app/components/auth/register/register.component.scss
@@ -37,12 +37,25 @@ section {
   }
 }
 
+.error-msg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  padding: 6px;
+  width: 120%;
+  p {
+    color: $red;
+    font-size: 12px !important;
+    font-weight: 400 !important;
+  }
+}
+
 .register-form {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  gap: 32px;
   input {
     width: 90%;
     padding: 12px 18px;
diff --git a/frontend/src/app/components/auth/register/register.component.ts b/frontend/src/app/components/auth/register/register.component.ts
index 5a24598..3b58e89 100644
--- a/frontend/src/app/components/auth/register/register.component.ts
+++ b/frontend/src/app/components/auth/register/register.component.ts
@@ -11,7 +11,7 @@ import { FormsModule, NgForm } from '@angular/forms';
 })
 export class RegisterComponent {
   authData = {
-    mail: '',
+    mail: 'test@test.de',
     password: '',
     passwordConfirm: '',
   };
diff --git a/frontend/src/assets/style/colors.scss b/frontend/src/assets/style/colors.scss
index 145a39d..9ac1bed 100644
--- a/frontend/src/assets/style/colors.scss
+++ b/frontend/src/assets/style/colors.scss
@@ -3,3 +3,4 @@ $white: #fff;
 $black: #000;
 $gray: #ababab;
 $blue: #2e3edf;
+$red: #ff0000;