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,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>