@commonpub/layer 0.1.0

package/pages/auth/login.vue

@@ -0,0 +1,216 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'auth' });
+
+useSeoMeta({
+  title: `Log in — ${useSiteName()}`,
+  description: 'Log in to your CommonPub account.',
+});
+
+const { signIn } = useAuth();
+const route = useRoute();
+
+const identity = ref('');
+const password = ref('');
+const error = ref('');
+const loading = ref(false);
+
+const redirectTo = computed(() => {
+  const raw = (route.query.redirect as string) || '/';
+  if (raw.startsWith('/') && !raw.startsWith('//')) return raw;
+  return '/';
+});
+
+async function handleSubmit(): Promise<void> {
+  error.value = '';
+  loading.value = true;
+
+  try {
+    // Step 1: Resolve username to email if needed (server-side)
+    const { email } = await $fetch<{ email: string }>('/api/resolve-identity', {
+      method: 'POST',
+      body: { identity: identity.value },
+    });
+
+    // Step 2: Sign in with Better Auth (sets cookies directly)
+    await signIn(email, password.value);
+    await navigateTo(redirectTo.value);
+  } catch (err: unknown) {
+    const fetchErr = err as { statusCode?: number; data?: { message?: string; statusMessage?: string } };
+    if (fetchErr?.statusCode === 503) {
+      error.value = 'Database unavailable. Make sure PostgreSQL is running.';
+    } else {
+      error.value = fetchErr?.data?.statusMessage || fetchErr?.data?.message || 'Invalid credentials.';
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="login-page">
+    <h1 class="login-title">Log in</h1>
+
+    <form class="login-form" @submit.prevent="handleSubmit" aria-label="Login form">
+      <div v-if="error" class="form-error" role="alert">{{ error }}</div>
+
+      <div class="field">
+        <label for="identity" class="field-label">Username or Email</label>
+        <input
+          id="identity"
+          v-model="identity"
+          type="text"
+          class="field-input"
+          autocomplete="username"
+          required
+          placeholder="username or email"
+        />
+      </div>
+
+      <div class="field">
+        <label for="password" class="field-label">Password</label>
+        <input
+          id="password"
+          v-model="password"
+          type="password"
+          class="field-input"
+          autocomplete="current-password"
+          required
+          placeholder="Your password"
+        />
+      </div>
+
+      <button type="submit" class="submit-btn" :disabled="loading">
+        {{ loading ? 'Logging in...' : 'Log in' }}
+      </button>
+
+      <NuxtLink to="/auth/forgot-password" class="forgot-link">Forgot your password?</NuxtLink>
+    </form>
+
+    <p class="login-footer">
+      Don't have an account?
+      <NuxtLink to="/auth/register">Register</NuxtLink>
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.login-page {
+  width: 100%;
+}
+
+.login-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: var(--space-5);
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.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, box-shadow 0.15s;
+}
+
+.field-input::placeholder {
+  color: var(--text-faint);
+}
+
+.field-input:focus {
+  border-color: var(--accent);
+  box-shadow: var(--shadow-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;
+  font-family: var(--font-sans);
+  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:active:not(:disabled) {
+  transform: translate(1px, 1px);
+  box-shadow: none;
+}
+
+.submit-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.login-footer {
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-dim);
+  margin-top: var(--space-4);
+}
+
+.login-footer a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.login-footer a:hover {
+  text-decoration: underline;
+}
+
+.forgot-link {
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-faint);
+  text-decoration: none;
+  display: block;
+}
+.forgot-link:hover {
+  color: var(--accent);
+  text-decoration: underline;
+}
+</style>

package/pages/auth/oauth/authorize.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'auth',
+  middleware: 'auth',
+});
+
+useHead({ title: 'Authorize Application' });
+
+const route = useRoute();
+
+const clientId = computed(() => route.query.client_id as string ?? '');
+const redirectUri = computed(() => route.query.redirect_uri as string ?? '');
+const responseType = computed(() => route.query.response_type as string ?? '');
+const scope = computed(() => route.query.scope as string ?? '');
+const state = computed(() => route.query.state as string ?? '');
+
+const loading = ref(false);
+const error = ref<string | null>(null);
+
+async function approve() {
+  loading.value = true;
+  error.value = null;
+  try {
+    const result = await $fetch<{ redirectUrl: string }>('/api/auth/oauth2/authorize', {
+      method: 'POST',
+      body: {
+        clientId: clientId.value,
+        redirectUri: redirectUri.value,
+        responseType: responseType.value,
+        scope: scope.value,
+        state: state.value,
+      },
+    });
+    // Redirect back to the requesting instance with the auth code
+    window.location.href = result.redirectUrl;
+  } catch (err: unknown) {
+    error.value = err instanceof Error ? err.message : 'Authorization failed';
+    loading.value = false;
+  }
+}
+
+function deny() {
+  // Redirect back with error
+  if (redirectUri.value) {
+    const url = new URL(redirectUri.value);
+    url.searchParams.set('error', 'access_denied');
+    if (state.value) url.searchParams.set('state', state.value);
+    window.location.href = url.toString();
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-oauth-consent">
+    <h1 class="cpub-oauth-consent__title">Authorize Access</h1>
+
+    <p class="cpub-oauth-consent__desc">
+      An application is requesting access to your account.
+    </p>
+
+    <div class="cpub-oauth-consent__details">
+      <div class="cpub-oauth-consent__field">
+        <span class="cpub-oauth-consent__label">Client</span>
+        <span class="cpub-oauth-consent__value">{{ clientId }}</span>
+      </div>
+      <div v-if="scope" class="cpub-oauth-consent__field">
+        <span class="cpub-oauth-consent__label">Scope</span>
+        <span class="cpub-oauth-consent__value">{{ scope }}</span>
+      </div>
+    </div>
+
+    <div v-if="error" class="cpub-oauth-consent__error" role="alert">
+      {{ error }}
+    </div>
+
+    <div class="cpub-oauth-consent__actions">
+      <button
+        class="cpub-oauth-consent__btn cpub-oauth-consent__btn--approve"
+        :disabled="loading"
+        @click="approve"
+      >
+        {{ loading ? 'Authorizing...' : 'Approve' }}
+      </button>
+      <button
+        class="cpub-oauth-consent__btn cpub-oauth-consent__btn--deny"
+        :disabled="loading"
+        @click="deny"
+      >
+        Deny
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-oauth-consent {
+  max-width: 420px;
+  margin: var(--space-8) auto;
+  padding: var(--space-6);
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface-1);
+}
+
+.cpub-oauth-consent__title {
+  font-size: var(--font-size-xl);
+  margin-bottom: var(--space-3);
+}
+
+.cpub-oauth-consent__desc {
+  color: var(--text-2);
+  margin-bottom: var(--space-4);
+}
+
+.cpub-oauth-consent__details {
+  border: var(--border-width-default) solid var(--border);
+  padding: var(--space-3);
+  margin-bottom: var(--space-4);
+}
+
+.cpub-oauth-consent__field {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--space-1) 0;
+}
+
+.cpub-oauth-consent__label {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  text-transform: uppercase;
+  color: var(--text-2);
+}
+
+.cpub-oauth-consent__value {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  color: var(--text-1);
+}
+
+.cpub-oauth-consent__error {
+  padding: var(--space-2) var(--space-3);
+  border: var(--border-width-default) solid var(--error);
+  color: var(--error);
+  margin-bottom: var(--space-4);
+}
+
+.cpub-oauth-consent__actions {
+  display: flex;
+  gap: var(--space-3);
+}
+
+.cpub-oauth-consent__btn {
+  flex: 1;
+  padding: var(--space-2) var(--space-4);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  border: var(--border-width-default) solid;
+}
+
+.cpub-oauth-consent__btn--approve {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--surface-1);
+}
+
+.cpub-oauth-consent__btn--deny {
+  background: transparent;
+  border-color: var(--border);
+  color: var(--text-2);
+}
+
+.cpub-oauth-consent__btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>

