@commonpub/layer 0.81.0 → 0.83.0

package/pages/admin/users.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { RoleWithPermissions } from '@commonpub/server';
+
 definePageMeta({ layout: 'admin', middleware: 'auth' });
 useSeoMeta({ title: `Users, Admin, ${useSiteName()}` });
 
@@ -9,6 +11,11 @@ const { data: users, refresh } = await useFetch('/api/admin/users', {
   query: computed(() => ({ search: search.value || undefined })),
 });
 
+// Custom (non-system) roles — for per-user assignment. Requires `roles.manage`;
+// useFetch won't crash the page if the viewer lacks it (data stays null).
+const { data: allRoles } = await useFetch<RoleWithPermissions[]>('/api/admin/roles');
+const customRoles = computed<RoleWithPermissions[]>(() => (allRoles.value ?? []).filter((r) => !r.isSystem));
+
 interface AdminUser {
   id: string;
   username: string;
@@ -39,6 +46,49 @@ async function changeRole(userId: string, role: string): Promise<void> {
   }
 }
 
+// --- Custom-role assignment (expand a row to edit a user's custom roles) ---
+const expandedUserId = ref<string | null>(null);
+const editingRoleIds = ref<Set<string>>(new Set());
+const savingRoles = ref(false);
+
+async function toggleRolesEditor(userId: string): Promise<void> {
+  if (expandedUserId.value === userId) {
+    expandedUserId.value = null;
+    return;
+  }
+  expandedUserId.value = userId;
+  editingRoleIds.value = new Set();
+  try {
+    const { roleIds } = await $fetch<{ roleIds: string[] }>(`/api/admin/users/${userId}/roles`);
+    editingRoleIds.value = new Set(roleIds);
+  } catch {
+    toast.error('Could not load this user’s roles');
+  }
+}
+
+function toggleRoleId(roleId: string): void {
+  const next = new Set(editingRoleIds.value);
+  if (next.has(roleId)) next.delete(roleId);
+  else next.add(roleId);
+  editingRoleIds.value = next;
+}
+
+async function saveRoles(userId: string): Promise<void> {
+  savingRoles.value = true;
+  try {
+    // Only custom role ids are sent; the system/primary role is the dropdown above.
+    const customIds = new Set(customRoles.value.map((r) => r.id));
+    const roleIds = [...editingRoleIds.value].filter((id) => customIds.has(id));
+    await $fetch(`/api/admin/users/${userId}/roles`, { method: 'PUT', body: { roleIds } });
+    toast.success('Custom roles updated');
+    expandedUserId.value = null;
+  } catch {
+    toast.error('Failed to update custom roles');
+  } finally {
+    savingRoles.value = false;
+  }
+}
+
 async function toggleStatus(userId: string, currentStatus: string): Promise<void> {
   const newStatus = currentStatus === 'active' ? 'suspended' : 'active';
   try {
@@ -78,13 +128,15 @@ async function deleteUser(userId: string, username: string): Promise<void> {
             <th>Username</th>
             <th>Email</th>
             <th>Role</th>
+            <th v-if="customRoles.length">Custom roles</th>
             <th>Status</th>
             <th>Joined</th>
             <th>Actions</th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="u in userList" :key="u.id">
+          <template v-for="u in userList" :key="u.id">
+          <tr>
             <td>
               <NuxtLink :to="`/u/${u.username}`" class="admin-link">@{{ u.username }}</NuxtLink>
             </td>
@@ -98,6 +150,11 @@ async function deleteUser(userId: string, username: string): Promise<void> {
                 <option v-for="r in roles" :key="r" :value="r">{{ r }}</option>
               </select>
             </td>
+            <td v-if="customRoles.length">
+              <button class="admin-roles-btn" :aria-expanded="expandedUserId === u.id" @click="toggleRolesEditor(u.id)">
+                <i class="fa-solid fa-user-shield"></i> {{ expandedUserId === u.id ? 'Close' : 'Assign' }}
+              </button>
+            </td>
             <td>
               <button
                 class="admin-status-btn"
@@ -114,6 +171,21 @@ async function deleteUser(userId: string, username: string): Promise<void> {
               </button>
             </td>
           </tr>
+          <tr v-if="expandedUserId === u.id && customRoles.length" class="admin-roles-row">
+            <td :colspan="7">
+              <div class="admin-roles-editor">
+                <span class="admin-roles-label">Custom roles for @{{ u.username }}:</span>
+                <label v-for="r in customRoles" :key="r.id" class="admin-roles-check">
+                  <input type="checkbox" :checked="editingRoleIds.has(r.id)" @change="toggleRoleId(r.id)" />
+                  <span>{{ r.name }}</span>
+                </label>
+                <button class="admin-roles-save" :disabled="savingRoles" @click="saveRoles(u.id)">
+                  {{ savingRoles ? 'Saving...' : 'Save' }}
+                </button>
+              </div>
+            </td>
+          </tr>
+          </template>
         </tbody>
       </table>
     </div>
@@ -141,5 +213,13 @@ async function deleteUser(userId: string, username: string): Promise<void> {
 .admin-status-btn:hover { opacity: 0.8; }
 .admin-delete-btn { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 4px 6px; }
 .admin-delete-btn:hover { color: var(--red); }
+.admin-roles-btn { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border: var(--border-width-default) solid var(--border2); background: var(--surface); color: var(--text-dim); cursor: pointer; }
+.admin-roles-btn:hover { border-color: var(--accent); color: var(--text); }
+.admin-roles-row td { background: var(--surface2); }
+.admin-roles-editor { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 4px 0; }
+.admin-roles-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
+.admin-roles-check { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
+.admin-roles-save { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; padding: 3px 10px; border: var(--border-width-default) solid var(--accent); background: var(--accent); color: var(--color-on-accent); cursor: pointer; margin-left: auto; }
+.admin-roles-save:disabled { opacity: 0.6; cursor: default; }
 .admin-empty { color: var(--text-faint); text-align: center; padding: 32px 0; }
 </style>

package/pages/admin/video-categories.vue

@@ -0,0 +1,203 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'admin', middleware: 'auth' });
+useSeoMeta({ title: `Video Categories, Admin, ${useSiteName()}` });
+
+const toast = useToast();
+
+interface VideoCategory {
+  id: string;
+  name: string;
+  slug: string;
+  description: string | null;
+  sortOrder: number;
+}
+
+const { data: categories, refresh } = await useFetch<VideoCategory[]>('/api/videos/categories');
+
+const showForm = ref(false);
+const editingId = ref<string | null>(null);
+const form = ref({
+  name: '',
+  description: '',
+  sortOrder: 0,
+});
+
+function openNew(): void {
+  editingId.value = null;
+  form.value = { name: '', description: '', sortOrder: categories.value?.length ?? 0 };
+  showForm.value = true;
+}
+
+function openEdit(cat: VideoCategory): void {
+  editingId.value = cat.id;
+  form.value = {
+    name: cat.name,
+    description: cat.description ?? '',
+    sortOrder: cat.sortOrder,
+  };
+  showForm.value = true;
+}
+
+function cancelForm(): void {
+  showForm.value = false;
+  editingId.value = null;
+}
+
+async function saveCategory(): Promise<void> {
+  const payload = {
+    name: form.value.name,
+    description: form.value.description || undefined,
+    sortOrder: form.value.sortOrder,
+  };
+
+  try {
+    if (editingId.value) {
+      await $fetch(`/api/videos/categories/${editingId.value}`, { method: 'PUT', body: payload });
+      toast.success('Category updated');
+    } else {
+      await $fetch('/api/videos/categories', { method: 'POST', body: payload });
+      toast.success('Category created');
+    }
+    showForm.value = false;
+    editingId.value = null;
+    await refresh();
+  } catch {
+    toast.error('Failed to save category');
+  }
+}
+
+async function deleteCategory(cat: VideoCategory): Promise<void> {
+  if (!confirm(`Delete "${cat.name}"? Videos using this category will become uncategorized.`)) return;
+  try {
+    await $fetch(`/api/videos/categories/${cat.id}`, { method: 'DELETE' });
+    toast.success('Category deleted');
+    await refresh();
+  } catch {
+    toast.error('Failed to delete category');
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-admin-video-categories">
+    <div class="cpub-admin-header">
+      <h1 class="cpub-admin-title">Video Categories</h1>
+      <button class="cpub-btn cpub-btn-primary cpub-btn-sm" @click="openNew">
+        <i class="fa-solid fa-plus"></i> New Category
+      </button>
+    </div>
+
+    <!-- Category Form -->
+    <div v-if="showForm" class="cpub-cat-form">
+      <h2 class="cpub-cat-form-title">{{ editingId ? 'Edit Category' : 'New Category' }}</h2>
+      <div class="cpub-cat-form-grid">
+        <div class="cpub-cat-field">
+          <label for="cpub-vcat-name" class="cpub-cat-label">Name</label>
+          <input id="cpub-vcat-name" v-model="form.name" class="cpub-cat-input" placeholder="e.g. Tutorials" />
+        </div>
+        <div class="cpub-cat-field">
+          <label for="cpub-vcat-order" class="cpub-cat-label">Sort Order</label>
+          <input id="cpub-vcat-order" v-model.number="form.sortOrder" type="number" class="cpub-cat-input" min="0" />
+        </div>
+        <div class="cpub-cat-field cpub-cat-field--wide">
+          <label for="cpub-vcat-desc" class="cpub-cat-label">Description</label>
+          <input id="cpub-vcat-desc" v-model="form.description" class="cpub-cat-input" placeholder="Optional description" />
+        </div>
+      </div>
+      <div class="cpub-cat-form-actions">
+        <button class="cpub-btn cpub-btn-primary cpub-btn-sm" :disabled="!form.name.trim()" @click="saveCategory">
+          {{ editingId ? 'Update' : 'Create' }}
+        </button>
+        <button class="cpub-btn cpub-btn-sm" @click="cancelForm">Cancel</button>
+      </div>
+    </div>
+
+    <!-- Categories Table -->
+    <div v-if="categories?.length" class="cpub-admin-table-wrap">
+      <table class="cpub-admin-table">
+        <thead>
+          <tr>
+            <th>Order</th>
+            <th>Name</th>
+            <th>Slug</th>
+            <th>Description</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="cat in categories" :key="cat.id">
+            <td class="cpub-admin-num">{{ cat.sortOrder }}</td>
+            <td><span class="cpub-cat-name">{{ cat.name }}</span></td>
+            <td class="cpub-admin-slug">{{ cat.slug }}</td>
+            <td class="cpub-admin-desc">{{ cat.description }}</td>
+            <td class="cpub-admin-actions">
+              <button class="cpub-admin-action" title="Edit" @click="openEdit(cat)">
+                <i class="fa-solid fa-pencil"></i>
+              </button>
+              <button class="cpub-admin-action cpub-admin-action--danger" title="Delete" @click="deleteCategory(cat)">
+                <i class="fa-solid fa-trash"></i>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <p v-else class="cpub-empty">No video categories found. Create one to get started.</p>
+  </div>
+</template>
+
+<style scoped>
+.cpub-admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); }
+.cpub-admin-title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); }
+
+.cpub-cat-form {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  padding: var(--space-5);
+  margin-bottom: var(--space-6);
+}
+
+.cpub-cat-form-title { font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-4); }
+
+.cpub-cat-form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-3);
+}
+
+.cpub-cat-field { display: flex; flex-direction: column; gap: 4px; }
+.cpub-cat-field--wide { grid-column: 1 / -1; }
+.cpub-cat-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
+.cpub-cat-input {
+  font-size: 13px;
+  padding: 6px 10px;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--bg);
+  color: var(--text);
+  outline: none;
+}
+.cpub-cat-input:focus { border-color: var(--accent); }
+
+.cpub-cat-form-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
+
+.cpub-admin-table-wrap { overflow-x: auto; }
+.cpub-admin-table { width: 100%; border-collapse: collapse; }
+.cpub-admin-table th { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); text-align: left; padding: 8px 12px; border-bottom: var(--border-width-default) solid var(--border); }
+.cpub-admin-table td { padding: 8px 12px; border-bottom: var(--border-width-default) solid var(--border2); font-size: 13px; }
+.cpub-admin-num { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
+.cpub-admin-slug { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
+.cpub-admin-desc { color: var(--text-dim); }
+.cpub-admin-actions { display: flex; gap: 6px; }
+.cpub-admin-action { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 4px 6px; }
+.cpub-admin-action:hover { color: var(--accent); }
+.cpub-admin-action--danger:hover { color: var(--red); }
+
+.cpub-cat-name { display: flex; align-items: center; gap: 6px; font-weight: 500; }
+
+.cpub-empty { color: var(--text-faint); text-align: center; padding: var(--space-10) 0; }
+
+@media (max-width: 768px) {
+  .cpub-cat-form-grid { grid-template-columns: 1fr; }
+  .cpub-admin-header { flex-direction: column; gap: var(--space-3); align-items: flex-start; }
+}
+</style>

package/pages/cert/[code].vue

@@ -2,7 +2,7 @@
 const route = useRoute();
 const code = route.params.code as string;
 
-const { data: certData } = useLazyFetch(`/api/cert/${code}`);
+const { data: certData, pending } = useLazyFetch(`/api/cert/${code}`);
 
 useSeoMeta({
   title: () => certData.value ? `Certificate, ${certData.value.path.title}, ${useSiteName()}` : `Certificate, ${useSiteName()}`,
@@ -12,7 +12,11 @@ useSeoMeta({
 
 <template>
   <div class="cert-page">
-    <div v-if="certData" class="cert-card">
+    <div v-if="pending" class="cert-not-found">
+      <div class="cert-not-found-icon"><i class="fa-solid fa-circle-notch fa-spin"></i></div>
+      <p>Loading certificate...</p>
+    </div>
+    <div v-else-if="certData" class="cert-card">
       <!-- Certificate Badge -->
       <div class="cert-badge-wrap">
         <div class="cert-badge">