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