LukeParke/better-auth
1
0
Fork 0
mirror of https://github.com/LukeHagar/better-auth.git synced 2025-12-10 04:19:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

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

* chore:lint

---------

Co-authored-by: Bereket Engida <bekacru@gmail.com>
This commit is contained in:
Salvatore Noto
2024-11-24 01:35:29 -05:00
committed by GitHub
parent bdfc0457ec
commit 8a4076bdd3
3 changed files with 195 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/components/builder/code-tabs/index.tsx
View File

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

376
docs/components/builder/sign-in.tsx
View File

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

7
docs/components/builder/sign-up.tsx
View File

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