From b2d2997a320836d148577324836e00693c907f1c Mon Sep 17 00:00:00 2001
From: Lias Kleisa <kleisa@puzzle.ch>
Date: Fri, 20 Oct 2023 09:05:20 +0200
Subject: [PATCH 1/3] Adjust global error color and font weight

---
 .../check-in-base-informations.component.html               | 4 ++--
 .../check-in-form-metric.component.html                     | 2 +-
 .../check-in-form-metric.component.scss                     | 4 ----
 .../dialog/example-dialog/example-dialog.component.html     | 6 +++---
 frontend/src/style/styles.scss                              | 4 ++++
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html b/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html
index a3792283c0..2f41179ac6 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html
+++ b/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html
@@ -4,7 +4,7 @@
   <mat-form-field appearance="outline">
     <textarea matInput class="w-100" formControlName="changeInfo"></textarea>
     <div *ngIf="isTouchedOrDirty('changeInfo')">
-      <mat-error class="fw-bold" *ngFor="let errorKey of getErrorKeysOfFormField('changeInfo')">
+      <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('changeInfo')">
         {{ getErrorMessage(errorKey) }}
       </mat-error>
     </div>
@@ -15,7 +15,7 @@
   <mat-form-field appearance="outline">
     <textarea matInput formControlName="initiatives"></textarea>
     <div *ngIf="isTouchedOrDirty('initiatives')">
-      <mat-error class="fw-bold" *ngFor="let errorKey of getErrorKeysOfFormField('initiatives')">
+      <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('initiatives')">
         {{ getErrorMessage(errorKey) }}
       </mat-error>
     </div>
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html b/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html
index 70c5a8bbb6..6788d12d25 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html
@@ -15,7 +15,7 @@
         (focusin)="resetValue()"
       ></app-custom-input>
       <div *ngIf="isTouchedOrDirty('value')">
-        <mat-error class="fw-bold error-font" *ngFor="let errorKey of getErrorKeysOfFormField('value')">
+        <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('value')">
           {{ errorMessages[errorKey.toUpperCase()] }}
         </mat-error>
       </div>
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.scss b/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.scss
index 7a5ff59daa..8e3193bce7 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.scss
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.scss
@@ -1,7 +1,3 @@
-.error-font {
-  font-size: 13px;
-}
-
 .custom-input {
   margin-top: 3px;
 }
diff --git a/frontend/src/app/shared/dialog/example-dialog/example-dialog.component.html b/frontend/src/app/shared/dialog/example-dialog/example-dialog.component.html
index e153d19c3d..e0af50b5bf 100644
--- a/frontend/src/app/shared/dialog/example-dialog/example-dialog.component.html
+++ b/frontend/src/app/shared/dialog/example-dialog/example-dialog.component.html
@@ -5,7 +5,7 @@ <h1 mat-dialog-title class="d-flex justify-content-center">This is an example di
       <mat-label>Name</mat-label>
       <input matInput formControlName="name" placeholder="Ex. Tom" />
       <div *ngIf="isTouchedOrDirty('name')">
-        <mat-error class="fw-bold" *ngFor="let errorKey of getErrorKeysOfFormField('name')">
+        <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('name')">
           {{ errorMessages[errorKey.toUpperCase()] }}
         </mat-error>
       </div>
@@ -17,7 +17,7 @@ <h1 mat-dialog-title class="d-flex justify-content-center">This is an example di
       <mat-radio-button value="other">Other</mat-radio-button>
     </mat-radio-group>
     <div *ngIf="isTouchedOrDirty('gender')">
-      <mat-error class="fw-bold" *ngFor="let errorKey of getErrorKeysOfFormField('gender')">
+      <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('gender')">
         {{ errorMessages[errorKey.toUpperCase()] }}
       </mat-error>
     </div>
@@ -29,7 +29,7 @@ <h1 mat-dialog-title class="d-flex justify-content-center">This is an example di
       </mat-select>
     </mat-form-field>
     <div *ngIf="isTouchedOrDirty('hobby')">
-      <mat-error class="fw-bold" *ngFor="let errorKey of getErrorKeysOfFormField('hobby')">
+      <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('hobby')">
         {{ errorMessages[errorKey.toUpperCase()] }}
       </mat-error>
     </div>
diff --git a/frontend/src/style/styles.scss b/frontend/src/style/styles.scss
index c3b1cd9261..9fe73b88ac 100644
--- a/frontend/src/style/styles.scss
+++ b/frontend/src/style/styles.scss
@@ -99,3 +99,7 @@ body pzsh-backdrop {
   border: none;
   padding: 0;
 }
+
+.mat-mdc-form-field-error {
+  color: #b3261b;
+}

From ed3622230f73fbb261f6bae0148b8d88e82c6f9f Mon Sep 17 00:00:00 2001
From: Lias Kleisa <kleisa@puzzle.ch>
Date: Fri, 20 Oct 2023 10:48:57 +0200
Subject: [PATCH 2/3] Remove white space infront of error message

