@nuxtagentic/identity 0.0.0-stage → 0.1.1

package/runtime/components/settings/Security.vue

@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { useCloudConfigAccount, navigateTo, useRuntimeConfig } from '#imports'
+import { useCurrentUser } from '../../composables/useCurrentUser'
+import { ref, computed, onMounted } from 'vue'
+
+import type { AuthAccount } from '@cloudconfig/core/client'
+
+defineOptions({ name: 'SettingsSecurity' })
+
+const account = useCloudConfigAccount()
+const authConfig = useRuntimeConfig().public.cloudconfig as { twoFactor?: unknown }
+const isTwoFactorEnabled = Boolean(authConfig.twoFactor)
+const user = useCurrentUser()
+const currentPassword = ref('')
+const newPassword = ref('')
+const deletePassword = ref('')
+const isBusy = ref(false)
+const isLoaded = ref(false)
+const message = ref('')
+const error = ref('')
+const accounts = ref<AuthAccount[]>([])
+const hasPassword = computed(() => accounts.value.some((item) => item.providerId === 'credential'))
+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',
+}
+const formFieldUi = {
+  label: 'text-[13px] font-normal text-muted',
+  container: 'mt-1.5',
+}
+
+onMounted(async () => {
+  try {
+    accounts.value = await account.listAccounts()
+    isLoaded.value = true
+  } catch (cause) {
+    error.value =
+      cause instanceof Error
+        ? cause.message
+        : 'Could not load security settings. Refresh to try again.'
+  }
+})
+
+async function changePassword() {
+  if (isBusy.value || !currentPassword.value || newPassword.value.length < 8) {
+    return
+  }
+  isBusy.value = true
+  error.value = ''
+  message.value = ''
+  try {
+    await account.changePassword({
+      currentPassword: currentPassword.value,
+      newPassword: newPassword.value,
+      revokeOtherSessions: true,
+    })
+    currentPassword.value = ''
+    newPassword.value = ''
+    message.value = 'Password changed and other sessions revoked.'
+  } catch (cause) {
+    error.value = cause instanceof Error ? cause.message : 'Could not change your password.'
+  } finally {
+    isBusy.value = false
+  }
+}
+
+async function removeAccount() {
+  if (
+    isBusy.value ||
+    !isLoaded.value ||
+    !window.confirm(
+      'Permanently delete your account, sessions, and linked sign-in methods? This cannot be undone.',
+    )
+  ) {
+    return
+  }
+  isBusy.value = true
+  error.value = ''
+  message.value = ''
+  try {
+    await account.deleteUser(deletePassword.value ? { password: deletePassword.value } : {})
+    user.value = null
+    await navigateTo('/sign-in')
+  } catch (cause) {
+    error.value =
+      cause instanceof Error
+        ? cause.message
+        : 'Could not delete your account. Sign in again and retry.'
+    isBusy.value = false
+  }
+}
+</script>
+
+<template>
+  <div
+    id="security"
+    class="scroll-mt-6"
+  >
+    <SettingsTwoFactor
+      v-if="isTwoFactorEnabled"
+      :has-password="hasPassword"
+    />
+    <SettingsSection
+      title="Security"
+      description="Manage how you sign in."
+    >
+      <p
+        v-if="error"
+        role="alert"
+        class="text-[13px] text-error"
+      >
+        {{ error }}
+      </p>
+      <p
+        v-if="message"
+        role="status"
+        class="text-[13px] text-muted"
+      >
+        {{ message }}
+      </p>
+      <form
+        v-if="hasPassword"
+        class="grid gap-4"
+        @submit.prevent="changePassword"
+      >
+        <UFormField
+          label="Current password"
+          :ui="formFieldUi"
+        >
+          <UInput
+            v-model="currentPassword"
+            type="password"
+            autocomplete="current-password"
+            required
+            :disabled="isBusy"
+            :ui="fieldUi"
+          />
+        </UFormField>
+        <UFormField
+          label="New password"
+          :ui="formFieldUi"
+        >
+          <UInput
+            v-model="newPassword"
+            type="password"
+            autocomplete="new-password"
+            required
+            minlength="8"
+            :disabled="isBusy"
+            :ui="fieldUi"
+          />
+        </UFormField>
+        <p class="text-[13px] text-muted">Changing your password signs out your other sessions.</p>
+        <UButton
+          type="submit"
+          label="Change password"
+          :loading="isBusy"
+          :disabled="!currentPassword || newPassword.length < 8"
+          class="h-10 w-fit rounded-md px-4 text-sm font-medium"
+        />
+      </form>
+      <p
+        v-else-if="isLoaded"
+        class="text-sm text-muted"
+      >
+        Your sign-in provider manages your password.
+      </p>
+      <p
+        v-else-if="!error"
+        role="status"
+        class="text-[13px] text-muted"
+      >
+        Loading security settings…
+      </p>
+    </SettingsSection>
+    <SettingsSection
+      title="Delete account"
+      description="Permanently remove your profile, sessions, and linked sign-in accounts."
+    >
+      <UFormField
+        v-if="hasPassword"
+        label="Password"
+        :ui="formFieldUi"
+      >
+        <UInput
+          v-model="deletePassword"
+          type="password"
+          autocomplete="current-password"
+          :disabled="isBusy"
+          :ui="fieldUi"
+        />
+      </UFormField>
+      <p
+        v-else-if="isLoaded"
+        class="text-[13px] text-muted"
+      >
+        Sign in again before deleting your account.
+      </p>
+      <UButton
+        type="button"
+        color="error"
+        variant="outline"
+        label="Delete my account"
+        :loading="isBusy"
+        :disabled="!isLoaded"
+        class="h-10 w-fit rounded-md px-4 text-sm font-normal"
+        @click="removeAccount"
+      />
+    </SettingsSection>
+  </div>
+</template>

