@design.estate/dees-catalog 9.3.0 → 9.4.0

package/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.demo.ts

@@ -1,436 +1,131 @@
-import { html, css, cssManager, customElement, state, DeesElement } from '@design.estate/dees-element';
+import { html, css, cssManager, customElement, state, DeesElement, directives } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
-import type {
-  DeesSimpleLogin,
-  IDeesLoginPasskeyContext,
-  IDeesLoginProvider,
-  IDeesLoginProviderContext,
-  TDeesLoginMethod,
-} from './dees-simple-login.js';
+import { demoPage } from '../../../demos/templates.js';
+import type { DeesSimpleLogin, IDeesLoginProvider, IDeesLoginProviderContext, TDeesLoginPasskeyIntent, TDeesLoginMethod } from './dees-simple-login.js';
+import '../../00group-input/dees-input-dropdown/dees-input-dropdown.js';
+import '../../00group-input/dees-input-multitoggle/dees-input-multitoggle.js';
 
-/**
- * The catalog carries no third-party brand assets, so provider icons are always supplied by
- * the consumer. These are neutral Lucide stand-ins for what a real deployment would pass.
- */
-const demoProviders: IDeesLoginProvider[] = [
+const providers: IDeesLoginProvider[] = [
+  { id: 'workspace', label: 'Workspace account', icon: 'lucide:building2' },
   { id: 'idp-global', label: 'idp.global', icon: 'lucide:shieldCheck' },
-  { id: 'workspace', label: 'Workspace SSO', icon: 'lucide:building2' },
-  { id: 'email-link', label: 'Email link', icon: 'lucide:mail' },
 ];
-
-const manyProviders: IDeesLoginProvider[] = [
-  ...demoProviders,
-  { id: 'security-key', label: 'Security key', icon: 'lucide:usb' },
-  { id: 'smartcard', label: 'Smartcard', icon: 'lucide:idCard' },
-  { id: 'legacy-ldap', label: 'LDAP', icon: 'lucide:network', disabled: true },
+const variants = [
+  { key: 'full', option: 'All sign-in methods' }, { key: 'password', option: 'Password only' },
+  { key: 'passkey', option: 'Passkey only' }, { key: 'enroll', option: 'Passkey enrollment' },
+  { key: 'providers', option: 'Identity providers' }, { key: 'many', option: 'Six providers' },
+  { key: 'events', option: 'Consumer-managed events' }, { key: 'unavailable', option: 'Unavailable passkey' },
 ];
 
-const delay = (msArg: number) => new Promise<void>((resolve) => window.setTimeout(resolve, msArg));
-
-type TDemoVariant =
-  | 'legacy'
-  | 'full'
-  | 'passkeyOnly'
-  | 'enrollment'
-  | 'providerOnly'
-  | 'manyProviders'
-  | 'eventMode';
-
-interface IDemoVariantConfig {
-  key: TDemoVariant;
-  title: string;
-  description: string;
-}
-
-const variants: IDemoVariantConfig[] = [
-  {
-    key: 'legacy',
-    title: 'Default (password only)',
-    description:
-      'No new properties set. This is the pre-existing component: username, password, the ' +
-      'legacy `login` event and nothing else.',
-  },
-  {
-    key: 'full',
-    title: 'Passkey + providers + password',
-    description:
-      'Handler mode. Every method has its own busy and error state — the passkey handler ' +
-      'below always rejects, and the password form stays untouched by it.',
-  },
-  {
-    key: 'passkeyOnly',
-    title: 'Passkey only',
-    description: '`.passkey=${true} .password=${false}` — no credential fallback at all.',
-  },
-  {
-    key: 'enrollment',
-    title: 'Passkey enrollment + sign in',
-    description:
-      "`.passkeyIntents=${['authenticate', 'register']}` renders both ceremonies. " +
-      'This is what Onebox hand-rolls today.',
-  },
-  {
-    key: 'providerOnly',
-    title: 'Providers only',
-    description: 'A pure OIDC surface. The provider handler resolves after a short delay.',
-  },
-  {
-    key: 'manyProviders',
-    title: 'Six providers',
-    description:
-      'Four or more providers pair up into two columns instead of growing the card. The ' +
-      'last one is `disabled`.',
-  },
-  {
-    key: 'eventMode',
-    title: 'Event mode (no handlers)',
-    description:
-      'No handler properties. The component dispatches `passkey-login` / `provider-login` ' +
-      'and the demo drives busy and error state through `setBusy()` and `reportError()`.',
-  },
-];
-
-@customElement('dees-simple-login-demo')
-class DeesSimpleLoginDemo extends DeesElement {
-  @state()
-  accessor variant: TDemoVariant = 'full';
-
-  @state()
-  accessor log: string[] = [];
-
-  public static styles = [
-    themeDefaultStyles,
-    cssManager.defaultStyles,
-    css`
-      :host {
-        display: block;
-        position: absolute;
-        inset: 0;
-        font-family: var(--dees-font-family);
-        color: var(--dees-color-text-primary);
-        background: var(--dees-color-bg-canvas);
-      }
-
-      .layout {
-        display: grid;
-        grid-template-columns: 320px 1fr;
-        height: 100%;
-      }
-
-      .sidebar {
-        display: flex;
-        flex-direction: column;
-        gap: var(--dees-spacing-md);
-        padding: var(--dees-spacing-xl);
-        overflow-y: auto;
-        border-right: 1px solid var(--dees-color-border-default);
-        background: var(--dees-color-bg-secondary);
-      }
-
-      .sidebarTitle {
-        font-size: var(--dees-font-control-size);
-        font-weight: 600;
-        color: var(--dees-color-text-muted);
-        text-transform: uppercase;
-        letter-spacing: 0.06em;
-      }
-
-      .variant {
-        padding: var(--dees-spacing-md);
-        border: 1px solid var(--dees-color-border-subtle);
-        border-radius: var(--dees-radius-lg);
-        corner-shape: var(--dees-corner-shape);
-        background: var(--dees-color-bg-primary);
-        cursor: pointer;
-        transition: border-color var(--dees-transition-fast) var(--dees-ease-standard);
-      }
-
-      .variant:hover {
-        border-color: var(--dees-color-border-strong);
-      }
-
-      .variant.selected {
-        border-color: var(--dees-color-accent-primary);
-        box-shadow: 0 0 0 1px var(--dees-color-accent-primary);
-      }
-
-      .variantTitle {
-        font-size: var(--dees-font-control-size);
-        font-weight: 600;
-      }
-
-      .variantDescription {
-        margin-top: var(--dees-spacing-xs);
-        font-size: var(--dees-font-control-size-sm);
-        line-height: 1.45;
-        color: var(--dees-color-text-muted);
-      }
-
-      .logTitle {
-        margin-top: var(--dees-spacing-lg);
-      }
-
-      .logEntries {
-        display: flex;
-        flex-direction: column;
-        gap: var(--dees-spacing-xs);
-        font-family: var(--dees-font-family-mono);
-        font-size: var(--dees-font-control-size-sm);
-        color: var(--dees-color-text-secondary);
-        user-select: text;
-      }
-
-      .stage {
-        position: relative;
-        overflow: hidden;
-      }
-
-      .authenticated {
-        display: flex;
-        flex-direction: column;
-        gap: var(--dees-spacing-md);
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        text-align: center;
-      }
-
-      .authenticated h1 {
-        margin: 0;
-        font-size: var(--dees-font-title2-size);
-      }
-
-      .authenticated p {
-        margin: 0;
-        color: var(--dees-color-text-muted);
-      }
-    `,
-  ];
-
-  private get loginElement(): DeesSimpleLogin | null {
-    return this.shadowRoot?.querySelector('dees-simple-login') || null;
+@customElement('dees-demo-simple-login')
+class DeesDemoSimpleLogin extends DeesElement {
+  @state() private accessor variant = 'full';
+  @state() private accessor outcome = 'success';
+  @state() private accessor revision = 0;
+  @state() private accessor result = 'Choose a sign-in method. These accounts and responses are local samples.';
+  private work = new AbortController();
+  private get login(): DeesSimpleLogin | null { return this.shadowRoot?.querySelector('dees-simple-login') || null; }
+
+  public static styles = [themeDefaultStyles, cssManager.defaultStyles, css`
+    :host { display: grid; gap: 16px; font-family: var(--dees-font-family); }
+    .controls { display: flex; align-items: end; flex-wrap: wrap; gap: 16px; }
+    .controls dees-input-dropdown { width: 250px; max-width: 100%; }
+    .controls dees-button { margin-left: auto; }
+    .stage { height: 720px; min-height: 0; position: relative; border: 1px solid var(--dees-color-border-subtle); border-radius: var(--dees-radius-2xl); corner-shape: var(--dees-corner-shape); overflow: hidden; }
+    .authenticated { display: grid; place-content: center; justify-items: center; text-align: center; gap: 16px; height: 100%; padding: 32px; background: var(--dees-color-bg-canvas); }
+    .authenticated > dees-icon { color: var(--dees-color-text-success); }
+    h2 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.03em; }
+    p, output { margin: 0; color: var(--dees-color-text-secondary); font-size: 13px; line-height: 1.5; }
+    output { min-height: 40px; padding: 12px 16px; background: var(--dees-color-bg-secondary); border-radius: var(--dees-radius-lg); }
+    @media (max-width: 480px) { .stage { height: 760px; } }
+  `];
+
+  private resetDemo(): void {
+    this.work.abort(); this.work = new AbortController(); this.revision++;
+    this.result = 'Ready. No account or personal information is required.';
   }
-
-  private note(messageArg: string): void {
-    this.log = [messageArg, ...this.log].slice(0, 12);
+  public async disconnectedCallback(): Promise<void> { this.work.abort(); await super.disconnectedCallback(); }
+  public async connectedCallback(): Promise<void> { if (this.work.signal.aborted) this.work = new AbortController(); await super.connectedCallback(); }
+
+  private async respond(method: string, eventTarget?: { method: TDeesLoginMethod; providerId?: string; intent?: TDeesLoginPasskeyIntent }): Promise<void> {
+    const login = this.login;
+    if (!login) return;
+    const signal = this.work.signal;
+    const outcome = this.outcome;
+    if (eventTarget) login.setBusy(eventTarget, true);
+    const form = eventTarget?.method === 'password' ? login.shadowRoot?.querySelector('dees-form') : null;
+    form?.setStatus('pending', 'Signing in…');
+    this.result = `Waiting for ${method}…`;
+    const completed = await new Promise<boolean>(resolve => {
+      const abort = () => { window.clearTimeout(timer); resolve(false); };
+      const timer = window.setTimeout(() => { signal.removeEventListener('abort', abort); resolve(true); }, 700);
+      signal.addEventListener('abort', abort, { once: true });
+    });
+    if (!completed || signal.aborted || !login.isConnected) return;
+    if (eventTarget) login.setBusy(eventTarget, false);
+    form?.setStatus('normal', 'Sign in');
+    if (outcome === 'error') {
+      this.result = `${method} was declined. The other sign-in methods remain available.`;
+      if (eventTarget) login.reportError(eventTarget, 'Could not sign in. Try again or choose another method.');
+      else throw new Error('Could not sign in. Try again or choose another method.');
+      return;
+    }
+    this.result = `Signed in with ${method}.`;
+    await login.switchToSlottedContent();
+    if (signal.aborted || !login.isConnected) return;
+    await this.updateComplete;
+    login.querySelector('dees-button')?.focus();
   }
 
-  public render() {
-    return html`
-      <div class="layout">
-        <div class="sidebar">
-          <div class="sidebarTitle">Variants</div>
-          ${variants.map(
-            (variantArg) => html`
-              <div
-                class="variant ${this.variant === variantArg.key ? 'selected' : ''}"
-                @click=${() => {
-                  this.variant = variantArg.key;
-                  this.log = [];
-                }}
-              >
-                <div class="variantTitle">${variantArg.title}</div>
-                <div class="variantDescription">${variantArg.description}</div>
-              </div>
-            `,
-          )}
-          <div class="sidebarTitle logTitle">Event log</div>
-          <div class="logEntries">
-            ${this.log.length === 0
-              ? html`<div>— nothing yet —</div>`
-              : this.log.map((entry) => html`<div>${entry}</div>`)}
-          </div>
-        </div>
-        <div class="stage">${this.renderVariant()}</div>
-      </div>
-    `;
+  private signOut(): void {
+    const login = this.login;
+    if (!login) return;
+    login.reset();
+    const root = login.shadowRoot!;
+    root.querySelector('dees-form')?.setStatus('normal', 'Sign in');
+    Object.assign(root.querySelector<HTMLElement>('.login')!.style, { opacity: '1', transform: 'translateY(0px)' });
+    root.querySelector<HTMLElement>('.loginContainer')!.style.pointerEvents = 'all';
+    Object.assign(root.querySelector<HTMLElement>('.slotContainer')!.style, { opacity: '0', pointerEvents: 'none' });
+    this.result = 'Signed out. The same login surface is ready again.';
+    requestAnimationFrame(() => {
+      if (!login.isConnected) return;
+      const button = root.querySelector('dees-button');
+      const input = root.querySelector('dees-input-text');
+      (button || input)?.focus();
+    });
   }
 
-  private renderVariant() {
-    const shared = html`
-      <div class="authenticated">
-        <h1>Signed in</h1>
-        <p>This is the slotted content that appears after login.</p>
+  public render() {
+    const v = this.variant;
+    const eventMode = v === 'events';
+    const passkey = ['full', 'passkey', 'enroll', 'events', 'unavailable'].includes(v);
+    const password = ['full', 'password', 'many', 'events'].includes(v);
+    const configuredProviders = ['full', 'providers', 'events'].includes(v) ? providers : v === 'many' ? [
+      ...providers, { id: 'email', label: 'Email link', icon: 'lucide:mail' }, { id: 'key', label: 'Security key', icon: 'lucide:keyRound' },
+      { id: 'card', label: 'Smartcard', icon: 'lucide:contact' }, { id: 'directory', label: 'Directory', icon: 'lucide:network', disabled: true },
+    ] : [];
+    return html`<div class="controls">
+      <dees-input-dropdown label="Configuration" .options=${variants} .selectedOption=${variants.find(variant => variant.key === v)!}
+        @selectedOption=${(event: CustomEvent) => { this.variant = event.detail.key; this.resetDemo(); }}></dees-input-dropdown>
+      <dees-input-multitoggle label="Demo response" .options=${[{ key: 'success', label: 'Success' }, { key: 'error', label: 'Error' }]} .value=${this.outcome}
+        @change=${(event: CustomEvent) => { this.outcome = event.detail.value; }}></dees-input-multitoggle>
+      <dees-button type="ghost" text="Reset demo" @clicked=${this.resetDemo}></dees-button>
+    </div>
+    <div class="stage">${directives.keyed(`${v}-${this.revision}`, html`<dees-simple-login name="Studio" .passkey=${passkey} .passkeyAvailable=${v !== 'unavailable'} .password=${password}
+      .providers=${configuredProviders} .passkeyIntents=${v === 'enroll' ? ['authenticate', 'register'] : ['authenticate']}
+      .labels=${{ heading: v === 'enroll' ? 'Your key to Studio' : 'Welcome to Studio', subheading: v === 'enroll' ? 'Sign in or create a passkey for this device.' : 'A little space for your next big idea.' }}
+      .passkeyLoginHandler=${eventMode ? undefined : () => this.respond('your passkey')}
+      .passkeyRegisterHandler=${() => this.respond('a new passkey')}
+      .providerLoginHandler=${eventMode ? undefined : (context: IDeesLoginProviderContext) => this.respond(context.provider.label)}
+      .passwordLoginHandler=${eventMode || v === 'password' ? undefined : () => this.respond('your password')}
+      @passkey-login=${() => { if (eventMode) void this.respond('your passkey', { method: 'passkey' }); }}
+      @provider-login=${(event: CustomEvent) => { if (eventMode) void this.respond(event.detail.provider.label, { method: 'provider', providerId: event.detail.providerId }); }}
+      @login=${() => { if (eventMode || v === 'password') void this.respond('your password', { method: 'password' }); }}>
+      <dees-icon slot="brand" icon="lucide:layers" iconSize="26"></dees-icon>
+      <div class="authenticated"><dees-icon icon="lucide:circleCheck" iconSize="36"></dees-icon><h2>You're in.</h2><p>Your Studio workspace is ready.</p>
+        <dees-button type="accent" text="Sign out" @clicked=${this.signOut}></dees-button>
       </div>
-    `;
-
-    if (this.variant === 'legacy') {
-      return html`
-        <dees-simple-login
-          name="My Application"
-          @login=${(eventArg: CustomEvent) => {
-            const data = eventArg.detail?.data;
-            this.note(`login: ${data?.username} / ${'*'.repeat(data?.password?.length || 0)}`);
-            void this.loginElement?.switchToSlottedContent();
-          }}
-        >
-          ${shared}
-        </dees-simple-login>
-      `;
-    }
-
-    if (this.variant === 'full') {
-      return html`
-        <dees-simple-login
-          name="idp.global"
-          .passkey=${true}
-          .passkeyAvailable=${true}
-          .providers=${demoProviders}
-          .labels=${{ subheading: 'Choose how you want to continue' }}
-          .passkeyLoginHandler=${async (contextArg: IDeesLoginPasskeyContext) => {
-            this.note(`passkey handler (${contextArg.mediation})`);
-            await delay(900);
-            throw new Error('No passkey found for this account.');
-          }}
-          .providerLoginHandler=${async (contextArg: IDeesLoginProviderContext) => {
-            this.note(`provider handler: ${contextArg.providerId}`);
-            await delay(900);
-            void this.loginElement?.switchToSlottedContent();
-          }}
-          .passwordLoginHandler=${async () => {
-            this.note('password handler');
-            await delay(900);
-            void this.loginElement?.switchToSlottedContent();
-          }}
-          @login=${(eventArg: CustomEvent) => {
-            this.note(`login event: ${eventArg.detail?.data?.username}`);
-          }}
-        >
-          ${shared}
-        </dees-simple-login>
-      `;
-    }
-
-    if (this.variant === 'passkeyOnly') {
-      return html`
-        <dees-simple-login
-          name="Onebox"
-          .passkey=${true}
-          .passkeyAvailable=${true}
-          .password=${false}
-          .labels=${{ subheading: 'Use a passkey registered for your Onebox account' }}
-          .passkeyLoginHandler=${async () => {
-            this.note('passkey sign in');
-            await delay(900);
-            void this.loginElement?.switchToSlottedContent();
-          }}
-        >
-          ${shared}
-        </dees-simple-login>
-      `;
-    }
-
-    if (this.variant === 'enrollment') {
-      return html`
-        <dees-simple-login
-          name="Onebox"
-          .passkey=${true}
-          .passkeyAvailable=${true}
-          .password=${false}
-          .passkeyIntents=${['authenticate', 'register']}
-          .labels=${{ subheading: 'Sign in, or enroll this device' }}
-          .passkeyLoginHandler=${async () => {
-            this.note('passkey authenticate');
-            await delay(900);
-            throw new Error('This device has no passkey for Onebox yet.');
-          }}
-          .passkeyRegisterHandler=${async () => {
-            this.note('passkey register');
-            await delay(900);
-            void this.loginElement?.switchToSlottedContent();
-          }}
-        >
-          ${shared}
-        </dees-simple-login>
-      `;
-    }
-
-    if (this.variant === 'providerOnly') {
-      return html`
-        <dees-simple-login
-          name="login.idp.global"
-          .password=${false}
-          .providers=${demoProviders}
-          .labels=${{ subheading: 'Continue with one of your identity providers' }}
-          .providerLoginHandler=${async (contextArg: IDeesLoginProviderContext) => {
-            this.note(`provider handler: ${contextArg.providerId}`);
-            await delay(900);
-            void this.loginElement?.switchToSlottedContent();
-          }}
-        >
-          ${shared}
-        </dees-simple-login>
-      `;
-    }
-
-    if (this.variant === 'manyProviders') {
-      return html`
-        <dees-simple-login
-          name="login.idp.global"
-          .providers=${manyProviders}
-          .methodOrder=${['provider', 'password'] as TDeesLoginMethod[]}
-          .providerLoginHandler=${async (contextArg: IDeesLoginProviderContext) => {
-            this.note(`provider handler: ${contextArg.providerId}`);
-            await delay(600);
-            throw new Error('Discovery endpoint unreachable.');
-          }}
-          @login=${() => this.note('login event')}
-        >
-          ${shared}
-        </dees-simple-login>
-      `;
-    }
-
-    // eventMode
-    return html`
-      <dees-simple-login
-        name="Cloudly"
-        .passkey=${true}
-        .passkeyAvailable=${true}
-        .providers=${demoProviders}
-        @passkey-login=${async (eventArg: CustomEvent) => {
-          this.note(`passkey-login event (username: ${eventArg.detail.username || '—'})`);
-          const element = this.loginElement;
-          element?.setBusy({ method: 'passkey' }, true);
-          await delay(900);
-          element?.setBusy({ method: 'passkey' }, false);
-          element?.reportError({ method: 'passkey' }, 'Consumer-reported: ceremony declined.');
-        }}
-        @provider-login=${async (eventArg: CustomEvent) => {
-          this.note(`provider-login event: ${eventArg.detail.providerId}`);
-          const element = this.loginElement;
-          const target = { method: 'provider' as const, providerId: eventArg.detail.providerId };
-          element?.setBusy(target, true);
-          await delay(900);
-          element?.setBusy(target, false);
-          element?.reportError(target, 'Consumer-reported: redirect blocked.');
-        }}
-        @login=${(eventArg: CustomEvent) => {
-          this.note(`login event: ${eventArg.detail?.data?.username}`);
-          this.loginElement?.reportError('password', 'Consumer-reported: invalid credentials.');
-        }}
-      >
-        ${shared}
-      </dees-simple-login>
-    `;
+    </dees-simple-login>`)}</div><output role="status">${this.result}</output>`;
   }
 }
 
-export const demoFunc = () => html`
-  <style>
-    body {
-      margin: 0;
-      padding: 0;
-    }
-    .demo-container {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-  </style>
-  <div class="demo-container">
-    <dees-simple-login-demo></dees-simple-login-demo>
-  </div>
-`;
+export const demoFunc = () => demoPage('Sign in', 'One welcoming surface. Passkeys, workspace accounts, and passwords working together.', html`<dees-demo-simple-login></dees-demo-simple-login>`);