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

src/components/credentials-sign-in.tsx

@@ -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>
+  );
+}

src/components/credentials-sign-up.tsx

@@ -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>
+  );
+}

src/components/sign-in-form.tsx

@@ -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
+      <CredentialsSignIn />
-        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>
       <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

src/components/sign-up-form.tsx

@@ -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
+      <CredentialsSignUp />
-        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>
       <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