Directory Search API in die Benutzer-/Gruppenimport-Komponente im Angular-Frontend integriert.

DigitalData.UserManager.NgWebUI/ClientApp/src/app/components/common/color-mode-bttn/color-mode-bttn.component.css

@@ -1,4 +1,8 @@
 .bi {
   vertical-align: -.125em;
   fill: currentColor;
+}
+
+.hide {
+  display: none;
 }

DigitalData.UserManager.NgWebUI/ClientApp/src/app/components/common/color-mode-bttn/color-mode-bttn.component.html

@@ -21,13 +21,18 @@
   <button class="btn py-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false"
     data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
     <svg class="bi my-1 theme-icon-active" width="1em" height="1em" viewBox="0 0 16 16">
-      <use href="#circle-half"></use>
+      <use href="#circle-half" [class.hide]="theme !== Themes.Auto"></use>
+      <use href="#sun-fill"  [class.hide]="theme !== Themes.Light"></use>
+      <use href="#moon-stars-fill"  [class.hide]="theme !== Themes.Dark
+      "></use>
     </svg>
     <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
   </button>
   <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
     <li>
-      <button type="button" (click)="onClick(Themes.Light)" [ngClass]="{'active': theme == Themes.Light, 'dropdown-item d-flex align-items-center': true}" data-bs-theme-value="light" aria-pressed="false">
+      <button type="button" (click)="onClick(Themes.Light)"
+        [ngClass]="{'active': theme == Themes.Light, 'dropdown-item d-flex align-items-center': true}"
+        data-bs-theme-value="light" aria-pressed="false">
         <svg class="bi me-2 opacity-50" width="1em" height="1em">
           <use href="#sun-fill"></use>
         </svg>
@@ -38,7 +43,9 @@
       </button>
     </li>
     <li>
-      <button type="button" (click)="onClick(Themes.Dark)" [ngClass]="{'active': theme == Themes.Dark, 'dropdown-item d-flex align-items-center': true}" data-bs-theme-value="dark" aria-pressed="false">
+      <button type="button" (click)="onClick(Themes.Dark)"
+        [ngClass]="{'active': theme == Themes.Dark, 'dropdown-item d-flex align-items-center': true}"
+        data-bs-theme-value="dark" aria-pressed="false">
         <svg class="bi me-2 opacity-50" width="1em" height="1em">
           <use href="#moon-stars-fill"></use>
         </svg>
@@ -49,7 +56,9 @@
       </button>
     </li>
     <li>
-      <button type="button" (click)="onClick(Themes.Auto)" [ngClass]="{'active': theme == Themes.Auto, 'dropdown-item d-flex align-items-center': true}" data-bs-theme-value="auto" aria-pressed="true">
+      <button type="button" (click)="onClick(Themes.Auto)"
+        [ngClass]="{'active': theme == Themes.Auto, 'dropdown-item d-flex align-items-center': true}"
+        data-bs-theme-value="auto" aria-pressed="true">
         <svg class="bi me-2 opacity-50" width="1em" height="1em">
           <use href="#circle-half"></use>
         </svg>

DigitalData.UserManager.NgWebUI/ClientApp/src/app/components/common/color-mode-bttn/color-mode-bttn.component.ts

@@ -23,4 +23,4 @@ export class ColorModeBttnComponent implements OnInit {
     let theTheme:Theme = theme;
     this.cModeService.setTheme(theTheme);
   }
-}
+}

DigitalData.UserManager.NgWebUI/ClientApp/src/app/components/tables/dir-user-table/dir-user-table.component.ts

@@ -23,6 +23,7 @@ export class DirUserTableComponent extends BaseTableComponent<DirUser, DirUserSe
           this.loading = false;
         } else {
           // Handle response failure
+          this.loading = false;
           console.error('Failed to fetch users');
         }
       },

DigitalData.UserManager.NgWebUI/ClientApp/src/app/components/user-group-dir-import/user-group-dir-import.component.ts

