@idp.global/catalog 2.2.0 → 3.1.0

package/ts_web/elements/idp-invite-card.ts

@@ -0,0 +1,229 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+import './idp-auth-card.js';
+import './idp-option-row.js';
+import './idp-status-icon.js';
+import './idp-button.js';
+import './idp-spinner.js';
+
+export type TIdpInviteState =
+  | 'loading'
+  | 'valid'
+  | 'accepted'
+  | 'expired'
+  | 'cancelled'
+  | 'invalid'
+  | 'email-mismatch';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-invite-card': IdpInviteCard;
+  }
+}
+
+/**
+ * Invitation landing card. Purely presentational: the host loads the
+ * invitation, decides the state, and reacts to the events
+ * idp-invite-accept, idp-invite-signin, idp-invite-register,
+ * idp-invite-switch-account and idp-invite-continue.
+ */
+@customElement('idp-invite-card')
+export class IdpInviteCard extends DeesElement {
+  public static demo = () => html`
+    <div style="background: var(--sh-bg, #f5f5f7); padding: 40px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: center;">
+      <idp-invite-card state="valid" email="alex@lossless.com" .orgNames=${['Lossless GmbH']} .roles=${['member']} signedIn></idp-invite-card>
+      <idp-invite-card state="valid" email="alex@lossless.com" .orgNames=${['Lossless GmbH']}></idp-invite-card>
+      <idp-invite-card state="email-mismatch" email="alex@lossless.com" signedIn signedInEmail="sam@other.io"></idp-invite-card>
+      <idp-invite-card state="expired" .orgNames=${['Lossless GmbH']}></idp-invite-card>
+      <idp-invite-card state="accepted" .orgNames=${['Lossless GmbH']}></idp-invite-card>
+      <idp-invite-card state="invalid"></idp-invite-card>
+    </div>
+  `;
+  public static demoGroups = ['idp.global v5 auth'];
+
+  @property({ type: String, reflect: true })
+  public accessor state: TIdpInviteState = 'loading';
+
+  /** email address the invitation was issued to */
+  @property({ type: String })
+  public accessor email = '';
+
+  /** names of the organizations the invitation grants membership in */
+  @property({ type: Array })
+  public accessor orgNames: string[] = [];
+
+  /** roles granted on acceptance */
+  @property({ type: Array })
+  public accessor roles: string[] = [];
+
+  /** whether a user session exists */
+  @property({ type: Boolean })
+  public accessor signedIn = false;
+
+  /** email of the currently signed-in user (shown on email-mismatch) */
+  @property({ type: String })
+  public accessor signedInEmail = '';
+
+  /** disables actions while the host performs a request */
+  @property({ type: Boolean })
+  public accessor busy = false;
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--idp-font);
+      }
+      .status-block {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 14px;
+        padding: 18px 0 6px;
+        text-align: center;
+      }
+      .status-text {
+        font-size: 13px;
+        color: var(--idp-fg-2);
+        line-height: 1.5;
+        max-width: 280px;
+      }
+      .detail-rows {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-top: 16px;
+      }
+      .actions {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-top: 18px;
+      }
+      .loading-block {
+        display: flex;
+        justify-content: center;
+        padding: 34px 0;
+      }
+    `,
+  ];
+
+  private get orgLabel(): string {
+    if (!this.orgNames.length) return 'an organisation';
+    if (this.orgNames.length === 1) return this.orgNames[0];
+    return `${this.orgNames[0]} and ${this.orgNames.length - 1} more`;
+  }
+
+  public render(): TemplateResult {
+    const renderers: Record<TIdpInviteState, () => { heading: string; description: string; body: TemplateResult }> = {
+      loading: () => ({
+        heading: 'Checking your invitation…',
+        description: '',
+        body: html`<div class="loading-block" role="status" aria-label="Loading invitation"><idp-spinner size="30"></idp-spinner></div>`,
+      }),
+      valid: () => ({
+        heading: `Join ${this.orgLabel}`,
+        description: `You've been invited to join ${this.orgLabel} on idp.global.`,
+        body: html`
+          <div class="detail-rows">
+            <idp-option-row interactive="false" tileTone="accent" tileSize="30" icon="mail" label="Invitation for" description=${this.email}></idp-option-row>
+            ${this.roles.length
+              ? html`<idp-option-row interactive="false" tileTone="accent" tileSize="30" icon="shield" label="You'll join as" description=${this.roles.join(', ')}></idp-option-row>`
+              : html``}
+          </div>
+          <div class="actions">
+            ${this.signedIn
+              ? html`<idp-button variant="accent" shape="rect" block ?loading=${this.busy} @click=${() => this.emit('idp-invite-accept')}>Accept invitation</idp-button>`
+              : html`
+                  <idp-button variant="accent" shape="rect" block ?disabled=${this.busy} @click=${() => this.emit('idp-invite-signin')}>Sign in to accept</idp-button>
+                  <idp-button variant="outline" shape="rect" block ?disabled=${this.busy} @click=${() => this.emit('idp-invite-register')}>Create an account</idp-button>
+                `}
+          </div>
+        `,
+      }),
+      accepted: () => ({
+        heading: `Welcome to ${this.orgLabel}`,
+        description: '',
+        body: html`
+          <div class="status-block">
+            <idp-status-icon tone="ok" icon="check"></idp-status-icon>
+            <div class="status-text">Your invitation has been accepted. You're now a member of ${this.orgLabel}.</div>
+          </div>
+          <div class="actions">
+            <idp-button variant="accent" shape="rect" block @click=${() => this.emit('idp-invite-continue')}>Continue to dashboard</idp-button>
+          </div>
+        `,
+      }),
+      expired: () => ({
+        heading: 'Invitation expired',
+        description: '',
+        body: html`
+          <div class="status-block">
+            <idp-status-icon tone="warn" icon="clock"></idp-status-icon>
+            <div class="status-text">This invitation to ${this.orgLabel} is no longer valid. Ask an organisation admin to send you a new one.</div>
+          </div>
+          <div class="actions">
+            <idp-button variant="outline" shape="rect" block @click=${() => this.emit('idp-invite-continue')}>Go to idp.global</idp-button>
+          </div>
+        `,
+      }),
+      cancelled: () => ({
+        heading: 'Invitation withdrawn',
+        description: '',
+        body: html`
+          <div class="status-block">
+            <idp-status-icon tone="warn" icon="ban"></idp-status-icon>
+            <div class="status-text">This invitation was withdrawn by the organisation. Ask an organisation admin to send you a new one if you believe this is a mistake.</div>
+          </div>
+          <div class="actions">
+            <idp-button variant="outline" shape="rect" block @click=${() => this.emit('idp-invite-continue')}>Go to idp.global</idp-button>
+          </div>
+        `,
+      }),
+      invalid: () => ({
+        heading: 'Invitation not found',
+        description: '',
+        body: html`
+          <div class="status-block">
+            <idp-status-icon tone="error" icon="x"></idp-status-icon>
+            <div class="status-text">This invitation link is invalid or was already used. Check that you opened the full link from your email.</div>
+          </div>
+          <div class="actions">
+            <idp-button variant="outline" shape="rect" block @click=${() => this.emit('idp-invite-continue')}>Go to idp.global</idp-button>
+          </div>
+        `,
+      }),
+      'email-mismatch': () => ({
+        heading: 'Different account signed in',
+        description: '',
+        body: html`
+          <div class="status-block">
+            <idp-status-icon tone="warn" icon="user-x"></idp-status-icon>
+            <div class="status-text">
+              This invitation was sent to <strong>${this.email}</strong>, but you're signed in as
+              <strong>${this.signedInEmail}</strong>. Switch accounts to accept it.
+            </div>
+          </div>
+          <div class="actions">
+            <idp-button variant="accent" shape="rect" block ?disabled=${this.busy} @click=${() => this.emit('idp-invite-switch-account')}>Switch account</idp-button>
+            <idp-button variant="outline" shape="rect" block ?disabled=${this.busy} @click=${() => this.emit('idp-invite-continue')}>Not now</idp-button>
+          </div>
+        `,
+      }),
+    };
+    const view = renderers[this.state]();
+    return html`
+      <idp-auth-card heading=${view.heading} description=${view.description}>
+        ${view.body}
+        ${this.signedIn && this.signedInEmail && this.state === 'valid'
+          ? html`<span slot="footer">Signed in as ${this.signedInEmail}</span>`
+          : html``}
+      </idp-auth-card>
+    `;
+  }
+
+  private emit(eventName: string) {
+    this.dispatchEvent(new CustomEvent(eventName, { bubbles: true, composed: true }));
+  }
+}

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