@plutocms/supabase 0.0.1-alpha.1

package/app/components/navbar/NavbarAdmin.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+
+const host = useRequestURL().host
+
+const route = useRoute()
+
+const { isLoggedIn, user, logout } = await useAuth()
+
+const has_settings_modified = useState<boolean>('has_settings_modified')
+
+const { data: settingsData, status } = await useFetch('/api/settings', {
+  watch: [has_settings_modified],
+})
+
+const maybeDevUrl = computed(() => {
+  if (import.meta.dev) {
+    return `http://${host}`
+  }
+
+  return settingsData.value?.settings.website_url || ''
+})
+
+const items = ref<DropdownMenuItem[][]>([
+  [
+    {
+      label: `${user.value?.first_name} ${user.value?.last_name}` || '',
+      avatar: {
+        icon: 'lucide:user',
+        class: 'bg-green-600',
+        ui: {
+          icon: 'text-white text-sm',
+        },
+      },
+      type: 'label',
+    },
+  ],
+
+  [
+    {
+      label: 'Settings',
+      icon: 'i-lucide-cog',
+      type: 'link',
+      to: '/admin/settings',
+      kbds: ['meta', ','],
+      onSelect() {
+        if (isLoggedIn.value) {
+          navigateTo('/admin/settings')
+        }
+      },
+    },
+  ],
+
+  [
+    {
+      label: 'GitHub',
+      icon: 'i-simple-icons-github',
+      type: 'link',
+      to: 'https://github.com/ojvribeiro/pluto',
+      target: '_blank',
+      external: true,
+    },
+  ],
+
+  [
+    {
+      label: 'Logout',
+      icon: 'i-lucide-log-out',
+      kbds: ['meta', 'shift', 'q'],
+      class: 'cursor-pointer',
+      onSelect() {
+        logout({ showToast: true })
+      },
+    },
+  ],
+])
+
+defineShortcuts(extractShortcuts(items.value))
+</script>
+
+<template>
+  <PlutoNavbarAdmin>
+    <div class="flex h-full items-stretch justify-between px-4">
+      <div class="flex items-center gap-x-3">
+        <div class="h-full shrink-0 py-1">
+          <NuxtLink
+            title="Go to dashboard home"
+            to="/admin/home"
+            class="group block h-full"
+          >
+            <img
+              src="/img/pluto.png"
+              class="block h-full grayscale-100 group-hover:grayscale-0"
+            />
+          </NuxtLink>
+        </div>
+
+        <div class="h-full">
+          <ul class="flex h-full items-center text-sm">
+            <NavbarAdminActionButton
+              :show="route.path.startsWith('/admin')"
+              :title="`Visit ${domainFromUrl(maybeDevUrl)}`"
+              :icon="
+                status === 'pending'
+                  ? 'lucide:loader-circle'
+                  : 'lucide:external-link'
+              "
+              :disabled="status === 'pending'"
+              :to="maybeDevUrl"
+              target="_blank"
+              label="View site"
+            />
+
+            <ClientOnly>
+              <template #fallback>
+                <li class="h-full">
+                  <div
+                    class="light:text-zinc-800/50 flex h-full items-center gap-x-2 rounded-sm px-2 text-white/50"
+                  >
+                    <Icon name="svg-spinners:ring-resize" />
+                  </div>
+                </li>
+              </template>
+
+              <PlutoNavbarAdminActions />
+            </ClientOnly>
+          </ul>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-3">
+        <ColorModeButton />
+
+        <div class="h-full">
+          <UDropdownMenu
+            :items="items"
+            :ui="{
+              content: 'w-48',
+            }"
+            :modal="false"
+          >
+            <button class="group h-full py-1">
+              <div
+                class="flex h-full items-center gap-x-2 rounded-sm rounded-l-xl pr-2 pl-0.5 group-hover:bg-white/20"
+              >
+                <UAvatar
+                  :ui="{
+                    root: 'rounded-xl',
+                    icon: 'text-white text-lg',
+                  }"
+                  :alt="user?.first_name || ''"
+                  size="sm"
+                  icon="lucide:user"
+                  class="bg-green-600"
+                />
+
+                <span
+                  class="light:text-zinc-800 text-sm font-bold dark:text-white"
+                >
+                  {{ user?.first_name }}
+                </span>
+              </div>
+            </button>
+          </UDropdownMenu>
+        </div>
+      </div>
+    </div>
+  </PlutoNavbarAdmin>
+</template>

package/app/composables/auth.ts

