@plutocms/supabase 0.9.1 → 0.11.0

package/app/components/navbar/NavbarAdmin.vue

@@ -1,213 +0,0 @@
-<script setup lang="ts">
-import { UDropdownMenu } from '#components'
-import { domainFromUrl } from '#imports'
-
-const host = useRequestURL().host
-
-const route = useRoute()
-const isSidebarOpen = useState<boolean>('pluto-admin-sidebar-open', () => false)
-
-function openSidebar() {
-  isSidebarOpen.value = true
-}
-
-const { isLoggedIn, user, logout } = await useAuth()
-
-const displayName = computed(() => {
-  return (
-    user.value?.display_name ||
-    user.value?.full_name ||
-    user.value?.name ||
-    user.value?.username ||
-    'User'
-  )
-})
-
-const shortDisplayName = computed(() => displayName.value.split(' ')[0])
-
-const userMenuLabel = computed(() => {
-  return user.value?.username
-    ? `${displayName.value} (${user.value.username})`
-    : displayName.value
-})
-
-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 || ''
-})
-
-type DropdownItems = NonNullable<
-  Parameters<typeof UDropdownMenu>[0]['items']
->
-
-const items = computed<DropdownItems>(() => [
-  [
-    {
-      label: userMenuLabel.value,
-      avatar: {
-        icon: 'lucide:user',
-        class: 'bg-primary',
-        ui: {
-          icon: 'text-inverted 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: 'Pluto on 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 min-w-0 items-stretch justify-between gap-1 px-2 lg:px-4"
-    >
-      <div class="flex min-w-0 items-center gap-x-1 lg:gap-x-3">
-        <UButton
-          class="lg:hidden"
-          icon="lucide:menu"
-          color="neutral"
-          variant="ghost"
-          aria-label="Open navigation"
-          square
-          @click="openSidebar"
-        />
-
-        <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="min-w-0 h-full overflow-hidden">
-          <ul class="flex h-full min-w-0 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="text-dimmed flex h-full items-center gap-x-2 rounded-sm px-2"
-                  >
-                    <Icon name="svg-spinners:ring-resize" />
-                  </div>
-                </li>
-              </template>
-
-              <PlutoNavbarAdminActions />
-            </ClientOnly>
-          </ul>
-        </div>
-      </div>
-
-      <div class="flex shrink-0 items-center gap-1 lg:gap-3">
-        <ColorModeButton />
-
-        <div class="h-full">
-          <UDropdownMenu
-            :items="items"
-            :ui="{
-              content: 'w-64',
-            }"
-            :modal="false"
-          >
-            <button
-              class="group h-full py-1"
-              aria-label="Open user menu"
-              type="button"
-            >
-              <div
-                class="flex h-full items-center gap-x-2 rounded-sm rounded-l-xl pr-2 pl-0.5 group-hover:bg-elevated"
-              >
-                <UAvatar
-                  :ui="{
-                    root: 'rounded-xl',
-                    icon: 'text-inverted text-lg',
-                  }"
-                  :alt="displayName"
-                  size="sm"
-                  icon="lucide:user"
-                  class="bg-primary"
-                />
-
-                <span
-                  class="text-highlighted hidden text-sm font-semibold lg:inline"
-                >
-                  {{ shortDisplayName }}
-                </span>
-              </div>
-            </button>
-          </UDropdownMenu>
-        </div>
-      </div>
-    </div>
-  </PlutoNavbarAdmin>
-</template>

package/app/components/navbar/NavbarAdminProvider.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-const route = useRoute()
-const session = useSupabaseSession()
-
-const shouldShowNavbar = computed(() => {
-  if (allowedUnauthenticatedPaths.includes(route.path)) {
-    return false
-  }
-
-  return route.path === '/admin'
-    || route.path.startsWith('/admin/')
-    || Boolean(session.value)
-})
-</script>
-
-<template>
-  <NavbarAdmin v-if="shouldShowNavbar" />
-</template>

package/app/middleware/auth.ts

@@ -1,34 +0,0 @@
-import type { RouteLocationNormalizedGeneric } from 'vue-router'
-
-export default defineNuxtRouteMiddleware(async (to, from) => {
-  const { isLoggedIn, logout, allowedUnauthenticatedPaths } = await useAuth({
-    route: to as RouteLocationNormalizedGeneric,
-  })
-
-  if (
-    isLoggedIn.value &&
-    allowedUnauthenticatedPaths.includes(to.path) &&
-    to.path !== '/admin/update-password'
-  ) {
-    return navigateTo(
-      to.query.redirect
-        ? decodeURIComponent(to.query.redirect as string)
-        : '/admin/home'
-    )
-  }
-
-  if (
-    !isLoggedIn.value &&
-    to.path.startsWith('/admin') &&
-    !allowedUnauthenticatedPaths.includes(to.path)
-  ) {
-    if (from.query.redirect) {
-      return logout({
-        redirectTo: from.query.redirect as string,
-        showToast: true,
-      })
-    } else {
-      return logout()
-    }
-  }
-})

package/app/middleware/setup-check.ts

@@ -1,44 +0,0 @@
-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')
-      }
-    } else {
-      // Setup already done — block access to setup page.
-      //
-      // Keep this redirect even after layer migrations move to
-      // /admin/migrations. The setup page prompts an unauthenticated
-      // visitor for a raw database connection string, and it is safe only
-      // because it is unreachable once setup is done. Reopening it for a
-      // routine layer addition would let an anonymous visitor submit a
-      // connection string to the server.
-      if (to.path === '/admin/setup') {
-        return navigateTo('/admin/login')
-      }
-    }
-  } 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)/login.vue

