@commonpub/layer 0.1.0

package/pages/settings/account.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+definePageMeta({ middleware: 'auth' });
+
+const { user } = useAuth();
+const { show: toast } = useToast();
+
+const currentPassword = ref('');
+const newPassword = ref('');
+const passwordLoading = ref(false);
+const deleteConfirm = ref(false);
+const deleteConfirmText = ref('');
+const deleteLoading = ref(false);
+
+async function handlePasswordChange(): Promise<void> {
+  if (!currentPassword.value || !newPassword.value) return;
+  if (newPassword.value.length < 8) {
+    toast('Password must be at least 8 characters', 'error');
+    return;
+  }
+
+  passwordLoading.value = true;
+  try {
+    await $fetch('/api/auth/change-password', {
+      method: 'POST',
+      body: {
+        currentPassword: currentPassword.value,
+        newPassword: newPassword.value,
+      },
+      credentials: 'include',
+    });
+    toast('Password updated successfully', 'success');
+    currentPassword.value = '';
+    newPassword.value = '';
+  } catch (err: unknown) {
+    const msg = err instanceof Error ? err.message : 'Failed to update password';
+    toast(msg, 'error');
+  } finally {
+    passwordLoading.value = false;
+  }
+}
+
+const canDelete = computed(() => deleteConfirmText.value === user.value?.username);
+
+async function handleDeleteAccount(): Promise<void> {
+  if (!deleteConfirm.value) {
+    deleteConfirm.value = true;
+    return;
+  }
+  if (!canDelete.value) return;
+
+  deleteLoading.value = true;
+  try {
+    await $fetch('/api/auth/delete-user', {
+      method: 'POST',
+      credentials: 'include',
+    });
+    toast('Account deleted', 'success');
+    await navigateTo('/');
+  } catch (err: unknown) {
+    const msg = err instanceof Error ? err.message : 'Failed to delete account';
+    toast(msg, 'error');
+    deleteConfirm.value = false;
+    deleteConfirmText.value = '';
+  } finally {
+    deleteLoading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div>
+    <h2 class="cpub-section-title-lg">Account Settings</h2>
+
+    <div class="cpub-form-group">
+      <label class="cpub-form-label">Email</label>
+      <input type="email" class="cpub-input" :value="user?.email" disabled />
+      <span class="cpub-form-hint">Contact support to change your email.</span>
+    </div>
+
+    <form class="cpub-form-group" @submit.prevent="handlePasswordChange">
+      <label class="cpub-form-label">Change Password</label>
+      <input v-model="currentPassword" type="password" class="cpub-input" placeholder="Current password" required />
+      <input v-model="newPassword" type="password" class="cpub-input cpub-mt-2" placeholder="New password (min 8 characters)" required minlength="8" />
+      <button type="submit" class="cpub-btn cpub-btn-sm cpub-mt-2" :disabled="passwordLoading">
+        {{ passwordLoading ? 'Updating...' : 'Update Password' }}
+      </button>
+    </form>
+
+    <hr class="cpub-danger-divider" />
+
+    <div>
+      <h3 class="cpub-danger-title">Danger Zone</h3>
+      <p class="cpub-danger-desc">
+        Deleting your account is permanent and cannot be undone.
+      </p>
+
+      <template v-if="deleteConfirm">
+        <div class="cpub-form-group">
+          <label class="cpub-form-label">Type your username <strong>{{ user?.username ?? '' }}</strong> to confirm</label>
+          <input v-model="deleteConfirmText" type="text" class="cpub-input" :placeholder="user?.username" autocomplete="off" />
+        </div>
+        <div class="cpub-danger-actions">
+          <button
+            class="cpub-btn cpub-btn-sm cpub-btn-danger"
+            :disabled="!canDelete || deleteLoading"
+            @click="handleDeleteAccount"
+          >
+            <i class="fa-solid fa-trash"></i>
+            {{ deleteLoading ? 'Deleting...' : 'Permanently Delete Account' }}
+          </button>
+          <button class="cpub-btn cpub-btn-sm" @click="deleteConfirm = false; deleteConfirmText = ''">
+            Cancel
+          </button>
+        </div>
+      </template>
+      <button
+        v-else
+        class="cpub-btn cpub-btn-sm cpub-btn-danger"
+        @click="deleteConfirm = true"
+      >
+        <i class="fa-solid fa-trash"></i> Delete Account
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-mt-2 { margin-top: var(--space-2); }
+
+.cpub-danger-divider {
+  border: none;
+  border-top: var(--border-width-default) solid var(--red-border);
+  margin: var(--space-8) 0 var(--space-4);
+}
+
+.cpub-danger-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--red);
+  margin-bottom: var(--space-2);
+}
+
+.cpub-danger-desc {
+  font-size: 12px;
+  color: var(--text-dim);
+  margin-bottom: var(--space-3);
+}
+
+.cpub-danger-actions {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+}
+
+.cpub-btn-danger {
+  background: var(--red-bg);
+  color: var(--red);
+  border-color: var(--red);
+}
+
+.cpub-btn-danger:hover:not(:disabled) {
+  background: var(--red);
+  color: var(--color-text-inverse);
+}
+
+.cpub-btn-danger:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+</style>

