@plutocms/supabase 0.0.1-alpha.9 → 0.1.1

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

@@ -7,10 +7,12 @@ useHead({
   title: 'Sign Up',
 })
 
+const toast = useToast()
+
 const form = ref({
   email: '',
-  first_name: '',
-  last_name: '',
+  username: '',
+  display_name: '',
   password: '',
   confirm_password: '',
 })
@@ -21,26 +23,44 @@ const passwordMatch = computed(() => {
   return form.value.password === form.value.confirm_password
 })
 
+const isEmailVerificationMessageVisible = ref<boolean>(false)
+
 async function submitForm() {
   if (!passwordMatch.value) {
     return
   }
 
   isSubmitting.value = true
+
   try {
-    await $fetch('/api/signup', {
+    await $fetch('/api/auth/signup', {
       method: 'POST',
       body: {
         email: form.value.email,
-        first_name: form.value.first_name,
-        last_name: form.value.last_name,
+        username: form.value.username,
+        display_name: form.value.display_name,
         password: form.value.password,
       },
     })
 
-    navigateTo('/admin/login?rel=new')
+    toast.add({
+      title: 'Account created successfully',
+      description: 'You still need to verify your email before you can log in.',
+      icon: 'lucide:check',
+      color: 'success',
+    })
+
+    isEmailVerificationMessageVisible.value = true
   } catch (error) {
     console.error('Error signing up:', error)
+
+    toast.add({
+      title: 'Could not create account',
+      description:
+        error instanceof Error ? error.message : 'An unknown error occurred.',
+      icon: 'lucide:circle-x',
+      color: 'error',
+    })
   } finally {
     isSubmitting.value = false
   }
@@ -50,52 +70,92 @@ async function submitForm() {
 <template>
   <div class="grid h-full place-items-center">
     <UCard class="w-100">
-      <form @submit.prevent="submitForm">
+      <div v-if="isEmailVerificationMessageVisible" class="space-y-6 py-10">
+        <div class="text-center space-y-4">
+          <hgroup class="flex flex-col gap-y-1">
+            <span class="text-5xl">
+              <UIcon name="lucide:mail-warning" class="inline-block" />
+            </span>
+
+            <h1 class="text-3xl font-bold">Almost there!</h1>
+          </hgroup>
+
+          <p>
+            A verification link has been sent to your email. Please check your
+            inbox and follow the instructions to verify your account.
+          </p>
+
+          <UAlert icon="lucide:check" color="success" variant="outline">
+            <template #description>
+              You can close this page. You will be logged in automatically once
+              you verify your email.
+            </template>
+          </UAlert>
+
+          <UAlert
+            icon="lucide:alert-triangle"
+            color="warning"
+            variant="outline"
+          >
+            <template #description>
+              If you don't see the email, please check your spam folder.
+            </template>
+          </UAlert>
+        </div>
+      </div>
+
+      <form v-else @submit.prevent="submitForm">
         <div class="flex flex-col gap-y-6">
           <h1 class="text-3xl font-bold">Create Account</h1>
 
-          <UFormField label="Email">
+          <UFormField label="Email" required>
             <UInput
               v-model="form.email"
               type="email"
               placeholder="victor@example.com"
               class="w-full"
+              required
             />
           </UFormField>
 
           <div class="flex gap-x-4">
-            <UFormField label="First Name">
+            <UFormField label="Username" required>
               <UInput
-                v-model="form.first_name"
-                placeholder="e.g: John"
+                v-model="form.username"
+                placeholder="e.g: johndoe"
                 class="w-full"
+                minlength="3"
+                required
               />
             </UFormField>
 
-            <UFormField label="Last Name">
+            <UFormField label="Display Name" required>
               <UInput
-                v-model="form.last_name"
-                placeholder="e.g: Doe"
+                v-model="form.display_name"
+                placeholder="e.g: John Doe"
                 class="w-full"
+                required
               />
             </UFormField>
           </div>
 
-          <UFormField :error="!passwordMatch" label="Password">
+          <UFormField :error="!passwordMatch" label="Password" required>
             <UInput
               v-model="form.password"
               placeholder="••••"
               class="w-full"
               type="password"
+              required
             />
           </UFormField>
 
-          <UFormField :error="!passwordMatch" label="Confirm Password">
+          <UFormField :error="!passwordMatch" label="Confirm Password" required>
             <UInput
               v-model="form.confirm_password"
               placeholder="••••"
               class="w-full"
               type="password"
+              required
             />
           </UFormField>
 

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

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'auth',
+})
+
+useHead({
+  title: 'Update Password',
+})
+
+const route = useRoute()
+const supabase = useSupabaseClient()
+
+// Exchange the PKCE code for a session when arriving from a password reset email
+onMounted(async () => {
+  const code = route.query.code as string | undefined
+
+  if (code) {
+    await supabase.auth.exchangeCodeForSession(code)
+  }
+})
+
+const { isSubmitting, updatePassword } = await useAuth()
+
+const form = ref({
+  password: '',
+  confirm_password: '',
+})
+
+const passwordMatch = computed(() => {
+  return form.value.password === form.value.confirm_password
+})
+
+const isPasswordUpdated = ref(false)
+
+async function submitForm() {
+  if (!passwordMatch.value) {
+    return
+  }
+
+  const result = await updatePassword(form.value.password)
+
+  if (result.success) {
+    isPasswordUpdated.value = true
+
+    await supabase.auth.signOut()
+  }
+}
+</script>
+
+<template>
+  <div class="grid h-full place-items-center">
+    <UCard class="w-100">
+      <div v-if="isPasswordUpdated" class="space-y-6 py-10">
+        <div class="text-center space-y-4">
+          <hgroup class="flex flex-col gap-y-1">
+            <span class="text-5xl">
+              <UIcon name="lucide:lock-keyhole" class="inline-block" />
+            </span>
+
+            <h1 class="text-3xl font-bold">Password Updated!</h1>
+          </hgroup>
+
+          <p>
+            Your password has been changed. You can now log in with your new
+            password.
+          </p>
+
+          <div class="flex items-center justify-center">
+            <UButton to="/admin/login" color="primary" icon="lucide:log-in">
+              Go to Login
+            </UButton>
+          </div>
+        </div>
+      </div>
+
+      <form v-else @submit.prevent="submitForm">
+        <div class="flex flex-col gap-y-6">
+          <hgroup class="flex flex-col gap-y-1">
+            <h1 class="text-3xl font-bold">Update Password</h1>
+            <p class="text-sm text-muted">Enter your new password below.</p>
+          </hgroup>
+
+          <UFormField label="New Password">
+            <UInput
+              v-model="form.password"
+              placeholder="••••"
+              type="password"
+              class="w-full"
+              autocomplete="new-password"
+              required
+            />
+          </UFormField>
+
+          <UFormField
+            :error="
+              form.confirm_password && !passwordMatch
+                ? 'Passwords do not match.'
+                : undefined
+            "
+            label="Confirm New Password"
+          >
+            <UInput
+              v-model="form.confirm_password"
+              placeholder="••••"
+              type="password"
+              class="w-full"
+              autocomplete="new-password"
+              required
+            />
+          </UFormField>
+
+          <div class="flex items-center justify-between gap-x-4">
+            <UFormField>
+              <UButton
+                :loading="isSubmitting"
+                :disabled="!passwordMatch"
+                type="submit"
+                icon="lucide:lock-keyhole"
+              >
+                Update Password
+              </UButton>
+            </UFormField>
+
+            <UFormField>
+              <UButton variant="link" to="/admin/login" class="px-0">
+                Back to Login
+              </UButton>
+            </UFormField>
+          </div>
+        </div>
+      </form>
+    </UCard>
+  </div>
+</template>

package/app/pages/admin/setup.vue

@@ -23,11 +23,6 @@ const items = ref<StepperItem[]>([
     icon: 'i-lucide-database',
   },
 
-  {
-    title: 'Admin Account',
-    icon: 'i-lucide-user',
-  },
-
   {
     title: 'Complete Setup',
     icon: 'i-lucide-check',
@@ -39,29 +34,17 @@ const stepper = useTemplateRef('stepper')
 const currentStep = ref<number>(0)
 
 const isSettingUpDatabase = ref(false)
-const isCreatingAdmin = ref(false)
 
 const databaseForm = ref({
   connectionString: '',
   password: '',
 })
 
-const adminForm = ref({
-  username: '',
-  display_name: '',
-  email: '',
-  password: '',
-})
-
 const currentLoading = computed(() => {
   if (currentStep.value === 0) {
     return isSettingUpDatabase.value
   }
 
-  if (currentStep.value === 1) {
-    return isCreatingAdmin.value
-  }
-
   return false
 })
 
@@ -70,10 +53,6 @@ const currentStepId = computed(() => {
     return 'database-setup-form'
   }
 
-  if (currentStep.value === 1) {
-    return 'admin-setup-form'
-  }
-
   return undefined
 })
 
@@ -82,10 +61,6 @@ const currentStepSubmitLabel = computed(() => {
     return 'Set up database'
   }
 
-  if (currentStep.value === 1) {
-    return 'Create admin account'
-  }
-
   return 'Submit'
 })
 
@@ -101,7 +76,6 @@ async function completeDatabaseSetup() {
           '[YOUR-PASSWORD]',
           encodeURIComponent(databaseForm.value.password)
         ),
-        adminForm: adminForm.value,
       },
     })
 
