@nuxtagentic/identity 0.0.0-stage → 0.1.0

package/runtime/composables/useCurrentUser.ts

@@ -0,0 +1,69 @@
+import {
+  useState,
+  useRuntimeConfig,
+  useRequestFetch,
+  useCloudConfigAuth,
+  navigateTo,
+} from '#imports'
+import { watch } from 'vue'
+import type { Organization } from '@cloudconfig/core/client'
+
+export interface CurrentUser {
+  id: string | number
+  name: string
+  email: string
+  image?: string | null
+}
+
+export function useCurrentUser() {
+  return useState<CurrentUser | null>('current-user', () => null)
+}
+
+export async function fetchCurrentUser(): Promise<CurrentUser | null> {
+  const config = useRuntimeConfig().public.cloudconfig as { authBasePath?: string } | undefined
+  const session = await useRequestFetch()<{ user: CurrentUser } | null>(
+    `${config?.authBasePath ?? '/api/auth'}/get-session`,
+    { query: { disableCookieCache: true } },
+  )
+  return session?.user ?? null
+}
+
+export function useAccountSession() {
+  const user = useCurrentUser()
+  const auth = useCloudConfigAuth()
+  const session = auth.useSession()
+  const organization = useState<Organization | null>('active-organization', () => null)
+
+  watch(
+    () => user.value?.id,
+    () => {
+      organization.value = null
+    },
+  )
+
+  if (import.meta.client) {
+    watch(
+      session,
+      ({ isPending, error, data }) => {
+        if (!isPending && !error) {
+          user.value = data?.user ?? null
+          if (!user.value) {
+            void navigateTo('/sign-in')
+          }
+        }
+      },
+      { immediate: true },
+    )
+  }
+
+  async function signOut() {
+    const { error } = await auth.signOut()
+    if (error) {
+      return
+    }
+    user.value = null
+    await navigateTo('/sign-in')
+  }
+
+  return { user, signOut }
+}

package/runtime/composables/useIdentityImageUpload.ts