package/pages/auth/register.vue

@@ -0,0 +1,246 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'auth' });
+
+useSeoMeta({
+  title: `Register — ${useSiteName()}`,
+  description: 'Create your CommonPub account.',
+});
+
+const { signUp } = useAuth();
+
+const username = ref('');
+const email = ref('');
+const password = ref('');
+const error = ref('');
+const loading = ref(false);
+const registered = ref(false);
+
+async function handleSubmit(): Promise<void> {
+  error.value = '';
+  loading.value = true;
+
+  try {
+    await signUp(email.value, password.value, username.value);
+    const { user: authUser } = useAuth();
+    if (authUser.value && !authUser.value.emailVerified) {
+      // Email verification required — show the check-your-email message
+      registered.value = true;
+      return;
+    }
+    const raw = (useRoute().query.redirect as string) || '/dashboard';
+    // Prevent open redirect — only allow relative paths
+    const redirect = (raw.startsWith('/') && !raw.startsWith('//')) ? raw : '/dashboard';
+    await navigateTo(redirect);
+    return;
+  } catch (err: unknown) {
+    const message = (err as { data?: { message?: string } })?.data?.message;
+    error.value = message || 'Registration failed. Please try again.';
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="register-page">
+    <!-- Email verification message -->
+    <div v-if="registered" class="register-success">
+      <div class="register-success-icon"><i class="fa-solid fa-envelope-circle-check"></i></div>
+      <h1 class="register-title">Check your email</h1>
+      <p class="register-success-msg">
+        We sent a verification link to <strong>{{ email }}</strong>. Click the link to activate your account.
+      </p>
+      <NuxtLink to="/auth/login" class="submit-btn" style="display: inline-block; text-align: center; text-decoration: none; margin-top: 16px;">
+        Go to Login
+      </NuxtLink>
+    </div>
+
+    <template v-else>
+    <h1 class="register-title">Create account</h1>
+
+    <form class="register-form" @submit.prevent="handleSubmit" aria-label="Registration form">
+      <div v-if="error" class="form-error" role="alert">{{ error }}</div>
+
+      <div class="field">
+        <label for="username" class="field-label">Username</label>
+        <input
+          id="username"
+          v-model="username"
+          type="text"
+          class="field-input"
+          autocomplete="username"
+          required
+          placeholder="your-username"
+        />
+      </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>
+
+      <div class="field">
+        <label for="password" class="field-label">Password</label>
+        <input
+          id="password"
+          v-model="password"
+          type="password"
+          class="field-input"
+          autocomplete="new-password"
+          required
+          minlength="8"
+          placeholder="Choose a password (min. 8 characters)"
+        />
+      </div>
+
+      <button type="submit" class="submit-btn" :disabled="loading">
+        {{ loading ? 'Creating...' : 'Create account' }}
+      </button>
+    </form>
+
+    <p class="register-footer">
+      Already have an account?
+      <NuxtLink to="/auth/login">Log in</NuxtLink>
+    </p>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.register-page {
+  width: 100%;
+}
+
+.register-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: var(--space-5);
+}
+
+.register-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.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, box-shadow 0.15s;
+}
+
+.field-input::placeholder {
+  color: var(--text-faint);
+}
+
+.field-input:focus {
+  border-color: var(--accent);
+  box-shadow: var(--shadow-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;
+  font-family: var(--font-sans);
+  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:active:not(:disabled) {
+  transform: translate(1px, 1px);
+  box-shadow: none;
+}
+
+.submit-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.register-footer {
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-dim);
+  margin-top: var(--space-4);
+}
+
+.register-footer a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.register-footer a:hover {
+  text-decoration: underline;
+}
+
+.register-success {
+  text-align: center;
+  padding: 16px 0;
+}
+
+.register-success-icon {
+  font-size: 36px;
+  color: var(--green);
+  margin-bottom: 16px;
+}
+
+.register-success-msg {
+  font-size: 13px;
+  color: var(--text-dim);
+  line-height: 1.6;
+  margin-top: 8px;
+}
+
+.register-success-msg strong {
+  color: var(--text);
+}
+</style>