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,18 +190,27 @@ 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 { 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 } from "lucide-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);
+  ${
+		options.rememberMe
+			? "const [rememberMe, setRememberMe] = useState(false);"
+			: ""
+	}
   
   return (
     <Card className="max-w-md">
@@ -234,15 +243,13 @@ export default function SignIn() {
                 <Label htmlFor="password">Password</Label>
                 ${
 									options.forgetPassword
-											? `
-										<Link
+										? `<Link
                     href="#"
                     className="ml-auto inline-block text-sm underline"
                   >
                     Forgot your password?
-										</Link>
-									`
-											: ``
+                  </Link>`
+										: ""
 								}
               </div>
 
@@ -251,6 +258,8 @@ export default function SignIn() {
                 type="password"
                 placeholder="password"
                 autoComplete="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
               />
             </div>
 
@@ -258,23 +267,21 @@ export default function SignIn() {
 							options.rememberMe
 								? `<div className="flex items-center gap-2">
                 <Checkbox
+                  id="remember"
                   onClick={() => {
                     setRememberMe(!rememberMe);
                   }}
                 />
-										<Label>Remember me</Label>
-									</div>
-								`
+                <Label htmlFor="remember">Remember me</Label>
+              </div>`
 								: ""
-							}
-					`
+						}`
 							: ""
 					}
 
           ${
 						options.magicLink
-							? `
-						<div className="grid gap-2">
+							? `<div className="grid gap-2">
               <Label htmlFor="email">Email</Label>
               <Input
                 id="email"
@@ -286,18 +293,18 @@ export default function SignIn() {
                 }}
                 value={email}
               />
-							<Button className="gap-2" onClick={async () => {}}>
+              <Button className="gap-2" onClick={async () => {
+                await signIn.magicLink({ email });
+              }}>
                 Sign-in with Magic Link
               </Button>
-						</div>
-					`
+            </div>`
 							: ""
 					}
 
           ${
 						options.email
-							? `
-						<Button
+							? `<Button
               type="submit"
               className="w-full"
               disabled={loading}
@@ -310,49 +317,47 @@ export default function SignIn() {
               ) : (
                 "Login"
               )}
-						</Button>
-					`
+            </Button>`
 							: ""
 					}
 
           ${
 						options.passkey
-							? `
-						<Button
+							? `<Button
               variant="secondary"
               className="gap-2"
               onClick={async () => {
-								await sigIn.passkey();
+                await signIn.passkey();
               }}
             >
               <Key size={16} />
               Sign-in with Passkey
-						</Button>
-					`
+            </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];
+									? '"justify-between flex-wrap"'
+									: '"justify-between flex-col"'
+							}
+            )}>
+              ${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"
+												? '"flex-grow"'
+												: '"w-full gap-2"'
 										}
                   )}
                   onClick={async () => {
@@ -362,28 +367,25 @@ export default function SignIn() {
                     });
                   }}
                 >
-										${stringIcon}
+                  ${icon}
                   ${
 										options.socialProviders.length <= 3
-												? "Sign in with " +
-													provider.charAt(0).toUpperCase() +
-													provider.slice(1)
+											? `Sign in with ${
+													provider.charAt(0).toUpperCase() + provider.slice(1)
+												}`
 											: ""
 									}
                 </Button>`;
-							}
-							return "";
-						})}
+								})
+								.join("")}
             </div>`
 							: ""
 					}
-					
         </div>
       </CardContent>
       ${
 				options.label
-					? `
-				<CardFooter>
+					? `<CardFooter>
           <div className="flex justify-center w-full border-t py-4">
             <p className="text-center text-xs text-neutral-500">
               Powered by{" "}
@@ -396,11 +398,9 @@ export default function SignIn() {
               </Link>
             </p>
           </div>
-				</CardFooter>
-			`
-					: ``
+        </CardFooter>`
+					: ""
 			}
     </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"