puter/zopu-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

intial files

Browse Source
This commit is contained in:
sai karthik
2026-07-23 00:19:53 +05:30
parent 677a355397
commit 74a209a807
45 changed files with 1941 additions and 1016 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/web/package.json
View File

@@ -10,17 +10,15 @@
"typecheck": "react-router typegen && tsc"
},
"dependencies": {
"@code/auth": "workspace:*",
"@code/backend": "workspace:*",
"@code/env": "workspace:*",
"@code/ui": "workspace:*",
"@convex-dev/better-auth": "catalog:",
"@flue/react": "1.0.0-beta.9",
"@flue/sdk": "1.0.0-beta.9",
"@react-router/fs-routes": "^8.1.0",
"@react-router/node": "^8.1.0",
"@react-router/serve": "^8.1.0",
"@tanstack/react-form": "catalog:",
"better-auth": "catalog:",
"convex": "catalog:",
"isbot": "^5.1.44",
"lucide-react": "catalog:",
@@ -29,8 +27,7 @@
"react-dom": "^19.2.7",
"react-router": "^8.1.0",
"sonner": "catalog:",
"streamdown": "2.5.0",
"zod": "catalog:"
"streamdown": "2.5.0"
},
"devDependencies": {
"@code/config": "workspace:*",

127
apps/web/src/components/sign-in-form.tsx
View File

@@ -1,127 +0,0 @@
import { Button } from "@code/ui/components/button";
import { Input } from "@code/ui/components/input";
import { Label } from "@code/ui/components/label";
import { useForm } from "@tanstack/react-form";
import { useNavigate } from "react-router";
import { toast } from "sonner";
import z from "zod";
import { authClient } from "@/lib/auth-client";
export default function SignInForm({ onSwitchToSignUp }: { onSwitchToSignUp: () => void }) {
const navigate = useNavigate();
const form = useForm({
defaultValues: {
email: "",
password: "",
},
onSubmit: async ({ value }) => {
await authClient.signIn.email(
{
email: value.email,
password: value.password,
},
{
onSuccess: () => {
navigate("/dashboard");
toast.success("Sign in successful");
},
onError: (error) => {
toast.error(error.error.message || error.error.statusText);
},
},
);
},
validators: {
onSubmit: z.object({
email: z.email("Invalid email address"),
password: z.string().min(8, "Password must be at least 8 characters"),
}),
},
});
return (
<div className="mx-auto mt-10 w-full max-w-md p-6">
<h1 className="mb-6 text-center text-3xl font-bold">Welcome Back</h1>
<form
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
form.handleSubmit();
}}
className="space-y-4"
>
<div>
<form.Field name="email">
{(field) => (
<div className="space-y-2">
<Label htmlFor={field.name}>Email</Label>
<Input
id={field.name}
name={field.name}
type="email"
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
/>
{field.state.meta.errors.map((error, index) => (
<p key={`${field.name}-error-${index}`} className="text-red-500">
{error?.message}
</p>
))}
</div>
)}
</form.Field>
</div>
<div>
<form.Field name="password">
{(field) => (
<div className="space-y-2">
<Label htmlFor={field.name}>Password</Label>
<Input
id={field.name}
name={field.name}
type="password"
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
/>
{field.state.meta.errors.map((error, index) => (
<p key={`${field.name}-error-${index}`} className="text-red-500">
{error?.message}
</p>
))}
</div>
)}
</form.Field>
</div>
<form.Subscribe
selector={(state) => ({
canSubmit: state.canSubmit,
isSubmitting: state.isSubmitting,
})}
>
{({ canSubmit, isSubmitting }) => (
<Button type="submit" className="w-full" disabled={!canSubmit || isSubmitting}>
{isSubmitting ? "Submitting..." : "Sign In"}
</Button>
)}
</form.Subscribe>
</form>
<div className="mt-4 text-center">
<Button
variant="link"
onClick={onSwitchToSignUp}
className="text-indigo-600 hover:text-indigo-800"
>
Need an account? Sign Up
</Button>
</div>
</div>
);
}

152
apps/web/src/components/sign-up-form.tsx
View File

