@helloleo/plugins 0.2.20 → 0.2.22

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

@@ -1,241 +0,0 @@
-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>
-  )
-}
-`;
-}