CodeSandBox/monaco-editor-lsp-next
2
0
Fork 0
mirror of https://github.com/cfngc4594/monaco-editor-lsp-next.git synced 2025-05-18 15:26:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(auth): extract credentials sign-in and sign-up forms into separate components

Browse Source
This commit is contained in:
cfngc4594 2025-03-14 15:54:32 +08:00
parent 5f49d6841e
commit 0215644e6c
4 changed files with 77 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/credentials-sign-in.tsx Normal file
View File

@ -0,0 +1,28 @@
import { signIn } from "@/lib/auth";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
export function CredentialsSignIn() {
return (
<form
className="grid gap-6"
action={async (formData) => {
"use server";
await signIn("credentials", formData);
}}
>
<div className="grid gap-2">
<Label htmlFor="email">Email</Label>
<Input id="email" name="email" type="email" placeholder="m@example.com" required />
</div>
<div className="grid gap-2">
<Label htmlFor="password">Password</Label>
<Input id="password" name="password" type="password" required />
</div>
<Button type="submit" className="w-full">
Sign In
</Button>
</form>
);
}

45
src/components/credentials-sign-up.tsx Normal file
View File

@ -0,0 +1,45 @@
import bcrypt from "bcrypt";
import prisma from "@/lib/prisma";
import { authSchema } from "@/lib/zod";
import { redirect } from "next/navigation";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
export function CredentialsSignUp() {
return (
<form
className="grid gap-6"
action={async (formData) => {
"use server";
const email = formData.get("email");
const password = formData.get("password");
const validatedData = await authSchema.parseAsync({ email, password });
const saltRounds = 10;
const pwHash = await bcrypt.hash(validatedData.password, saltRounds);
await prisma.user.create({
data: {
email: validatedData.email,
password: pwHash,
},
});
redirect("/sign-in");
}}
>
<div className="grid gap-2">
<Label htmlFor="email">Email</Label>
<Input id="email" name="email" type="email" placeholder="m@example.com" required />
</div>
<div className="grid gap-2">
<Label htmlFor="password">Password</Label>
<Input id="password" name="password" type="password" required />
</div>
<Button type="submit" className="w-full">
Sign Up
</Button>
</form>
);
}

25
src/components/sign-in-form.tsx
View File

@ -1,8 +1,5 @@
import { signIn } from "@/lib/auth";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { GithubSignIn } from "@/components/github-sign-in";
import { CredentialsSignIn } from "@/components/credentials-sign-in";
export function SignInForm() {
return (
@ -13,25 +10,7 @@ export function SignInForm() {
Enter your email below to sign in to your account
</p>
</div>
<form
className="grid gap-6"
action={async (formData) => {
"use server";
await signIn("credentials", formData);
}}
>
<div className="grid gap-2">
<Label htmlFor="email">Email</Label>
<Input id="email" name="email" type="email" placeholder="m@example.com" required />
</div>
<div className="grid gap-2">
<Label htmlFor="password">Password</Label>
<Input id="password" name="password" type="password" required />
</div>
<Button type="submit" className="w-full">
Sign In
</Button>
</form>
<CredentialsSignIn />
<div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
<span className="relative z-10 bg-background px-2 text-muted-foreground">
Or

39
src/components/sign-up-form.tsx
View File

@ -1,11 +1,5 @@
import bcrypt from "bcrypt";
import prisma from "@/lib/prisma";
import { authSchema } from "@/lib/zod";
import { redirect } from "next/navigation";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { GithubSignIn } from "@/components/github-sign-in";
import { CredentialsSignUp } from "@/components/credentials-sign-up";
export function SignUpForm() {
return (
@ -16,36 +10,7 @@ export function SignUpForm() {
Enter your email below to sign up to your account
</p>
</div>
<form
className="grid gap-6"
action={async (formData) => {
"use server";
const email = formData.get("email");
const password = formData.get("password");
const validatedData = await authSchema.parseAsync({ email, password });
const saltRounds = 10;
const pwHash = await bcrypt.hash(validatedData.password, saltRounds);
await prisma.user.create({
data: {
email: validatedData.email,
password: pwHash
}
})
redirect("/sign-in");
}}
>
<div className="grid gap-2">
<Label htmlFor="email">Email</Label>
<Input id="email" name="email" type="email" placeholder="m@example.com" required />
</div>
<div className="grid gap-2">
<Label htmlFor="password">Password</Label>
<Input id="password" name="password" type="password" required />
</div>
<Button type="submit" className="w-full">
Sign Up
</Button>
</form>
<CredentialsSignUp />
<div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
<span className="relative z-10 bg-background px-2 text-muted-foreground">
Or