@bobbykim/manguito-cms-admin 0.1.1 → 0.3.0

package/src/composables/usePermission.ts

@@ -0,0 +1,20 @@
+import type { ParsedRole } from '@bobbykim/manguito-cms-core'
+import { useAuthStore } from '../stores/auth'
+import { useSchemaStore } from '../stores/schema'
+
+export function usePermission() {
+  const auth = useAuthStore()
+  const schema = useSchemaStore()
+
+  function can(permission: string): boolean {
+    return auth.permissions.includes(permission)
+  }
+
+  function rolesBelow(): ParsedRole[] {
+    return schema.roles.filter(
+      r => r.hierarchy_level > auth.hierarchyLevel && r.name !== 'admin'
+    )
+  }
+
+  return { can, rolesBelow }
+}

package/src/composables/useTabIndicator.ts

@@ -0,0 +1,25 @@
+import { nextTick, ref, watch, type Ref } from 'vue'
+
+/**
+ * Tracks the offsetLeft/offsetWidth of the tab matching `activeId` inside `containerRef`
+ * (each tab button must carry `data-tab="<id>"`) so callers can render a sliding underline.
+ */
+export function useTabIndicator(containerRef: Ref<HTMLElement | null>, activeId: Ref<string>) {
+  const left = ref(0)
+  const width = ref(0)
+
+  function measure() {
+    const container = containerRef.value
+    if (!container) return
+    const el = container.querySelector<HTMLElement>(`[data-tab="${activeId.value}"]`)
+    if (!el) return
+    left.value = el.offsetLeft
+    width.value = el.offsetWidth
+  }
+
+  watch([containerRef, activeId], () => {
+    void nextTick(() => measure())
+  }, { immediate: true })
+
+  return { left, width, measure }
+}

package/src/env.d.ts

@@ -0,0 +1,2 @@
+declare const __ADMIN_PREFIX__: string
+declare const __API_PREFIX__: string

package/src/main.ts

@@ -0,0 +1,21 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import router from './router'
+import '@fontsource/plus-jakarta-sans/400.css'
+import '@fontsource/plus-jakarta-sans/500.css'
+import '@fontsource/plus-jakarta-sans/600.css'
+import '@fontsource/plus-jakarta-sans/700.css'
+import '@fontsource/plus-jakarta-sans/800.css'
+import '@fontsource/jetbrains-mono/400.css'
+import '@fontsource/jetbrains-mono/500.css'
+import './style.css'
+
+const app = createApp(App)
+
+// Pinia must be installed before the router because navigation guards
+// call useAuthStore(), which requires an active Pinia instance.
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')

package/src/router/index.ts