@@ -140,71 +114,17 @@ async function completeDatabaseSetup() {
   }
 }
 
-async function createAdminAccount() {
-  try {
-    isCreatingAdmin.value = true
-
-    const data = await $fetch('/api/signup', {
-      method: 'POST',
-      body: {
-        username: adminForm.value.username,
-        display_name: adminForm.value.display_name,
-        email: adminForm.value.email,
-        password: adminForm.value.password,
-        is_admin: true,
-      },
-    })
-
-    if (data.success === false) {
-      toast.add({
-        title: 'Admin account creation failed',
-        description: data.message || 'Please try again.',
-        icon: 'lucide:circle-x',
-        color: 'error',
-      })
-
-      return
-    }
-
-    toast.add({
-      title: 'Admin account created',
-      description: 'Your admin account has been created successfully.',
-      icon: 'lucide:check-circle',
-      color: 'success',
-    })
-
-    stepper.value?.next()
-  } catch (error) {
-    if (import.meta.dev) {
-      console.error('Error creating admin account:', error)
-    }
-
-    toast.add({
-      title: 'Error creating admin account',
-      description: 'Please check the console for more details.',
-      icon: 'lucide:circle-x',
-      color: 'error',
-    })
-  } finally {
-    isCreatingAdmin.value = false
-  }
-}
-
 function handleStepChange(step: number) {
   if (step === 0) {
     completeDatabaseSetup()
   }
-
-  if (step === 1) {
-    createAdminAccount()
-  }
 }
 </script>
 
 <template>
   <UApp>
     <div class="flex justify-center items-center h-screen">