@@ -0,0 +1,81 @@
+import type { RouteLocationNormalizedGeneric } from 'vue-router'
+
+interface PlutoSupabaseAuthOptions {
+  route?: RouteLocationNormalizedGeneric
+}
+
+export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
+  const supabase = useSupabaseClient()
+  const supabaseSession = useSupabaseSession()
+
+  const supabaseUser = await supabase.auth.getUser()
+
+  const user = computed(() => supabaseUser.data.user?.user_metadata ?? null)
+  const isLoggedIn = computed<boolean>(() => !!supabaseSession.value)
+  const isSubmitting = ref<boolean>(false)
+
+  interface LoginForm {
+    email: string
+    password: string
+  }
+
+  async function login(form: LoginForm) {
+    isSubmitting.value = true
+
+    try {
+      const { error } = await supabase.auth.signInWithPassword({
+        email: form.email,
+        password: form.password,
+      })
+
+      if (error) {
+        console.error(`Error signing in user: ${error?.message}`)
+
+        isSubmitting.value = false
+
+        return
+      }
+
+      return navigateTo(
+        (authOptions?.route?.query.redirect as string) ?? '/admin/home'
+      )
+    } catch (error) {
+      if (import.meta.dev) {
+        console.error(error)
+      }
+
+      console.error(`Error during login: ${error}`)
+
+      isSubmitting.value = false
+    }
+  }
+
+  interface LogoutOptions {
+    redirectTo?: string
+    showToast?: boolean
+  }
+
+  async function logout(options?: LogoutOptions) {
+    await supabase.auth.signOut()
+
+    if (options?.showToast) {
+      console.warn(`User logged out`)
+    }
+
+    if (options?.redirectTo) {
+      return navigateTo(`/admin/login?redirect=${options.redirectTo}`)
+    }
+
+    if (authOptions?.route && authOptions.route.path.startsWith('/admin')) {
+      return navigateTo('/admin/login')
+    }
+  }
+
+  return {
+    isLoggedIn,
+    isSubmitting,
+    user,
+    login,
+    logout,
+  }
+}

package/app/layouts/setup.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div
+    class="dark:bg-admin-content light:bg-white font-outfit flex h-full grow flex-col"
+  >
+    <div class="flex h-full justify-center">
+      <div class="grow overflow-hidden">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

package/app/middleware/auth.ts

@@ -0,0 +1,27 @@
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  const { isLoggedIn, logout } = await useAuth({ route: to })
+
+  if (
+    isLoggedIn.value &&
+    (to.path === '/admin/login' || to.path === '/admin/signup')
+  ) {
+    return navigateTo(
+      to.query.redirect
+        ? decodeURIComponent(to.query.redirect as string)
+        : '/admin/home'
+    )
+  }
+
+  if (
+    !isLoggedIn.value &&
+    to.path.startsWith('/admin') &&
+    to.path !== '/admin/signup' &&
+    to.path !== '/admin/login'
+  ) {
+    if (from.query.redirect) {
+      logout({ redirectTo: from.query.redirect as string, showToast: true })
+    } else {
+      logout()
+    }
+  }
+})

package/app/middleware/setup-check.ts

