@oaklandzoo/ostup 0.9.0 → 0.10.0

package/templates/profiles/saas-dashboard/app/(auth)/sign-up/page.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+export default function SignUpPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [name, setName] = useState('');
+  const [error, setError] = useState('');
+  const [pending, setPending] = useState(false);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setPending(true);
+    setError('');
+    try {
+      const res = await fetch('/api/auth/sign-up/email', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ email, password, name }),
+      });
+      if (!res.ok) {
+        const data = (await res.json().catch(() => ({}))) as { error?: string };
+        throw new Error(data.error || 'Sign-up failed');
+      }
+      router.push('/dashboard');
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Sign-up failed');
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <main className="mx-auto flex min-h-screen max-w-md flex-col justify-center px-6 py-12">
+      <h1 className="text-3xl font-semibold tracking-tight">Create account</h1>
+      <p className="mt-2 text-sm text-slate-600">Get started with {`{{DISPLAY_NAME}}`}.</p>
+      <form onSubmit={onSubmit} className="mt-8 space-y-4">
+        <label className="block">
+          <span className="text-sm font-medium text-slate-700">Display name</span>
+          <input
+            required
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            className="mt-1 block w-full rounded-md border border-slate-300 px-3 py-2"
+          />
+        </label>
+        <label className="block">
+          <span className="text-sm font-medium text-slate-700">Email</span>
+          <input
+            required
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="mt-1 block w-full rounded-md border border-slate-300 px-3 py-2"
+          />
+        </label>
+        <label className="block">
+          <span className="text-sm font-medium text-slate-700">Password</span>
+          <input
+            required
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            minLength={8}
+            className="mt-1 block w-full rounded-md border border-slate-300 px-3 py-2"
+          />
+        </label>
+        {error && <div className="rounded-md bg-red-50 p-3 text-sm text-red-900">{error}</div>}
+        <button
+          type="submit"
+          disabled={pending}
+          className="w-full rounded-md bg-slate-900 px-4 py-2 font-medium text-white hover:bg-slate-800 disabled:opacity-60"
+        >
+          {pending ? 'Creating...' : 'Create account'}
+        </button>
+      </form>
+      <p className="mt-6 text-sm text-slate-600">
+        Already have an account? <a className="font-medium text-slate-900 underline" href="/sign-in">Sign in</a>.
+      </p>
+    </main>
+  );
+}

package/templates/profiles/saas-dashboard/app/api/auth/[...all]/route.ts

@@ -0,0 +1,4 @@
+import { auth } from '@/lib/auth';
+import { toNextJsHandler } from 'better-auth/next-js';
+
+export const { GET, POST } = toNextJsHandler(auth.handler);

package/templates/profiles/saas-dashboard/app/dashboard/layout.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+
+  async function onSignOut() {
+    await fetch('/api/auth/sign-out', { method: 'POST' });
+    router.push('/sign-in');
+    router.refresh();
+  }
+
+  return (
+    <div className="min-h-screen bg-slate-50">
+      <header className="border-b border-slate-200 bg-white">
+        <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
+          <Link href="/dashboard" className="text-lg font-semibold tracking-tight">
+            {`{{DISPLAY_NAME}}`}
+          </Link>
+          <nav className="flex items-center gap-4 text-sm">
+            <Link href="/dashboard/settings" className="text-slate-600 hover:text-slate-900">Settings</Link>
+            <button
+              onClick={onSignOut}
+              className="rounded-md border border-slate-200 px-3 py-1 text-slate-700 hover:bg-slate-50"
+            >
+              Sign out
+            </button>
+          </nav>
+        </div>
+      </header>
+      <main className="mx-auto max-w-6xl px-6 py-10">{children}</main>
+    </div>
+  );
+}

package/templates/profiles/saas-dashboard/app/dashboard/page.tsx

@@ -0,0 +1,18 @@
+export default function DashboardPage() {
+  return (
+    <div>
+      <h1 className="text-3xl font-semibold tracking-tight">Welcome</h1>
+      <p className="mt-2 text-slate-600">
+        This is your starter dashboard. Replace the welcome card below with the metrics, lists, or widgets that matter to your product.
+      </p>
+      <section className="mt-8 rounded-lg border border-slate-200 bg-white p-6">
+        <h2 className="text-lg font-semibold">Getting started</h2>
+        <ul className="mt-4 list-inside list-disc space-y-1 text-slate-700">
+          <li>Edit <code>app/dashboard/page.tsx</code> to add real content.</li>
+          <li>Edit <code>db/schema.sql</code> to add your domain entities.</li>
+          <li>Edit <code>app/dashboard/settings/page.tsx</code> to add settings fields.</li>
+        </ul>
+      </section>
+    </div>
+  );
+}

