From 4d38cce4590b5b4e840fd2e9055f8841821c88af Mon Sep 17 00:00:00 2001
From: Developer 02 <developer02@didaloghe.onmicrosoft.com>
Date: Thu, 31 Oct 2024 07:03:26 +0100
Subject: [PATCH] refactor(user-update-form.component.css): Angeordnete CSSS
 anstatt Bootstrap zu verwenden

---
 .../user-update-form.component.html           | 109 +++++++-----------
 .../user-update-form.component.scss           |  32 +++++
 .../user-update-form.component.ts             |   3 -
 3 files changed, 73 insertions(+), 71 deletions(-)

diff --git a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-update-form/user-update-form.component.html b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-update-form/user-update-form.component.html
index f20ea8c..f40d288 100644
--- a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-update-form/user-update-form.component.html
+++ b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-update-form/user-update-form.component.html
@@ -1,72 +1,45 @@
-<div class="container my-3">
-    <div class="row">
-        <div [ngClass]="formFieldBSClass">
-            <mat-form-field>
-                <mat-label>Benutzername</mat-label>
-                <input 
-                matInput
-                [formControl]="username"
-                (blur)="updateErrorMessage()" 
+<div class="dd-container">
+    <div class="dd-row input-row">
+        <mat-form-field>
+            <mat-label>Benutzername</mat-label>
+            <input matInput [formControl]="username" (blur)="updateErrorMessage()" required />
+            @if (email.invalid) {
+            <mat-error>{{errorMessage()}}</mat-error>
+            }
+        </mat-form-field>
+        <mat-form-field>
+            <mat-label>E-Mail</mat-label>
+            <input matInput placeholder="user@example.com" [formControl]="email" (blur)="updateMailErrorMessage()"
                 required />
-                @if (email.invalid) {
-                <mat-error>{{errorMessage()}}</mat-error>
-                }
-            </mat-form-field>
-        </div>
-        <div [ngClass]="formFieldBSClass">
-            <mat-form-field>
-                <mat-label>E-Mail</mat-label>
-                <input 
-                matInput placeholder="user@example.com"
-                [formControl]="email"
-                (blur)="updateMailErrorMessage()" 
-                required />
-                @if (email.invalid) {
-                <mat-error>{{mailErrorMessage()}}</mat-error>
-                }
-            </mat-form-field>
-        </div>
-        <div [ngClass]="formFieldBSClass">
-            <div [ngClass]="buttonBSClass">
-                <button mat-fab extended (click)="update()">
-                    <mat-icon>save</mat-icon>
-                    Speichern
-                  </button>
-            </div>
-        </div>
+            @if (email.invalid) {
+            <mat-error>{{mailErrorMessage()}}</mat-error>
+            }
+        </mat-form-field>
     </div>
-    <div class="row">
-        <div [ngClass]="formFieldBSClass">
-            <mat-form-field>
-                <mat-label>Vorname</mat-label>
-                <input 
-                matInput
-                [formControl]="name"
-                (blur)="updateErrorMessage()" 
-                required />
-                @if (email.invalid) {
-                <mat-error>{{errorMessage()}}</mat-error>
-                }
-            </mat-form-field>
-        </div>
-        <div [ngClass]="formFieldBSClass">
-            <mat-form-field>
-                <mat-label>Nachname</mat-label>
-                <input 
-                matInput
-                [formControl]="surname"
-                (blur)="updateErrorMessage()" 
-                required />
-                @if (email.invalid) {
-                <mat-error>{{errorMessage()}}</mat-error>
-                }
-            </mat-form-field>
-        </div>
-        <div [ngClass]="formFieldBSClass">
-            <button mat-fab extended (click)="delete()">
-                <mat-icon>delete</mat-icon>
-                Löschen
-              </button>
-        </div>
+    <div class="dd-row input-row">
+        <mat-form-field>
+            <mat-label>Vorname</mat-label>
+            <input matInput [formControl]="name" (blur)="updateErrorMessage()" required />
+            @if (email.invalid) {
+            <mat-error>{{errorMessage()}}</mat-error>
+            }
+        </mat-form-field>
+        <mat-form-field>
+            <mat-label>Nachname</mat-label>
+            <input matInput [formControl]="surname" (blur)="updateErrorMessage()" required />
+            @if (email.invalid) {
+            <mat-error>{{errorMessage()}}</mat-error>
+            }
+        </mat-form-field>
+    </div>
+    <div class="dd-row button-row">
+        <button mat-fab extended (click)="update()">
+            <mat-icon>save</mat-icon>
+            Speichern
+        </button>
+        <button mat-fab extended (click)="delete()">
+            <mat-icon>delete</mat-icon>
+            Löschen
+        </button>
     </div>
 </div>
\ No newline at end of file
diff --git a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-update-form/user-update-form.component.scss b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-update-form/user-update-form.component.scss
index e69de29..d0d6a7e 100644
--- a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-update-form/user-update-form.component.scss
+++ b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-update-form/user-update-form.component.scss
@@ -0,0 +1,32 @@
+.dd-container {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    margin: 1rem 0 1rem 0;
+    justify-content: space-evenly;
+}
+
+.dd-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0;
+    margin: 0;
+}
+
+.input-row {
+    justify-content: space-evenly;
+}
+
+.button-row {
+    align-items: center;
+    justify-content: center;
+}
+
+mat-form-field {
+    width: 100%;
+    margin: 0 1rem 0 1rem;
+}
+
+button {
+    margin: 0 1rem 0 1rem;
+}
\ No newline at end of file
diff --git a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-update-form/user-update-form.component.ts b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-update-form/user-update-form.component.ts
index d1eb7d4..94d1884 100644
--- a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-update-form/user-update-form.component.ts
+++ b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-update-form/user-update-form.component.ts
@@ -36,9 +36,6 @@ export class UserUpdateFormComponent {
   mailErrorMessage = signal('');
   errorMessage = signal('');
 
-  public readonly formFieldBSClass: string = "col d-flex justify-content-center mx-1 my-2"
-  public readonly buttonBSClass: string = "d-flex justify-content-center mx-1 my-2"
-
   constructor(private uService: UserService, private rService: RefreshService) {
     merge(
       this.email.statusChanges, this.email.valueChanges)