@@ -0,0 +1,174 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+import { useAuthStore } from '../stores/auth'
+import AppShell from '../components/layout/AppShell.vue'
+
+// ─── Route meta typing ────────────────────────────────────────────────────────
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    requiresAuth?: boolean
+    permission?: string
+  }
+}
+
+// ─── Routes ───────────────────────────────────────────────────────────────────
+
+const routes: RouteRecordRaw[] = [
+  // ── Public ────────────────────────────────────────────────────────────────
+  {
+    path: `${__ADMIN_PREFIX__}/login`,
+    name: 'login',
+    component: () => import('../views/LoginView.vue'),
+  },
+
+  // ── Authenticated — all rendered inside the AppShell layout ───────────────
+  // AppShell contains the sidebar, topbar, and a <router-view> for the child.
+  // meta.requiresAuth on the parent is merged into every child's to.meta.
+  {
+    path: `${__ADMIN_PREFIX__}`,
+    component: AppShell,
+    meta: { requiresAuth: true },
+    children: [
+      // Default landing
+      { path: '', redirect: `${__ADMIN_PREFIX__}/media` },
+
+      // Change password
+      {
+        path: 'change-password',
+        name: 'change-password',
+        component: () => import('../views/ChangePasswordView.vue'),
+      },
+
+      // ── Content ─────────────────────────────────────────────────────────
+      // /new and /settings defined before /:id so static segments win.
+      {
+        path: 'content/:type',
+        name: 'content-list',
+        component: () => import('../views/content/ContentListView.vue'),
+      },
+      {
+        path: 'content/:type/new',
+        name: 'content-new',
+        component: () => import('../views/content/ContentFormView.vue'),
+      },
+      {
+        path: 'content/:type/settings',
+        name: 'content-settings',
+        component: () => import('../views/content/ContentSettingsView.vue'),
+        meta: { permission: 'content:edit' },
+      },
+      {
+        path: 'content/:type/:id',
+        name: 'content-edit',
+        component: () => import('../views/content/ContentFormView.vue'),
+      },
+
+      // ── Taxonomy ─────────────────────────────────────────────────────────
+      {
+        path: 'taxonomy/:type',
+        name: 'taxonomy-list',
+        component: () => import('../views/taxonomy/TaxonomyListView.vue'),
+      },
+      {
+        path: 'taxonomy/:type/new',
+        name: 'taxonomy-new',
+        component: () => import('../views/taxonomy/TaxonomyFormView.vue'),
+      },
+      {
+        path: 'taxonomy/:type/:id',
+        name: 'taxonomy-edit',
+        component: () => import('../views/taxonomy/TaxonomyFormView.vue'),
+      },
+
+      // ── Media ─────────────────────────────────────────────────────────────
+      {
+        path: 'media',
+        name: 'media-library',
+        component: () => import('../views/media/MediaLibraryView.vue'),
+      },
+      {
+        path: 'media/:id',
+        name: 'media-detail',
+        component: () => import('../views/media/MediaDetailView.vue'),
+      },
+
+      // ── Users ─────────────────────────────────────────────────────────────
+      {
+        path: 'users',
+        name: 'user-list',
+        component: () => import('../views/users/UserListView.vue'),
+        meta: { permission: 'users:read' },
+      },
+      {
+        path: 'users/new',
+        name: 'user-new',
+        component: () => import('../views/users/UserFormView.vue'),
+        meta: { permission: 'users:read' },
+      },
+      {
+        path: 'users/:id',
+        name: 'user-edit',
+        component: () => import('../views/users/UserFormView.vue'),
+        meta: { permission: 'users:read' },
+      },
+
+      // ── Roles ─────────────────────────────────────────────────────────────
+      {
+        path: 'roles',
+        name: 'roles',
+        component: () => import('../views/RolesView.vue'),
+      },
+    ],
+  },
+]
+
+// ─── Router ───────────────────────────────────────────────────────────────────
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+// ─── Global auth guard ────────────────────────────────────────────────────────
+
+router.beforeEach((to) => {
+  const auth = useAuthStore()
+
+  // Already authenticated — redirect away from login.
+  if (to.path === `${__ADMIN_PREFIX__}/login`) {
+    if (auth.isAuthenticated) return { path: `${__ADMIN_PREFIX__}/media` }
+    return true
+  }
+
+  // Not authenticated — preserve intended destination as redirect query param.
+  if (!auth.isAuthenticated) {
+    return {
+      path: `${__ADMIN_PREFIX__}/login`,
+      query: { redirect: to.fullPath },
+    }
+  }
+
+  // Must change password — force redirect to change-password.
+  if (auth.mustChangePassword && to.path !== `${__ADMIN_PREFIX__}/change-password`) {
+    return { path: `${__ADMIN_PREFIX__}/change-password` }
+  }
+
+  // Password already changed — redirect away from change-password.
+  if (!auth.mustChangePassword && to.path === `${__ADMIN_PREFIX__}/change-password`) {
+    return { path: `${__ADMIN_PREFIX__}/media` }
+  }
+
+  return true
+})
+
+// ─── Permission guard ─────────────────────────────────────────────────────────
+
+router.beforeEach((to) => {
+  const auth = useAuthStore()
+  if (to.meta.permission && !auth.hasPermission(to.meta.permission)) {
+    return { path: `${__ADMIN_PREFIX__}/media` }
+  }
+})
+
+export default router

package/src/stores/auth.ts

