@commonpub/layer 0.8.3 → 0.8.5

package/pages/admin/reports.vue

@@ -2,8 +2,13 @@
 definePageMeta({ layout: 'admin', middleware: 'auth' });
 useSeoMeta({ title: `Reports — Admin — ${useSiteName()}` });
 
-const { data: reportsData, refresh } = await useFetch('/api/admin/reports');
 const toast = useToast();
+const statusFilter = ref<string>('pending');
+
+const { data: reportsData, refresh } = await useFetch(() => {
+  const base = '/api/admin/reports';
+  return statusFilter.value ? `${base}?status=${statusFilter.value}` : base;
+});
 
 interface Report {
   id: string;
@@ -14,6 +19,9 @@ interface Report {
   targetType: string;
   targetId: string;
   createdAt: string;
+  reporter?: { id: string; username: string };
+  reviewer?: { id: string; username: string } | null;
+  resolution?: string | null;
 }
 
 const reports = computed<Report[]>(() => {
@@ -23,66 +31,174 @@ const reports = computed<Report[]>(() => {
   return data.items ?? [];
 });
 
-async function resolveReport(id: string, resolution: 'resolved' | 'dismissed'): Promise<void> {
+// Bulk selection
+const selectedIds = ref<Set<string>>(new Set());
+const allSelected = computed(() => reports.value.length > 0 && reports.value.every(r => selectedIds.value.has(r.id)));
+
+function toggleSelect(id: string): void {
+  const s = new Set(selectedIds.value);
+  if (s.has(id)) s.delete(id);
+  else s.add(id);
+  selectedIds.value = s;
+}
+
+function toggleSelectAll(): void {
+  if (allSelected.value) {
+    selectedIds.value = new Set();
+  } else {
+    selectedIds.value = new Set(reports.value.map(r => r.id));
+  }
+}
+
+// Single report actions
+async function resolveReport(id: string, status: 'reviewed' | 'resolved' | 'dismissed', resolution?: string): Promise<void> {
+  const text = resolution ?? prompt(`Reason for ${status}:`);
+  if (!text) return;
   try {
     await $fetch(`/api/admin/reports/${id}/resolve` as string, {
       method: 'POST',
-      body: { resolution },
+      body: { status, resolution: text },
     });
-    toast.success(`Report ${resolution}`);
+    toast.success(`Report ${status}`);
+    selectedIds.value.delete(id);
     await refresh();
   } catch {
     toast.error('Failed to update report');
   }
 }
+
+// Bulk actions
+async function bulkAction(status: 'reviewed' | 'resolved' | 'dismissed'): Promise<void> {
+  if (selectedIds.value.size === 0) return;
+  const text = prompt(`Reason for bulk ${status} (${selectedIds.value.size} reports):`);
+  if (!text) return;
+  let successCount = 0;
+  for (const id of selectedIds.value) {
+    try {
+      await $fetch(`/api/admin/reports/${id}/resolve` as string, {
+        method: 'POST',
+        body: { status, resolution: text },
+      });
+      successCount++;
+    } catch {
+      // continue with remaining
+    }
+  }
+  toast.success(`${successCount} report${successCount === 1 ? '' : 's'} ${status}`);
+  selectedIds.value = new Set();
+  await refresh();
+}
+
+watch(statusFilter, () => {
+  selectedIds.value = new Set();
+});
 </script>
 
 <template>
-  <div class="admin-reports">
-    <h1 class="admin-page-title">Reports</h1>
+  <div class="cpub-admin-reports">
+    <h1 class="cpub-admin-page-title">Reports</h1>
+
+    <!-- Filter bar -->
+    <div class="cpub-report-filters">
+      <button
+        v-for="s in ['pending', 'reviewed', 'resolved', 'dismissed', '']"
+        :key="s"
+        class="cpub-report-filter-btn"
+        :class="{ 'cpub-report-filter-active': statusFilter === s }"
+        @click="statusFilter = s"
+      >
+        {{ s || 'All' }}
+      </button>
+    </div>
+
+    <!-- Bulk actions -->
+    <div v-if="selectedIds.size > 0" class="cpub-report-bulk">
+      <span class="cpub-report-bulk-count">{{ selectedIds.size }} selected</span>
+      <button v-if="statusFilter === 'pending'" class="cpub-btn cpub-btn-sm" @click="bulkAction('reviewed')">
+        <i class="fa-solid fa-eye" /> Mark Reviewed
+      </button>
+      <button class="cpub-btn cpub-btn-sm" style="color: var(--green); border-color: var(--green-border);" @click="bulkAction('resolved')">
+        <i class="fa-solid fa-check" /> Resolve
+      </button>
+      <button class="cpub-btn cpub-btn-sm" @click="bulkAction('dismissed')">
+        <i class="fa-solid fa-xmark" /> Dismiss
+      </button>
+    </div>
 
     <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 class="cpub-report-card" v-for="report in reports" :key="report.id">
+        <div class="cpub-report-header">
+          <label class="cpub-report-checkbox" @click.stop>
+            <input type="checkbox" :checked="selectedIds.has(report.id)" @change="toggleSelect(report.id)" />
+          </label>
+          <span class="cpub-report-status" :class="`cpub-status-${report.status}`">{{ report.status }}</span>
+          <span class="cpub-report-type">{{ report.targetType }}</span>
+          <time class="cpub-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>
+        <p class="cpub-report-reason"><strong>{{ report.reason }}</strong></p>
+        <p v-if="report.description" class="cpub-report-desc">{{ report.description }}</p>
+        <div class="cpub-report-meta">
+          <span class="cpub-report-meta-item">Reporter: <code>{{ report.reporter?.username ?? report.reporterId }}</code></span>
+          <span class="cpub-report-meta-item">Target: <code>{{ report.targetId.slice(0, 8) }}...</code></span>
+          <span v-if="report.reviewer" class="cpub-report-meta-item">Reviewed by: <code>{{ report.reviewer.username }}</code></span>
         </div>
-        <div v-if="report.status === 'pending'" class="report-actions">
+        <p v-if="report.resolution" class="cpub-report-resolution">
+          <i class="fa-solid fa-comment-dots" /> {{ report.resolution }}
+        </p>
+        <div v-if="report.status === 'pending' || report.status === 'reviewed'" class="cpub-report-actions">
+          <button v-if="report.status === 'pending'" class="cpub-btn cpub-btn-sm" @click="resolveReport(report.id, 'reviewed')">
+            <i class="fa-solid fa-eye" /> Mark Reviewed
+          </button>
           <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
+            <i class="fa-solid fa-check" /> Resolve
           </button>
           <button class="cpub-btn cpub-btn-sm" @click="resolveReport(report.id, 'dismissed')">
-            <i class="fa-solid fa-xmark"></i> Dismiss
+            <i class="fa-solid fa-xmark" /> Dismiss
           </button>
         </div>
       </div>
+
+      <!-- Select all -->
+      <div class="cpub-report-select-all">
+        <label @click.stop>
+          <input type="checkbox" :checked="allSelected" @change="toggleSelectAll" />
+          <span>Select all</span>
+        </label>
+      </div>
     </template>
-    <p class="admin-empty" v-else>No reports to review.</p>
+    <p class="cpub-admin-empty" v-else>No reports{{ statusFilter ? ` with status "${statusFilter}"` : '' }}.</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; }
+.cpub-admin-page-title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-6); }
+.cpub-report-filters { display: flex; gap: 4px; margin-bottom: var(--space-4); flex-wrap: wrap; }
+.cpub-report-filter-btn { padding: 4px 10px; font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; background: var(--surface); border: var(--border-width-default) solid var(--border); color: var(--text-dim); cursor: pointer; }
+.cpub-report-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
+.cpub-report-filter-active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
+.cpub-report-bulk { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: var(--space-3); background: var(--accent-bg); border: var(--border-width-default) solid var(--accent-border); }
+.cpub-report-bulk-count { font-size: 11px; font-family: var(--font-mono); color: var(--accent); font-weight: 600; }
+.cpub-report-card { padding: 16px; border: var(--border-width-default) solid var(--border); background: var(--surface); margin-bottom: 12px; box-shadow: var(--shadow-md); }
+.cpub-report-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
+.cpub-report-checkbox { display: flex; align-items: center; cursor: pointer; }
+.cpub-report-checkbox input { cursor: pointer; accent-color: var(--accent); }
+.cpub-report-status { font-size: 10px; font-family: var(--font-mono); font-weight: 600; text-transform: uppercase; padding: 2px 8px; }
+.cpub-status-pending { background: var(--yellow-bg); color: var(--yellow); border: var(--border-width-default) solid var(--yellow-border); }
+.cpub-status-reviewed { background: var(--blue-bg, var(--accent-bg)); color: var(--blue, var(--accent)); border: var(--border-width-default) solid var(--blue-border, var(--accent-border)); }
+.cpub-status-resolved { background: var(--green-bg); color: var(--green); border: var(--border-width-default) solid var(--green-border); }
+.cpub-status-dismissed { background: var(--surface2); color: var(--text-faint); border: var(--border-width-default) solid var(--border2); }
+.cpub-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); }
+.cpub-report-date { font-size: 11px; color: var(--text-faint); margin-left: auto; font-family: var(--font-mono); }
+.cpub-report-reason { font-size: 13px; margin-bottom: 4px; }
+.cpub-report-desc { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin-bottom: 8px; }
+.cpub-report-meta { display: flex; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
+.cpub-report-meta-item { font-size: 10px; font-family: var(--font-mono); color: var(--text-faint); }
+.cpub-report-meta-item code { background: var(--surface2); padding: 1px 4px; }
+.cpub-report-resolution { font-size: 11px; color: var(--text-dim); font-style: italic; margin-bottom: 8px; }
+.cpub-report-resolution i { color: var(--text-faint); margin-right: 4px; }
+.cpub-report-actions { display: flex; gap: 6px; padding-top: 8px; border-top: var(--border-width-default) solid var(--border2); }
+.cpub-report-select-all { display: flex; align-items: center; gap: 6px; padding: 8px 0; font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); }
+.cpub-report-select-all label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
+.cpub-report-select-all input { cursor: pointer; accent-color: var(--accent); }
+.cpub-admin-empty { color: var(--text-faint); text-align: center; padding: var(--space-8) 0; }
 </style>

