From 9ad5c1f2895f800133ad006e017d928f0ee69a9f Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Mon, 21 Oct 2024 10:32:12 +0800
Subject: [PATCH] refactor: auth component

---
 app/[locale]/(main)/layout.tsx |  6 +---
 components/SignIn.tsx          | 60 +++++++++++++++-------------------
 2 files changed, 27 insertions(+), 39 deletions(-)

diff --git a/app/[locale]/(main)/layout.tsx b/app/[locale]/(main)/layout.tsx
index e11be35..c237dc7 100644
--- a/app/[locale]/(main)/layout.tsx
+++ b/app/[locale]/(main)/layout.tsx
@@ -11,15 +11,11 @@ type DashboardProps = {
 export default async function MainLayout({ children }: DashboardProps) {
   const session = await auth();
 
-  if (!session && getEnv("SitePassword")) {
-    return <SignIn />;
-  }
-
   return (
     <div className="flex min-h-screen w-full flex-col">
       <main className="flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:p-10 md:pt-8">
         <Header />
-        {children}
+        {!session && getEnv("SitePassword") ? <SignIn /> : children}
         <Footer />
       </main>
     </div>
diff --git a/components/SignIn.tsx b/components/SignIn.tsx
index 272c47c..1bcca2d 100644
--- a/components/SignIn.tsx
+++ b/components/SignIn.tsx
@@ -1,13 +1,11 @@
 "use client";
 
-import Footer from "@/app/[locale]/(main)/footer";
-import Header from "@/app/[locale]/(main)/header";
 import { getCsrfToken } from "next-auth/react";
 import { useTranslations } from "next-intl";
 import { useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 
-export function SignIn({}) {
+export function SignIn() {
   const t = useTranslations("SignIn");
 
   const [csrfToken, setCsrfToken] = useState("");
@@ -31,36 +29,30 @@ export function SignIn({}) {
   }, []);
 
   return (
-    <div className="flex min-h-screen w-full flex-col">
-      <main className="flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:p-10 md:pt-8">
-        <Header />
-        <form
-          className="flex flex-col items-center justify-start gap-4 p-4 "
-          method="post"
-          action="/api/auth/callback/credentials"
-        >
-          <input type="hidden" name="csrfToken" value={csrfToken} />
-          <section className="flex flex-col items-start gap-2">
-            <label className="flex flex-col items-start gap-1 ">
-              {errorState && (
-                <p className="text-red-500 text-sm font-semibold">
-                  {t("ErrorMessage")}
-                </p>
-              )}
-              <p className="text-base font-semibold">{t("SignInMessage")}</p>
-              <input
-                className="px-1 border-[1px] rounded-[5px]"
-                name="password"
-                type="password"
-              />
-            </label>
-            <button className=" px-1.5 py-0.5 w-fit text-sm font-semibold rounded-[8px] border bg-card hover:brightness-95 transition-all text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none">
-              {t("Submit")}
-            </button>
-          </section>
-        </form>
-        <Footer />
-      </main>
-    </div>
+    <form
+      className="flex flex-col items-center justify-start gap-4 p-4 "
+      method="post"
+      action="/api/auth/callback/credentials"
+    >
+      <input type="hidden" name="csrfToken" value={csrfToken} />
+      <section className="flex flex-col items-start gap-2">
+        <label className="flex flex-col items-start gap-1 ">
+          {errorState && (
+            <p className="text-red-500 text-sm font-semibold">
+              {t("ErrorMessage")}
+            </p>
+          )}
+          <p className="text-base font-semibold">{t("SignInMessage")}</p>
+          <input
+            className="px-1 border-[1px] rounded-[5px]"
+            name="password"
+            type="password"
+          />
+        </label>
+        <button className=" px-1.5 py-0.5 w-fit text-sm font-semibold rounded-[8px] border bg-card hover:brightness-95 transition-all text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none">
+          {t("Submit")}
+        </button>
+      </section>
+    </form>
   );
 }