@@ -0,0 +1,82 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+import { useSchemaStore } from './schema'
+
+const STORAGE_KEY = 'manguito_auth'
+type StoredAuth = { id: string; email: string; role: string; mustChangePassword: boolean }
+
+function loadStored(): StoredAuth | null {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    return raw ? (JSON.parse(raw) as StoredAuth) : null
+  } catch {
+    return null
+  }
+}
+
+export const useAuthStore = defineStore('auth', () => {
+  const schemaStore = useSchemaStore()
+
+  const stored = loadStored()
+  const id = ref<string | null>(stored?.id ?? null)
+  const email = ref<string | null>(stored?.email ?? null)
+  const role = ref<string | null>(stored?.role ?? null)
+  const mustChangePassword = ref(stored?.mustChangePassword ?? false)
+
+  const isAuthenticated = computed(() => id.value !== null)
+
+  // Derived from role name via schema store — not stored directly.
+  const permissions = computed<string[]>(() =>
+    role.value ? (schemaStore.getRoleByName(role.value)?.permissions ?? []) : []
+  )
+
+  // Derived from role name via schema store — not stored directly.
+  const hierarchyLevel = computed<number>(() =>
+    role.value
+      ? (schemaStore.getRoleByName(role.value)?.hierarchy_level ?? Infinity)
+      : Infinity
+  )
+
+  function setUser(user: {
+    id: string
+    email: string
+    role: string
+    mustChangePassword?: boolean
+  }) {
+    id.value = user.id
+    email.value = user.email
+    role.value = user.role
+    mustChangePassword.value = user.mustChangePassword ?? false
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify({
+        id: user.id, email: user.email, role: user.role,
+        mustChangePassword: user.mustChangePassword ?? false,
+      }))
+    } catch { /* storage unavailable (private mode / SSR) — non-fatal */ }
+  }
+
+  function clear() {
+    id.value = null
+    email.value = null
+    role.value = null
+    mustChangePassword.value = false
+    try { localStorage.removeItem(STORAGE_KEY) } catch { /* storage unavailable — non-fatal */ }
+  }
+
+  function hasPermission(permission: string): boolean {
+    return permissions.value.includes(permission)
+  }
+
+  return {
+    id,
+    email,
+    role,
+    mustChangePassword,
+    isAuthenticated,
+    permissions,
+    hierarchyLevel,
+    setUser,
+    clear,
+    hasPermission,
+  }
+})

package/src/stores/content.ts

@@ -0,0 +1,40 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const DEFAULT_PAGE_SIZE = 50
+
+export const useContentStore = defineStore('content', () => {
+  const pages = ref<Map<string, unknown[]>>(new Map())
+  const total = ref(0)
+  const loading = ref(false)
+
+  function cacheKey(contentType: string, page: number, perPage: number): string {
+    return `${contentType}:${page}:${perPage}`
+  }
+
+  function setPage(contentType: string, page: number, perPage: number, items: unknown[]) {
+    pages.value.set(cacheKey(contentType, page, perPage), items)
+  }
+
+  function getPage(contentType: string, page: number, perPage: number): unknown[] | undefined {
+    return pages.value.get(cacheKey(contentType, page, perPage))
+  }
+
+  function invalidate(contentType: string) {
+    const prefix = `${contentType}:`
+    for (const key of [...pages.value.keys()]) {
+      if (key.startsWith(prefix)) {
+        pages.value.delete(key)
+      }
+    }
+  }
+
+  return {
+    pages,
+    total,
+    loading,
+    setPage,
+    getPage,
+    invalidate,
+  }
+})

package/src/stores/media.ts

@@ -0,0 +1,31 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import type { MediaItem } from '@bobbykim/manguito-cms-core'
+
+export const useMediaStore = defineStore('media', () => {
+  const items = ref<Map<string, MediaItem>>(new Map())
+  const loading = ref(false)
+
+  function setItems(newItems: MediaItem[]) {
+    items.value.clear()
+    for (const item of newItems) {
+      items.value.set(item.id, item)
+    }
+  }
+
+  function setItem(item: MediaItem) {
+    items.value.set(item.id, item)
+  }
+
+  function removeItem(id: string) {
+    items.value.delete(id)
+  }
+
+  return {
+    items,
+    loading,
+    setItems,
+    setItem,
+    removeItem,
+  }
+})