@@ -0,0 +1,31 @@
+import { useCloudConfig, useRuntimeConfig } from '#imports'
+import type { IdentityConfig } from '@nuxtagentic/identity/schema'
+
+/** Upload an identity image, retaining it for retries when the subsequent save fails. */
+export function useIdentityImageUpload() {
+  const api = useCloudConfig<IdentityConfig>()
+  const storage = useRuntimeConfig().public.cloudconfig as {
+    basePath?: string
+    storagePaths?: Record<string, string>
+  }
+  let uploadedImage: { file: File; url: string } | null = null
+
+  async function upload(file: File) {
+    if (uploadedImage?.file === file) {
+      return uploadedImage.url
+    }
+
+    const saved = await api.avatar.upload(file)
+    const basePath = (storage.basePath ?? '/api').replace(/\/$/, '')
+    const contentPath = (storage.storagePaths?.avatar ?? '/avatar-content').replace(/^\//, '')
+    const url = new URL(`${basePath}/${contentPath}/${saved.id}`, window.location.origin).href
+    uploadedImage = { file, url }
+    return url
+  }
+
+  function clear() {
+    uploadedImage = null
+  }
+
+  return { upload, clear }
+}

package/runtime/composables/useOrganizationAccess.ts

@@ -0,0 +1,46 @@
+import { useCloudConfigOrganizations, useRequestEvent, useRuntimeConfig, useState } from '#imports'
+import { computed, ref, watch } from 'vue'
+import { createSsoClient, type Organization } from '@cloudconfig/core/client'
+import { useCurrentUser } from './useCurrentUser'
+
+/** The SSO and SCIM client, pointed at the auth mount and SSR-safe. */
+export function useSsoClient() {
+  const config = useRuntimeConfig().public.cloudconfig as { authBasePath?: string } | undefined
+  const event = useRequestEvent()
+  return createSsoClient({
+    baseUrl: config?.authBasePath ?? '/api/auth',
+    // During SSR the request event's fetch keeps the caller's cookies.
+    fetch: (input, init) => (event ? event.fetch(String(input), init) : fetch(input, init)),
+  })
+}
+
+/** Whether the signed-in person owns or administers the active organization. */
+export function useOrganizationAdmin() {
+  const organizations = useCloudConfigOrganizations()
+  const active = useState<Organization | null>('active-organization', () => null)
+  const user = useCurrentUser()
+  const role = ref('')
+  watch(
+    () => [active.value?.id, user.value?.id],
+    async ([organizationId, userId]) => {
+      role.value = ''
+      if (!organizationId || !userId) {
+        return
+      }
+      try {
+        const full = await organizations.getFull(Number(organizationId))
+        role.value =
+          full.members.find((member) => String(member.userId) === String(userId))?.role ?? ''
+      } catch {
+        role.value = ''
+      }
+    },
+    { immediate: true },
+  )
+  return {
+    organization: active,
+    isAdmin: computed(() =>
+      role.value.split(',').some((entry) => ['owner', 'admin'].includes(entry.trim())),
+    ),
+  }
+}

package/runtime/composables/useProfileNamePreview.ts

@@ -0,0 +1,4 @@
+import { useState } from '#imports'
+export function useProfileNamePreview() {
+  return useState<string | null>('dashboard-profile-preview', () => null)
+}

package/runtime/composables/useWorkspaceScope.ts

@@ -0,0 +1,12 @@
+import { useCurrentUser } from './useCurrentUser'
+import { useState } from '#imports'
+import { computed } from 'vue'
+import type { Organization } from '@cloudconfig/core/client'
+
+export function useWorkspaceScope() {
+  const user = useCurrentUser()
+  const organization = useState<Organization | null>('active-organization', () => null)
+  return computed(() =>
+    user.value ? `${user.value.id}:${organization.value?.id ?? 'personal'}` : '',
+  )
+}

package/runtime/composables/useWorkspaces.ts

@@ -0,0 +1,108 @@
+import {
+  useCloudConfigOrganizations,
+  useState,
+  useToast,
+  useRuntimeConfig,
+  useRequestFetch,
+  useAsyncData,
+} from '#imports'
+import { computed } from 'vue'
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type { Organization } from '@cloudconfig/core/client'
+
+export interface WorkspaceMenuItem extends DropdownMenuItem {
+  slot: 'workspace'
+  workspace: Organization | null
+}
+
+// This data loader also runs in route middleware, outside component setup.
+export function useWorkspaceOrganizations() {
+  const organizations = useCloudConfigOrganizations()
+  const activeOrganization = useState<Organization | null>('active-organization', () => null)
+  const config = useRuntimeConfig().public.cloudconfig as { authBasePath?: string } | undefined
+  const requestFetch = useRequestFetch()
+  return useAsyncData(
+    'workspace-organization',
+    async () => {
+      const [items, session] = await Promise.all([
+        organizations.list(),
+        requestFetch<{
+          session: { activeOrganizationId?: string | number | null }
+        } | null>(`${config?.authBasePath ?? '/api/auth'}/get-session`, {
+          query: { disableCookieCache: true },
+        }),
+      ])
+      activeOrganization.value =
+        items.find((item) => String(item.id) === String(session?.session.activeOrganizationId)) ??
+        null
+      return items
+    },
+    { default: () => [] },
+  )
+}
+
+export async function useWorkspaces(onSelected: () => void = () => {}) {
+  const organizations = useCloudConfigOrganizations()
+  const activeOrganization = useState<Organization | null>('active-organization', () => null)
+  const switching = useState('workspace-switching', () => false)
+  const toast = useToast()
+  const { data: items, error, status, refresh } = await useWorkspaceOrganizations()
+
+  async function selectWorkspace(id: number | null) {
+    if (switching.value) {
+      return
+    }
+    if (id === (activeOrganization.value?.id ?? null)) {
+      onSelected()
+      return
+    }
+
+    switching.value = true
+    try {
+      activeOrganization.value = await organizations.setActive(id)
+      onSelected()
+    } catch (cause) {
+      toast.add({
+        title: 'Could not switch workspace',
+        description: cause instanceof Error ? cause.message : 'Please try again.',
+        color: 'error',
+      })
+    } finally {
+      switching.value = false
+    }
+  }
+
+  function workspaceItem(workspace: Organization | null): WorkspaceMenuItem {
+    return {
+      label: workspace?.name ?? 'Cloudconfig',
+      workspace,
+      slot: 'workspace',
+      type: 'checkbox',
+      checked: (workspace?.id ?? null) === (activeOrganization.value?.id ?? null),
+      disabled: switching.value || status.value === 'pending' || !!error.value,
+      class: 'h-10',
+      onSelect: (event) => {
+        event.preventDefault()
+        void selectWorkspace(workspace?.id ?? null)
+      },
+    }
+  }
+
+  const menu = computed<(DropdownMenuItem | WorkspaceMenuItem)[]>(() => [
+    { label: 'Organizations', type: 'label' },
+    ...items.value.map(workspaceItem),
+    workspaceItem(null),
+    { type: 'separator' },
+    {
+      label: 'Create organization',
+      icon: 'i-lucide-plus',
+      to: '/dashboard/settings?create=true#organizations',
+    },
+    {
+      label: 'Organization settings',
+      icon: 'i-lucide-settings',
+      to: '/dashboard/settings#organizations',
+    },
+  ])
+  return { activeOrganization, menu, switching, error, refresh }
+}

package/runtime/layouts/default.vue

@@ -0,0 +1,20 @@
+<template>
+  <div
+    class="dark flex min-h-[var(--app-viewport-height,100dvh)] flex-col bg-default font-sans text-default scheme-dark"
+  >
+    <header class="flex h-14 shrink-0 items-center px-4">
+      <NuxtLink
+        to="/"
+        class="flex items-center gap-2 text-sm font-medium text-muted transition-colors duration-140 hover:text-highlighted focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary motion-reduce:transition-none"
+      >
+        <BrandMark />
+        <span class="mt-1">CloudConfig</span>
+      </NuxtLink>
+    </header>
+    <main class="flex flex-1 items-center justify-center px-6 pt-6 pb-24">
+      <div class="w-full max-w-[340px]">
+        <slot />
+      </div>
+    </main>
+  </div>
+</template>

package/runtime/middleware/auth.ts

@@ -0,0 +1,22 @@
+import { defineNuxtRouteMiddleware, useNuxtApp, navigateTo } from '#imports'
+import { useCurrentUser, fetchCurrentUser } from '../composables/useCurrentUser'
+function isHydratingServerRender(): boolean {
+  const app = useNuxtApp()
+  return import.meta.client && app.isHydrating === true && app.payload.serverRendered === true
+}
+
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  const user = useCurrentUser()
+  if (isHydratingServerRender() && user.value) {
+    return
+  }
+  // Search and detail query changes stay on the already authenticated page.
+  if (import.meta.client && user.value && to.path === from.path) {
+    return
+  }
+
+  user.value = await fetchCurrentUser().catch(() => null)
+  if (!user.value) {
+    return navigateTo('/sign-in')
+  }
+})

