@plutocms/supabase 0.11.3 → 0.12.0

package/app/pages/admin/settings/roles.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+// The Roles tab of Settings (admin only). A role is a set of capabilities. An
+// admin creates, edits and deletes roles. The `admin` role is built in: it
+// opens read-only, and it cannot be deleted. See the users-and-roles skill.
+import type { DropdownMenuItem, TableColumn } from '@nuxt/ui'
+import type { AccessRole } from '../../../../shared/types/access'
+import { ADMIN_ROLE_KEY } from '../../../utils/access-ui'
+
+// The slideover and the modal load on demand. They stay out of the page chunk.
+const RoleSlideover = defineAsyncComponent(() => import('../../../components/access/RoleSlideover.vue'))
+const DeleteRoleModal = defineAsyncComponent(() => import('../../../components/access/DeleteRoleModal.vue'))
+
+const { t } = usePlutoI18n()
+const overlay = useOverlay()
+const errorText = usePlutoErrorText()
+
+useHead({
+  title: () => `${t('supabase.access.roles.title')} - ${t('pluto.pages.settings')}`,
+})
+
+const roles = ref<AccessRole[]>([])
+const status = ref<'loading' | 'ready' | 'error'>('loading')
+const loadError = ref('')
+
+async function load() {
+  // Keep the table on screen while it reloads after a change.
+  if (status.value !== 'ready') {
+    status.value = 'loading'
+  }
+
+  try {
+    const response = await $fetch<{ roles: AccessRole[] }>('/api/access/roles')
+
+    roles.value = response.roles
+    status.value = 'ready'
+  } catch (error) {
+    loadError.value = errorText(error)
+    status.value = 'error'
+  }
+}
+
+onMounted(load)
+
+const columns = computed<TableColumn<AccessRole>[]>(() => [
+  { id: 'role', header: t('supabase.access.roles.columns.role') },
+  { id: 'permissions', header: t('supabase.access.roles.columns.permissions') },
+  { id: 'users', header: t('supabase.access.roles.columns.users') },
+  { id: 'actions', header: '' },
+])
+
+// --- Create and edit ---
+const slideoverMounted = ref(false)
+const slideoverOpen = ref(false)
+const editing = ref<AccessRole | null>(null)
+
+function openRole(role: AccessRole | null) {
+  editing.value = role
+  slideoverMounted.value = true
+  slideoverOpen.value = true
+}
+
+// --- Delete ---
+async function openDelete(role: AccessRole) {
+  const modal = overlay.create(DeleteRoleModal)
+  const deleted = await modal.open({ role })
+
+  if (deleted) {
+    await load()
+  }
+}
+
+function isFullAccess(role: AccessRole): boolean {
+  return role.capabilities.includes('*')
+}
+
+function menuItems(role: AccessRole): DropdownMenuItem[][] {
+  const readOnly = role.key === ADMIN_ROLE_KEY
+  const main: DropdownMenuItem[] = [
+    {
+      label: readOnly ? t('supabase.access.roles.menu.view') : t('supabase.access.roles.menu.edit'),
+      icon: readOnly ? 'lucide:eye' : 'lucide:pencil',
+      onSelect: () => openRole(role),
+    },
+  ]
+
+  // A built-in role cannot be deleted.
+  if (role.is_builtin) {
+    return [main]
+  }
+
+  return [
+    main,
+    [
+      {
+        label: t('supabase.access.roles.menu.delete'),
+        icon: 'lucide:trash-2',
+        color: 'error',
+        onSelect: () => openDelete(role),
+      },
+    ],
+  ]
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-y-6">
+    <div class="flex flex-wrap items-start justify-between gap-4">
+      <div>
+        <h2 class="text-xl font-semibold">{{ t('supabase.access.roles.title') }}</h2>
+        <p class="text-muted text-sm">{{ t('supabase.access.roles.description') }}</p>
+      </div>
+
+      <UButton icon="lucide:plus" @click="openRole(null)">
+        {{ t('supabase.access.roles.create') }}
+      </UButton>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="status === 'loading'" class="flex flex-col gap-y-3" aria-busy="true">
+      <USkeleton v-for="row in 3" :key="row" class="h-12 w-full" />
+    </div>
+
+    <!-- Error -->
+    <UAlert
+      v-else-if="status === 'error'"
+      :title="t('supabase.access.roles.error.title')"
+      :description="loadError"
+      :actions="[{ label: t('pluto.common.tryAgain'), color: 'neutral', variant: 'outline', onClick: load }]"
+      color="error"
+      variant="subtle"
+      icon="lucide:circle-x"
+    />
+
+    <!-- The list -->
+    <UTable v-else :data="roles" :columns="columns" class="border-default rounded-lg border">
+      <template #role-cell="{ row }">
+        <div class="flex min-w-0 flex-col">
+          <span class="flex items-center gap-2">
+            <span class="text-highlighted truncate font-medium">{{ row.original.label }}</span>
+            <UBadge
+              v-if="row.original.is_builtin"
+              :label="t('supabase.access.roles.builtin')"
+              color="neutral"
+              variant="subtle"
+              size="sm"
+            />
+          </span>
+          <code class="text-muted truncate font-mono text-xs">{{ row.original.key }}</code>
+        </div>
+      </template>
+
+      <template #permissions-cell="{ row }">
+        <span v-if="isFullAccess(row.original)" class="text-sm">
+          {{ t('supabase.access.roles.fullAccess') }}
+        </span>
+        <span v-else class="text-sm">
+          {{ t('supabase.access.roles.permissionCount', row.original.capabilities.length) }}
+        </span>
+      </template>
+
+      <template #users-cell="{ row }">
+        <span class="text-sm">{{ t('supabase.access.roles.userCount', row.original.user_count) }}</span>
+      </template>
+
+      <template #actions-cell="{ row }">
+        <div class="flex justify-end">
+          <UDropdownMenu :items="menuItems(row.original)" :content="{ align: 'end' }">
+            <UButton
+              :aria-label="row.original.label"
+              icon="lucide:ellipsis"
+              color="neutral"
+              variant="ghost"
+            />
+          </UDropdownMenu>
+        </div>
+      </template>
+    </UTable>
+
+    <!-- Lazy: the chunk loads on the first open. -->
+    <RoleSlideover
+      v-if="slideoverMounted"
+      v-model:open="slideoverOpen"
+      :role="editing"
+      @saved="load"
+    />
+  </div>
+</template>

package/app/pages/admin/settings/users.vue

@@ -0,0 +1,372 @@
+<script setup lang="ts">
+// The Users tab of Settings. It lists the staff (users with a role). An admin
+// invites users, changes their roles, resends an invite, copies an invite link
+// and revokes access. The parent page (core `settings.vue`) draws the title and
+// the tabs. See the users-and-roles skill.
+import type { DropdownMenuItem, TableColumn } from '@nuxt/ui'
+import type {
+  AccessCapabilities,
+  AccessRole,
+  AccessUser,
+} from '../../../../shared/types/access'
+import {
+  isAdminUser,
+  roleLabelOf,
+  userDisplayName,
+  userStatus,
+} from '../../../utils/access-ui'
+
+// The modals and the slideover load on demand. They stay out of the page chunk.
+const InviteModal = defineAsyncComponent(() => import('../../../components/access/InviteModal.vue'))
+const EditRolesSlideover = defineAsyncComponent(() => import('../../../components/access/EditRolesSlideover.vue'))
+const RevokeModal = defineAsyncComponent(() => import('../../../components/access/RevokeModal.vue'))
+const LinkModal = defineAsyncComponent(() => import('../../../components/access/LinkModal.vue'))
+
+const { t, d, locale } = usePlutoI18n()
+const toast = useToast()
+const overlay = useOverlay()
+const errorText = usePlutoErrorText()
+const permissions = usePlutoPermissions()
+const auth = usePlutoAuth()
+
+useHead({
+  title: () => `${t('supabase.access.users.title')} - ${t('pluto.pages.settings')}`,
+})
+
+const users = ref<AccessUser[]>([])
+const roles = ref<AccessRole[]>([])
+const status = ref<'loading' | 'ready' | 'error'>('loading')
+const loadError = ref('')
+const capabilities = ref<AccessCapabilities | null>(null)
+
+const isAdmin = computed(() => permissions.isAdmin.value)
+const selfId = computed(() => auth.user.value?.id ?? '')
+
+async function load() {
+  // Keep the table on screen while it reloads after a change.
+  if (status.value !== 'ready') {
+    status.value = 'loading'
+  }
+
+  try {
+    const [usersResponse, rolesResponse] = await Promise.all([
+      $fetch<{ users: AccessUser[] }>('/api/access/users'),
+      $fetch<{ roles: AccessRole[] }>('/api/access/roles'),
+    ])
+
+    users.value = usersResponse.users
+    roles.value = rolesResponse.roles
+    status.value = 'ready'
+  } catch (error) {
+    loadError.value = errorText(error)
+    status.value = 'error'
+  }
+}
+
+async function loadCapabilities() {
+  try {
+    capabilities.value = await $fetch<AccessCapabilities>('/api/access/capabilities')
+  } catch {
+    // The invite works without it. Only the "Copy invite link" action hides.
+    capabilities.value = null
+  }
+}
+
+onMounted(load)
+
+// Only an admin can read this, so ask after the permissions are known.
+watch(isAdmin, (admin) => {
+  if (admin && !capabilities.value) {
+    void loadCapabilities()
+  }
+}, { immediate: true })
+
+const columns = computed<TableColumn<AccessUser>[]>(() => [
+  { id: 'user', header: t('supabase.access.users.columns.user') },
+  { id: 'roles', header: t('supabase.access.users.columns.roles') },
+  { id: 'status', header: t('supabase.access.users.columns.status') },
+  { id: 'lastSignIn', header: t('supabase.access.users.columns.lastSignIn') },
+  { id: 'actions', header: '' },
+])
+
+function dateText(value: string | null, options: Intl.DateTimeFormatOptions): string {
+  return value ? d(new Date(value), options) : ''
+}
+
+// --- Invite ---
+const inviteMounted = ref(false)
+const inviteOpen = ref(false)
+
+function openInvite() {
+  inviteMounted.value = true
+  inviteOpen.value = true
+}
+
+// --- Edit roles ---
+const editMounted = ref(false)
+const editOpen = ref(false)
+const editUser = ref<AccessUser | null>(null)
+
+function openEdit(user: AccessUser) {
+  editUser.value = user
+  editMounted.value = true
+  editOpen.value = true
+}
+
+// --- Revoke ---
+async function openRevoke(user: AccessUser) {
+  const modal = overlay.create(RevokeModal)
+  const revoked = await modal.open({ user, self: user.id === selfId.value })
+
+  if (revoked) {
+    await load()
+  }
+}
+
+// --- Invite link ---
+async function showLink(link: string) {
+  await overlay.create(LinkModal).open({ link })
+}
+
+async function copyLink(user: AccessUser) {
+  if (!user.email) {
+    return
+  }
+
+  try {
+    const result = await $fetch<{ link: string | null }>('/api/access/users/invite-link', {
+      method: 'POST',
+      body: { email: user.email, roleKeys: user.roles },
+    })
+
+    // A confirmed account gets no link: it signs in with its own password.
+    if (!result.link) {
+      toast.add({
+        title: t('supabase.access.toasts.noLinkConfirmed'),
+        color: 'info',
+        icon: 'lucide:info',
+      })
+      return
+    }
+
+    await showLink(result.link)
+  } catch (error) {
+    toast.add({
+      title: t('supabase.access.toasts.failed'),
+      description: errorText(error),
+      color: 'error',
+      icon: 'lucide:circle-x',
+    })
+  }
+}
+
+// --- Resend ---
+async function resend(user: AccessUser) {
+  try {
+    const result = await $fetch<{ emailSent?: boolean, link?: string }>(
+      `/api/access/users/${user.id}/resend`,
+      { method: 'POST', body: { locale: locale.value } }
+    )
+
+    if (result.emailSent === false && result.link) {
+      toast.add({
+        title: t('supabase.access.toasts.resentNoEmail'),
+        color: 'warning',
+        icon: 'lucide:triangle-alert',
+      })
+      await showLink(result.link)
+
+      return
+    }
+
+    toast.add({
+      title: t('supabase.access.toasts.resent', { email: user.email ?? '' }),
+      color: 'success',
+      icon: 'lucide:circle-check',
+    })
+  } catch (error) {
+    toast.add({
+      title: t('supabase.access.toasts.failed'),
+      description: errorText(error),
+      color: 'error',
+      icon: 'lucide:circle-x',
+    })
+  }
+}
+
+function menuItems(user: AccessUser): DropdownMenuItem[][] {
+  const pending = userStatus(user) === 'invited'
+  const main: DropdownMenuItem[] = [
+    {
+      label: t('supabase.access.users.menu.editRoles'),
+      icon: 'lucide:shield',
+      onSelect: () => openEdit(user),
+    },
+  ]
+
+  if (pending) {
+    main.push({
+      label: t('supabase.access.users.menu.resend'),
+      icon: 'lucide:send',
+      onSelect: () => resend(user),
+    })
+
+    if (capabilities.value?.serviceKey && user.roles.length > 0) {
+      main.push({
+        label: t('supabase.access.users.menu.copyLink'),
+        icon: 'lucide:link',
+        onSelect: () => copyLink(user),
+      })
+    }
+  }
+
+  return [
+    main,
+    [
+      {
+        label: t('supabase.access.users.menu.revoke'),
+        icon: 'lucide:user-x',
+        color: 'error',
+        onSelect: () => openRevoke(user),
+      },
+    ],
+  ]
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-y-6">
+    <div class="flex flex-wrap items-start justify-between gap-4">
+      <div>
+        <h2 class="text-xl font-semibold">{{ t('supabase.access.users.title') }}</h2>
+        <p class="text-muted text-sm">{{ t('supabase.access.users.description') }}</p>
+      </div>
+
+      <UButton v-if="isAdmin" icon="lucide:user-plus" @click="openInvite">
+        {{ t('supabase.access.users.invite') }}
+      </UButton>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="status === 'loading'" class="flex flex-col gap-y-3" aria-busy="true">
+      <USkeleton v-for="row in 4" :key="row" class="h-12 w-full" />
+    </div>
+
+    <!-- Error -->
+    <UAlert
+      v-else-if="status === 'error'"
+      :title="t('supabase.access.users.error.title')"
+      :description="loadError"
+      :actions="[{ label: t('pluto.common.tryAgain'), color: 'neutral', variant: 'outline', onClick: load }]"
+      color="error"
+      variant="subtle"
+      icon="lucide:circle-x"
+    />
+
+    <!-- Empty -->
+    <UEmpty
+      v-else-if="users.length === 0"
+      :title="t('supabase.access.users.empty.title')"
+      :description="t('supabase.access.users.empty.description')"
+      :actions="isAdmin ? [{ label: t('supabase.access.users.invite'), icon: 'lucide:user-plus', onClick: openInvite }] : []"
+      icon="lucide:users"
+    />
+
+    <!-- The list -->
+    <UTable v-else :data="users" :columns="columns" class="border-default rounded-lg border">
+      <template #user-cell="{ row }">
+        <div class="flex min-w-0 flex-col">
+          <span class="flex items-center gap-2">
+            <span class="text-highlighted truncate font-medium">{{ userDisplayName(row.original) }}</span>
+            <UBadge
+              v-if="row.original.id === selfId"
+              :label="t('supabase.access.users.you')"
+              color="primary"
+              variant="subtle"
+              size="sm"
+            />
+          </span>
+          <span v-if="row.original.email" class="text-muted truncate text-sm">{{ row.original.email }}</span>
+        </div>
+      </template>
+
+      <template #roles-cell="{ row }">
+        <div class="flex flex-wrap gap-1">
+          <UBadge
+            v-if="isAdminUser(row.original)"
+            :label="t('supabase.access.users.administrator')"
+            color="primary"
+            variant="subtle"
+          />
+          <template v-else>
+            <UBadge
+              v-for="key in row.original.roles"
+              :key="key"
+              :label="roleLabelOf(roles, key)"
+              color="neutral"
+              variant="subtle"
+            />
+          </template>
+        </div>
+      </template>
+
+      <template #status-cell="{ row }">
+        <div class="flex flex-col items-start gap-1">
+          <UBadge
+            v-if="userStatus(row.original) === 'active'"
+            :label="t('supabase.access.users.status.active')"
+            color="success"
+            variant="subtle"
+          />
+          <template v-else>
+            <UBadge
+              :label="t('supabase.access.users.status.invited')"
+              color="warning"
+              variant="subtle"
+            />
+            <span v-if="row.original.invited_at" class="text-muted text-xs">
+              {{ t('supabase.access.users.status.invitedOn', { date: dateText(row.original.invited_at, { dateStyle: 'medium' }) }) }}
+            </span>
+          </template>
+        </div>
+      </template>
+
+      <template #lastSignIn-cell="{ row }">
+        <span v-if="row.original.last_sign_in_at" class="text-sm">
+          {{ dateText(row.original.last_sign_in_at, { dateStyle: 'medium', timeStyle: 'short' }) }}
+        </span>
+        <span v-else class="text-muted text-sm">{{ t('supabase.access.users.neverSignedIn') }}</span>
+      </template>
+
+      <template #actions-cell="{ row }">
+        <div v-if="isAdmin" class="flex justify-end">
+          <UDropdownMenu :items="menuItems(row.original)" :content="{ align: 'end' }">
+            <UButton
+              :aria-label="t('supabase.access.users.actionsLabel', { name: userDisplayName(row.original) })"
+              icon="lucide:ellipsis"
+              color="neutral"
+              variant="ghost"
+            />
+          </UDropdownMenu>
+        </div>
+      </template>
+    </UTable>
+
+    <!-- Lazy: the chunk loads on the first open. -->
+    <InviteModal
+      v-if="inviteMounted"
+      v-model:open="inviteOpen"
+      :roles="roles"
+      :capabilities="capabilities"
+      @done="load"
+    />
+    <EditRolesSlideover
+      v-if="editMounted"
+      v-model:open="editOpen"
+      :user="editUser"
+      :roles="roles"
+      :self="editUser?.id === selfId"
+      @saved="load"
+    />
+  </div>
+</template>

package/app/plugins/pluto-extension.ts

@@ -1,6 +1,6 @@
 import { defineAsyncComponent } from 'vue'
 
-// The three components load on demand. They stay out of the entry chunk. Core
+// The four components load on demand. They stay out of the entry chunk. Core
 // shows a skeleton while each chunk loads.
 const AuthSignIn = defineAsyncComponent(
   () => import('../components/auth/AuthSignIn.vue')
@@ -11,6 +11,10 @@ const MigrationsBanner = defineAsyncComponent(
 const SettingsGeneralPanel = defineAsyncComponent(
   () => import('../components/settings/SettingsGeneralPanel.vue')
 )
+// The guide for the Supabase sign-in emails, a section of the Email tab.
+const AuthEmailsPanel = defineAsyncComponent(
+  () => import('../components/mail/AuthEmailsPanel.vue')
+)
 
 export default defineNuxtPlugin(() => {
   // Read at setup, while the Nuxt context exists. The driver below calls it
@@ -161,6 +165,37 @@ export default defineNuxtPlugin(() => {
         component: SettingsGeneralPanel,
       },
     ],
+    // The Users and Roles tabs of Settings. The page files are in
+    // app/pages/admin/settings/. Users shows for `users:read` (an admin always
+    // has it). Roles is admin only: '*' is the admin-only capability.
+    settingsPages: [
+      {
+        id: 'users',
+        order: 10,
+        label: 'supabase.access.users.title',
+        icon: 'lucide:users',
+        to: '/admin/settings/users',
+        capability: 'users:read',
+      },
+      {
+        id: 'roles',
+        order: 20,
+        label: 'supabase.access.roles.title',
+        icon: 'lucide:shield',
+        to: '/admin/settings/roles',
+        capability: '*',
+      },
+    ],
+    // A guide on the Email tab: the sign-in emails come from Supabase.
+    mailPanels: [
+      {
+        id: 'auth-emails',
+        title: 'supabase.mail.authEmails.title',
+        description: 'supabase.mail.authEmails.description',
+        icon: 'lucide:mail',
+        component: AuthEmailsPanel,
+      },
+    ],
     settingsDriver: {
       id: 'supabase',
       load: async () => {
@@ -179,6 +214,8 @@ export default defineNuxtPlugin(() => {
         hasSettingsModified.value = Date.now()
       },
     },
+    // Core groups these capabilities in the Roles editor under the label
+    // 'supabase.capabilities.group' (the `<owner>.capabilities.group` key).
     // No 'system:migrate' capability: applying migrations stays admin-only,
     // gated by requireAdmin (public.is_admin() directly), never a named
     // capability — see server/utils/admin-guard.ts for why.