@idp.global/catalog 3.1.0 → 3.3.0

package/ts_web/elements/idp-secure-account-card.ts

@@ -0,0 +1,267 @@
+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-otp-input.js';
+import './idp-status-icon.js';
+import './idp-button.js';
+import type { IIdpOtpChangeEventDetail } from './idp-otp-input.js';
+
+export type TIdpSecureAccountStage = 'choice' | 'totp' | 'backup-codes' | 'done';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-secure-account-card': IdpSecureAccountCard;
+  }
+}
+
+/**
+ * Post-registration security enrollment card. Purely presentational: the host
+ * runs the WebAuthn/TOTP requests and drives `stage`, reacting to
+ * idp-secure-passkey, idp-secure-totp, idp-secure-totp-verify, idp-secure-skip
+ * and idp-secure-continue.
+ */
+@customElement('idp-secure-account-card')
+export class IdpSecureAccountCard 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-secure-account-card stage="choice"></idp-secure-account-card>
+      <idp-secure-account-card stage="totp" totpSecret="JBSWY3DPEHPK3PXP" totpOtpauthUrl="otpauth://totp/idp.global:alex%40lossless.com?secret=JBSWY3DPEHPK3PXP&issuer=idp.global"></idp-secure-account-card>
+      <idp-secure-account-card stage="backup-codes" .backupCodes=${['1111-2222', '3333-4444', '5555-6666', '7777-8888', '9999-0000', '1234-5678']}></idp-secure-account-card>
+      <idp-secure-account-card stage="done" doneMethod="passkey"></idp-secure-account-card>
+    </div>
+  `;
+  public static demoGroups = ['idp.global v5 auth'];
+
+  @property({ type: String, reflect: true })
+  public accessor stage: TIdpSecureAccountStage = 'choice';
+
+  /** disables actions while the host performs a request */
+  @property({ type: Boolean })
+  public accessor busy = false;
+
+  @property({ type: String })
+  public accessor errorText = '';
+
+  /** manual-entry TOTP secret shown during the totp stage */
+  @property({ type: String })
+  public accessor totpSecret = '';
+
+  /** otpauth:// URL; rendered as a tappable link for phone authenticators */
+  @property({ type: String })
+  public accessor totpOtpauthUrl = '';
+
+  /** one-time backup codes shown after successful TOTP verification */
+  @property({ type: Array })
+  public accessor backupCodes: string[] = [];
+
+  /** which method completed, for the done stage copy */
+  @property({ type: String })
+  public accessor doneMethod: 'passkey' | 'totp' | '' = '';
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--idp-font);
+      }
+      .option-list {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-top: 16px;
+      }
+      .skip-row {
+        margin-top: 16px;
+        text-align: center;
+        font-size: 13px;
+      }
+      .skip-row a {
+        color: var(--idp-fg-3);
+        cursor: pointer;
+        text-decoration: none;
+      }
+      .skip-row a:hover {
+        color: var(--idp-fg-2);
+        text-decoration: underline;
+      }
+      .error-note {
+        margin-top: 14px;
+        padding: 9px 12px;
+        background: color-mix(in srgb, #ff3b30 8%, transparent);
+        border: 1px solid color-mix(in srgb, #ff3b30 30%, transparent);
+        border-radius: 11px;
+        font-size: 12.5px;
+        color: #d70015;
+      }
+      .totp-block {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        margin-top: 16px;
+      }
+      .code-block {
+        padding: 10px 12px;
+        background: var(--idp-bg);
+        border: 1px solid var(--idp-border);
+        border-radius: 11px;
+        font-family: ui-monospace, 'SF Mono', monospace;
+        font-size: 12px;
+        word-break: break-all;
+        user-select: all;
+      }
+      .code-label {
+        font-size: 11.5px;
+        color: var(--idp-fg-3);
+        margin-bottom: 4px;
+      }
+      .otp-row {
+        display: flex;
+        justify-content: center;
+        margin-top: 4px;
+      }
+      .backup-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 8px;
+        margin-top: 16px;
+      }
+      .backup-code {
+        padding: 8px 10px;
+        background: var(--idp-bg);
+        border: 1px solid var(--idp-border);
+        border-radius: 9px;
+        font-family: ui-monospace, 'SF Mono', monospace;
+        font-size: 12.5px;
+        text-align: center;
+        user-select: all;
+      }
+      .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;
+      }
+      .actions {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-top: 18px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const renderers: Record<TIdpSecureAccountStage, () => { heading: string; description: string; body: TemplateResult }> = {
+      choice: () => ({
+        heading: 'Secure your account',
+        description: 'Add a second factor now. You can also set this up later under Security in your console.',
+        body: html`
+          <div class="option-list">
+            <idp-option-row
+              tileTone="accent"
+              tileSize="34"
+              icon="fingerprint"
+              label="Add a passkey"
+              description="Sign in with Face ID, Touch ID, or a security key"
+              trailing="chevron"
+              @click=${() => { if (!this.busy) this.emit('idp-secure-passkey'); }}
+            ></idp-option-row>
+            <idp-option-row
+              tileTone="accent"
+              tileSize="34"
+              icon="lucide:Smartphone"
+              label="Use an authenticator app"
+              description="Time-based codes from an app like 1Password or Google Authenticator"
+              trailing="chevron"
+              @click=${() => { if (!this.busy) this.emit('idp-secure-totp'); }}
+            ></idp-option-row>
+          </div>
+          ${this.errorText ? html`<div class="error-note" role="alert">${this.errorText}</div>` : html``}
+          <div class="skip-row"><a @click=${() => this.emit('idp-secure-skip')}>Skip for now</a></div>
+        `,
+      }),
+      totp: () => ({
+        heading: 'Set up your authenticator',
+        description: 'Add the secret to your authenticator app, then enter the current 6-digit code.',
+        body: html`
+          <div class="totp-block">
+            <div>
+              <div class="code-label">Manual secret</div>
+              <div class="code-block">${this.totpSecret}</div>
+            </div>
+            ${this.totpOtpauthUrl
+              ? html`
+                  <div>
+                    <div class="code-label">Or open directly on this device</div>
+                    <div class="code-block"><a href=${this.totpOtpauthUrl}>${this.totpOtpauthUrl}</a></div>
+                  </div>
+                `
+              : html``}
+            <div class="otp-row">
+              <idp-otp-input
+                @idp-otp-complete=${(eventArg: CustomEvent<IIdpOtpChangeEventDetail>) => {
+                  this.dispatchEvent(new CustomEvent('idp-secure-totp-verify', {
+                    detail: { code: eventArg.detail.value },
+                    bubbles: true,
+                    composed: true,
+                  }));
+                }}
+              ></idp-otp-input>
+            </div>
+          </div>
+          ${this.errorText ? html`<div class="error-note" role="alert">${this.errorText}</div>` : html``}
+          <div class="skip-row"><a @click=${() => this.emit('idp-secure-back')}>Choose a different method</a></div>
+        `,
+      }),
+      'backup-codes': () => ({
+        heading: 'Save your backup codes',
+        description: 'Each code works once if you lose access to your authenticator. Store them somewhere safe.',
+        body: html`
+          <div class="backup-grid">
+            ${this.backupCodes.map((codeArg) => html`<div class="backup-code">${codeArg}</div>`)}
+          </div>
+          <div class="actions">
+            <idp-button variant="accent" shape="rect" block @click=${() => this.emit('idp-secure-continue')}>I saved these codes</idp-button>
+          </div>
+        `,
+      }),
+      done: () => ({
+        heading: this.doneMethod === 'totp' ? 'Authenticator added' : 'Passkey added',
+        description: '',
+        body: html`
+          <div class="status-block">
+            <idp-status-icon tone="ok" icon="check"></idp-status-icon>
+            <div class="status-text">
+              ${this.doneMethod === 'totp'
+                ? 'Sign-ins now require a code from your authenticator app.'
+                : 'You can now sign in with your passkey instead of a password.'}
+            </div>
+          </div>
+          <div class="actions">
+            <idp-button variant="accent" shape="rect" block @click=${() => this.emit('idp-secure-continue')}>Continue</idp-button>
+          </div>
+        `,
+      }),
+    };
+    const view = renderers[this.stage]();
+    return html`
+      <idp-auth-card heading=${view.heading} description=${view.description}>
+        ${view.body}
+      </idp-auth-card>
+    `;
+  }
+
+  private emit(eventName: string) {
+    this.dispatchEvent(new CustomEvent(eventName, { bubbles: true, composed: true }));
+  }
+}

package/ts_web/elements/index.ts

@@ -23,6 +23,7 @@ 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-secure-account-card.js';
 export * from './idp-approval-card.js';
 export * from './idp-mobile-frame.js';
 export * from './idp-inbox-preview.js';