@plutocms/supabase 0.0.1-alpha.8 → 0.1.0

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',
@@ -61,7 +56,15 @@ const currentStepId = computed(() => {
   return undefined
 })
 
-async function completeSetup() {
+const currentStepSubmitLabel = computed(() => {
+  if (currentStep.value === 0) {
+    return 'Set up database'
+  }
+
+  return 'Submit'
+})
+
+async function completeDatabaseSetup() {
   try {
     isSettingUpDatabase.value = true
 
@@ -112,8 +115,8 @@ async function completeSetup() {
 }
 
 function handleStepChange(step: number) {
-  if (step === 1) {
-    completeSetup()
+  if (step === 0) {
+    completeDatabaseSetup()
   }
 }
 </script>
@@ -121,22 +124,16 @@ function handleStepChange(step: number) {
 <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"
-            disabled
-            linear
-          />
+          <UStepper ref="stepper" v-model="currentStep" :items="items" linear />
 
           <div>
             <section v-if="currentStep === 0">
               <UForm
                 id="database-setup-form"
                 class="flex flex-col gap-y-4"
-                @submit="handleStepChange(currentStep + 1)"
+                @submit="handleStepChange(currentStep)"
               >
                 <UFormField label="Supabase connection string" required>
                   <UInput
@@ -259,21 +256,28 @@ function handleStepChange(step: number) {
               </UForm>
             </section>
 
-            <section v-else-if="currentStep === 1">
+            <section v-if="currentStep === 1">
               <div class="flex flex-col gap-y-4">
-                <h1 class="text-2xl font-bold text-center">
-                  Setup Complete 🎉
-                </h1>
+                <hgroup class="text-center">
+                  <span class="text-3xl">🎉</span>
+
+                  <h1 class="font-bold text-2xl">Setup Complete</h1>
+                </hgroup>
 
-                <p>
-                  Your database has been set up successfully! 🎉 You can now log
-                  in to the admin panel using your Supabase credentials.
+                <p class="text-balance text-center text-lg">
+                  Your database is ready. Create your admin account by signing
+                  up.
                 </p>
 
                 <p class="text-center">
-                  <ULink to="/admin/login" class="underline">
-                    Go to login page</ULink
+                  <UButton
+                    icon="lucide:arrow-right"
+                    to="/admin/signup"
+                    color="primary"
+                    trailing
                   >
+                    Go to sign up
+                  </UButton>
                 </p>
               </div>
             </section>
@@ -286,10 +290,9 @@ function handleStepChange(step: number) {
                 :form="currentStepId"
                 :loading="currentLoading"
                 leading-icon="lucide:check"
-                trailing-icon="lucide:arrow-right"
                 type="submit"
               >
-                Submit and continue
+                {{ currentStepSubmitLabel }}
               </UButton>
             </div>
           </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()
@@ -14,9 +14,8 @@ watch(visibility, async (current, previous) => {
   if (current === 'visible' && previous === 'hidden') {
     if (
       !isLoggedIn.value &&
-      route.path.startsWith('/admin/') &&
-      route.path !== '/admin/login' &&
-      route.path !== '/admin/signup'
+      !route.path.startsWith('/admin/setup') &&
+      !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(', ')}`
+      )
+    }
+  },
+})

package/nuxt.config.ts

@@ -1,5 +1,10 @@
+// Point these at a local checkout (e.g. `../pluto`, `../utils`) to test
+// unpublished changes; unset, they resolve to the published npm packages.
+const plutoLayer = process.env.PLUTO_PLUTO_PATH || '@plutocms/pluto'
+const utilsLayer = process.env.PLUTO_UTILS_PATH || '@plutocms/utils'
+
 export default defineNuxtConfig({
-  extends: [['@plutocms/pluto', { install: true }], '@plutocms/utils'],
+  extends: [[plutoLayer, { install: true }], utilsLayer],
 
   modules: ['@nuxt/eslint', '@nuxtjs/supabase'],
 
@@ -10,6 +15,8 @@ export default defineNuxtConfig({
   runtimeConfig: {
     supabaseUrl: process.env.SUPABASE_URL,
     supabaseKey: process.env.SUPABASE_KEY,
+    plutoRootDir: '',
+    plutoLayerSchemas: {} as Record<string, string>,
   },
 
   alias: {
@@ -24,6 +31,12 @@ export default defineNuxtConfig({
     },
   },
 
+  vite: {
+    optimizeDeps: {
+      include: ['yup'],
+    },
+  },
+
   eslint: {
     config: {
       nuxt: {

package/package.json

@@ -1,7 +1,26 @@
 {
   "name": "@plutocms/supabase",
   "type": "module",
-  "version": "0.0.1-alpha.8",
+  "version": "0.1.0",
+  "trustedDependencies": [
+    "@parcel/watcher",
+    "@plutocms/pluto",
+    "@plutocms/utils",
+    "esbuild",
+    "supabase",
+    "unrs-resolver",
+    "vue-demi"
+  ],
+  "description": "Supabase backend layer for Pluto CMS",
+  "author": "Victor Ribeiro",
+  "homepage": "https://github.com/plutocms/supabase#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/plutocms/supabase.git"
+  },
+  "bugs": {
+    "url": "https://github.com/plutocms/supabase/issues"
+  },
   "main": "./nuxt.config.ts",
   "scripts": {
     "build": "nuxt build",
@@ -12,35 +31,32 @@
     "prettier": "prettier --write .",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix && prettier --write .",
+    "typecheck": "nuxi typecheck",
     "supabase-types": "bun ./scripts/supabase-typegen.ts"
   },
   "dependencies": {
-    "@nuxtjs/supabase": "2.0.3",
-    "@plutocms/pluto": "^0.0.1-alpha.4",
-    "@plutocms/utils": "^0.0.1-alpha.5",
-    "postgres": "^3.4.8",
-    "supabase": "^2.76.15",
+    "@nuxt/ui": "^4.9.0",
+    "@nuxtjs/supabase": "^2.0.9",
+    "@plutocms/pluto": "^0.1.0",
+    "@plutocms/utils": "^0.1.0",
+    "postgres": "^3.4.9",
+    "supabase": "^2.109.1",
     "yup": "1.7.1"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^6.2.0",
-    "@nuxt/eslint": "^1.15.1",
-    "@nuxt/ui": "^4.4.0",
-    "@types/bun": "^1.3.9",
-    "@vueuse/nuxt": "^14.2.1",
-    "eslint": "^9.39.1",
-    "nuxt": "^4.3.1",
-    "prettier": "^3.8.1",
-    "vue": "^3.5.28",
-    "vue-router": "^5.0.2"
+    "@nuxt/eslint": "^1.16.0",
+    "@types/bun": "^1.3.14",
+    "@vueuse/nuxt": "^14.3.0",
+    "eslint": "^10.6.0",
+    "nuxt": "^4.4.2",
+    "prettier": "^3.9.4",
+    "tailwindcss": "^4.3.2",
+    "vue": "^3.5.39",
+    "vue-router": "^5.1.0",
+    "vue-tsc": "^3.3.7"
   },
-  "trustedDependencies": [
-    "@parcel/watcher",
-    "@plutocms/pluto",
-    "@plutocms/utils",
-    "esbuild",
-    "supabase",
-    "unrs-resolver",
-    "vue-demi"
-  ]
+  "publishConfig": {
+    "access": "public"
+  }
 }