@@ -1,93 +0,0 @@
-<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 min-h-dvh place-items-center p-4">
-    <UCard class="w-full max-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 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-x-4"
-          >
-            <UFormField>
-              <UButton
-                :loading="isSubmitting"
-                type="submit"
-                icon="lucide:log-in"
-                class="w-full justify-center sm:w-auto"
-              >
-                Login
-              </UButton>
-            </UFormField>
-
-            <UFormField>
-              <UButton variant="link" to="/admin/signup" class="px-0">
-                Create Account
-              </UButton>
-            </UFormField>
-          </div>
-
-          <div
-            class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between"
-          >
-            <UButton
-              variant="link"
-              icon="lucide:arrow-left"
-              to="/"
-              class="px-0"
-            >
-              Back to Home
-            </UButton>
-
-            <UButton variant="link" to="/admin/forgot-password" class="px-0">
-              Forgot password?
-            </UButton>
-          </div>
-        </div>
-      </form>
-    </UCard>
-  </div>
-</template>

package/app/pages/admin.vue

@@ -1,56 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  middleware: ['setup-check', 'auth'],
-  layout: 'admin',
-})
-
-const route = useRoute()
-const { isLoggedIn, logout, allowedUnauthenticatedPaths } = await useAuth()
-const toast = useToast()
-
-// Loading/clearing permissions on login/logout lives in
-// app/plugins/pluto-permissions-sync.ts now, not here — that plugin runs
-// on every page, not just this one, so a signed-in admin browsing a public
-// page directly (no prior visit to /admin/** this session) still gets
-// their capabilities loaded.
-
-const visibility = useDocumentVisibility()
-
-watch(visibility, async (current, previous) => {
-  if (current === 'visible' && previous === 'hidden') {
-    if (
-      !isLoggedIn.value &&
-      !route.path.startsWith('/admin/setup') &&
-      !allowedUnauthenticatedPaths.includes(route.path)
-    ) {
-      await logout({ redirectTo: route.path })
-
-      toast.add({
-        title: 'You are not logged in',
-        description: 'Please log in to continue.',
-        icon: 'lucide:circle-x',
-        color: 'error',
-      })
-    }
-  }
-})
-</script>
-
-<template>
-  <div class="light:text-zinc-800 h-full dark:text-white">
-    <ClientOnly>
-      <Container
-        v-if="
-          isLoggedIn
-            && !route.path.startsWith('/admin/setup')
-            && !route.path.startsWith('/admin/migrations')
-        "
-        class="pt-4"
-      >
-        <MigrationsBanner />
-      </Container>
-    </ClientOnly>
-
-    <NuxtPage />
-  </div>
-</template>

package/app/plugins/pluto-permissions-sync.ts

@@ -1,38 +0,0 @@
-/**
- * Loads (or clears) the current user's capabilities whenever their session
- * appears or disappears — app-wide, not page-scoped.
- *
- * This used to live as a `watch` inside `app/pages/admin.vue`. That only
- * ran while `admin.vue` was the mounted page, so a signed-in admin loading
- * a public page directly (a fresh navigation or a page reload, with no
- * earlier visit to `/admin/**` in the same app instance) never triggered a
- * load at all — `usePlutoPermissions().granted` stayed empty, and every
- * `can()` check for that admin read as `false` on that page, even though
- * the same admin's capability-gated UI worked correctly inside `/admin/**`.
- * `NavbarAdminActions.vue`'s "Edit product" quick-link (shown while
- * viewing a live `/product/**` page) is exactly the kind of capability-
- * gated UI that lives outside `/admin/**` by design, so it needs this to
- * fire on every page, not just admin ones.
- *
- * `useSupabaseSession()` (not `useAuth()`) on purpose: it is the same
- * primitive `useAuth()`'s own `isLoggedIn` is built from
- * (`computed(() => !!supabaseSession.value)`), and it is genuinely
- * app-wide reactive state already (managed by `@nuxtjs/supabase`'s own
- * plugin), so reading it directly here needs no extra composable surface.
- */
-export default defineNuxtPlugin(() => {
-  const session = useSupabaseSession()
-  const { load, clear } = usePlutoPermissions()
-
-  watch(
-    session,
-    (current) => {
-      if (current) {
-        load()
-      } else {
-        clear()
-      }
-    },
-    { immediate: true }
-  )
-})