@plutocms/supabase 0.0.1-alpha.8 → 0.0.1-alpha.9

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/pages/admin/setup.vue

@@ -23,10 +23,10 @@ const items = ref<StepperItem[]>([
     icon: 'i-lucide-database',
   },
 
-  /* {
+  {
     title: 'Admin Account',
     icon: 'i-lucide-user',
-  }, */
+  },
 
   {
     title: 'Complete Setup',
@@ -39,17 +39,29 @@ 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
 })
 
@@ -58,10 +70,26 @@ const currentStepId = computed(() => {
     return 'database-setup-form'
   }
 
+  if (currentStep.value === 1) {
+    return 'admin-setup-form'
+  }
+
   return undefined
 })
 
-async function completeSetup() {
+const currentStepSubmitLabel = computed(() => {
+  if (currentStep.value === 0) {
+    return 'Set up database'
+  }
+
+  if (currentStep.value === 1) {
+    return 'Create admin account'
+  }
+
+  return 'Submit'
+})
+
+async function completeDatabaseSetup() {
   try {
     isSettingUpDatabase.value = true
 
@@ -73,6 +101,7 @@ async function completeSetup() {
           '[YOUR-PASSWORD]',
           encodeURIComponent(databaseForm.value.password)
         ),
+        adminForm: adminForm.value,
       },
     })
 
@@ -111,9 +140,63 @@ async function completeSetup() {
   }
 }
 
+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) {
-    completeSetup()
+    createAdminAccount()
   }
 }
 </script>
@@ -123,20 +206,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 +336,85 @@ function handleStepChange(step: number) {
               </UForm>
             </section>
 
-            <section v-else-if="currentStep === 1">
+            <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">
-                <h1 class="text-2xl font-bold text-center">
-                  Setup Complete 🎉
-                </h1>
+                <hgroup class="text-center">
+                  <span class="text-3xl">🎉</span>
 
-                <p>
-                  Your database has been set up successfully! 🎉 You can now log
-                  in to the admin panel using your Supabase credentials.
+                  <h1 class="font-bold text-2xl">Setup Complete</h1>
+                </hgroup>
+
+                <p class="text-balance text-center text-lg">
+                  Your database is ready and your admin account has been
+                  created.
                 </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">
-                  <ULink to="/admin/login" class="underline">
-                    Go to login page</ULink
+                  <UButton
+                    icon="lucide:arrow-right"
+                    to="/admin/login"
+                    color="primary"
+                    trailing
                   >
+                    Go to login page
+                  </UButton>
                 </p>
               </div>
             </section>
@@ -286,10 +427,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'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plutocms/supabase",
   "type": "module",
-  "version": "0.0.1-alpha.8",
+  "version": "0.0.1-alpha.9",
   "main": "./nuxt.config.ts",
   "scripts": {
     "build": "nuxt build",

package/public/schema.sql

@@ -117,13 +117,30 @@ begin
 end
 $$;
 
+-- Allow update access to healthcheck for authenticated users and dashboard_user
+do $$
+begin
+  if not exists (
+    select 1 from pg_policies where tablename = 'healthcheck' and policyname = 'Enable update for authenticated users on healthcheck'
+  ) then
+    create policy "Enable update for authenticated users on healthcheck"
+    on public.healthcheck
+    for update
+    to authenticated, dashboard_user
+    using (true)
+    with check (true);
+  end if;
+end
+$$;
+
 -- Profiles
 create table if not exists public.profiles (
   id uuid references auth.users on delete cascade not null primary key,
   updated_at timestamp with time zone,
-  first_name text,
-  last_name text,
-  constraint first_name_length check (char_length(first_name) >= 3)
+  username text,
+  display_name text,
+  is_admin boolean not null default false,
+  constraint username_length check (char_length(username) >= 3)
 );
 
 alter table public.profiles enable row level security;
@@ -149,8 +166,8 @@ language plpgsql
 security definer set search_path = ''
 as $$
 begin
-  insert into public.profiles (id, first_name, last_name)
-  values (new.id, new.raw_user_meta_data ->> 'first_name', new.raw_user_meta_data ->> 'last_name');
+  insert into public.profiles (id, username, display_name)
+  values (new.id, new.raw_user_meta_data ->> 'username', new.raw_user_meta_data ->> 'display_name');
   return new;
 end;
 $$;

package/server/api/setup/create.post.ts

@@ -118,13 +118,6 @@ export default defineEventHandler(async (event) => {
       await sql.unsafe(statement)
     }
 
-    // Set the first_setup flag in the healthcheck table to false
-    await sql`
-      UPDATE healthcheck
-      SET config_value = 'false'
-      WHERE config_name = 'first_setup';
-    `
-
     return {
       success: true,
       message: 'Database setup completed successfully.',

package/server/api/signup.post.ts

@@ -1,28 +1,55 @@
 import { serverSupabaseClient } from '#supabase/server'
 
+interface Payload {
+  username: string
+  display_name: string
+  email: string
+  password: string
+  is_admin?: boolean
+}
+
 export default defineEventHandler(async (event) => {
   const client = await serverSupabaseClient<Database>(event)
 
-  const body = await readBody(event)
+  const body = await readBody<Payload>(event)
 
   const { data, error } = await client.auth.signUp({
     email: body.email,
     password: body.password,
     options: {
       data: {
-        first_name: body.first_name,
-        last_name: body.last_name,
+        username: body.username,
+        display_name: body.display_name,
+        is_admin: body.is_admin || false,
       },
     },
   })
 
   if (error) {
-    throw createError({
-      statusCode: Number.parseInt(error.code ?? '500'),
-      cause: error.cause,
+    return {
+      success: false,
       message: error.message,
-    })
+      error,
+    }
   }
 
-  return { message: 'User registered successfully', data }
+  // Set the first_setup flag in the healthcheck table to false
+  const { error: healthcheckError } = await client
+    .from('healthcheck')
+    .update({ config_value: 'false' })
+    .eq('config_name', 'first_setup')
+
+  if (healthcheckError) {
+    return {
+      success: false,
+      message: healthcheckError.message,
+      error: healthcheckError,
+    }
+  }
+
+  return {
+    success: true,
+    message: 'User registered successfully',
+    data,
+  }
 })