@bobbykim/manguito-cms-admin 0.1.0 → 0.2.0

package/src/stores/users.ts

@@ -0,0 +1,44 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export type UserResponse = {
+  id: string
+  email: string
+  role: string
+  must_change_password: boolean
+  created_at: string
+  updated_at: string
+}
+
+export const useUsersStore = defineStore('users', () => {
+  const users = ref<UserResponse[]>([])
+  const loading = ref(false)
+
+  function setUsers(newUsers: UserResponse[]) {
+    users.value = newUsers
+  }
+
+  function setUser(user: UserResponse) {
+    const index = users.value.findIndex(u => u.id === user.id)
+    if (index !== -1) {
+      users.value[index] = user
+    } else {
+      users.value.push(user)
+    }
+  }
+
+  function removeUser(id: string) {
+    const index = users.value.findIndex(u => u.id === id)
+    if (index !== -1) {
+      users.value.splice(index, 1)
+    }
+  }
+
+  return {
+    users,
+    loading,
+    setUsers,
+    setUser,
+    removeUser,
+  }
+})

package/src/style.css

@@ -0,0 +1,46 @@
+@import "tailwindcss";
+
+@theme {
+  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+
+  /* Accent (purple) replaces the default Tailwind indigo scale used across the app */
+  --color-indigo-50: #eeedfb;
+  --color-indigo-100: #eeedfb;
+  --color-indigo-200: #d6d5e6;
+  --color-indigo-300: #b8b6e0;
+  --color-indigo-400: #8d87e8;
+  --color-indigo-500: #6d5ef0;
+  --color-indigo-600: #5b57e8;
+  --color-indigo-700: #4b47d6;
+  --color-indigo-800: #3d3ab0;
+  --color-indigo-900: #2f2c8a;
+
+  --color-surface: #f6f6fa;
+  --color-card-border: #ecebf3;
+  --color-divider: #f0eff5;
+  --color-ink: #23233a;
+  --color-muted: #8a8a9e;
+  --color-faint: #a2a2b6;
+}
+
+body {
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Thin scrollbar — keeps a long sidebar nav list (many content/taxonomy types) from feeling heavy */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-thumb {
+  background: #dedde9;
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #c9c8da;
+  background-clip: content-box;
+}

package/src/test-utils/server.ts

@@ -0,0 +1,54 @@
+import { setupServer } from 'msw/node'
+import { http, HttpResponse } from 'msw'
+import type { ParsedRole } from '@bobbykim/manguito-cms-core'
+
+declare const __ADMIN_PREFIX__: string
+
+export const testRoles: ParsedRole[] = [
+  {
+    name: 'admin',
+    label: 'Admin',
+    is_system: true,
+    hierarchy_level: 100,
+    permissions: [
+      'content:read', 'content:create', 'content:edit', 'content:delete',
+      'media:read', 'media:create', 'media:edit', 'media:delete',
+      'taxonomy:read', 'taxonomy:create', 'taxonomy:edit', 'taxonomy:delete',
+      'users:read', 'users:create', 'users:edit', 'users:delete',
+      'roles:read',
+    ],
+  },
+  {
+    name: 'editor',
+    label: 'Editor',
+    is_system: false,
+    hierarchy_level: 50,
+    permissions: [
+      'content:read', 'content:create', 'content:edit',
+      'media:read', 'media:create',
+      'taxonomy:read',
+    ],
+  },
+]
+
+export const testUser = {
+  id: 'test-uuid',
+  email: 'editor@test.local',
+  role: 'editor',
+  must_change_password: false,
+}
+
+export const server = setupServer(
+  http.get(`${__ADMIN_PREFIX__}/api/config`, () =>
+    HttpResponse.json({
+      ok: true,
+      data: {
+        cms_name: 'Test CMS',
+        version: '1.0.0',
+        roles: testRoles,
+        user: testUser,
+        media: { max_file_size: 4194304 },
+      },
+    })
+  )
+)

package/src/views/ChangePasswordView.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useApiClient } from '../composables/useApiClient'
+import { useAuthStore } from '../stores/auth'
+
+const router = useRouter()
+const api = useApiClient()
+const authStore = useAuthStore()
+
+const currentPassword = ref('')
+const newPassword = ref('')
+const confirmPassword = ref('')
+const submitting = ref(false)
+const formError = ref('')
+
+async function onSubmit() {
+  formError.value = ''
+
+  if (newPassword.value !== confirmPassword.value) {
+    formError.value = 'Passwords do not match.'
+    return
+  }
+
+  submitting.value = true
+
+  const res = await api.post<{
+    id: string
+    email: string
+    role: string
+    must_change_password: boolean
+  }>('/users/change-password', {
+    current_password: currentPassword.value,
+    new_password: newPassword.value,
+  })
+
+  submitting.value = false
+
+  if (!res.ok) {
+    if (res.error.code === 'INVALID_CREDENTIALS') {
+      formError.value = 'Current password is incorrect.'
+    } else {
+      formError.value = 'Something went wrong. Please try again.'
+    }
+    return
+  }
+
+  // Only mustChangePassword changes — id/email/role are unchanged.
+  authStore.setUser({
+    id: authStore.id!,
+    email: authStore.email!,
+    role: authStore.role!,
+    mustChangePassword: false,
+  })
+
+  void router.push(`${__ADMIN_PREFIX__}/media`)
+}
+</script>
+
+<template>
+  <!-- Standalone layout — no AppShell/sidebar chrome -->
+  <div class="flex min-h-screen items-center justify-center bg-gray-50 px-4">
+    <div class="w-full max-w-sm">
+      <h1 class="mb-2 text-center text-2xl font-bold text-gray-900">Change password</h1>
+      <p class="mb-8 text-center text-sm text-gray-500">
+        You must set a new password before continuing.
+      </p>
+
+      <form class="space-y-5" novalidate @submit.prevent="onSubmit">
+        <!-- Current password -->
+        <div>
+          <label for="current-password" class="block text-[13px] font-semibold text-[#3D3D52]">
+            Current password
+          </label>
+          <input
+            id="current-password"
+            v-model="currentPassword"
+            type="password"
+            required
+            autocomplete="current-password"
+            :disabled="submitting"
+            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:cursor-not-allowed disabled:opacity-60"
+          />
+        </div>
+
+        <!-- New password -->
+        <div>
+          <label for="new-password" class="block text-[13px] font-semibold text-[#3D3D52]">
+            New password
+          </label>
+          <input
+            id="new-password"
+            v-model="newPassword"
+            type="password"
+            required
+            autocomplete="new-password"
+            :disabled="submitting"
+            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:cursor-not-allowed disabled:opacity-60"
+          />
+        </div>
+
+        <!-- Confirm new password -->
+        <div>
+          <label for="confirm-password" class="block text-[13px] font-semibold text-[#3D3D52]">
+            Confirm new password
+          </label>
+          <input
+            id="confirm-password"
+            v-model="confirmPassword"
+            type="password"
+            required
+            autocomplete="new-password"
+            :disabled="submitting"
+            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:cursor-not-allowed disabled:opacity-60"
+          />
+        </div>
+
+        <!-- Inline error -->
+        <p v-if="formError" class="text-sm text-red-600" role="alert">
+          {{ formError }}
+        </p>
+
+        <!-- Submit -->
+        <button
+          type="submit"
+          :disabled="submitting"
+          class="w-full rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {{ submitting ? 'Saving…' : 'Set new password' }}
+        </button>
+      </form>
+    </div>
+  </div>
+</template>