package/templates/profiles/saas-dashboard/app/dashboard/settings/page.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function SettingsPage() {
+  const [email, setEmail] = useState('');
+  const [displayName, setDisplayName] = useState('');
+  const [status, setStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setStatus('saving');
+    try {
+      const res = await fetch('/api/account/settings', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ email, displayName }),
+      });
+      if (!res.ok) throw new Error('Save failed');
+      setStatus('saved');
+    } catch {
+      setStatus('error');
+    }
+  }
+
+  return (
+    <div className="max-w-2xl">
+      <h1 className="text-3xl font-semibold tracking-tight">Settings</h1>
+      <p className="mt-2 text-slate-600">Update your account details. Single-user account. Team features are a Pro upgrade.</p>
+      <form onSubmit={onSubmit} className="mt-8 space-y-4">
+        <label className="block">
+          <span className="text-sm font-medium text-slate-700">Display name</span>
+          <input
+            value={displayName}
+            onChange={(e) => setDisplayName(e.target.value)}
+            className="mt-1 block w-full rounded-md border border-slate-300 px-3 py-2"
+          />
+        </label>
+        <label className="block">
+          <span className="text-sm font-medium text-slate-700">Email</span>
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="mt-1 block w-full rounded-md border border-slate-300 px-3 py-2"
+          />
+        </label>
+        {status === 'saved' && <div className="rounded-md bg-green-50 p-3 text-sm text-green-900">Saved.</div>}
+        {status === 'error' && <div className="rounded-md bg-red-50 p-3 text-sm text-red-900">Save failed.</div>}
+        <button
+          type="submit"
+          disabled={status === 'saving'}
+          className="rounded-md bg-slate-900 px-4 py-2 font-medium text-white hover:bg-slate-800 disabled:opacity-60"
+        >
+          {status === 'saving' ? 'Saving...' : 'Save'}
+        </button>
+      </form>
+    </div>
+  );
+}

package/templates/profiles/saas-dashboard/app/pricing/page.tsx

@@ -0,0 +1,11 @@
+export default function PricingPage() {
+  return (
+    <main className="mx-auto max-w-4xl px-6 py-24">
+      <h1 className="text-4xl font-bold tracking-tight">Pricing</h1>
+      <p className="mt-4 text-lg text-slate-700">Coming soon.</p>
+      <p className="mt-2 text-slate-600">
+        Stripe subscription wiring ships in the Pro upgrade. v1 of {`{{DISPLAY_NAME}}`} is single-user and free to run.
+      </p>
+    </main>
+  );
+}

package/templates/profiles/saas-dashboard/db/schema.sql

@@ -0,0 +1,13 @@
+-- Single-user schema. v1 ships one entity: users.
+-- Better Auth manages its own session/account tables on top of this.
+
+CREATE TABLE IF NOT EXISTS users (
+  id            TEXT PRIMARY KEY,
+  email         TEXT UNIQUE NOT NULL,
+  display_name  TEXT,
+  password_hash TEXT NOT NULL,
+  created_at    TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+
+-- v1 deliberately ships no teams, no organizations, no roles, no invites, no memberships.
+-- Add them in a Pro/Studio iteration once a real customer asks for them.

package/templates/profiles/saas-dashboard/lib/auth.ts

@@ -0,0 +1,15 @@
+// Better Auth init. Replace the database adapter to match your driver of choice.
+// Verify against current better-auth docs if the API has shifted: https://www.better-auth.com
+import { betterAuth } from 'better-auth';
+import { Pool } from 'pg';
+
+const pool = process.env.DATABASE_URL
+  ? new Pool({ connectionString: process.env.DATABASE_URL })
+  : undefined;
+
+export const auth = betterAuth({
+  database: pool,
+  emailAndPassword: { enabled: true },
+  secret: process.env.BETTER_AUTH_SECRET,
+  baseURL: process.env.BETTER_AUTH_URL,
+});

package/templates/profiles/saas-dashboard/lib/db.ts

@@ -0,0 +1,20 @@
+import { Pool, type QueryResult } from 'pg';
+
+let _pool: Pool | undefined;
+
+function getPool(): Pool {
+  if (!process.env.DATABASE_URL) {
+    throw new Error('DATABASE_URL is not set. Add it to .env.local before querying.');
+  }
+  if (!_pool) {
+    _pool = new Pool({ connectionString: process.env.DATABASE_URL });
+  }
+  return _pool;
+}
+
+export async function query<T extends Record<string, unknown>>(
+  sql: string,
+  params: unknown[] = [],
+): Promise<QueryResult<T>> {
+  return getPool().query<T>(sql, params);
+}

package/templates/profiles/saas-dashboard/middleware.ts

@@ -0,0 +1,19 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+const SESSION_COOKIE_NAMES = ['better-auth.session_token', 'authjs.session-token'];
+
+export function middleware(req: NextRequest) {
+  const hasSession = SESSION_COOKIE_NAMES.some((name) => req.cookies.get(name)?.value);
+  if (!hasSession) {
+    const url = req.nextUrl.clone();
+    url.pathname = '/sign-in';
+    url.searchParams.set('next', req.nextUrl.pathname);
+    return NextResponse.redirect(url);
+  }
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/dashboard/:path*', '/api/account/:path*'],
+};

package/templates/profiles/saas-dashboard/package.json.additions

@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "better-auth": "^1.0.0",
+    "pg": "^8.0.0"
+  },
+  "devDependencies": {
+    "@types/pg": "^8.0.0"
+  }
+}