@idp.global/catalog 2.2.0 → 3.0.0

package/dist_ts_web/elements/index.js

@@ -34,4 +34,6 @@ export * from './idp-admin-shell.js';
 export * from './idp-landing-hero.js';
 export * from './idp-landing-page.js';
 export * from './idp-mobile-showcase.js';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGdCQUFnQixDQUFDO0FBQy9CLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsaUNBQWlDLENBQUM7QUFDaEQsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsa0JBQWtCLENBQUM7QUFDakMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsZ0JBQWdCLENBQUM7QUFDL0IsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyxvQkFBb0IsQ0FBQztBQUNuQyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLDBCQUEwQixDQUFDIn0=
+export * from './idp-sso-connection-form.js';
+export * from './idp-scim-token-panel.js';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGdCQUFnQixDQUFDO0FBQy9CLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsaUNBQWlDLENBQUM7QUFDaEQsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsa0JBQWtCLENBQUM7QUFDakMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsZ0JBQWdCLENBQUM7QUFDL0IsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyxvQkFBb0IsQ0FBQztBQUNuQyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsOEJBQThCLENBQUM7QUFDN0MsY0FBYywyQkFBMkIsQ0FBQyJ9

package/package.json

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

package/ts_web/00_commitinfo_data.ts

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

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

@@ -8,8 +8,12 @@ import './idp-toggle.js';
 import './idp-delegation-section.js';
 import './idp-admin-sidebar.js';
 import './idp-admin-overview.js';
+import './idp-sso-connection-form.js';
+import './idp-scim-token-panel.js';
 import { idpAdminSharedStyles, renderAdminKpi, renderAdminStateCard, formatAdminTimeAgo, type TIdpAdminKpi } from './idp-admin-shared.js';
 import type { IIdpDelegation, IIdpDelegationApp } from './idp-delegation-section.js';
+import type { IIdpSsoConnectionItem, IIdpSsoSpDetails } from './idp-sso-connection-form.js';
+import type { IIdpScimTokenItem } from './idp-scim-token-panel.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -27,6 +31,7 @@ export type TIdpAdminPage =
   | 'org-settings'
   | 'org-members'
   | 'org-apps'
+  | 'org-sso'
   | 'support'
   | 'ga-users'
   | 'ga-orgs'
