feat: add success state

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: "/",
   },

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>

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",

messages/ja.json

@@ -26,7 +26,8 @@
   "SignIn": {
     "SignInMessage": "パスワードを入力してください",
     "Submit": "ログイン",
-    "ErrorMessage": "パスワードが間違っています"
+    "ErrorMessage": "パスワードが間違っています",
+    "SuccessMessage": "ログイン成功"
   },
   "ServerCardPopover": {
     "System": "システム",

messages/zh-t.json

@@ -26,7 +26,8 @@
   "SignIn": {
     "SignInMessage": "請輸入密碼",
     "Submit": "登入",
-    "ErrorMessage": "密碼錯誤"
+    "ErrorMessage": "密碼錯誤",
+    "SuccessMessage": "登入成功"
   },
   "ServerCardPopover": {
     "System": "系統",

messages/zh.json

@@ -26,7 +26,8 @@
   "SignIn": {
     "SignInMessage": "请输入密码",
     "Submit": "登录",
-    "ErrorMessage": "密码错误"
+    "ErrorMessage": "密码错误",
+    "SuccessMessage": "登录成功"
   },
   "ServerCardPopover": {
     "System": "系统",