@idp.global/catalog 3.5.0 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idp.global/catalog",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "private": false,
   "description": "Web component catalog for idp.global, based on the v5 Apple-system design language.",
   "exports": {

package/readme.md

@@ -30,16 +30,22 @@ Then compose the elements in HTML, Lit, or any framework that can render custom
 <idp-mobile-showcase></idp-mobile-showcase>
 ```
 
-The package also exports the TypeScript types for the interactive elements and admin shell events, so applications can strongly type `idp-submit`, `idp-select`, and account-management handlers.
+The package also exports the TypeScript types for the interactive elements and admin shell events, so applications can strongly type `idp-submit`, `idp-select`, account-management, and OIDC administration handlers.
 
 ```ts
 import type {
   IIdpFormSubmitEventDetail,
   IIdpSelectOption,
   IIdpAdminNavigateEventDetail,
+  IIdpAdminGaAppConfigureEventDetail,
+  IIdpAdminGaAppRotateSecretEventDetail,
+  IIdpAdminGaAppSecretDismissEventDetail,
+  IIdpAdminClientSecret,
 } from '@idp.global/catalog';
 ```
 
+`idp-admin-shell` dispatches `idp-admin-ga-app-configure` for safe OIDC client configuration and `idp-admin-ga-app-rotate-secret` for confidential-client secret rotation. After the host supplies the one-time result through `.oidcClientSecret`, the shell displays the plaintext secret until the user confirms secure storage through `idp-admin-ga-app-secret-dismiss`. The host must clear the property on dismissal and must not persist the plaintext secret.
+
 ## Element Surface
 
 | Element | Purpose |
@@ -59,7 +65,7 @@ import type {
 | `idp-inbox-preview` | Mobile approval inbox previews |
 | `idp-mobile-frame` | iOS-style product screenshots |
 | `idp-dashboard-window` | Desktop dashboard preview window |
-| `idp-admin-shell` | Account and organization admin layout preview |
+| `idp-admin-shell` | Account, organization, and platform OIDC administration shell |
 | `idp-landing-hero` | Public landing hero section |
 | `idp-landing-page` | Full public landing page composition |
 | `idp-mobile-showcase` | Mobile, watch, tablet, and desktop showcase composition |

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@idp.global/catalog',
-  version: '3.5.0',
+  version: '3.6.0',
   description: 'Web component catalog for idp.global, based on the v5 Apple-system design language.'
 }

package/ts_web/elements/idp-admin-shell.ts

@@ -123,6 +123,36 @@ export interface IIdpAdminGaAppActionEventDetail {
   action: 'approve' | 'reject' | 'suspend' | 'reinstate';
 }
 
+export interface IIdpAdminGaAppConfigureEventDetail {
+  appId: string;
+  clientType: 'public' | 'confidential';
+  isActive: boolean;
+  redirectUris: string[];
+  postLogoutRedirectUris: string[];
+  allowedScopes: string[];
+  grantTypes: Array<'authorization_code' | 'client_credentials' | 'refresh_token'>;
+  oidcSettings: {
+    accessTokenLifetime: number;
+    idTokenLifetime: number;
+    refreshTokenLifetime: number;
+  };
+}
+
+export interface IIdpAdminGaAppRotateSecretEventDetail {
+  appId: string;
+  gracePeriodSeconds: number;
+}
+
+export interface IIdpAdminGaAppSecretDismissEventDetail {
+  appId: string;
+}
+
+export interface IIdpAdminClientSecret {
+  appId: string;
+  clientId: string;
+  clientSecret: string;
+}
+
 export interface IIdpAdminOverviewSeriesPoint {
   /** epoch-ms timestamp or Date-parseable string; plain clock times like '14:00' are not chartable */
   x: string | number;
@@ -190,8 +220,16 @@ export interface IIdpAdminApp {
   isConnected?: boolean;
   connectionCount?: number;
   clientId?: string;
+  clientType?: 'public' | 'confidential';
+  isActive?: boolean;
+  redirectUris?: string[];
+  postLogoutRedirectUris?: string[];
   scopes?: string[];
   grants?: string[];
+  accessTokenLifetime?: number;
+  idTokenLifetime?: number;
+  refreshTokenLifetime?: number;
+  retiringClientSecretCount?: number;
   roleMappings?: IIdpAdminAppRoleMapping[];
 }
 
@@ -989,6 +1027,9 @@ export class IdpAdminShell extends DeesElement {
   @property({ type: Array })
   public accessor adminApps: IIdpAdminApp[] = [];
 
+  @property({ type: Object })
+  public accessor oidcClientSecret: IIdpAdminClientSecret | null = null;
+
   @property({ type: Array })
   public accessor passportDevices: IIdpAdminPassportDevice[] = [];
 
@@ -1126,7 +1167,7 @@ export class IdpAdminShell extends DeesElement {
   private accessor orgSettingsError = '';
 
   @state()
-  private accessor dialogMode: 'none' | 'role-upsert' | 'role-delete' | 'member-roles' | 'app-role-mappings' | 'create-org' | 'logout-confirm' = 'none';
+  private accessor dialogMode: 'none' | 'role-upsert' | 'role-delete' | 'member-roles' | 'app-role-mappings' | 'oidc-app-config' | 'oidc-secret-rotate' | 'create-org' | 'logout-confirm' = 'none';
 
   @state()
   private accessor dialogError = '';
@@ -1155,6 +1196,36 @@ export class IdpAdminShell extends DeesElement {
   @state()
   private accessor dialogAppMappings: IIdpAdminAppRoleMapping[] = [];
 
+  @state()
+  private accessor dialogClientType: 'public' | 'confidential' = 'confidential';
+
+  @state()
+  private accessor dialogAppActive = true;
+
+  @state()
+  private accessor dialogRedirectUris = '';
+
+  @state()
+  private accessor dialogPostLogoutRedirectUris = '';
+
+  @state()
+  private accessor dialogAllowedScopes = '';
+
+  @state()
+  private accessor dialogGrantTypes = '';
+
+  @state()
+  private accessor dialogAccessTokenLifetime = 3600;
+
+  @state()
+  private accessor dialogIdTokenLifetime = 3600;
+
+  @state()
+  private accessor dialogRefreshTokenLifetime = 2592000;
+
+  @state()
+  private accessor dialogSecretGracePeriod = 86400;
+
   private get safeOrgs(): IIdpAdminOrg[] {
     return Array.isArray(this.orgs) ? this.orgs.filter(Boolean) : [];
   }
@@ -1556,6 +1627,16 @@ export class IdpAdminShell extends DeesElement {
     this.dialogMemberRoles = [];
     this.dialogApp = null;
     this.dialogAppMappings = [];
+    this.dialogClientType = 'confidential';
+    this.dialogAppActive = true;
+    this.dialogRedirectUris = '';
+    this.dialogPostLogoutRedirectUris = '';
+    this.dialogAllowedScopes = '';
+    this.dialogGrantTypes = '';
+    this.dialogAccessTokenLifetime = 3600;
+    this.dialogIdTokenLifetime = 3600;
+    this.dialogRefreshTokenLifetime = 2592000;
+    this.dialogSecretGracePeriod = 86400;
   }
 
   private openRoleUpsertDialog(roleArg?: IIdpAdminOrgRoleDefinition) {
@@ -1597,6 +1678,130 @@ export class IdpAdminShell extends DeesElement {
     });
   }
 
+  private openOidcAppConfigDialog(appArg: IIdpAdminApp) {
+    this.dialogMode = 'oidc-app-config';
+    this.dialogError = '';
+    this.dialogApp = appArg;
+    this.dialogClientType = appArg.clientType || 'confidential';
+    this.dialogAppActive = appArg.isActive ?? appArg.status !== 'suspended';
+    this.dialogRedirectUris = (appArg.redirectUris || []).join('\n');
+    this.dialogPostLogoutRedirectUris = (appArg.postLogoutRedirectUris || []).join('\n');
+    this.dialogAllowedScopes = (appArg.scopes || []).join(', ');
+    this.dialogGrantTypes = (appArg.grants || []).join(', ');
+    this.dialogAccessTokenLifetime = appArg.accessTokenLifetime || 3600;
+    this.dialogIdTokenLifetime = appArg.idTokenLifetime || 3600;
+    this.dialogRefreshTokenLifetime = appArg.refreshTokenLifetime || 2592000;
+  }
+
+  private openOidcSecretRotateDialog(appArg: IIdpAdminApp) {
+    this.dialogMode = 'oidc-secret-rotate';
+    this.dialogError = '';
+    this.dialogApp = appArg;
+    this.dialogSecretGracePeriod = 86400;
+  }
+
+  private parseLines(valueArg: string): string[] {
+    return [...new Set(valueArg.split(/\r?\n/).map((entryArg) => entryArg.trim()).filter(Boolean))];
+  }
+
+  private isValidExactUri(valueArg: string): boolean {
+    if (/\s|\*|#/.test(valueArg)) {
+      return false;
+    }
+    try {
+      const url = new URL(valueArg);
+      return !['data:', 'file:', 'javascript:'].includes(url.protocol)
+        && !url.username
+        && !url.password
+        && !url.hash;
+    } catch {
+      return false;
+    }
+  }
+
+  private setDialogNumber(fieldArg: 'access' | 'id' | 'refresh' | 'grace', eventArg: Event) {
+    const value = Number((eventArg.target as HTMLInputElement).value);
+    if (fieldArg === 'access') this.dialogAccessTokenLifetime = value;
+    if (fieldArg === 'id') this.dialogIdTokenLifetime = value;
+    if (fieldArg === 'refresh') this.dialogRefreshTokenLifetime = value;
+    if (fieldArg === 'grace') this.dialogSecretGracePeriod = value;
+    this.dialogError = '';
+  }
+
+  private submitOidcAppConfigDialog() {
+    if (!this.dialogApp) return;
+    const redirectUris = this.parseLines(this.dialogRedirectUris);
+    const postLogoutRedirectUris = this.parseLines(this.dialogPostLogoutRedirectUris);
+    const allowedScopes = this.parseCsv(this.dialogAllowedScopes);
+    const configuredGrantTypes = this.parseCsv(this.dialogGrantTypes);
+    const supportedGrantTypes = ['authorization_code', 'client_credentials', 'refresh_token'];
+    const invalidGrantTypes = configuredGrantTypes.filter((grantArg) => !supportedGrantTypes.includes(grantArg));
+    const grantTypes = configuredGrantTypes
+      .filter((grantArg): grantArg is 'authorization_code' | 'client_credentials' | 'refresh_token' => supportedGrantTypes.includes(grantArg));
+    const invalidUris = [...redirectUris, ...postLogoutRedirectUris].filter((uriArg) => !this.isValidExactUri(uriArg));
+    const lifetimesAreValid = [this.dialogAccessTokenLifetime, this.dialogIdTokenLifetime]
+      .every((lifetimeArg) => Number.isInteger(lifetimeArg) && lifetimeArg >= 300 && lifetimeArg <= 86400)
+      && Number.isInteger(this.dialogRefreshTokenLifetime)
+      && this.dialogRefreshTokenLifetime >= 3600
+      && this.dialogRefreshTokenLifetime <= 7776000;
+    if (invalidGrantTypes.length) {
+      this.dialogError = `Unsupported grant types: ${invalidGrantTypes.join(', ')}.`;
+      return;
+    }
+    if (invalidUris.length) {
+      this.dialogError = `Invalid exact redirect URIs: ${invalidUris.join(', ')}.`;
+      return;
+    }
+    if (!grantTypes.length) {
+      this.dialogError = 'Add at least one supported grant type.';
+      return;
+    }
+    if (grantTypes.includes('authorization_code') && (!redirectUris.length || !allowedScopes.includes('openid'))) {
+      this.dialogError = 'The authorization_code grant requires a callback URI and the openid scope.';
+      return;
+    }
+    if (grantTypes.includes('refresh_token') && !grantTypes.includes('authorization_code')) {
+      this.dialogError = 'The refresh_token grant requires the authorization_code grant.';
+      return;
+    }
+    if (this.dialogClientType === 'public' && grantTypes.includes('client_credentials')) {
+      this.dialogError = 'Public clients cannot use the client_credentials grant.';
+      return;
+    }
+    if (!lifetimesAreValid) {
+      this.dialogError = 'Access and ID token lifetimes must be 300 to 86400 seconds; refresh family lifetime must be 3600 to 7776000 seconds.';
+      return;
+    }
+    this.dispatchShellEvent<IIdpAdminGaAppConfigureEventDetail>('idp-admin-ga-app-configure', {
+      appId: this.dialogApp.id,
+      clientType: this.dialogClientType,
+      isActive: this.dialogAppActive,
+      redirectUris,
+      postLogoutRedirectUris,
+      allowedScopes,
+      grantTypes,
+      oidcSettings: {
+        accessTokenLifetime: this.dialogAccessTokenLifetime,
+        idTokenLifetime: this.dialogIdTokenLifetime,
+        refreshTokenLifetime: this.dialogRefreshTokenLifetime,
+      },
+    });
+    this.closeDialog();
+  }
+
+  private submitOidcSecretRotateDialog() {
+    if (!this.dialogApp) return;
+    if (!Number.isInteger(this.dialogSecretGracePeriod) || this.dialogSecretGracePeriod < 0 || this.dialogSecretGracePeriod > 604800) {
+      this.dialogError = 'Grace period must be a whole number from 0 to 604800 seconds.';
+      return;
+    }
+    this.dispatchShellEvent<IIdpAdminGaAppRotateSecretEventDetail>('idp-admin-ga-app-rotate-secret', {
+      appId: this.dialogApp.id,
+      gracePeriodSeconds: this.dialogSecretGracePeriod,
+    });
+    this.closeDialog();
+  }
+
   private setDialogRoleField(fieldArg: 'key' | 'name' | 'description' | 'deleteConfirmation', eventArg: Event) {
     const value = (eventArg.target as HTMLInputElement).value;
     if (fieldArg === 'key') this.dialogRoleKey = this.normalizeRoleKey(value);
@@ -1810,6 +2015,60 @@ export class IdpAdminShell extends DeesElement {
     `;
   }
 