@@ -1,152 +0,0 @@
import { Button } from "@code/ui/components/button";
import { Input } from "@code/ui/components/input";
import { Label } from "@code/ui/components/label";
import { useForm } from "@tanstack/react-form";
import { useNavigate } from "react-router";
import { toast } from "sonner";
import z from "zod";
import { authClient } from "@/lib/auth-client";
export default function SignUpForm({ onSwitchToSignIn }: { onSwitchToSignIn: () => void }) {
const navigate = useNavigate();
const form = useForm({
defaultValues: {
email: "",
password: "",
name: "",
},
onSubmit: async ({ value }) => {
await authClient.signUp.email(
{
email: value.email,
password: value.password,
name: value.name,
},
{
onSuccess: () => {
navigate("/dashboard");
toast.success("Sign up successful");
},
onError: (error) => {
toast.error(error.error.message || error.error.statusText);
},
},
);
},
validators: {
onSubmit: z.object({
name: z.string().min(2, "Name must be at least 2 characters"),
email: z.email("Invalid email address"),
password: z.string().min(8, "Password must be at least 8 characters"),
}),
},
});
return (
<div className="mx-auto mt-10 w-full max-w-md p-6">
<h1 className="mb-6 text-center text-3xl font-bold">Create Account</h1>
<form
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
form.handleSubmit();
}}
className="space-y-4"
>
<div>
<form.Field name="name">
{(field) => (
<div className="space-y-2">
<Label htmlFor={field.name}>Name</Label>
<Input
id={field.name}
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
/>
{field.state.meta.errors.map((error, index) => (
<p key={`${field.name}-error-${index}`} className="text-red-500">
{error?.message}
</p>
))}
</div>
)}
</form.Field>
</div>
<div>
<form.Field name="email">
{(field) => (
<div className="space-y-2">
<Label htmlFor={field.name}>Email</Label>
<Input
id={field.name}
name={field.name}
type="email"
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
/>
{field.state.meta.errors.map((error, index) => (
<p key={`${field.name}-error-${index}`} className="text-red-500">
{error?.message}
</p>
))}
</div>
)}
</form.Field>
</div>
<div>
<form.Field name="password">
{(field) => (
<div className="space-y-2">
<Label htmlFor={field.name}>Password</Label>
<Input
id={field.name}
name={field.name}
type="password"
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
/>
{field.state.meta.errors.map((error, index) => (
<p key={`${field.name}-error-${index}`} className="text-red-500">
{error?.message}
</p>
))}
</div>
)}
</form.Field>
</div>
<form.Subscribe
selector={(state) => ({
canSubmit: state.canSubmit,
isSubmitting: state.isSubmitting,
})}
>
{({ canSubmit, isSubmitting }) => (
<Button type="submit" className="w-full" disabled={!canSubmit || isSubmitting}>
{isSubmitting ? "Submitting..." : "Sign Up"}
</Button>
)}
</form.Subscribe>
</form>
<div className="mt-4 text-center">
<Button
variant="link"
onClick={onSwitchToSignIn}
className="text-indigo-600 hover:text-indigo-800"
>
Already have an account? Sign In
</Button>
</div>
</div>
);
}

2
apps/web/src/components/user-menu.tsx
View File

