@idp.global/catalog 2.2.0 → 3.0.0

package/ts_web/elements/idp-sso-connection-form.ts

@@ -0,0 +1,574 @@
+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 IIdpSsoConnectionItem {
+  id: string;
+  displayName: string;
+  status: 'active' | 'disabled';
+  emailDomains: string[];
+  entityId: string;
+  ssoUrl: string;
+  certificateCount: number;
+  provisioningMode: 'jit' | 'scim-only' | 'jit-and-scim';
+  defaultOrgRoles: string[];
+  groupMappings: { idpGroup: string; orgRoles: string[] }[];
+}
+
+export interface IIdpSsoSpDetails {
+  spEntityId: string;
+  acsUrl: string;
+  metadataUrl: string;
+  scimBaseUrl: string;
+}
+
+export interface IIdpSsoCreateEventDetail {
+  displayName: string;
+  emailDomains: string[];
+  metadataXml?: string;
+  idp?: { entityId: string; ssoUrl: string; signingCertificates: string[] };
+  provisioningMode: 'jit' | 'scim-only' | 'jit-and-scim';
+  defaultOrgRoles: string[];
+  groupMappings: { idpGroup: string; orgRoles: string[] }[];
+}
+
+export interface IIdpSsoStatusEventDetail {
+  connectionId: string;
+  status: 'active' | 'disabled';
+}
+
+export interface IIdpSsoDeleteEventDetail {
+  connectionId: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-sso-connection-form': IdpSsoConnectionForm;
+  }
+}
+
+@customElement('idp-sso-connection-form')
+export class IdpSsoConnectionForm extends DeesElement {
+  public static demo = () => html`
+    <div style="max-width: 720px; display: flex; flex-direction: column; gap: 16px;">
+      <idp-sso-connection-form
+        .spDetails=${{
+          spEntityId: 'https://idp.global/saml/sp/metadata/conn-1',
+          acsUrl: 'https://idp.global/saml/acs/conn-1',
+          metadataUrl: 'https://idp.global/saml/sp/metadata/conn-1',
+          scimBaseUrl: 'https://idp.global/scim/v2',
+        } as IIdpSsoSpDetails}
+        .connections=${[
+          {
+            id: 'conn-1',
+            displayName: 'Okta (acme.com)',
+            status: 'active',
+            emailDomains: ['acme.com', 'acme.io'],
+            entityId: 'http://www.okta.com/exk9examples',
+            ssoUrl: 'https://acme.okta.com/app/xyz/sso/saml',
+            certificateCount: 1,
+            provisioningMode: 'jit-and-scim',
+            defaultOrgRoles: ['member'],
+            groupMappings: [{ idpGroup: 'Engineering', orgRoles: ['developer'] }],
+          },
+        ] as IIdpSsoConnectionItem[]}
+      ></idp-sso-connection-form>
+    </div>
+  `;
+  public static demoGroups = ['idp.global v5 admin console'];
+
+  @property({ type: Array })
+  public accessor connections: IIdpSsoConnectionItem[] = [];
+
+  @property({ type: Object })
+  public accessor spDetails: IIdpSsoSpDetails | null = null;
+
+  @state()
+  private accessor formOpen = false;
+
+  @state()
+  private accessor manualIdp = false;
+
+  @state()
+  private accessor formDisplayName = '';
+
+  @state()
+  private accessor formEmailDomains = '';
+
+  @state()
+  private accessor formMetadataXml = '';
+
+  @state()
+  private accessor formEntityId = '';
+
+  @state()
+  private accessor formSsoUrl = '';
+
+  @state()
+  private accessor formCertificate = '';
+
+  @state()
+  private accessor formProvisioningMode: 'jit' | 'scim-only' | 'jit-and-scim' = 'jit';
+
+  @state()
+  private accessor formDefaultRoles = 'member';
+
+  @state()
+  private accessor formGroupMappings = '';
+
+  @state()
+  private accessor formError = '';
+
+  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;
+      }
+      .headline {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 16px;
+      }
+      .title {
+        font-size: 14px;
+        font-weight: 600;
+      }
+      .muted {
+        font-size: 12.5px;
+        color: var(--idp-muted-fg);
+        line-height: 1.5;
+        margin-top: 3px;
+      }
+      .sp-grid {
+        display: grid;
+        grid-template-columns: minmax(90px, auto) 1fr;
+        gap: 6px 14px;
+        margin-top: 14px;
+        padding: 12px;
+        background: var(--idp-muted);
+        border: 1px solid var(--idp-border);
+        border-radius: 10px;
+        font-size: 12px;
+      }
+      .sp-key {
+        color: var(--idp-muted-fg);
+        white-space: nowrap;
+      }
+      .sp-value {
+        font-family: var(--idp-mono, ui-monospace, monospace);
+        overflow-wrap: anywhere;
+      }
+      .row {
+        padding: 14px 0;
+        border-bottom: 1px solid var(--idp-border);
+      }
+      .row:last-of-type {
+        border-bottom: none;
+      }
+      .row-head {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+      .row-name {
+        font-size: 13px;
+        font-weight: 500;
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        min-width: 0;
+      }
+      .row-meta {
+        font-size: 11px;
+        color: var(--idp-muted-fg);
+        margin-top: 4px;
+        overflow-wrap: anywhere;
+      }
+      .chip-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        margin-top: 8px;
+      }
+      .row-actions {
+        display: flex;
+        gap: 6px;
+        flex: 0 0 auto;
+      }
+      .table-action {
+        background: none;
+        border: 1px solid var(--idp-border);
+        border-radius: 7px;
+        cursor: pointer;
+        font-family: inherit;
+        font-size: 11px;
+        font-weight: 500;
+        padding: 4px 10px;
+        color: var(--idp-fg);
+      }
+      .table-action:hover {
+        background: var(--idp-muted);
+      }
+      .table-action.destructive {
+        color: var(--idp-destructive);
+        border-color: transparent;
+      }
+      .table-action.destructive:hover {
+        background: var(--idp-error-bg);
+      }
+      .empty {
+        padding: 18px 0;
+        font-size: 12.5px;
+        color: var(--idp-muted-fg);
+      }
+      .form {
+        margin-top: 16px;
+        padding-top: 16px;
+        border-top: 1px solid var(--idp-border);
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+      .form-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 12px;
+      }
+      @media (max-width: 720px) {
+        .form-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+      label.field {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        font-size: 12px;
+        font-weight: 500;
+      }
+      textarea,
+      select {
+        font-family: inherit;
+        font-size: 12.5px;
+        color: var(--idp-fg);
+        background: var(--idp-card);
+        border: 1px solid var(--idp-border);
+        border-radius: 8px;
+        padding: 8px 10px;
+      }
+      textarea {
+        font-family: var(--idp-mono, ui-monospace, monospace);
+        min-height: 96px;
+        resize: vertical;
+      }
+      textarea:focus-visible,
+      select:focus-visible {
+        outline: 2px solid color-mix(in srgb, var(--idp-accent), transparent 68%);
+        outline-offset: 1px;
+      }
+      .hint {
+        font-size: 11px;
+        font-weight: 400;
+        color: var(--idp-muted-fg);
+      }
+      .toggle-link {
+        background: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        font-family: inherit;
+        font-size: 11.5px;
+        color: var(--idp-accent);
+        text-align: left;
+      }
+      .error {
+        font-size: 12px;
+        color: var(--idp-destructive);
+      }
+      .form-actions {
+        display: flex;
+        gap: 8px;
+        justify-content: flex-end;
+      }
+    `,
+  ];
+
+  private parseGroupMappings(rawArg: string): { idpGroup: string; orgRoles: string[] }[] {
+    return rawArg
+      .split('\n')
+      .map((lineArg) => lineArg.trim())
+      .filter(Boolean)
+      .map((lineArg) => {
+        const [groupPart, rolesPart] = lineArg.split('=');
+        return {
+          idpGroup: (groupPart || '').trim(),
+          orgRoles: (rolesPart || '')
+            .split(',')
+            .map((roleArg) => roleArg.trim())
+            .filter(Boolean),
+        };
+      })
+      .filter((mappingArg) => mappingArg.idpGroup && mappingArg.orgRoles.length > 0);
+  }
+
+  private parseList(rawArg: string): string[] {
+    return rawArg
+      .split(',')
+      .map((entryArg) => entryArg.trim())
+      .filter(Boolean);
+  }
+
+  private submitCreate() {
+    this.formError = '';
+    const displayName = this.formDisplayName.trim();
+    const emailDomains = this.parseList(this.formEmailDomains).map((domainArg) => domainArg.toLowerCase());
+    if (!displayName || emailDomains.length === 0) {
+      this.formError = 'Display name and at least one email domain are required.';
+      return;
+    }
+    const detail: IIdpSsoCreateEventDetail = {
+      displayName,
+      emailDomains,
+      provisioningMode: this.formProvisioningMode,
+      defaultOrgRoles: this.parseList(this.formDefaultRoles),
+      groupMappings: this.parseGroupMappings(this.formGroupMappings),
+    };
+    if (this.manualIdp) {
+      const entityId = this.formEntityId.trim();
+      const ssoUrl = this.formSsoUrl.trim();
+      const certificate = this.formCertificate.trim();
+      if (!entityId || !ssoUrl || !certificate) {
+        this.formError = 'Entity ID, SSO URL and a signing certificate are required for manual setup.';
+        return;
+      }
+      detail.idp = { entityId, ssoUrl, signingCertificates: [certificate] };
+    } else {
+      const metadataXml = this.formMetadataXml.trim();
+      if (!metadataXml) {
+        this.formError = 'Paste the IdP metadata XML or switch to manual setup.';
+        return;
+      }
+      detail.metadataXml = metadataXml;
+    }
+    this.dispatchEvent(
+      new CustomEvent<IIdpSsoCreateEventDetail>('idp-sso-create', {
+        detail,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    this.resetForm();
+  }
+
+  private resetForm() {
+    this.formOpen = false;
+    this.manualIdp = false;
+    this.formDisplayName = '';
+    this.formEmailDomains = '';
+    this.formMetadataXml = '';
+    this.formEntityId = '';
+    this.formSsoUrl = '';
+    this.formCertificate = '';
+    this.formProvisioningMode = 'jit';
+    this.formDefaultRoles = 'member';
+    this.formGroupMappings = '';
+    this.formError = '';
+  }
+
+  private readInput(eventArg: Event): string {
+    const target = eventArg.composedPath()[0] as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+    return target?.value ?? '';
+  }
+
+  private renderConnectionRow(connectionArg: IIdpSsoConnectionItem): TemplateResult {
+    return html`
+      <div class="row">
+        <div class="row-head">
+          <div class="row-name">
+            ${connectionArg.displayName}
+            <idp-badge variant=${connectionArg.status === 'active' ? 'ok' : 'outline'}>${connectionArg.status}</idp-badge>
+            <idp-badge variant="outline">${connectionArg.provisioningMode}</idp-badge>
+          </div>
+          <div class="row-actions">
+            <button
+              class="table-action"
+              @click=${() =>
+                this.dispatchEvent(
+                  new CustomEvent<IIdpSsoStatusEventDetail>('idp-sso-status', {
+                    detail: {
+                      connectionId: connectionArg.id,
+                      status: connectionArg.status === 'active' ? 'disabled' : 'active',
+                    },
+                    bubbles: true,
+                    composed: true,
+                  }),
+                )}
+            >
+              ${connectionArg.status === 'active' ? 'Disable' : 'Enable'}
+            </button>
+            <button
+              class="table-action destructive"
+              @click=${() =>
+                this.dispatchEvent(
+                  new CustomEvent<IIdpSsoDeleteEventDetail>('idp-sso-delete', {
+                    detail: { connectionId: connectionArg.id },
+                    bubbles: true,
+                    composed: true,
+                  }),
+                )}
+            >
+              Delete
+            </button>
+          </div>
+        </div>
+        <div class="row-meta">${connectionArg.entityId} · ${connectionArg.ssoUrl} · ${connectionArg.certificateCount} cert${connectionArg.certificateCount === 1 ? '' : 's'}</div>
+        <div class="chip-row">
+          ${connectionArg.emailDomains.map((domainArg) => html`<idp-badge variant="accent">@${domainArg}</idp-badge>`)}
+          ${connectionArg.groupMappings.map(
+            (mappingArg) => html`<idp-badge variant="outline">${mappingArg.idpGroup} → ${mappingArg.orgRoles.join(', ')}</idp-badge>`,
+          )}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderForm(): TemplateResult {
+    return html`
+      <div class="form">
+        <div class="form-grid">
+          <idp-input
+            label="Display name"
+            placeholder="e.g. Okta (acme.com)"
+            .value=${this.formDisplayName}
+            @input=${(eventArg: Event) => (this.formDisplayName = this.readInput(eventArg))}
+          ></idp-input>
+          <idp-input
+            label="Email domains (comma-separated)"
+            placeholder="acme.com, acme.io"
+            .value=${this.formEmailDomains}
+            @input=${(eventArg: Event) => (this.formEmailDomains = this.readInput(eventArg))}
+          ></idp-input>
+        </div>
+        ${this.manualIdp
+          ? html`
+              <div class="form-grid">
+                <idp-input
+                  label="IdP entity ID"
+                  placeholder="http://www.okta.com/exk..."
+                  .value=${this.formEntityId}
+                  @input=${(eventArg: Event) => (this.formEntityId = this.readInput(eventArg))}
+                ></idp-input>
+                <idp-input
+                  label="IdP SSO URL"
+                  placeholder="https://acme.okta.com/app/.../sso/saml"
+                  .value=${this.formSsoUrl}
+                  @input=${(eventArg: Event) => (this.formSsoUrl = this.readInput(eventArg))}
+                ></idp-input>
+              </div>
+              <label class="field">
+                IdP signing certificate (PEM)
+                <textarea
+                  placeholder="-----BEGIN CERTIFICATE-----"
+                  .value=${this.formCertificate}
+                  @input=${(eventArg: Event) => (this.formCertificate = this.readInput(eventArg))}
+                ></textarea>
+              </label>
+            `
+          : html`
+              <label class="field">
+                IdP metadata XML
+                <span class="hint">Download it from your IdP (Okta: Sign On → SAML metadata; Entra: Federation metadata XML)</span>
+                <textarea
+                  placeholder="<EntityDescriptor ...>"
+                  .value=${this.formMetadataXml}
+                  @input=${(eventArg: Event) => (this.formMetadataXml = this.readInput(eventArg))}
+                ></textarea>
+              </label>
+            `}
+        <button class="toggle-link" @click=${() => (this.manualIdp = !this.manualIdp)}>
+          ${this.manualIdp ? 'Use metadata XML instead' : 'Enter entity ID, SSO URL and certificate manually'}
+        </button>
+        <div class="form-grid">
+          <label class="field">
+            Provisioning
+            <select
+              .value=${this.formProvisioningMode}
+              @change=${(eventArg: Event) => (this.formProvisioningMode = this.readInput(eventArg) as typeof this.formProvisioningMode)}
+            >
+              <option value="jit">Just-in-time (create accounts on first login)</option>
+              <option value="scim-only">SCIM only (require provisioning before login)</option>
+              <option value="jit-and-scim">JIT + SCIM</option>
+            </select>
+          </label>
+          <idp-input
+            label="Default org roles (comma-separated)"
+            placeholder="member"
+            .value=${this.formDefaultRoles}
+            @input=${(eventArg: Event) => (this.formDefaultRoles = this.readInput(eventArg))}
+          ></idp-input>
+        </div>
+        <label class="field">
+          Group → role mappings
+          <span class="hint">One per line: IdP group = role1, role2</span>
+          <textarea
+            style="min-height: 64px"
+            placeholder="Engineering = developer"
+            .value=${this.formGroupMappings}
+            @input=${(eventArg: Event) => (this.formGroupMappings = this.readInput(eventArg))}
+          ></textarea>
+        </label>
+        ${this.formError ? html`<div class="error">${this.formError}</div>` : html``}
+        <div class="form-actions">
+          <idp-button variant="ghost" size="sm" @click=${() => this.resetForm()}>Cancel</idp-button>
+          <idp-button variant="accent" size="sm" @click=${() => this.submitCreate()}>Create connection</idp-button>
+        </div>
+      </div>
+    `;
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="section">
+        <div class="headline">
+          <div>
+            <div class="title">SAML single sign-on</div>
+            <div class="muted">
+              Let members sign in through your organisation's identity provider. Users entering a
+              matching email domain are routed to your IdP automatically.
+            </div>
+          </div>
+          ${!this.formOpen
+            ? html`<idp-button variant="accent" size="sm" @click=${() => (this.formOpen = true)}>Add connection</idp-button>`
+            : html``}
+        </div>
+        ${this.spDetails
+          ? html`
+              <div class="sp-grid">
+                <span class="sp-key">SP entity ID</span><span class="sp-value">${this.spDetails.spEntityId}</span>
+                <span class="sp-key">ACS URL</span><span class="sp-value">${this.spDetails.acsUrl}</span>
+                <span class="sp-key">SP metadata</span><span class="sp-value">${this.spDetails.metadataUrl}</span>
+              </div>
+            `
+          : html``}
+        ${this.connections.length
+          ? this.connections.map((connectionArg) => this.renderConnectionRow(connectionArg))
+          : html`<div class="empty">No SSO connections yet.</div>`}
+        ${this.formOpen ? this.renderForm() : html``}
+      </div>
+    `;
+  }
+}

package/ts_web/elements/index.ts

@@ -34,3 +34,5 @@ export * from './idp-admin-shell.js';
 export * from './idp-landing-hero.js';
 export * from './idp-landing-page.js';
 export * from './idp-mobile-showcase.js';
+export * from './idp-sso-connection-form.js';
+export * from './idp-scim-token-panel.js';