ProfileComponent uses Tiles now

This commit is contained in:
Patrick Haßel 2024-11-06 14:57:14 +01:00
parent a1e3a4353d
commit c7b88d415a

View File

@ -1,61 +1,37 @@
<ng-container *ngIf="userService.user !== null"> <ng-container *ngIf="userService.user !== null">
<h1>Profil</h1> <div class="tileContainer">
<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>
<tr> <div class="tile">
<th colspan="2">&nbsp;</th> <div class="tileInner">
</tr> <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> <div class="tile">
<th> <div class="tileInner">
Passwort: <div class="tileTitle">
</th> Passwort
<td> <span *ngIf="!userService.user.password" class="passwordNotSet">(nicht gesetzt))</span>
<div *ngIf="!userService.user.password" class="passwordNotSet">Nicht gesetzt</div> <span *ngIf="userService.user.password" class="passwordSet">(gesetzt)</span>
<div *ngIf="userService.user.password" class="passwordSet">Gesetzt</div> </div>
</td> <div class="tileContent">
</tr> <input #p0 type="text" [(ngModel)]="password0" [class.passwordInvalid]="p0Invalid()" [class.passwordValid]="p0Valid()" (keydown.enter)="p0Enter()">
<tr> <input #p1 type="text" [(ngModel)]="password1" [class.passwordInvalid]="p1Invalid()" [class.passwordValid]="p1Valid()" (keydown.enter)="p1Enter()">
<th> <div class="hint">
Neues Passwort: Mindestens {{ USER_PASSWORD_MIN_LENGTH }} Zeichen. Nicht nur Zahlen. Nicht nur Buchstaben.
</th> </div>
<td> </div>
<input #p0 type="text" [(ngModel)]="password0" [class.passwordInvalid]="p0Invalid()" [class.passwordValid]="p0Valid()" (keydown.enter)="p0Enter()"> </div>
</td> </div>
</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>
<tr> </div>
<th colspan="2">&nbsp;</th>
</tr>
</table>
<app-group-list [groups]="groups"></app-group-list>
</ng-container> </ng-container>