@bobbykim/manguito-cms-admin 0.1.1 → 0.2.0

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <title>Manguito CMS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/manguito-cms-admin",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "license": "MIT",
   "author": "Bobby Kim <bobby.sihun.kim@gmail.com>",
   "homepage": "https://github.com/bobbykim89/manguito-cms",
@@ -21,33 +21,37 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "public",
+    "index.html",
+    "vite.config.ts"
   ],
   "dependencies": {
     "@fontsource/jetbrains-mono": "^5.2.8",
     "@fontsource/plus-jakarta-sans": "^5.2.8",
+    "@tailwindcss/vite": "^4.3.2",
     "@tiptap/extension-link": "^2.27.2",
     "@tiptap/starter-kit": "^2.27.2",
     "@tiptap/vue-3": "^2.27.2",
+    "@vitejs/plugin-vue": "^6.0.7",
     "@vueuse/core": "^12.8.2",
     "pinia": "^3.0.4",
+    "tailwindcss": "^4.3.2",
+    "vite": "^8.1.3",
     "vue": "^3.5.39",
     "vue-router": "^4.6.4",
     "@bobbykim/manguito-cms-core": "0.1.1"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.3.2",
     "@testing-library/vue": "^8.1.0",
     "@types/jsdom": "^28.0.3",
-    "@vitejs/plugin-vue": "^6.0.7",
     "@vue/test-utils": "^2.4.11",
     "dotenv-cli": "latest",
     "jsdom": "^29.1.1",
     "msw": "^2.15.0",
-    "tailwindcss": "^4.3.2",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
-    "vite": "^8.1.3",
     "vitest": "^4.1.10",
     "vue-tsc": "^3.3.7"
   },

package/src/App.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import type { ParsedRole } from '@bobbykim/manguito-cms-core'
+import { useAuthStore } from './stores/auth'
+import { useSchemaStore, type ApiSchemaResponse } from './stores/schema'
+import { useUiStore } from './stores/ui'
+
+// ─── Config response shape ────────────────────────────────────────────────────
+// Matches the spec in phase-08-api-client.md.
+// The current API config endpoint returns cms_name, version, and roles.
+// user and media are included here for when the API is extended.
+
+type ConfigResponse = {
+  cms_name: string
+  version: string
+  roles: Array<{ name: string; label: string; hierarchy_level: number }>
+  all_roles?: Array<{
+    name: string
+    label: string
+    hierarchy_level: number
+    is_system: boolean
+    permissions: string[]
+  }>
+  user?: {
+    id: string
+    email: string
+    role: string
+    must_change_password: boolean
+  }
+  media?: {
+    max_file_size: number
+    presigned_uploads?: boolean
+  }
+}
+
+// ─── Component state ──────────────────────────────────────────────────────────
+
+const loading = ref(true)
+const router = useRouter()
+const authStore = useAuthStore()
+const schemaStore = useSchemaStore()
+const uiStore = useUiStore()
+
+// ─── Bootstrap ────────────────────────────────────────────────────────────────
+
+async function fetchConfigAndSchema(redirectOn401 = true): Promise<void> {
+  const response = await fetch(`${__ADMIN_PREFIX__}/api/config`, {
+    credentials: 'include',
+  })
+
+  if (response.status === 401) {
+    if (redirectOn401) {
+      authStore.clear()
+      void router.push(`${__ADMIN_PREFIX__}/login`)
+    }
+    return
+  }
+
+  if (response.ok) {
+    const result = await response.json() as { ok: true; data: ConfigResponse }
+    const data = result.data
+
+    const roleSource = data.all_roles ?? []
+    schemaStore.setRoles(
+      roleSource.map(r => ({
+        name: r.name,
+        label: r.label,
+        hierarchy_level: r.hierarchy_level,
+        is_system: r.is_system,
+        permissions: r.permissions as ParsedRole['permissions'],
+      }))
+    )
+
+    if (data.user) {
+      authStore.setUser({
+        id: data.user.id,
+        email: data.user.email,
+        role: data.user.role,
+        mustChangePassword: data.user.must_change_password,
+      })
+    }
+
+    uiStore.setCmsName(data.cms_name)
+
+    if (data.media?.max_file_size) {
+      uiStore.setMaxFileSize(data.media.max_file_size)
+    }
+    uiStore.setPresignedUploads(data.media?.presigned_uploads ?? false)
+
+    const schemaRes = await fetch(`${__ADMIN_PREFIX__}/api/schema`, { credentials: 'include' })
+    if (schemaRes.ok) {
+      const schemaResult = await schemaRes.json() as { ok: true; data: ApiSchemaResponse }
+      schemaStore.setFromApiSchema(schemaResult.data)
+    }
+
+    if (authStore.mustChangePassword) {
+      void router.push(`${__ADMIN_PREFIX__}/change-password`)
+    }
+  }
+}
+
+onMounted(async () => {
+  if (!authStore.isAuthenticated) {
+    loading.value = false
+    return
+  }
+  try {
+    await fetchConfigAndSchema()
+  } finally {
+    loading.value = false
+  }
+})
+
+watch(() => uiStore.cmsName, (name) => { document.title = name }, { immediate: true })
+
+// Re-run bootstrap when the user logs in (isAuthenticated flips false → true).
+// Show the loading spinner during the fetch so AppShell never renders with an
+// empty schema store (same guarantee as a page refresh gives).
+watch(() => authStore.isAuthenticated, async (isAuth, wasAuth) => {
+  if (isAuth && !wasAuth) {
+    loading.value = true
+    try {
+      await fetchConfigAndSchema(false)
+    } catch {
+      // ignore
+    } finally {
+      loading.value = false
+    }
+  }
+})
+</script>
+
+<template>
+  <div
+    v-if="loading"
+    class="fixed inset-0 flex items-center justify-center bg-white"
+    aria-label="Loading"
+  >
+    <div
+      class="h-10 w-10 animate-spin rounded-full border-4 border-gray-200 border-t-gray-600"
+      role="status"
+    />
+  </div>
+
+  <router-view v-else />
+</template>