package/src/stores/schema.ts

@@ -0,0 +1,130 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import type {
+  ParsedSchema,
+  ParsedContentType,
+  ParsedParagraphType,
+  ParsedTaxonomyType,
+  ParsedEnumType,
+  ParsedRole,
+  ParsedField,
+  UiMeta,
+  SystemField,
+} from '@bobbykim/manguito-cms-core'
+
+// Shape returned by GET /admin/api/schema — full ParsedField objects so the
+// admin forms can render inputs and run client-side validation without extra
+// round-trips to the server.
+export type ApiSchemaResponse = {
+  content_types: Array<{
+    name: string
+    label: string
+    only_one: boolean
+    ui: UiMeta
+    system_fields: SystemField[]
+    fields: ParsedField[]
+  }>
+  taxonomy_types: Array<{
+    name: string
+    label: string
+    system_fields: SystemField[]
+    fields: ParsedField[]
+  }>
+  paragraph_types: Array<{
+    name: string
+    label: string
+    system_fields: SystemField[]
+    fields: ParsedField[]
+  }>
+  enum_types: Array<{ name: string; label: string; values: string[] }>
+}
+
+export const useSchemaStore = defineStore('schema', () => {
+  const contentTypes = ref<Record<string, ParsedContentType>>({})
+  const taxonomyTypes = ref<Record<string, ParsedTaxonomyType>>({})
+  const paragraphTypes = ref<Record<string, ParsedParagraphType>>({})
+  const enumTypes = ref<Record<string, ParsedEnumType>>({})
+  const roles = ref<ParsedRole[]>([])
+
+  function setSchema(schema: ParsedSchema) {
+    switch (schema.schema_type) {
+      case 'content-type':
+        contentTypes.value[schema.name] = schema
+        break
+      case 'taxonomy-type':
+        taxonomyTypes.value[schema.name] = schema
+        break
+      case 'paragraph-type':
+        paragraphTypes.value[schema.name] = schema
+        break
+      case 'enum-type':
+        enumTypes.value[schema.name] = schema
+        break
+    }
+  }
+
+  function setRoles(newRoles: ParsedRole[]) {
+    roles.value = newRoles
+  }
+
+  function setFromApiSchema(data: ApiSchemaResponse) {
+    for (const ct of data.content_types) {
+      contentTypes.value[ct.name] = {
+        schema_type: 'content-type',
+        name: ct.name,
+        label: ct.label,
+        only_one: ct.only_one,
+        ui: ct.ui,
+        system_fields: ct.system_fields,
+        fields: ct.fields,
+      } as unknown as ParsedContentType
+    }
+    for (const tt of data.taxonomy_types) {
+      taxonomyTypes.value[tt.name] = {
+        schema_type: 'taxonomy-type',
+        name: tt.name,
+        label: tt.label,
+        system_fields: tt.system_fields,
+        fields: tt.fields,
+      } as unknown as ParsedTaxonomyType
+    }
+    for (const pt of data.paragraph_types) {
+      paragraphTypes.value[pt.name] = {
+        schema_type: 'paragraph-type',
+        name: pt.name,
+        label: pt.label,
+        system_fields: pt.system_fields,
+        fields: pt.fields,
+      } as unknown as ParsedParagraphType
+    }
+    for (const et of data.enum_types) {
+      enumTypes.value[et.name] = {
+        schema_type: 'enum-type',
+        name: et.name,
+        label: et.label,
+        values: et.values,
+      } as unknown as ParsedEnumType
+    }
+  }
+
+  function getContentType(name: string): ParsedContentType | undefined {
+    return contentTypes.value[name]
+  }
+
+  function getRoleByName(name: string): ParsedRole | undefined {
+    return roles.value.find(r => r.name === name)
+  }
+
+  return {
+    contentTypes,
+    taxonomyTypes,
+    paragraphTypes,
+    enumTypes,
+    roles,
+    setSchema,
+    setRoles,
+    setFromApiSchema,
+    getContentType,
+    getRoleByName,
+  }
+})

