@commonpub/layer 0.1.0

package/pages/admin/reports.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'admin', middleware: 'auth' });
+useSeoMeta({ title: `Reports — Admin — ${useSiteName()}` });
+
+const { data: reportsData, refresh } = await useFetch('/api/admin/reports');
+const toast = useToast();
+
+interface Report {
+  id: string;
+  reason: string;
+  description?: string;
+  status: string;
+  reporterId: string;
+  targetType: string;
+  targetId: string;
+  createdAt: string;
+}
+
+const reports = computed<Report[]>(() => {
+  if (!reportsData.value) return [];
+  if (Array.isArray(reportsData.value)) return reportsData.value as unknown as Report[];
+  const data = reportsData.value as unknown as { items?: Report[] };
+  return data.items ?? [];
+});
+
+async function resolveReport(id: string, resolution: 'resolved' | 'dismissed'): Promise<void> {
+  try {
+    await $fetch(`/api/admin/reports/${id}/resolve` as string, {
+      method: 'POST',
+      body: { resolution },
+    });
+    toast.success(`Report ${resolution}`);
+    await refresh();
+  } catch {
+    toast.error('Failed to update report');
+  }
+}
+</script>
+
+<template>
+  <div class="admin-reports">
+    <h1 class="admin-page-title">Reports</h1>
+
+    <template v-if="reports.length">
+      <div class="report-card" v-for="report in reports" :key="report.id">
+        <div class="report-header">
+          <span class="report-status" :class="`status-${report.status}`">{{ report.status }}</span>
+          <span class="report-type">{{ report.targetType }}</span>
+          <time class="report-date">{{ new Date(report.createdAt).toLocaleDateString() }}</time>
+        </div>
+        <p class="report-reason"><strong>{{ report.reason }}</strong></p>
+        <p v-if="report.description" class="report-desc">{{ report.description }}</p>
+        <div class="report-meta">
+          <span class="report-meta-item">Reporter: <code>{{ report.reporterId }}</code></span>
+          <span class="report-meta-item">Target: <code>{{ report.targetId }}</code></span>
+        </div>
+        <div v-if="report.status === 'pending'" class="report-actions">
+          <button class="cpub-btn cpub-btn-sm" style="color: var(--green); border-color: var(--green-border);" @click="resolveReport(report.id, 'resolved')">
+            <i class="fa-solid fa-check"></i> Resolve
+          </button>
+          <button class="cpub-btn cpub-btn-sm" @click="resolveReport(report.id, 'dismissed')">
+            <i class="fa-solid fa-xmark"></i> Dismiss
+          </button>
+        </div>
+      </div>
+    </template>
+    <p class="admin-empty" v-else>No reports to review.</p>
+  </div>
+</template>
+
+<style scoped>
+.admin-page-title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-6); }
+.report-card { padding: 16px; border: var(--border-width-default) solid var(--border); background: var(--surface); margin-bottom: 12px; box-shadow: var(--shadow-md); }
+.report-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
+.report-status { font-size: 10px; font-family: var(--font-mono); font-weight: 600; text-transform: uppercase; padding: 2px 8px; }
+.status-pending { background: var(--yellow-bg); color: var(--yellow); border: var(--border-width-default) solid var(--yellow-border); }
+.status-resolved { background: var(--green-bg); color: var(--green); border: var(--border-width-default) solid var(--green-border); }
+.status-dismissed { background: var(--surface2); color: var(--text-faint); border: var(--border-width-default) solid var(--border2); }
+.report-type { font-size: 10px; font-family: var(--font-mono); color: var(--accent); background: var(--accent-bg); padding: 2px 6px; border: var(--border-width-default) solid var(--accent-border); }
+.report-date { font-size: 11px; color: var(--text-faint); margin-left: auto; font-family: var(--font-mono); }
+.report-reason { font-size: 13px; margin-bottom: 4px; }
+.report-desc { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin-bottom: 8px; }
+.report-meta { display: flex; gap: 16px; margin-bottom: 10px; }
+.report-meta-item { font-size: 10px; font-family: var(--font-mono); color: var(--text-faint); }
+.report-meta-item code { background: var(--surface2); padding: 1px 4px; }
+.report-actions { display: flex; gap: 6px; padding-top: 8px; border-top: var(--border-width-default) solid var(--border2); }
+.admin-empty { color: var(--text-faint); text-align: center; padding: var(--space-8) 0; }
+</style>

