From eed7602acbde68a3cc2fccd21d6d99b7c07d75c7 Mon Sep 17 00:00:00 2001
From: no-ai-world <darling.in.the.franxx.16.02@gmail.com>
Date: Sun, 12 Jul 2026 15:06:28 +0800
Subject: [PATCH] feat(webui): add login password field with show/hide toggle

---
 webui/src/features/auth/LoginPage.tsx | 15 ++++++++++++++-
 webui/src/i18n/translations.ts        |  2 ++
 webui/src/styles/theme.css            | 18 ++++++++++++++++++
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/webui/src/features/auth/LoginPage.tsx b/webui/src/features/auth/LoginPage.tsx
index 1e5a7377..b9b98857 100644
--- a/webui/src/features/auth/LoginPage.tsx
+++ b/webui/src/features/auth/LoginPage.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { LockKeyhole, ShieldCheck } from "lucide-react";
+import { Eye, EyeOff, LockKeyhole, ShieldCheck } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useLocation, useNavigate } from "react-router-dom";
@@ -25,6 +25,7 @@ export function LoginPage() {
   const setToken = useAuthStore((state) => state.setToken);
   const storedToken = useAuthStore((state) => state.token);
   const [submitError, setSubmitError] = useState("");
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 
   const {
     register,
@@ -121,9 +122,21 @@ export function LoginPage() {
               id="token"
               placeholder={t("粘贴 Bearer Token（仅本地保存）")}
               autoComplete="off"
+              type={isPasswordVisible ? "text" : "password"}
               invalid={Boolean(errors.token)}
               {...register("token")}
             />
+            <Button
+              variant="ghost"
+              size="sm"
+              className="password-visibility-toggle"
+              aria-label={isPasswordVisible ? t("隐藏") : t("显示")}
+              aria-pressed={isPasswordVisible}
+              title={isPasswordVisible ? t("隐藏") : t("显示")}
+              onClick={() => setIsPasswordVisible((visible) => !visible)}
+            >
+              {isPasswordVisible ? <EyeOff size={16} /> : <Eye size={16} />}
+            </Button>
           </div>
 
           {errors.token?.message ? <p className="field-error">{t(errors.token.message)}</p> : null}
diff --git a/webui/src/i18n/translations.ts b/webui/src/i18n/translations.ts
index 31566ba2..fcc93431 100644
--- a/webui/src/i18n/translations.ts
+++ b/webui/src/i18n/translations.ts
@@ -14,6 +14,8 @@ const EXACT_ZH_TO_EN: Record<string, string> = {
   "管理员登录": "Admin Login",
   "输入后端 `RESIN_ADMIN_TOKEN` 进入控制台。": "Enter backend `RESIN_ADMIN_TOKEN` to access the console.",
   "粘贴 Bearer Token（仅本地保存）": "Paste Bearer Token (stored locally only)",
+  "显示": "Show",
+  "隐藏": "Hide",
   "进入控制台": "Enter Console",
   "校验中...": "Verifying...",
   "请输入 Admin Token": "Please enter Admin Token",
diff --git a/webui/src/styles/theme.css b/webui/src/styles/theme.css
index c8c2d7c1..f3aa3f3a 100644
--- a/webui/src/styles/theme.css
+++ b/webui/src/styles/theme.css
@@ -2912,6 +2912,24 @@ a {
   color: var(--text-muted);
 }
 
+.login-form .input-with-icon {
+  position: relative;
+}
+
+.login-form .input-with-icon .input {
+  padding-right: 46px;
+}
+
+.password-visibility-toggle {
+  position: absolute;
+  top: 50%;
+  right: 6px;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  transform: translateY(-50%);
+}
+
 @media (max-width: 1120px) {
   .app-layout {
     grid-template-columns: 1fr;