@idp.global/catalog 3.0.0 → 3.1.0

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

@@ -94,6 +94,12 @@ export interface IIdpAdminGaUserActionEventDetail {
   action: 'suspend' | 'unsuspend';
 }
 
+export interface IIdpAdminProfileUpdateEventDetail {
+  name: string;
+  username: string;
+  mobileNumber: string;
+}
+
 export interface IIdpAdminGaOrgActionEventDetail {
   orgId: string;
   action: 'suspend' | 'unsuspend';
@@ -831,13 +837,88 @@ export class IdpAdminShell extends DeesElement {
       .mapping-row .form-label {
         margin-bottom: 4px;
       }
+      .mobile-topbar {
+        display: none;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 14px;
+        border-bottom: 1px solid var(--sh-border);
+        background: var(--sh-card);
+        position: sticky;
+        top: 0;
+        z-index: 40;
+      }
+      .mobile-topbar-title {
+        font-size: 13px;
+        font-weight: 650;
+        letter-spacing: -0.01em;
+      }
+      .mobile-nav-toggle,
+      .mobile-drawer-close {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 34px;
+        height: 34px;
+        border: 1px solid var(--sh-border);
+        border-radius: 9px;
+        background: var(--sh-card);
+        color: var(--sh-fg);
+        cursor: pointer;
+      }
+      .mobile-nav-toggle:focus-visible,
+      .mobile-drawer-close:focus-visible {
+        outline: 2px solid var(--sh-accent);
+        outline-offset: 2px;
+      }
+      .mobile-drawer-backdrop {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.42);
+        z-index: 60;
+      }
+      .mobile-drawer {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: min(300px, 86vw);
+        background: var(--sh-card);
+        border-right: 1px solid var(--sh-border);
+        z-index: 61;
+        overflow-y: auto;
+        animation: drawer-in 0.18s ease-out;
+      }
+      .mobile-drawer idp-admin-sidebar {
+        display: block;
+      }
+      .mobile-drawer-close {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        z-index: 62;
+      }
+      @keyframes drawer-in {
+        from {
+          transform: translateX(-24px);
+          opacity: 0;
+        }
+        to {
+          transform: translateX(0);
+          opacity: 1;
+        }
+      }
       @media (max-width: 1120px) {
         .shell {
           grid-template-columns: 1fr;
+          grid-template-rows: auto 1fr;
         }
-        idp-admin-sidebar {
+        .shell > idp-admin-sidebar {
           display: none;
         }
+        .mobile-topbar {
+          display: flex;
+        }
       }
       @media (max-width: 720px) {
         .mapping-row {
@@ -943,6 +1024,20 @@ export class IdpAdminShell extends DeesElement {
   @property({ type: Array })
   public accessor delegations: IIdpDelegation[] = [];
 
+  /** enables editing of name/username/mobile on the profile page */
+  @property({ type: Boolean })
+  public accessor profileEditable = false;
+
+  /** host sets this while a profile update request is in flight */
+  @property({ type: Boolean })
+  public accessor profileSaving = false;
+
+  @state()
+  private accessor profileDraft: { name: string; username: string; mobileNumber: string } | null = null;
+
+  @state()
+  private accessor mobileNavOpen = false;
+
   @state()
   private accessor logoutEverywhere = false;
 
@@ -1336,6 +1431,22 @@ export class IdpAdminShell extends DeesElement {
     await super.disconnectedCallback();
   }
 
+  protected override willUpdate(changedProperties: Map<PropertyKey, unknown>) {
+    super.willUpdate(changedProperties);
+    // a refreshed user means the host persisted (or reloaded) the profile
+    if (changedProperties.has('user')) {
+      this.profileDraft = null;
+    }
+  }
+
+  protected override updated(changedProperties: Map<PropertyKey, unknown>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('mobileNavOpen') && this.mobileNavOpen) {
+      const closeButton = this.shadowRoot?.querySelector('.mobile-drawer-close') as HTMLElement | null;
+      closeButton?.focus();
+    }
+  }
+
   private dispatchShellEvent<TDetail>(eventNameArg: string, detailArg: TDetail) {
     this.dispatchEvent(new CustomEvent<TDetail>(eventNameArg, {
       detail: detailArg,
@@ -1778,18 +1889,54 @@ export class IdpAdminShell extends DeesElement {
     `;
   }
 
+  private getProfileDraft() {
+    return (
+      this.profileDraft || {
+        name: this.user?.name || '',
+        username: this.user?.username || this.user?.email?.split('@')[0] || '',
+        mobileNumber: this.user?.mobileNumber || '',
+      }
+    );
+  }
+
+  private setProfileDraftField(fieldArg: 'name' | 'username' | 'mobileNumber', eventArg: Event) {
+    const value = (eventArg.target as HTMLInputElement).value;
+    this.profileDraft = { ...this.getProfileDraft(), [fieldArg]: value };
+  }
+
+  private handleProfileSave() {
+    const draft = this.getProfileDraft();
+    this.dispatchShellEvent<IIdpAdminProfileUpdateEventDetail>('idp-admin-profile-update', {
+      name: draft.name.trim(),
+      username: draft.username.trim(),
+      mobileNumber: draft.mobileNumber.trim(),
+    });
+  }
+
   private renderProfile(): TemplateResult {
-    const username = this.user?.username || this.user?.email?.split('@')[0] || '';
     const status = this.user?.status || 'active';
+    const draft = this.getProfileDraft();
+    const editable = this.profileEditable;
+    const dirty =
+      this.profileDraft !== null &&
+      (draft.name !== (this.user?.name || '') ||
+        draft.username !== (this.user?.username || this.user?.email?.split('@')[0] || '') ||
+        draft.mobileNumber !== (this.user?.mobileNumber || ''));
     return html`
       ${this.renderPageHeader('Profile', 'Your personal identity details visible to connected apps.')}
       <div class="body narrow-body">
-        ${this.renderSectionCard('Avatar', 'Shown to apps that request your profile.', html`<div class="split-row" style="justify-content:flex-start"><span class="avatar" style="width:56px;height:56px;font-size:20px">${this.userInitials}</span><div><div class="section-title">${this.user?.name || 'Unknown User'}</div><div class="muted" style="margin-top:5px">Profile update endpoints are not exposed in this console yet.</div></div></div>`)}
+        ${this.renderSectionCard('Avatar', 'Shown to apps that request your profile.', html`<div class="split-row" style="justify-content:flex-start"><span class="avatar" style="width:56px;height:56px;font-size:20px">${this.userInitials}</span><div><div class="section-title">${this.user?.name || 'Unknown User'}</div><div class="muted" style="margin-top:5px">${this.user?.email || ''}</div></div></div>`)}
         ${this.renderSectionCard('Personal information', '', html`
-          ${this.renderFormRow('Full name', '', html`<input class="input" .value=${this.user?.name || ''} disabled />`, true)}
-          ${this.renderFormRow('Username', 'Used in your public profile URL', html`<div class="input-group"><span class="input-prefix">idp.global/user/</span><input class="input" .value=${username} disabled /></div>`)}
-          ${this.renderFormRow('Email', 'Primary address for login and notifications', html`<input class="input" .value=${this.user?.email || ''} disabled />`)}
-          ${this.renderFormRow('Mobile number', 'Used for SMS verification', html`<input class="input" .value=${this.user?.mobileNumber || ''} disabled />`)}
+          ${this.renderFormRow('Full name', '', html`<input class="input" .value=${draft.name} ?disabled=${!editable || this.profileSaving} @input=${(eventArg: Event) => this.setProfileDraftField('name', eventArg)} />`, true)}
+          ${this.renderFormRow('Username', 'Used in your public profile URL', html`<div class="input-group"><span class="input-prefix">idp.global/user/</span><input class="input" .value=${draft.username} ?disabled=${!editable || this.profileSaving} @input=${(eventArg: Event) => this.setProfileDraftField('username', eventArg)} /></div>`)}
+          ${this.renderFormRow('Email', 'Primary address for login and notifications - contact support to change it', html`<input class="input" .value=${this.user?.email || ''} disabled />`)}
+          ${this.renderFormRow('Mobile number', 'Optional contact number shown to connected apps', html`<input class="input" .value=${draft.mobileNumber} ?disabled=${!editable || this.profileSaving} @input=${(eventArg: Event) => this.setProfileDraftField('mobileNumber', eventArg)} />`)}
+          ${editable
+            ? html`<div class="split-row" style="justify-content:flex-end;gap:10px;margin-top:14px">
+                <idp-button variant="outline" shape="rect" ?disabled=${!dirty || this.profileSaving} @click=${() => { this.profileDraft = null; }}>Reset</idp-button>
+                <idp-button variant="accent" shape="rect" ?loading=${this.profileSaving} ?disabled=${!dirty} @click=${this.handleProfileSave}>Save changes</idp-button>
+              </div>`
+            : html``}
         `)}
         ${this.renderSectionCard('Account status', '', html`<div class="split-row"><div><div class="section-title">Status</div><div class="muted">Your account is currently ${status}.</div></div><idp-badge variant=${status === 'active' ? 'ok' : status === 'suspended' ? 'error' : 'warn'}>${status}</idp-badge></div>${this.globalAdmin ? html`<div class="divider"></div><div class="split-row"><div><div class="section-title">Global admin</div><div class="muted">You have platform-wide administrative access.</div></div><idp-badge variant="accent">Admin</idp-badge></div>` : html``}`)}
         ${this.delegationApps.length
@@ -2329,6 +2476,7 @@ export class IdpAdminShell extends DeesElement {
     const planVariant = (planArg: string): 'accent' | 'ok' | 'warn' | 'default' =>
       planArg === 'Pro' ? 'accent' : planArg === 'Enterprise' ? 'ok' : planArg === 'Internal' ? 'warn' : 'default';
     const hasAdminFields = this.orgs.some((orgArg) => orgArg.status || orgArg.plan);
+    const hasMemberCounts = this.orgs.some((orgArg) => orgArg.memberCount !== undefined);
     const orgRows = this.orgs.map((orgArg) => ({
       cells: [
         html`
@@ -2341,9 +2489,9 @@ export class IdpAdminShell extends DeesElement {
           </div>
         `,
         orgArg.slug || '-',
+        ...(hasMemberCounts ? [orgArg.memberCount !== undefined ? String(orgArg.memberCount) : '-'] : []),
         ...(hasAdminFields
           ? [
-              orgArg.memberCount !== undefined ? String(orgArg.memberCount) : '-',
               orgArg.plan ? html`<idp-badge variant=${planVariant(orgArg.plan)}>${orgArg.plan}</idp-badge>` : '-',
               html`<idp-badge variant=${orgArg.status === 'suspended' ? 'error' : 'ok'}>${orgArg.status || 'active'}</idp-badge>`,
               html`<button class="plain-button ghost" style="font-size:11px" @click=${() => this.dispatchShellEvent<IIdpAdminGaOrgActionEventDetail>('idp-admin-ga-org-action', { orgId: orgArg.id, action: orgArg.status === 'suspended' ? 'unsuspend' : 'suspend' })}>${orgArg.status === 'suspended' ? 'Unsuspend' : 'Suspend'}</button>`,
@@ -2363,21 +2511,17 @@ export class IdpAdminShell extends DeesElement {
           badge=${`${this.orgs.length} total`}
           empty-title="No organisations"
           empty-description="No organisations are visible to this admin session."
-          .columns=${hasAdminFields
-            ? [
-                { label: 'Organisation' },
-                { label: 'Slug', mono: true, hideBelow: 'mobile' },
-                { label: 'Members', mono: true, hideBelow: 'mobile' },
-                { label: 'Plan' },
-                { label: 'Status' },
-                { label: '' },
-              ]
-            : [
-                { label: 'Organisation' },
-                { label: 'Slug', mono: true, hideBelow: 'mobile' },
-                { label: 'Role' },
-                { label: 'Identifier', mono: true, hideBelow: 'tablet' },
-              ]}
+          .columns=${[
+            { label: 'Organisation' },
+            { label: 'Slug', mono: true, hideBelow: 'mobile' },
+            ...(hasMemberCounts ? [{ label: 'Members', mono: true, hideBelow: 'mobile' }] : []),
+            ...(hasAdminFields
+              ? [{ label: 'Plan' }, { label: 'Status' }, { label: '' }]
+              : [
+                  { label: 'Role' },
+                  { label: 'Identifier', mono: true, hideBelow: 'tablet' },
+                ]),
+          ]}
           .rows=${orgRows}
         ></idp-data-table>
       </div>
@@ -2454,15 +2598,27 @@ export class IdpAdminShell extends DeesElement {
     return (renderers[this.page] || renderers.overview)();
   }
 
+  private handleMobileNavKeydown(eventArg: KeyboardEvent) {
+    if (eventArg.key === 'Escape') {
+      this.mobileNavOpen = false;
+    }
+  }
+
   public render(): TemplateResult {
     return html`
       <div
         class="shell"
-        @idp-admin-navigate=${this.handleSidebarNavigate}
+        @idp-admin-navigate=${(eventArg: CustomEvent) => { this.mobileNavOpen = false; this.handleSidebarNavigate(eventArg as CustomEvent<IIdpAdminNavigateEventDetail>); }}
         @idp-admin-org-select=${this.handleSidebarOrgSelect}
         @idp-admin-org-create-request=${this.requestOrgCreate}
         @idp-admin-logout-request=${this.requestLogout}
       >
+        <div class="mobile-topbar">
+          <button class="mobile-nav-toggle" aria-label="Open navigation" aria-haspopup="dialog" aria-expanded=${this.mobileNavOpen} @click=${() => { this.mobileNavOpen = true; }}>
+            <idp-icon name="lucide:Menu" size="17"></idp-icon>
+          </button>
+          <span class="mobile-topbar-title">idp.global</span>
+        </div>
         <idp-admin-sidebar
           .page=${this.page}
           .user=${this.user}
@@ -2472,12 +2628,31 @@ export class IdpAdminShell extends DeesElement {
           .globalAdmin=${this.globalAdmin}
           .sessionCount=${this.sessions.length}
         ></idp-admin-sidebar>
+        ${this.mobileNavOpen
+          ? html`
+              <div class="mobile-drawer-backdrop" @click=${() => { this.mobileNavOpen = false; }}></div>
+              <div class="mobile-drawer" role="dialog" aria-label="Navigation" @keydown=${this.handleMobileNavKeydown}>
+                <button class="mobile-drawer-close" aria-label="Close navigation" @click=${() => { this.mobileNavOpen = false; }}>
+                  <idp-icon name="x" size="16"></idp-icon>
+                </button>
+                <idp-admin-sidebar
+                  .page=${this.page}
+                  .user=${this.user}
+                  .accounts=${this.accounts}
+                  .orgs=${this.orgs}
+                  .selectedOrgId=${this.selectedOrgId}
+                  .globalAdmin=${this.globalAdmin}
+                  .sessionCount=${this.sessions.length}
+                ></idp-admin-sidebar>
+              </div>
+            `
+          : html``}
         <main>${this.renderMainContent()}</main>
       </div>
       ${this.renderDialog()}
       ${this.toast
         ? html`
-            <div class="toast ${this.toast.tone}">
+            <div class="toast ${this.toast.tone}" role="status" aria-live="polite">
               <idp-icon name=${this.toast.tone === 'ok' ? 'check' : 'alert'} size="14"></idp-icon>
               <span style="flex:1">${this.toast.message}</span>
             </div>

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

@@ -535,7 +535,7 @@ export class IdpAdminSidebar extends DeesElement {
     return html`
       <div class="nav-list">
         ${items.map((item) => html`
-          <button class="nav-item ${item.id === active ? 'active' : ''}" @click=${() => this.setPage(item.id)}>
+          <button class="nav-item ${item.id === active ? 'active' : ''}" aria-current=${item.id === active ? 'page' : 'false'} @click=${() => this.setPage(item.id)}>
             <idp-icon name=${item.icon as any} size="14"></idp-icon>
             ${item.label}
             ${item.badge ? html`<idp-badge variant="accent" style="margin-left:auto">${item.badge}</idp-badge>` : html``}
@@ -604,13 +604,13 @@ export class IdpAdminSidebar extends DeesElement {
             <span class="logo-text">idp.global</span>
           </div>
         </div>
-        <div class="nav-wrap">
+        <nav class="nav-wrap" aria-label="Console navigation">
           <div class="nav-section"><div class="nav-title">Workspace</div>${this.renderNavGroup(this.workspaceNav, this.page)}</div>
           <div class="nav-section"><div class="nav-title">My Account</div>${this.renderNavGroup(this.accountNav, this.page)}</div>
           <div class="nav-section">
             <div class="nav-title">Organisation</div>
             <div class="org-switch-wrap">
-              <button class="org-switch ${this.orgMenuOpen ? 'open' : ''}" @click=${() => { this.orgMenuOpen = !this.orgMenuOpen; }}>
+              <button class="org-switch ${this.orgMenuOpen ? 'open' : ''}" aria-haspopup="menu" aria-expanded=${this.orgMenuOpen} @click=${() => { this.orgMenuOpen = !this.orgMenuOpen; }}>
                 <span class="org-avatar">${currentOrg.name.slice(0, 2).toUpperCase()}</span>
                 <span class="org-name">${currentOrg.name}</span>
                 <idp-icon name="chevron-down" size="10"></idp-icon>
@@ -634,7 +634,7 @@ export class IdpAdminSidebar extends DeesElement {
           </div>
           <div class="nav-section"><div class="nav-title">Support</div>${this.renderNavGroup(this.supportNav, this.page)}</div>
           ${this.globalAdmin ? html`<div class="nav-section"><div class="nav-title">Global Admin</div>${this.renderNavGroup(this.adminNav, this.page)}</div>` : html``}
-        </div>
+        </nav>
         <div class="user-footer">
           <button class="user-trigger ${this.userMenuOpen ? 'open' : ''}" aria-haspopup="menu" aria-expanded=${this.userMenuOpen} @click=${() => { this.userMenuOpen = !this.userMenuOpen; }}>
             <span class="user-avatar">${this.userInitials}</span>

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/index.ts

@@ -22,6 +22,7 @@ export * from './idp-signed-in-pill.js';
 export * from './idp-app-pair.js';
 export * from './idp-auth-card.js';
 export * from './idp-consent-card.js';
+export * from './idp-invite-card.js';
 export * from './idp-approval-card.js';
 export * from './idp-mobile-frame.js';
 export * from './idp-inbox-preview.js';