@commonpub/layer 0.1.0

package/pages/auth/reset-password.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'auth' });
+
+useSeoMeta({
+  title: `Reset Password — ${useSiteName()}`,
+  description: 'Set a new password for your CommonPub account.',
+});
+
+const route = useRoute();
+const token = computed(() => (route.query.token as string) || '');
+
+const password = ref('');
+const confirmPassword = ref('');
+const error = ref('');
+const success = ref(false);
+const loading = ref(false);
+
+async function handleSubmit(): Promise<void> {
+  error.value = '';
+
+  if (password.value.length < 8) {
+    error.value = 'Password must be at least 8 characters.';
+    return;
+  }
+  if (password.value !== confirmPassword.value) {
+    error.value = 'Passwords do not match.';
+    return;
+  }
+  if (!token.value) {
+    error.value = 'Invalid or expired reset link.';
+    return;
+  }
+
+  loading.value = true;
+
+  try {
+    await $fetch('/api/auth/reset-password', {
+      method: 'POST',
+      body: { token: token.value, newPassword: password.value },
+    });
+    success.value = true;
+  } catch (err: unknown) {
+    const message = (err as { data?: { message?: string } })?.data?.message;
+    error.value = message || 'Failed to reset password. The link may have expired.';
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="reset-page">
+    <h1 class="reset-title">Reset Password</h1>
+
+    <template v-if="success">
+      <div class="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>
+      </div>
+      <NuxtLink to="/auth/login" class="back-link">
+        <i class="fa-solid fa-arrow-right"></i> Go to login
+      </NuxtLink>
+    </template>
+
+    <template v-else>
+      <p class="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>
+
+        <div class="field">
+          <label for="password" class="field-label">New Password</label>
+          <input
+            id="password"
+            v-model="password"
+            type="password"
+            class="field-input"
+            autocomplete="new-password"
+            required
+            placeholder="At least 8 characters"
+            minlength="8"
+          />
+        </div>
+
+        <div class="field">
+          <label for="confirm" class="field-label">Confirm Password</label>
+          <input
+            id="confirm"
+            v-model="confirmPassword"
+            type="password"
+            class="field-input"
+            autocomplete="new-password"
+            required
+            placeholder="Confirm your password"
+          />
+        </div>
+
+        <button type="submit" class="submit-btn" :disabled="loading">
+          {{ loading ? 'Resetting...' : 'Reset Password' }}
+        </button>
+      </form>
+    </template>
+  </div>
+</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; }
+</style>

package/pages/auth/verify-email.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'auth' });
+
+useSeoMeta({
+  title: `Verify Email — ${useSiteName()}`,
+  description: 'Verify your CommonPub email address.',
+});
+
+const route = useRoute();
+const token = computed(() => (route.query.token as string) || '');
+
+const status = ref<'verifying' | 'success' | 'error' | 'no-token'>('verifying');
+const errorMessage = ref('');
+
+if (!token.value) {
+  status.value = 'no-token';
+} else {
+  onMounted(async () => {
+    try {
+      await $fetch('/api/auth/verify-email', {
+        method: 'POST',
+        body: { token: token.value },
+      });
+      status.value = 'success';
+    } catch (err: unknown) {
+      const message = (err as { data?: { message?: string } })?.data?.message;
+      errorMessage.value = message || 'Verification failed. The link may have expired.';
+      status.value = 'error';
+    }
+  });
+}
+</script>
+
+<template>
+  <div class="verify-page">
+    <h1 class="verify-title">Email Verification</h1>
+
+    <!-- Verifying -->
+    <div v-if="status === 'verifying'" class="verify-status">
+      <i class="fa-solid fa-circle-notch fa-spin" style="font-size: 24px; color: var(--accent); margin-bottom: 12px;"></i>
+      <p class="verify-text">Verifying your email address...</p>
+    </div>
+
+    <!-- Success -->
+    <div v-else-if="status === 'success'" class="verify-status">
+      <i class="fa-solid fa-check-circle" style="font-size: 24px; color: var(--green); margin-bottom: 12px;"></i>
+      <p class="verify-text">Your email has been verified successfully!</p>
+      <NuxtLink to="/auth/login" class="verify-link">
+        <i class="fa-solid fa-arrow-right"></i> Continue to login
+      </NuxtLink>
+    </div>
+
+    <!-- Error -->
+    <div v-else-if="status === 'error'" class="verify-status">
+      <i class="fa-solid fa-circle-xmark" style="font-size: 24px; color: var(--red); margin-bottom: 12px;"></i>
+      <p class="verify-text">{{ errorMessage }}</p>
+      <NuxtLink to="/auth/login" class="verify-link">
+        <i class="fa-solid fa-arrow-left"></i> Back to login
+      </NuxtLink>
+    </div>
+
+    <!-- No token -->
+    <div v-else class="verify-status">
+      <i class="fa-solid fa-circle-exclamation" style="font-size: 24px; color: var(--yellow); margin-bottom: 12px;"></i>
+      <p class="verify-text">No verification token found. Please check the link in your email.</p>
+      <NuxtLink to="/auth/login" class="verify-link">
+        <i class="fa-solid fa-arrow-left"></i> Back to login
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.verify-page { width: 100%; }
+.verify-title { font-size: 18px; font-weight: 600; margin-bottom: var(--space-5); }
+.verify-status { text-align: center; padding: var(--space-5) 0; display: flex; flex-direction: column; align-items: center; }
+.verify-text { font-size: 13px; color: var(--text-dim); line-height: 1.6; max-width: 300px; }
+.verify-link { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--accent); text-decoration: none; margin-top: var(--space-4); }
+.verify-link:hover { text-decoration: underline; }
+</style>