-      <UCard class="w-[500px]">
+      <UCard class="w-125">
         <div class="flex flex-col gap-y-8">
           <UStepper ref="stepper" v-model="currentStep" :items="items" linear />
 
@@ -337,52 +257,6 @@ function handleStepChange(step: number) {
             </section>
 
             <section v-if="currentStep === 1">
-              <UForm
-                id="admin-setup-form"
-                class="grid grid-cols-2 gap-4"
-                @submit="handleStepChange(currentStep)"
-              >
-                <UFormField label="Email" class="col-span-2" required>
-                  <UInput
-                    v-model="adminForm.email"
-                    :disabled="isCreatingAdmin"
-                    placeholder="you@example.com"
-                    autofocus
-                    required
-                  />
-                </UFormField>
-
-                <UFormField label="Username" required>
-                  <UInput
-                    v-model="adminForm.username"
-                    :disabled="isCreatingAdmin"
-                    placeholder="Username"
-                    required
-                  />
-                </UFormField>
-
-                <UFormField label="Display Name" required>
-                  <UInput
-                    v-model="adminForm.display_name"
-                    :disabled="isCreatingAdmin"
-                    placeholder="Display Name"
-                    required
-                  />
-                </UFormField>
-
-                <UFormField label="Password" class="col-span-2" required>
-                  <UInput
-                    v-model="adminForm.password"
-                    :disabled="isCreatingAdmin"
-                    type="password"
-                    placeholder="• • • • "
-                    required
-                  />
-                </UFormField>
-              </UForm>
-            </section>
-
-            <section v-else-if="currentStep === 2">
               <div class="flex flex-col gap-y-4">
                 <hgroup class="text-center">
                   <span class="text-3xl">🎉</span>
@@ -391,29 +265,18 @@ function handleStepChange(step: number) {
                 </hgroup>
 
                 <p class="text-balance text-center text-lg">
-                  Your database is ready and your admin account has been
-                  created.
+                  Your database is ready. Create your admin account by signing
+                  up.
                 </p>
 
-                <UAlert icon="lucide:info" color="warning" variant="outline">
-                  <template #description>
-                    <p>
-                      You need to confirm your email address before you can log
-                      in. Please check your inbox and click on the confirmation
-                      link. If you don't see the email, please check your spam
-                      folder.
-                    </p>
-                  </template>
-                </UAlert>
-
                 <p class="text-center">
                   <UButton
                     icon="lucide:arrow-right"
-                    to="/admin/login"
+                    to="/admin/signup"
                     color="primary"
                     trailing
                   >
-                    Go to login page
+                    Go to sign up
                   </UButton>
                 </p>
               </div>

package/app/pages/admin.vue

@@ -5,7 +5,7 @@ definePageMeta({
 })
 
 const route = useRoute()
-const { isLoggedIn, logout } = await useAuth()
+const { isLoggedIn, logout, allowedUnauthenticatedPaths } = await useAuth()
 const toast = useToast()
 
 const visibility = useDocumentVisibility()
@@ -15,9 +15,7 @@ watch(visibility, async (current, previous) => {
     if (
       !isLoggedIn.value &&
       !route.path.startsWith('/admin/setup') &&
-      route.path.startsWith('/admin/') &&
-      route.path !== '/admin/login' &&
-      route.path !== '/admin/signup'
+      !allowedUnauthenticatedPaths.includes(route.path)
     ) {
       await logout({ redirectTo: route.path })
 

package/modules/pluto-migrations.ts

@@ -0,0 +1,121 @@
+import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from 'node:fs'
+import { dirname, join, relative } from 'node:path'
+import { createResolver, defineNuxtModule, getLayerDirectories } from 'nuxt/kit'
+
+/**
+ * Discovers schema.[layerName].sql files across all Nuxt layers,
+ * reads their content at build time, and populates runtimeConfig
+ * so the migrations plugin can run them at server startup.
+ *
+ * Also seeds the consuming app's shared/types/supabase.ts with a
+ * re-export of this layer's own committed snapshot when the consumer
+ * has none yet, so `Database` resolves to real types instead of
+ * `unknown` on first run. A re-export (rather than a full copy) keeps
+ * a single canonical `Database` declaration so Nuxt's shared-imports
+ * scanning across layers doesn't see two conflicting definitions. The
+ * runtime migration plugin overwrites this with a fully generated file
+ * once real migrations run (see server/plugins/migrations.ts).
+ */
+export default defineNuxtModule({
+  meta: {
+    name: 'pluto-migrations',
+    configKey: 'plutoMigrations',
+  },
+
+  setup(_options, nuxt) {
+    // Let the runtime migration plugin know where the consumer's
+    // project root is, so it can write the generated types file there.
+    nuxt.options.runtimeConfig.plutoRootDir = nuxt.options.rootDir
+
+    const consumerTypesPath = join(
+      nuxt.options.rootDir,
+      'shared/types/supabase.ts'
+    )
+    if (!existsSync(consumerTypesPath)) {
+      // Resolve *this exact* @plutocms/supabase instance's own snapshot
+      // (local-linked or npm-installed, whichever is actually running)
+      // rather than a bare package specifier, which would re-resolve
+      // through the consumer's own node_modules and could pick up a
+      // different, possibly stale, copy of the package.
+      const { resolve } = createResolver(import.meta.url)
+      const ownTypesPath = resolve('../shared/types/supabase.ts')
+      const consumerTypesDir = dirname(consumerTypesPath)
+      let importSpecifier = relative(consumerTypesDir, ownTypesPath)
+        .replace(/\\/g, '/')
+        .replace(/\.ts$/, '')
+      if (!importSpecifier.startsWith('.')) {
+        importSpecifier = `./${importSpecifier}`
+      }
+
+      mkdirSync(consumerTypesDir, { recursive: true })
+      writeFileSync(
+        consumerTypesPath,
+        `export * from '${importSpecifier}'\n`,
+        'utf-8'
+      )
+      console.warn(
+        '[pluto-migrations] Seeded shared/types/supabase.ts (re-exporting @plutocms/supabase types; no generated types found yet).'
+      )
+    }
+
+    const layerDirs = getLayerDirectories()
+    const layerSchemas: Record<string, string> = {}
+    const schemaPattern = /^schema\.(.+)\.sql$/
+
+    for (const layer of layerDirs) {
+      // Each layer may have a public/ directory with schema files
+      const publicDir = join(layer.root, 'public')
+
+      if (!existsSync(publicDir)) {
+        continue
+      }
+
+      let files: string[] = []
+      try {
+        files = readdirSync(publicDir, 'utf-8')
+      } catch {
+        continue
+      }
+
+      for (const file of files) {
+        // Skip the core schema
+        if (file === 'schema.sql') {
+          continue
+        }
+
+        const match = file.match(schemaPattern)
+        if (match?.[1]) {
+          const layerName = match[1]
+          // Read SQL content at build time
+          try {
+            layerSchemas[layerName] = readFileSync(
+              join(publicDir, file),
+              'utf-8'
+            )
+          } catch {
+            console.error(
+              `[pluto-migrations] Failed to read schema file: ${file}`
+            )
+          }
+        }
+      }
+    }
+
+    const layerNames = Object.keys(layerSchemas)
+
+    // Populate runtimeConfig with layer names and their SQL content.
+    // Nuxt's schema inference narrows this to a literal shape based on
+    // whatever layer keys were last observed in this project (see the
+    // `RuntimeConfig` augmentation in shared/types/runtime-config.d.ts,
+    // which isn't visible from this module-context tsconfig), so the
+    // assignment is cast to the intended general shape.
+    ;(nuxt.options.runtimeConfig as { plutoLayerSchemas: Record<string, string> }).plutoLayerSchemas =
+      layerSchemas
+
+    if (layerNames.length > 0) {
+      console.warn(
+        `[pluto-migrations] Discovered layer schemas: ${layerNames.join(', ')}`
+      )
+    }
+  },
+})