@@ -0,0 +1,25 @@
+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'
+      ) {
+        return navigateTo('/admin/setup')
+      }
+  
+      if (
+        data.is_first_setup === false &&
+        from.path.startsWith('/admin') &&
+        to.path === '/admin/setup'
+      ) {
+        return navigateTo('/')
+      }
+    } catch(error) {
+      return navigateTo('/admin/setup')
+    }
+  }
+})

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

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+interface Form {
+  email: string
+  password: string
+}
+
+definePageMeta({
+  layout: 'auth',
+})
+
+useHead({
+  title: 'Login',
+})
+
+const { isSubmitting, login } = await useAuth()
+
+const form = ref<Form>({
+  email: '',
+  password: '',
+})
+
+function submitForm() {
+  login(form.value)
+}
+</script>
+
+<template>
+  <div class="grid h-full place-items-center">
+    <UCard class="w-100">
+      <form @submit.prevent="submitForm">
+        <div class="flex flex-col gap-y-6">
+          <h1 class="text-3xl font-bold">Login</h1>
+
+          <UFormField label="Email">
+            <UInput
+              v-model="form.email"
+              placeholder="victor@example.com"
+              class="w-full"
+              autocomplete="email"
+            />
+          </UFormField>
+
+          <UFormField label="Password">
+            <UInput
+              v-model="form.password"
+              placeholder="••••"
+              class="w-full"
+              type="password"
+            />
+          </UFormField>
+
+          <div class="flex items-center justify-between gap-x-4">
+            <UFormField>
+              <UButton
+                :loading="isSubmitting"
+                type="submit"
+                icon="lucide:log-in"
+              >
+                Login
+              </UButton>
+            </UFormField>
+
+            <UFormField>
+              <UButton variant="link" to="/admin/signup" class="px-0">
+                Create Account
+              </UButton>
+            </UFormField>
+          </div>
+
+          <div>
+            <UButton
+              variant="link"
+              icon="lucide:arrow-left"
+              to="/"
+              class="px-0"
+            >
+              Back to Home
+            </UButton>
+          </div>
+        </div>
+      </form>
+    </UCard>
+  </div>
+</template>

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

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'auth',
+})
+
+useHead({
+  title: 'Sign Up',
+})
+
+const form = ref({
+  email: '',
+  first_name: '',
+  last_name: '',
+  password: '',
+  confirm_password: '',
+})
+
+const isSubmitting = ref<boolean>(false)
+
+const passwordMatch = computed(() => {
+  return form.value.password === form.value.confirm_password
+})
+
+async function submitForm() {
+  if (!passwordMatch.value) {
+    return
+  }
+
+  isSubmitting.value = true
+  try {
+    await $fetch('/api/signup', {
+      method: 'POST',
+      body: {
+        email: form.value.email,
+        first_name: form.value.first_name,
+        last_name: form.value.last_name,
+        password: form.value.password,
+      },
+    })
+
+    navigateTo('/admin/login?rel=new')
+  } catch (error) {
+    console.error('Error signing up:', error)
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="grid h-full place-items-center">
+    <UCard class="w-100">
+      <form @submit.prevent="submitForm">
+        <div class="flex flex-col gap-y-6">
+          <h1 class="text-3xl font-bold">Create Account</h1>
+
+          <UFormField label="Email">
+            <UInput
+              v-model="form.email"
+              type="email"
+              placeholder="victor@example.com"
+              class="w-full"
+            />
+          </UFormField>
+
+          <div class="flex gap-x-4">
+            <UFormField label="First Name">
+              <UInput
+                v-model="form.first_name"
+                placeholder="e.g: John"
+                class="w-full"
+              />
+            </UFormField>
+
+            <UFormField label="Last Name">
+              <UInput
+                v-model="form.last_name"
+                placeholder="e.g: Doe"
+                class="w-full"
+              />
+            </UFormField>
+          </div>
+
+          <UFormField :error="!passwordMatch" label="Password">
+            <UInput
+              v-model="form.password"
+              placeholder="••••"
+              class="w-full"
+              type="password"
+            />
+          </UFormField>
+
+          <UFormField :error="!passwordMatch" label="Confirm Password">
+            <UInput
+              v-model="form.confirm_password"
+              placeholder="••••"
+              class="w-full"
+              type="password"
+            />
+          </UFormField>
+
+          <div class="flex items-center justify-between gap-x-4">
+            <UFormField>
+              <UButton
+                to="/admin/login"
+                icon="lucide:arrow-left"
+                variant="link"
+                class="px-0"
+              >
+                Back to Login
+              </UButton>
+            </UFormField>
+
+            <UFormField>
+              <UButton
+                :disabled="isSubmitting || !passwordMatch"
+                :loading="isSubmitting"
+                type="submit"
+              >
+                Create account
+              </UButton>
+            </UFormField>
+          </div>
+        </div>
+      </form>
+    </UCard>
+  </div>
+</template>

package/app/pages/admin/settings.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { object, string } from 'yup'
+
+type Form = Partial<
+  Record<
+    Database['public']['Tables']['settings']['Insert']['setting_name'],
+    string
+  >
+>
+
+useHead({
+  title: 'Settings',
+})
+
+const toast = useToast()
+
+const has_settings_modified = useState('has_settings_modified', () => {
+  return Date.now()
+})
+
+const { data } = await useFetch('/api/settings')
+
+const schema = object({
+  website_title: string().required().label('Website Title'),
+  website_description: string().required().label('Website Description'),
+  website_url: string().url().required().label('Website URL'),
+})
+
+const form = ref<Form>({
+  website_title: data.value?.settings.website_title || '',
+  website_description: data.value?.settings.website_description || '',
+  website_url: data.value?.settings.website_url || '',
+})
+
+const isSubmitting = ref<boolean>(false)
+
+async function submitForm() {
+  const payload = form.value
+
+  isSubmitting.value = true
+
+  try {
+    await $fetch('/api/settings/update', {
+      method: 'POST',
+      body: payload,
+    })
+
+    toast.add({
+      title: 'Settings updated successfully',
+      color: 'success',
+    })
+
+    has_settings_modified.value = Date.now()
+  } catch (error) {
+    if (import.meta.dev) {
+      console.error('Error updating settings:', error)
+    }
+
+    toast.add({
+      title: 'Failed to update settings.',
+      color: 'error',
+    })
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<template>
+  <AdminView>
+    <h1 class="text-4xl font-bold">Settings</h1>
+
+    <UCard>
+      <UForm :schema="schema" :state="form" @submit="submitForm">
+        <div class="flex flex-col gap-y-6">
+          <UFormField label="Website Title" name="website_title" class="w-1/2">
+            <UInput
+              v-model="form.website_title"
+              placeholder="e.g. My Website"
+            />
+          </UFormField>
+
+          <UFormField
+            label="Website Description"
+            name="website_description"
+            class="w-1/2"
+          >
+            <UInput
+              v-model="form.website_description"
+              placeholder="e.g. My Website Description"
+            />
+          </UFormField>
+
+          <UFormField label="Website URL" name="website_url" class="w-1/2">
+            <UInput
+              v-model="form.website_url"
+              type="url"
+              placeholder="e.g. https://example.com"
+            />
+          </UFormField>
+
+          <div>
+            <UButton
+              :loading="isSubmitting"
+              :disabled="isSubmitting"
+              type="submit"
+              icon="lucide:save"
+            >
+              Save
+            </UButton>
+          </div>
+        </div>
+      </UForm>
+    </UCard>
+  </AdminView>
+</template>