@nuxtagentic/identity 0.0.0-stage → 0.1.0

package/runtime/components/WorkspaceSwitcher.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useWorkspaces } from '../composables/useWorkspaces'
+
+import type { Organization } from '@cloudconfig/core/client'
+
+const { collapsed = false } = defineProps<{ collapsed?: boolean }>()
+
+const isOpen = ref(false)
+const { activeOrganization, menu, switching, error, refresh } = await useWorkspaces(() => {
+  isOpen.value = false
+})
+
+function shouldShowDefaultLogo(organization: Organization | null) {
+  return (
+    !organization ||
+    (!organization.logo &&
+      (organization.name.toLowerCase() === 'cloudconfig' || organization.slug === 'cloudconfig'))
+  )
+}
+
+watch(isOpen, (value) => {
+  if (value) {
+    void refresh()
+  }
+})
+watch(
+  () => collapsed,
+  () => {
+    isOpen.value = false
+  },
+)
+</script>
+
+<template>
+  <span class="inline-block w-fit max-w-full min-w-0 self-center align-middle leading-none">
+    <UDropdownMenu
+      v-model:open="isOpen"
+      :items="menu"
+      :modal="false"
+      :content="{ align: 'start', sideOffset: 4 }"
+      :ui="{
+        content:
+          'z-30 box-border w-58 min-w-0 rounded-[10px] border border-default p-1.5 ring-0 origin-[24px_-16px] opacity-100 translate-y-0 scale-100 [clip-path:inset(0_0_0_0_round_10px)] transition-[clip-path,translate,scale,opacity] [transition-duration:240ms,240ms,240ms,160ms] ease-out starting:opacity-0 starting:-translate-y-1.5 starting:scale-[0.97] starting:[clip-path:inset(0_0_100%_0_round_10px)] data-[state=isOpen]:animate-none data-[state=closed]:animate-[fade-out_160ms_var(--ease-out)] data-[state=closed]:-translate-y-1.5 data-[state=closed]:scale-[0.97] data-[state=closed]:[clip-path:inset(0_0_100%_0_round_10px)] motion-reduce:animate-none motion-reduce:transition-none',
+        viewport: 'divide-y-0 scroll-py-0',
+        group: 'p-0',
+        label: 'gap-0 px-2.5 pt-1.5 pb-1 text-xs leading-[normal] font-normal text-muted',
+        item: 'h-9 cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-0 text-sm font-normal text-highlighted before:inset-0 before:rounded-md data-highlighted:before:bg-accented data-[state=isOpen]:before:bg-accented',
+        itemLeadingIcon: 'size-4 text-muted group-data-highlighted:text-muted',
+        itemTrailingIcon: 'size-4 text-highlighted',
+        separator: 'mx-1 my-1.5 h-px bg-(--ui-border)',
+      }"
+    >
+      <UButton
+        color="neutral"
+        variant="ghost"
+        size="md"
+        :square="collapsed"
+        :trailing-icon="collapsed ? undefined : 'i-lucide-chevron-down'"
+        :label="collapsed ? undefined : (activeOrganization?.name ?? 'Cloudconfig')"
+        class="h-10 w-auto max-w-full min-w-0 gap-2.5 rounded-lg py-0 pr-2.5 pl-2 text-[15px] leading-[normal] font-medium text-highlighted duration-160 hover:bg-(--gray-400) data-[state=isOpen]:bg-(--gray-400) motion-reduce:transition-none motion-reduce:active:scale-100"
+        :ui="{
+          label: 'min-w-0 truncate',
+          trailingIcon: 'size-4 text-muted',
+        }"
+        :aria-busy="switching"
+        aria-label="Open organization menu"
+      >
+        <template #leading>
+          <CloudconfigLogo
+            v-if="shouldShowDefaultLogo(activeOrganization)"
+            class="size-6"
+          />
+          <UAvatar
+            v-else
+            :src="activeOrganization?.logo ?? undefined"
+            :alt="activeOrganization?.name ?? 'Cloudconfig'"
+            :text="(activeOrganization?.name ?? 'Cloudconfig').charAt(0).toUpperCase()"
+            size="xs"
+            :ui="{
+              root: 'rounded-md bg-(--gray-500)',
+              image: 'object-contain',
+              fallback: 'text-xs font-semibold',
+            }"
+          />
+        </template>
+      </UButton>
+
+      <template #workspace-leading="{ item }">
+        <CloudconfigLogo
+          v-if="shouldShowDefaultLogo(item.workspace ?? null)"
+          class="size-5"
+        />
+        <UAvatar
+          v-else
+          :src="item.workspace?.logo ?? undefined"
+          :alt="item.label"
+          :text="item.label?.charAt(0).toUpperCase()"
+          :ui="{
+            root: 'size-5 rounded-[5px] bg-(--gray-500)',
+            image: 'object-contain',
+            fallback: 'text-[11px] font-semibold',
+          }"
+        />
+      </template>
+
+      <template #content-bottom>
+        <p
+          v-if="error"
+          role="alert"
+          class="px-2.5 py-1.5 text-xs leading-normal text-error"
+        >
+          Could not load organizations. Reopen the menu to try again.
+        </p>
+      </template>
+    </UDropdownMenu>
+  </span>
+</template>

