@nuxtagentic/identity 0.1.1 → 0.1.2

package/README.md

@@ -34,12 +34,7 @@ Identity image uploads share the existing `avatar` storage model and retain thei
 uploaded asset when saving fails, so retries do not upload the same file again.
 `useProfileNamePreview` keeps live name previews within Identity's state ownership.
 
-## Single sign-on and provisioning
-
-With `auth.sso: true` (and `@better-auth/sso` installed), **Settings → Organization →
-Single sign-on** lets owners and admins register an OIDC or SAML identity provider and
-verify their email domain with a DNS TXT record. People on that domain choose **Use single
-sign-on** on the sign-in page and join the organization.
+## Directory provisioning
 
 With `auth.scim: true`, **Directory provisioning** mints a SCIM token and shows the base
 URL to paste into Okta, Entra ID or Google Workspace. Provisioned people join the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxtagentic/identity",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "files": [
     "module.ts",
@@ -21,15 +21,15 @@
   },
   "dependencies": {
     "@better-auth/passkey": "^1.7.7",
-    "@cloudconfig/core": "0.2.0-beta.2",
-    "@cloudconfig/nuxt": "0.2.0-beta.2",
+    "@cloudconfig/core": "0.2.0-beta.6",
+    "@cloudconfig/nuxt": "0.2.0-beta.6",
     "@iconify-json/lucide": "^1.2.132",
     "@iconify-json/simple-icons": "^1.2.96",
     "@nuxt/kit": "4.6.1",
     "@nuxt/ui": "^4.11.1",
     "@vueuse/core": "^14.4.0",
     "better-auth": "^1.7.7",
-    "@nuxtagentic/kit": "0.1.1"
+    "@nuxtagentic/kit": "0.1.2"
   },
   "peerDependencies": {
     "nuxt": "^4.6.1",

package/runtime/components/BrandMark.vue

@@ -1,8 +1,17 @@
 <template>
-  <span
-    class="shrink-0 font-mono text-[22px] font-normal leading-none"
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="48 48 160 160"
+    fill="none"
     aria-hidden="true"
+    class="shrink-0"
   >
-    [c]
-  </span>
+    <path
+      fill="#00DC82"
+      fill-rule="evenodd"
+      d="m95.847 148.193l52.206-52.594A31.86 31.86 0 0 1 144 80c0-17.673 14.327-32 32-32s32 14.327 32 32s-14.327 32-32 32a31.85 31.85 0 0 1-16.89-4.815l-52.068 51.699A31.85 31.85 0 0 1 112 176c0 17.673-14.327 32-32 32s-32-14.327-32-32s14.327-32 32-32a31.85 31.85 0 0 1 15.847 4.193M176 96c8.837 0 16-7.163 16-16s-7.163-16-16-16s-16 7.163-16 16s7.163 16 16 16m-96 96c8.837 0 16-7.163 16-16s-7.163-16-16-16s-16 7.163-16 16s7.163 16 16 16"
+    />
+  </svg>
 </template>

package/runtime/components/GithubAuthPanel.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useCloudConfigAuth, useRuntimeConfig } from '#imports'
 import { ref } from 'vue'
