@plutocms/supabase 0.9.1 → 0.11.0

package/app/pages/admin/migrations.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+const { t } = usePlutoI18n()
+
 useHead({
-  title: 'Migrations',
+  title: () => t('supabase.migrations.title'),
 })
 
 const config = useRuntimeConfig()
@@ -15,6 +17,19 @@ const { status, fetchStatus, pendingCount, refresh, runMigrations } =
 
 const isDev = import.meta.dev
 
+// The text of each result status that the server returns.
+const statusLabels: Record<string, string> = {
+  applied: 'supabase.migrations.status.applied',
+  skipped: 'supabase.migrations.status.skipped',
+  failed: 'supabase.migrations.status.failed',
+}
+
+function statusText(status: string): string {
+  const key = statusLabels[status]
+
+  return key ? t(key) : status
+}
+
 // Only the layers that actually have a pending, or applied, file — used to
 // render per-file detail under each layer below.
 const pendingLayers = computed(
@@ -86,9 +101,9 @@ async function applyMigrations(useForm: boolean) {
 
     if (result.success === false) {
       toast.add({
-        title: 'Could not apply migrations',
+        title: t('supabase.migrations.applyFailed'),
         description: result.needsConnectionString
-          ? 'A database connection string is required.'
+          ? t('supabase.migrations.connectionRequired')
           : undefined,
         icon: 'lucide:circle-x',
         color: 'error',
@@ -98,7 +113,7 @@ async function applyMigrations(useForm: boolean) {
     }
 
     toast.add({
-      title: 'Migrations applied',
+      title: t('supabase.migrations.applied'),
       icon: 'lucide:check-circle',
       color: 'success',
     })
@@ -118,9 +133,8 @@ async function applyMigrations(useForm: boolean) {
 
     if (isDev && useForm && !hasStatusCode) {
       toast.add({
-        title: 'Dev server restarting',
-        description:
-          'Saving a new connection string restarts the dev server. Reconnecting…',
+        title: t('supabase.connection.restarting'),
+        description: t('supabase.migrations.restartingDescription'),
         icon: 'lucide:refresh-cw',
         color: 'info',
       })
@@ -134,18 +148,21 @@ async function applyMigrations(useForm: boolean) {
       toast.add(
         recovered
           ? {
-              title: 'Reconnected',
+              title: t('supabase.connection.reconnected'),
               description:
                 pendingCount.value === 0
-                  ? 'The server is back. All migrations were applied.'
-                  : `The server is back. ${pendingCount.value} layer(s) still pending — check above.`,
+                  ? t('supabase.migrations.reconnectedAllApplied')
+                  : t('supabase.migrations.reconnectedPending', {
+                      count: pendingCount.value,
+                    }),
               icon: 'lucide:check-circle',
               color: 'success',
             }
           : {
-              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',
             }
@@ -159,8 +176,8 @@ async function applyMigrations(useForm: boolean) {
     }
 
     toast.add({
-      title: 'Error applying migrations',
-      description: 'Please check the console for more details.',
+      title: t('supabase.migrations.error'),
+      description: t('supabase.connection.checkConsole'),
       icon: 'lucide:circle-x',
       color: 'error',
     })
@@ -172,15 +189,15 @@ async function applyMigrations(useForm: boolean) {
 
 <template>
   <AdminView>
-    <h1 class="text-3xl font-bold lg:text-4xl">Migrations</h1>
+    <h1 class="text-3xl font-bold lg:text-4xl">{{ t('supabase.migrations.title') }}</h1>
 
     <UAlert
       v-if="isReconnecting"
+      :title="t('supabase.connection.restarting')"
+      :description="t('supabase.migrations.reconnectingBanner')"
       color="info"
       variant="outline"
       icon="lucide:refresh-cw"
-      title="Dev server restarting"
-      description="Saving a new connection string restarts the dev server. Reconnecting — this page will update on its own once it's back."
     />
 
     <div
@@ -188,7 +205,7 @@ async function applyMigrations(useForm: boolean) {
       class="flex items-center gap-x-2"
     >
       <Icon name="svg-spinners:ring-resize" />
-      <span>Loading migration status…</span>
+      <span>{{ t('supabase.migrations.loading') }}</span>
     </div>
 
     <template v-else-if="status">
@@ -196,16 +213,20 @@ async function applyMigrations(useForm: boolean) {
         <div class="flex flex-col gap-y-6">
           <UAlert
             v-if="pendingCount === 0"
+            :title="t('supabase.migrations.upToDate')"
+            :description="t('supabase.migrations.upToDateDescription')"
             color="success"
             variant="outline"
             icon="lucide:check-circle"
-            title="Everything is up to date"
-            description="No layer needs a database migration."
           />
 
           <div v-else class="flex flex-col gap-y-2">
             <h2 class="font-semibold">
-              Pending layers ({{ status.pending.length }})
+              {{
+                t('supabase.migrations.pendingLayers', {
+                  count: status.pending.length,
+                })
+              }}
             </h2>
             <ul class="flex flex-col gap-y-2 text-sm">
               <li v-for="layer in pendingLayers" :key="layer.layerName">
@@ -221,7 +242,11 @@ async function applyMigrations(useForm: boolean) {
 
           <div v-if="status.applied.length" class="flex flex-col gap-y-2">
             <h2 class="font-semibold">
-              Applied layers ({{ status.applied.length }})
+              {{
+                t('supabase.migrations.appliedLayers', {
+                  count: status.applied.length,
+                })
+              }}
             </h2>
             <ul class="flex flex-col gap-y-2 text-sm">
               <li v-for="layer in appliedLayers" :key="layer.layerName">
@@ -241,7 +266,7 @@ async function applyMigrations(useForm: boolean) {
               class="flex flex-col gap-y-4"
               @submit="applyMigrations(true)"
             >
-              <UFormField label="Supabase connection string" required>
+              <UFormField :label="t('supabase.connection.connectionString')" required>
                 <UInput
                   v-model="connectionForm.connectionString"
                   :disabled="isRunning"
@@ -250,19 +275,24 @@ async function applyMigrations(useForm: boolean) {
                 />
 
                 <template #help>
-                  You can find your connection string
-                  <ULink
-                    :to="`https://supabase.com/dashboard/project/${projectId}/database/settings?showConnect=true&connectTab=direct&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&connectTab=direct&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="connectionForm.password"
                   :disabled="isRunning"
@@ -278,32 +308,36 @@ async function applyMigrations(useForm: boolean) {
                 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')"
+                :description="t('supabase.migrations.why')"
                 color="warning"
                 variant="outline"
-                title="Why do I need to provide a database password?"
                 icon="lucide:info"
-                description="It is used once to open a direct PostgreSQL connection and run the pending layer schemas. It is then written to .env on the server, so future migrations need no prompt. It is never stored anywhere else, and never sent back to your browser."
               />
 
               <UAlert
                 v-if="isDev"
+                :title="t('supabase.connection.restartTitle')"
+                :description="t('supabase.migrations.restartDescription')"
                 color="info"
                 variant="outline"
-                title="This restarts the dev server"
                 icon="lucide:refresh-cw"
-                description="Saving a new 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."
               />
 
               <div class="flex">
@@ -314,7 +348,7 @@ async function applyMigrations(useForm: boolean) {
                   icon="lucide:database"
                   class="w-full justify-center sm:w-auto"
                 >
-                  Apply pending migrations
+                  {{ t('supabase.migrations.apply') }}
                 </UButton>
               </div>
             </UForm>
@@ -327,7 +361,7 @@ async function applyMigrations(useForm: boolean) {
                 class="w-full justify-center sm:w-auto"
                 @click="applyMigrations(false)"
               >
-                Apply pending migrations
+                {{ t('supabase.migrations.apply') }}
               </UButton>
             </div>
           </template>
@@ -336,7 +370,9 @@ async function applyMigrations(useForm: boolean) {
 
       <UCard v-if="lastRun">
         <div class="flex flex-col gap-y-4">
-          <h2 class="font-semibold">Last run</h2>
+          <h2 class="font-semibold">
+            {{ t('supabase.migrations.lastRun') }}
+          </h2>
 
           <EnvPersistWarning
             v-if="lastRun.success && lastRun.persisted === false"
@@ -354,7 +390,7 @@ async function applyMigrations(useForm: boolean) {
               <span class="font-mono"
               >{{ result.layerName }}/{{ result.migrationName }}</span
               >
-              — {{ result.status }}
+              — {{ statusText(result.status) }}
               <span v-if="result.error" class="text-error">
                 : {{ result.error }}</span
               >
@@ -366,11 +402,11 @@ async function applyMigrations(useForm: boolean) {
 
     <UAlert
       v-else
+      :title="t('supabase.migrations.loadFailed')"
+      :description="t('supabase.migrations.loadFailedDescription')"
       color="error"
       variant="outline"
       icon="lucide:circle-x"
-      title="Could not load migration status"
-      description="This isn't the dev-server-restart case above — something else went wrong reading migration status. Check the server console, then try again."
     >
       <template #actions>
         <UButton
@@ -379,7 +415,7 @@ async function applyMigrations(useForm: boolean) {
           icon="lucide:refresh-cw"
           @click="refresh()"
         >
-          Retry
+          {{ t('supabase.migrations.retry') }}
         </UButton>
       </template>
     </UAlert>

package/app/pages/admin/setup.vue

@@ -2,12 +2,13 @@
 import type { StepperItem } from '@nuxt/ui'
 
 definePageMeta({
-  middleware: ['setup-check'],
   layout: 'setup',
 })
 
+const { t, uiLocale } = usePlutoI18n()
+
 useHead({
-  title: 'Setup Wizard',
+  title: () => t('supabase.setup.title'),
 })
 
 const config = useRuntimeConfig()
@@ -19,14 +20,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 +67,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 +92,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 +127,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 +142,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 +165,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 +178,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 +192,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 +210,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 +223,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 +233,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 +266,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 +321,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 +358,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 +372,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 +391,7 @@ function handleStepChange(step: number) {
                     color="primary"
                     trailing
                   >
-                    Go to sign up
+                    {{ t('supabase.setup.goToSignup') }}
                   </UButton>
                 </p>
               </div>