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

package/ui/src/@/iam/ui/intl/context.yaml

@@ -0,0 +1,91 @@
+context: Mount 'iam' context
+inputs:
+  auth:
+    refresh:
+      description:
+        input: |-
+          !js
+                  (name) => `${name ? name + ", for" : "For"} security reasons, your credentials have expired. Please log in again to continue.`
+        context: Preserve html tags where appropriate
+      title:
+        input: Welcome back
+      continue:
+        input: Continue
+    signout:
+      input: Sign out
+    login:
+      input: Login
+    signin:
+      input: Sign In
+    copyId:
+      input: Copy the account id
+      context: accessible name of the button that copies the id; the button itself shows only its first characters
+  credentials:
+    connect:
+      input: Connect
+      context: Inert CTA button on a provider row
+    email:
+      title:
+        input: Email
+        context: Provider name
+      description:
+        input: Connect your email address
+    google:
+      title:
+        input: Google
+      description:
+        input: Connect your Google account
+        context: Google provider row description
+    apple:
+      title:
+        input: Apple
+      description:
+        input: Connect your Apple ID
+        context: Apple provider row description
+    passkeys:
+      title:
+        input: Passkeys
+        context: card title for the passkey manager
+      tagline:
+        input: Sign in faster with a passkey
+        context: shown when the user has no passkeys yet
+      create:
+        input: Create
+      manage:
+        input: Manage
+        context: CTA to expand the passkey list
+      collapse:
+        input: Collapse
+        context: CTA to close the expanded passkey card
+      add:
+        input: Enter passkey name
+        context: input placeholder for naming a new passkey
+      delete:
+        input: Hold to delete
+        context: press-and-hold label to remove a passkey
+      unknown:
+        input: Unknown
+        context: fallback name for an unrecognized authenticator
+      count:
+        input: "{n} passkey"
+      meta:
+        input: "!js (added, used) => `Added ${added} · Used ${used}`"
+      duplicate:
+        input: This device already has a passkey for your account
+        context: error shown under the passkey name field when registration is refused as a duplicate
+      failed:
+        input: Could not create the passkey. Please try again.
+        context: generic error shown under the passkey name field when registration fails
+    transfer:
+      action:
+        input: Sign in on another device
+        context: ghost button label that opens a QR dialog to transfer the session to a second device
+      title:
+        input: Scan to sign in
+        context: title of the QR login dialog
+      description:
+        input: Use your other device to scan this code and sign in.
+        context: description under the QR code in the login dialog
+      done:
+        input: Done
+        context: button that closes the QR login dialog

package/ui/src/@/iam/ui/intl/en-US.yaml