---
 .../app/keyresult-type/keyresult-type.component.html   | 10 +++++-----
 .../check-in-base-informations.component.html          |  4 ++--
 .../check-in-form-metric.component.html                |  2 +-
 .../example-dialog/example-dialog.component.html       |  6 +++---
 .../key-result-dialog/key-result-dialog.component.html |  4 ++--
 .../objective-dialog/objective-form.component.html     |  4 ++--
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/src/app/keyresult-type/keyresult-type.component.html b/frontend/src/app/keyresult-type/keyresult-type.component.html
index 2b3309c87a..a8211aeadf 100644
--- a/frontend/src/app/keyresult-type/keyresult-type.component.html
+++ b/frontend/src/app/keyresult-type/keyresult-type.component.html
@@ -45,7 +45,7 @@
               <input class="input-fields metric-fields" formControlName="baseline" [attr.data-testId]="'baseline'" />
               <div *ngIf="isTouchedOrDirty('baseline')">
                 <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('baseline')">
-                  {{ errorMessages[errorKey.toUpperCase()] }}
+                  {{ errorMessages[errorKey.toUpperCase().trim()] }}
                 </mat-error>
               </div>
             </div>
@@ -58,7 +58,7 @@
               />
               <div *ngIf="isTouchedOrDirty('stretchGoal')">
                 <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('stretchGoal')">
-                  {{ errorMessages[errorKey.toUpperCase()] }}
+                  {{ errorMessages[errorKey.toUpperCase().trim()] }}
                 </mat-error>
               </div>
             </div>
@@ -80,7 +80,7 @@
               <textarea class="input-fields" formControlName="commitZone" [attr.data-testId]="'commitZone'"></textarea>
               <div *ngIf="isTouchedOrDirty('commitZone')">
                 <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('commitZone')">
-                  {{ errorMessages[errorKey.toUpperCase()] }}
+                  {{ errorMessages[errorKey.toUpperCase().trim()] }}
                 </mat-error>
               </div>
             </div>
@@ -89,7 +89,7 @@
               <textarea class="input-fields" formControlName="targetZone" [attr.data-testId]="'targetZone'"></textarea>
               <div *ngIf="isTouchedOrDirty('targetZone')">
                 <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('targetZone')">
-                  {{ errorMessages[errorKey.toUpperCase()] }}
+                  {{ errorMessages[errorKey.toUpperCase().trim()] }}
                 </mat-error>
               </div>
             </div>
@@ -102,7 +102,7 @@
               ></textarea>
               <div *ngIf="isTouchedOrDirty('stretchZone')">
                 <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('stretchZone')">
-                  {{ errorMessages[errorKey.toUpperCase()] }}
+                  {{ errorMessages[errorKey.toUpperCase().trim()] }}
                 </mat-error>
               </div>
             </div>
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html b/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html
index 2f41179ac6..ce235d8166 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html
+++ b/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html
@@ -5,7 +5,7 @@
     <textarea matInput class="w-100" formControlName="changeInfo"></textarea>
     <div *ngIf="isTouchedOrDirty('changeInfo')">
       <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('changeInfo')">
-        {{ getErrorMessage(errorKey) }}
+        {{ getErrorMessage(errorKey).trim() }}
       </mat-error>
     </div>
   </mat-form-field>
@@ -16,7 +16,7 @@
     <textarea matInput formControlName="initiatives"></textarea>
     <div *ngIf="isTouchedOrDirty('initiatives')">
       <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('initiatives')">
-        {{ getErrorMessage(errorKey) }}
+        {{ getErrorMessage(errorKey).trim() }}
       </mat-error>
     </div>
   </mat-form-field>
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html b/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html
index 6788d12d25..c3ac6e3242 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html
@@ -16,7 +16,7 @@
       ></app-custom-input>
       <div *ngIf="isTouchedOrDirty('value')">
         <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('value')">
-          {{ errorMessages[errorKey.toUpperCase()] }}
+          {{ errorMessages[errorKey.toUpperCase().trim()] }}
         </mat-error>
       </div>
     </div>
diff --git a/frontend/src/app/shared/dialog/example-dialog/example-dialog.component.html b/frontend/src/app/shared/dialog/example-dialog/example-dialog.component.html
index e0af50b5bf..c313789490 100644
--- a/frontend/src/app/shared/dialog/example-dialog/example-dialog.component.html
+++ b/frontend/src/app/shared/dialog/example-dialog/example-dialog.component.html
@@ -6,7 +6,7 @@ <h1 mat-dialog-title class="d-flex justify-content-center">This is an example di
       <input matInput formControlName="name" placeholder="Ex. Tom" />
       <div *ngIf="isTouchedOrDirty('name')">
         <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('name')">
-          {{ errorMessages[errorKey.toUpperCase()] }}
+          {{ errorMessages[errorKey.toUpperCase().trim()] }}
         </mat-error>
       </div>
     </mat-form-field>
@@ -18,7 +18,7 @@ <h1 mat-dialog-title class="d-flex justify-content-center">This is an example di
     </mat-radio-group>
     <div *ngIf="isTouchedOrDirty('gender')">
       <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('gender')">