package/runtime/components/settings/SettingsOrganizations.vue

@@ -0,0 +1,305 @@
+<script setup lang="ts">
+import { useCloudConfigOrganizations, useState, useRoute, navigateTo } from '#imports'
+import { ref, shallowRef, computed, useTemplateRef, watch, onMounted, nextTick } from 'vue'
+
+import type { Organization } from '@cloudconfig/core/client'
+import { useWorkspaceOrganizations } from '../../composables/useWorkspaces'
+import { useIdentityImageUpload } from '../../composables/useIdentityImageUpload'
+import OrganizationLogoEditor from './OrganizationLogoEditor.vue'
+
+const { active = true } = defineProps<{ active?: boolean }>()
+const organizations = useCloudConfigOrganizations()
+const activeOrganization = useState<Organization | null>('active-organization', () => null)
+const route = useRoute()
+const { data: items, pending, error: loadError, refresh } = useWorkspaceOrganizations()
+const isSaving = ref(false)
+const saveError = ref('')
+const error = computed(
+  () => saveError.value || (loadError.value ? 'Could not load organizations.' : ''),
+)
+const name = ref('')
+const slug = ref('')
+const logo = ref<string | null>(null)
+const logoFile = shallowRef<File | null>(null)
+const imageUpload = useIdentityImageUpload()
+const creating = computed(() => route.query.create === 'true')
+const editingOrganization = computed(() =>
+  creating.value
+    ? null
+    : items.value.find((item) => String(item.id) === route.query.organizationLogo),
+)
+const nameInput = useTemplateRef('nameInput')
+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',
+}
+const formFieldUi = {
+  label: 'text-[13px] font-normal text-muted',
+  container: 'mt-1.5',
+}
+
+function updateName(value: string) {
+  name.value = value
+  slug.value = value
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/(^-|-$)/g, '')
+}
+
+function showEditor() {
+  const query = { ...route.query }
+  delete query.organizationLogo
+  query.create = 'true'
+  return navigateTo({
+    path: '/dashboard/settings',
+    query,
+    hash: '#organizations',
+  })
+}
+
+function editLogo(item: Organization) {
+  const query = { ...route.query }
+  delete query.create
+  query.organizationLogo = String(item.id)
+  return navigateTo({ path: '/dashboard/settings', query, hash: '#organizations' })
+}
+
+function closeEditor() {
+  const query = { ...route.query }
+  delete query.create
+  delete query.organizationLogo
+  name.value = ''
+  slug.value = ''
+  logo.value = null
+  logoFile.value = null
+  imageUpload.clear()
+  saveError.value = ''
+  return navigateTo({ path: '/dashboard/settings', query, hash: '#organizations' })
+}
+
+function finishLogoEdit(updatedOrganization: Organization) {
+  items.value = items.value.map((item) =>
+    item.id === updatedOrganization.id ? updatedOrganization : item,
+  )
+  if (activeOrganization.value?.id === updatedOrganization.id) {
+    activeOrganization.value = updatedOrganization
+  }
+  return closeEditor()
+}
+
+async function createOrganization() {
+  if (isSaving.value || !name.value.trim() || !slug.value.trim()) {
+    return
+  }
+  isSaving.value = true
+  saveError.value = ''
+  try {
+    const image = logoFile.value ? await imageUpload.upload(logoFile.value) : logo.value
+    activeOrganization.value = await organizations.create({
+      name: name.value.trim(),
+      slug: slug.value.trim(),
+      logo: image,
+    })
+    await closeEditor()
+    await refresh()
+  } catch (cause) {
+    saveError.value = cause instanceof Error ? cause.message : 'Could not create the organization.'
+  } finally {
+    isSaving.value = false
+  }
+}
+
+async function activate(item: Organization) {
+  if (isSaving.value) {
+    return
+  }
+  isSaving.value = true
+  saveError.value = ''
+  try {
+    activeOrganization.value = await organizations.setActive(item.id)
+  } catch (cause) {
+    saveError.value = cause instanceof Error ? cause.message : 'Could not select the organization.'
+  } finally {
+    isSaving.value = false
+  }
+}
+
+watch(
+  () => active && creating.value,
+  async (value) => {
+    if (!value) {
+      return
+    }
+    await nextTick()
+    nameInput.value?.inputRef?.focus()
+  },
+  { flush: 'post' },
+)
+
+onMounted(() => {
+  if (active && creating.value) {
+    nameInput.value?.inputRef?.focus()
+  }
+})
+</script>
+
+<template>
+  <SettingsSection
+    id="organizations"
+    title="Organization"
+    description="Manage your shared workspaces."
+    class="scroll-mt-6"
+  >
+    <p
+      v-if="error"
+      role="alert"
+      class="text-[13px] text-error"
+    >
+      {{ error }}
+    </p>
+    <div
+      :aria-busy="pending"
+      class="grid gap-4"
+    >
+      <div
+        v-for="item in items"
+        :key="item.id"
+        class="flex flex-wrap items-center justify-between gap-3"
+      >
+        <div class="flex min-w-0 flex-1 items-center gap-3">
+          <UAvatar
+            :src="item.logo ?? undefined"
+            :alt="item.name"
+            :text="item.name.charAt(0).toUpperCase()"
+            size="md"
+            :ui="{ root: 'rounded-md bg-(--gray-500)', image: 'object-contain' }"
+          />
+          <div class="min-w-0">
+            <p class="truncate text-sm text-highlighted">{{ item.name }}</p>
+            <p class="mt-0.5 truncate text-[13px] text-muted">{{ item.slug }}</p>
+          </div>
+        </div>
+        <div class="flex shrink-0 items-center gap-2">
+          <UButton
+            type="button"
+            color="neutral"
+            variant="outline"
+            label="Edit logo"
+            :aria-label="`Edit logo for ${item.name}`"
+            :disabled="isSaving"
+            class="h-9 rounded-md px-3 text-sm font-normal"
+            @click="editLogo(item)"
+          />
+          <UButton
+            type="button"
+            color="neutral"
+            variant="outline"
+            :label="activeOrganization?.id === item.id ? 'Active' : 'Use organization'"
+            :disabled="isSaving || activeOrganization?.id === item.id"
+            class="h-9 rounded-md px-3 text-sm font-normal"
+            @click="activate(item)"
+          />
+        </div>
+      </div>
+      <p
+        v-if="pending"
+        role="status"
+        class="text-[13px] text-muted"
+      >
+        Loading organizations…
+      </p>
+      <p
+        v-else-if="!items.length && !error"
+        class="text-sm text-muted"
+      >
+        No organizations yet. Create one to start a shared workspace.
+      </p>
+    </div>
+    <OrganizationLogoEditor
+      v-if="editingOrganization"
+      :key="editingOrganization.id"
+      :organization="editingOrganization"
+      @saved="finishLogoEdit"
+      @cancel="closeEditor"
+      @update:saving="isSaving = $event"
+    />
+    <form
+      v-if="creating"
+      class="grid gap-4"
+      @submit.prevent="createOrganization"
+      @keydown.esc.stop.prevent="!isSaving && closeEditor()"
+    >
+      <UFormField
+        label="Logo"
+        :ui="formFieldUi"
+      >
+        <SettingsImageField
+          v-model:file="logoFile"
+          v-model:image="logo"
+          kind="logo"
+          :name="name"
+          :disabled="isSaving"
+        />
+      </UFormField>
+      <UFormField
+        label="Name"
+        :ui="formFieldUi"
+      >
+        <UInput
+          ref="nameInput"
+          :model-value="name"
+          required
+          :disabled="isSaving"
+          :ui="fieldUi"
+          @update:model-value="updateName"
+        />
+      </UFormField>
+      <UFormField
+        label="Slug"
+        :ui="formFieldUi"
+      >
+        <UInput
+          v-model="slug"
+          required
+          pattern="[a-z0-9-]+"
+          :disabled="isSaving"
+          :ui="fieldUi"
+        />
+      </UFormField>
+      <div class="flex flex-wrap gap-2">
+        <UButton
+          type="submit"
+          label="Create organization"
+          :loading="isSaving"
+          :disabled="!name.trim() || !slug.trim()"
+          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="closeEditor"
+        />
+      </div>
+    </form>
+    <UButton
+      v-else
+      type="button"
+      color="neutral"
+      variant="outline"
+      icon="i-lucide-plus"
+      label="New organization"
+      :disabled="isSaving"
+      class="h-10 w-fit rounded-md px-4 text-sm font-normal"
+      @click="showEditor"
+    />
+  </SettingsSection>
+  <template v-if="active">
+    <SettingsSingleSignOn />
+    <SettingsProvisioning />
+  </template>
+</template>