package/runtime/pages/organizations.vue

@@ -0,0 +1,3 @@
+<script setup lang="ts">
+definePageMeta({ redirect: '/dashboard/settings#organizations' })
+</script>

package/runtime/pages/sign-in.vue

@@ -0,0 +1,7 @@
+<template>
+  <GithubAuthPanel
+    title="Sign in to CloudConfig"
+    description="Connect your work in one place."
+    label="Continue with GitHub"
+  />
+</template>

package/runtime/pages/sign-up.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <GithubAuthPanel
+      title="Create an account"
+      description="Connect your work in one place."
+      label="Sign up with GitHub"
+    />
+    <p class="mt-5 text-center text-sm text-muted">
+      Already have an account?
+      <NuxtLink
+        to="/sign-in"
+        class="font-medium text-highlighted underline-offset-4 hover:underline"
+      >
+        Sign in
+      </NuxtLink>
+    </p>
+  </div>
+</template>

package/runtime/pages/two-factor.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { useCloudConfigAccount, navigateTo } from '#imports'
+import { useCloudConfigTwoFactor } from '@cloudconfig/nuxt/two-factor'
+import { useCurrentUser } from '../composables/useCurrentUser'
+import { ref, onMounted } from 'vue'
+
+import type { TwoFactorStatus } from '@cloudconfig/core/client'
+
+const auth = useCloudConfigTwoFactor()
+const account = useCloudConfigAccount()
+const user = useCurrentUser()
+const status = ref<TwoFactorStatus | null>(null)
+const code = ref('')
+const isBusy = ref(false)
+const error = ref('')
+const message = ref('')
+
+async function sendCode() {
+  const result = await auth.twoFactor.sendOtp({})
+  if (result.error) {
+    throw new Error(result.error.message ?? 'Could not send the verification code.')
+  }
+  message.value = 'We sent a six-digit code to the email address on your account.'
+}
+
+async function run(action: () => Promise<void>) {
+  if (isBusy.value) {
+    return
+  }
+  isBusy.value = true
+  error.value = ''
+  try {
+    await action()
+  } catch (cause) {
+    error.value =
+      cause instanceof Error ? cause.message : 'Could not complete verification. Try again.'
+  } finally {
+    isBusy.value = false
+  }
+}
+
+onMounted(() =>
+  run(async () => {
+    status.value = await account.getTwoFactorStatus()
+    if (!status.value.pending) {
+      await navigateTo('/dashboard')
+      return
+    }
+    if (status.value.method === 'email') {
+      await sendCode()
+    }
+  }),
+)
+
+function verify() {
+  return run(async () => {
+    const result =
+      status.value?.method === 'passkey'
+        ? await auth.signIn.passkey()
+        : await auth.twoFactor.verifyOtp({ code: code.value })
+    if (result.error) {
+      throw new Error(result.error.message ?? 'Verification failed. Try again.')
+    }
+    const session = await auth.getSession({ query: { disableCookieCache: true } })
+    if (session.error || !session.data) {
+      throw new Error('Could not read your verified session. Sign in again.')
+    }
+    user.value = session.data.user
+    await navigateTo('/dashboard')
+  })
+}
+</script>
+
+<template>
+  <section class="w-full space-y-5">
+    <div class="text-center">
+      <h1 class="text-2xl font-medium text-highlighted">Verify your sign-in</h1>
+      <p class="mt-2 text-sm text-muted">
+        {{
+          status?.method === 'passkey'
+            ? 'Use your passkey to finish signing in.'
+            : 'Enter the verification code sent to your email.'
+        }}
+      </p>
+    </div>
+    <p
+      v-if="error"
+      role="alert"
+      class="text-sm text-error"
+    >
+      {{ error }}
+    </p>
+    <p
+      v-if="message"
+      role="status"
+      class="text-sm text-muted"
+    >
+      {{ message }}
+    </p>
+    <form
+      v-if="status?.pending && status.method === 'email'"
+      class="space-y-4"
+      @submit.prevent="verify"
+    >
+      <UFormField label="Verification code">
+        <UInput
+          v-model="code"
+          autocomplete="one-time-code"
+          inputmode="numeric"
+          pattern="[0-9]{6}"
+          maxlength="6"
+          required
+          autofocus
+          :disabled="isBusy"
+          class="w-full"
+        />
+      </UFormField>
+      <UButton
+        block
+        type="submit"
+        label="Verify"
+        :loading="isBusy"
+        :disabled="code.length !== 6"
+      />
+      <UButton
+        block
+        label="Resend code"
+        color="neutral"
+        variant="link"
+        :disabled="isBusy"
+        @click="run(sendCode)"
+      />
+    </form>
+    <UButton
+      v-if="status?.pending && status.method === 'passkey'"
+      block
+      label="Verify with passkey"
+      :loading="isBusy"
+      @click="verify"
+    />
+    <NuxtLink
+      to="/sign-in"
+      class="block text-center text-sm text-muted underline-offset-4 hover:underline"
+    >
+      Sign in again
+    </NuxtLink>
+  </section>
+</template>

