From 8a4076bdd35da01d7f4cdafc7e6e30c4c68dc511 Mon Sep 17 00:00:00 2001 From: Salvatore Noto <54959187+salvinoto@users.noreply.github.com> Date: Sun, 24 Nov 2024 01:35:29 -0500 Subject: [PATCH] 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 --- docs/components/builder/code-tabs/index.tsx | 4 +- docs/components/builder/sign-in.tsx | 376 ++++++++++---------- docs/components/builder/sign-up.tsx | 7 +- 3 files changed, 195 insertions(+), 192 deletions(-) diff --git a/docs/components/builder/code-tabs/index.tsx b/docs/components/builder/code-tabs/index.tsx index a6698b64..63f8be83 100644 --- a/docs/components/builder/code-tabs/index.tsx +++ b/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, }); } diff --git a/docs/components/builder/sign-in.tsx b/docs/components/builder/sign-in.tsx index 398d4ba8..76abe64e 100644 --- a/docs/components/builder/sign-in.tsx +++ b/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 ( - - - Sign In - - Enter your email below to login to your account - - - -
- ${ + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [loading, setLoading] = useState(false); + ${ + options.rememberMe + ? "const [rememberMe, setRememberMe] = useState(false);" + : "" + } + + return ( + + + Sign In + + Enter your email below to login to your account + + + +
+ ${ options.email ? `
- - { - setEmail(e.target.value); - }} - value={email} - /> -
+ + { + setEmail(e.target.value); + }} + value={email} + /> +
-
-
- - ${ - options.forgetPassword - ? ` - - Forgot your password? - - ` - : `` - } -
+
+
+ + ${ + options.forgetPassword + ? ` + Forgot your password? + ` + : "" + } +
- -
+ setPassword(e.target.value)} + /> +
- ${ - options.rememberMe - ? `
- { - setRememberMe(!rememberMe); - }} - /> - -
- ` - : "" - } - ` + ${ + options.rememberMe + ? `
+ { + setRememberMe(!rememberMe); + }} + /> + +
` + : "" + }` : "" } - ${ + ${ options.magicLink - ? ` -
- - { - setEmail(e.target.value); - }} - value={email} - /> - -
- ` + ? `
+ + { + setEmail(e.target.value); + }} + value={email} + /> + +
` : "" } - ${ + ${ options.email - ? ` - - ` + ? `` : "" } - ${ + ${ options.passkey - ? ` - - ` + ? `` : "" } - ${ - options.socialProviders.length > 0 - ? `
0 + ? `
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 ``; + ? '"justify-between flex-wrap"' + : '"justify-between flex-col"' } - return ""; - })} -
` + )}> + ${options.socialProviders + .map((provider: string) => { + const icon = + socialProviders[provider as keyof typeof socialProviders] + ?.stringIcon || ""; + return ``; + }) + .join("")} +
` : "" } - -
- - ${ + + + ${ options.label - ? ` - -
-

- Powered by{" "} - - better-auth. - -

-
- - ` - : `` + ? ` +
+

+ Powered by{" "} + + better-auth. + +

+
+ ` + : "" } - - ) - } - `; + + ); +}`; diff --git a/docs/components/builder/sign-up.tsx b/docs/components/builder/sign-up.tsx index f1644fa9..c24492fe 100644 --- a/docs/components/builder/sign-up.tsx +++ b/docs/components/builder/sign-up.tsx @@ -176,7 +176,7 @@ async function convertImageToBase64(file: File): Promise { }); } -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(null); const [imagePreview, setImagePreview] = useState(null); const router = useRouter(); + const [loading, setLoading] = useState(false); const handleImageChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; @@ -216,7 +218,6 @@ export function SignUp() { reader.readAsDataURL(file); } }; - const [loading, setLoading] = useState(false); return ( @@ -271,6 +272,7 @@ export function SignUp() { setPassword(e.target.value)} autoComplete="new-password" @@ -281,6 +283,7 @@ export function SignUp() { setPasswordConfirmation(e.target.value)} autoComplete="new-password"