package/src/adapters/admin.ts

@@ -0,0 +1,13 @@
+import type { AdminAdapter } from '@bobbykim/manguito-cms-core'
+
+export type AdminAdapterOptions = {
+  prefix?: string
+}
+
+export function createAdminAdapter(
+  options: AdminAdapterOptions = {}
+): AdminAdapter {
+  const prefix = options.prefix ?? '/admin'
+
+  return { prefix }
+}

package/src/components/fields/BooleanToggle.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ParsedField } from '@bobbykim/manguito-cms-core'
+
+const props = defineProps<{
+  field: ParsedField
+  modelValue: unknown
+  error?: string
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const boolValue = computed(() => props.modelValue === true)
+
+function toggle() {
+  if (!props.disabled) {
+    emit('update:modelValue', !boolValue.value)
+  }
+}
+</script>
+
+<template>
+  <div>
+    <span class="block text-[13px] font-semibold text-[#3D3D52]">
+      {{ field.label }}
+      <span v-if="field.required" class="ml-0.5 text-red-500" aria-hidden="true">*</span>
+    </span>
+
+    <div class="mt-2 flex items-center gap-3">
+      <button
+        :id="field.name"
+        type="button"
+        role="switch"
+        :aria-checked="boolValue"
+        :aria-label="field.label"
+        :disabled="disabled"
+        :class="[
+          'relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2',
+          boolValue ? 'bg-indigo-600' : 'bg-gray-200',
+          disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
+        ]"
+        @click="toggle"
+      >
+        <span
+          :class="[
+            'inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform',
+            boolValue ? 'translate-x-6' : 'translate-x-1',
+          ]"
+        />
+      </button>
+      <span class="text-sm text-gray-600 select-none">
+        {{ boolValue ? 'Yes' : 'No' }}
+      </span>
+    </div>
+
+    <p v-if="error" class="mt-1 text-sm text-red-600" role="alert">
+      {{ error }}
+    </p>
+  </div>
+</template>

