@toa.io/extensions.configuration 1.0.0-alpha.272 → 1.0.0-alpha.274

package/ui/src/@/iam/ui/Authorized.ts

@@ -0,0 +1,65 @@
+import { dev } from '$app/environment'
+import type { Snippet } from 'svelte'
+import type { Echo } from '@/iam'
+
+interface Checks {
+  /** Development environment */
+  dev?: boolean
+  /** Beta domain */
+  beta?: boolean
+  /** `dev` or `beta` */
+  debug?: boolean
+  /** Required role */
+  role?: string
+}
+
+export interface Props extends Checks {
+  children: Snippet
+  /**
+   * What stands in place of the children when the checks say no. Without it the account
+   * is told what it is missing and given its own id to ask with; a gate that guards a
+   * control rather than a screen passes an empty snippet.
+   */
+  denied?: Snippet
+}
+
+type Principal = Pick<Echo, 'id' | 'roles'>
+
+export function authorize(checks: Checks, principal: Principal | null): boolean {
+  if (checks.dev !== undefined)
+    if (checks.dev === dev)
+      return true
+
+  if (checks.beta !== undefined)
+    if (checks.beta === beta())
+      return true
+
+  if (checks.debug !== undefined)
+    if (checks.debug === debug())
+      return true
+
+  if (checks.role !== undefined && principal?.roles !== undefined)
+    if (scoped(principal.roles, checks.role))
+      return true
+
+  return false
+}
+
+function beta(): boolean {
+  return typeof window !== 'undefined' && window.location.hostname.startsWith('beta.')
+}
+
+function debug(): boolean {
+  return dev || beta()
+}
+
+/**
+ * `app` role matches `app`, `app:codes` and all nested scope
+ * `app:codes` role matches `app:codes` and all nested scopes, but not `app`
+ */
+function scoped(roles: string[], scope: string): boolean {
+  for (const role of roles)
+    if (role === scope || scope.startsWith(role + ':')) return true
+
+  return false
+}

package/ui/src/@/iam/ui/Card.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import * as Card from '$ui/card'
+  import type { Props } from './Card'
+
+  const { title, description, action }: Props = $props()
+</script>
+
+<Card.Root class="w-full">
+  <Card.Header>
+    <Card.Title>{title}</Card.Title>
+    <Card.Description>{description}</Card.Description>
+  </Card.Header>
+  <Card.Content class="flex flex-col">{@render action()}</Card.Content>
+</Card.Root>

package/ui/src/@/iam/ui/Card.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte'
+
+export interface Props {
+  title: string
+  description: string
+  action: Snippet
+}