@@ -12,7 +12,7 @@ import {
import { useQuery } from "convex/react";
import { useNavigate } from "react-router";
import { authClient } from "@/lib/auth-client";
import { authClient } from "@code/auth/web";
export default function UserMenu() {
const navigate = useNavigate();

8
apps/web/src/lib/auth-client.ts
View File

@@ -1,8 +0,0 @@
import { env } from "@code/env/web";
import { convexClient, crossDomainClient } from "@convex-dev/better-auth/client/plugins";
import { createAuthClient } from "better-auth/react";
export const authClient = createAuthClient({
baseURL: env.VITE_CONVEX_SITE_URL,
plugins: [convexClient(), crossDomainClient()],
});

41
apps/web/src/root.tsx
View File

@@ -1,11 +1,10 @@
import { env } from "@code/env/web";
import { WebAuthProvider } from "@code/auth/web";
import { Toaster } from "@code/ui/components/sonner";
import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react";
import { FlueProvider } from "@flue/react";
import "./index.css";
import { createFlueClient } from "@flue/sdk";
import { ConvexReactClient } from "convex/react";
import {
isRouteErrorResponse,
Links,
@@ -15,7 +14,6 @@ import {
ScrollRestoration,
} from "react-router";
import { authClient } from "@/lib/auth-client";
import type { Route } from "./+types/root";
import { ThemeProvider } from "./components/theme-provider";
@@ -87,26 +85,23 @@ export const Layout = ({ children }: { children: React.ReactNode }) => (
</html>
);
const App = () => {
const convex = new ConvexReactClient(env.VITE_CONVEX_URL);
return (
<FlueProvider client={flueClient}>
<ConvexBetterAuthProvider client={convex} authClient={authClient}>
<ThemeProvider
attribute="class"
defaultTheme="dark"
disableTransitionOnChange
storageKey="vite-ui-theme"
>
<div className="h-svh min-h-0 overflow-hidden">
<Outlet />
</div>
<Toaster richColors />
</ThemeProvider>
</ConvexBetterAuthProvider>
</FlueProvider>
);
};
const App = () => (
<FlueProvider client={flueClient}>
<WebAuthProvider>
<ThemeProvider
attribute="class"
defaultTheme="dark"
disableTransitionOnChange
storageKey="vite-ui-theme"
>
<div className="h-svh min-h-0 overflow-hidden">
<Outlet />
</div>
<Toaster richColors />
</ThemeProvider>
</WebAuthProvider>
</FlueProvider>
);
export default App;

2
apps/web/src/routes/_index.tsx → apps/web/src/routes/_app._index.tsx
View File

@@ -1,6 +1,6 @@
import { ChatPage } from "@/components/chat/chat-page";
import type { Route } from "./+types/_index";
import type { Route } from "./+types/_app._index";
export const meta = (_args: Route.MetaArgs) => [
{ title: "Zopu" },

24
apps/web/src/routes/_app.dashboard.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { api } from "@code/backend/convex/_generated/api";
import { useQuery } from "convex/react";
import UserMenu from "@/components/user-menu";
export default function Dashboard() {
const privateData = useQuery(api.privateData.get);
return (
<main className="mx-auto flex min-h-svh max-w-3xl flex-col gap-6 p-6 md:p-10">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-muted-foreground">Authenticated workspace</p>
<h1 className="text-3xl font-semibold tracking-tight">Dashboard</h1>
</div>
<UserMenu />
</div>
<section className="rounded-xl border bg-card p-6 text-card-foreground">
<p>{privateData?.message ?? "Loading private data…"}</p>
</section>
</main>
);
}

0
apps/web/src/routes/todos.tsx → apps/web/src/routes/_app.todos.tsx
View File

17
apps/web/src/routes/_app.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { useConvexAuth } from "convex/react";
import { Navigate, Outlet, useLocation } from "react-router";
export default function AppLayout() {
const { isAuthenticated, isLoading } = useConvexAuth();
const location = useLocation();
if (isLoading) {
return <div className="grid min-h-svh place-items-center text-sm text-muted-foreground">Loading…</div>;
}
if (!isAuthenticated) {
return <Navigate replace state={{ from: location.pathname }} to="/login" />;
}
return <Outlet />;
}

15
apps/web/src/routes/_auth.signup.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { SignupForm } from "@code/auth/web";
import { useNavigate } from "react-router";
import type { Route } from "./+types/_auth.signup";
export const meta = (_args: Route.MetaArgs) => [
{ title: "Create account | Zopu" },
{ content: "Create your Zopu account", name: "description" },
];
export default function SignupRoute() {
const navigate = useNavigate();
return <SignupForm onSuccess={() => navigate("/", { replace: true })} />;
}

20
apps/web/src/routes/_auth.tsx Normal file
View File

@@ -0,0 +1,20 @@
import { useConvexAuth } from "convex/react";
import { Navigate, Outlet } from "react-router";
export default function AuthLayout() {
const { isAuthenticated, isLoading } = useConvexAuth();
if (isLoading) {
return <div className="grid min-h-svh place-items-center text-sm text-muted-foreground">Loading…</div>;
}
if (isAuthenticated) return <Navigate replace to="/" />;
return (
<main className="grid min-h-svh place-items-center bg-muted/30 p-6 md:p-10">
<div className="w-full max-w-sm">
<Outlet />
</div>
</main>
);
}

41
apps/web/src/routes/dashboard.tsx
View File

@@ -1,41 +0,0 @@
import { api } from "@code/backend/convex/_generated/api";
import { Authenticated, AuthLoading, Unauthenticated, useQuery } from "convex/react";
import { useState } from "react";
import SignInForm from "@/components/sign-in-form";
import SignUpForm from "@/components/sign-up-form";
import UserMenu from "@/components/user-menu";
function PrivateDashboardContent() {
const privateData = useQuery(api.privateData.get);
return (
<div>
<h1>Dashboard</h1>
<p>privateData: {privateData?.message}</p>
<UserMenu />
</div>
);
}
export default function Dashboard() {
const [showSignIn, setShowSignIn] = useState(false);
return (
<>
<Authenticated>
<PrivateDashboardContent />
</Authenticated>
<Unauthenticated>
{showSignIn ? (
<SignInForm onSwitchToSignUp={() => setShowSignIn(false)} />
) : (
<SignUpForm onSwitchToSignIn={() => setShowSignIn(true)} />
)}
</Unauthenticated>
<AuthLoading>
<div>Loading...</div>
</AuthLoading>
</>
);
}