package/runtime/components/settings/ImageField.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { useTemplateRef, ref } from 'vue'
+
+import { useObjectUrl } from '@vueuse/core'
+
+const file = defineModel<File | null>('file', { required: true })
+const image = defineModel<string | null>('image', { required: true })
+const {
+  name,
+  identity,
+  disabled,
+  kind = 'avatar',
+} = defineProps<{
+  name: string
+  identity?: string | number
+  disabled?: boolean
+  kind?: 'avatar' | 'logo'
+}>()
+const input = useTemplateRef<HTMLInputElement>('input')
+const preview = useObjectUrl(file)
+const error = ref('')
+
+function select(event: Event) {
+  const target = event.target as HTMLInputElement
+  const selected = target.files?.[0]
+  target.value = ''
+  if (!selected) {
+    return
+  }
+  error.value = ''
+  if (!['image/jpeg', 'image/png', 'image/webp', 'image/gif'].includes(selected.type)) {
+    error.value = 'Choose a JPG, PNG, WebP, or GIF image.'
+    return
+  }
+  if (selected.size > 2 * 1024 * 1024) {
+    error.value = 'Choose an image smaller than 2 MB.'
+    return
+  }
+  file.value = selected
+}
+
+function remove() {
+  file.value = null
+  image.value = null
+  error.value = ''
+}
+</script>
+
+<template>
+  <div class="space-y-2">
+    <div class="flex items-center gap-4">
+      <UserAvatar
+        v-if="kind === 'avatar'"
+        :src="preview || image"
+        :name="name"
+        :identity="identity"
+        size="xl"
+      />
+      <UAvatar
+        v-else
+        :src="preview || image || undefined"
+        :alt="name || 'Organization logo'"
+        :text="name.charAt(0).toUpperCase()"
+        icon="i-lucide-building-2"
+        size="xl"
+        :ui="{ root: 'rounded-lg bg-(--gray-500)', image: 'object-contain' }"
+      />
+      <div class="flex min-w-0 flex-col gap-1.5">
+        <div class="flex items-center gap-2">
+          <UButton
+            type="button"
+            variant="outline"
+            :label="image || file ? `Change ${kind}` : `Upload ${kind}`"
+            :disabled="disabled"
+            @click="input?.click()"
+          />
+          <UButton
+            v-if="image || file"
+            type="button"
+            variant="ghost"
+            label="Remove"
+            :disabled="disabled"
+            @click="remove"
+          />
+        </div>
+        <p class="text-xs text-muted">JPG, PNG, WebP, or GIF. Up to 2 MB.</p>
+      </div>
+      <input
+        ref="input"
+        type="file"
+        accept="image/jpeg,image/png,image/webp,image/gif"
+        :aria-label="`Choose ${kind === 'logo' ? 'an organization logo' : 'an avatar image'}`"
+        class="hidden"
+        :disabled="disabled"
+        @change="select"
+      />
+    </div>
+    <p
+      v-if="error"
+      role="alert"
+      class="text-[13px] text-error"
+    >
+      {{ error }}
+    </p>
+  </div>
+</template>