package/pages/settings/appearance.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+definePageMeta({ middleware: 'auth' });
+
+const { themeId: theme, setTheme } = useTheme();
+const themes = [
+  { id: 'base', name: 'Light', desc: 'Sharp corners, offset shadows' },
+  { id: 'dark', name: 'Dark', desc: 'Dark surfaces, same aesthetic' },
+];
+</script>
+
+<template>
+  <div>
+    <h2 class="cpub-section-title-lg">Appearance</h2>
+
+    <div class="cpub-theme-grid">
+      <button
+        v-for="t in themes"
+        :key="t.id"
+        class="cpub-theme-card"
+        :class="{ active: theme === t.id }"
+        @click="setTheme(t.id)"
+      >
+        <div class="cpub-theme-preview" :data-theme="t.id">
+          <div class="cpub-theme-swatch"></div>
+        </div>
+        <div class="cpub-theme-info">
+          <span class="cpub-theme-name">{{ t.name }}</span>
+          <span class="cpub-theme-desc">{{ t.desc }}</span>
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-theme-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.cpub-theme-card {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border2);
+  padding: 12px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.cpub-theme-card.active {
+  border-color: var(--accent);
+  box-shadow: var(--shadow-accent);
+}
+
+.cpub-theme-card:hover {
+  border-color: var(--border);
+}
+
+.cpub-theme-preview {
+  height: 60px;
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border2);
+  margin-bottom: 8px;
+}
+
+.cpub-theme-name {
+  font-size: 13px;
+  font-weight: 600;
+  display: block;
+}
+
+.cpub-theme-desc {
+  font-size: 11px;
+  color: var(--text-dim);
+}
+
+@media (max-width: 480px) {
+  .cpub-theme-grid { grid-template-columns: 1fr; }
+}
+</style>

package/pages/settings/index.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+definePageMeta({ middleware: 'auth' });
+useSeoMeta({ title: `Settings — ${useSiteName()}` });
+
+// Redirect bare /settings to /settings/profile on mount
+onMounted(() => {
+  const route = useRoute();
+  if (route.path === '/settings') {
+    navigateTo('/settings/profile', { replace: true });
+  }
+});
+</script>
+
+<template>
+  <div class="cpub-settings-page">
+    <div class="cpub-settings-layout">
+      <aside class="cpub-settings-nav">
+        <h2 class="cpub-sidebar-heading">Settings</h2>
+        <nav>
+          <NuxtLink to="/settings/profile" class="cpub-settings-link">
+            <i class="fa-solid fa-user" style="width: 14px"></i> Profile
+          </NuxtLink>
+          <NuxtLink to="/settings/account" class="cpub-settings-link">
+            <i class="fa-solid fa-shield-halved" style="width: 14px"></i> Account
+          </NuxtLink>
+          <NuxtLink to="/settings/notifications" class="cpub-settings-link">
+            <i class="fa-solid fa-bell" style="width: 14px"></i> Notifications
+          </NuxtLink>
+          <NuxtLink to="/settings/appearance" class="cpub-settings-link">
+            <i class="fa-solid fa-palette" style="width: 14px"></i> Appearance
+          </NuxtLink>
+        </nav>
+      </aside>
+      <div class="cpub-settings-content">
+        <NuxtPage />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-settings-layout {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  gap: 32px;
+}
+
+.cpub-settings-nav nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.cpub-settings-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  font-size: 13px;
+  color: var(--text-dim);
+  text-decoration: none;
+  border: var(--border-width-default) solid transparent;
+}
+
+.cpub-settings-link:hover {
+  background: var(--surface2);
+  color: var(--text);
+}
+
+.cpub-settings-link.router-link-active {
+  background: var(--accent-bg);
+  border-color: var(--accent-border);
+  color: var(--accent);
+}
+
+@media (max-width: 768px) {
+  .cpub-settings-layout {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

package/pages/settings/notifications.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+definePageMeta({ middleware: 'auth' });
+
+const { show: toast } = useToast();
+const saving = ref(false);
+
+const prefs = ref({
+  emailLikes: true,
+  emailComments: true,
+  emailFollows: true,
+  emailMentions: true,
+  emailDigest: false,
+});
+
+// Load current preferences from profile
+import type { Serialized, UserProfile } from '@commonpub/server';
+
+const { data: profile } = await useFetch<Serialized<UserProfile> & { notificationPrefs?: Record<string, boolean> }>('/api/profile');
+if (profile.value?.notificationPrefs) {
+  const saved = profile.value.notificationPrefs;
+  for (const key of Object.keys(prefs.value)) {
+    if (key in saved) {
+      (prefs.value as Record<string, boolean>)[key] = saved[key];
+    }
+  }
+}
+
+const labels: Record<string, string> = {
+  emailLikes: 'Email when someone likes your content',
+  emailComments: 'Email when someone comments on your content',
+  emailFollows: 'Email when someone follows you',
+  emailMentions: 'Email when someone mentions you',
+  emailDigest: 'Weekly digest email',
+};
+
+async function handleSave(): Promise<void> {
+  saving.value = true;
+  try {
+    await $fetch('/api/profile', {
+      method: 'PUT',
+      body: { notificationPrefs: prefs.value },
+    });
+    toast('Preferences saved', 'success');
+  } catch (err: unknown) {
+    const msg = err instanceof Error ? err.message : 'Failed to save preferences';
+    toast(msg, 'error');
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<template>
+  <div>
+    <h2 class="cpub-section-title-lg">Notification Preferences</h2>
+
+    <div v-for="(val, key) in prefs" :key="key" style="margin-bottom: 12px">
+      <label class="cpub-checkbox">
+        <input type="checkbox" v-model="prefs[key as keyof typeof prefs]" />
+        {{ labels[key] || key }}
+      </label>
+    </div>
+
+    <button class="cpub-btn cpub-btn-primary cpub-btn-sm" style="margin-top: 16px" :disabled="saving" @click="handleSave">
+      {{ saving ? 'Saving...' : 'Save Preferences' }}
+    </button>
+  </div>
+</template>