@design.estate/dees-catalog 3.97.1 → 3.98.0

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

@@ -1,4 +1,420 @@
-import { html } from '@design.estate/dees-element';
+import { html, css, cssManager, customElement, state, DeesElement } from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import type {
+  DeesSimpleLogin,
+  IDeesLoginPasskeyContext,
+  IDeesLoginProvider,
+  IDeesLoginProviderContext,
+  TDeesLoginMethod,
+} from './dees-simple-login.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[] = [
+  { 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 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;
+  }
+
+  private note(messageArg: string): void {
+    this.log = [messageArg, ...this.log].slice(0, 12);
+  }
+
+  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 renderVariant() {
+    const shared = html`
+      <div class="authenticated">
+        <h1>Signed in</h1>
+        <p>This is the slotted content that appears after login.</p>
+      </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>
+    `;
+  }
+}
 
 export const demoFunc = () => html`
   <style>
@@ -15,23 +431,6 @@ export const demoFunc = () => html`
     }
   </style>
   <div class="demo-container">
-    <dees-simple-login 
-      name="My Application"
-      @login=${(e: CustomEvent) => {
-        console.log('Login event received:', e.detail);
-        const loginData = e.detail?.data || e.detail;
-        if (loginData?.username && loginData?.password) {
-          alert(`Login attempted with:\nUsername: ${loginData.username}\nPassword: ${loginData.password}`);
-          // Here you would typically validate credentials and show the slotted content
-        } else {
-          console.error('Invalid login data structure:', e.detail);
-        }
-      }}
-    >
-      <div style="padding: 40px; text-align: center;">
-        <h1>Welcome!</h1>
-        <p>This is the slotted content that appears after login.</p>
-      </div>
-    </dees-simple-login>
+    <dees-simple-login-demo></dees-simple-login-demo>
   </div>
 `;