package/runtime/components/settings/OrganizationLogoEditor.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { useAsyncData, useCloudConfigOrganizations } from '#imports'
+import { computed, ref, shallowRef } from 'vue'
+import type { Organization } from '@cloudconfig/core/client'
+import { useCurrentUser } from '../../composables/useCurrentUser'
+import { useIdentityImageUpload } from '../../composables/useIdentityImageUpload'
+import { formFieldUi } from '../../settings-ui'
+
+const { organization } = defineProps<{ organization: Organization }>()
+const emit = defineEmits<{
+  saved: [organization: Organization]
+  cancel: []
+  'update:saving': [isSaving: boolean]
+}>()
+const organizations = useCloudConfigOrganizations()
+const user = useCurrentUser()
+const imageUpload = useIdentityImageUpload()
+const logo = ref(organization.logo)
+const logoFile = shallowRef<File | null>(null)
+const isSaving = ref(false)
+const saveError = ref('')
+const {
+  data: details,
+  pending,
+  error: loadError,
+  refresh,
+} = useAsyncData(
+  () => `organization-logo-${organization.id}`,
+  () => organizations.getFull(organization.id),
+)
+const canEditLogo = computed(() => {
+  const membership = details.value?.members.find(
+    (member) => String(member.userId) === String(user.value?.id),
+  )
+  return (
+    membership?.role.split(',').some((role) => ['owner', 'admin'].includes(role.trim())) ?? false
+  )
+})
+const hasChanges = computed(() => !!logoFile.value || logo.value !== organization.logo)
+
+async function saveLogo() {
+  if (
+    isSaving.value ||
+    pending.value ||
+    loadError.value ||
+    !canEditLogo.value ||
+    !hasChanges.value
+  ) {
+    return
+  }
+
+  isSaving.value = true
+  emit('update:saving', true)
+  saveError.value = ''
+  try {
+    const image = logoFile.value ? await imageUpload.upload(logoFile.value) : logo.value
+    const updatedOrganization = await organizations.update(organization.id, { logo: image })
+    imageUpload.clear()
+    emit('saved', updatedOrganization)
+  } catch (cause) {
+    saveError.value =
+      cause instanceof Error ? cause.message : 'Could not save the organization logo.'
+  } finally {
+    isSaving.value = false
+    emit('update:saving', false)
+  }
+}
+</script>
+
+<template>
+  <form
+    class="grid gap-4 rounded-lg border border-default p-4"
+    :aria-busy="pending || isSaving"
+    @submit.prevent="saveLogo"
+    @keydown.esc.stop.prevent="!isSaving && emit('cancel')"
+  >
+    <p class="text-sm text-highlighted">{{ organization.name }} logo</p>
+    <p
+      v-if="pending"
+      role="status"
+      class="text-[13px] text-muted"
+    >
+      Loading organization permissions…
+    </p>
+    <div
+      v-else-if="loadError"
+      class="space-y-2"
+    >
+      <p
+        role="alert"
+        class="text-[13px] text-error"
+      >
+        {{ loadError.message || 'Could not load organization permissions.' }}
+      </p>
+      <UButton
+        type="button"
+        label="Try again"
+        color="neutral"
+        variant="outline"
+        @click="refresh()"
+      />
+    </div>
+    <UFormField
+      v-else-if="canEditLogo"
+      label="Logo"
+      :ui="formFieldUi"
+    >
+      <SettingsImageField
+        v-model:file="logoFile"
+        v-model:image="logo"
+        kind="logo"
+        :name="organization.name"
+        :disabled="isSaving"
+      />
+    </UFormField>
+    <p
+      v-else
+      class="text-[13px] text-muted"
+    >
+      Only organization owners and admins can change the logo.
+    </p>
+    <p
+      v-if="saveError"
+      role="alert"
+      class="text-[13px] text-error"
+    >
+      {{ saveError }}
+    </p>
+    <div class="flex flex-wrap gap-2">
+      <UButton
+        v-if="canEditLogo"
+        type="submit"
+        label="Save logo"
+        :loading="isSaving"
+        :disabled="pending || !hasChanges"
+        class="h-10 rounded-md px-4 text-sm font-medium"
+      />
+      <UButton
+        type="button"
+        color="neutral"
+        variant="outline"
+        label="Cancel"
+        :disabled="isSaving"
+        class="h-10 rounded-md px-4 text-sm font-normal"
+        @click="emit('cancel')"
+      />
+    </div>
+  </form>
+</template>

