@plutocms/supabase 0.14.1 → 0.15.1

package/app/pages/admin/(auth)/forgot-password.vue

@@ -25,8 +25,14 @@ async function submitForm() {
 
 <template>
   <PlutoAdminAuthCard
-    :title="isEmailSent ? t('supabase.auth.forgot.sentTitle') : t('supabase.auth.forgot.title')"
-    :description="isEmailSent ? undefined : t('supabase.auth.forgot.description')"
+    :title="
+      isEmailSent
+        ? t('supabase.auth.forgot.sentTitle')
+        : t('supabase.auth.forgot.title')
+    "
+    :description="
+      isEmailSent ? undefined : t('supabase.auth.forgot.description')
+    "
   >
     <div v-if="isEmailSent" class="space-y-6 py-10">
       <div class="text-center space-y-4">
@@ -37,7 +43,9 @@ async function submitForm() {
         </hgroup>
 
         <p>
-          <SupabaseMessageParts :message="t('supabase.auth.forgot.sentDescription')">
+          <SupabaseMessageParts
+            :message="t('supabase.auth.forgot.sentDescription')"
+          >
             <template #email>
               <strong>{{ email }}</strong>
             </template>
@@ -54,7 +62,6 @@ async function submitForm() {
 
     <form v-else @submit.prevent="submitForm">
       <div class="flex flex-col gap-y-6">
-
         <UFormField :label="t('supabase.auth.fields.email')">
           <UInput
             v-model="email"

package/app/pages/admin/(auth)/signup.vue

@@ -62,8 +62,10 @@ async function submitForm() {
       description: resolveAuthErrorText(
         {
           code: failureData(error)?.code,
-          message: (error as { data?: { statusMessage?: string } }).data?.statusMessage
-            ?? errorText(error, 'supabase.auth.errors.unknown'),
+          message:
+            (error as { data?: { statusMessage?: string } }).data
+              ?.statusMessage ??
+            errorText(error, 'supabase.auth.errors.unknown'),
         },
         { t, te }
       ),
@@ -78,7 +80,11 @@ async function submitForm() {
 
 <template>
   <PlutoAdminAuthCard
-    :title="isEmailVerificationMessageVisible ? t('supabase.auth.signup.almostThere') : t('supabase.auth.signup.title')"
+    :title="
+      isEmailVerificationMessageVisible
+        ? t('supabase.auth.signup.almostThere')
+        : t('supabase.auth.signup.title')
+    "
   >
     <div v-if="isEmailVerificationMessageVisible" class="space-y-6 py-10">
       <div class="text-center space-y-4">
@@ -98,11 +104,7 @@ async function submitForm() {
           </template>
         </UAlert>
 
-        <UAlert
-          icon="lucide:alert-triangle"
-          color="warning"
-          variant="outline"
-        >
+        <UAlert icon="lucide:alert-triangle" color="warning" variant="outline">
           <template #description>
             {{ t('supabase.auth.signup.checkSpam') }}
           </template>
@@ -112,7 +114,6 @@ async function submitForm() {
 
     <form v-else @submit.prevent="submitForm">
       <div class="flex flex-col gap-y-6">
-
         <UFormField :label="t('supabase.auth.fields.email')" required>
           <UInput
             v-model="form.email"

package/app/pages/admin/(auth)/update-password.vue

@@ -51,8 +51,14 @@ async function submitForm() {
 
 <template>
   <PlutoAdminAuthCard
-    :title="isPasswordUpdated ? t('supabase.auth.update.doneTitle') : t('supabase.auth.update.title')"
-    :description="isPasswordUpdated ? undefined : t('supabase.auth.update.description')"
+    :title="
+      isPasswordUpdated
+        ? t('supabase.auth.update.doneTitle')
+        : t('supabase.auth.update.title')
+    "
+    :description="
+      isPasswordUpdated ? undefined : t('supabase.auth.update.description')
+    "
   >
     <div v-if="isPasswordUpdated" class="space-y-6 py-10">
       <div class="text-center space-y-4">
@@ -76,7 +82,6 @@ async function submitForm() {
 
     <form v-else @submit.prevent="submitForm">
       <div class="flex flex-col gap-y-6">
-
         <UFormField :label="t('supabase.auth.update.newPassword')">
           <UInput
             v-model="form.password"

package/app/pages/admin/migrations.vue

@@ -189,7 +189,9 @@ async function applyMigrations(useForm: boolean) {
 
 <template>
   <AdminView>
-    <h1 class="text-3xl font-bold lg:text-4xl">{{ t('supabase.migrations.title') }}</h1>
+    <h1 class="text-3xl font-bold lg:text-4xl">
+      {{ t('supabase.migrations.title') }}
+    </h1>
 
     <UAlert
       v-if="isReconnecting"
@@ -266,7 +268,10 @@ async function applyMigrations(useForm: boolean) {
               class="flex flex-col gap-y-4"
               @submit="applyMigrations(true)"
             >
-              <UFormField :label="t('supabase.connection.connectionString')" required>
+              <UFormField
+                :label="t('supabase.connection.connectionString')"
+                required
+              >
                 <UInput
                   v-model="connectionForm.connectionString"
                   :disabled="isRunning"
@@ -388,7 +393,7 @@ async function applyMigrations(useForm: boolean) {
               :key="`${result.layerName}/${result.migrationName}`"
             >
               <span class="font-mono"
-              >{{ result.layerName }}/{{ result.migrationName }}</span
+                >{{ result.layerName }}/{{ result.migrationName }}</span
               >
               — {{ statusText(result.status) }}
               <span v-if="result.error" class="text-error">

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

@@ -7,15 +7,20 @@ 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 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')}`,
+  title: () =>
+    `${t('supabase.access.roles.title')} - ${t('pluto.pages.settings')}`,
 })
 
 const roles = ref<AccessRole[]>([])
@@ -29,7 +34,9 @@ async function load() {
   }
 
   try {
-    const response = await $fetch<{ roles: AccessRole[] }>('/api/_pluto/supabase/access/roles')
+    const response = await $fetch<{ roles: AccessRole[] }>(
+      '/api/_pluto/supabase/access/roles'
+    )
 
     roles.value = response.roles
     status.value = 'ready'
@@ -77,7 +84,9 @@ 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'),
+      label: readOnly
+        ? t('supabase.access.roles.menu.view')
+        : t('supabase.access.roles.menu.edit'),
       icon: readOnly ? 'lucide:eye' : 'lucide:pencil',
       onSelect: () => openRole(role),
     },
@@ -106,8 +115,12 @@ function menuItems(role: AccessRole): DropdownMenuItem[][] {
   <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>
+        <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)">
@@ -116,7 +129,11 @@ function menuItems(role: AccessRole): DropdownMenuItem[][] {
     </div>
 
     <!-- Loading -->
-    <div v-if="status === 'loading'" class="flex flex-col gap-y-3" aria-busy="true">
+    <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>
 
@@ -125,18 +142,32 @@ function menuItems(role: AccessRole): DropdownMenuItem[][] {
       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 }]"
+      :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">
+    <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>
+            <span class="text-highlighted truncate font-medium">{{
+              row.original.label
+            }}</span>
             <UBadge
               v-if="row.original.is_builtin"
               :label="t('supabase.access.roles.builtin')"
@@ -145,7 +176,9 @@ function menuItems(role: AccessRole): DropdownMenuItem[][] {
               size="sm"
             />
           </span>
-          <code class="text-muted truncate font-mono text-xs">{{ row.original.key }}</code>
+          <code class="text-muted truncate font-mono text-xs">{{
+            row.original.key
+          }}</code>
         </div>
       </template>
 
@@ -154,17 +187,27 @@ function menuItems(role: AccessRole): DropdownMenuItem[][] {
           {{ t('supabase.access.roles.fullAccess') }}
         </span>
         <span v-else class="text-sm">
-          {{ t('supabase.access.roles.permissionCount', row.original.capabilities.length) }}
+          {{
+            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>
+        <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' }">
+          <UDropdownMenu
+            :items="menuItems(row.original)"
+            :content="{ align: 'end' }"
+          >
             <UButton
               :aria-label="row.original.label"
               icon="lucide:ellipsis"

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

@@ -17,10 +17,18 @@ import {
 } 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 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()
@@ -30,7 +38,8 @@ const permissions = usePlutoPermissions()
 const auth = usePlutoAuth()
 
 useHead({
-  title: () => `${t('supabase.access.users.title')} - ${t('pluto.pages.settings')}`,
+  title: () =>
+    `${t('supabase.access.users.title')} - ${t('pluto.pages.settings')}`,
 })
 
 const users = ref<AccessUser[]>([])
@@ -65,7 +74,9 @@ async function load() {
 
 async function loadCapabilities() {
   try {
-    capabilities.value = await $fetch<AccessCapabilities>('/api/_pluto/supabase/access/capabilities')
+    capabilities.value = await $fetch<AccessCapabilities>(
+      '/api/_pluto/supabase/access/capabilities'
+    )
   } catch {
     // The invite works without it. Only the "Copy invite link" action hides.
     capabilities.value = null
@@ -75,11 +86,15 @@ async function loadCapabilities() {
 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 })
+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') },
@@ -89,7 +104,10 @@ const columns = computed<TableColumn<AccessUser>[]>(() => [
   { id: 'actions', header: '' },
 ])
 
-function dateText(value: string | null, options: Intl.DateTimeFormatOptions): string {
+function dateText(
+  value: string | null,
+  options: Intl.DateTimeFormatOptions
+): string {
   return value ? d(new Date(value), options) : ''
 }
 
@@ -134,10 +152,13 @@ async function copyLink(user: AccessUser) {
   }
 
   try {
-    const result = await $fetch<{ link: string | null }>('/api/_pluto/supabase/access/users/invite-link', {
-      method: 'POST',
-      body: { email: user.email, roleKeys: user.roles },
-    })
+    const result = await $fetch<{ link: string | null }>(
+      '/api/_pluto/supabase/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) {
@@ -163,7 +184,7 @@ async function copyLink(user: AccessUser) {
 // --- Resend ---
 async function resend(user: AccessUser) {
   try {
-    const result = await $fetch<{ emailSent?: boolean, link?: string }>(
+    const result = await $fetch<{ emailSent?: boolean; link?: string }>(
       `/api/_pluto/supabase/access/users/${user.id}/resend`,
       { method: 'POST', body: { locale: locale.value } }
     )
@@ -238,8 +259,12 @@ function menuItems(user: AccessUser): DropdownMenuItem[][] {
   <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>
+        <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">
@@ -248,7 +273,11 @@ function menuItems(user: AccessUser): DropdownMenuItem[][] {
     </div>
 
     <!-- Loading -->
-    <div v-if="status === 'loading'" class="flex flex-col gap-y-3" aria-busy="true">
+    <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>
 
@@ -257,7 +286,14 @@ function menuItems(user: AccessUser): DropdownMenuItem[][] {
       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 }]"
+      :actions="[
+        {
+          label: t('pluto.common.tryAgain'),
+          color: 'neutral',
+          variant: 'outline',
+          onClick: load,
+        },
+      ]"
       color="error"
       variant="subtle"
       icon="lucide:circle-x"
@@ -268,16 +304,33 @@ function menuItems(user: AccessUser): DropdownMenuItem[][] {
       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 }] : []"
+      :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">
+    <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>
+            <span class="text-highlighted truncate font-medium">{{
+              userDisplayName(row.original)
+            }}</span>
             <UBadge
               v-if="row.original.id === selfId"
               :label="t('supabase.access.users.you')"
@@ -286,7 +339,9 @@ function menuItems(user: AccessUser): DropdownMenuItem[][] {
               size="sm"
             />
           </span>
-          <span v-if="row.original.email" class="text-muted truncate text-sm">{{ row.original.email }}</span>
+          <span v-if="row.original.email" class="text-muted truncate text-sm">{{
+            row.original.email
+          }}</span>
         </div>
       </template>
 
@@ -325,7 +380,13 @@ function menuItems(user: AccessUser): DropdownMenuItem[][] {
               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' }) }) }}
+              {{
+                t('supabase.access.users.status.invitedOn', {
+                  date: dateText(row.original.invited_at, {
+                    dateStyle: 'medium',
+                  }),
+                })
+              }}
             </span>
           </template>
         </div>
@@ -333,16 +394,30 @@ function menuItems(user: AccessUser): DropdownMenuItem[][] {
 
       <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' }) }}
+          {{
+            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>
+        <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' }">
+          <UDropdownMenu
+            :items="menuItems(row.original)"
+            :content="{ align: 'end' }"
+          >
             <UButton
-              :aria-label="t('supabase.access.users.actionsLabel', { name: userDisplayName(row.original) })"
+              :aria-label="
+                t('supabase.access.users.actionsLabel', {
+                  name: userDisplayName(row.original),
+                })
+              "
               icon="lucide:ellipsis"
               color="neutral"
               variant="ghost"

package/app/pages/admin/setup.vue

@@ -225,7 +225,10 @@ function handleStepChange(step: number) {
                 class="flex flex-col gap-y-4"
                 @submit="handleStepChange(currentStep)"
               >
-                <UFormField :label="t('supabase.connection.connectionString')" required>
+                <UFormField
+                  :label="t('supabase.connection.connectionString')"
+                  required
+                >
                   <UInput
                     v-model="databaseForm.connectionString"
                     :disabled="isSettingUpDatabase"
@@ -245,7 +248,9 @@ function handleStepChange(step: number) {
                           class="underline"
                           external
                         >
-                          {{ t('supabase.connection.connectionStringHelpLink') }}
+                          {{
+                            t('supabase.connection.connectionStringHelpLink')
+                          }}
                         </ULink>
                       </template>
                     </SupabaseMessageParts>
@@ -296,7 +301,9 @@ function handleStepChange(step: number) {
                           :message="t('supabase.setup.why')"
                         >
                           <template #promise>
-                            <UTooltip :text="t('supabase.setup.promiseTooltip')">
+                            <UTooltip
+                              :text="t('supabase.setup.promiseTooltip')"
+                            >
                               <span
                                 class="underline decoration-dotted cursor-help"
                               >
@@ -324,7 +331,9 @@ function handleStepChange(step: number) {
                             >
                               <p>
                                 <SupabaseMessageParts
-                                  :message="t('supabase.setup.technicalDetailsRequest')"
+                                  :message="
+                                    t('supabase.setup.technicalDetailsRequest')
+                                  "
                                 >
                                   <template #route>
                                     <ULink
@@ -332,7 +341,11 @@ function handleStepChange(step: number) {
                                       target="_blank"
                                       class="underline"
                                     >
-                                      {{ t('supabase.setup.technicalDetailsRoute') }}</ULink
+                                      {{
+                                        t(
+                                          'supabase.setup.technicalDetailsRoute'
+                                        )
+                                      }}</ULink
                                     >
                                   </template>
                                   <template #files>
@@ -341,7 +354,11 @@ function handleStepChange(step: number) {
                                       target="_blank"
                                       class="underline"
                                     >
-                                      {{ t('supabase.setup.technicalDetailsFiles') }}</ULink
+                                      {{
+                                        t(
+                                          'supabase.setup.technicalDetailsFiles'
+                                        )
+                                      }}</ULink
                                     >
                                   </template>
                                 </SupabaseMessageParts>
@@ -374,7 +391,9 @@ function handleStepChange(step: number) {
                 <hgroup class="text-center">
                   <span class="text-3xl">🎉</span>
 
-                  <h1 class="font-bold text-2xl">{{ t('supabase.setup.doneTitle') }}</h1>
+                  <h1 class="font-bold text-2xl">
+                    {{ t('supabase.setup.doneTitle') }}
+                  </h1>
                 </hgroup>
 
                 <p class="text-balance text-center text-lg">