@idp.global/catalog 2.1.1 → 3.0.0

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>
+    `;
+  }
+}