@helloleo/plugins 0.2.0-beta.5 → 0.2.0-beta.7

package/src/tools/setup-authentication/pages.ts

@@ -0,0 +1,241 @@
+import type { OAuthProvider } from "./constants.ts";
+import { PROVIDER_LABELS } from "./constants.ts";
+
+function socialButtonsJsx(oauth: OAuthProvider[]): string {
+	return oauth
+		.map(
+			(p) => `          <Button
+            type="button"
+            variant="outline"
+            className="w-full"
+            onClick={() => authClient.signIn.social({ provider: '${p}', callbackURL: '/' })}
+          >
+            Continue with ${PROVIDER_LABELS[p]}
+          </Button>`,
+		)
+		.join("\n");
+}
+
+export function authedLayoutTsx(): string {
+	return `import { createFileRoute, redirect } from '@tanstack/react-router'
+import { getSession } from '#/lib/auth-server'
+
+// Pathless guard -- no URL segment of its own. Put protected pages under
+// src/routes/_authed/ (e.g. _authed/dashboard.tsx -> /dashboard) and they
+// inherit this beforeLoad. See src/routes/README.md, "Authenticated routes".
+export const Route = createFileRoute('/_authed')({
+  beforeLoad: async () => {
+    const session = await getSession()
+    if (!session) throw redirect({ to: '/login' })
+    return { user: session.user }
+  },
+})
+`;
+}
+
+export function loginPageTsx(
+	hasPassword: boolean,
+	oauth: OAuthProvider[],
+): string {
+	const social = oauth.length ? `\n${socialButtonsJsx(oauth)}\n` : "";
+
+	const divider =
+		oauth.length && hasPassword
+			? `
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-card px-2 text-muted-foreground">Or continue with email</span>
+            </div>
+          </div>
+`
+			: "";
+
+	const passwordForm = hasPassword
+		? `
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" type="email" value={email} onChange={e => setEmail(e.target.value)} required autoComplete="email" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input id="password" type="password" value={password} onChange={e => setPassword(e.target.value)} required autoComplete="current-password" />
+            </div>
+            {error && <p className="text-sm text-destructive">{error}</p>}
+            <Button type="submit" className="w-full" disabled={loading}>
+              {loading ? 'Logging in…' : 'Log in'}
+            </Button>
+            <p className="text-sm text-center text-muted-foreground">
+              No account? <Link to="/signup" className="underline">Sign up</Link>
+            </p>
+          </form>
+`
+		: "";
+
+	const stateAndHandler = hasPassword
+		? `
+  const router = useRouter()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    const { error } = await authClient.signIn.email({ email, password })
+    setLoading(false)
+    if (error) {
+      setError(error.message ?? 'Something went wrong.')
+      return
+    }
+    router.navigate({ to: '/' })
+  }
+`
+		: "";
+
+	const imports = [
+		hasPassword
+			? "import { createFileRoute, Link, useRouter } from '@tanstack/react-router'"
+			: "import { createFileRoute } from '@tanstack/react-router'",
+		hasPassword ? "import { useState } from 'react'" : "",
+		"import { authClient } from '#/lib/auth-client'",
+		"import { Button } from '#/components/ui/button'",
+		hasPassword ? "import { Input } from '#/components/ui/input'" : "",
+		hasPassword ? "import { Label } from '#/components/ui/label'" : "",
+		"import { Card, CardContent, CardHeader, CardTitle } from '#/components/ui/card'",
+	]
+		.filter(Boolean)
+		.join("\n");
+
+	return `${imports}
+
+export const Route = createFileRoute('/login')({
+  component: LoginPage,
+})
+
+function LoginPage() {${stateAndHandler}
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-sm">
+        <CardHeader>
+          <CardTitle>Log in</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">${social}${divider}${passwordForm}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+`;
+}
+
+export function signupPageTsx(): string {
+	return `import { createFileRoute, Link, useRouter } from '@tanstack/react-router'
+import { useState } from 'react'
+import { authClient } from '#/lib/auth-client'
+import { Button } from '#/components/ui/button'
+import { Input } from '#/components/ui/input'
+import { Label } from '#/components/ui/label'
+import { Card, CardContent, CardHeader, CardTitle } from '#/components/ui/card'
+
+export const Route = createFileRoute('/signup')({
+  component: SignupPage,
+})
+
+function SignupPage() {
+  const router = useRouter()
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    const { error } = await authClient.signUp.email({ name, email, password })
+    setLoading(false)
+    if (error) {
+      setError(error.message ?? 'Something went wrong.')
+      return
+    }
+    router.navigate({ to: '/' })
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-sm">
+        <CardHeader>
+          <CardTitle>Sign up</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" type="text" value={name} onChange={e => setName(e.target.value)} required autoComplete="name" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" type="email" value={email} onChange={e => setEmail(e.target.value)} required autoComplete="email" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input id="password" type="password" value={password} onChange={e => setPassword(e.target.value)} required autoComplete="new-password" minLength={8} />
+            </div>
+            {error && <p className="text-sm text-destructive">{error}</p>}
+            <Button type="submit" className="w-full" disabled={loading}>
+              {loading ? 'Signing up…' : 'Sign up'}
+            </Button>
+            <p className="text-sm text-center text-muted-foreground">
+              Already have an account? <Link to="/login" className="underline">Log in</Link>
+            </p>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+`;
+}
+
+export function dashboardPageTsx(): string {
+	return `import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { authClient } from '#/lib/auth-client'
+import { Button } from '#/components/ui/button'
+
+// Example protected page -- _authed.tsx needs at least one child route or
+// it collides with index.tsx on path "/" and \`tsr generate\` fails. Replace
+// this, or add more pages alongside it under src/routes/_authed/.
+export const Route = createFileRoute('/_authed/dashboard')({
+  component: DashboardPage,
+})
+
+function DashboardPage() {
+  const router = useRouter()
+  const { data: session } = authClient.useSession()
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <div className="text-center space-y-4">
+        <p className="text-lg">Signed in as {session?.user.email}</p>
+        <Button
+          onClick={() =>
+            authClient.signOut({
+              fetchOptions: { onSuccess: () => router.navigate({ to: '/login' }) },
+            })
+          }
+        >
+          Sign out
+        </Button>
+      </div>
+    </div>
+  )
+}
+`;
+}