From 6d21d4518564634aa5cbc1fa9a290844a5ef9ef0 Mon Sep 17 00:00:00 2001
From: oliver <zhoutianjun127@126.com>
Date: Sun, 13 Sep 2026 23:51:33 +0800
Subject: [PATCH] Embed login password eye toggle inside the field.

EOF

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 web/src/index.css           | 10 +++-
 web/src/pages/LoginPage.tsx | 92 ++++++++++++++++++-------------------
 2 files changed, 53 insertions(+), 49 deletions(-)

diff --git a/web/src/index.css b/web/src/index.css
index c9bfc21..d1970b9 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -8941,16 +8941,18 @@ pre {
 .login-card__password {
   position: relative;
   display: block;
+  width: 100%;
 }
 
 .login-card__password input {
-  padding-right: 44px;
+  padding-right: 44px !important;
 }
 
 .login-card__eye {
   position: absolute;
   top: 50%;
   right: 6px;
+  z-index: 2;
   transform: translateY(-50%);
   width: 34px;
   height: 34px;
@@ -8969,6 +8971,12 @@ pre {
   color: #93c5fd;
 }
 
+.login-card__eye:focus-visible {
+  outline: none;
+  color: #93c5fd;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
+}
+
 .login-card__eye svg {
   display: block;
   pointer-events: none;
diff --git a/web/src/pages/LoginPage.tsx b/web/src/pages/LoginPage.tsx
index 812c812..acd79f9 100644
--- a/web/src/pages/LoginPage.tsx
+++ b/web/src/pages/LoginPage.tsx
@@ -1,4 +1,4 @@
-import { Alert, Button, Card, Form, Input, InputGroup, Label, TextField } from "@heroui/react";
+import { Alert, Button, Card, Form, Input, Label, TextField } from "@heroui/react";
 import { useState, type FormEvent } from "react";
 import { Navigate, useSearchParams } from "react-router-dom";
 import { useAuth } from "../auth/AuthContext";
@@ -57,53 +57,49 @@ export function LoginPage() {
               <Input placeholder={t("auth.username")} />
             </TextField>
 
-            <TextField
-              fullWidth
-              name="password"
-              value={password}
-              onChange={setPassword}
-              isDisabled={busy || !ready}
-              autoComplete="current-password"
-            >
-              <Label className="login-card__sr">{t("auth.password")}</Label>
-              <InputGroup fullWidth>
-                <InputGroup.Input
-                  type={showPassword ? "text" : "password"}
-                  placeholder={t("auth.password")}
-                />
-                <InputGroup.Suffix>
-                  <Button
-                    isIconOnly
-                    size="sm"
-                    variant="ghost"
-                    aria-label={showPassword ? "Hide password" : "Show password"}
-                    onPress={() => setShowPassword((v) => !v)}
-                  >
-                    {showPassword ? (
-                      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true">
-                        <path
-                          d="M3 3l18 18M10.6 10.6a2.5 2.5 0 0 0 3.5 3.5M9.9 5.1A10 10 0 0 1 12 4.8c5.5 0 9.2 5.3 10.2 6.7a1.2 1.2 0 0 1 0 1.4c-.4.6-1.3 1.8-2.7 3M6.1 6.1C4.2 7.5 2.9 9.3 2 11.1a1.2 1.2 0 0 0 0 1.4C3 13.9 6.7 19.2 12 19.2c1.4 0 2.7-.3 3.9-.8"
-                          stroke="currentColor"
-                          strokeWidth="1.75"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                      </svg>
-                    ) : (
-                      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true">
-                        <path
-                          d="M2 12.2C3 10.5 6.7 4.8 12 4.8s9 5.7 10 7.4a1.2 1.2 0 0 1 0 1.2C21 15.1 17.3 20.8 12 20.8S3 15.1 2 13.4a1.2 1.2 0 0 1 0-1.2Z"
-                          stroke="currentColor"
-                          strokeWidth="1.75"
-                          strokeLinejoin="round"
-                        />
-                        <circle cx="12" cy="12.8" r="3" stroke="currentColor" strokeWidth="1.75" />
-                      </svg>
-                    )}
-                  </Button>
-                </InputGroup.Suffix>
-              </InputGroup>
-            </TextField>
+            <div className="login-card__password">
+              <TextField
+                fullWidth
+                name="password"
+                type={showPassword ? "text" : "password"}
+                value={password}
+                onChange={setPassword}
+                isDisabled={busy || !ready}
+                autoComplete="current-password"
+              >
+                <Label className="login-card__sr">{t("auth.password")}</Label>
+                <Input placeholder={t("auth.password")} />
+              </TextField>
+              <button
+                type="button"
+                className="login-card__eye"
+                aria-label={showPassword ? "Hide password" : "Show password"}
+                tabIndex={-1}
+                onClick={() => setShowPassword((v) => !v)}
+              >
+                {showPassword ? (
+                  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true">
+                    <path
+                      d="M3 3l18 18M10.6 10.6a2.5 2.5 0 0 0 3.5 3.5M9.9 5.1A10 10 0 0 1 12 4.8c5.5 0 9.2 5.3 10.2 6.7a1.2 1.2 0 0 1 0 1.4c-.4.6-1.3 1.8-2.7 3M6.1 6.1C4.2 7.5 2.9 9.3 2 11.1a1.2 1.2 0 0 0 0 1.4C3 13.9 6.7 19.2 12 19.2c1.4 0 2.7-.3 3.9-.8"
+                      stroke="currentColor"
+                      strokeWidth="1.75"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                ) : (
+                  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true">
+                    <path
+                      d="M2 12.2C3 10.5 6.7 4.8 12 4.8s9 5.7 10 7.4a1.2 1.2 0 0 1 0 1.2C21 15.1 17.3 20.8 12 20.8S3 15.1 2 13.4a1.2 1.2 0 0 1 0-1.2Z"
+                      stroke="currentColor"
+                      strokeWidth="1.75"
+                      strokeLinejoin="round"
+                    />
+                    <circle cx="12" cy="12.8" r="3" stroke="currentColor" strokeWidth="1.75" />
+                  </svg>
+                )}
+              </button>
+            </div>
 
             {error ? (
               <Alert status="danger" className="login-card__error">