package/src/components/fields/DatePicker.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ParsedField } from '@bobbykim/manguito-cms-core'
+
+const props = defineProps<{
+  field: ParsedField
+  modelValue: unknown
+  error?: string
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// datetime-local requires "YYYY-MM-DDTHH:MM". ISO strings are "YYYY-MM-DDTHH:MM:SS.mssZ".
+// Slice the first 16 characters to get the compatible format, treating stored value as UTC.
+const displayValue = computed(() => {
+  if (typeof props.modelValue !== 'string' || !props.modelValue) return ''
+  return props.modelValue.slice(0, 16)
+})
+
+function onInput(event: Event) {
+  const value = (event.target as HTMLInputElement).value
+  // Append seconds and Z to form a valid ISO 8601 UTC datetime string.
+  emit('update:modelValue', value ? `${value}:00.000Z` : '')
+}
+</script>
+
+<template>
+  <div>
+    <label
+      :for="field.name"
+      class="block text-[13px] font-semibold text-[#3D3D52]"
+    >
+      {{ field.label }}
+      <span v-if="field.required" class="ml-0.5 text-red-500" aria-hidden="true">*</span>
+    </label>
+
+    <div class="mt-1">
+      <input
+        :id="field.name"
+        type="datetime-local"
+        :value="displayValue"
+        :disabled="disabled"
+        :class="[
+          'block w-full rounded-[11px] border px-3.5 py-3 text-sm focus:outline-none focus:ring-[3px]',
+          error
+            ? 'border-red-300 focus:border-red-400 focus:ring-red-200'
+              : 'border-[#E4E3EE] bg-[#FBFBFD] focus:border-indigo-400 focus:bg-white focus:ring-indigo-50',
+          disabled && 'cursor-not-allowed bg-gray-50 opacity-60',
+        ]"
+        @input="onInput"
+      />
+    </div>
+
+    <p v-if="error" class="mt-1 text-sm text-red-600" role="alert">
+      {{ error }}
+    </p>
+  </div>
+</template>

package/src/components/fields/EnumSelect.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ParsedField } from '@bobbykim/manguito-cms-core'
+
+const props = defineProps<{
+  field: ParsedField
+  modelValue: unknown
+  error?: string
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const options = computed(() => props.field.validation.allowed_values ?? [])
+const hasOptions = computed(() => options.value.length > 0)
+
+const selectValue = computed(() =>
+  typeof props.modelValue === 'string' ? props.modelValue : ''
+)
+
+function onChange(event: Event) {
+  emit('update:modelValue', (event.target as HTMLSelectElement).value)
+}
+</script>
+
+<template>
+  <div>
+    <label
+      :for="field.name"
+      class="block text-[13px] font-semibold text-[#3D3D52]"
+    >
+      {{ field.label }}
+      <span v-if="field.required" class="ml-0.5 text-red-500" aria-hidden="true">*</span>
+    </label>
+
+    <div class="mt-1">
+      <select
+        :id="field.name"
+        :value="selectValue"
+        :disabled="disabled || !hasOptions"
+        :class="[
+          'block w-full rounded-[11px] border px-3.5 py-3 text-sm focus:outline-none focus:ring-[3px]',
+          error
+            ? 'border-red-300 focus:border-red-400 focus:ring-red-200'
+              : 'border-[#E4E3EE] bg-[#FBFBFD] focus:border-indigo-400 focus:bg-white focus:ring-indigo-50',
+          (disabled || !hasOptions) && 'cursor-not-allowed bg-gray-50 opacity-60',
+        ]"
+        @change="onChange"
+      >
+        <option value="" disabled>
+          {{ hasOptions ? `Select ${field.label}` : 'No options available' }}
+        </option>
+        <option
+          v-for="opt in options"
+          :key="opt"
+          :value="opt"
+        >
+          {{ opt }}
+        </option>
+      </select>
+    </div>
+
+    <p v-if="error" class="mt-1 text-sm text-red-600" role="alert">
+      {{ error }}
+    </p>
+  </div>
+</template>