From c7b88d415ae11683e2bfc4e79cb52dc7d2626eb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Ha=C3=9Fel?= <git@patrick-hassel.de>
Date: Wed, 6 Nov 2024 14:57:14 +0100
Subject: [PATCH] ProfileComponent uses Tiles now

---
 .../app/pages/profile/profile.component.html  | 86 +++++++------------
 1 file changed, 31 insertions(+), 55 deletions(-)

diff --git a/src/main/angular/src/app/pages/profile/profile.component.html b/src/main/angular/src/app/pages/profile/profile.component.html
index 3d84895..b5d9340 100644
--- a/src/main/angular/src/app/pages/profile/profile.component.html
+++ b/src/main/angular/src/app/pages/profile/profile.component.html
@@ -1,61 +1,37 @@
 <ng-container *ngIf="userService.user !== null">
-  <h1>Profil</h1>
-  <table>
-    <tr>
-      <th>
-        Name:
-      </th>
-      <td>
-        <app-text [initial]="userService.user.name" [editable]="true" (onChange)="userService.changeName($event)" [validator]="nameValidator"></app-text>
-      </td>
-    </tr>
-    <tr>
-      <td class="hint" colspan="2">
-        Mindestens {{ USER_NAME_MIN_LENGTH }} Zeichen. Keine Leerzeichen. Buchstaben oder Zahlen müssen enthalten sein.
-      </td>
-    </tr>
+  <div class="tileContainer">
 
-    <tr>
-      <th colspan="2">&nbsp;</th>
-    </tr>
+    <div class="tile">
+      <div class="tileInner">
+        <div class="tileTitle">
+          Benutzername
+        </div>
+        <div class="tileContent">
+          <app-text [initial]="userService.user.name" [editable]="true" (onChange)="userService.changeName($event)" [validator]="nameValidator"></app-text>
+          <div class="hint">
+            Mindestens {{ USER_NAME_MIN_LENGTH }} Zeichen. Keine Leerzeichen. Buchstaben oder Zahlen müssen enthalten sein.
+          </div>
+        </div>
+      </div>
+    </div>
 
-    <tr>
-      <th>
-        Passwort:
-      </th>
-      <td>
-        <div *ngIf="!userService.user.password" class="passwordNotSet">Nicht gesetzt</div>
-        <div *ngIf="userService.user.password" class="passwordSet">Gesetzt</div>
-      </td>
-    </tr>
-    <tr>
-      <th>
-        Neues Passwort:
-      </th>
-      <td>
-        <input #p0 type="text" [(ngModel)]="password0" [class.passwordInvalid]="p0Invalid()" [class.passwordValid]="p0Valid()" (keydown.enter)="p0Enter()">
-      </td>
-    </tr>
-    <tr>
-      <th>
-        Wiederholung:
-      </th>
-      <td>
-        <input #p1 type="text" [(ngModel)]="password1" [class.passwordInvalid]="p1Invalid()" [class.passwordValid]="p1Valid()" (keydown.enter)="p1Enter()">
-      </td>
-    </tr>
-    <tr>
-      <td class="hint" colspan="2">
-        Mindestens {{ USER_PASSWORD_MIN_LENGTH }} Zeichen. Nicht nur Zahlen. Nicht nur Buchstaben.
-      </td>
-    </tr>
+    <div class="tile">
+      <div class="tileInner">
+        <div class="tileTitle">
+          Passwort
+          <span *ngIf="!userService.user.password" class="passwordNotSet">(nicht gesetzt))</span>
+          <span *ngIf="userService.user.password" class="passwordSet">(gesetzt)</span>
+        </div>
+        <div class="tileContent">
+          <input #p0 type="text" [(ngModel)]="password0" [class.passwordInvalid]="p0Invalid()" [class.passwordValid]="p0Valid()" (keydown.enter)="p0Enter()">
+          <input #p1 type="text" [(ngModel)]="password1" [class.passwordInvalid]="p1Invalid()" [class.passwordValid]="p1Valid()" (keydown.enter)="p1Enter()">
+          <div class="hint">
+            Mindestens {{ USER_PASSWORD_MIN_LENGTH }} Zeichen. Nicht nur Zahlen. Nicht nur Buchstaben.
+          </div>
+        </div>
+      </div>
+    </div>
 
-    <tr>
-      <th colspan="2">&nbsp;</th>
-    </tr>
-
-  </table>
-
-  <app-group-list [groups]="groups"></app-group-list>
+  </div>
 
 </ng-container>