package/runtime/components/settings/Provisioning.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import type { ScimToken } from '@cloudconfig/core/client'
+import { useOrganizationAdmin, useSsoClient } from '../../composables/useOrganizationAccess'
+import { fieldUi } from '../../settings-ui'
+
+const sso = useSsoClient()
+const { organization, isAdmin } = useOrganizationAdmin()
+const tokens = ref<ScimToken[]>([])
+const baseUrl = ref('')
+const created = ref('')
+const available = ref(true)
+const isBusy = ref(false)
+const error = ref('')
+
+async function load() {
+  if (!isAdmin.value) {
+    return
+  }
+  try {
+    const result = await sso.scim.list()
+    tokens.value = result.tokens
+    baseUrl.value = result.baseUrl
+  } catch (cause) {
+    const status = (cause as { status?: number }).status
+    if (status === 404) {
+      available.value = false
+    } else {
+      error.value = cause instanceof Error ? cause.message : 'Could not load provisioning.'
+    }
+  }
+}
+onMounted(load)
+watch(isAdmin, load)
+
+async function run(work: () => Promise<unknown>) {
+  if (isBusy.value) {
+    return
+  }
+  isBusy.value = true
+  error.value = ''
+  try {
+    await work()
+  } catch (cause) {
+    error.value = cause instanceof Error ? cause.message : 'Something went wrong.'
+  } finally {
+    isBusy.value = false
+  }
+}
+
+const create = () =>
+  run(async () => {
+    const secret = await sso.scim.create('Directory')
+    created.value = secret.token
+    baseUrl.value = secret.baseUrl
+    await load()
+  })
+
+const revoke = (token: ScimToken) =>
+  run(async () => {
+    await sso.scim.revoke(token.uid)
+    await load()
+  })
+
+function date(value: number | null) {
+  return value ? new Date(value).toLocaleDateString() : 'never'
+}
+
+async function copy(value: string) {
+  error.value = ''
+  try {
+    await navigator.clipboard.writeText(value)
+  } catch (cause) {
+    error.value = cause instanceof Error ? cause.message : 'Could not copy to the clipboard.'
+  }
+}
+</script>
+
+<template>
+  <SettingsSection
+    v-if="available && organization && isAdmin"
+    title="Directory provisioning"
+    description="Okta, Entra ID or Google Workspace add and remove members over SCIM. Removing someone there ends their access here."
+  >
+    <p
+      v-if="error"
+      role="alert"
+      class="text-[13px] text-error"
+    >
+      {{ error }}
+    </p>
+    <div class="grid gap-2">
+      <span class="text-[13px] text-muted">SCIM base URL</span>
+      <div class="flex gap-2">
+        <UInput
+          :model-value="baseUrl"
+          readonly
+          aria-label="SCIM base URL"
+          :ui="fieldUi"
+          class="flex-1"
+        />
+        <UButton
+          label="Copy"
+          color="neutral"
+          variant="outline"
+          class="h-10 rounded-md px-3 text-sm font-normal"
+          @click="copy(baseUrl)"
+        />
+      </div>
+    </div>
+    <div
+      v-if="created"
+      class="grid gap-2 rounded-md border border-default p-3"
+    >
+      <p class="text-[13px] text-muted">
+        Paste this token into your identity provider now. It is shown once.
+      </p>
+      <div class="flex gap-2">
+        <UInput
+          :model-value="created"
+          readonly
+          aria-label="New SCIM token"
+          :ui="fieldUi"
+          class="flex-1"
+        />
+        <UButton
+          label="Copy"
+          color="neutral"
+          class="h-10 rounded-md px-3 text-sm font-normal"
+          @click="copy(created)"
+        />
+      </div>
+    </div>
+    <div
+      v-for="token in tokens"
+      :key="token.uid"
+      class="flex flex-wrap items-center justify-between gap-3"
+    >
+      <div class="min-w-0">
+        <p class="truncate text-sm text-highlighted">{{ token.label || 'Token' }}</p>
+        <p class="mt-0.5 truncate text-[13px] text-muted">
+          {{
+            token.revokedAt
+              ? `Revoked ${date(token.revokedAt)}`
+              : `Last used ${date(token.lastUsedAt)} · expires ${date(token.expiresAt)}`
+          }}
+        </p>
+      </div>
+      <UButton
+        v-if="!token.revokedAt"
+        label="Revoke"
+        color="neutral"
+        variant="outline"
+        :disabled="isBusy"
+        class="h-9 rounded-md px-3 text-sm font-normal"
+        @click="revoke(token)"
+      />
+    </div>
+    <UButton
+      type="button"
+      color="neutral"
+      variant="outline"
+      icon="i-lucide-key-round"
+      label="Create SCIM token"
+      :loading="isBusy"
+      class="h-10 w-fit rounded-md px-4 text-sm font-normal"
+      @click="create"
+    />
+  </SettingsSection>
+</template>