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
This commit is contained in:
Claude Opus 4.8
@@ -0,0 +1,4 @@
|
|||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
*.local
|
||||||
|
.vite/
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="theme-color" content="#F5C518" />
|
||||||
|
<title>ThoughtSync</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Generated
+2597
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"name": "thoughtsync-frontend",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vue-tsc --noEmit && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"pinia": "^2.2.0",
|
||||||
|
"vue": "^3.5.0",
|
||||||
|
"vue-router": "^4.4.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.1.0",
|
||||||
|
"autoprefixer": "^10.4.0",
|
||||||
|
"postcss": "^8.4.0",
|
||||||
|
"tailwindcss": "^3.4.0",
|
||||||
|
"typescript": "~5.5.0",
|
||||||
|
"vite": "^5.4.0",
|
||||||
|
"vue-tsc": "^2.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -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>
|
||||||
Vendored
+1
@@ -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>
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
darkMode: "media",
|
||||||
|
content: ["./index.html", "./src/**/*.{vue,ts}"],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
// ThoughtSync accent — a Keep-ish warm yellow.
|
||||||
|
brand: {
|
||||||
|
DEFAULT: "#F5C518",
|
||||||
|
600: "#D9A800",
|
||||||
|
700: "#B98F00",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ["Inter", "system-ui", "-apple-system", "sans-serif"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noImplicitReturns": true,
|
||||||
|
"types": []
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
import { defineConfig } from "vite";
|
||||||
|
import vue from "@vitejs/plugin-vue";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
build: {
|
||||||
|
outDir: "dist",
|
||||||
|
emptyOutDir: true,
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
port: 5173,
|
||||||
|
proxy: {
|
||||||
|
// Dev: proxy API + health to the Quart backend on :5000.
|
||||||
|
"/api": "http://localhost:5000",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user