package/src/stores/taxonomy.ts

@@ -0,0 +1,40 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const DEFAULT_PAGE_SIZE = 50
+
+export const useTaxonomyStore = defineStore('taxonomy', () => {
+  const pages = ref<Map<string, unknown[]>>(new Map())
+  const total = ref(0)
+  const loading = ref(false)
+
+  function cacheKey(taxonomyType: string, page: number, perPage: number): string {
+    return `${taxonomyType}:${page}:${perPage}`
+  }
+
+  function setPage(taxonomyType: string, page: number, perPage: number, items: unknown[]) {
+    pages.value.set(cacheKey(taxonomyType, page, perPage), items)
+  }
+
+  function getPage(taxonomyType: string, page: number, perPage: number): unknown[] | undefined {
+    return pages.value.get(cacheKey(taxonomyType, page, perPage))
+  }
+
+  function invalidate(taxonomyType: string) {
+    const prefix = `${taxonomyType}:`
+    for (const key of [...pages.value.keys()]) {
+      if (key.startsWith(prefix)) {
+        pages.value.delete(key)
+      }
+    }
+  }
+
+  return {
+    pages,
+    total,
+    loading,
+    setPage,
+    getPage,
+    invalidate,
+  }
+})

package/src/stores/ui.ts

@@ -0,0 +1,94 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import { useMediaQuery } from '@vueuse/core'
+
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info'
+
+export type Toast = {
+  id: string
+  variant: ToastVariant
+  message: string
+  duration: number | null
+}
+
+const MAX_VISIBLE = 3
+const DEFAULT_DURATION = 4000
+
+export const useUiStore = defineStore('ui', () => {
+  const toasts = ref<Toast[]>([])
+  // Desktop: rail collapses to icon-only width. Mobile: rail becomes a slide-in drawer instead.
+  const sidebarCollapsed = ref(false)
+  const isMobile = useMediaQuery('(max-width: 820px)')
+  const mobileNavOpen = ref(false)
+  const activeModal = ref<string | null>(null)
+  const maxFileSize = ref(0)
+  // When true (cloud storage), uploads go straight to storage via presigned URL;
+  // when false (local storage), they use the direct upload endpoint.
+  const presignedUploads = ref(false)
+  const cmsName = ref('Manguito CMS')
+
+  function addToast(variant: ToastVariant, message: string, duration: number | null = DEFAULT_DURATION) {
+    // Evict oldest when at capacity before adding the new one.
+    if (toasts.value.length >= MAX_VISIBLE) {
+      toasts.value.shift()
+    }
+
+    const id = crypto.randomUUID()
+    toasts.value.push({ id, variant, message, duration })
+
+    if (duration !== null) {
+      setTimeout(() => removeToast(id), duration)
+    }
+  }
+
+  function removeToast(id: string) {
+    const index = toasts.value.findIndex(t => t.id === id)
+    if (index !== -1) {
+      toasts.value.splice(index, 1)
+    }
+  }
+
+  function setMaxFileSize(bytes: number) {
+    maxFileSize.value = bytes
+  }
+
+  function setPresignedUploads(value: boolean) {
+    presignedUploads.value = value
+  }
+
+  function setCmsName(name: string) {
+    cmsName.value = name
+  }
+
+  // Single entry point for the topbar toggle button — collapses the rail on desktop,
+  // opens the drawer on mobile.
+  function toggleSidebar() {
+    if (isMobile.value) {
+      mobileNavOpen.value = !mobileNavOpen.value
+    } else {
+      sidebarCollapsed.value = !sidebarCollapsed.value
+    }
+  }
+
+  function closeMobileNav() {
+    mobileNavOpen.value = false
+  }
+
+  return {
+    toasts,
+    sidebarCollapsed,
+    isMobile,
+    mobileNavOpen,
+    activeModal,
+    maxFileSize,
+    presignedUploads,
+    cmsName,
+    addToast,
+    removeToast,
+    setMaxFileSize,
+    setPresignedUploads,
+    setCmsName,
+    toggleSidebar,
+    closeMobileNav,
+  }
+})