package/runtime/settings-ui.ts

@@ -0,0 +1,22 @@
+export const fieldUi = {
+  root: 'w-full',
+  base: 'h-10 rounded-md bg-(--gray-100) px-3 py-0 text-sm font-normal text-highlighted ring-(--gray-500) focus-visible:ring-highlighted',
+}
+export const selectUi = {
+  ...fieldUi,
+  base: `${fieldUi.base} w-full ps-3 pe-9`,
+}
+export const formFieldUi = {
+  label: 'text-[13px] font-normal text-muted',
+  description: 'text-[13px] leading-normal text-muted',
+  container: 'mt-1.5',
+}
+export const switchUi = {
+  root: 'items-center justify-between gap-4',
+  container: 'order-last h-5 shrink-0',
+  wrapper: 'order-first ms-0 min-w-0 text-left',
+  label: 'cursor-pointer text-sm leading-normal font-normal text-highlighted',
+  description: 'mt-0.5 text-[13px] leading-normal text-muted',
+  base: 'h-5 w-9 cursor-pointer data-[state=unchecked]:bg-(--gray-500) motion-reduce:transition-none',
+  thumb: 'size-4 shadow-none data-[state=checked]:translate-x-4 motion-reduce:transition-none',
+}

package/runtime/shared/agent.ts

