From 8e5ddd6de80f89aa1e17127dc51ee4a2870504f2 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Mon, 21 Oct 2024 12:32:29 +0800
Subject: [PATCH] feat: add success state

---
 auth.ts               |  2 +-
 components/SignIn.tsx | 21 +++++++++++++++++++--
 messages/en.json      |  3 ++-
 messages/ja.json      |  3 ++-
 messages/zh-t.json    |  3 ++-
 messages/zh.json      |  3 ++-
 6 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/auth.ts b/auth.ts
index 71604fb..1b7c8f1 100644
--- a/auth.ts
+++ b/auth.ts
@@ -5,7 +5,7 @@ import getEnv from "./lib/env-entry";
 
 export const { handlers, signIn, signOut, auth } = NextAuth({
   secret: process.env.AUTH_SECRET ?? "this_is_nezha_dash_web_secret",
-  trustHost: process.env.AUTH_TRUST_HOST as boolean | undefined ?? true,
+  trustHost: (process.env.AUTH_TRUST_HOST as boolean | undefined) ?? true,
   pages: {
     signIn: "/",
   },
diff --git a/components/SignIn.tsx b/components/SignIn.tsx
index e17507d..31e6913 100644
--- a/components/SignIn.tsx
+++ b/components/SignIn.tsx
@@ -2,14 +2,18 @@
 
 import { getCsrfToken, signIn } from "next-auth/react";
 import { useTranslations } from "next-intl";
-import { useSearchParams, useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 
+import { Loader } from "./loading/Loader";
+
 export function SignIn() {
   const t = useTranslations("SignIn");
 
   const [csrfToken, setCsrfToken] = useState("");
   const [errorState, setErrorState] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [successState, setSuccessState] = useState(false);
 
   const search = useSearchParams();
   const error = search.get("error");
@@ -31,6 +35,7 @@ export function SignIn() {
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+    setLoading(true);
     const formData = new FormData(e.currentTarget);
     const password = formData.get("password");
     const res = await signIn("credentials", {
@@ -40,9 +45,12 @@ export function SignIn() {
     if (res?.error) {
       setErrorState(true);
     } else {
+      setErrorState(false);
+      setSuccessState(true);
       router.push("/");
       router.refresh();
     }
+    setLoading(false);
   };
 
   return (
@@ -58,6 +66,11 @@ export function SignIn() {
               {t("ErrorMessage")}
             </p>
           )}
+          {successState && (
+            <p className="text-green-500 text-sm font-semibold">
+              {t("SuccessMessage")}
+            </p>
+          )}
           <p className="text-base font-semibold">{t("SignInMessage")}</p>
           <input
             className="px-1 border-[1px] rounded-[5px]"
@@ -65,8 +78,12 @@ export function SignIn() {
             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">
+        <button
+          className=" px-1.5 py-0.5 w-fit flex items-center gap-1 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"
+          disabled={loading}
+        >
           {t("Submit")}
+          {loading && <Loader visible={true} />}
         </button>
       </section>
     </form>
diff --git a/messages/en.json b/messages/en.json
index 49e7536..93ea985 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -26,7 +26,8 @@
   "SignIn": {
     "SignInMessage": "Please enter the password",
     "Submit": "Login",
-    "ErrorMessage": "Invalid password"
+    "ErrorMessage": "Invalid password",
+    "SuccessMessage": "Login successful"
   },
   "ServerCardPopover": {
     "System": "System",
diff --git a/messages/ja.json b/messages/ja.json
index d89e131..e7c1fb8 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -26,7 +26,8 @@
   "SignIn": {
     "SignInMessage": "パスワードを入力してください",
     "Submit": "ログイン",
-    "ErrorMessage": "パスワードが間違っています"
+    "ErrorMessage": "パスワードが間違っています",
+    "SuccessMessage": "ログイン成功"
   },
   "ServerCardPopover": {
     "System": "システム",
diff --git a/messages/zh-t.json b/messages/zh-t.json
index b1bee23..2681dd8 100644
--- a/messages/zh-t.json
+++ b/messages/zh-t.json
@@ -26,7 +26,8 @@
   "SignIn": {
     "SignInMessage": "請輸入密碼",
     "Submit": "登入",
-    "ErrorMessage": "密碼錯誤"
+    "ErrorMessage": "密碼錯誤",
+    "SuccessMessage": "登入成功"
   },
   "ServerCardPopover": {
     "System": "系統",
diff --git a/messages/zh.json b/messages/zh.json
index 2786dad..4fb89e7 100644
--- a/messages/zh.json
+++ b/messages/zh.json
@@ -26,7 +26,8 @@
   "SignIn": {
     "SignInMessage": "请输入密码",
     "Submit": "登录",
-    "ErrorMessage": "密码错误"
+    "ErrorMessage": "密码错误",
+    "SuccessMessage": "登录成功"
   },
   "ServerCardPopover": {
     "System": "系统",