@@ -917,6 +922,18 @@ export class IdpAdminShell extends DeesElement {
   @property({ type: Array })
   public accessor gaUsers: IIdpAdminGaUser[] = [];
 
+  @property({ type: Array })
+  public accessor ssoConnections: IIdpSsoConnectionItem[] = [];
+
+  @property({ type: Object })
+  public accessor ssoSpDetails: IIdpSsoSpDetails | null = null;
+
+  @property({ type: Array })
+  public accessor scimTokens: IIdpScimTokenItem[] = [];
+
+  @property({ type: Object })
+  public accessor scimCreatedToken: { label: string; plaintextToken: string } | null = null;
+
   @property({ type: Object })
   public accessor overviewData: IIdpAdminOverviewData | null = null;
 
@@ -2220,6 +2237,25 @@ export class IdpAdminShell extends DeesElement {
     `;
   }
 
+  private renderOrgSso(): TemplateResult {
+    return html`
+      ${this.renderPageHeader('SSO & Provisioning', 'Enterprise single sign-on and automated user provisioning for this organisation.')}
+      <div class="body narrow-body">
+        <div class="list-stack">
+          <idp-sso-connection-form
+            .connections=${this.ssoConnections}
+            .spDetails=${this.ssoSpDetails}
+          ></idp-sso-connection-form>
+          <idp-scim-token-panel
+            .tokens=${this.scimTokens}
+            .createdToken=${this.scimCreatedToken}
+            scimBaseUrl=${this.ssoSpDetails?.scimBaseUrl || ''}
+          ></idp-scim-token-panel>
+        </div>
+      </div>
+    `;
+  }
+
   private renderSupport(): TemplateResult {
     const services = [
       ['Account Recovery', 'Lost access to your account or locked out of your organisation? Our team will verify your identity and restore access securely.', 'EUR149', 'per incident', 'key', '1-2 business days'],
@@ -2409,6 +2445,7 @@ export class IdpAdminShell extends DeesElement {
       'org-settings': () => this.renderOrgSettings(),
       'org-members': () => this.renderOrgMembers(),
       'org-apps': () => this.renderOrgApps(),
+      'org-sso': () => this.renderOrgSso(),
       support: () => this.renderSupport(),
       'ga-users': () => this.renderGAUsers(),
       'ga-orgs': () => this.renderGAOrgs(),

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

@@ -444,6 +444,7 @@ export class IdpAdminSidebar extends DeesElement {
     { id: 'org-settings', label: 'Settings', icon: 'settings' },
     { id: 'org-members', label: 'Members', icon: 'users' },
     { id: 'org-apps', label: 'OAuth Apps', icon: 'box' },
+    { id: 'org-sso', label: 'SSO & Provisioning', icon: 'key' },
   ];
 
   private supportNav: TNavItem[] = [

package/ts_web/elements/idp-scim-token-panel.ts

@@ -0,0 +1,311 @@
+import { DeesElement, html, property, state, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+import './idp-badge.js';
+import './idp-button.js';
+import './idp-icon.js';
+import './idp-input.js';
+
+export interface IIdpScimTokenItem {
+  id: string;
+  label: string;
+  tokenPrefix: string;
+  createdAt: number;
+  expiresAt?: number;
+  lastUsedAt?: number;
+  revoked: boolean;
+}
+
+export interface IIdpScimTokenCreateEventDetail {
+  label: string;
+}
+
+export interface IIdpScimTokenRevokeEventDetail {
+  tokenId: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-scim-token-panel': IdpScimTokenPanel;
+  }
+}
+
+@customElement('idp-scim-token-panel')
+export class IdpScimTokenPanel extends DeesElement {
+  public static demo = () => html`
+    <div style="max-width: 720px;">
+      <idp-scim-token-panel
+        scimBaseUrl="https://idp.global/scim/v2"
+        .tokens=${[
+          { id: 't1', label: 'Okta production', tokenPrefix: 'idp_scim', createdAt: Date.now() - 86400000 * 30, lastUsedAt: Date.now() - 3600000, revoked: false },
+          { id: 't2', label: 'Entra staging', tokenPrefix: 'idp_scim', createdAt: Date.now() - 86400000 * 90, expiresAt: Date.now() + 86400000 * 30, revoked: true },
+        ] as IIdpScimTokenItem[]}
+        .createdToken=${{ label: 'Okta production', plaintextToken: 'idp_scim_2f8Qb1x0demoTokenValueOnlyShownOnce' }}
+      ></idp-scim-token-panel>
+    </div>
+  `;
+  public static demoGroups = ['idp.global v5 admin console'];
+
+  @property({ type: Array })
+  public accessor tokens: IIdpScimTokenItem[] = [];
+
+  /** One-time reveal payload after a createScimToken round trip */
+  @property({ type: Object })
+  public accessor createdToken: { label: string; plaintextToken: string } | null = null;
+
+  @property({ type: String })
+  public accessor scimBaseUrl = '';
+
+  @state()
+  private accessor newLabel = '';
+
+  @state()
+  private accessor copied = false;
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--idp-font);
+        color: var(--idp-fg);
+      }
+      .section {
+        background: var(--idp-card);
+        border: 1px solid var(--idp-border);
+        border-radius: var(--idp-radius);
+        padding: 20px;
+      }
+      .title {
+        font-size: 14px;
+        font-weight: 600;
+      }
+      .muted {
+        font-size: 12.5px;
+        color: var(--idp-muted-fg);
+        line-height: 1.5;
+        margin-top: 3px;
+      }
+      .endpoint {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-top: 12px;
+        padding: 8px 10px;
+        background: var(--idp-muted);
+        border: 1px solid var(--idp-border);
+        border-radius: 8px;
+        font-family: var(--idp-mono, ui-monospace, monospace);
+        font-size: 12px;
+        overflow-wrap: anywhere;
+      }
+      .reveal {
+        margin-top: 14px;
+        padding: 12px;
+        border: 1px solid var(--idp-info-border, var(--idp-border));
+        border-radius: 10px;
+        background: var(--idp-accent-soft);
+      }
+      .reveal-title {
+        font-size: 12.5px;
+        font-weight: 600;
+        color: var(--idp-accent);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+      .reveal-token {
+        margin-top: 8px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-family: var(--idp-mono, ui-monospace, monospace);
+        font-size: 12.5px;
+        overflow-wrap: anywhere;
+      }
+      .copy-button {
+        flex: 0 0 auto;
+        border: 1px solid var(--idp-border);
+        background: var(--idp-card);
+        border-radius: 7px;
+        font-family: inherit;
+        font-size: 11px;
+        padding: 4px 10px;
+        cursor: pointer;
+      }
+      .copy-button:hover {
+        background: var(--idp-muted);
+      }
+      .row {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 0;
+        border-bottom: 1px solid var(--idp-border);
+      }
+      .row:last-of-type {
+        border-bottom: none;
+      }
+      .row-main {
+        flex: 1;
+        min-width: 0;
+      }
+      .row-name {
+        font-size: 13px;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .row-meta {
+        font-size: 11px;
+        color: var(--idp-muted-fg);
+        margin-top: 2px;
+      }
+      .revoke {
+        background: none;
+        border: none;
+        cursor: pointer;
+        font-family: inherit;
+        font-size: 11px;
+        font-weight: 500;
+        color: var(--idp-destructive);
+        padding: 4px 8px;
+        border-radius: 6px;
+      }
+      .revoke:hover {
+        background: var(--idp-error-bg);
+      }
+      .create-row {
+        display: flex;
+        gap: 10px;
+        align-items: flex-end;
+        margin-top: 16px;
+        padding-top: 16px;
+        border-top: 1px solid var(--idp-border);
+      }
+      .create-row idp-input {
+        flex: 1;
+      }
+      .empty {
+        padding: 18px 0;
+        font-size: 12.5px;
+        color: var(--idp-muted-fg);
+      }
+    `,
+  ];
+
+  private formatTimeAgo(timestampArg: number): string {
+    const deltaMs = Date.now() - timestampArg;
+    const days = Math.floor(deltaMs / 86400000);
+    if (days > 0) return `${days}d ago`;
+    const hours = Math.floor(deltaMs / 3600000);
+    if (hours > 0) return `${hours}h ago`;
+    return 'just now';
+  }
+
+  private async copyToken() {
+    if (!this.createdToken) return;
+    try {
+      await navigator.clipboard.writeText(this.createdToken.plaintextToken);
+      this.copied = true;
+      setTimeout(() => (this.copied = false), 2000);
+    } catch {
+      // clipboard unavailable; the token stays selectable
+    }
+  }
+
+  private submitCreate() {
+    const label = this.newLabel.trim();
+    if (!label) return;
+    this.dispatchEvent(
+      new CustomEvent<IIdpScimTokenCreateEventDetail>('idp-scim-token-create', {
+        detail: { label },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    this.newLabel = '';
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="section">
+        <div class="title">SCIM provisioning</div>
+        <div class="muted">
+          Let your identity provider create, update and deactivate accounts automatically.
+          Configure the endpoint below with a bearer token in Okta or Microsoft Entra.
+        </div>
+        ${this.scimBaseUrl
+          ? html`<div class="endpoint"><idp-icon name="globe" size="14"></idp-icon>${this.scimBaseUrl}</div>`
+          : html``}
+        ${this.createdToken
+          ? html`
+              <div class="reveal">
+                <div class="reveal-title">
+                  <idp-icon name="key" size="14"></idp-icon>
+                  Token for "${this.createdToken.label}" — copy it now, it won't be shown again
+                </div>
+                <div class="reveal-token">
+                  <span>${this.createdToken.plaintextToken}</span>
+                  <button class="copy-button" @click=${() => this.copyToken()}>
+                    ${this.copied ? 'Copied' : 'Copy'}
+                  </button>
+                </div>
+              </div>
+            `
+          : html``}
+        ${this.tokens.length
+          ? this.tokens.map(
+              (tokenArg) => html`
+                <div class="row">
+                  <div class="row-main">
+                    <div class="row-name">
+                      ${tokenArg.label}
+                      ${tokenArg.revoked
+                        ? html`<idp-badge variant="error">revoked</idp-badge>`
+                        : tokenArg.expiresAt && tokenArg.expiresAt < Date.now()
+                          ? html`<idp-badge variant="warn">expired</idp-badge>`
+                          : html`<idp-badge variant="ok">active</idp-badge>`}
+                    </div>
+                    <div class="row-meta">
+                      ${tokenArg.tokenPrefix}… · created ${this.formatTimeAgo(tokenArg.createdAt)}
+                      ${tokenArg.lastUsedAt ? ` · last used ${this.formatTimeAgo(tokenArg.lastUsedAt)}` : ' · never used'}
+                    </div>
+                  </div>
+                  ${!tokenArg.revoked
+                    ? html`
+                        <button
+                          class="revoke"
+                          @click=${() =>
+                            this.dispatchEvent(
+                              new CustomEvent<IIdpScimTokenRevokeEventDetail>('idp-scim-token-revoke', {
+                                detail: { tokenId: tokenArg.id },
+                                bubbles: true,
+                                composed: true,
+                              }),
+                            )}
+                        >
+                          Revoke
+                        </button>
+                      `
+                    : html``}
+                </div>
+              `,
+            )
+          : html`<div class="empty">No SCIM tokens yet. Create one to connect your IdP's provisioning.</div>`}
+        <div class="create-row">
+          <idp-input
+            label="New token label"
+            placeholder="e.g. Okta production"
+            .value=${this.newLabel}
+            @input=${(eventArg: Event) => {
+              const target = eventArg.composedPath()[0] as HTMLInputElement;
+              this.newLabel = target?.value ?? '';
+            }}
+          ></idp-input>
+          <idp-button variant="accent" size="sm" @click=${() => this.submitCreate()}>Create token</idp-button>
+        </div>
+      </div>
+    `;
+  }
+}