@@ -0,0 +1,64 @@
+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: |
+    !js
+    (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: |-
+      !js
+      (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:
+      - one: "{n} passkey"
+        other: "{n} passkeys"
+    meta: |-
+      !js
+      (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

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

@@ -0,0 +1,10 @@
+import { derived } from 'svelte/store'
+import { locale } from '$lib/intl'
+import { dictionaries } from './built.js'
+import type { Dictionary } from './types'
+import type { Locale } from '$lib/intl'
+
+const dict = derived(locale, ($locale) => dictionaries[$locale])
+
+export { dict, dictionaries, locale }
+export type { Locale, Dictionary }

package/ui/src/@/iam/ui/intl/types.ts

@@ -0,0 +1,70 @@
+/**
+ * Auto-generated TypeScript definitions for i18n dictionaries
+ *
+ * @author copilot
+ */
+
+export type Dictionary = {
+      auth: {
+        signupTitle: string
+        passwordTitle: string
+        passwordDescription: string
+        passkey: string
+        email: string
+        alreadyHaveAccount: string
+        betterSecurity: string
+        passkeysNotSupported: string
+        passkeysWarning: string
+        learnMore: string
+        passwordBlank: string
+        otpInstructions: string
+        continueWith: (value: any) => string
+        passkeysDescription: string
+        yourName: string
+        password: string
+        refresh: {
+          description: (value: any) => string
+          title: string
+          continue: string
+        }
+        signout: string
+        login: string
+        signin: string
+        copyId: string
+      }
+      credentials: {
+        connect: string
+        email: {
+          title: string
+          description: string
+        }
+        google: {
+          title: string
+          description: string
+        }
+        apple: {
+          title: string
+          description: string
+        }
+        passkeys: {
+          title: string
+          tagline: string
+          create: string
+          manage: string
+          collapse: string
+          add: string
+          delete: string
+          unknown: string
+          count: (value: number) => string
+          meta: (...args: [any, any]) => string
+          duplicate: string
+          failed: string
+        }
+        transfer: {
+          action: string
+          title: string
+          description: string
+          done: string
+        }
+      }
+    }

package/ui/src/@/iam/ui/oidc/Authentication.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { oidc } from '@/iam'
+  import Button from './Button.svelte'
+  import type { Props } from './Authentication'
+
+  const { account }: Props = $props()
+</script>
+
+<div class="flex gap-2">
+  {#if oidc.providers.google.client}
+    <Button idp="google" {account} />
+  {/if}
+  {#if oidc.providers.apple.client}
+    <Button idp="apple" {account} />
+  {/if}
+</div>

package/ui/src/@/iam/ui/oidc/Authentication.ts

@@ -0,0 +1,5 @@
+import type { AccountLike } from '../AccountLike'
+
+export interface Props {
+  account?: AccountLike
+}

package/ui/src/@/iam/ui/oidc/Button.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { oidc } from '@/iam'
+  import { Spinner } from '$ui/spinner'
+  import { Button } from '$ui/button'
+  import { cn } from '$lib/utils'
+  import { icons } from './icons'
+  import type { Props } from './Button'
+
+  const { idp, children, account, class: classes }: Props = $props()
+
+  const Icon = $derived(icons[idp])
+
+  async function onclick(event: MouseEvent) {
+    const button = event.currentTarget as HTMLButtonElement
+
+    button.disabled = true
+
+    await oidc.authenticate(idp, account?.id)
+
+    button.disabled = false
+  }
+</script>
+
+<Button
+  variant="outline"
+  size={children ? 'default' : 'icon'}
+  {onclick}
+  class={cn(
+    'disabled:[&_.x-icon]:hidden [&_.x-spinner]:hidden disabled:[&_.x-spinner]:block',
+    classes,
+  )}
+>
+  <Icon class="x-icon" />
+  <Spinner class="x-spinner" />
+  {@render children?.()}
+</Button>

package/ui/src/@/iam/ui/oidc/Button.ts

@@ -0,0 +1,11 @@
+import type { ClassValue } from 'svelte/elements'
+import type { Snippet } from 'svelte'
+import type { oidc } from '@/iam'
+import type { AccountLike } from '../AccountLike'
+
+export interface Props {
+  idp: oidc.IDP
+  children?: Snippet
+  account?: AccountLike
+  class?: ClassValue
+}

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { dict } from '@/iam/ui/intl'
+  import Button from './Button.svelte'
+  import type { oidc } from '@/iam'
+
+  const { idp }: { idp: oidc.IDP } = $props()
+
+  const names: Record<oidc.IDP, string> = {
+    google: 'Google',
+    apple: 'Apple',
+  }
+</script>
+
+<Button {idp} class="w-full">
+  {$dict.auth.continueWith(names[idp])}
+</Button>

package/ui/src/@/iam/ui/oidc/icons/Apple.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { cn } from '$lib/utils'
+  import type { ClassValue } from 'svelte/elements'
+
+  const { fill, class: classes }: { fill?: string; class?: ClassValue } = $props()
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xml:space="preserve"
+  fill="currentColor"
+  viewBox="0 0 814 1000"
+  class={cn('size-5 -mt-[3px]', classes)}
+>
+  <path
+    {fill}
+    d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"
+  />
+</svg>

package/ui/src/@/iam/ui/oidc/icons/Google.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { ClassValue } from 'svelte/elements'
+
+  const { class: classes }: { class?: ClassValue } = $props()
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  class={classes}
+>
+  <path
+    d="M19.84 10.2273C19.84 9.5182 19.7764 8.8364 19.6582 8.1818H10.24V12.05H15.6218C15.39 13.3 14.6855 14.3591 13.6264 15.0682V17.5773H16.8582C18.7491 15.8364 19.84 13.2727 19.84 10.2273Z"
+    fill="#4285F4"
+  />
+  <path
+    d="M10.24 20C12.94 20 15.2036 19.1045 16.8581 17.5773L13.6263 15.0682C12.7309 15.6682 11.5854 16.0227 10.24 16.0227C7.6354 16.0227 5.4309 14.2636 4.6445 11.9H1.3036V14.4909C2.9491 17.7591 6.3309 20 10.24 20Z"
+    fill="#34A853"
+  />
+  <path
+    d="M4.6445 11.9C4.4445 11.3 4.3309 10.6591 4.3309 10C4.3309 9.3409 4.4445 8.7 4.6445 8.1V5.5091H1.3036C0.6264 6.8591 0.24 8.3864 0.24 10C0.24 11.6136 0.6264 13.1409 1.3036 14.4909L4.6445 11.9Z"
+    fill="#FBBC04"
+  />
+  <path
+    d="M10.24 3.9773C11.7081 3.9773 13.0263 4.4818 14.0627 5.4727L16.9309 2.6045C15.1991 0.9909 12.9354 0 10.24 0C6.3309 0 2.9491 2.2409 1.3036 5.5091L4.6445 8.1C5.4309 5.7364 7.6354 3.9773 10.24 3.9773Z"
+    fill="#E94235"
+  />
+</svg>

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

@@ -0,0 +1,11 @@
+import Google from './Google.svelte'
+import Apple from './Apple.svelte'
+import type { Component } from 'svelte'
+import type { oidc } from '@/iam'
+
+const icons: Record<oidc.IDP, Component> = {
+  google: Google,
+  apple: Apple,
+} as const
+
+export { icons }

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

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

package/ui/src/@/iam/ui/passkey/Authentication.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { ShieldCheck, ShieldOff } from '@lucide/svelte'
+  import { supported } from '@/passkeys'
+  import { dict } from '@/iam/ui/intl'
+  import * as Card from '$ui/card'
+  import * as Alert from '$ui/alert'
+  import { cn } from '$lib/utils'
+  import { apple } from '$lib/tools'
+  import Login from './Login.svelte'
+  import Create from './Create.svelte'
+  import type { Props } from './Authentication'
+
+  const { class: classes, account, oncreate }: Props = $props()
+
+  const href = apple
+    ? 'https://support.apple.com/en-us/102195'
+    : 'https://support.google.com/accounts/answer/13548313'
+</script>
+
+{#snippet description()}
+  <p>
+    {$dict.auth.passkeysDescription}
+    <a {href} target="_blank" class="text-nowrap">
+      {$dict.auth.learnMore}
+    </a>
+  </p>
+{/snippet}
+
+<div class="space-y-4">
+  <Card.Root class={cn('gap-4 bg-background/75', supported && 'pt-4', classes)}>
+    {#if supported}
+      <Card.Header class="gap-0">
+        <Card.Title><h2>{$dict.auth.signupTitle}</h2></Card.Title>
+      </Card.Header>
+      <Card.Content>
+        <Create {account} {oncreate} />
+      </Card.Content>
+    {/if}
+    <Card.Footer>
+      {#if supported}
+        <Alert.Root>
+          <ShieldCheck color="green" />
+          <Alert.Title>{$dict.auth.betterSecurity}</Alert.Title>
+          <Alert.Description>
+            {@render description()}
+          </Alert.Description>
+        </Alert.Root>
+      {:else}
+        <Alert.Root>
+          <ShieldOff color="red" class="animate-pulse" />
+          <Alert.Title>{$dict.auth.passkeysNotSupported}</Alert.Title>
+          <Alert.Description>
+            <p>{$dict.auth.passkeysWarning}</p>
+            {@render description()}
+          </Alert.Description>
+        </Alert.Root>
+      {/if}
+    </Card.Footer>
+  </Card.Root>
+
+  {#if supported && !account}
+    <Login />
+  {/if}
+</div>

package/ui/src/@/iam/ui/passkey/Authentication.ts

@@ -0,0 +1,8 @@
+import type { ClassValue } from 'svelte/elements'
+import type { AccountLike } from '../AccountLike'
+
+export interface Props {
+  account?: AccountLike
+  class?: ClassValue
+  oncreate?: (account: AccountLike) => void
+}

package/ui/src/@/iam/ui/passkey/Create.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { ArrowRight } from '@lucide/svelte'
+  import { dict } from '@/iam/ui/intl'
+  import { passkeys } from '@/iam'
+  import { Spinner } from '$ui/spinner'
+  import { Input } from '$ui/input'
+  import { Button } from '$ui/button'
+  import { autofocus, onsubmit } from '$lib/tools'
+  import type { Props } from './Create'
+
+  const { account, disabled, oncreate }: Props = $props()
+
+  let value = $derived(account?.name ?? '')
+  let busy = $state(false)
+
+  async function submit() {
+    const name = value.trim()
+
+    if (name.length === 0) return
+
+    busy = true
+
+    const echo = await passkeys.create(name, account?.id)
+
+    busy = false
+
+    if (echo instanceof Error) return
+
+    oncreate?.(echo)
+  }
+</script>
+
+<form onsubmit={onsubmit(submit)}>
+  <fieldset class="space-y-1" {disabled}>
+    <div class="flex items-center gap-2">
+      <Input
+        bind:value
+        id="name"
+        type="text"
+        placeholder={$dict.auth.yourName}
+        autocomplete="given-name"
+        required
+        {autofocus} />
+      <Button id="iam-passkey-create-button" size="icon-lg" type="submit">
+        {#if busy}
+          <Spinner />
+        {:else}
+          <ArrowRight />
+        {/if}
+      </Button>
+    </div>
+  </fieldset>
+</form>

package/ui/src/@/iam/ui/passkey/Create.ts

@@ -0,0 +1,7 @@
+import type { AccountLike } from '../AccountLike'
+
+export interface Props {
+  account?: AccountLike
+  disabled?: boolean
+  oncreate?: (account: AccountLike) => void
+}

package/ui/src/@/iam/ui/passkey/Login.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Fingerprint } from '@lucide/svelte'
+  import { dict } from '@/iam/ui/intl'
+  import { passkeys } from '@/iam'
+  import { Spinner } from '$ui/spinner'
+  import { Button } from '$ui/button'
+
+  let busy = $state(false)
+
+  async function login() {
+    busy = true
+
+    await passkeys.login()
+
+    busy = false
+  }
+</script>
+
+<div class="flex flex-col items-center justify-center gap-2">
+  <p>{$dict.auth.alreadyHaveAccount}</p>
+  <Button id="iam-passkey-login-button" variant="secondary" onclick={login}>
+    {#if busy}
+      <Spinner />
+    {:else}
+      <Fingerprint />
+    {/if}
+    {$dict.auth.signin}
+  </Button>
+</div>

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Fingerprint } from '@lucide/svelte'
+  import { dict } from '@/iam/ui/intl'
+  import { passkeys } from '@/iam'
+  import { Spinner } from '$ui/spinner'
+  import { Button } from '$ui/button'
+  import type { AccountLike } from '../AccountLike'
+
+  const { account }: { account: AccountLike } = $props()
+
+  async function onclick(e: MouseEvent) {
+    const button = e.currentTarget as HTMLButtonElement
+
+    button.disabled = true
+
+    await passkeys.login(account.id)
+
+    button.disabled = false
+  }
+</script>
+
+<Button
+  class="w-full disabled:[&>.x-icon]:hidden [&>.x-spinner]:hidden disabled:[&>.x-spinner]:block"
+  {onclick}
+>
+  <Fingerprint class="size-5 x-icon" />
+  <Spinner class="x-spinner" />
+  {$dict.auth.refresh.continue}
+</Button>

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

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

package/ui/src/@/iam/ui/password/Authentication.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { dict } from '@/iam/ui/intl'
+  import * as Card from '$ui/card'
+  import { cn } from '$lib/utils'
+  import Form from './Form.svelte'
+  import type { Props } from './Authentication'
+
+  const { class: classes, account, oncreate }: Props = $props()
+</script>
+
+<Card.Root class={cn('pt-4 gap-4 bg-background/75', classes)}>
+  <Card.Header class="gap-0">
+    <Card.Title><h2>{$dict.auth.passwordTitle}</h2></Card.Title>
+    <Card.Description>{$dict.auth.passwordDescription}</Card.Description>
+  </Card.Header>
+  <Card.Content>
+    <Form {account} {oncreate} />
+  </Card.Content>
+</Card.Root>

package/ui/src/@/iam/ui/password/Authentication.ts

@@ -0,0 +1,8 @@
+import type { ClassValue } from 'svelte/elements'
+import type { AccountLike } from '../AccountLike'
+
+export interface Props {
+  account?: AccountLike
+  class?: ClassValue
+  oncreate?: (account: AccountLike) => void
+}