package/src/views/LoginView.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { ref, computed, onUnmounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useAuthStore } from '../stores/auth'
+import { useUiStore } from '../stores/ui'
+
+const router = useRouter()
+const route = useRoute()
+const authStore = useAuthStore()
+const uiStore = useUiStore()
+
+const email = ref('')
+const password = ref('')
+const submitting = ref(false)
+const formError = ref('')
+const retrySeconds = ref(0)
+
+let countdown: ReturnType<typeof setInterval> | null = null
+
+const submitDisabled = computed(() => submitting.value || retrySeconds.value > 0)
+
+function updateRateLimitMessage() {
+  formError.value = `Too many attempts. Try again in ${Math.ceil(retrySeconds.value / 60)} minutes.`
+}
+
+function startCountdown(seconds: number) {
+  retrySeconds.value = seconds
+  updateRateLimitMessage()
+  if (countdown) clearInterval(countdown)
+  countdown = setInterval(() => {
+    retrySeconds.value -= 1
+    if (retrySeconds.value <= 0) {
+      clearInterval(countdown!)
+      countdown = null
+      retrySeconds.value = 0
+      formError.value = ''
+    } else {
+      updateRateLimitMessage()
+    }
+  }, 1000)
+}
+
+onUnmounted(() => {
+  if (countdown) clearInterval(countdown)
+})
+
+async function onSubmit() {
+  if (submitDisabled.value) return
+  submitting.value = true
+  formError.value = ''
+
+  let res: Response
+  try {
+    res = await fetch(`${__ADMIN_PREFIX__}/api/auth/login`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email: email.value, password: password.value }),
+    })
+  } catch {
+    formError.value = 'Something went wrong. Please try again.'
+    submitting.value = false
+    return
+  }
+
+  const json = (await res.json()) as {
+    ok: boolean
+    data?: { id: string; email: string; role: string; must_change_password: boolean }
+    error?: { code: string; message: string }
+  }
+
+  if (!json.ok) {
+    const code = json.error?.code ?? ''
+    if (code === 'INVALID_CREDENTIALS') {
+      formError.value = 'Invalid email or password.'
+    } else if (code === 'RATE_LIMITED') {
+      const retryAfter = parseInt(res.headers.get('Retry-After') ?? '60', 10)
+      startCountdown(isNaN(retryAfter) ? 60 : retryAfter)
+    } else {
+      formError.value = 'Something went wrong. Please try again.'
+    }
+    submitting.value = false
+    return
+  }
+
+  const user = json.data!
+  authStore.setUser({
+    id: user.id,
+    email: user.email,
+    role: user.role,
+    mustChangePassword: user.must_change_password,
+  })
+
+  if (user.must_change_password) {
+    void router.push(`${__ADMIN_PREFIX__}/change-password`)
+  } else {
+    const redirect = route.query.redirect
+    void router.push(typeof redirect === 'string' ? redirect : `${__ADMIN_PREFIX__}/media`)
+  }
+}
+</script>
+
+<template>
+  <div class="flex min-h-screen bg-surface">
+    <!-- Brand panel — visible on large screens -->
+    <div
+      class="hidden lg:flex lg:w-80 lg:shrink-0 lg:flex-col lg:items-start lg:justify-between bg-gradient-to-br from-[#1C1C30] to-[#121220] px-10 py-12 text-white"
+    >
+      <div>
+        <!-- Logo mark -->
+        <div class="flex h-[42px] w-[42px] items-center justify-center rounded-[13px] bg-gradient-to-br from-[#6D5EF0] to-indigo-600 shadow-[0_6px_18px_rgba(91,87,232,0.5)]">
+          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.1" stroke-linecap="round" aria-hidden="true">
+            <path d="M4 7h16" /><path d="M4 12h10" /><path d="M4 17h13" />
+          </svg>
+        </div>
+        <h1 class="mt-8 text-[28px] font-bold leading-tight tracking-tight">{{ uiStore.cmsName }}</h1>
+        <p class="mt-3.5 max-w-[300px] text-[15px] leading-relaxed text-white/60">
+          Schema-driven headless CMS — manage your content with confidence.
+        </p>
+      </div>
+      <p class="text-xs text-white/40">Self-hosted &amp; open source</p>
+    </div>
+
+    <!-- Form area -->
+    <div class="flex flex-1 flex-col items-center justify-center px-6 py-12">
+      <!-- Mobile-only brand -->
+      <div class="mb-8 flex flex-col items-center lg:hidden">
+        <div class="flex h-10 w-10 items-center justify-center rounded-[11px] bg-gradient-to-br from-[#6D5EF0] to-indigo-600 shadow-[0_4px_12px_rgba(91,87,232,0.36)]">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 10h16M4 14h10M4 18h6" />
+          </svg>
+        </div>
+        <h1 class="mt-4 text-lg font-bold text-ink">{{ uiStore.cmsName }}</h1>
+      </div>
+
+      <!-- Card -->
+      <div class="w-full max-w-sm rounded-[20px] border border-card-border bg-white px-8 py-10 shadow-[0_10px_40px_rgba(24,24,48,0.1)]">
+        <h2 class="mb-1 text-[21px] font-bold tracking-tight text-ink">Sign in</h2>
+        <p class="mb-6 text-sm text-muted">Enter your credentials to continue.</p>
+
+        <form class="space-y-[18px]" novalidate @submit.prevent="onSubmit">
+          <!-- Email -->
+          <div>
+            <label for="email" class="block text-[13px] font-semibold text-[#3D3D52]">Email</label>
+            <input
+              id="email"
+              v-model="email"
+              type="email"
+              required
+              autocomplete="email"
+              :disabled="submitting"
+              class="mt-[7px] block w-full rounded-[11px] border border-[#E4E3EE] bg-[#FBFBFD] px-3.5 py-3 text-sm text-ink placeholder-faint transition-colors focus:border-indigo-400 focus:bg-white focus:outline-none focus:ring-[3px] focus:ring-indigo-50 disabled:cursor-not-allowed disabled:opacity-60"
+            />
+          </div>
+
+          <!-- Password -->
+          <div>
+            <label for="password" class="block text-[13px] font-semibold text-[#3D3D52]">Password</label>
+            <input
+              id="password"
+              v-model="password"
+              type="password"
+              required
+              autocomplete="current-password"
+              :disabled="submitting"
+              class="mt-[7px] block w-full rounded-[11px] border border-[#E4E3EE] bg-[#FBFBFD] px-3.5 py-3 text-sm text-ink placeholder-faint transition-colors focus:border-indigo-400 focus:bg-white focus:outline-none focus:ring-[3px] focus:ring-indigo-50 disabled:cursor-not-allowed disabled:opacity-60"
+            />
+          </div>
+
+          <!-- Inline error -->
+          <p v-if="formError" class="rounded-[10px] bg-red-50 px-3 py-2 text-sm text-red-600" role="alert">
+            {{ formError }}
+          </p>
+
+          <!-- Submit -->
+          <button
+            type="submit"
+            :disabled="submitDisabled"
+            class="w-full rounded-[11px] bg-indigo-600 px-4 py-[13px] text-sm font-semibold text-white shadow-[0_4px_14px_rgba(91,87,232,0.34)] transition-colors hover:bg-indigo-700 hover:shadow-[0_8px_22px_rgba(91,87,232,0.44)] focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {{ submitting ? 'Signing in…' : 'Sign in' }}
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>

