docs: Fix syntax errors and missing imports with auth form builder. (#640)

* Fix syntax errors and missing imports with auth form builder.

* chore:lint

---------

Co-authored-by: Bereket Engida <bekacru@gmail.com>

docs/components/builder/code-tabs/index.tsx

@@ -4,7 +4,7 @@ import { CodeEditor } from "./code-editor";
 import { useAtom } from "jotai";
 import { optionsAtom } from "../store";
 import { js_beautify } from "js-beautify";
-import { singUpString } from "../sign-up";
+import { signUpString } from "../sign-up";
 import { signInString } from "../sign-in";
 
 export default function CodeTabs() {
@@ -102,7 +102,7 @@ ${
 		initialFiles.push({
 			id: "4",
 			name: "sign-up.tsx",
-			content: singUpString,
+			content: signUpString,
 		});
 	}
 

docs/components/builder/sign-in.tsx

@@ -190,217 +190,217 @@ export default function SignIn() {
 }
 
 export const signInString = (options: any) => `"use client"
-	import { Button } from "@/components/ui/button";
-	import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-	import { Input } from "@/components/ui/input";
-	import { Label } from "@/components/ui/label";
-	import { useState } from "react";
-	import { Loader2 } from "lucide-react";
-	import { signIn } from "@/lib/auth-client";
-	
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { useState } from "react";
+import { Loader2, Key } from "lucide-react";
+import { signIn } from "@/lib/auth-client";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
 export default function SignIn() {
-	const [email, setEmail] = useState("");
-	const [password, setPassword] = useState("");
-	const [loading, setLoading] = useState(false);
-		
-	return (
-		<Card className="max-w-md">
-			<CardHeader>
-				<CardTitle className="text-lg md:text-xl">Sign In</CardTitle>
-				<CardDescription className="text-xs md:text-sm">
-					Enter your email below to login to your account
-				</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<div className="grid gap-4">
-					${
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  ${
+		options.rememberMe
+			? "const [rememberMe, setRememberMe] = useState(false);"
+			: ""
+	}
+  
+  return (
+    <Card className="max-w-md">
+      <CardHeader>
+        <CardTitle className="text-lg md:text-xl">Sign In</CardTitle>
+        <CardDescription className="text-xs md:text-sm">
+          Enter your email below to login to your account
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-4">
+          ${
 						options.email
 							? `<div className="grid gap-2">
-								<Label htmlFor="email">Email</Label>
-								<Input
-									id="email"
-									type="email"
-									placeholder="m@example.com"
-									required
-									onChange={(e) => {
-										setEmail(e.target.value);
-									}}
-									value={email}
-								/>
-							</div>
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="m@example.com"
+                required
+                onChange={(e) => {
+                  setEmail(e.target.value);
+                }}
+                value={email}
+              />
+            </div>
 
-							<div className="grid gap-2">
-								<div className="flex items-center">
-									<Label htmlFor="password">Password</Label>
-									${
-										options.forgetPassword
-											? `
-										<Link
-											href="#"
-											className="ml-auto inline-block text-sm underline"
-										>
-											Forgot your password?
-										</Link>
-									`
-											: ``
-									}
-								</div>
+            <div className="grid gap-2">
+              <div className="flex items-center">
+                <Label htmlFor="password">Password</Label>
+                ${
+									options.forgetPassword
+										? `<Link
+                    href="#"
+                    className="ml-auto inline-block text-sm underline"
+                  >
+                    Forgot your password?
+                  </Link>`
+										: ""
+								}
+              </div>
 
-								<Input
-									id="password"
-									type="password"
-									placeholder="password"
-									autoComplete="password"
-								/>
-							</div>
+              <Input
+                id="password"
+                type="password"
+                placeholder="password"
+                autoComplete="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </div>
 
-							${
-								options.rememberMe
-									? `<div className="flex items-center gap-2">
-										<Checkbox
-											onClick={() => {
-												setRememberMe(!rememberMe);
-											}}
-										/>
-										<Label>Remember me</Label>
-									</div>
-								`
-									: ""
-							}
-					`
+            ${
+							options.rememberMe
+								? `<div className="flex items-center gap-2">
+                <Checkbox
+                  id="remember"
+                  onClick={() => {
+                    setRememberMe(!rememberMe);
+                  }}
+                />
+                <Label htmlFor="remember">Remember me</Label>
+              </div>`
+								: ""
+						}`
 							: ""
 					}
 
-					${
+          ${
 						options.magicLink
-							? `
-						<div className="grid gap-2">
-							<Label htmlFor="email">Email</Label>
-							<Input
-								id="email"
-								type="email"
-								placeholder="m@example.com"
-								required
-								onChange={(e) => {
-									setEmail(e.target.value);
-								}}
-								value={email}
-							/>
-							<Button className="gap-2" onClick={async () => {}}>
-								Sign-in with Magic Link
-							</Button>
-						</div>
-					`
+							? `<div className="grid gap-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="m@example.com"
+                required
+                onChange={(e) => {
+                  setEmail(e.target.value);
+                }}
+                value={email}
+              />
+              <Button className="gap-2" onClick={async () => {
+                await signIn.magicLink({ email });
+              }}>
+                Sign-in with Magic Link
+              </Button>
+            </div>`
 							: ""
 					}
 
-					${
+          ${
 						options.email
-							? `
-						<Button
-							type="submit"
-							className="w-full"
-							disabled={loading}
-							onClick={async () => {
-								await signIn.email({ email, password });
-							}}
-						>
-							{loading ? (
-								<Loader2 size={16} className="animate-spin" />
-							) : (
-								"Login"
-							)}
-						</Button>
-					`
+							? `<Button
+              type="submit"
+              className="w-full"
+              disabled={loading}
+              onClick={async () => {
+                await signIn.email({ email, password });
+              }}
+            >
+              {loading ? (
+                <Loader2 size={16} className="animate-spin" />
+              ) : (
+                "Login"
+              )}
+            </Button>`
 							: ""
 					}
 
-					${
+          ${
 						options.passkey
-							? `
-						<Button
-							variant="secondary"
-							className="gap-2"
-							onClick={async () => {
-								await sigIn.passkey();
-							}}
-						>
-							<Key size={16} />
-							Sign-in with Passkey
-						</Button>
-					`
+							? `<Button
+              variant="secondary"
+              className="gap-2"
+              onClick={async () => {
+                await signIn.passkey();
+              }}
+            >
+              <Key size={16} />
+              Sign-in with Passkey
+            </Button>`
 							: ""
 					}
-					${
-						options.socialProviders.length > 0
-							? `<div
-						className={cn(
-							${
+
+          ${
+						options.socialProviders?.length > 0
+							? `<div className={cn(
+              "w-full gap-2 flex items-center",
+              ${
 								options.socialProviders.length > 3
-									? "w-full gap-2 flex items-center justify-between flex-wrap"
-									: "w-full gap-2 flex items-center justify-between flex-col"
-							},
-						)}
-					>
-						${Object.keys(socialProviders).map((provider) => {
-							if (options.socialProviders.includes(provider)) {
-								const { stringIcon } =
-									socialProviders[provider as keyof typeof socialProviders];
-								return `<Button
-										variant="outline"
-										className={cn(
-											${
-												options.socialProviders.length > 3
-													? "flex-grow"
-													: "w-full gap-2"
-											}
-										)}
-										onClick={async () => {
-											await signIn.social({ 
-												provider: "${provider}", 
-												callbackURL: "/dashboard" 
-											});
-										}}
-									>
-										${stringIcon}
-										${
-											options.socialProviders.length <= 3
-												? "Sign in with " +
-													provider.charAt(0).toUpperCase() +
-													provider.slice(1)
-												: ""
-										}
-									</Button>`;
+									? '"justify-between flex-wrap"'
+									: '"justify-between flex-col"'
 							}
-							return "";
-						})}
-					</div>`
+            )}>
+              ${options.socialProviders
+								.map((provider: string) => {
+									const icon =
+										socialProviders[provider as keyof typeof socialProviders]
+											?.stringIcon || "";
+									return `<Button
+                  variant="outline"
+                  className={cn(
+                    ${
+											options.socialProviders.length > 3
+												? '"flex-grow"'
+												: '"w-full gap-2"'
+										}
+                  )}
+                  onClick={async () => {
+                    await signIn.social({ 
+                      provider: "${provider}", 
+                      callbackURL: "/dashboard" 
+                    });
+                  }}
+                >
+                  ${icon}
+                  ${
+										options.socialProviders.length <= 3
+											? `Sign in with ${
+													provider.charAt(0).toUpperCase() + provider.slice(1)
+												}`
+											: ""
+									}
+                </Button>`;
+								})
+								.join("")}
+            </div>`
 							: ""
 					}
-					
-				</div>
-			</CardContent>
-			${
+        </div>
+      </CardContent>
+      ${
 				options.label
-					? `
-				<CardFooter>
-					<div className="flex justify-center w-full border-t py-4">
-						<p className="text-center text-xs text-neutral-500">
-							Powered by{" "}
-							<Link
-								href="https://better-auth.com"
-								className="underline"
-								target="_blank"
-							>
-								<span className="dark:text-orange-200/90">better-auth.</span>
-							</Link>
-						</p>
-					</div>
-				</CardFooter>
-			`
-					: ``
+					? `<CardFooter>
+          <div className="flex justify-center w-full border-t py-4">
+            <p className="text-center text-xs text-neutral-500">
+              Powered by{" "}
+              <Link
+                href="https://better-auth.com"
+                className="underline"
+                target="_blank"
+              >
+                <span className="dark:text-orange-200/90">better-auth.</span>
+              </Link>
+            </p>
+          </div>
+        </CardFooter>`
+					: ""
 			}
-	</Card>
-	)
-	}
-	`;
+    </Card>
+  );
+}`;

docs/components/builder/sign-up.tsx

@@ -176,7 +176,7 @@ async function convertImageToBase64(file: File): Promise<string> {
 	});
 }
 
-export const singUpString = `"use client";
+export const signUpString = `"use client";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -192,6 +192,7 @@ import { Label } from "@/components/ui/label";
 import { useState } from "react";
 import Image from "next/image";
 import { Loader2, X } from "lucide-react";
+import { signUp } from "@/lib/auth-client";
 import { toast } from "sonner";
 import { useRouter } from "next/navigation";
 
@@ -204,6 +205,7 @@ export function SignUp() {
 	const [image, setImage] = useState<File | null>(null);
 	const [imagePreview, setImagePreview] = useState<string | null>(null);
 	const router = useRouter();
+	const [loading, setLoading] = useState(false);
 
 	const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		const file = e.target.files?.[0];
@@ -216,7 +218,6 @@ export function SignUp() {
 			reader.readAsDataURL(file);
 		}
 	};
-	const [loading, setLoading] = useState(false);
 
 	return (
 		<Card className="z-50 rounded-md rounded-t-none max-w-md">
@@ -271,6 +272,7 @@ export function SignUp() {
 						<Label htmlFor="password">Password</Label>
 						<Input
 							id="password"
+							type="password"
 							value={password}
 							onChange={(e) => setPassword(e.target.value)}
 							autoComplete="new-password"
@@ -281,6 +283,7 @@ export function SignUp() {
 						<Label htmlFor="password">Confirm Password</Label>
 						<Input
 							id="password_confirmation"
+							type="password"
 							value={passwordConfirmation}
 							onChange={(e) => setPasswordConfirmation(e.target.value)}
 							autoComplete="new-password"