@plutocms/supabase 0.0.1-alpha.1 → 0.0.1-alpha.11

package/app/components/navbar/NavbarAdmin.vue

@@ -24,7 +24,7 @@ const maybeDevUrl = computed(() => {
 const items = ref<DropdownMenuItem[][]>([
   [
     {
-      label: `${user.value?.first_name} ${user.value?.last_name}` || '',
+      label: `${user.value?.display_name} (${user.value?.username})` || 'User',
       avatar: {
         icon: 'lucide:user',
         class: 'bg-green-600',
@@ -53,7 +53,7 @@ const items = ref<DropdownMenuItem[][]>([
 
   [
     {
-      label: 'GitHub',
+      label: 'Pluto on GitHub',
       icon: 'i-simple-icons-github',
       type: 'link',
       to: 'https://github.com/ojvribeiro/pluto',
@@ -135,7 +135,7 @@ defineShortcuts(extractShortcuts(items.value))
           <UDropdownMenu
             :items="items"
             :ui="{
-              content: 'w-48',
+              content: 'w-64',
             }"
             :modal="false"
           >
@@ -148,7 +148,7 @@ defineShortcuts(extractShortcuts(items.value))
                     root: 'rounded-xl',
                     icon: 'text-white text-lg',
                   }"
-                  :alt="user?.first_name || ''"
+                  :alt="user?.value?.display_name || 'User Avatar'"
                   size="sm"
                   icon="lucide:user"
                   class="bg-green-600"
@@ -157,7 +157,7 @@ defineShortcuts(extractShortcuts(items.value))
                 <span
                   class="light:text-zinc-800 text-sm font-bold dark:text-white"
                 >
-                  {{ user?.first_name }}
+                  {{ user?.display_name.split(' ')[0] || 'User' }}
                 </span>
               </div>
             </button>

package/app/composables/auth.ts

@@ -23,7 +23,7 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
     isSubmitting.value = true
 
     try {
-      const { error } = await supabase.auth.signInWithPassword({
+      const { data, error } = await supabase.auth.signInWithPassword({
         email: form.email,
         password: form.password,
       })
@@ -36,6 +36,22 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
         return
       }
 
+      if (data.user && data.user.user_metadata.is_admin) {
+        // Set the first_setup flag in the healthcheck table to false
+        const { error: healthcheckError } = await supabase
+          .from('healthcheck')
+          .update({ config_value: 'false' })
+          .eq('config_name', 'first_setup')
+
+        if (healthcheckError) {
+          return {
+            success: false,
+            message: healthcheckError.message,
+            error: healthcheckError,
+          }
+        }
+      }
+
       return navigateTo(
         (authOptions?.route?.query.redirect as string) ?? '/admin/home'
       )

package/app/middleware/auth.ts

@@ -1,5 +1,9 @@
+import type { RouteLocationNormalizedGeneric } from 'vue-router'
+
 export default defineNuxtRouteMiddleware(async (to, from) => {
-  const { isLoggedIn, logout } = await useAuth({ route: to })
+  const { isLoggedIn, logout } = await useAuth({
+    route: to as RouteLocationNormalizedGeneric,
+  })
 
   if (
     isLoggedIn.value &&

package/app/middleware/setup-check.ts

@@ -1,24 +1,36 @@
-export default defineNuxtRouteMiddleware(async (to, from) => {
-  if (to.path !== '/admin/setup' && to.path.startsWith('/admin')) {
-    try {
-      const data = await $fetch('/api/settings/first_setup')
-  
-      if (
-        data.is_first_setup === true &&
-        from.path.startsWith('/admin') &&
-        to.path !== '/admin/setup'
-      ) {
+export default defineNuxtRouteMiddleware(async (to, _from) => {
+  if (!to.path.startsWith('/admin')) {
+    return
+  }
+
+  try {
+    const data = await $fetch('/api/settings/first_setup')
+
+    if (!data.success) {
+      // Cannot determine setup state — send to setup page
+      if (to.path !== '/admin/setup') {
+        return navigateTo('/admin/setup')
+      }
+      return
+    }
+
+    if (data.is_first_setup) {
+      // Setup not done yet — only allow the setup page
+      if (to.path !== '/admin/setup') {
         return navigateTo('/admin/setup')
       }
-  
-      if (
-        data.is_first_setup === false &&
-        from.path.startsWith('/admin') &&
-        to.path === '/admin/setup'
-      ) {
-        return navigateTo('/')
+    } else {
+      // Setup already done — block access to setup page
+      if (to.path === '/admin/setup') {
+        return navigateTo('/admin/login')
       }
-    } catch(error) {
+    }
+  } catch (error) {
+    if (import.meta.dev) {
+      console.error('Error checking first setup status:', error)
+    }
+
+    if (to.path !== '/admin/setup') {
       return navigateTo('/admin/setup')
     }
   }

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

@@ -9,8 +9,8 @@ useHead({
 
 const form = ref({
   email: '',
-  first_name: '',
-  last_name: '',
+  username: '',
+  display_name: '',
   password: '',
   confirm_password: '',
 })
@@ -32,8 +32,8 @@ async function submitForm() {
       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,
       },
     })
@@ -60,23 +60,27 @@ async function submitForm() {
               type="email"
               placeholder="victor@example.com"
               class="w-full"
+              required
             />
           </UFormField>
 
           <div class="flex gap-x-4">
-            <UFormField label="First Name">
+            <UFormField label="Username">
               <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">
               <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>
@@ -87,6 +91,7 @@ async function submitForm() {
               placeholder="••••"
               class="w-full"
               type="password"
+              required
             />
           </UFormField>
 
@@ -96,6 +101,7 @@ async function submitForm() {
               placeholder="••••"
               class="w-full"
               type="password"
+              required
             />
           </UFormField>
 

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>
@@ -123,20 +126,14 @@ function handleStepChange(step: number) {
     <div class="flex justify-center items-center h-screen">
       <UCard class="w-[500px]">
         <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

@@ -14,6 +14,7 @@ watch(visibility, async (current, previous) => {
   if (current === 'visible' && previous === 'hidden') {
     if (
       !isLoggedIn.value &&
+      !route.path.startsWith('/admin/setup') &&
       route.path.startsWith('/admin/') &&
       route.path !== '/admin/login' &&
       route.path !== '/admin/signup'