package/ui/src/@/iam/ui/Refresh.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { LogOut } from '@lucide/svelte'
+  import { dict } from '@/iam/ui/intl'
+  import { logout, type Method } from '@/iam'
+  import { Button } from '$ui/button'
+  import { Refresh as PasswordRefresh } from './password'
+  import { Refresh as PasskeyRefresh } from './passkey'
+  import { Refresh as OIDCRefresh } from './oidc'
+  import Card from './Card.svelte'
+  import type { AccountLike } from './AccountLike'
+
+  const { account, method }: { account: AccountLike; method: Method | null } = $props()
+
+  onMount(() => {
+    if (method === null) logout()
+  })
+</script>
+
+<div class="flex flex-col items-center gap-4 w-full">
+  <Card title={$dict.auth.refresh.title} description={$dict.auth.refresh.description(account.name)}>
+    {#snippet action()}
+      {#if method === 'passkey'}
+        <PasskeyRefresh {account} />
+      {:else if method === 'password'}
+        <PasswordRefresh />
+      {:else if method === 'apple'}
+        <OIDCRefresh idp="apple" />
+      {:else if method === 'google'}
+        <OIDCRefresh idp="google" />
+      {/if}
+    {/snippet}
+  </Card>
+
+  <Button variant="outline" onclick={logout}>
+    <LogOut />
+    {$dict.auth.signout}
+  </Button>
+</div>

package/ui/src/@/iam/ui/credentials/Credentials.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { Async } from 'svas'
+  import { account } from '@/iam'
+  import * as Item from '$ui/item'
+  import { Transfer } from './transfer'
+  import { providers } from './providers'
+  import { Passkeys } from './passkeys'
+  import Provider from './Provider.svelte'
+  import type { Props } from './Credentials'
+
+  const { class: classes }: Props = $props()
+</script>
+
+<Async store={account}>
+  {#snippet awaited()}
+    <div class={['flex flex-col gap-2', classes]}>
+      <Item.Group class="gap-2">
+        <Passkeys />
+        {#each providers as provider (provider.id)}
+          <Provider {provider} />
+        {/each}
+      </Item.Group>
+      <Transfer class="self-start" />
+    </div>
+  {/snippet}
+</Async>

package/ui/src/@/iam/ui/credentials/Credentials.ts

@@ -0,0 +1,5 @@
+import type { ClassValue } from 'svelte/elements'
+
+export interface Props {
+  class?: ClassValue
+}

package/ui/src/@/iam/ui/credentials/Provider.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import * as Item from '$ui/item'
+  import { Button } from '$ui/button'
+  import { dict } from '../intl'
+  import type { Props } from './Provider'
+
+  const { provider }: Props = $props()
+
+  const Icon = $derived(provider.icon)
+  const copy = $derived($dict.credentials[provider.id])
+</script>
+
+<Item.Root variant="outline">
+  <Item.Media variant="icon">
+    <Icon class="size-5" />
+  </Item.Media>
+  <Item.Content>
+    <Item.Title>{copy.title}</Item.Title>
+    <Item.Description>{copy.description}</Item.Description>
+  </Item.Content>
+  <Item.Actions>
+    <Button variant="secondary">{$dict.credentials.connect}</Button>
+  </Item.Actions>
+</Item.Root>

package/ui/src/@/iam/ui/credentials/Provider.ts

@@ -0,0 +1,5 @@
+import type { Descriptor } from './providers'
+
+export interface Props {
+  provider: Descriptor
+}

package/ui/src/@/iam/ui/credentials/index.ts

@@ -0,0 +1 @@
+export { default as Credentials } from './Credentials.svelte'

package/ui/src/@/iam/ui/credentials/passkeys/Key.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { FingerprintPattern, KeyRound, Trash2 } from '@lucide/svelte'
+  import { remove } from '@/passkeys'
+  import * as Item from '$ui/item'
+  import { date } from '$lib/tools'
+  import { Hold } from '$com/hold'
+  import { dict, locale } from '../../intl'
+  import { resolve, type Props } from './Key'
+
+  const { passkey }: Props = $props()
+
+  const copy = $derived($dict.credentials.passkeys)
+  const auth = $derived(resolve(passkey.aid))
+  const meta = $derived(copy.meta(date(passkey._created, $locale), date(passkey._updated, $locale)))
+</script>
+
+<Item.Root>
+  <Item.Media variant="icon">
+    {#if auth?.light || auth?.dark}
+      <img src={auth.light} alt="" class="size-5 dark:hidden" />
+      <img src={auth.dark} alt="" class="hidden size-5 dark:block" />
+    {:else if auth}
+      <FingerprintPattern class="size-5" />
+    {:else}
+      <KeyRound class="size-5" />
+    {/if}
+  </Item.Media>
+  <Item.Content>
+    <Item.Title>{passkey.label || auth?.name || copy.unknown}</Item.Title>
+    <Item.Description>{meta}</Item.Description>
+  </Item.Content>
+  <Item.Actions>
+    <Hold
+      name={`delete-passkey-${passkey.id}`}
+      variant="destructive"
+      size="icon"
+      label={copy.delete}
+      onclick={() => remove(passkey.id)}>
+      <Trash2 />
+    </Hold>
+  </Item.Actions>
+</Item.Root>

package/ui/src/@/iam/ui/credentials/passkeys/Key.ts

@@ -0,0 +1,29 @@
+import json from '@/passkeys/ui/aaguid.json'
+import type { Passkey } from '@/passkeys'
+
+export interface Props {
+  passkey: Passkey
+}
+
+interface Entry {
+  name: string
+  icon_dark?: string
+  icon_light?: string
+}
+
+export interface Authenticator {
+  name: string
+  light?: string
+  dark?: string
+}
+
+const map: Record<string, Entry> = json
+
+/** Resolve authenticator metadata (name + light/dark icons) by AAGUID. */
+export function resolve(aaguid: string): Authenticator | null {
+  const entry = map[aaguid]
+
+  if (entry === undefined) return null
+
+  return { name: entry.name, light: entry.icon_light, dark: entry.icon_dark }
+}

package/ui/src/@/iam/ui/credentials/passkeys/Manager.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { add } from '@/passkeys'
+  import { account } from '@/iam'
+  import { Spinner } from '$ui/spinner'
+  import * as Item from '$ui/item'
+  import { Input } from '$ui/input'
+  import { Button } from '$ui/button'
+  import { onsubmit } from '$lib/tools'
+  import { dict } from '../../intl'
+  import Key from './Key.svelte'
+  import type { Props } from './Manager'
+
+  const { keys }: Props = $props()
+
+  const id = $derived($account?.id)
+
+  let input = $state<HTMLInputElement | null>(null)
+  let value = $state('')
+  let busy = $state(false)
+  let error = $state<Error | null>(null)
+
+  // WebAuthn raises InvalidStateError only when the authenticator already holds
+  // a credential the challenge excluded — this device is enrolled already
+  const message = $derived(
+    error === null
+      ? null
+      : error.name === 'InvalidStateError'
+        ? $dict.credentials.passkeys.duplicate
+        : $dict.credentials.passkeys.failed,
+  )
+
+  export function focus() {
+    input?.focus()
+  }
+
+  async function submit() {
+    const name = value.trim()
+
+    if (id === undefined || name.length === 0) return
+
+    busy = true
+    error = null
+
+    const res = await add(id, name)
+
+    busy = false
+
+    if (res instanceof Error) error = res
+    else value = ''
+  }
+</script>
+
+{#each keys as key (key.id)}
+  <Item.Separator />
+  <Key passkey={key} />
+{/each}
+
+<Item.Separator />
+
+<form onsubmit={onsubmit(submit)} class="flex flex-col gap-2 p-2 pt-0">
+  <div class="flex items-center gap-2">
+    <Input
+      bind:ref={input}
+      bind:value
+      name="name"
+      type="text"
+      autocomplete="given-name"
+      placeholder={$dict.credentials.passkeys.add}
+      aria-invalid={message !== null}
+      required
+      disabled={busy} />
+    <Button variant="outline" type="submit" disabled={busy}>
+      {#if busy}
+        <Spinner />
+      {:else}
+        {$dict.credentials.passkeys.create}
+      {/if}
+    </Button>
+  </div>
+  {#if message !== null}
+    <p role="alert" class="text-destructive px-1 text-sm">{message}</p>
+  {/if}
+</form>

package/ui/src/@/iam/ui/credentials/passkeys/Manager.ts

@@ -0,0 +1,5 @@
+import type { Passkey } from '@/passkeys'
+
+export interface Props {
+  keys: Passkey[]
+}

package/ui/src/@/iam/ui/credentials/passkeys/Passkeys.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { tick } from 'svelte'
+  import { Async } from 'svas'
+  import { passkeys } from '@/passkeys'
+  import * as Item from '$ui/item'
+  import Summary from './Summary.svelte'
+  import Manager from './Manager.svelte'
+
+  let open = $state(false)
+  let manager = $state<ReturnType<typeof Manager>>()
+
+  async function toggle(create: boolean) {
+    open = !open
+
+    if (!open || !create) return
+
+    await tick()
+    manager?.focus()
+  }
+</script>
+
+<Async store={passkeys}>
+  {#snippet awaited(keys)}
+    <div class="overflow-hidden rounded-xl border">
+      <Item.Group class="gap-0">
+        <Summary count={keys.length} {open} ontoggle={() => toggle(keys.length === 0)} />
+        <div
+          class={[
+            'grid transition-[grid-template-rows] duration-300 ease-out motion-reduce:transition-none',
+            open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+          ]}>
+          <div class="overflow-hidden" inert={!open}>
+            <Manager bind:this={manager} {keys} />
+          </div>
+        </div>
+      </Item.Group>
+    </div>
+  {/snippet}
+</Async>

package/ui/src/@/iam/ui/credentials/passkeys/Summary.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { FingerprintPattern } from '@lucide/svelte'
+  import * as Item from '$ui/item'
+  import { Button } from '$ui/button'
+  import { dict } from '../../intl'
+  import type { Props } from './Summary'
+
+  const { count, open, ontoggle }: Props = $props()
+
+  const copy = $derived($dict.credentials.passkeys)
+  const cta = $derived(open ? copy.collapse : count ? copy.manage : copy.create)
+</script>
+
+<Item.Root>
+  <Item.Media variant="icon">
+    <FingerprintPattern class="size-5" />
+  </Item.Media>
+  <Item.Content>
+    <Item.Title>{copy.title}</Item.Title>
+    <Item.Description>
+      {#if count}{copy.count(count)}{:else}{copy.tagline}{/if}
+    </Item.Description>
+  </Item.Content>
+  <Item.Actions>
+    <Button variant="secondary" onclick={ontoggle}>{cta}</Button>
+  </Item.Actions>
+</Item.Root>

package/ui/src/@/iam/ui/credentials/passkeys/Summary.ts

@@ -0,0 +1,5 @@
+export interface Props {
+  count: number
+  open: boolean
+  ontoggle: () => void
+}

package/ui/src/@/iam/ui/credentials/passkeys/index.ts

@@ -0,0 +1 @@
+export { default as Passkeys } from './Passkeys.svelte'

package/ui/src/@/iam/ui/credentials/providers.ts

@@ -0,0 +1,15 @@
+import { Mail } from '@lucide/svelte'
+import { icons } from '../oidc/icons'
+import type { Component } from 'svelte'
+
+/** Presentational descriptor for a provider row. Carries no behaviour. */
+export interface Descriptor {
+  id: 'email' | 'google' | 'apple'
+  icon: Component
+}
+
+export const providers: readonly Descriptor[] = [
+  { id: 'email', icon: Mail },
+  { id: 'google', icon: icons.google },
+  { id: 'apple', icon: icons.apple },
+] as const

package/ui/src/@/iam/ui/credentials/transfer/Qr.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import QRCode from 'qrcode'
+  import { Spinner } from '$ui/spinner'
+  import type { Props } from './Qr'
+
+  const { value }: Props = $props()
+
+  let src = $state<string | null>(null)
+
+  $effect(() => {
+    void QRCode.toDataURL(value, { width: 256, margin: 1 }).then(
+      (data) => (src = data),
+      () => (src = null),
+    )
+  })
+</script>
+
+<div class="bg-background mx-auto grid size-64 place-items-center rounded-lg border p-2">
+  {#if src}
+    <img {src} alt="" class="size-full" width="256" height="256" />
+  {:else}
+    <Spinner />
+  {/if}
+</div>

package/ui/src/@/iam/ui/credentials/transfer/Qr.ts

@@ -0,0 +1,3 @@
+export interface Props {
+  value: string
+}

package/ui/src/@/iam/ui/credentials/transfer/Transfer.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { ChevronRight, QrCode } from '@lucide/svelte'
+  import { challenge } from '@/iam'
+  import { buttonVariants } from '$ui/button'
+  import * as AlertDialog from '$ui/alert-dialog'
+  import { convert } from '$lib/tools'
+  import { browser, dev } from '$app/environment'
+  import { dict } from '../../intl'
+  import Qr from './Qr.svelte'
+  import type { Props } from './Transfer'
+
+  const { class: classes }: Props = $props()
+
+  const url = $derived(
+    browser && $challenge
+      ? `${location.origin}/#challenge=${convert.toBase64Url($challenge)}`
+      : null,
+  )
+
+  function onOpenChange(open: boolean) {
+    if (!open && dev && url) void navigator.clipboard.writeText(url)
+  }
+</script>
+
+<AlertDialog.Root {onOpenChange}>
+  <AlertDialog.Trigger
+    class={[
+      buttonVariants({ variant: 'ghost', size: 'sm' }),
+      'text-muted-foreground justify-start gap-1',
+      classes,
+    ]}>
+    <QrCode class="size-4" />
+    {$dict.credentials.transfer.action}
+    <ChevronRight class="size-4 opacity-60" />
+  </AlertDialog.Trigger>
+  <AlertDialog.Content>
+    <AlertDialog.Header>
+      <AlertDialog.Title>{$dict.credentials.transfer.title}</AlertDialog.Title>
+      <AlertDialog.Description>{$dict.credentials.transfer.description}</AlertDialog.Description>
+    </AlertDialog.Header>
+    {#if url}
+      <Qr value={url} />
+    {/if}
+    <AlertDialog.Footer>
+      <AlertDialog.Cancel>{$dict.credentials.transfer.done}</AlertDialog.Cancel>
+    </AlertDialog.Footer>
+  </AlertDialog.Content>
+</AlertDialog.Root>

package/ui/src/@/iam/ui/credentials/transfer/Transfer.ts

@@ -0,0 +1,5 @@
+import type { ClassValue } from 'svelte/elements'
+
+export interface Props {
+  class?: ClassValue
+}

package/ui/src/@/iam/ui/credentials/transfer/index.ts

@@ -0,0 +1 @@
+export { default as Transfer } from './Transfer.svelte'

package/ui/src/@/iam/ui/index.ts

@@ -0,0 +1,3 @@
+export { default as Authenticated } from './Authenticated.svelte'
+export { default as Authorized } from './Authorized.svelte'
+export { Credentials } from './credentials'

package/ui/src/@/iam/ui/intl/built.js

@@ -0,0 +1,79 @@
+// Auto-generated by i18n CLI - do not edit manually
+
+/** @type {Record<import('$lib/intl').Locale, import('./types').Dictionary>} */
+export const dictionaries = {
+  "en-US": {
+    "auth": {
+      "signupTitle": "One-tap sign-up",
+      "passwordTitle": "Hop in with password",
+      "passwordDescription": "Create an account or sign in",
+      "passkey": "Passkeys",
+      "email": "Email",
+      "alreadyHaveAccount": "Already have an account?",
+      "betterSecurity": "Better security",
+      "passkeysNotSupported": "Passkeys not supported",
+      "passkeysWarning": "Your browser does not respect your privacy and security.",
+      "learnMore": "Learn more",
+      "passwordBlank": "Leave password blank <nobr>to receive</nobr> <nobr>a one-time</nobr> passcode.",
+      "otpInstructions": "Enter the code sent to your email. It expires in 5 minutes.",
+      "continueWith": (provider) => {
+  return `Continue with ${provider}`
+},
+      "passkeysDescription": "Passkeys are safer than passwords, easier to use, and can’t be stolen.",
+      "yourName": "Your name",
+      "password": "Password",
+      "refresh": {
+        "description": (name) => `${name ? name + ", for" : "For"} security reasons, your credentials have expired. Please log in again to continue.`,
+        "title": "Welcome back",
+        "continue": "Continue"
+      },
+      "signout": "Sign out",
+      "login": "Log In",
+      "signin": "Sign In",
+      "copyId": "Copy account ID"
+    },
+    "credentials": {
+      "connect": "Connect",
+      "email": {
+        "title": "Email",
+        "description": "Connect your email address"
+      },
+      "google": {
+        "title": "Google",
+        "description": "Connect your Google account"
+      },
+      "apple": {
+        "title": "Apple",
+        "description": "Connect your Apple ID"
+      },
+      "passkeys": {
+        "title": "Passkeys",
+        "tagline": "Sign in faster with a passkey",
+        "create": "Create",
+        "manage": "Manage",
+        "collapse": "Collapse",
+        "add": "Enter passkey name",
+        "delete": "Hold to delete",
+        "unknown": "Unknown",
+        "count": (count) => {
+      const forms = {"one":"{n} passkey","other":"{n} passkeys"};
+      const locale = "en-US"; // This will be replaced by the build system
+      const pluralRules = new Intl.PluralRules(locale);
+      const rule = pluralRules.select(count);
+      const table = /** @type {Record<string, string>} */ (forms);
+
+      return (table[rule] ?? table.other).replace(/{n}/g, new Intl.NumberFormat(locale).format(count));
+    },
+        "meta": (added, used) => `Added ${added} · Used ${used}`,
+        "duplicate": "This device already has a passkey for your account",
+        "failed": "Could not create the passkey. Please try again."
+      },
+      "transfer": {
+        "action": "Sign in on another device",
+        "title": "Scan to sign in",
+        "description": "Use your other device to scan this code and sign in.",
+        "done": "Done"
+      }
+    }
+  }
+};