@plutocms/supabase 0.9.0 → 0.10.0

package/app/pages/admin/setup.vue

@@ -6,8 +6,10 @@ definePageMeta({
   layout: 'setup',
 })
 
+const { t, uiLocale } = usePlutoI18n()
+
 useHead({
-  title: 'Setup Wizard',
+  title: () => t('supabase.setup.title'),
 })
 
 const config = useRuntimeConfig()
@@ -19,14 +21,14 @@ const toast = useToast()
 
 const isDev = import.meta.dev
 
-const items = ref<StepperItem[]>([
+const items = computed<StepperItem[]>(() => [
   {
-    title: 'Database Setup',
+    title: t('supabase.setup.steps.database'),
     icon: 'i-lucide-database',
   },
 
   {
-    title: 'Complete Setup',
+    title: t('supabase.setup.steps.complete'),
     icon: 'i-lucide-check',
   },
 ])
@@ -66,10 +68,10 @@ const currentStepId = computed(() => {
 
 const currentStepSubmitLabel = computed(() => {
   if (currentStep.value === 0) {
-    return 'Set up database'
+    return t('supabase.setup.submit')
   }
 
-  return 'Submit'
+  return t('supabase.setup.next')
 })
 
 /**
@@ -91,8 +93,8 @@ async function waitForServerAndAdvance(): Promise<boolean> {
       await $fetch('/api/settings/first_setup')
 
       toast.add({
-        title: 'Reconnected',
-        description: 'The server is back. Your database has been set up.',
+        title: t('supabase.connection.reconnected'),
+        description: t('supabase.setup.reconnectedDescription'),
         icon: 'lucide:check-circle',
         color: 'success',
       })
@@ -126,8 +128,8 @@ async function completeDatabaseSetup() {
 
     if (data.success === false) {
       toast.add({
-        title: 'Database setup failed',
-        description: 'Please check your password and try again.',
+        title: t('supabase.setup.failed'),
+        description: t('supabase.setup.failedDescription'),
         icon: 'lucide:circle-x',
         color: 'error',
       })
@@ -141,8 +143,8 @@ async function completeDatabaseSetup() {
     }
 
     toast.add({
-      title: 'Database setup complete',
-      description: 'Your database has been set up successfully.',
+      title: t('supabase.setup.complete'),
+      description: t('supabase.setup.completeDescription'),
       icon: 'lucide:check-circle',
       color: 'success',
     })
@@ -164,8 +166,8 @@ async function completeDatabaseSetup() {
 
     if (import.meta.dev && !hasStatusCode) {
       toast.add({
-        title: 'Dev server restarting',
-        description: 'Setup is finishing. Reconnecting…',
+        title: t('supabase.connection.restarting'),
+        description: t('supabase.setup.restartingDescription'),
         icon: 'lucide:refresh-cw',
         color: 'info',
       })
@@ -177,9 +179,8 @@ async function completeDatabaseSetup() {
       }
 
       toast.add({
-        title: 'Still reconnecting',
-        description:
-          'The dev server is taking longer than expected. Reload this page in a moment.',
+        title: t('supabase.connection.stillReconnecting'),
+        description: t('supabase.connection.stillReconnectingDescription'),
         icon: 'lucide:triangle-alert',
         color: 'warning',
       })
@@ -192,8 +193,8 @@ async function completeDatabaseSetup() {
     }
 
     toast.add({
-      title: 'Error setting up the database',
-      description: 'Please check the console for more details.',
+      title: t('supabase.setup.error'),
+      description: t('supabase.connection.checkConsole'),
       icon: 'lucide:circle-x',
       color: 'error',
     })
@@ -210,7 +211,7 @@ function handleStepChange(step: number) {
 </script>
 
 <template>
-  <UApp>
+  <UApp :locale="uiLocale">
     <div class="flex min-h-dvh items-center justify-center p-4">
       <UCard class="w-full max-w-125">
         <div class="flex flex-col gap-y-8">
@@ -223,7 +224,7 @@ function handleStepChange(step: number) {
                 class="flex flex-col gap-y-4"
                 @submit="handleStepChange(currentStep)"
               >
-                <UFormField label="Supabase connection string" required>
+                <UFormField :label="t('supabase.connection.connectionString')" required>
                   <UInput
                     v-model="databaseForm.connectionString"
                     :disabled="isSettingUpDatabase"
@@ -233,19 +234,24 @@ function handleStepChange(step: number) {
                   />
 
                   <template #help>
-                    You can find your connection string
-                    <ULink
-                      :to="`https://supabase.com/dashboard/project/${projectId}/database/settings?showConnect=true&method=transaction`"
-                      target="_blank"
-                      class="underline"
-                      external
+                    <SupabaseMessageParts
+                      :message="t('supabase.connection.connectionStringHelp')"
                     >
-                      clicking here </ULink
-                    >.
+                      <template #link>
+                        <ULink
+                          :to="`https://supabase.com/dashboard/project/${projectId}/database/settings?showConnect=true&method=transaction`"
+                          target="_blank"
+                          class="underline"
+                          external
+                        >
+                          {{ t('supabase.connection.connectionStringHelpLink') }}
+                        </ULink>
+                      </template>
+                    </SupabaseMessageParts>
                   </template>
                 </UFormField>
 
-                <UFormField label="Database password" required>
+                <UFormField :label="t('supabase.connection.password')" required>
                   <UInput
                     v-model="databaseForm.password"
                     :disabled="isSettingUpDatabase"
@@ -261,42 +267,50 @@ function handleStepChange(step: number) {
                   variant="outline"
                 >
                   <template #description>
-                    Your password is created when you create your Supabase
-                    project. You can change it in the
-                    <ULink
-                      to="https://supabase.com/dashboard/project/_/database/settings"
-                      target="_blank"
+                    <SupabaseMessageParts
+                      :message="t('supabase.connection.passwordInfo')"
                     >
-                      Supabase Database Settings </ULink
-                    >.
+                      <template #link>
+                        <ULink
+                          to="https://supabase.com/dashboard/project/_/database/settings"
+                          target="_blank"
+                        >
+                          {{ t('supabase.connection.passwordInfoLink') }}
+                        </ULink>
+                      </template>
+                    </SupabaseMessageParts>
                   </template>
                 </UAlert>
 
                 <UAlert
+                  :title="t('supabase.connection.whyTitle')"
                   color="warning"
                   variant="outline"
-                  title="Why do I need to provide a database password?"
                   icon="lucide:info"
                 >
                   <template #description>
                     <div class="flex flex-col gap-y-4">
                       <p>
-                        It will be used to create your database structure. It
-                        won't be stored anywhere. That's a
-                        <UTooltip
-                          text="Click on the 'Technical details' button for more info"
+                        <SupabaseMessageParts
+                          :message="t('supabase.setup.why')"
                         >
-                          <span class="underline decoration-dotted cursor-help">
-                            promise</span
-                          ></UTooltip
-                        >! 😉
+                          <template #promise>
+                            <UTooltip :text="t('supabase.setup.promiseTooltip')">
+                              <span
+                                class="underline decoration-dotted cursor-help"
+                              >
+                                {{ t('supabase.setup.promise') }}</span
+                              ></UTooltip
+                            >
+                          </template>
+                        </SupabaseMessageParts>
                       </p>
 
                       <div>
                         <UPopover :content="{ side: 'bottom' }" arrow>
                           <UButton
+                            :label="t('supabase.setup.technicalDetails')"
                             icon="lucide:lightbulb"
-                            label="Technical details"
                             color="info"
                             variant="subtle"
                             class="w-fit"
@@ -308,31 +322,32 @@ function handleStepChange(step: number) {
                               class="flex flex-col gap-y-4 max-w-xs p-4 text-white text-sm"
                             >
                               <p>
-                                When you click "Next", a request to
-                                <ULink
-                                  to="https://github.com/plutocms/supabase/blob/feat/setup-wizard/server/api/setup/create.post.ts"
-                                  target="_blank"
-                                  class="underline"
-                                >
-                                  a server route</ULink
-                                >
-                                will be made with the database password you
-                                provided. This API will then use this password
-                                to make a direct PostgreSQL connection to your
-                                Supabase database and run the SQL queries from
-                                this
-                                <ULink
-                                  to="https://github.com/plutocms/supabase/tree/main/db/migrations"
-                                  target="_blank"
-                                  class="underline"
+                                <SupabaseMessageParts
+                                  :message="t('supabase.setup.technicalDetailsRequest')"
                                 >
-                                  SQL files</ULink
-                                >.
+                                  <template #route>
+                                    <ULink
+                                      to="https://github.com/plutocms/supabase/blob/feat/setup-wizard/server/api/setup/create.post.ts"
+                                      target="_blank"
+                                      class="underline"
+                                    >
+                                      {{ t('supabase.setup.technicalDetailsRoute') }}</ULink
+                                    >
+                                  </template>
+                                  <template #files>
+                                    <ULink
+                                      to="https://github.com/plutocms/supabase/tree/main/db/migrations"
+                                      target="_blank"
+                                      class="underline"
+                                    >
+                                      {{ t('supabase.setup.technicalDetailsFiles') }}</ULink
+                                    >
+                                  </template>
+                                </SupabaseMessageParts>
                               </p>
 
                               <p>
-                                After the setup is complete, the password will
-                                NOT be stored or used for any other purpose.
+                                {{ t('supabase.setup.technicalDetailsStored') }}
                               </p>
                             </div>
                           </template>
@@ -344,11 +359,11 @@ function handleStepChange(step: number) {
 
                 <UAlert
                   v-if="isDev"
+                  :title="t('supabase.connection.restartTitle')"
+                  :description="t('supabase.setup.restartDescription')"
                   color="info"
                   variant="outline"
-                  title="This restarts the dev server"
                   icon="lucide:refresh-cw"
-                  description="Saving your connection string writes it to .env. In development, that restarts the server automatically. The page will briefly show a reconnecting message — this is expected, not an error."
                 />
               </UForm>
             </section>
@@ -358,12 +373,11 @@ function handleStepChange(step: number) {
                 <hgroup class="text-center">
                   <span class="text-3xl">🎉</span>
 
-                  <h1 class="font-bold text-2xl">Setup Complete</h1>
+                  <h1 class="font-bold text-2xl">{{ t('supabase.setup.doneTitle') }}</h1>
                 </hgroup>
 
                 <p class="text-balance text-center text-lg">
-                  Your database is ready. Create your admin account by signing
-                  up.
+                  {{ t('supabase.setup.doneDescription') }}
                 </p>
 
                 <EnvPersistWarning
@@ -378,7 +392,7 @@ function handleStepChange(step: number) {
                     color="primary"
                     trailing
                   >
-                    Go to sign up
+                    {{ t('supabase.setup.goToSignup') }}
                   </UButton>
                 </p>
               </div>

package/app/pages/admin.vue

@@ -5,6 +5,7 @@ definePageMeta({
 })
 
 const route = useRoute()
+const { t } = usePlutoI18n()
 const { isLoggedIn, logout, allowedUnauthenticatedPaths } = await useAuth()
 const toast = useToast()
 
@@ -26,8 +27,8 @@ watch(visibility, async (current, previous) => {
       await logout({ redirectTo: route.path })
 
       toast.add({
-        title: 'You are not logged in',
-        description: 'Please log in to continue.',
+        title: t('supabase.auth.toasts.notLoggedIn'),
+        description: t('supabase.auth.toasts.notLoggedInDescription'),
         icon: 'lucide:circle-x',
         color: 'error',
       })

package/app/plugins/pluto-extension.ts

@@ -2,6 +2,10 @@ import NavbarAdminProvider from '../components/navbar/NavbarAdminProvider.vue'
 import SettingsGeneralPanel from '../components/settings/SettingsGeneralPanel.vue'
 
 export default defineNuxtPlugin(() => {
+  // Read at setup, while the Nuxt context exists. The driver below calls it
+  // later, after an await, when the context is gone.
+  const errorText = usePlutoErrorText()
+
   definePlutoExtension({
     id: 'supabase',
     navbar: { id: 'admin-navbar', component: NavbarAdminProvider },
@@ -9,7 +13,7 @@ export default defineNuxtPlugin(() => {
       {
         id: 'general',
         order: 0,
-        title: 'General',
+        title: 'supabase.settings.general.title',
         icon: 'lucide:globe',
         component: SettingsGeneralPanel,
       },
@@ -40,9 +44,26 @@ export default defineNuxtPlugin(() => {
     // gated by requireAdmin (public.is_admin() directly), never a named
     // capability — see server/utils/admin-guard.ts for why.
     capabilities: [
-      { id: 'settings-manage', key: 'settings:manage', label: 'Manage site settings' },
-      { id: 'users-read', key: 'users:read', label: 'View all user accounts' },
+      { id: 'settings-manage', key: 'settings:manage', label: 'supabase.capabilities.settingsManage' },
+      { id: 'users-read', key: 'users:read', label: 'supabase.capabilities.usersRead' },
     ],
+    // The admin language of the signed-in user, stored in profiles.locale
+    // (005_profile_locale.sql). A save error carries the translated server
+    // text, so the Settings language card can show it in a toast.
+    localeDriver: {
+      id: 'supabase',
+      load: async () => {
+        const response = await $fetch<{ locale: string | null }>('/api/profile/locale')
+        return response.locale
+      },
+      save: async (locale) => {
+        try {
+          await $fetch('/api/profile/locale', { method: 'POST', body: { locale } })
+        } catch (error) {
+          throw new Error(errorText(error))
+        }
+      },
+    },
     permissionsDriver: {
       id: 'supabase',
       load: async () => {

package/app/plugins/pluto-locale-sync.client.ts

@@ -0,0 +1,30 @@
+/**
+ * Loads the signed-in user's stored admin language whenever a session
+ * appears: after a login, and on a page load that already has a session.
+ * App-wide, like pluto-permissions-sync.ts, so any page gets the language,
+ * not only the pages under /admin.
+ *
+ * Client-only, unlike the permissions sync. A server `$fetch` does not forward
+ * the user's cookies, so a server run would read no locale and clear the cookie.
+ * The server already resolves the first locale from the cookie or the
+ * Accept-Language header. The stored value then replaces it on the client, and
+ * the cookie keeps it for the next server render.
+ *
+ * `useSupabaseSession()` is the same primitive the permissions sync uses.
+ * `syncUserLocale()` never throws. With no driver, or on an error, nothing
+ * changes.
+ */
+export default defineNuxtPlugin(() => {
+  const session = useSupabaseSession()
+  const { syncUserLocale } = usePlutoI18n()
+
+  watch(
+    session,
+    (current) => {
+      if (current) {
+        void syncUserLocale()
+      }
+    },
+    { immediate: true }
+  )
+})

package/app/utils/auth-error.ts

@@ -0,0 +1,53 @@
+// Turns a Supabase auth error into text for the admin. This file does not use
+// Nuxt auto-imports, so plain Vitest can import it.
+
+/** The translation key of each Supabase auth error code that the admin knows. */
+export const AUTH_ERROR_KEYS: Record<string, string> = {
+  invalid_credentials: 'supabase.auth.errors.invalid_credentials',
+  email_not_confirmed: 'supabase.auth.errors.email_not_confirmed',
+  over_request_rate_limit: 'supabase.auth.errors.over_request_rate_limit',
+  over_email_send_rate_limit: 'supabase.auth.errors.over_email_send_rate_limit',
+  weak_password: 'supabase.auth.errors.weak_password',
+  same_password: 'supabase.auth.errors.same_password',
+  user_not_found: 'supabase.auth.errors.user_not_found',
+  email_exists: 'supabase.auth.errors.email_exists',
+  user_already_exists: 'supabase.auth.errors.user_already_exists',
+  signup_disabled: 'supabase.auth.errors.signup_disabled',
+  email_address_invalid: 'supabase.auth.errors.email_address_invalid',
+}
+
+/** The key for errors with no code, no message, or an unknown shape. */
+export const AUTH_UNKNOWN_ERROR_KEY = 'supabase.auth.errors.unknown'
+
+/** Returns the translation key of an auth error code, or `undefined`. */
+export function authErrorKey(error: unknown): string | undefined {
+  const code = (error as { code?: unknown } | null | undefined)?.code
+
+  return typeof code === 'string' && Object.hasOwn(AUTH_ERROR_KEYS, code)
+    ? AUTH_ERROR_KEYS[code]
+    : undefined
+}
+
+/**
+ * Returns the text of an auth error. The order is:
+ *
+ * 1. The translated text of a known `error.code`.
+ * 2. The raw `error.message`.
+ * 3. The translated unknown-error text.
+ */
+export function resolveAuthErrorText(
+  error: unknown,
+  i18n: { t: (key: string) => string, te: (key: string) => boolean }
+): string {
+  const key = authErrorKey(error)
+
+  if (key && i18n.te(key)) {
+    return i18n.t(key)
+  }
+
+  const message = (error as { message?: unknown } | null | undefined)?.message
+
+  return typeof message === 'string' && message.trim() !== ''
+    ? message
+    : i18n.t(AUTH_UNKNOWN_ERROR_KEY)
+}

package/db/migrations/005_profile_locale.sql

@@ -0,0 +1,44 @@
+-- Profile language
+--
+-- Stores each user's admin language on their own profile row. NULL means
+-- "Automatic": the user has not chosen one, so the admin uses the browser
+-- language. The format check accepts any BCP 47 style code ('en', 'pt-BR'),
+-- never a fixed list, so a new language needs no migration. The app decides
+-- which codes it offers.
+--
+-- There is no UPDATE policy on public.profiles, on purpose: a user must never
+-- write their own is_admin column. A SECURITY DEFINER function is the only
+-- writer of this column. It touches the row of auth.uid() and no other row,
+-- and it touches only the locale. This migration adds no RLS policy. The
+-- existing select policy already lets a user read their own row.
+
+alter table public.profiles add column if not exists locale text;
+
+do $$
+begin
+  if not exists (
+    select 1 from pg_constraint
+     where conname = 'profiles_locale_format'
+       and conrelid = 'public.profiles'::regclass
+  ) then
+    alter table public.profiles
+      add constraint profiles_locale_format
+      check (locale is null or locale ~ '^[a-z]{2,3}(-[A-Za-z0-9]{2,8})*$') not valid;
+  end if;
+end
+$$;
+
+alter table public.profiles validate constraint profiles_locale_format;
+
+-- Sets the language of the calling user. Pass NULL to choose Automatic.
+create or replace function public.set_my_locale(new_locale text)
+returns void
+language sql security definer set search_path = ''
+as $$
+  update public.profiles
+     set locale = new_locale, updated_at = now()
+   where id = auth.uid();
+$$;
+
+revoke execute on function public.set_my_locale(text) from public, anon;
+grant execute on function public.set_my_locale(text) to authenticated;