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

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

@@ -0,0 +1,151 @@
+<script lang="ts">
+  import { meta } from '@toa.io/origin'
+  import { ArrowRight } from '@lucide/svelte'
+  import { dict } from '@/iam/ui/intl'
+  import * as iam from '@/iam'
+  import { Spinner } from '$ui/spinner'
+  import { Input } from '$ui/input'
+  import { Button } from '$ui/button'
+  import { autofocus, onsubmit } from '$lib/tools'
+  import { Shake } from '$com/shake'
+  import Password from './Password.svelte'
+  import type { Props } from './Form'
+
+  const { account, oncreate }: Props = $props()
+
+  let busy = $state(false)
+  let username = $state('')
+  let password = $state('')
+  let otp = $state('')
+  let passwordRef = $state<HTMLDivElement | null>(null)
+  let mode = $state<'password' | 'otp'>('password')
+  let shake: { shake: () => Promise<void> } | undefined = $state()
+
+  async function submit() {
+    if (password.length === 0)
+      if (mode === 'password') await sendOTP()
+      else await verifyOTP()
+    else await basic()
+  }
+
+  async function basic() {
+    busy = true
+
+    const result =
+      account === undefined
+        ? await verifyPassword()
+        : await iam.basic.capture(account.id, { username, password })
+
+    busy = false
+
+    if (result instanceof Error) await fail()
+  }
+
+  async function verifyPassword() {
+    const echo = await iam.basic.verify(username, password)
+
+    if (echo instanceof Error) return echo
+
+    const response = meta(echo)
+
+    if (response?.status === 201) oncreate?.(echo)
+
+    return echo
+  }
+
+  async function sendOTP() {
+    busy = true
+
+    const response =
+      account === undefined ? await iam.otp.send(username) : await iam.otp.add(account.id, username)
+
+    busy = false
+
+    if (response instanceof Error) return
+
+    mode = 'otp'
+    requestAnimationFrame(() => focus())
+  }
+
+  async function verifyOTP() {
+    if (username.length === 0) {
+      console.error('username is required')
+
+      return
+    }
+
+    if (otp.length !== 6) {
+      await fail()
+
+      return
+    }
+
+    busy = true
+
+    const echo = await iam.otp.verify(username, otp)
+
+    busy = false
+
+    if (echo instanceof Error) {
+      otp = ''
+      await fail()
+
+      return
+    }
+
+    const response = meta(echo)
+
+    if (response?.status === 201) oncreate?.(echo)
+
+    return echo
+  }
+
+  async function fail() {
+    await shake?.shake()
+    focus()
+  }
+
+  function focus() {
+    if (!autofocus) return
+
+    passwordRef?.querySelector('input')?.focus()
+  }
+</script>
+
+<form onsubmit={onsubmit(submit)}>
+  <fieldset class="space-y-2">
+    <Input
+      id="iam-username-input"
+      bind:value={username}
+      name="username"
+      type="email"
+      autocomplete="username"
+      required
+      disabled={mode === 'otp' ? true : undefined}
+      {autofocus}
+      placeholder={$dict.auth.email} />
+    <div class="space-y-2">
+      <div class="flex items-center gap-2">
+        <Shake bind:this={shake} class="w-full">
+          <Password bind:ref={passwordRef} bind:password bind:otp {mode} />
+        </Shake>
+        <Button size="icon-lg" type="submit">
+          {#if busy}
+            <Spinner />
+          {:else}
+            <ArrowRight />
+          {/if}
+          <span class="sr-only">{$dict.auth.login}</span>
+        </Button>
+      </div>
+      <div class="text-sm text-muted-foreground px-1">
+        {#if mode === 'password'}
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+          {@html $dict.auth.passwordBlank}
+        {:else}
+          {$dict.auth.otpInstructions}
+        {/if}
+      </div>
+    </div>
+  </fieldset>
+</form>

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

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

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { REGEXP_ONLY_DIGITS } from 'bits-ui'
+  import { dict } from '@/iam/ui/intl'
+  import * as InputOTP from '$ui/input-otp'
+  import { Input } from '$ui/input'
+  import type { Props } from './Password'
+
+  let {
+    ref = $bindable(null),
+    mode = $bindable('password'),
+    password = $bindable(''),
+    otp = $bindable(''),
+  }: Props = $props()
+</script>
+
+<div bind:this={ref} class="w-full flex items-center">
+  {#if mode === 'password'}
+    <Input
+      id="iam-password-input"
+      bind:value={password}
+      name="password"
+      type="password"
+      minlength={6}
+      autocomplete="current-password"
+      placeholder={$dict.auth.password}
+      class="placeholder:text-sm"
+    />
+  {:else}
+    <InputOTP.Root bind:value={otp} maxlength={6} pattern={REGEXP_ONLY_DIGITS} required>
+      {#snippet children({ cells })}
+        <InputOTP.Group>
+          {#each cells.slice(0, 6) as cell, i (i)}
+            <InputOTP.Slot {cell} class="size-[40px] bg-background" />
+          {/each}
+        </InputOTP.Group>
+      {/snippet}
+    </InputOTP.Root>
+  {/if}
+</div>

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

@@ -0,0 +1,6 @@
+export interface Props {
+  ref?: HTMLElement | null
+  mode?: 'password' | 'otp'
+  password?: string
+  otp?: string
+}

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

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import Form from './Form.svelte'
+</script>
+
+<Form />

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

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

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

@@ -0,0 +1 @@
+export * from './svc'

package/ui/src/@/net/svc/index.ts

@@ -0,0 +1,3 @@
+export { origin } from './origin'
+export { query } from '@toa.io/origin'
+export type { RequestOptions, OctetsEntry, Faulty } from '@toa.io/origin'

package/ui/src/@/net/svc/origin.ts

@@ -0,0 +1,8 @@
+import { connect } from '@toa.io/origin'
+import * as config from '$config'
+
+const origin = connect({ origin: config.origin, sleep: config.sleep })
+
+console.info('Origin connected', config.origin, config.sleep ?? 'no sleep')
+
+export { origin }

package/ui/src/@/net/svc/query.test.ts

@@ -0,0 +1,45 @@
+import { it, expect } from 'vitest'
+import { query } from './query'
+
+it('should build criteria', () => {
+  const params = new URLSearchParams()
+
+  params.set('foo', 'bar')
+  params.set('baz', 'qux')
+
+  const result = query(params)
+
+  expect(result).toBe('?criteria=foo==bar;baz==qux')
+})
+
+it('should build empty criteria', () => {
+  const params = new URLSearchParams()
+
+  const result = query(params)
+
+  expect(result).toBe('')
+})
+
+it('should separate known parameters', () => {
+  const params = new URLSearchParams()
+
+  params.set('foo', 'bar')
+  params.set('omit', '10')
+  params.set('limit', '20')
+  params.set('search', 'qux')
+
+  const result = query(params)
+
+  expect(result).toBe('?criteria=foo==bar&omit=10&limit=20&search=qux')
+})
+
+it('should separate specified parameters', () => {
+  const params = new URLSearchParams()
+
+  params.set('foo', 'bar')
+  params.set('baz', 'qux')
+
+  const result = query(params, { separate: ['baz'] })
+
+  expect(result).toBe('?criteria=foo==bar&baz=qux')
+})

package/ui/src/@/net/svc/query.ts

@@ -0,0 +1,25 @@
+function query(params: URLSearchParams, options?: Options): string {
+  const parts: string[] = []
+  const criteria: string[] = []
+
+  for (const [key, value] of params.entries())
+    if (SEPARATE.includes(key) || options?.separate?.includes(key) === true)
+      parts.push(`${key}=${value}`)
+    else
+      criteria.push(`${key}==${value}`)
+
+  if (criteria.length > 0)
+    parts.unshift(`criteria=${criteria.join(';')}`)
+
+  return parts.length === 0
+    ? ''
+    : '?' + parts.join('&')
+}
+
+const SEPARATE: string[] = ['omit', 'limit', 'search'] as const
+
+interface Options {
+  separate?: string[]
+}
+
+export { query }

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

@@ -0,0 +1 @@
+export * from './svc'

package/ui/src/@/passkeys/svc/add.ts

@@ -0,0 +1,15 @@
+import { passkeys } from './store'
+import * as origin from './net'
+import { create } from './create'
+
+export async function add(identity: string, name: string): Promise<void | Error> {
+  const out = await create(name, identity)
+
+  if (out instanceof Error) return out
+
+  const key = await origin.post(identity, out.key)
+
+  if (key instanceof Error) return key
+
+  passkeys.add(key)
+}

package/ui/src/@/passkeys/svc/create.ts

@@ -0,0 +1,58 @@
+import * as origin from './net'
+import * as credentials from './credentials'
+
+export async function create(name: string, identity?: string): Promise<Output | Error> {
+  const options = await origin.challenges.post('creation', identity)
+
+  if (options instanceof Error)
+    return options
+
+  const credential = await credentials.create({ id: options.identity, name }, options)
+
+  if (credential instanceof Error)
+    return credential
+
+  if (credential === null)
+    throw new Error('No credential is created')
+
+  return {
+    key: toCreationResponse(credential, name),
+    identity: options.identity,
+  }
+}
+
+function toCreationResponse(
+  credential: PublicKeyCredential,
+  label: string,
+): origin.CreationResponse {
+  const response = credential.response as AuthenticatorAttestationResponse
+  const authenticatorData = response.getAuthenticatorData()
+  const transports = response.getTransports()
+  const publicKeyAlgorithm = response.getPublicKeyAlgorithm()
+  const publicKey = response.getPublicKey()
+  const clientExtensionResults = credential.getClientExtensionResults()
+
+  if (publicKey === null)
+    throw new Error('No public key is created')
+
+  return {
+    id: credential.id,
+    type: credential.type,
+    response: {
+      attestationObject: credentials.bufferToBase64url(response.attestationObject),
+      clientDataJSON: credentials.bufferToBase64url(response.clientDataJSON),
+      authenticatorData: credentials.bufferToBase64url(authenticatorData),
+      transports,
+      publicKeyAlgorithm,
+      publicKey: credentials.bufferToBase64url(publicKey),
+    },
+    authenticatorAttachment: credential.authenticatorAttachment,
+    clientExtensionResults,
+    label,
+  }
+}
+
+interface Output {
+  key: origin.CreationResponse
+  identity: string
+}

package/ui/src/@/passkeys/svc/credentials/convert.ts

@@ -0,0 +1,32 @@
+export function base64urlToArrayBuffer(base64Url: string): ArrayBuffer {
+  const padding = '='.repeat((4 - (base64Url.length % 4)) % 4)
+  const base64 = (base64Url + padding).replace(/-/g, '+').replace(/_/g, '/')
+  const raw = atob(base64)
+
+  const bytes = new Uint8Array(raw.length)
+
+  for (let i = 0; i < raw.length; i++) bytes[i] = raw.charCodeAt(i)
+
+  return bytes.buffer
+}
+
+export function stringToArrayBuffer(str: string): ArrayBuffer {
+  return new TextEncoder().encode(str).buffer
+}
+
+export function bufferToBase64url(buffer: ArrayBuffer): string {
+  return btoa(String.fromCharCode(...new Uint8Array(buffer)))
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=+$/, '')
+}
+
+export function toBase64Url(string: string): string {
+  return btoa(string).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+}
+
+export function fromBase64Url(base64Url: string): string {
+  const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
+
+  return atob(base64.padEnd(base64.length + ((4 - (base64.length % 4)) % 4), '='))
+}

package/ui/src/@/passkeys/svc/credentials/create.ts

@@ -0,0 +1,34 @@
+import { key } from './key'
+import { base64urlToArrayBuffer, stringToArrayBuffer } from './convert'
+import type { CreationOptions } from '../net/challenges'
+
+export async function create(
+  user: User,
+  options: CreationOptions,
+): Promise<PublicKeyCredential | null | Error> {
+  const publicKey: PublicKeyCredentialCreationOptions = {
+    challenge: base64urlToArrayBuffer(options.challenge),
+    timeout: options.timeout,
+    authenticatorSelection: options.authenticatorSelection,
+    pubKeyCredParams: options.pubKeyCredParams,
+    rp: {
+      name: 'app',
+    },
+    user: {
+      id: stringToArrayBuffer(user.id),
+      name: user.name,
+      displayName: user.name,
+    },
+    excludeCredentials: options.excludeCredentials.map(key),
+  }
+
+  return (await navigator.credentials.create({ publicKey }).catch((e) => e as Error)) as
+    | PublicKeyCredential
+    | null
+    | Error
+}
+
+interface User {
+  id: string
+  name: string
+}

package/ui/src/@/passkeys/svc/credentials/get.ts

@@ -0,0 +1,14 @@
+import { key } from './key'
+import { base64urlToArrayBuffer } from './convert'
+import type { RequestOptions } from '../net/challenges'
+
+export async function get(options: RequestOptions): Promise<PublicKeyCredential | null> {
+  const publicKey: PublicKeyCredentialRequestOptions = {
+    timeout: options.timeout,
+    challenge: base64urlToArrayBuffer(options.challenge),
+    allowCredentials: options.allowCredentials.map(key),
+    userVerification: options.userVerification,
+  }
+
+  return (await navigator.credentials.get({ publicKey })) as PublicKeyCredential
+}

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

@@ -0,0 +1,3 @@
+export { create } from './create'
+export { get } from './get'
+export * from './convert'

package/ui/src/@/passkeys/svc/credentials/key.ts

@@ -0,0 +1,10 @@
+import { base64urlToArrayBuffer } from './convert'
+import type { KeyDescriptor } from '../net/challenges'
+
+export function key({ id, transports }: KeyDescriptor): PublicKeyCredentialDescriptor {
+  return {
+    id: base64urlToArrayBuffer(id),
+    type: 'public-key',
+    transports,
+  }
+}

package/ui/src/@/passkeys/svc/get.ts

@@ -0,0 +1,10 @@
+import { having } from 'svas'
+import { account } from '@/iam'
+import * as origin from './net'
+import type { Passkey } from './store'
+
+export async function get(): Promise<Passkey[] | Error> {
+  const me = await having(account)
+
+  return await origin.get(me.id)
+}

package/ui/src/@/passkeys/svc/index.ts

@@ -0,0 +1,6 @@
+export { add } from './add'
+export { remove } from './remove'
+export { create } from './create'
+export { request } from './request'
+export { supported } from './supported'
+export { passkeys, type Passkey } from './store'

package/ui/src/@/passkeys/svc/net/CreationResponse.ts

@@ -0,0 +1,15 @@
+export interface CreationResponse {
+  id: string
+  type: string
+  response: {
+    attestationObject: string
+    clientDataJSON: string
+    authenticatorData: string
+    transports: string[]
+    publicKeyAlgorithm: number
+    publicKey: string
+  }
+  authenticatorAttachment: string | null
+  clientExtensionResults: AuthenticationExtensionsClientOutputs
+  label?: string
+}

package/ui/src/@/passkeys/svc/net/Passkey.ts

@@ -0,0 +1,8 @@
+export interface Passkey {
+  id: string
+  aid: string
+  synced: boolean
+  label: string
+  _created: number
+  _updated: number
+}

package/ui/src/@/passkeys/svc/net/RequestResponse.ts

@@ -0,0 +1,12 @@
+export interface RequestResponse {
+  id: string
+  type: string
+  response: {
+    clientDataJSON: string
+    authenticatorData: string
+    signature: string
+    userHandle?: string | null
+  }
+  authenticatorAttachment: string | null
+  clientExtensionResults: AuthenticationExtensionsClientOutputs
+}

package/ui/src/@/passkeys/svc/net/challenges/Options.ts

@@ -0,0 +1,21 @@
+interface CommonOptions {
+  identity: string
+  challenge: string
+  timeout: number
+}
+
+export interface CreationOptions extends CommonOptions {
+  authenticatorSelection?: Pick<AuthenticatorSelectionCriteria, 'userVerification' | 'residentKey'>
+  pubKeyCredParams: PublicKeyCredentialParameters[]
+  excludeCredentials: KeyDescriptor[]
+}
+
+export interface RequestOptions extends CommonOptions {
+  allowCredentials: KeyDescriptor[]
+  userVerification: UserVerificationRequirement
+}
+
+export interface KeyDescriptor {
+  id: string
+  transports: AuthenticatorTransport[]
+}

package/ui/src/@/passkeys/svc/net/challenges/index.ts

@@ -0,0 +1,2 @@
+export * from './interface'
+export type { CreationOptions, RequestOptions, KeyDescriptor } from './Options'

package/ui/src/@/passkeys/svc/net/challenges/interface.ts

@@ -0,0 +1,16 @@
+import { origin } from '@/net'
+import type { CreationOptions, RequestOptions } from './Options'
+
+const challenges = origin.resource('/identity/passkeys/challenges/')
+
+export function post(type: 'creation', id?: string): Promise<CreationOptions | Error>
+export function post(type: 'request', id?: string): Promise<RequestOptions | Error>
+
+export async function post(type: Type, id?: string): Promise<CreationOptions | RequestOptions | Error> {
+  const body = { type }
+
+  if (id === undefined) return await challenges.json('.', { method: 'POST', body })
+  else return await challenges.json(id, { method: 'POST', body })
+}
+
+type Type = 'creation' | 'request'

package/ui/src/@/passkeys/svc/net/index.ts

@@ -0,0 +1,4 @@
+export * from './interface'
+export type { Passkey } from './Passkey'
+export type { CreationResponse } from './CreationResponse'
+export type { RequestResponse } from './RequestResponse'

package/ui/src/@/passkeys/svc/net/interface.ts

@@ -0,0 +1,29 @@
+import { origin } from '@/net'
+import type { RequestResponse } from './RequestResponse'
+import type { Passkey } from './Passkey'
+import type { CreationResponse } from './CreationResponse'
+
+const passkeys = origin.resource('/identity/passkeys/')
+
+export function post(body: RequestResponse): Promise<void | Error>
+export function post(identity: string, body: CreationResponse): Promise<Passkey | Error>
+
+export async function post(
+  arg: string | RequestResponse,
+  body?: CreationResponse,
+): Promise<void | Passkey | Error> {
+  if (typeof arg === 'string')
+    return await passkeys.json(arg, { body, credentials: 'include' })
+  else
+    return await passkeys.json({ body: arg })
+}
+
+export async function get(identity: string): Promise<Passkey[] | Error> {
+  return await passkeys.json<Passkey[]>(identity, { credentials: 'include' })
+}
+
+export async function del(identity: string, _: string): Promise<void | Error> {
+  return await passkeys.json(identity, { credentials: 'include' })
+}
+
+export * as challenges from './challenges'

package/ui/src/@/passkeys/svc/remove.ts

@@ -0,0 +1,13 @@
+import { having } from 'svas'
+import { account } from '@/iam'
+import { passkeys } from './store'
+import * as origin from './net'
+
+export async function remove(id: string): Promise<void | Error> {
+  const me = await having(account)
+  const ok = await origin.del(me.id, id)
+
+  if (ok instanceof Error) return ok
+
+  passkeys.delete(id)
+}