login

apps/web/src/app/pages/admin-oidc-clients.component.ts

@@ -98,26 +98,73 @@ interface CreatedOidcClient extends OidcClient {
           <div class="client-list">
             @for (client of clients(); track client.id) {
               <article class="client-item">
-                <div>
-                  <strong>{{ client.clientName }}</strong>
-                  <code>{{ client.clientId }}</code>
-                </div>
-                <div class="flags">
-                  <span>{{ client.enabled ? 'aktiv' : 'deaktiviert' }}</span>
-                  <span>{{ client.tokenEndpointAuthMethod }}</span>
-                  @if (client.firstParty) { <span>first-party</span> }
-                  @if (client.includeGroups) { <span>groups</span> }
-                </div>
-                <dl>
-                  <div><dt>Redirect URIs</dt><dd>{{ client.redirectUris.join(', ') }}</dd></div>
-                  <div><dt>Scopes</dt><dd>{{ client.scope }}</dd></div>
-                </dl>
-                <div class="row-actions">
-                  <button type="button" class="secondary-action" (click)="toggle(client)">
-                    {{ client.enabled ? 'Deaktivieren' : 'Aktivieren' }}
-                  </button>
-                  <button type="button" class="danger-action" (click)="delete(client)">Loeschen</button>
-                </div>
+                @if (editingClientId() === client.id) {
+                  <form class="client-edit-form" [formGroup]="editForm" (ngSubmit)="save(client)">
+                    <div class="client-heading">
+                      <div>
+                        <strong>Client bearbeiten</strong>
+                        <code>{{ client.clientId }}</code>
+                      </div>
+                      <div class="flags">
+                        <span>{{ client.enabled ? 'aktiv' : 'deaktiviert' }}</span>
+                        <span>{{ client.tokenEndpointAuthMethod }}</span>
+                      </div>
+                    </div>
+                    <label>
+                      Name
+                      <input formControlName="clientName">
+                    </label>
+                    <label>
+                      Redirect URIs
+                      <textarea formControlName="redirectUris" rows="4"></textarea>
+                    </label>
+                    <label>
+                      Logout Redirect URIs
+                      <textarea formControlName="postLogoutRedirectUris" rows="3"></textarea>
+                    </label>
+                    <label>
+                      Scopes
+                      <input formControlName="scope">
+                    </label>
+                    <label class="check-row">
+                      <input type="checkbox" formControlName="firstParty">
+                      First-Party Client
+                    </label>
+                    <label class="check-row">
+                      <input type="checkbox" formControlName="includeGroups">
+                      Gruppen-Claim ausgeben
+                    </label>
+                    <div class="row-actions">
+                      <button type="submit" [disabled]="editForm.invalid || loading()">Speichern</button>
+                      <button type="button" class="secondary-action" (click)="cancelEdit()">Abbrechen</button>
+                    </div>
+                  </form>
+                } @else {
+                  <div class="client-heading">
+                    <div>
+                      <strong>{{ client.clientName }}</strong>
+                      <code>{{ client.clientId }}</code>
+                    </div>
+                    <div class="flags">
+                      <span>{{ client.enabled ? 'aktiv' : 'deaktiviert' }}</span>
+                      <span>{{ client.tokenEndpointAuthMethod }}</span>
+                      @if (client.firstParty) { <span>first-party</span> }
+                      @if (client.includeGroups) { <span>groups</span> }
+                    </div>
+                  </div>
+                  <dl>
+                    <div><dt>Redirect URIs</dt><dd>{{ client.redirectUris.join(', ') }}</dd></div>
+                    <div><dt>Logout Redirect URIs</dt><dd>{{ client.postLogoutRedirectUris.join(', ') || '-' }}</dd></div>
+                    <div><dt>Scopes</dt><dd>{{ client.scope }}</dd></div>
+                  </dl>
+                  <div class="row-actions">
+                    <button type="button" class="secondary-action" (click)="startEdit(client)">Bearbeiten</button>
+                    <button type="button" class="secondary-action" (click)="toggle(client)">
+                      {{ client.enabled ? 'Deaktivieren' : 'Aktivieren' }}
+                    </button>
+                    <button type="button" class="danger-action" (click)="delete(client)">Loeschen</button>
+                  </div>
+                }
               </article>
             }
           </div>
@@ -134,8 +181,10 @@ export class AdminOidcClientsComponent implements OnInit {
   readonly failed = signal(false);
   readonly message = signal('');
   readonly createdSecret = signal('');
+  readonly editingClientId = signal<string | null>(null);
   readonly oidcBaseUrl: string;
   readonly form;
+  readonly editForm;
 
   constructor(
     private readonly fb: FormBuilder,
@@ -152,6 +201,14 @@ export class AdminOidcClientsComponent implements OnInit {
       firstParty: [false],
       includeGroups: [true],
     });
+    this.editForm = this.fb.nonNullable.group({
+      clientName: ['', Validators.required],
+      redirectUris: ['', Validators.required],
+      postLogoutRedirectUris: [''],
+      scope: ['openid profile email groups'],
+      firstParty: [false],
+      includeGroups: [true],
+    });
   }
 
   ngOnInit(): void {
@@ -195,10 +252,67 @@ export class AdminOidcClientsComponent implements OnInit {
       .subscribe({ next: () => this.load(), error: (error) => this.message.set(apiErrorMessage(error)) });
   }
 
+  startEdit(client: OidcClient): void {
+    this.failed.set(false);
+    this.message.set('');
+    this.createdSecret.set('');
+    this.editingClientId.set(client.id);
+    this.editForm.setValue({
+      clientName: client.clientName,
+      redirectUris: this.multiline(client.redirectUris),
+      postLogoutRedirectUris: this.multiline(client.postLogoutRedirectUris),
+      scope: client.scope,
+      firstParty: client.firstParty,
+      includeGroups: client.includeGroups,
+    });
+  }
+
+  cancelEdit(): void {
+    this.editingClientId.set(null);
+  }
+
+  save(client: OidcClient): void {
+    if (this.editForm.invalid) {
+      return;
+    }
+
+    this.loading.set(true);
+    this.failed.set(false);
+    this.message.set('');
+    const value = this.editForm.getRawValue();
+    this.http
+      .patch<OidcClient>(`${this.apiBaseUrl}/admin/oidc/clients/${client.id}`, {
+        ...value,
+        redirectUris: this.lines(value.redirectUris),
+        postLogoutRedirectUris: this.lines(value.postLogoutRedirectUris),
+      })
+      .subscribe({
+        next: () => {
+          this.editingClientId.set(null);
+          this.message.set('Client wurde gespeichert.');
+          this.load();
+        },
+        error: (error) => {
+          this.failed.set(true);
+          this.message.set(apiErrorMessage(error));
+          this.loading.set(false);
+        },
+        complete: () => this.loading.set(false),
+      });
+  }
+
   delete(client: OidcClient): void {
     this.http
       .delete<void>(`${this.apiBaseUrl}/admin/oidc/clients/${client.id}`)
-      .subscribe({ next: () => this.load(), error: (error) => this.message.set(apiErrorMessage(error)) });
+      .subscribe({
+        next: () => {
+          if (this.editingClientId() === client.id) {
+            this.editingClientId.set(null);
+          }
+          this.load();
+        },
+        error: (error) => this.message.set(apiErrorMessage(error)),
+      });
   }
 
   private load(): void {
@@ -217,4 +331,8 @@ export class AdminOidcClientsComponent implements OnInit {
       .map((line) => line.trim())
       .filter(Boolean);
   }
+
+  private multiline(values: string[]): string {
+    return values.join('\n');
+  }
 }

apps/web/src/styles.css

@@ -293,6 +293,23 @@ dd {
   gap: 12px;
 }
 
+.client-heading {
+  align-items: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  justify-content: space-between;
+}
+
+.client-heading > div:first-child {
+  display: grid;
+  gap: 6px;
+}
+
+.client-edit-form {
+  gap: 14px;
+}
+
 .group-item span,
 .group-item small,
 .attribute-row small,