@sentropic/auth-ui 0.2.0

package/src/components/AuthDevicePair.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import {
+    createDefaultAuthUiLabels,
+    type AuthUiError,
+    type AuthUiLabels,
+    type AuthUiTransport,
+  } from '../contracts.js';
+
+  interface Props {
+    transport: AuthUiTransport;
+    labels?: Partial<AuthUiLabels>;
+    /** Optional source for an initial user code (e.g. from `?user_code=PAIR-XXXX`). */
+    userCodeSource?: () => string | null | undefined;
+    onPaired?: (deviceName?: string) => void | Promise<void>;
+    onError?: (error: AuthUiError) => void;
+  }
+
+  let { transport, labels, userCodeSource, onPaired, onError }: Props = $props();
+
+  const resolvedLabels = $derived(createDefaultAuthUiLabels(labels ?? {}));
+
+  let userCode = $state('');
+  let deviceName = $state('');
+  let submitting = $state(false);
+  let error = $state('');
+  let success = $state(false);
+  let pairedDeviceName = $state<string | undefined>(undefined);
+
+  onMount(() => {
+    const initial = userCodeSource?.();
+    if (initial) {
+      userCode = initial.toUpperCase();
+    }
+  });
+
+  async function pair(event?: SubmitEvent): Promise<void> {
+    event?.preventDefault();
+    error = '';
+    const code = userCode.trim().toUpperCase();
+    if (!code) {
+      error = resolvedLabels.devicePairErrorCodeRequired;
+      return;
+    }
+
+    submitting = true;
+    const result = await transport.approveDevicePairing({
+      userCode: code,
+      deviceName: deviceName.trim() || undefined,
+    });
+    submitting = false;
+
+    if (!result.ok) {
+      const message = result.error.message || resolvedLabels.devicePairErrorGeneric;
+      const looksLikeNotFound = /not[\s-]?found|expired|invalid/i.test(message);
+      error = looksLikeNotFound ? resolvedLabels.devicePairErrorNotFound : message;
+      onError?.(result.error);
+      return;
+    }
+
+    success = true;
+    pairedDeviceName = result.value.deviceName;
+    await onPaired?.(pairedDeviceName);
+  }
+</script>
+
+<div class="auth-ui-device-pair">
+  <header class="auth-ui-header">
+    <h1 class="auth-ui-title">{resolvedLabels.devicePairTitle}</h1>
+    <p class="auth-ui-subtitle">{resolvedLabels.devicePairSubtitle}</p>
+  </header>
+
+  {#if error}
+    <div class="auth-ui-alert auth-ui-alert--error" role="alert">{error}</div>
+  {/if}
+
+  {#if success}
+    <div class="auth-ui-alert auth-ui-alert--success" role="status">
+      {resolvedLabels.devicePairSuccess}
+    </div>
+    <div class="auth-ui-actions">
+      <slot name="back-to-devices">
+        <span class="auth-ui-link">{resolvedLabels.devicePairBack}</span>
+      </slot>
+    </div>
+  {:else}
+    <form class="auth-ui-form" onsubmit={pair}>
+      <div class="auth-ui-field">
+        <label for="auth-ui-pair-code" class="auth-ui-label">
+          {resolvedLabels.devicePairCodeLabel}
+        </label>
+        <input
+          id="auth-ui-pair-code"
+          type="text"
+          bind:value={userCode}
+          oninput={() => (userCode = userCode.toUpperCase())}
+          placeholder={resolvedLabels.devicePairCodePlaceholder}
+          autocomplete="off"
+          class="auth-ui-input auth-ui-input--mono"
+        />
+      </div>
+
+      <div class="auth-ui-field">
+        <label for="auth-ui-pair-device-name" class="auth-ui-label">
+          {resolvedLabels.devicePairDeviceNameLabel}
+        </label>
+        <input
+          id="auth-ui-pair-device-name"
+          type="text"
+          bind:value={deviceName}
+          placeholder={resolvedLabels.devicePairDeviceNamePlaceholder}
+          autocomplete="off"
+          class="auth-ui-input"
+        />
+      </div>
+
+      <div class="auth-ui-form-actions">
+        <button
+          type="submit"
+          disabled={submitting}
+          class="auth-ui-button auth-ui-button--primary"
+        >
+          {submitting ? resolvedLabels.devicePairConfirming : resolvedLabels.devicePairConfirm}
+        </button>
+        <slot name="cancel">
+          <span class="auth-ui-link auth-ui-link--secondary">{resolvedLabels.devicePairBack}</span>
+        </slot>
+      </div>
+    </form>
+  {/if}
+</div>
+
+<style>
+  .auth-ui-device-pair {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    max-width: 28rem;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+    font-family: var(--auth-font-family, system-ui, -apple-system, sans-serif);
+    color: var(--auth-text, #111827);
+  }
+  .auth-ui-header { display: flex; flex-direction: column; gap: 0.5rem; }
+  .auth-ui-title { margin: 0; font-size: 1.5rem; font-weight: 700; }
+  .auth-ui-subtitle { margin: 0; font-size: 0.875rem; color: var(--auth-muted, #6b7280); }
+  .auth-ui-alert {
+    padding: 0.75rem 1rem;
+    border-radius: var(--auth-radius, 0.375rem);
+    font-size: 0.875rem;
+  }
+  .auth-ui-alert--error { background: var(--auth-error-bg, #fef2f2); color: var(--auth-error-text, #991b1b); }
+  .auth-ui-alert--success { background: var(--auth-success-bg, #f0fdf4); color: var(--auth-success-text, #166534); }
+  .auth-ui-form { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; background: var(--auth-surface, #ffffff); border-radius: var(--auth-radius-lg, 0.5rem); box-shadow: var(--auth-shadow, 0 1px 2px rgba(0,0,0,0.05)); }
+  .auth-ui-field { display: flex; flex-direction: column; gap: 0.375rem; }
+  .auth-ui-label { font-size: 0.875rem; font-weight: 500; color: var(--auth-text, #111827); }
+  .auth-ui-input {
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--auth-border, #d1d5db);
+    border-radius: var(--auth-radius, 0.375rem);
+    font-size: 0.875rem;
+  }
+  .auth-ui-input:focus { outline: none; border-color: var(--auth-primary, #4f46e5); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); }
+  .auth-ui-input--mono { font-family: var(--auth-mono, ui-monospace, "SFMono-Regular", monospace); letter-spacing: 0.15em; text-transform: uppercase; }
+  .auth-ui-form-actions { display: flex; align-items: center; gap: 0.75rem; padding-top: 0.5rem; }
+  .auth-ui-button { padding: 0.5rem 1rem; border: none; border-radius: var(--auth-radius, 0.375rem); font-size: 0.875rem; font-weight: 500; cursor: pointer; }
+  .auth-ui-button:disabled { opacity: 0.5; cursor: not-allowed; }
+  .auth-ui-button--primary { background: var(--auth-primary, #4f46e5); color: var(--auth-primary-text, #ffffff); }
+  .auth-ui-link { color: var(--auth-link, #4f46e5); font-size: 0.875rem; font-weight: 500; text-decoration: none; cursor: pointer; }
+  .auth-ui-link--secondary { color: var(--auth-link-secondary, #6b7280); }
+  .auth-ui-link:hover { text-decoration: underline; }
+  .auth-ui-actions { text-align: center; }
+</style>

package/src/components/AuthDevicePair.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Component } from 'svelte';
+import type {
+  AuthUiError,
+  AuthUiLabels,
+  AuthUiTransport,
+} from '../contracts.js';
+
+export interface AuthDevicePairProps {
+  transport: AuthUiTransport;
+  labels?: Partial<AuthUiLabels>;
+  userCodeSource?: () => string | null | undefined;
+  onPaired?: (deviceName?: string) => void | Promise<void>;
+  onError?: (error: AuthUiError) => void;
+}
+
+declare const AuthDevicePair: Component<AuthDevicePairProps>;
+export default AuthDevicePair;

package/src/components/AuthDevices.svelte

@@ -0,0 +1,313 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import {
+    createDefaultAuthUiLabels,
+    type AuthUiCredential,
+    type AuthUiError,
+    type AuthUiLabels,
+    type AuthUiTransport,
+  } from '../contracts.js';
+
+  interface Props {
+    transport: AuthUiTransport;
+    labels?: Partial<AuthUiLabels>;
+    /** Host-controlled date formatter; defaults to ISO date. */
+    formatDate?: (iso: string) => string;
+    /** Async confirmation hook so hosts can render a modal instead of `window.confirm`. */
+    confirmRevoke?: (message: string) => boolean | Promise<boolean>;
+    onUnauthorized?: () => void;
+    onError?: (error: AuthUiError) => void;
+  }
+
+  let {
+    transport,
+    labels,
+    formatDate = defaultFormatDate,
+    confirmRevoke = defaultConfirm,
+    onUnauthorized,
+    onError,
+  }: Props = $props();
+
+  const resolvedLabels = $derived(createDefaultAuthUiLabels(labels ?? {}));
+
+  let credentials = $state<AuthUiCredential[]>([]);
+  let loading = $state(true);
+  let error = $state('');
+  let editingId = $state<string | null>(null);
+  let editingName = $state('');
+
+  function defaultFormatDate(iso: string): string {
+    return iso.slice(0, 10);
+  }
+
+  function defaultConfirm(message: string): boolean {
+    if (typeof window === 'undefined') {
+      return true;
+    }
+    return window.confirm(message);
+  }
+
+  function formatTemplate(template: string, values: Record<string, string>): string {
+    return template.replace(/\{(\w+)\}/g, (_, key) => values[key] ?? '');
+  }
+
+  onMount(loadCredentials);
+
+  async function loadCredentials(): Promise<void> {
+    loading = true;
+    error = '';
+    const result = await transport.listCredentials();
+    loading = false;
+    if (!result.ok) {
+      handleError(result.error, resolvedLabels.devicesErrorLoad);
+      return;
+    }
+    credentials = result.value.credentials;
+  }
+
+  function startEdit(credential: AuthUiCredential): void {
+    editingId = credential.id;
+    editingName = credential.deviceName;
+  }
+
+  function cancelEdit(): void {
+    editingId = null;
+    editingName = '';
+  }
+
+  async function saveDeviceName(credential: AuthUiCredential): Promise<void> {
+    const result = await transport.renameCredential({
+      credentialId: credential.id,
+      deviceName: editingName,
+    });
+    if (!result.ok) {
+      handleError(result.error, resolvedLabels.devicesErrorUpdate);
+      return;
+    }
+    editingId = null;
+    editingName = '';
+    await loadCredentials();
+  }
+
+  async function revoke(credential: AuthUiCredential): Promise<void> {
+    const message = formatTemplate(resolvedLabels.devicesConfirmRevoke, {
+      deviceName: credential.deviceName,
+    });
+    const confirmed = await confirmRevoke(message);
+    if (!confirmed) {
+      return;
+    }
+    const result = await transport.revokeCredential({ credentialId: credential.id });
+    if (!result.ok) {
+      handleError(result.error, resolvedLabels.devicesErrorRevoke);
+      return;
+    }
+    await loadCredentials();
+  }
+
+  function handleError(err: AuthUiError, fallback: string): void {
+    error = err.message || fallback;
+    if (err.code === 'transport_error' && err.message.toLowerCase().includes('unauth')) {
+      onUnauthorized?.();
+    }
+    onError?.(err);
+  }
+</script>
+
+<div class="auth-ui-devices">
+  <header class="auth-ui-header">
+    <h1 class="auth-ui-title">{resolvedLabels.devicesTitle}</h1>
+    <p class="auth-ui-subtitle">{resolvedLabels.devicesSubtitle}</p>
+  </header>
+
+  {#if error}
+    <div class="auth-ui-alert auth-ui-alert--error" role="alert">{error}</div>
+  {/if}
+
+  <slot name="pair-cta">
+    <div class="auth-ui-cta">
+      <p class="auth-ui-cta__text">{resolvedLabels.devicePairSubtitle}</p>
+      <span class="auth-ui-button auth-ui-button--primary auth-ui-button--inline">
+        {resolvedLabels.devicePairTitle}
+      </span>
+    </div>
+  </slot>
+
+  {#if loading}
+    <div class="auth-ui-loading" role="status">
+      <div class="auth-ui-spinner" aria-hidden="true"></div>
+      <p class="auth-ui-loading__label">{resolvedLabels.loading}</p>
+    </div>
+  {:else if credentials.length === 0}
+    <div class="auth-ui-empty">
+      <p>{resolvedLabels.devicesEmpty}</p>
+      <slot name="register-device">
+        <span class="auth-ui-button auth-ui-button--primary auth-ui-button--inline">
+          {resolvedLabels.devicesRegister}
+        </span>
+      </slot>
+    </div>
+  {:else}
+    <ul class="auth-ui-list">
+      {#each credentials as credential (credential.id)}
+        <li class="auth-ui-list__item">
+          <div class="auth-ui-list__primary">
+            {#if editingId === credential.id}
+              <div class="auth-ui-edit">
+                <input
+                  type="text"
+                  class="auth-ui-input"
+                  bind:value={editingName}
+                  onkeydown={(e) => {
+                    if (e.key === 'Enter') {
+                      void saveDeviceName(credential);
+                    } else if (e.key === 'Escape') {
+                      cancelEdit();
+                    }
+                  }}
+                />
+                <button
+                  type="button"
+                  class="auth-ui-button auth-ui-button--primary auth-ui-button--small"
+                  onclick={() => saveDeviceName(credential)}
+                >
+                  {resolvedLabels.save}
+                </button>
+                <button
+                  type="button"
+                  class="auth-ui-button auth-ui-button--ghost auth-ui-button--small"
+                  onclick={cancelEdit}
+                >
+                  {resolvedLabels.cancel}
+                </button>
+              </div>
+            {:else}
+              <h3 class="auth-ui-list__name">{credential.deviceName}</h3>
+            {/if}
+            <div class="auth-ui-list__meta">
+              <span>{formatTemplate(resolvedLabels.devicesAddedOn, { date: formatDate(credential.createdAt) })}</span>
+              {#if credential.lastUsedAt}
+                <span>{formatTemplate(resolvedLabels.devicesLastUsed, { date: formatDate(credential.lastUsedAt) })}</span>
+              {/if}
+              {#if credential.uv}
+                <span class="auth-ui-badge">{resolvedLabels.devicesUvEnabled}</span>
+              {/if}
+            </div>
+          </div>
+          {#if editingId !== credential.id}
+            <div class="auth-ui-list__actions">
+              <button type="button" class="auth-ui-link" onclick={() => startEdit(credential)}>
+                {resolvedLabels.devicesRename}
+              </button>
+              <button type="button" class="auth-ui-link auth-ui-link--danger" onclick={() => revoke(credential)}>
+                {resolvedLabels.devicesRevoke}
+              </button>
+            </div>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+    <div class="auth-ui-actions">
+      <slot name="add-device">
+        <span class="auth-ui-link">{resolvedLabels.devicesAddNew}</span>
+      </slot>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .auth-ui-devices {
+    display: flex; flex-direction: column; gap: 1.5rem;
+    max-width: 48rem; margin: 0 auto; padding: 2rem 1rem;
+    font-family: var(--auth-font-family, system-ui, -apple-system, sans-serif);
+    color: var(--auth-text, #111827);
+  }
+  .auth-ui-header { display: flex; flex-direction: column; gap: 0.5rem; }
+  .auth-ui-title { margin: 0; font-size: 1.75rem; font-weight: 700; }
+  .auth-ui-subtitle { margin: 0; font-size: 0.875rem; color: var(--auth-muted, #6b7280); }
+  .auth-ui-alert {
+    padding: 0.75rem 1rem;
+    border-radius: var(--auth-radius, 0.375rem);
+    font-size: 0.875rem;
+  }
+  .auth-ui-alert--error { background: var(--auth-error-bg, #fef2f2); color: var(--auth-error-text, #991b1b); }
+  .auth-ui-cta {
+    display: flex; align-items: center; justify-content: space-between;
+    gap: 1rem; padding: 1rem;
+    background: var(--auth-info-bg, #eef2ff);
+    color: var(--auth-info-text, #312e81);
+    border-radius: var(--auth-radius, 0.375rem);
+    font-size: 0.875rem;
+  }
+  .auth-ui-cta__text { margin: 0; }
+  .auth-ui-loading { text-align: center; padding: 3rem 0; }
+  .auth-ui-spinner {
+    display: inline-block; width: 3rem; height: 3rem;
+    border: 2px solid transparent;
+    border-bottom-color: var(--auth-primary, #4f46e5);
+    border-radius: 50%; animation: auth-ui-spin 0.75s linear infinite;
+  }
+  .auth-ui-loading__label { margin-top: 1rem; font-size: 0.875rem; color: var(--auth-muted, #6b7280); }
+  @keyframes auth-ui-spin { to { transform: rotate(360deg); } }
+  .auth-ui-empty {
+    display: flex; flex-direction: column; align-items: center; gap: 1rem;
+    padding: 3rem 1rem;
+    background: var(--auth-surface, #ffffff);
+    border-radius: var(--auth-radius-lg, 0.5rem);
+    box-shadow: var(--auth-shadow, 0 1px 2px rgba(0,0,0,0.05));
+    color: var(--auth-muted, #6b7280);
+  }
+  .auth-ui-list {
+    margin: 0; padding: 0; list-style: none;
+    background: var(--auth-surface, #ffffff);
+    border-radius: var(--auth-radius-lg, 0.5rem);
+    box-shadow: var(--auth-shadow, 0 1px 2px rgba(0,0,0,0.05));
+    overflow: hidden;
+  }
+  .auth-ui-list__item {
+    display: flex; align-items: flex-start; justify-content: space-between;
+    gap: 1rem; padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid var(--auth-border, #e5e7eb);
+  }
+  .auth-ui-list__item:last-child { border-bottom: none; }
+  .auth-ui-list__primary { flex: 1; display: flex; flex-direction: column; gap: 0.375rem; }
+  .auth-ui-list__name { margin: 0; font-size: 1.05rem; font-weight: 600; }
+  .auth-ui-list__meta {
+    display: flex; flex-wrap: wrap; gap: 0.75rem;
+    font-size: 0.8rem; color: var(--auth-muted, #6b7280);
+  }
+  .auth-ui-list__actions { display: flex; align-items: center; gap: 0.5rem; }
+  .auth-ui-edit { display: flex; align-items: center; gap: 0.5rem; }
+  .auth-ui-input {
+    padding: 0.375rem 0.75rem;
+    border: 1px solid var(--auth-border, #d1d5db);
+    border-radius: var(--auth-radius, 0.375rem);
+    font-size: 0.875rem;
+  }
+  .auth-ui-input:focus { outline: none; border-color: var(--auth-primary, #4f46e5); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); }
+  .auth-ui-button {
+    padding: 0.5rem 1rem; border: none;
+    border-radius: var(--auth-radius, 0.375rem);
+    font-size: 0.875rem; font-weight: 500; cursor: pointer;
+  }
+  .auth-ui-button--small { padding: 0.375rem 0.75rem; }
+  .auth-ui-button--inline { display: inline-flex; }
+  .auth-ui-button--primary { background: var(--auth-primary, #4f46e5); color: var(--auth-primary-text, #ffffff); }
+  .auth-ui-button--ghost { background: var(--auth-ghost-bg, #e5e7eb); color: var(--auth-text, #111827); }
+  .auth-ui-badge {
+    display: inline-flex; align-items: center;
+    padding: 0.15rem 0.5rem;
+    background: var(--auth-success-bg, #d1fae5);
+    color: var(--auth-success-text, #065f46);
+    border-radius: var(--auth-radius, 0.375rem);
+    font-size: 0.7rem; font-weight: 500;
+  }
+  .auth-ui-link {
+    background: none; border: none; cursor: pointer;
+    color: var(--auth-link, #4f46e5);
+    font-size: 0.875rem; font-weight: 500;
+  }
+  .auth-ui-link--danger { color: var(--auth-danger, #dc2626); }
+  .auth-ui-link:hover { text-decoration: underline; }
+  .auth-ui-actions { text-align: center; }
+</style>

package/src/components/AuthDevices.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Component } from 'svelte';
+import type {
+  AuthUiError,
+  AuthUiLabels,
+  AuthUiTransport,
+} from '../contracts.js';
+
+export interface AuthDevicesProps {
+  transport: AuthUiTransport;
+  labels?: Partial<AuthUiLabels>;
+  formatDate?: (iso: string) => string;
+  confirmRevoke?: (message: string) => boolean | Promise<boolean>;
+  onUnauthorized?: () => void;
+  onError?: (error: AuthUiError) => void;
+}
+
+declare const AuthDevices: Component<AuthDevicesProps>;
+export default AuthDevices;