+  private renderOidcAppConfigDialog(): TemplateResult {
+    return html`
+      <div class="dialog-card wide" @click=${(eventArg: Event) => eventArg.stopPropagation()}>
+        <div class="dialog-head">
+          <div><div class="dialog-title">Configure OIDC client</div><div class="muted">${this.dialogApp?.name || 'Platform app'} uses exact callback and logout URI allowlists.</div></div>
+          <button class="plain-button ghost" @click=${() => this.closeDialog()}>Close</button>
+        </div>
+        <div class="dialog-body">
+          ${this.renderDialogError()}
+          ${this.renderFormRow('Client type', 'Public clients use PKCE without a client secret.', html`
+            <select class="input" .value=${this.dialogClientType} @change=${(eventArg: Event) => { this.dialogClientType = (eventArg.target as HTMLSelectElement).value as 'public' | 'confidential'; }}>
+              <option value="confidential">Confidential</option>
+              <option value="public">Public</option>
+            </select>
+          `, true)}
+          ${this.renderFormRow('Active', 'Deactivation rejects authorization, exchange, refresh, and UserInfo.', html`<input type="checkbox" .checked=${this.dialogAppActive} @change=${(eventArg: Event) => { this.dialogAppActive = (eventArg.target as HTMLInputElement).checked; }} />`)}
+          ${this.renderFormRow('Callback URIs', 'One exact absolute URI per line; required for authorization_code.', html`<textarea class="textarea" .value=${this.dialogRedirectUris} @input=${(eventArg: Event) => { this.dialogRedirectUris = (eventArg.target as HTMLTextAreaElement).value; }}></textarea>`)}
+          ${this.renderFormRow('Post-logout URIs', 'One exact RP-Initiated Logout destination per line.', html`<textarea class="textarea" .value=${this.dialogPostLogoutRedirectUris} @input=${(eventArg: Event) => { this.dialogPostLogoutRedirectUris = (eventArg.target as HTMLTextAreaElement).value; }}></textarea>`)}
+          ${this.renderFormRow('Allowed scopes', 'Comma-separated scopes; authorization_code requires openid.', html`<input class="input" .value=${this.dialogAllowedScopes} @input=${(eventArg: Event) => { this.dialogAllowedScopes = (eventArg.target as HTMLInputElement).value; }} />`, true)}
+          ${this.renderFormRow('Grant types', 'authorization_code, client_credentials, and refresh_token are supported.', html`<input class="input" .value=${this.dialogGrantTypes} @input=${(eventArg: Event) => { this.dialogGrantTypes = (eventArg.target as HTMLInputElement).value; }} />`, true)}
+          <div class="mapping-row">
+            <div>${this.renderFormRow('Access token seconds', '300 to 86400.', html`<input class="input" type="number" .value=${String(this.dialogAccessTokenLifetime)} @input=${(eventArg: Event) => this.setDialogNumber('access', eventArg)} />`, true)}</div>
+            <div>${this.renderFormRow('ID token seconds', '300 to 86400.', html`<input class="input" type="number" .value=${String(this.dialogIdTokenLifetime)} @input=${(eventArg: Event) => this.setDialogNumber('id', eventArg)} />`, true)}</div>
+            <div>${this.renderFormRow('Refresh family seconds', '3600 to 7776000; absolute lifetime.', html`<input class="input" type="number" .value=${String(this.dialogRefreshTokenLifetime)} @input=${(eventArg: Event) => this.setDialogNumber('refresh', eventArg)} />`, true)}</div>
+          </div>
+        </div>
+        <div class="dialog-actions">
+          <button class="plain-button outline" @click=${() => this.closeDialog()}>Cancel</button>
+          <button class="plain-button primary" @click=${() => this.submitOidcAppConfigDialog()}>Save OIDC configuration</button>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderOidcSecretRotateDialog(): TemplateResult {
+    return html`
+      <div class="dialog-card" @click=${(eventArg: Event) => eventArg.stopPropagation()}>
+        <div class="dialog-head">
+          <div><div class="dialog-title">Rotate client secret</div><div class="muted">The client ID remains stable. The old secret stays valid only during the overlap window.</div></div>
+          <button class="plain-button ghost" @click=${() => this.closeDialog()}>Close</button>
+        </div>
+        <div class="dialog-body">
+          ${this.renderDialogError()}
+          ${this.renderFormRow('Overlap seconds', 'Default 86400 (24 hours), maximum 604800 (7 days).', html`<input class="input" type="number" min="0" max="604800" .value=${String(this.dialogSecretGracePeriod)} @input=${(eventArg: Event) => this.setDialogNumber('grace', eventArg)} />`, true)}
+          <div class="notice-card"><idp-icon name="key" size="16"></idp-icon><div><div class="section-title">Shown once</div><div class="muted">The new plaintext secret appears once after rotation. Store it before dismissing the notice.</div></div></div>
+        </div>
+        <div class="dialog-actions">
+          <button class="plain-button outline" @click=${() => this.closeDialog()}>Cancel</button>
+          <button class="plain-button destructive" @click=${() => this.submitOidcSecretRotateDialog()}>Rotate secret</button>
+        </div>
+      </div>
+    `;
+  }
+
   private renderCreateOrgDialog(): TemplateResult {
     return html`
       <div class="dialog-card" @click=${(eventArg: Event) => eventArg.stopPropagation()}>
@@ -1868,7 +2127,11 @@ export class IdpAdminShell extends DeesElement {
             ? this.renderCreateOrgDialog()
             : this.dialogMode === 'logout-confirm'
               ? this.renderLogoutConfirmDialog()
-              : this.renderAppRoleMappingsDialog();
+              : this.dialogMode === 'oidc-app-config'
+                ? this.renderOidcAppConfigDialog()
+                : this.dialogMode === 'oidc-secret-rotate'
+                  ? this.renderOidcSecretRotateDialog()
+                  : this.renderAppRoleMappingsDialog();
     return html`<div class="dialog-backdrop" @click=${() => this.closeDialog()}>${dialog}</div>`;
   }
 
@@ -1904,8 +2167,17 @@ export class IdpAdminShell extends DeesElement {
     `;
   }
 
+  private async copyCodeValue(valueArg: string) {
+    try {
+      await navigator.clipboard.writeText(valueArg);
+      this.showToast('Copied to clipboard.');
+    } catch {
+      this.showToast('Clipboard access was denied. Select and copy the value manually.', 'warn');
+    }
+  }
+
   private renderCodeBlock(valueArg: string): TemplateResult {
-    return html`<div class="code-block"><code>${valueArg}</code><idp-icon name="copy" size="13"></idp-icon></div>`;
+    return html`<div class="code-block"><code>${valueArg}</code><button class="plain-button ghost" aria-label="Copy value" @click=${() => this.copyCodeValue(valueArg)}><idp-icon name="copy" size="13"></idp-icon></button></div>`;
   }
 
   private renderOverview(): TemplateResult {
@@ -2600,20 +2872,41 @@ export class IdpAdminShell extends DeesElement {
         appArg.category || '-',
         appArg.connectionCount ?? '-',
         html`<idp-badge variant=${appArg.status === 'suspended' || appArg.status === 'rejected' ? 'error' : appArg.status === 'pending_review' ? 'warn' : 'ok'}>${(appArg.status || 'active').replace(/_/g, ' ')}</idp-badge>`,
-        appArg.status === 'pending_review'
-          ? html`
-              <div style="display:flex;gap:4px">
+        html`
+          <div class="cell-actions">
+            ${appArg.status === 'pending_review'
+              ? html`
                 <button class="plain-button outline" style="font-size:11px;color:var(--idp-ok);border-color:var(--idp-ok-border)" @click=${() => this.dispatchShellEvent<IIdpAdminGaAppActionEventDetail>('idp-admin-ga-app-action', { appId: appArg.id, action: 'approve' })}>Approve</button>
                 <button class="plain-button ghost" style="font-size:11px;color:var(--idp-destructive)" @click=${() => this.dispatchShellEvent<IIdpAdminGaAppActionEventDetail>('idp-admin-ga-app-action', { appId: appArg.id, action: 'reject' })}>Reject</button>
-              </div>
-            `
-          : html`<button class="plain-button ghost" style="font-size:11px" @click=${() => this.dispatchShellEvent<IIdpAdminGaAppActionEventDetail>('idp-admin-ga-app-action', { appId: appArg.id, action: appArg.status === 'suspended' ? 'reinstate' : 'suspend' })}>${appArg.status === 'suspended' ? 'Reinstate' : 'Suspend'}</button>`,
+              `
+              : html`<button class="plain-button ghost" style="font-size:11px" @click=${() => this.dispatchShellEvent<IIdpAdminGaAppActionEventDetail>('idp-admin-ga-app-action', { appId: appArg.id, action: appArg.status === 'suspended' ? 'reinstate' : 'suspend' })}>${appArg.status === 'suspended' ? 'Reinstate' : 'Suspend'}</button>`}
+            <button class="plain-button outline" style="font-size:11px" @click=${() => this.openOidcAppConfigDialog(appArg)}>Configure</button>
+            ${appArg.clientType === 'public'
+              ? html``
+              : html`<button class="plain-button outline" style="font-size:11px" @click=${() => this.openOidcSecretRotateDialog(appArg)}>Rotate secret</button>`}
+          </div>
+        `,
       ],
     }));
 
     return html`
       ${this.renderPageHeader('Platform Apps', 'Global and partner apps across the platform.')}
       <div class="body wide-body">
+        ${this.oidcClientSecret
+          ? html`
+              <div class="notice-card" style="margin-bottom:16px" role="status" aria-live="polite">
+                <idp-icon name="key" size="16"></idp-icon>
+                <div style="min-width:0;flex:1">
+                  <div class="section-title">New client secret for ${this.oidcClientSecret.clientId}</div>
+                  <div class="muted" style="margin:3px 0 10px">Copy this secret now. It cannot be retrieved after this notice is dismissed.</div>
+                  ${this.renderCodeBlock(this.oidcClientSecret.clientSecret)}
+                  <div class="cell-actions" style="justify-content:flex-end;margin-top:10px">
+                    <button class="plain-button outline" @click=${() => this.dispatchShellEvent<IIdpAdminGaAppSecretDismissEventDetail>('idp-admin-ga-app-secret-dismiss', { appId: this.oidcClientSecret!.appId })}>I have stored the secret</button>
+                  </div>
+                </div>
+              </div>
+            `
+          : html``}
         <idp-data-table
           title="Platform apps"
           badge=${`${apps.length} total`}