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,
}); });
} }

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

@@ -190,18 +190,27 @@ 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 { 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 { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { useState } from "react"; import { useState } from "react";
import { Loader2 } from "lucide-react"; import { Loader2, Key } from "lucide-react";
import { signIn } from "@/lib/auth-client"; 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);
${
options.rememberMe
? "const [rememberMe, setRememberMe] = useState(false);"
: ""
}
return ( return (
<Card className="max-w-md"> <Card className="max-w-md">
@@ -234,15 +243,13 @@ export default function SignIn() {
<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>
@@ -251,6 +258,8 @@ export default function SignIn() {
type="password" type="password"
placeholder="password" placeholder="password"
autoComplete="password" autoComplete="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/> />
</div> </div>
@@ -258,23 +267,21 @@ export default function SignIn() {
options.rememberMe options.rememberMe
? `<div className="flex items-center gap-2"> ? `<div className="flex items-center gap-2">
<Checkbox <Checkbox
id="remember"
onClick={() => { onClick={() => {
setRememberMe(!rememberMe); setRememberMe(!rememberMe);
}} }}
/> />
<Label>Remember me</Label> <Label htmlFor="remember">Remember me</Label>
</div> </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"
@@ -286,18 +293,18 @@ export default function SignIn() {
}} }}
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 Sign-in with Magic Link
</Button> </Button>
</div> </div>`
`
: "" : ""
} }
${ ${
options.email options.email
? ` ? `<Button
<Button
type="submit" type="submit"
className="w-full" className="w-full"
disabled={loading} disabled={loading}
@@ -310,49 +317,47 @@ export default function SignIn() {
) : ( ) : (
"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 sigIn.passkey(); await signIn.passkey();
}} }}
> >
<Key size={16} /> <Key size={16} />
Sign-in with Passkey Sign-in with Passkey
</Button> </Button>`
`
: "" : ""
} }
${ ${
options.socialProviders.length > 0 options.socialProviders?.length > 0
? `<div ? `<div className={cn(
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"'
}, }
)} )}>
> ${options.socialProviders
${Object.keys(socialProviders).map((provider) => { .map((provider: string) => {
if (options.socialProviders.includes(provider)) { const icon =
const { stringIcon } = socialProviders[provider as keyof typeof socialProviders]
socialProviders[provider as keyof typeof socialProviders]; ?.stringIcon || "";
return `<Button return `<Button
variant="outline" variant="outline"
className={cn( className={cn(
${ ${
options.socialProviders.length > 3 options.socialProviders.length > 3
? "flex-grow" ? '"flex-grow"'
: "w-full gap-2" : '"w-full gap-2"'
} }
)} )}
onClick={async () => { onClick={async () => {
@@ -362,28 +367,25 @@ export default function SignIn() {
}); });
}} }}
> >
${stringIcon} ${icon}
${ ${
options.socialProviders.length <= 3 options.socialProviders.length <= 3
? "Sign in with " + ? `Sign in with ${
provider.charAt(0).toUpperCase() + provider.charAt(0).toUpperCase() + provider.slice(1)
provider.slice(1) }`
: "" : ""
} }
</Button>`; </Button>`;
} })
return ""; .join("")}
})}
</div>` </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{" "}
@@ -396,11 +398,9 @@ export default function SignIn() {
</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"