package/pages/admin/settings.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'admin', middleware: 'auth' });
+
+useSeoMeta({ title: `Settings — Admin — ${useSiteName()}` });
+
+const { data: settings, refresh } = await useFetch<Record<string, string>>('/api/admin/settings');
+
+const saving = ref(false);
+const editKey = ref('');
+const editValue = ref('');
+const newKey = ref('');
+const newValue = ref('');
+
+const knownSettings = [
+  { key: 'instance.name', label: 'Instance Name', desc: 'Public name of this CommonPub instance' },
+  { key: 'instance.description', label: 'Instance Description', desc: 'Short description shown in metadata' },
+  { key: 'instance.registrationOpen', label: 'Open Registration', desc: 'Allow new user signups (true/false)' },
+  { key: 'instance.maxUploadSize', label: 'Max Upload Size (MB)', desc: 'Maximum file upload size in megabytes' },
+  { key: 'instance.contactEmail', label: 'Contact Email', desc: 'Admin contact email for the instance' },
+];
+
+function startEdit(key: string, value: string): void {
+  editKey.value = key;
+  editValue.value = value;
+}
+
+function cancelEdit(): void {
+  editKey.value = '';
+  editValue.value = '';
+}
+
+async function saveSetting(key: string, value: string): Promise<void> {
+  saving.value = true;
+  try {
+    await $fetch('/api/admin/settings', {
+      method: 'PUT',
+      body: { key, value },
+    });
+    editKey.value = '';
+    editValue.value = '';
+    await refresh();
+  } catch {
+    // Error handling via toast if available
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function addSetting(): Promise<void> {
+  if (!newKey.value.trim()) return;
+  await saveSetting(newKey.value.trim(), newValue.value);
+  newKey.value = '';
+  newValue.value = '';
+}
+</script>
+
+<template>
+  <div class="admin-settings">
+    <h1 class="admin-page-title">Instance Settings</h1>
+
+    <div class="settings-list" v-if="settings">
+      <div v-for="item in knownSettings" :key="item.key" class="settings-row">
+        <div class="settings-label">
+          <span class="settings-key">{{ item.label }}</span>
+          <span class="settings-desc">{{ item.desc }}</span>
+        </div>
+        <div class="settings-value-col">
+          <template v-if="editKey === item.key">
+            <input v-model="editValue" class="settings-input" @keyup.enter="saveSetting(item.key, editValue)" @keyup.escape="cancelEdit" />
+            <button class="cpub-btn cpub-btn-sm cpub-btn-primary" :disabled="saving" @click="saveSetting(item.key, editValue)">Save</button>
+            <button class="cpub-btn cpub-btn-sm" @click="cancelEdit">Cancel</button>
+          </template>
+          <template v-else>
+            <span class="settings-value">{{ (settings as Record<string, string>)[item.key] ?? '—' }}</span>
+            <button class="cpub-btn cpub-btn-sm" @click="startEdit(item.key, (settings as Record<string, string>)[item.key] ?? '')">Edit</button>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <div class="settings-custom" v-if="settings">
+      <h2 class="settings-section-title">Custom Settings</h2>
+      <div v-for="(value, key) in (settings as Record<string, string>)" :key="key" class="settings-row">
+        <template v-if="!knownSettings.some(k => k.key === key)">
+          <div class="settings-label">
+            <span class="settings-key-mono">{{ key }}</span>
+          </div>
+          <div class="settings-value-col">
+            <template v-if="editKey === key">
+              <input v-model="editValue" class="settings-input" @keyup.enter="saveSetting(key as string, editValue)" @keyup.escape="cancelEdit" />
+              <button class="cpub-btn cpub-btn-sm cpub-btn-primary" :disabled="saving" @click="saveSetting(key as string, editValue)">Save</button>
+              <button class="cpub-btn cpub-btn-sm" @click="cancelEdit">Cancel</button>
+            </template>
+            <template v-else>
+              <span class="settings-value">{{ value }}</span>
+              <button class="cpub-btn cpub-btn-sm" @click="startEdit(key as string, value)">Edit</button>
+            </template>
+          </div>
+        </template>
+      </div>
+
+      <div class="settings-add">
+        <input v-model="newKey" class="settings-input" placeholder="Setting key" />
+        <input v-model="newValue" class="settings-input" placeholder="Value" />
+        <button class="cpub-btn cpub-btn-sm" :disabled="!newKey.trim()" @click="addSetting">Add</button>
+      </div>
+    </div>
+
+    <p class="admin-empty" v-if="!settings">No settings configured.</p>
+  </div>
+</template>
+
+<style scoped>
+.admin-page-title {
+  font-size: var(--text-xl);
+  font-weight: var(--font-weight-bold);
+  margin-bottom: var(--space-6);
+}
+
+.settings-list {
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+}
+
+.settings-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  border-bottom: var(--border-width-default) solid var(--border);
+  gap: var(--space-4);
+}
+
+.settings-row:last-child { border-bottom: none; }
+
+.settings-label { display: flex; flex-direction: column; gap: 2px; }
+.settings-key { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
+.settings-key-mono { font-size: var(--text-sm); font-family: var(--font-mono); }
+.settings-desc { font-size: var(--text-xs); color: var(--text-faint); }
+
+.settings-value-col { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
+.settings-value { font-size: var(--text-sm); font-family: var(--font-mono); color: var(--text-dim); }
+.settings-input { font-size: var(--text-sm); padding: 4px 8px; border: var(--border-width-default) solid var(--border); background: var(--surface2); color: var(--text); font-family: var(--font-mono); min-width: 160px; }
+
+.settings-custom { margin-top: var(--space-6); }
+.settings-section-title { font-size: var(--text-md); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); }
+
+.settings-add {
+  display: flex;
+  gap: var(--space-2);
+  margin-top: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border: 2px dashed var(--border);
+  background: var(--surface);
+}
+
+.admin-empty {
+  color: var(--text-faint);
+  text-align: center;
+  padding: var(--space-8) 0;
+}
+
+@media (max-width: 768px) {
+  .settings-row { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
+  .settings-add { flex-direction: column; }
+}
+</style>

package/pages/admin/users.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'admin', middleware: 'auth' });
+useSeoMeta({ title: `Users — Admin — ${useSiteName()}` });
+
+const search = ref('');
+const toast = useToast();
+
+const { data: users, refresh } = await useFetch('/api/admin/users', {
+  query: computed(() => ({ search: search.value || undefined })),
+});
+
+interface AdminUser {
+  id: string;
+  username: string;
+  email: string;
+  role: string;
+  status: string;
+  createdAt: string;
+}
+
+const userList = computed<AdminUser[]>(() => {
+  if (!users.value) return [];
+  if (Array.isArray(users.value)) return users.value as AdminUser[];
+  return (users.value as { items?: AdminUser[] }).items ?? [];
+});
+
+const roles = ['member', 'pro', 'verified', 'staff', 'admin'] as const;
+
+async function changeRole(userId: string, role: string): Promise<void> {
+  try {
+    await $fetch(`/api/admin/users/${userId}/role`, {
+      method: 'PUT',
+      body: { role },
+    });
+    toast.success('Role updated');
+    await refresh();
+  } catch {
+    toast.error('Failed to update role');
+  }
+}
+
+async function toggleStatus(userId: string, currentStatus: string): Promise<void> {
+  const newStatus = currentStatus === 'active' ? 'suspended' : 'active';
+  try {
+    await $fetch(`/api/admin/users/${userId}/status`, {
+      method: 'PUT',
+      body: { status: newStatus },
+    });
+    toast.success(`User ${newStatus}`);
+    await refresh();
+  } catch {
+    toast.error('Failed to update status');
+  }
+}
+
+async function deleteUser(userId: string, username: string): Promise<void> {
+  if (!confirm(`Delete user @${username}? This cannot be undone.`)) return;
+  try {
+    await $fetch(`/api/admin/users/${userId}`, { method: 'DELETE' });
+    toast.success('User deleted');
+    await refresh();
+  } catch {
+    toast.error('Failed to delete user');
+  }
+}
+</script>
+
+<template>
+  <div class="admin-users">
+    <h1 class="admin-page-title">Users</h1>
+
+    <input v-model="search" type="search" class="admin-search" placeholder="Search users..." aria-label="Search users" />
+
+    <div class="admin-table-wrap" v-if="userList.length">
+      <table class="admin-table">
+        <thead>
+          <tr>
+            <th>Username</th>
+            <th>Email</th>
+            <th>Role</th>
+            <th>Status</th>
+            <th>Joined</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="u in userList" :key="u.id">
+            <td>
+              <NuxtLink :to="`/u/${u.username}`" class="admin-link">@{{ u.username }}</NuxtLink>
+            </td>
+            <td class="admin-email">{{ u.email }}</td>
+            <td>
+              <select
+                class="admin-role-select"
+                :value="u.role"
+                @change="changeRole(u.id, ($event.target as HTMLSelectElement).value)"
+              >
+                <option v-for="r in roles" :key="r" :value="r">{{ r }}</option>
+              </select>
+            </td>
+            <td>
+              <button
+                class="admin-status-btn"
+                :class="u.status === 'active' ? 'status-active' : 'status-suspended'"
+                @click="toggleStatus(u.id, u.status)"
+              >
+                {{ u.status }}
+              </button>
+            </td>
+            <td class="admin-date">{{ new Date(u.createdAt).toLocaleDateString() }}</td>
+            <td>
+              <button class="admin-delete-btn" title="Delete user" @click="deleteUser(u.id, u.username)">
+                <i class="fa-solid fa-trash"></i>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <p class="admin-empty" v-else>No users found.</p>
+  </div>
+</template>
+
+<style scoped>
+.admin-page-title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); margin-bottom: 16px; }
+.admin-search { width: 100%; max-width: 400px; padding: 6px 10px; border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; margin-bottom: 16px; }
+.admin-search:focus { outline: none; border-color: var(--accent); }
+.admin-table-wrap { overflow-x: auto; }
+.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.admin-table th { text-align: left; padding: 8px 12px; border-bottom: var(--border-width-default) solid var(--border); font-weight: 600; color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-mono); }
+.admin-table td { padding: 8px 12px; border-bottom: var(--border-width-default) solid var(--border2); }
+.admin-link { color: var(--accent); text-decoration: none; font-weight: 500; }
+.admin-link:hover { text-decoration: underline; }
+.admin-email { font-size: 12px; color: var(--text-dim); }
+.admin-date { font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); }
+.admin-role-select { padding: 3px 6px; border: var(--border-width-default) solid var(--border2); background: var(--surface); color: var(--text-dim); font-size: 11px; font-family: var(--font-mono); text-transform: capitalize; cursor: pointer; }
+.admin-role-select:focus { border-color: var(--accent); outline: none; }
+.admin-status-btn { font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; padding: 2px 8px; cursor: pointer; border: var(--border-width-default) solid; background: none; }
+.status-active { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
+.status-suspended { color: var(--red); border-color: var(--red-border); background: var(--red-bg); }
+.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-empty { color: var(--text-faint); text-align: center; padding: 32px 0; }
+</style>

package/pages/auth/forgot-password.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'auth' });
+
+useSeoMeta({
+  title: `Forgot Password — ${useSiteName()}`,
+  description: 'Reset your CommonPub account password.',
+});
+
+const email = ref('');
+const error = ref('');
+const success = ref(false);
+const loading = ref(false);
+
+async function handleSubmit(): Promise<void> {
+  error.value = '';
+  loading.value = true;
+
+  try {
+    await $fetch('/api/auth/forgot-password', {
+      method: 'POST',
+      body: { email: email.value },
+    });
+    success.value = true;
+  } catch (err: unknown) {
+    const message = (err as { data?: { message?: string } })?.data?.message;
+    error.value = message || 'Something went wrong. Please try again.';
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="forgot-page">
+    <h1 class="forgot-title">Forgot Password</h1>
+
+    <template v-if="success">
+      <div class="forgot-success">
+        <i class="fa-solid fa-envelope" style="font-size: 24px; color: var(--accent); margin-bottom: 12px;"></i>
+        <p class="forgot-success-text">
+          If an account exists for <strong>{{ email }}</strong>, we've sent a password reset link.
+          Check your inbox and spam folder.
+        </p>
+      </div>
+      <NuxtLink to="/auth/login" class="back-link">
+        <i class="fa-solid fa-arrow-left"></i> Back to login
+      </NuxtLink>
+    </template>
+
+    <template v-else>
+      <p class="forgot-desc">Enter your email address and we'll send you a link to reset your password.</p>
+
+      <form class="forgot-form" @submit.prevent="handleSubmit" aria-label="Forgot password form">
+        <div v-if="error" class="form-error" role="alert">{{ error }}</div>
+
+        <div class="field">
+          <label for="email" class="field-label">Email</label>
+          <input
+            id="email"
+            v-model="email"
+            type="email"
+            class="field-input"
+            autocomplete="email"
+            required
+            placeholder="you@example.com"
+          />
+        </div>
+
+        <button type="submit" class="submit-btn" :disabled="loading">
+          {{ loading ? 'Sending...' : 'Send Reset Link' }}
+        </button>
+      </form>
+
+      <p class="forgot-footer">
+        Remember your password?
+        <NuxtLink to="/auth/login">Log in</NuxtLink>
+      </p>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.forgot-page { width: 100%; }
+.forgot-title { font-size: 18px; font-weight: 600; margin-bottom: var(--space-3); }
+.forgot-desc { font-size: 13px; color: var(--text-dim); margin-bottom: var(--space-5); line-height: 1.6; }
+.forgot-form { display: flex; flex-direction: column; gap: var(--space-4); }
+.forgot-success { text-align: center; padding: var(--space-5) 0; }
+.forgot-success-text { font-size: 13px; color: var(--text-dim); line-height: 1.6; }
+.back-link { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--accent); text-decoration: none; justify-content: center; margin-top: var(--space-4); }
+.back-link:hover { text-decoration: underline; }
+.form-error { padding: var(--space-3); background: var(--red-bg); color: var(--red); border: var(--border-width-default) solid var(--red); border-radius: var(--radius); font-size: 12px; }
+.field { display: flex; flex-direction: column; gap: 4px; }
+.field-label { font-size: 12px; font-weight: 500; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
+.field-input { padding: 8px 12px; border: var(--border-width-default) solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 13px; font-family: var(--font-sans); outline: none; width: 100%; transition: border-color 0.15s; }
+.field-input::placeholder { color: var(--text-faint); }
+.field-input:focus { border-color: var(--accent); }
+.submit-btn { padding: 7px 14px; background: var(--accent); color: var(--color-text-inverse); border: var(--border-width-default) solid var(--accent); border-radius: var(--radius); font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: var(--shadow-sm); transition: all 0.15s; }
+.submit-btn:hover:not(:disabled) { box-shadow: var(--shadow-md); transform: translate(-1px, -1px); }
+.submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }
+.forgot-footer { text-align: center; font-size: 12px; color: var(--text-dim); margin-top: var(--space-4); }
+.forgot-footer a { color: var(--accent); text-decoration: none; }
+.forgot-footer a:hover { text-decoration: underline; }
+</style>