package/pages/admin/settings.vue

@@ -3,7 +3,7 @@ definePageMeta({ layout: 'admin', middleware: 'auth' });
 
 useSeoMeta({ title: `Settings — Admin — ${useSiteName()}` });
 
-const { data: settings, refresh } = await useFetch<Record<string, string>>('/api/admin/settings');
+const { data: settings, pending, refresh } = await useFetch<Record<string, string>>('/api/admin/settings');
 
 const saving = ref(false);
 const editKey = ref('');
@@ -58,7 +58,11 @@ async function addSetting(): Promise<void> {
   <div class="admin-settings">
     <h1 class="admin-page-title">Instance Settings</h1>
 
-    <div class="settings-list" v-if="settings">
+    <div v-if="pending" class="admin-loading">
+      <i class="fa-solid fa-circle-notch fa-spin"></i> Loading settings...
+    </div>
+    <template v-else-if="settings">
+    <div class="settings-list">
       <div v-for="item in knownSettings" :key="item.key" class="settings-row">
         <div class="settings-label">
           <span class="settings-key">{{ item.label }}</span>
@@ -78,7 +82,7 @@ async function addSetting(): Promise<void> {
       </div>
     </div>
 
-    <div class="settings-custom" v-if="settings">
+    <div class="settings-custom">
       <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)">
@@ -105,8 +109,8 @@ async function addSetting(): Promise<void> {
         <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>
+    </template>
+    <p v-else class="admin-empty">No settings configured.</p>
   </div>
 </template>
 
@@ -154,6 +158,14 @@ async function addSetting(): Promise<void> {
   background: var(--surface);
 }
 
+.admin-loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: var(--space-8, 32px);
+  color: var(--text-faint);
+}
+
 .admin-empty {
   color: var(--text-faint);
   text-align: center;

package/pages/admin/theme.vue

@@ -4,7 +4,7 @@ import { BUILT_IN_THEMES } from '@commonpub/ui';
 definePageMeta({ layout: 'admin', middleware: 'auth' });
 useSeoMeta({ title: `Theme — Admin — ${useSiteName()}` });
 
-const { data: settings, refresh } = await useFetch<Record<string, unknown>>('/api/admin/settings');
+const { data: settings, pending, refresh } = await useFetch<Record<string, unknown>>('/api/admin/settings');
 
 const saving = ref(false);
 const saveSuccess = ref(false);
@@ -156,8 +156,10 @@ function removeTokenOverride(key: string): void {
       <i class="fa-solid fa-check"></i> Saved
     </div>
 
+    <p v-if="pending" class="admin-empty"><i class="fa-solid fa-circle-notch fa-spin"></i> Loading theme settings...</p>
+
     <!-- Theme Families -->
-    <section class="admin-theme-families">
+    <section v-else class="admin-theme-families">
       <div v-for="family in families" :key="family.id" class="admin-family-card" :class="{ active: activeFamily === family.id }" >
         <button
           class="admin-family-select"
@@ -285,7 +287,7 @@ function removeTokenOverride(key: string): void {
   right: var(--space-4);
   padding: var(--space-2) var(--space-4);
   background: var(--green);
-  color: #fff;
+  color: var(--color-text-inverse);
   font-size: var(--text-sm);
   font-weight: var(--font-weight-semibold);
   z-index: var(--z-toast);

package/pages/auth/forgot-password.vue

@@ -16,9 +16,9 @@ async function handleSubmit(): Promise<void> {
   loading.value = true;
 
   try {
-    await $fetch('/api/auth/forgot-password', {
+    await $fetch('/api/auth/request-password-reset', {
       method: 'POST',
-      body: { email: email.value },
+      body: { email: email.value, redirectTo: '/auth/reset-password' },
     });
     success.value = true;
   } catch (err: unknown) {
@@ -31,47 +31,47 @@ async function handleSubmit(): Promise<void> {
 </script>
 
 <template>
-  <div class="forgot-page">
-    <h1 class="forgot-title">Forgot Password</h1>
+  <div class="cpub-forgot-page">
+    <h1 class="cpub-forgot-title">Forgot Password</h1>
 
     <template v-if="success">
-      <div class="forgot-success">
+      <div class="cpub-forgot-success">
         <i class="fa-solid fa-envelope" style="font-size: 24px; color: var(--accent); margin-bottom: 12px;"></i>
-        <p class="forgot-success-text">
+        <p class="cpub-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">
+      <NuxtLink to="/auth/login" class="cpub-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>
+      <p class="cpub-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>
+      <form class="cpub-forgot-form" @submit.prevent="handleSubmit" aria-label="Forgot password form">
+        <div v-if="error" class="cpub-form-error" role="alert">{{ error }}</div>
 
-        <div class="field">
-          <label for="email" class="field-label">Email</label>
+        <div class="cpub-field">
+          <label for="email" class="cpub-field-label">Email</label>
           <input
             id="email"
             v-model="email"
             type="email"
-            class="field-input"
+            class="cpub-field-input"
             autocomplete="email"
             required
             placeholder="you@example.com"
           />
         </div>
 
-        <button type="submit" class="submit-btn" :disabled="loading">
+        <button type="submit" class="cpub-submit-btn" :disabled="loading">
           {{ loading ? 'Sending...' : 'Send Reset Link' }}
         </button>
       </form>
 
-      <p class="forgot-footer">
+      <p class="cpub-forgot-footer">
         Remember your password?
         <NuxtLink to="/auth/login">Log in</NuxtLink>
       </p>
@@ -80,24 +80,24 @@ async function handleSubmit(): Promise<void> {
 </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; }
+.cpub-forgot-page { width: 100%; }
+.cpub-forgot-title { font-size: 18px; font-weight: 600; margin-bottom: var(--space-3); }
+.cpub-forgot-desc { font-size: 13px; color: var(--text-dim); margin-bottom: var(--space-5); line-height: 1.6; }
+.cpub-forgot-form { display: flex; flex-direction: column; gap: var(--space-4); }
+.cpub-forgot-success { text-align: center; padding: var(--space-5) 0; }
+.cpub-forgot-success-text { font-size: 13px; color: var(--text-dim); line-height: 1.6; }
+.cpub-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); }
+.cpub-back-link:hover { text-decoration: underline; }
+.cpub-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; }
+.cpub-field { display: flex; flex-direction: column; gap: 4px; }
+.cpub-field-label { font-size: 12px; font-weight: 500; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
+.cpub-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; }
+.cpub-field-input::placeholder { color: var(--text-faint); }
+.cpub-field-input:focus { border-color: var(--accent); }
+.cpub-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; }
+.cpub-submit-btn:hover:not(:disabled) { box-shadow: var(--shadow-md); transform: translate(-1px, -1px); }
+.cpub-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }
+.cpub-forgot-footer { text-align: center; font-size: 12px; color: var(--text-dim); margin-top: var(--space-4); }
+.cpub-forgot-footer a { color: var(--accent); text-decoration: none; }
+.cpub-forgot-footer a:hover { text-decoration: underline; }
 </style>

package/pages/auth/login.vue

@@ -6,7 +6,7 @@ useSeoMeta({
   description: 'Log in to your CommonPub account.',
 });
 
-const { signIn } = useAuth();
+const { signIn, refreshSession } = useAuth();
 const { federation } = useFeatures();
 const route = useRoute();
 
@@ -51,12 +51,13 @@ async function handleSubmit(): Promise<void> {
       });
       await navigateTo('/dashboard');
     } else {
-      // Normal login flow
-      const { email } = await $fetch<{ email: string }>('/api/resolve-identity', {
+      // Normal login flow — username→email resolved server-side
+      await $fetch('/api/auth/sign-in-username', {
         method: 'POST',
-        body: { identity: identity.value },
+        body: { identity: identity.value, password: password.value },
+        credentials: 'include',
       });
-      await signIn(email, password.value);
+      await refreshSession();
       await navigateTo(redirectTo.value);
     }
   } catch (err: unknown) {

package/pages/auth/reset-password.vue

@@ -8,6 +8,7 @@ useSeoMeta({
 
 const route = useRoute();
 const token = computed(() => (route.query.token as string) || '');
+const tokenError = computed(() => (route.query.error as string) || '');
 
 const password = ref('');
 const confirmPassword = ref('');
@@ -49,32 +50,42 @@ async function handleSubmit(): Promise<void> {
 </script>
 
 <template>
-  <div class="reset-page">
-    <h1 class="reset-title">Reset Password</h1>
+  <div class="cpub-reset-page">
+    <h1 class="cpub-reset-title">Reset Password</h1>
 
     <template v-if="success">
-      <div class="reset-success">
+      <div class="cpub-reset-success">
         <i class="fa-solid fa-check-circle" style="font-size: 24px; color: var(--green); margin-bottom: 12px;"></i>
-        <p class="reset-success-text">Your password has been reset successfully.</p>
+        <p class="cpub-reset-success-text">Your password has been reset successfully.</p>
       </div>
-      <NuxtLink to="/auth/login" class="back-link">
+      <NuxtLink to="/auth/login" class="cpub-back-link">
         <i class="fa-solid fa-arrow-right"></i> Go to login
       </NuxtLink>
     </template>
 
+    <template v-else-if="tokenError">
+      <div class="cpub-reset-error-state">
+        <i class="fa-solid fa-circle-xmark" style="font-size: 24px; color: var(--red); margin-bottom: 12px;"></i>
+        <p class="cpub-reset-success-text">This reset link is invalid or has expired.</p>
+      </div>
+      <NuxtLink to="/auth/forgot-password" class="cpub-back-link">
+        <i class="fa-solid fa-arrow-left"></i> Request a new link
+      </NuxtLink>
+    </template>
+
     <template v-else>
-      <p class="reset-desc">Enter your new password below.</p>
+      <p class="cpub-reset-desc">Enter your new password below.</p>
 
-      <form class="reset-form" @submit.prevent="handleSubmit" aria-label="Reset password form">
-        <div v-if="error" class="form-error" role="alert">{{ error }}</div>
+      <form class="cpub-reset-form" @submit.prevent="handleSubmit" aria-label="Reset password form">
+        <div v-if="error" class="cpub-form-error" role="alert">{{ error }}</div>
 
-        <div class="field">
-          <label for="password" class="field-label">New Password</label>
+        <div class="cpub-field">
+          <label for="password" class="cpub-field-label">New Password</label>
           <input
             id="password"
             v-model="password"
             type="password"
-            class="field-input"
+            class="cpub-field-input"
             autocomplete="new-password"
             required
             placeholder="At least 8 characters"
@@ -82,20 +93,20 @@ async function handleSubmit(): Promise<void> {
           />
         </div>
 
-        <div class="field">
-          <label for="confirm" class="field-label">Confirm Password</label>
+        <div class="cpub-field">
+          <label for="confirm" class="cpub-field-label">Confirm Password</label>
           <input
             id="confirm"
             v-model="confirmPassword"
             type="password"
-            class="field-input"
+            class="cpub-field-input"
             autocomplete="new-password"
             required
             placeholder="Confirm your password"
           />
         </div>
 
-        <button type="submit" class="submit-btn" :disabled="loading">
+        <button type="submit" class="cpub-submit-btn" :disabled="loading">
           {{ loading ? 'Resetting...' : 'Reset Password' }}
         </button>
       </form>
@@ -104,21 +115,22 @@ async function handleSubmit(): Promise<void> {
 </template>
 
 <style scoped>
-.reset-page { width: 100%; }
-.reset-title { font-size: 18px; font-weight: 600; margin-bottom: var(--space-3); }
-.reset-desc { font-size: 13px; color: var(--text-dim); margin-bottom: var(--space-5); line-height: 1.6; }
-.reset-form { display: flex; flex-direction: column; gap: var(--space-4); }
-.reset-success { text-align: center; padding: var(--space-5) 0; }
-.reset-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; }
+.cpub-reset-page { width: 100%; }
+.cpub-reset-title { font-size: 18px; font-weight: 600; margin-bottom: var(--space-3); }
+.cpub-reset-desc { font-size: 13px; color: var(--text-dim); margin-bottom: var(--space-5); line-height: 1.6; }
+.cpub-reset-form { display: flex; flex-direction: column; gap: var(--space-4); }
+.cpub-reset-success { text-align: center; padding: var(--space-5) 0; }
+.cpub-reset-success-text { font-size: 13px; color: var(--text-dim); line-height: 1.6; }
+.cpub-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); }
+.cpub-back-link:hover { text-decoration: underline; }
+.cpub-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; }
+.cpub-field { display: flex; flex-direction: column; gap: 4px; }
+.cpub-field-label { font-size: 12px; font-weight: 500; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
+.cpub-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; }
+.cpub-field-input::placeholder { color: var(--text-faint); }
+.cpub-field-input:focus { border-color: var(--accent); }
+.cpub-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; }
+.cpub-submit-btn:hover:not(:disabled) { box-shadow: var(--shadow-md); transform: translate(-1px, -1px); }
+.cpub-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }
+.cpub-reset-error-state { text-align: center; padding: var(--space-5) 0; }
 </style>