package/pages/cert/[code].vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+const route = useRoute();
+const code = route.params.code as string;
+
+const { data: certData } = useLazyFetch(`/api/cert/${code}`);
+
+useSeoMeta({
+  title: () => certData.value ? `Certificate — ${certData.value.path.title} — ${useSiteName()}` : `Certificate — ${useSiteName()}`,
+  description: () => certData.value ? `Certificate of completion for ${certData.value.path.title}` : '',
+});
+</script>
+
+<template>
+  <div class="cert-page">
+    <div v-if="certData" class="cert-card">
+      <!-- Certificate Badge -->
+      <div class="cert-badge-wrap">
+        <div class="cert-badge">
+          <i class="fa-solid fa-award"></i>
+        </div>
+      </div>
+
+      <div class="cert-eyebrow">Certificate of Completion</div>
+      <h1 class="cert-title">{{ certData.path.title }}</h1>
+
+      <div class="cert-recipient">
+        <div class="cert-recipient-label">Awarded to</div>
+        <NuxtLink :to="`/u/${certData.user.username}`" class="cert-recipient-name">
+          {{ certData.user.displayName || certData.user.username }}
+        </NuxtLink>
+      </div>
+
+      <div class="cert-details">
+        <div class="cert-detail">
+          <span class="cert-detail-label">Completed</span>
+          <span class="cert-detail-value">
+            {{ new Date(certData.certificate.issuedAt).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) }}
+          </span>
+        </div>
+        <div class="cert-detail">
+          <span class="cert-detail-label">Verification Code</span>
+          <span class="cert-detail-value cert-code">{{ certData.certificate.verificationCode }}</span>
+        </div>
+      </div>
+
+      <div class="cert-footer">
+        <NuxtLink :to="`/learn/${certData.path.slug}`" class="cert-path-link">
+          <i class="fa-solid fa-graduation-cap"></i> View Learning Path
+        </NuxtLink>
+      </div>
+
+      <!-- Verified stamp -->
+      <div class="cert-verified">
+        <i class="fa-solid fa-circle-check"></i> Verified
+      </div>
+    </div>
+
+    <div v-else class="cert-not-found">
+      <div class="cert-not-found-icon"><i class="fa-solid fa-circle-xmark"></i></div>
+      <h1>Certificate Not Found</h1>
+      <p>The verification code could not be found. Please check the code and try again.</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cert-page {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 48px 24px;
+}
+
+.cert-card {
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  padding: 40px;
+  text-align: center;
+  position: relative;
+  box-shadow: var(--shadow-xl);
+}
+
+.cert-badge-wrap { margin-bottom: 20px; }
+
+.cert-badge {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: var(--yellow-bg);
+  border: 3px solid var(--yellow);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  color: var(--yellow);
+}
+
+.cert-eyebrow {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  font-weight: 700;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  margin-bottom: 12px;
+}
+
+.cert-title {
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin-bottom: 24px;
+  line-height: 1.2;
+}
+
+.cert-recipient { margin-bottom: 24px; padding: 16px 0; border-top: var(--border-width-default) solid var(--border); border-bottom: var(--border-width-default) solid var(--border); }
+.cert-recipient-label { font-size: 10px; font-family: var(--font-mono); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; }
+.cert-recipient-name { font-size: 20px; font-weight: 700; color: var(--accent); text-decoration: none; }
+.cert-recipient-name:hover { text-decoration: underline; }
+
+.cert-details { display: flex; gap: 24px; justify-content: center; margin-bottom: 24px; }
+.cert-detail { display: flex; flex-direction: column; gap: 4px; }
+.cert-detail-label { font-size: 10px; font-family: var(--font-mono); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }
+.cert-detail-value { font-size: 13px; color: var(--text); }
+.cert-code { font-family: var(--font-mono); font-weight: 600; color: var(--accent); background: var(--accent-bg); padding: 2px 8px; border: var(--border-width-default) solid var(--accent-border); }
+
+.cert-footer { margin-top: 8px; }
+.cert-path-link { font-size: 12px; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
+.cert-path-link:hover { text-decoration: underline; }
+
+.cert-verified {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--green);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.cert-not-found { text-align: center; padding: 64px 0; color: var(--text-dim); }
+.cert-not-found-icon { font-size: 40px; color: var(--red); margin-bottom: 16px; }
+.cert-not-found h1 { font-size: 20px; margin-bottom: 8px; }
+.cert-not-found p { font-size: 13px; }
+
+@media (max-width: 768px) {
+  .cert-page { padding: 24px 16px; }
+  .cert-card { padding: 24px 16px; }
+  .cert-title { font-size: 1.125rem; }
+  .cert-recipient-name { font-size: 1rem; }
+  .cert-details { flex-direction: column; gap: 12px; }
+}
+</style>

package/pages/contests/[slug]/edit.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+definePageMeta({ middleware: 'auth' });
+
+const route = useRoute();
+const slug = route.params.slug as string;
+const toast = useToast();
+const { extract: extractError } = useApiError();
+
+const { data: contest, refresh } = useLazyFetch(`/api/contests/${slug}`);
+useSeoMeta({ title: () => `Edit: ${contest.value?.title ?? 'Contest'} — ${useSiteName()}` });
+
+const saving = ref(false);
+const title = ref('');
+const description = ref('');
+const rules = ref('');
+const startDate = ref('');
+const endDate = ref('');
+
+// Load current data
+watch(contest, (c) => {
+  if (!c) return;
+  title.value = c.title ?? '';
+  description.value = c.description ?? '';
+  rules.value = c.rules ?? '';
+  startDate.value = c.startDate ? new Date(c.startDate).toISOString().slice(0, 16) : '';
+  endDate.value = c.endDate ? new Date(c.endDate).toISOString().slice(0, 16) : '';
+}, { immediate: true });
+
+async function handleSave(): Promise<void> {
+  saving.value = true;
+  try {
+    await $fetch(`/api/contests/${slug}`, {
+      method: 'PUT',
+      body: {
+        title: title.value,
+        description: description.value || undefined,
+        rules: rules.value || undefined,
+        startDate: startDate.value ? new Date(startDate.value).toISOString() : undefined,
+        endDate: endDate.value ? new Date(endDate.value).toISOString() : undefined,
+      },
+    });
+    toast.success('Contest updated');
+    await refresh();
+  } catch (err: unknown) {
+    toast.error(extractError(err));
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function transitionStatus(newStatus: string): Promise<void> {
+  if (!confirm(`Change contest status to "${newStatus}"?`)) return;
+  try {
+    await $fetch(`/api/contests/${slug}/transition`, {
+      method: 'POST',
+      body: { status: newStatus },
+    });
+    toast.success(`Status changed to ${newStatus}`);
+    await refresh();
+  } catch (err: unknown) {
+    toast.error(extractError(err));
+  }
+}
+</script>
+
+<template>
+  <div v-if="contest" class="contest-edit">
+    <NuxtLink :to="`/contests/${slug}`" class="cpub-back-link"><i class="fa-solid fa-arrow-left"></i> Back to contest</NuxtLink>
+    <h1 class="page-title">Edit Contest</h1>
+    <p class="page-subtitle">
+      Status: <span class="status-badge" :class="`status-${contest.status}`">{{ contest.status }}</span>
+    </p>
+
+    <form class="edit-form" @submit.prevent="handleSave">
+      <section class="form-section">
+        <h2 class="form-section-title">Details</h2>
+        <div class="form-field">
+          <label class="form-label">Title</label>
+          <input v-model="title" type="text" class="form-input" />
+        </div>
+        <div class="form-field">
+          <label class="form-label">Description</label>
+          <textarea v-model="description" class="form-textarea" rows="3" />
+        </div>
+        <div class="form-field">
+          <label class="form-label">Rules</label>
+          <textarea v-model="rules" class="form-textarea" rows="4" />
+        </div>
+      </section>
+
+      <section class="form-section">
+        <h2 class="form-section-title">Schedule</h2>
+        <div class="form-row">
+          <div class="form-field">
+            <label class="form-label">Start Date</label>
+            <input v-model="startDate" type="datetime-local" class="form-input" />
+          </div>
+          <div class="form-field">
+            <label class="form-label">End Date</label>
+            <input v-model="endDate" type="datetime-local" class="form-input" />
+          </div>
+        </div>
+      </section>
+
+      <section class="form-section">
+        <h2 class="form-section-title">Status Transitions</h2>
+        <div class="status-actions">
+          <button v-if="contest.status === 'upcoming'" type="button" class="cpub-btn" style="color: var(--green); border-color: var(--green-border);" @click="transitionStatus('active')">
+            <i class="fa-solid fa-play"></i> Start Contest
+          </button>
+          <button v-if="contest.status === 'active'" type="button" class="cpub-btn" style="color: var(--yellow); border-color: var(--yellow-border);" @click="transitionStatus('judging')">
+            <i class="fa-solid fa-gavel"></i> Begin Judging
+          </button>
+          <button v-if="contest.status === 'judging'" type="button" class="cpub-btn" style="color: var(--accent); border-color: var(--accent-border);" @click="transitionStatus('completed')">
+            <i class="fa-solid fa-flag-checkered"></i> Complete
+          </button>
+        </div>
+      </section>
+
+      <button type="submit" class="cpub-btn cpub-btn-primary" :disabled="saving || !title.trim()">
+        <i class="fa-solid fa-floppy-disk"></i> {{ saving ? 'Saving...' : 'Save Changes' }}
+      </button>
+    </form>
+  </div>
+  <div v-else class="not-found"><p>Contest not found</p></div>
+</template>
+
+<style scoped>
+.contest-edit { max-width: 700px; margin: 0 auto; padding: 32px; }
+.cpub-back-link { font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; }
+.cpub-back-link:hover { color: var(--accent); }
+.page-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
+.page-subtitle { font-size: 13px; color: var(--text-dim); margin-bottom: 24px; display: flex; align-items: center; gap: 8px; }
+.status-badge { font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; padding: 2px 8px; border: var(--border-width-default) solid; }
+.status-upcoming { color: var(--yellow); border-color: var(--yellow-border); background: var(--yellow-bg); }
+.status-active { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
+.status-judging { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); }
+.status-completed { color: var(--text-faint); border-color: var(--border2); background: var(--surface2); }
+
+.edit-form { display: flex; flex-direction: column; gap: 16px; }
+.form-section { border: var(--border-width-default) solid var(--border); background: var(--surface); padding: 20px; box-shadow: var(--shadow-md); }
+.form-section-title { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
+.form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
+.form-field:last-child { margin-bottom: 0; }
+.form-label { font-size: 10px; font-weight: 600; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
+.form-input, .form-textarea { padding: 8px 10px; border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-family: inherit; }
+.form-input:focus, .form-textarea:focus { border-color: var(--accent); outline: none; }
+.form-textarea { resize: vertical; }
+.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.status-actions { display: flex; gap: 8px; }
+
+.not-found { text-align: center; padding: 64px; color: var(--text-dim); }
+</style>