-        {{ errorMessages[errorKey.toUpperCase()] }}
+        {{ errorMessages[errorKey.toUpperCase().trim()] }}
       </mat-error>
     </div>
 
@@ -30,7 +30,7 @@ <h1 mat-dialog-title class="d-flex justify-content-center">This is an example di
     </mat-form-field>
     <div *ngIf="isTouchedOrDirty('hobby')">
       <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('hobby')">
-        {{ errorMessages[errorKey.toUpperCase()] }}
+        {{ errorMessages[errorKey.toUpperCase().trim()] }}
       </mat-error>
     </div>
 
diff --git a/frontend/src/app/shared/dialog/key-result-dialog/key-result-dialog.component.html b/frontend/src/app/shared/dialog/key-result-dialog/key-result-dialog.component.html
index 3ffa6bb034..948d8b9364 100644
--- a/frontend/src/app/shared/dialog/key-result-dialog/key-result-dialog.component.html
+++ b/frontend/src/app/shared/dialog/key-result-dialog/key-result-dialog.component.html
@@ -12,7 +12,7 @@
       <textarea [attr.data-testId]="'titleInput'" class="input-fields" formControlName="title" id="title"></textarea>
       <div *ngIf="isTouchedOrDirty('title')">
         <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('title')">
-          {{ errorMessages[errorKey.toUpperCase()] }}
+          {{ errorMessages[errorKey.toUpperCase().trim()] }}
         </mat-error>
       </div>
     </div>
@@ -44,7 +44,7 @@
       <textarea [attr.data-testId]="'descriptionInput'" class="input-fields" formControlName="description"></textarea>
       <div *ngIf="isTouchedOrDirty('description')">
         <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('description')">
-          {{ errorMessages[errorKey.toUpperCase()] }}
+          {{ errorMessages[errorKey.toUpperCase().trim()] }}
         </mat-error>
       </div>
     </div>
diff --git a/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.html b/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.html
index 4fe48d37e4..f34ac951d9 100644
--- a/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.html
+++ b/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.html
@@ -16,7 +16,7 @@
         <textarea cdkFocusInitial formControlName="title" id="title" matInput placeholder="Objective Title"></textarea>
         <span *ngIf="isTouchedOrDirty('title')">
           <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('title')">
-            {{ errorMessages[errorKey.toUpperCase()] }}
+            {{ errorMessages[errorKey.toUpperCase().trim()] }}
           </mat-error>
         </span>
       </mat-form-field>
@@ -28,7 +28,7 @@
         <textarea formControlName="description" matInput placeholder="Objective Beschreibung"></textarea>
         <span *ngIf="isTouchedOrDirty('description')">
           <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('description')">
-            {{ errorMessages[errorKey.toUpperCase()] }}
+            {{ errorMessages[errorKey.toUpperCase().trim()] }}
           </mat-error>
         </span>
       </mat-form-field>

From 668833b4de35fdc7c7bdd2a901a3d70f52be5ba8 Mon Sep 17 00:00:00 2001
From: Lias Kleisa <kleisa@puzzle.ch>
Date: Fri, 20 Oct 2023 10:57:13 +0200
Subject: [PATCH 3/3] Use same error message in checkinbase dialog as in other
 dialogs

---
 .../check-in-base-informations.component.html              | 4 ++--
 .../check-in-base-informations.component.ts                | 7 +------
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html b/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html
index ce235d8166..4742018be1 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html
+++ b/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html
@@ -5,7 +5,7 @@
     <textarea matInput class="w-100" formControlName="changeInfo"></textarea>
     <div *ngIf="isTouchedOrDirty('changeInfo')">
       <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('changeInfo')">
-        {{ getErrorMessage(errorKey).trim() }}
+        {{ errorMessages[errorKey.toUpperCase().trim()] }}
       </mat-error>
     </div>
   </mat-form-field>
@@ -16,7 +16,7 @@
     <textarea matInput formControlName="initiatives"></textarea>
     <div *ngIf="isTouchedOrDirty('initiatives')">
       <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('initiatives')">
-        {{ getErrorMessage(errorKey).trim() }}
+        {{ errorMessages[errorKey.toUpperCase().trim()] }}
       </mat-error>
     </div>
   </mat-form-field>
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.ts b/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.ts
index 99af9befbd..86fc1e4797 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.ts
+++ b/frontend/src/app/shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.ts
@@ -10,6 +10,7 @@ import errorMessages from '../../../../../assets/errors/error-messages.json';
 export class CheckInBaseInformationsComponent {
   @Input()
   dialogForm!: FormGroup;
+  protected readonly errorMessages: any = errorMessages;
 
   isTouchedOrDirty(name: string) {
     return this.dialogForm.get(name)?.dirty || this.dialogForm.get(name)?.touched;
@@ -19,10 +20,4 @@ export class CheckInBaseInformationsComponent {
     const errors = this.dialogForm.get(name)?.errors;
     return errors == null ? [] : Object.keys(errors);
   }
-
-  getErrorMessage(key: string) {
-    return errorMessages[key.toUpperCase() as keyof typeof errorMessages];
-  }
-
-  protected readonly errorMessages = errorMessages;
 }