M0: Vue 3 + TypeScript frontend — auth views + authed board shell

- Vite + Vue 3.5 + Pinia + vue-router + Tailwind (brand accent #F5C518), dark-mode aware, deterministic package-lock.json for `npm ci`. - Session store (fetchMe/login/register/logout) over a credentials:'include' fetch client; router guards (requiresAuth / guestOnly) with lazy /me resolve. - BaseButton + BaseInput primitives (focus rings, loading, error states). - LoginView, RegisterView, and an authed BoardView shell with an empty state for the M1 masonry board — all at v1 polish (rule 24). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FRgehjoz7Yv8LkUfADxACm
2026-07-19 13:17:38 -04:00
parent 04e3ab20cf
commit bf3d403648
20 changed files with 3173 additions and 0 deletions
@@ -0,0 +1,3 @@
+<template>
+  <RouterView />
+</template>
@@ -0,0 +1,32 @@
+export interface ApiError {
+  error: string;
+  status: number;
+}
+
+async function request<T>(method: string, path: string, body?: unknown): Promise<T> {
+  const resp = await fetch(path, {
+    method,
+    credentials: "include", // send/receive the signed session cookie
+    headers: body !== undefined ? { "Content-Type": "application/json" } : undefined,
+    body: body !== undefined ? JSON.stringify(body) : undefined,
+  });
+
+  const text = await resp.text();
+  const data: unknown = text ? JSON.parse(text) : {};
+
+  if (!resp.ok) {
+    const message =
+      typeof data === "object" && data !== null && "error" in data
+        ? String((data as { error: unknown }).error)
+        : "Request failed.";
+    const err: ApiError = { error: message, status: resp.status };
+    throw err;
+  }
+
+  return data as T;
+}
+
+export const api = {
+  get: <T>(path: string) => request<T>("GET", path),
+  post: <T>(path: string, body?: unknown) => request<T>("POST", path, body),
+};
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    type?: "button" | "submit";
+    variant?: "primary" | "ghost";
+    loading?: boolean;
+    disabled?: boolean;
+  }>(),
+  { type: "button", variant: "primary", loading: false, disabled: false },
+);
+</script>
+
+<template>
+  <button
+    :type="type"
+    :disabled="disabled || loading"
+    class="inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-semibold transition
+           focus:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2
+           focus-visible:ring-offset-neutral-50 dark:focus-visible:ring-offset-neutral-950
+           disabled:cursor-not-allowed disabled:opacity-60"
+    :class="
+      variant === 'primary'
+        ? 'bg-brand text-neutral-900 shadow-sm hover:bg-brand-600 active:bg-brand-700'
+        : 'text-neutral-700 hover:bg-neutral-200/70 dark:text-neutral-200 dark:hover:bg-neutral-800'
+    "
+  >
+    <span
+      v-if="loading"
+      class="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+      aria-hidden="true"
+    />
+    <slot />
+  </button>
+</template>
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+defineProps<{
+  id: string;
+  label: string;
+  modelValue: string;
+  type?: string;
+  autocomplete?: string;
+  placeholder?: string;
+  error?: string;
+  required?: boolean;
+}>();
+
+defineEmits<{ (e: "update:modelValue", value: string): void }>();
+</script>
+
+<template>
+  <div class="flex flex-col gap-1.5">
+    <label :for="id" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">{{ label }}</label>
+    <input
+      :id="id"
+      :type="type ?? 'text'"
+      :value="modelValue"
+      :autocomplete="autocomplete"
+      :placeholder="placeholder"
+      :required="required"
+      :aria-invalid="error ? 'true' : undefined"
+      class="rounded-lg border bg-white px-3 py-2.5 text-sm text-neutral-900 shadow-sm transition
+             placeholder:text-neutral-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand
+             dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+      :class="error ? 'border-red-400 dark:border-red-500' : 'border-neutral-300 dark:border-neutral-700'"
+      @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    />
+    <p v-if="error" class="text-xs text-red-600 dark:text-red-400">{{ error }}</p>
+  </div>
+</template>
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
@@ -0,0 +1,10 @@
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import App from "./App.vue";
+import router from "./router";
+import "./style.css";
+
+const app = createApp(App);
+app.use(createPinia()); // before router: the nav guard reads the session store
+app.use(router);
+app.mount("#app");
@@ -0,0 +1,43 @@
+import { createRouter, createWebHistory } from "vue-router";
+import { useSessionStore } from "../stores/session";
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: "/",
+      name: "board",
+      component: () => import("../views/BoardView.vue"),
+      meta: { requiresAuth: true },
+    },
+    {
+      path: "/login",
+      name: "login",
+      component: () => import("../views/LoginView.vue"),
+      meta: { guestOnly: true },
+    },
+    {
+      path: "/register",
+      name: "register",
+      component: () => import("../views/RegisterView.vue"),
+      meta: { guestOnly: true },
+    },
+  ],
+});
+
+router.beforeEach(async (to) => {
+  const session = useSessionStore();
+  // Resolve the current user once, lazily, before the first guarded navigation.
+  if (!session.loaded) {
+    await session.fetchMe();
+  }
+  if (to.meta.requiresAuth && !session.user) {
+    return { name: "login", query: to.fullPath !== "/" ? { redirect: to.fullPath } : undefined };
+  }
+  if (to.meta.guestOnly && session.user) {
+    return { name: "board" };
+  }
+  return true;
+});
+
+export default router;
@@ -0,0 +1,45 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { api } from "../api/client";
+
+export interface User {
+  id: string;
+  email: string;
+  display_name: string;
+  email_verified: boolean;
+}
+
+export const useSessionStore = defineStore("session", () => {
+  const user = ref<User | null>(null);
+  // Whether we've resolved the initial /me check yet (guards against redirect flashes).
+  const loaded = ref(false);
+
+  async function fetchMe(): Promise<void> {
+    try {
+      user.value = await api.get<User>("/api/auth/me");
+    } catch {
+      user.value = null;
+    } finally {
+      loaded.value = true;
+    }
+  }
+
+  async function login(email: string, password: string): Promise<void> {
+    user.value = await api.post<User>("/api/auth/login", { email, password });
+  }
+
+  async function register(email: string, password: string, displayName: string): Promise<void> {
+    user.value = await api.post<User>("/api/auth/register", {
+      email,
+      password,
+      display_name: displayName,
+    });
+  }
+
+  async function logout(): Promise<void> {
+    await api.post("/api/auth/logout");
+    user.value = null;
+  }
+
+  return { user, loaded, fetchMe, login, register, logout };
+});
@@ -0,0 +1,19 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body,
+#app {
+  height: 100%;
+}
+
+body {
+  @apply bg-neutral-50 text-neutral-900 antialiased;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    @apply bg-neutral-950 text-neutral-100;
+  }
+}
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import { useSessionStore } from "../stores/session";
+import BaseButton from "../components/BaseButton.vue";
+
+const session = useSessionStore();
+const router = useRouter();
+
+async function signOut() {
+  await session.logout();
+  await router.replace("/login");
+}
+</script>
+
+<template>
+  <div class="flex min-h-full flex-col">
+    <header
+      class="sticky top-0 z-10 border-b border-neutral-200 bg-neutral-50/80 backdrop-blur dark:border-neutral-800 dark:bg-neutral-950/80"
+    >
+      <div class="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
+        <div class="flex items-center gap-2">
+          <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-brand text-sm font-black text-neutral-900">
+            TS
+          </div>
+          <span class="font-semibold">ThoughtSync</span>
+        </div>
+        <div class="flex items-center gap-3">
+          <span class="hidden text-sm text-neutral-500 sm:inline dark:text-neutral-400">{{
+            session.user?.display_name
+          }}</span>
+          <BaseButton variant="ghost" @click="signOut">
+            <svg
+              class="h-4 w-4"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+              <polyline points="16 17 21 12 16 7" />
+              <line x1="21" y1="12" x2="9" y2="12" />
+            </svg>
+            Sign out
+          </BaseButton>
+        </div>
+      </div>
+    </header>
+
+    <main class="mx-auto flex w-full max-w-6xl flex-1 flex-col items-center justify-center px-4 py-20 text-center">
+      <svg
+        class="h-12 w-12 text-neutral-300 dark:text-neutral-600"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M15.5 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h9l7-7V5a2 2 0 0 0-2-2Z" />
+        <path d="M14 21v-5a2 2 0 0 1 2-2h5" />
+      </svg>
+      <h1 class="mt-4 text-xl font-semibold">Your board is ready</h1>
+      <p class="mt-1.5 max-w-sm text-sm text-neutral-500 dark:text-neutral-400">
+        A Google-Keep-style masonry board for quick-capturing notes lands here next. The foundation — your account and
+        workspace — is in place.
+      </p>
+    </main>
+  </div>
+</template>
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { useSessionStore } from "../stores/session";
+import BaseInput from "../components/BaseInput.vue";
+import BaseButton from "../components/BaseButton.vue";
+import type { ApiError } from "../api/client";
+
+const session = useSessionStore();
+const router = useRouter();
+const route = useRoute();
+
+const email = ref("");
+const password = ref("");
+const error = ref("");
+const loading = ref(false);
+
+async function submit() {
+  error.value = "";
+  loading.value = true;
+  try {
+    await session.login(email.value, password.value);
+    const redirect = typeof route.query.redirect === "string" ? route.query.redirect : "/";
+    await router.replace(redirect);
+  } catch (e) {
+    error.value = (e as ApiError).error ?? "Could not sign in.";
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <main class="flex min-h-full items-center justify-center px-4 py-12">
+    <div class="w-full max-w-sm">
+      <div class="mb-8 text-center">
+        <div
+          class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-brand text-lg font-black text-neutral-900"
+        >
+          TS
+        </div>
+        <h1 class="text-2xl font-bold tracking-tight">Welcome back</h1>
+        <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">Sign in to your thoughts.</p>
+      </div>
+
+      <form class="flex flex-col gap-4" novalidate @submit.prevent="submit">
+        <BaseInput
+          id="email"
+          v-model="email"
+          label="Email"
+          type="email"
+          autocomplete="email"
+          placeholder="you@example.com"
+          required
+        />
+        <BaseInput
+          id="password"
+          v-model="password"
+          label="Password"
+          type="password"
+          autocomplete="current-password"
+          placeholder="••••••••"
+          required
+        />
+        <p
+          v-if="error"
+          role="alert"
+          class="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700 dark:bg-red-950/50 dark:text-red-300"
+        >
+          {{ error }}
+        </p>
+        <BaseButton type="submit" :loading="loading">Sign in</BaseButton>
+      </form>
+
+      <p class="mt-6 text-center text-sm text-neutral-500 dark:text-neutral-400">
+        No account?
+        <RouterLink to="/register" class="font-semibold text-brand-700 hover:underline dark:text-brand"
+          >Create one</RouterLink
+        >
+      </p>
+    </div>
+  </main>
+</template>
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import { useSessionStore } from "../stores/session";
+import BaseInput from "../components/BaseInput.vue";
+import BaseButton from "../components/BaseButton.vue";
+import type { ApiError } from "../api/client";
+
+const session = useSessionStore();
+const router = useRouter();
+
+const displayName = ref("");
+const email = ref("");
+const password = ref("");
+const error = ref("");
+const loading = ref(false);
+
+async function submit() {
+  error.value = "";
+  if (password.value.length < 8) {
+    error.value = "Password must be at least 8 characters.";
+    return;
+  }
+  loading.value = true;
+  try {
+    await session.register(email.value, password.value, displayName.value);
+    await router.replace("/");
+  } catch (e) {
+    error.value = (e as ApiError).error ?? "Could not create your account.";
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <main class="flex min-h-full items-center justify-center px-4 py-12">
+    <div class="w-full max-w-sm">
+      <div class="mb-8 text-center">
+        <div
+          class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-brand text-lg font-black text-neutral-900"
+        >
+          TS
+        </div>
+        <h1 class="text-2xl font-bold tracking-tight">Create your space</h1>
+        <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">Start capturing in seconds.</p>
+      </div>
+
+      <form class="flex flex-col gap-4" novalidate @submit.prevent="submit">
+        <BaseInput
+          id="display_name"
+          v-model="displayName"
+          label="Name"
+          autocomplete="name"
+          placeholder="What should we call you?"
+        />
+        <BaseInput
+          id="email"
+          v-model="email"
+          label="Email"
+          type="email"
+          autocomplete="email"
+          placeholder="you@example.com"
+          required
+        />
+        <BaseInput
+          id="password"
+          v-model="password"
+          label="Password"
+          type="password"
+          autocomplete="new-password"
+          placeholder="At least 8 characters"
+          required
+        />
+        <p
+          v-if="error"
+          role="alert"
+          class="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700 dark:bg-red-950/50 dark:text-red-300"
+        >
+          {{ error }}
+        </p>
+        <BaseButton type="submit" :loading="loading">Create account</BaseButton>
+      </form>
+
+      <p class="mt-6 text-center text-sm text-neutral-500 dark:text-neutral-400">
+        Already have an account?
+        <RouterLink to="/login" class="font-semibold text-brand-700 hover:underline dark:text-brand"
+          >Sign in</RouterLink
+        >
+      </p>
+    </div>
+  </main>
+</template>