grid

client/src/app/core/auth/auth.service.ts

@@ -17,7 +17,7 @@ export class AuthService {
   private router: Router = inject(Router);
   private toast: HotToastService = inject(HotToastService);
 
-  private user: IUser | null = null;
+  private _user: IUser | null = null;
 
   constructor() {
     const token = localStorage.getItem('accessToken_vault');
@@ -27,6 +27,14 @@ export class AuthService {
     this.refreshToken = refresh;
   }
 
+  get user(): IUser {
+    return this._user!;
+  }
+
+  get isAdmin(): boolean {
+    console.log(this.user, this.user.role == 'admin')
+    return this.user != null && this.user.role == 'admin';
+  }
 
   getMe() {
     if (!this.getAccessToken()) {
@@ -35,7 +43,7 @@ export class AuthService {
     return new Promise(resolve => {
       this.http.get<IUser>('/api/auth/me').subscribe({
         next: user => {
-          this.user = user;
+          this._user = user;
           resolve(true)
         },
         error: () => {
@@ -51,7 +59,7 @@ export class AuthService {
       this.http.post<IUser>('/api/auth/auth-code', { code: authcode }).subscribe({
         next: user => {
           this.setTokens({ accessToken: user.accessToken, refreshToken: user.refreshToken});
-          this.user = user;
+          this._user = user;
           return resolve(true)
         },
         error: () => {
@@ -63,7 +71,7 @@ export class AuthService {
   }
 
   get authenticated(): boolean {
-    return this.user != null;
+    return this._user != null;
   }
 
 

client/src/app/core/layout/layout.component.html

@@ -2,8 +2,9 @@
   <button mat-icon-button (click)="drawer.toggle()"> 
     <mat-icon>menu</mat-icon>
   </button>
-  <span routerLink="/" class="logo">Keyvault</span>
+  <span routerLink="/" class="logo">Keyvault Pro</span>
   <span class="spacer"></span>
+  <span>{{ userName }}</span>
   <button mat-icon-button (click)="logout()">
     <mat-icon>logout</mat-icon>
   </button>

client/src/app/core/layout/layout.component.scss

@@ -29,4 +29,8 @@ mat-drawer {
   button {
     width: 100%;
   }
+}
+
+mat-toolbar {
+  gap: 12px;
 }

client/src/app/core/layout/layout.component.ts

@@ -19,4 +19,8 @@ export class LayoutComponent {
   logout(){
     this.authService.logout();
   }
+
+  get userName(): string {
+    return `${this.authService.user.firstName} ${this.authService.user.lastName}` 
+  }
 }

client/src/app/model/interface/user.interface.ts

@@ -5,4 +5,5 @@ export interface IUser {
   firstName: String;
   refreshToken: string;
   accessToken: string;
+  role: string;
 }

client/src/app/modules/admin/all-users/all-users.component.ts

@@ -4,11 +4,15 @@ import { ApiService } from '../../../shared/api.service';
 import { AgGridAngular } from 'ag-grid-angular';
 import { GridOptions,GridApi, GridReadyEvent, CellEditingStoppedEvent } from 'ag-grid-community';
 import { HotToastService } from '@ngxpert/hot-toast';
+import { AuthService } from '../../../core/auth/auth.service';
+import { DatePipe } from '@angular/common';
+import { AG_GRID_LOCALE_DE } from '@ag-grid-community/locale';
 
 @Component({
   selector: 'app-all-users',
   standalone: true,
   imports: [AgGridAngular],
+  providers: [DatePipe],
   templateUrl: './all-users.component.html',
   styleUrl: './all-users.component.scss'
 })
@@ -16,24 +20,41 @@ export class AllUsersComponent {
 
   private toast: HotToastService = inject(HotToastService);
   private api: ApiService = inject(ApiService);
+  private authService = inject(AuthService);
+  private datePipe = inject(DatePipe);
 
   gridApi!: GridApi;
 
-  private roles: string [] = [];
-
   gridOptions: GridOptions = {
+    localeText: AG_GRID_LOCALE_DE,
     rowData: [],
     columnDefs: [
-      { field: 'username' , headerName: 'User', flex: 1, editable: true, sort: 'asc' },
-      { field: 'firstName', headerName: 'Vorname', flex: 1, editable: true},
-      { field: 'lastName', headerName: 'Nachname', flex: 1, editable: true},
-      { field: 'isActive', headerName: 'Aktiv', flex: 1, editable: true, },
-      { field: 'role', headerName: 'Rolle', flex: 1, editable: true, cellEditor: 'agSelectCellEditor',
+      { field: 'username' , headerName: 'User', flex: 1, editable: this.authService.isAdmin, sort: 'asc', filter: true },
+      { field: 'firstName', headerName: 'Vorname', flex: 1, editable: this.authService.isAdmin, filter: true},
+      { field: 'lastName', headerName: 'Nachname', flex: 1, editable: this.authService.isAdmin, filter: true},
+      { field: 'isActive', headerName: 'Aktiv', width: 70, editable: (params) => params.data.id != this.authService.user.id && this.authService.isAdmin, },
+      { field: 'role', headerName: 'Rolle', width: 100 ,editable: this.authService.isAdmin, cellEditor: 'agSelectCellEditor',
         cellEditorParams: {
           values: ['user', 'develop', 'admin'],
       },
       singleClickEdit: true,
+      cellEditorPopup: false
        },
+       {
+        field: 'createdAt'
+        , headerName: 'Erstellt'
+        , width: 120
+        , type: 'date'
+        , cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value))
+        , tooltipValueGetter: (data: any) => this.datePipe.transform(new Date(data.value), 'medium')
+      },
+       {
+        field: 'lastLogin'
+        , headerName: 'Letzter Login'
+        , width: 170
+        , type: 'date'
+        , cellRenderer: (data: any) => data.value ? this.datePipe.transform(new Date(data.value), 'medium') : '-'
+      }
     ],
     loading: true,
     overlayLoadingTemplate: 'Lade Daten...'
@@ -42,6 +63,7 @@ export class AllUsersComponent {
   ngOnInit(): void {
   }
 
+
   loadUsers() {
     this.api.getAllUsers().subscribe({
       next: n => {

client/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Client</title>
+  <title>Keyvault Pro</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" href="key.svg">