beautified user management

src/app/components/dialogs/add/add.dialog.component.ts

@@ -19,6 +19,7 @@ export class AddDialogComponent {
               public snackbarService: SnackBarService) { }
 
   hide = true;
+  hidePW = true;
   selectedRoles: FormControl = new FormControl();
 
   formControl = new FormControl('', [

src/app/components/dialogs/add/add.dialog.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <h3 mat-dialog-title>Add new Issue</h3>
+  <h3 mat-dialog-title>Neuen Benutzer</h3>
 
   <form class="mat-dialog-content" (ngSubmit)="submit" #formControl="ngForm">
 
@@ -19,7 +19,16 @@
 
     <div class="form">
       <mat-form-field color="accent">
-        <input matInput placeholder="Passwort" [(ngModel)]="data.password" name="password">
+        <input matInput placeholder="Passwort" [(ngModel)]="data.password" name="password" [type]="hidePW ? 'password' : 'text'">
+        <button
+          mat-icon-button
+          matSuffix
+          (click)="hidePW = !hidePW"
+          [attr.aria-label]="'Hide password'"
+          [attr.aria-pressed]="hidePW"
+        >
+          <mat-icon>{{ hidePW ? "visibility_off" : "visibility" }}</mat-icon>
+        </button>
       </mat-form-field>
     </div>
 

src/app/components/dialogs/delete/delete.dialog.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <h3 mat-dialog-title>Are you sure?</h3>
+  <h3 mat-dialog-title>Wollen sie den Nutzer wirklich Löschen?</h3>
   <div mat-dialog-content>
     Name: {{data.name}}
     <p></p>

src/app/components/dialogs/edit/edit.dialog.component.ts

@@ -13,6 +13,7 @@ import { SnackBarService } from 'src/app/services/snackbar.service';
 export class EditDialogComponent {
 
   hide = true;
+  hidePW = true;
 
   selectedRoles: FormControl = new FormControl();
 
@@ -51,7 +52,6 @@ export class EditDialogComponent {
         //this.loadAllObjects();
       },
       error => {
-        console.log("Eroor while editing: " + JSON.stringify(error));
         this.snackbarService.openSnackBar(error, "Ok", true);
       }
     );

src/app/components/dialogs/edit/edit.dialog.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <h3 mat-dialog-title>Issue id: {{data.id}}</h3>
+  <h3 mat-dialog-title>Benutzer ID: {{data.id}}</h3>
 
   <form class="mat-dialog-content" (ngSubmit)="submit" #formControl="ngForm">
 
@@ -19,7 +19,16 @@
 
     <div class="form">
       <mat-form-field color="accent">
-        <input matInput placeholder="Passwort" [(ngModel)]="data.password" name="password" >
+        <input matInput placeholder="Passwort" [(ngModel)]="data.password" name="password" [type]="hidePW ? 'password' : 'text'">
+        <button
+          mat-icon-button
+          matSuffix
+          (click)="hidePW = !hidePW"
+          [attr.aria-label]="'Hide password'"
+          [attr.aria-pressed]="hidePW"
+        >
+          <mat-icon>{{ hidePW ? "visibility_off" : "visibility" }}</mat-icon>
+        </button>
       </mat-form-field>
     </div>