-import { useSsoClient } from '../composables/useOrganizationAccess'
 
 const { title, description, label } = defineProps<{
   title: string
@@ -14,36 +13,8 @@ const isGoogleEnabled = (useRuntimeConfig().public.authProviders ?? ['github', '
   'google',
 )
 const isBusy = ref(false)
-const provider = ref<'google' | 'github' | 'sso'>('google')
+const provider = ref<'google' | 'github'>('google')
 const error = ref('')
-const sso = useSsoClient()
-const showSso = ref(false)
-const email = ref('')
-
-/** Enterprise sign-in: the email domain picks the organization's identity provider. */
-async function continueWithSso() {
-  if (isBusy.value || !email.value.includes('@')) {
-    return
-  }
-  isBusy.value = true
-  provider.value = 'sso'
-  error.value = ''
-  try {
-    window.location.assign(
-      await sso.signIn({
-        email: email.value.trim(),
-        callbackURL: '/dashboard',
-        errorCallbackURL: '/sign-in',
-      }),
-    )
-  } catch (cause) {
-    error.value =
-      cause instanceof Error && !/not found/i.test(cause.message)
-        ? cause.message
-        : 'No single sign-on is set up for that email domain.'
-    isBusy.value = false
-  }
-}
 
 async function continueWithProvider(value: 'google' | 'github') {
   if (isBusy.value) {
@@ -69,7 +40,7 @@ async function continueWithProvider(value: 'google' | 'github') {
 
 <template>
   <section class="flex w-full flex-col items-center text-center">
-    <CloudMascot class="h-[90px] w-[100px]" />
+    <BrandMark class="size-20" />
     <h1
       class="mt-7 mb-2 text-[32px] leading-[1.15] font-normal tracking-[-0.03em] text-highlighted"
     >
@@ -98,38 +69,6 @@ async function continueWithProvider(value: 'google' | 'github') {
       :disabled="isBusy"
       @click="continueWithProvider('github')"
     />
-    <form
-      v-if="showSso"
-      class="mt-3 flex w-full gap-2"
-      @submit.prevent="continueWithSso"
-    >
-      <UInput
-        v-model="email"
-        type="email"
-        required
-        autocomplete="email"
-        placeholder="you@company.com"
-        aria-label="Work email"
-        class="min-w-0 flex-1"
-        :ui="{ base: 'h-10' }"
-      />
-      <UButton
-        type="submit"
-        label="Continue"
-        color="neutral"
-        :loading="isBusy && provider === 'sso'"
-        :disabled="isBusy"
-        class="h-10 px-4"
-      />
-    </form>
-    <UButton
-      v-else
-      label="Use single sign-on"
-      color="neutral"
-      variant="link"
-      class="mt-3 text-[13px]"
-      @click="showSso = true"
-    />
     <p
       v-if="error"
       role="alert"

package/runtime/components/UserAvatar.vue

@@ -6,7 +6,7 @@ import { initialsOf } from '../utils/format'
 
 const {
   name,
-  identity: avatarIdentity,
+  identity: avatarIdentity = undefined,
   src = null,
   size = 'sm',
 } = defineProps<{

package/runtime/components/WorkspaceSwitcher.vue

@@ -2,8 +2,6 @@
 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)
@@ -11,14 +9,6 @@ const { activeOrganization, menu, switching, error, refresh } = await useWorkspa
   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()
@@ -57,7 +47,7 @@ watch(
         size="md"
         :square="collapsed"
         :trailing-icon="collapsed ? undefined : 'i-lucide-chevron-down'"
-        :label="collapsed ? undefined : (activeOrganization?.name ?? 'Cloudconfig')"
+        :label="collapsed ? undefined : (activeOrganization?.name ?? 'Personal workspace')"
         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',
@@ -67,15 +57,16 @@ watch(
         aria-label="Open organization menu"
       >
         <template #leading>
-          <CloudconfigLogo
-            v-if="shouldShowDefaultLogo(activeOrganization)"
-            class="size-6"
+          <UIcon
+            v-if="!activeOrganization"
+            name="i-lucide-user-round"
+            class="size-4 text-muted"
           />
           <UAvatar
             v-else
             :src="activeOrganization?.logo ?? undefined"
-            :alt="activeOrganization?.name ?? 'Cloudconfig'"
-            :text="(activeOrganization?.name ?? 'Cloudconfig').charAt(0).toUpperCase()"
+            :alt="activeOrganization?.name"
+            :text="activeOrganization?.name.charAt(0).toUpperCase()"
             size="xs"
             :ui="{
               root: 'rounded-md bg-(--gray-500)',
@@ -87,9 +78,10 @@ watch(
       </UButton>
 
       <template #workspace-leading="{ item }">
-        <CloudconfigLogo
-          v-if="shouldShowDefaultLogo(item.workspace ?? null)"
-          class="size-5"
+        <UIcon
+          v-if="!item.workspace"
+          name="i-lucide-user-round"
+          class="size-4 text-muted"
         />
         <UAvatar
           v-else

package/runtime/components/settings/ImageField.vue

@@ -7,7 +7,7 @@ const file = defineModel<File | null>('file', { required: true })
 const image = defineModel<string | null>('image', { required: true })
 const {
   name,
-  identity,
+  identity = undefined,
   disabled,
   kind = 'avatar',
 } = defineProps<{

package/runtime/components/settings/Provisioning.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
 import type { ScimToken } from '@cloudconfig/core/client'
-import { useOrganizationAdmin, useSsoClient } from '../../composables/useOrganizationAccess'
+import { useOrganizationAdmin, useScimClient } from '../../composables/useOrganizationAccess'
 import { fieldUi } from '../../settings-ui'
 
-const sso = useSsoClient()
+defineOptions({ name: 'SettingsProvisioning' })
+
+const scim = useScimClient()
 const { organization, isAdmin } = useOrganizationAdmin()
 const tokens = ref<ScimToken[]>([])
 const baseUrl = ref('')
@@ -18,7 +20,7 @@ async function load() {
     return
   }
   try {
-    const result = await sso.scim.list()
+    const result = await scim.list()
     tokens.value = result.tokens
     baseUrl.value = result.baseUrl
   } catch (cause) {
@@ -50,7 +52,7 @@ async function run(work: () => Promise<unknown>) {
 
 const create = () =>
   run(async () => {
-    const secret = await sso.scim.create('Directory')
+    const secret = await scim.create('Directory')
     created.value = secret.token
     baseUrl.value = secret.baseUrl
     await load()
@@ -58,7 +60,7 @@ const create = () =>
 
 const revoke = (token: ScimToken) =>
   run(async () => {
-    await sso.scim.revoke(token.uid)
+    await scim.revoke(token.uid)
     await load()
   })
 

package/runtime/components/settings/SettingsOrganizations.vue

@@ -299,7 +299,6 @@ onMounted(() => {
     />
   </SettingsSection>
   <template v-if="active">
-    <SettingsSingleSignOn />
     <SettingsProvisioning />
   </template>
 </template>

package/runtime/composables/useOrganizationAccess.ts

@@ -1,13 +1,13 @@
 import { useCloudConfigOrganizations, useRequestEvent, useRuntimeConfig, useState } from '#imports'
 import { computed, ref, watch } from 'vue'
-import { createSsoClient, type Organization } from '@cloudconfig/core/client'
+import { createScimClient, 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() {
+/** The SCIM client, pointed at the auth mount and SSR-safe. */
+export function useScimClient() {
   const config = useRuntimeConfig().public.cloudconfig as { authBasePath?: string } | undefined
   const event = useRequestEvent()
-  return createSsoClient({
+  return createScimClient({
     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)),

package/runtime/composables/useWorkspaces.ts

@@ -74,7 +74,7 @@ export async function useWorkspaces(onSelected: () => void = () => {}) {
 
   function workspaceItem(workspace: Organization | null): WorkspaceMenuItem {
     return {
-      label: workspace?.name ?? 'Cloudconfig',
+      label: workspace?.name ?? 'Personal workspace',
       workspace,
       slot: 'workspace',
       type: 'checkbox',

package/runtime/layouts/default.vue

@@ -7,8 +7,8 @@
         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>
+        <BrandMark class="size-6" />
+        <span>Nuxt Agentic</span>
       </NuxtLink>
     </header>
     <main class="flex flex-1 items-center justify-center px-6 pt-6 pb-24">

package/runtime/pages/sign-in.vue

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

package/runtime/components/CloudMascot.vue

@@ -1,34 +0,0 @@
-<template>
-  <svg
-    viewBox="0 0 80 72"
-    fill="none"
-    shape-rendering="crispEdges"
-    aria-hidden="true"
-    class="shrink-0"
-  >
-    <path
-      d="M26 8h24v4h8v8h4v8h8v4h4v20h-4v4H10v-4H6V36h4v-4h12V20h4Z"
-      class="fill-(--ui-text-highlighted)"
-    />
-    <path
-      d="M30 12h16v4h8v8h4v8h10v4h2v12h-4v4H14v-4h-4V38h4v-2h12V24h4Z"
-      class="fill-(--ui-bg)"
-    />
-    <path
-      d="M14 44h12v4h36v-4h8v4h-4v4H14Z"
-      class="fill-(--gray-300)"
-    />
-    <path
-      d="M32 30h4v8h-4zm16 0h4v8h-4zM38 42h10v4H38z"
-      class="fill-(--ui-text-highlighted)"
-    />
-    <path
-      d="M60 10h4v4h4v4h-4v4h-4v-4h-4v-4h4Z"
-      class="fill-[#f97316]"
-    />
-    <path
-      d="M28 64h24v4H28zM22 66h36v2H22z"
-      class="fill-(--gray-600)"
-    />
-  </svg>
-</template>

package/runtime/components/CloudconfigLogo.vue

@@ -1,34 +0,0 @@
-<template>
-  <svg
-    viewBox="0 0 80 72"
-    fill="none"
-    shape-rendering="crispEdges"
-    aria-hidden="true"
-    class="shrink-0"
-  >
-    <path
-      d="M26 8h24v4h8v8h4v8h8v4h4v20h-4v4H10v-4H6V36h4v-4h12V20h4Z"
-      class="fill-(--ui-text-highlighted)"
-    />
-    <path
-      d="M30 12h16v4h8v8h4v8h10v4h2v12h-4v4H14v-4h-4V38h4v-2h12V24h4Z"
-      class="fill-(--ui-bg)"
-    />
-    <path
-      d="M14 44h12v4h36v-4h8v4h-4v4H14Z"
-      class="fill-(--ui-bg-accented)"
-    />
-    <path
-      d="M32 30h4v8h-4zm16 0h4v8h-4zM38 42h10v4H38z"
-      class="fill-(--ui-text-highlighted)"
-    />
-    <path
-      d="M60 10h4v4h4v4h-4v4h-4v-4h-4v-4h4Z"
-      class="fill-orange-500"
-    />
-    <path
-      d="M28 64h24v4H28zM22 66h36v2H22z"
-      class="fill-(--ui-border-accented)"
-    />
-  </svg>
-</template>

package/runtime/components/settings/SingleSignOn.vue

@@ -1,396 +0,0 @@
-<script setup lang="ts">
-import { useRuntimeConfig } from '#imports'
-import { computed, onMounted, ref } from 'vue'
-import type { SsoProvider } from '@cloudconfig/core/client'
-import { useOrganizationAdmin, useSsoClient } from '../../composables/useOrganizationAccess'
-import { fieldUi, formFieldUi } from '../../settings-ui'
-
-const sso = useSsoClient()
-const { organization, isAdmin } = useOrganizationAdmin()
-const authBase = String(
-  (useRuntimeConfig().public.cloudconfig as { authBasePath?: string } | undefined)?.authBasePath ??
-    '/api/auth',
-)
-const providers = ref<SsoProvider[]>([])
-const available = ref(true)
-const isBusy = ref(false)
-const error = ref('')
-const adding = ref(false)
-const protocol = ref<'oidc' | 'saml'>('oidc')
-const form = ref({
-  providerId: '',
-  issuer: '',
-  domain: '',
-  clientId: '',
-  clientSecret: '',
-  entryPoint: '',
-  cert: '',
-  metadata: '',
-})
-const verification = ref<{ providerId: string; name: string; value: string }>()
-const origin = computed(() => (import.meta.client ? location.origin : ''))
-const own = computed(() =>
-  providers.value.filter(
-    (provider) => String(provider.organizationId) === String(organization.value?.id),
-  ),
-)
-
-async function load() {
-  try {
-    providers.value = await sso.providers()
-  } catch (cause) {
-    const status = (cause as { status?: number }).status
-    // Without the SSO plugin the routes do not exist; hide the section.
-    if (status === 404) {
-      available.value = false
-    } else {
-      error.value = cause instanceof Error ? cause.message : 'Could not load identity providers.'
-    }
-  }
-}
-onMounted(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
-  }
-}
-
-function slugify(value: string) {
-  return value
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/(^-|-$)/g, '')
-}
-
-async function register() {
-  const organizationId = Number(organization.value?.id)
-  if (!organizationId) {
-    return
-  }
-  await run(async () => {
-    const providerId = slugify(
-      form.value.providerId || `${organization.value?.slug}-${protocol.value}`,
-    )
-    if (protocol.value === 'oidc') {
-      await sso.registerOidc({
-        providerId,
-        issuer: form.value.issuer.trim(),
-        domain: form.value.domain.trim().toLowerCase(),
-        clientId: form.value.clientId.trim(),
-        clientSecret: form.value.clientSecret.trim(),
-        organizationId,
-      })
-    } else {
-      await sso.registerSaml({
-        providerId,
-        issuer: form.value.issuer.trim(),
-        domain: form.value.domain.trim().toLowerCase(),
-        entryPoint: form.value.entryPoint.trim(),
-        organizationId,
-        ...(form.value.metadata.trim() ? { idpMetadata: form.value.metadata.trim() } : {}),
-        ...(form.value.cert.trim() ? { cert: form.value.cert.trim() } : {}),
-      })
-    }
-    adding.value = false
-    form.value = {
-      providerId: '',
-      issuer: '',
-      domain: '',
-      clientId: '',
-      clientSecret: '',
-      entryPoint: '',
-      cert: '',
-      metadata: '',
-    }
-    await load()
-  })
-}
-
-async function requestVerification(provider: SsoProvider) {
-  await run(async () => {
-    const domain = provider.domain.split(',')[0]!.trim()
-    verification.value = {
-      providerId: provider.providerId,
-      ...(await sso.requestDomainVerification(provider.providerId, domain)),
-    }
-  })
-}
-
-async function verify(provider: SsoProvider) {
-  await run(async () => {
-    await sso.verifyDomain(provider.providerId)
-    verification.value = undefined
-    await load()
-  })
-}
-
-async function remove(provider: SsoProvider) {
-  await run(async () => {
-    await sso.remove(provider.providerId)
-    await load()
-  })
-}
-
-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"
-    title="Single sign-on"
-    description="People on your verified email domain sign in through your identity provider and join this organization."
-  >
-    <p
-      v-if="error"
-      role="alert"
-      class="text-[13px] text-error"
-    >
-      {{ error }}
-    </p>
-    <p
-      v-if="!isAdmin"
-      class="text-sm text-muted"
-    >
-      Organization owners and admins set up single sign-on.
-    </p>
-    <template v-else>
-      <div
-        v-for="provider in own"
-        :key="provider.providerId"
-        class="grid gap-2 rounded-md border border-default p-3"
-      >
-        <div class="flex flex-wrap items-center justify-between gap-2">
-          <div class="min-w-0">
-            <p class="truncate text-sm text-highlighted">{{ provider.issuer }}</p>
-            <p class="mt-0.5 truncate text-[13px] text-muted">
-              {{ provider.domain }} ·
-              {{ provider.domainVerified ? 'domain verified' : 'domain not verified yet' }}
-            </p>
-          </div>
-          <div class="flex shrink-0 gap-2">
-            <UButton
-              v-if="!provider.domainVerified"
-              label="Verify domain"
-              color="neutral"
-              variant="outline"
-              :disabled="isBusy"
-              class="h-9 rounded-md px-3 text-sm font-normal"
-              @click="requestVerification(provider)"
-            />
-            <UButton
-              label="Remove"
-              color="neutral"
-              variant="ghost"
-              :disabled="isBusy"
-              class="h-9 rounded-md px-3 text-sm font-normal"
-              @click="remove(provider)"
-            />
-          </div>
-        </div>
-        <div
-          v-if="verification?.providerId === provider.providerId"
-          class="grid gap-2"
-        >
-          <p class="text-[13px] text-muted">
-            Add this TXT record at your DNS host, then verify. Sign-in through this provider starts
-            working once the domain is verified.
-          </p>
-          <UInput
-            :model-value="verification.name"
-            readonly
-            aria-label="TXT record name"
-            :ui="fieldUi"
-          />
-          <UInput
-            :model-value="verification.value"
-            readonly
-            aria-label="TXT record value"
-            :ui="fieldUi"
-          />
-          <div class="flex gap-2">
-            <UButton
-              label="Copy value"
-              color="neutral"
-              variant="outline"
-              size="sm"
-              @click="copy(verification.value)"
-            />
-            <UButton
-              label="Verify"
-              color="neutral"
-              size="sm"
-              :loading="isBusy"
-              @click="verify(provider)"
-            />
-          </div>
-        </div>
-      </div>
-      <form
-        v-if="adding"
-        class="grid gap-4"
-        @submit.prevent="register"
-      >
-        <div
-          class="grid grid-cols-2 gap-1 rounded-lg border border-default p-0.5"
-          role="radiogroup"
-          aria-label="Protocol"
-        >
-          <UButton
-            v-for="value in ['oidc', 'saml'] as const"
-            :key="value"
-            :label="value === 'oidc' ? 'OpenID Connect' : 'SAML 2.0'"
-            color="neutral"
-            :variant="protocol === value ? 'soft' : 'ghost'"
-            role="radio"
-            :aria-checked="protocol === value"
-            class="h-8 justify-center rounded-md text-[13px]"
-            @click="protocol = value"
-          />
-        </div>
-        <UFormField
-          label="Email domain"
-          description="Comma-separate several domains served by the same provider."
-          :ui="formFieldUi"
-        >
-          <UInput
-            v-model="form.domain"
-            required
-            placeholder="acme.com"
-            :ui="fieldUi"
-          />
-        </UFormField>
-        <UFormField
-          :label="protocol === 'oidc' ? 'Issuer URL' : 'IdP entity ID'"
-          :ui="formFieldUi"
-        >
-          <UInput
-            v-model="form.issuer"
-            required
-            :placeholder="
-              protocol === 'oidc' ? 'https://acme.okta.com' : 'http://www.okta.com/exk…'
-            "
-            :ui="fieldUi"
-          />
-        </UFormField>
-        <template v-if="protocol === 'oidc'">
-          <UFormField
-            label="Client ID"
-            :ui="formFieldUi"
-          >
-            <UInput
-              v-model="form.clientId"
-              required
-              :ui="fieldUi"
-            />
-          </UFormField>
-          <UFormField
-            label="Client secret"
-            :ui="formFieldUi"
-          >
-            <UInput
-              v-model="form.clientSecret"
-              required
-              type="password"
-              autocomplete="off"
-              :ui="fieldUi"
-            />
-          </UFormField>
-          <p class="text-[13px] text-muted">
-            Redirect URI for your identity provider:
-            <code class="break-all text-highlighted">
-              {{ origin }}{{ authBase }}/sso/callback/{{
-                slugify(form.providerId || `${organization.slug}-oidc`)
-              }}
-            </code>
-          </p>
-        </template>
-        <template v-else>
-          <UFormField
-            label="Single sign-on URL"
-            :ui="formFieldUi"
-          >
-            <UInput
-              v-model="form.entryPoint"
-              required
-              type="url"
-              :ui="fieldUi"
-            />
-          </UFormField>
-          <UFormField
-            label="IdP metadata XML"
-            description="Or paste the signing certificate below."
-            :ui="formFieldUi"
-          >
-            <UTextarea
-              v-model="form.metadata"
-              :rows="3"
-              class="w-full"
-            />
-          </UFormField>
-          <UFormField
-            label="Signing certificate (PEM)"
-            :ui="formFieldUi"
-          >
-            <UTextarea
-              v-model="form.cert"
-              :rows="3"
-              class="w-full"
-            />
-          </UFormField>
-          <p class="text-[13px] text-muted">
-            ACS URL for your identity provider:
-            <code class="break-all text-highlighted">
-              {{ origin }}{{ authBase }}/sso/saml2/sp/acs/{{
-                slugify(form.providerId || `${organization.slug}-saml`)
-              }}
-            </code>
-          </p>
-        </template>
-        <div class="flex flex-wrap gap-2">
-          <UButton
-            type="submit"
-            label="Add identity provider"
-            :loading="isBusy"
-            class="h-10 rounded-md px-4 text-sm font-medium"
-          />
-          <UButton
-            type="button"
-            color="neutral"
-            variant="outline"
-            label="Cancel"
-            :disabled="isBusy"
-            class="h-10 rounded-md px-4 text-sm font-normal"
-            @click="adding = false"
-          />
-        </div>
-      </form>
-      <UButton
-        v-else
-        type="button"
-        color="neutral"
-        variant="outline"
-        icon="i-lucide-plus"
-        label="Add identity provider"
-        class="h-10 w-fit rounded-md px-4 text-sm font-normal"
-        @click="adding = true"
-      />
-    </template>
-  </SettingsSection>
-</template>