package/src/views/RolesView.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useSchemaStore } from '../stores/schema'
+
+const schemaStore = useSchemaStore()
+
+const roles = computed(() =>
+  [...schemaStore.roles].sort((a, b) => a.hierarchy_level - b.hierarchy_level)
+)
+
+// Permission tokens look like "content:read" — color by the category prefix, matching the design.
+const PERM_PALETTE: Record<string, { bg: string; color: string }> = {
+  content: { bg: '#EEEDFB', color: '#5B57E8' },
+  media: { bg: '#E3F4FB', color: '#0E86AB' },
+  taxonomy: { bg: '#FBF1E2', color: '#B5780F' },
+  users: { bg: '#F2EAFB', color: '#8B3FD6' },
+  roles: { bg: '#EDEFF3', color: '#5A6478' },
+}
+
+function permStyle(token: string): string {
+  const palette = PERM_PALETTE[token.split(':')[0]!] ?? PERM_PALETTE.roles!
+  return `background:${palette.bg};color:${palette.color}`
+}
+</script>
+
+<template>
+  <div>
+    <div class="mb-[22px]">
+      <h1 class="text-[26px] font-bold tracking-tight text-ink">Roles</h1>
+      <p class="mt-1 text-sm text-muted">
+        Roles are schema-defined and read-only. Use the CLI to modify them.
+      </p>
+    </div>
+
+    <div
+      v-if="roles.length === 0"
+      class="rounded-2xl border border-dashed border-gray-300 p-12 text-center text-sm text-muted"
+    >
+      No roles configured.
+    </div>
+
+    <div v-else class="flex flex-col gap-4">
+      <div
+        v-for="role in roles"
+        :key="role.name"
+        class="rounded-2xl border border-card-border bg-white p-5 shadow-[0_1px_2px_rgba(24,24,48,0.04),0_8px_22px_rgba(24,24,48,0.04)]"
+      >
+        <!-- Role header -->
+        <div class="mb-3.5 flex items-start justify-between gap-3">
+          <div>
+            <h2 class="text-[16.5px] font-bold tracking-tight text-ink">{{ role.label }}</h2>
+            <p class="mt-0.5 font-mono text-[12.5px] text-faint">{{ role.name }}</p>
+          </div>
+          <span class="shrink-0 whitespace-nowrap rounded-full bg-[#F1F2F6] px-[11px] py-1.5 text-[11.5px] font-semibold text-[#5A6478]">
+            {{ role.hierarchy_level === 1 ? 'Level 1' : `Level ${role.hierarchy_level}` }}
+          </span>
+        </div>
+
+        <!-- Permissions -->
+        <div>
+          <p class="mb-[9px] text-[11px] font-bold uppercase tracking-[.06em] text-[#B0B0C0]">
+            Permissions
+          </p>
+          <div
+            v-if="role.permissions.length === 0"
+            class="text-xs text-faint"
+          >
+            No permissions assigned.
+          </div>
+          <div v-else class="flex flex-wrap gap-[7px]">
+            <span
+              v-for="perm in role.permissions"
+              :key="perm"
+              class="rounded-[7px] px-2.5 py-1 font-mono text-[11.5px] font-medium"
+              :style="permStyle(perm)"
+            >
+              {{ perm }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>