@@ -0,0 +1 @@
+export default { resourceAliases: { avatar: ['avatars'] } }

package/runtime/utils/format.ts

@@ -0,0 +1,18 @@
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+/** `2024-06-24` → `24 Jun 2024`. */
+export function formatJoined(iso: string): string {
+  const [year, month, day] = iso.split('-')
+  return year && month && day ? `${+day} ${MONTHS[+month - 1]} ${year}` : iso
+}
+
+/** Initials derived from the account name. */
+export function initialsOf(name: string): string {
+  return name
+    .split(' ')
+    .filter(Boolean)
+    .map((word) => word[0])
+    .join('')
+    .slice(0, 2)
+    .toUpperCase()
+}

package/runtime/workspace.ts

@@ -0,0 +1,8 @@
+import ProfileSettings from './components/ProfileSettings.vue'
+
+export const identityContribution = {
+  id: 'identity',
+  label: 'Account',
+  icon: 'i-lucide-user-round',
+  generalPanels: [ProfileSettings],
+} as const

package/schema.ts

@@ -0,0 +1,29 @@
+import { model, t } from '@cloudconfig/core'
+
+export const identityModels = {
+  avatar: model(
+    {
+      name: t.text().required(),
+      mimeType: t.text().required(),
+      size: t.number().required(),
+      storageKey: t.text().required().unique().serverOnly(),
+      ownerId: t.number().required().serverOnly(),
+    },
+    {
+      access: {
+        list: ({ user, where }) => (user ? where('ownerId', 'eq', user.id) : false),
+        read: ({ user }) => user != null,
+        create: ({ user }) => user != null,
+        delete: ({ user, where }) => (user ? where('ownerId', 'eq', user.id) : false),
+      },
+      storage: {
+        binding: 'FILES',
+        path: '/avatar-content',
+        maxSize: 2 * 1024 * 1024,
+        mimeTypes: ['image/jpeg', 'image/png', 'image/webp', 'image/gif'],
+      },
+    },
+  ),
+}
+
+export type IdentityConfig = { models: typeof identityModels }