refactor: adjust admin login page

vicanso · Nov 27, 2024 · 6e458f2 · 6e458f2
1 parent 66b4824
commit 6e458f2
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 10 deletions.
diff --git a/src/plugin/admin.rs b/src/plugin/admin.rs
@@ -242,7 +242,7 @@ impl AdminServe {
         }
         let path = req_header.uri.path();
         if path.len() <= 1
-            || Regex::new(r#".(js|css)$"#).unwrap().is_match(path)
+            || Regex::new(r#".(js|css|png)$"#).unwrap().is_match(path)
         {
             return true;
         }

diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -29,6 +29,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
+    "crypto-js": "^4.2.0",
     "i18next": "^23.16.4",
     "i18next-browser-languagedetector": "^8.0.0",
     "lucide-react": "^0.453.0",
@@ -48,6 +49,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@types/crypto-js": "^4.2.2",
     "@types/node": "^22.8.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

diff --git a/web/src/helpers/util.ts b/web/src/helpers/util.ts
@@ -1,4 +1,6 @@
 import { z } from "zod";
+import sha256hash from "crypto-js/sha256";
+import hex from "crypto-js/enc-hex";
 
 import HTTPError from "./http-error";
 export function isError(err: Error | HTTPError | unknown, category: string) {
@@ -80,11 +82,6 @@ export function formatLabel(label: string) {
 }
 
 export async function sha256(message: string) {
-  const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
-  const hashBuffer = await window.crypto.subtle.digest("SHA-256", msgUint8); // hash the message
-  const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array
-  const hashHex = hashArray
-    .map((b) => b.toString(16).padStart(2, "0"))
-    .join(""); // convert bytes to hex string
-  return hashHex;
+  const hashDigest = sha256hash(message);
+  return hex.stringify(hashDigest);
 }
diff --git a/web/src/i18n/en.ts b/web/src/i18n/en.ts
@@ -46,6 +46,7 @@ export default {
     account: "Account",
     password: "Password",
     submit: "Login",
+    fail: "Login Fail",
   },
   home: {
     dashboard: "Dashboard",

diff --git a/web/src/i18n/zh.ts b/web/src/i18n/zh.ts
@@ -40,6 +40,14 @@ export default {
     storage: "存储配置",
     searchPlaceholder: "输入关键字",
   },
+  login: {
+    title: "登录",
+    description: "请输入管理员账号与密码",
+    account: "账号",
+    password: "密码",
+    submit: "登录",
+    fail: "登录失败",
+  },
   home: {
     dashboard: "面板",
     basic: "基础信息",

diff --git a/web/src/pages/Login.tsx b/web/src/pages/Login.tsx
@@ -15,9 +15,13 @@ import { saveLoginToken } from "@/states/token";
 import useBasicState from "@/states/basic";
 import { goToHome } from "@/routers";
 import useConfigState from "@/states/config";
+import { useToast } from "@/hooks/use-toast";
+import { formatError } from "@/helpers/util";
 
 export default function Login() {
   const loginI18n = useI18n("login");
+  const { toast } = useToast();
+
   const [account, setAccount] = React.useState("");
   const [password, setPassword] = React.useState("");
   const [fetchBasicInfo] = useBasicState((state) => [state.fetch]);
@@ -29,13 +33,16 @@ export default function Login() {
       await fetchConfig();
       goToHome();
     } catch (err) {
-      console.error(err);
+      toast({
+        title: loginI18n("fail"),
+        description: formatError(err),
+      });
     }
   };
   return (
     <div className="grow lg:border-l overflow-auto p-4">
       <div className="flex justify-center mt-10">
-        <Card className="max-w-xl self-center">
+        <Card className="w-[500px] self-center">
           <CardHeader>
             <CardTitle>{loginI18n("title")}</CardTitle>
             <CardDescription>{loginI18n("description")}</CardDescription>
@@ -59,6 +66,11 @@ export default function Login() {
                 onChange={(e) => {
                   setPassword(e.target.value.trim());
                 }}
+                onKeyDown={(e) => {
+                  if (e.code == "Enter") {
+                    handleLogin();
+                  }
+                }}
               />
             </div>
           </CardContent>