@@ -46,13 +46,14 @@ export class UserGroupDirImportComponent implements OnInit, AfterViewInit {
     let requests = [];
     let numAdded: number = 0;
     for (let row of this.dirUsers.selectedRows) {
+      console.log(row)
       // Create an Observable for each request and add it to the requests array
       requests.push(
         this.uService.create({
-          email: row?.source.emailAddress,
-          prename: row.source.givenName,
-          username: row.source.samAccountName,
-          name: row.source.surname,
+          email: row?.source?.mail?.[0],
+          prename: row.source?.givenname?.[0],
+          username: row.source?.samaccountname?.[0],
+          name: row.source?.sn?.[0],
         }).pipe(
           catchError((err) => {
             console.log('An error occurred', err);

DigitalData.UserManager.NgWebUI/ClientApp/src/app/models/user-management.api.models.ts

@@ -71,11 +71,10 @@ export interface DirGroup {
 }
 
 export interface DirUser {
-    samAccountName: string;
-    givenName: string;
-    middleName?: string;
-    surname: string;
-    emailAddress: string;
+    samaccountname?: Array<string>;
+    givenname?: Array<string>;
+    sn?: Array<string>;
+    mail?: string;
     addedWho?: string;
 }
 

DigitalData.UserManager.NgWebUI/ClientApp/src/app/services/dir-group.service.ts

@@ -1,7 +1,10 @@
 import { Injectable, Inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { DirGroup } from '../models/user-management.api.models';
+import { DirGroup, DirUser } from '../models/user-management.api.models';
 import { ApiService } from './user-management.api.service';
+import { ApiResult } from '../models/api.response.model';
+import { Observable } from 'rxjs/internal/Observable';
+import Swal from 'sweetalert2';
 
 @Injectable({
   providedIn: 'root'
@@ -10,4 +13,26 @@ export class DirGroupService extends ApiService<DirGroup> {
   constructor(http: HttpClient, @Inject('DIR_GROUP_URL') private userUri: string) {
     super(http, userUri);
   }
+
+  override getAll(): Observable<ApiResult<DirGroup[]>> {
+    return new Observable(observer => {
+      super.getAll()
+        .subscribe({
+          next: (response) => {
+            if(!response.isSuccess || !response.data) {
+              Swal.fire({
+                icon: "error",
+                title: "Oops...",
+                text: `Active Directory-Verbindung verloren. Bitte melden Sie sich erneut an`,
+                });
+            }
+            observer.next(response)
+          },
+          error: (error) => {
+            observer.error(error)
+          },
+          complete: () => observer.complete()
+        });
+    });
+  }
 }

DigitalData.UserManager.NgWebUI/ClientApp/src/main.ts

@@ -1,11 +1,11 @@
-/// <reference types="@angular/localize" />
-
+/// <reference types="@angular/localize" />
+
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
-import { DirGroup, User, UserRep } from './app/models/user-management.api.models';
+import { DirGroup, DirUser, User, UserRep } from './app/models/user-management.api.models';
 
 export function getBaseUrl() {
   return document.getElementsByTagName('base')[0].href;
@@ -96,25 +96,25 @@ var columnNames = {
   dirGroup: [
     {
       header: "SAM-Account-Name",
-      field: (dirGroup: DirGroup) => dirGroup.samaccountname[0]
+      field: (dirGroup: DirGroup) => dirGroup?.samaccountname[0]
     }
   ],
   dirUser: [
     {
       header: 'Benutzername',
-      field: 'samAccountName'
+      field: (dirUser: DirUser) => dirUser?.samaccountname?.[0] ?? ""
     },
     {
       header: 'Vorname',
-      field: 'givenName'
+      field: (dirUser: DirUser) => dirUser?.givenname?.[0] ?? ""
     },
     {
       header: 'Name',
-      field: 'surname'
+      field: (dirUser: DirUser) => dirUser?.sn?.[0] ?? ""
     },
     {
       header: 'E-email',
-      field: 'emailAddress'
+      field: (dirUser: DirUser) => dirUser?.mail?.[0] ?? ""
     }
   ],
   module: [