From 4667c3bf003675a8fe3d64d2a912a0f329e2a2ac Mon Sep 17 00:00:00 2001
From: Ember <15190419+0xEmberZz@users.noreply.github.com>
Date: Sun, 9 Nov 2025 00:36:28 +0800
Subject: [PATCH] feat(ui): add password strength validation and toggle
 visibility in registration and reset password forms (#773) Co-authored-by:
 tinkle-community <tinklefund@gmail.com>

---
 web/package-lock.json                    |  10 ++
 web/package.json                         |   1 +
 web/src/components/LoginPage.tsx         |  44 +++----
 web/src/components/RegisterPage.tsx      | 141 ++++++++++++++++-------
 web/src/components/ResetPasswordPage.tsx |  77 ++++++++-----
 web/src/components/ui/input.tsx          |  24 ++++
 web/src/i18n/translations.ts             |  32 +++++
 web/src/lib/cn.ts                        |   7 ++
 8 files changed, 251 insertions(+), 85 deletions(-)
 create mode 100644 web/src/components/ui/input.tsx
 create mode 100644 web/src/lib/cn.ts

diff --git a/web/package-lock.json b/web/package-lock.json
index e1292d5d..9407dc46 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -16,6 +16,7 @@
         "lucide-react": "^0.552.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-password-checklist": "^1.8.1",
         "recharts": "^2.15.2",
         "swr": "^2.2.5",
         "tailwind-merge": "^3.3.1",
@@ -6982,6 +6983,15 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
     },
+    "node_modules/react-password-checklist": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmmirror.com/react-password-checklist/-/react-password-checklist-1.8.1.tgz",
+      "integrity": "sha512-QHIU/OejxoH4/cIfYLHaHLb+yYc8mtL0Vr4HTmULxQg3ZNdI9Ni/yYf7pwLBgsUh4sseKCV/GzzYHWpHqejTGw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">16.0.0-alpha || >17.0.0-alpha || >18.0.0-alpha"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
diff --git a/web/package.json b/web/package.json
index 53c6f31e..0825e2c1 100644
--- a/web/package.json
+++ b/web/package.json
@@ -22,6 +22,7 @@
     "lucide-react": "^0.552.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-password-checklist": "^1.8.1",
     "recharts": "^2.15.2",
     "swr": "^2.2.5",
     "tailwind-merge": "^3.3.1",
diff --git a/web/src/components/LoginPage.tsx b/web/src/components/LoginPage.tsx
index 1c2eae74..abf63959 100644
--- a/web/src/components/LoginPage.tsx
+++ b/web/src/components/LoginPage.tsx
@@ -3,6 +3,8 @@ import { useAuth } from '../contexts/AuthContext'
 import { useLanguage } from '../contexts/LanguageContext'
 import { t } from '../i18n/translations'
 import HeaderBar from './landing/HeaderBar'
+import { Eye, EyeOff } from 'lucide-react'
+import { Input } from './ui/input'
 
 export function LoginPage() {
   const { language } = useLanguage()
@@ -10,6 +12,7 @@ export function LoginPage() {
   const [step, setStep] = useState<'login' | 'otp'>('login')
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
   const [otpCode, setOtpCode] = useState('')
   const [userID, setUserID] = useState('')
   const [error, setError] = useState('')
@@ -172,16 +175,10 @@ export function LoginPage() {
                   >
                     {t('email', language)}
                   </label>
-                  <input
+                  <Input
                     type="email"
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
-                    className="w-full px-3 py-2 rounded"
-                    style={{
-                      background: 'var(--brand-black)',
-                      border: '1px solid var(--panel-border)',
-                      color: 'var(--brand-light-gray)',
-                    }}
                     placeholder={t('emailPlaceholder', language)}
                     required
                   />
@@ -194,19 +191,26 @@ export function LoginPage() {
                   >
                     {t('password', language)}
                   </label>
-                  <input
-                    type="password"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    className="w-full px-3 py-2 rounded"
-                    style={{
-                      background: 'var(--brand-black)',
-                      border: '1px solid var(--panel-border)',
-                      color: 'var(--brand-light-gray)',
-                    }}
-                    placeholder={t('passwordPlaceholder', language)}
-                    required
-                  />
+                  <div className="relative">
+                    <Input
+                      type={showPassword ? 'text' : 'password'}
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      className="pr-10"
+                      placeholder={t('passwordPlaceholder', language)}
+                      required
+                    />
+                    <button
+                      type="button"
+                      aria-label={showPassword ? '隐藏密码' : '显示密码'}
+                      onMouseDown={(e) => e.preventDefault()}
+                      onClick={() => setShowPassword((v) => !v)}
+                      className="absolute inset-y-0 right-2 w-8 h-10 flex items-center justify-center rounded bg-transparent p-0 m-0 border-0 outline-none focus:outline-none focus:ring-0 appearance-none cursor-pointer btn-icon"
+                      style={{ color: 'var(--text-secondary)' }}
+                    >
+                      {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                    </button>
+                  </div>
                   <div className="text-right mt-2">
                     <button
                       type="button"
diff --git a/web/src/components/RegisterPage.tsx b/web/src/components/RegisterPage.tsx
index 3773714b..010fa081 100644
--- a/web/src/components/RegisterPage.tsx
+++ b/web/src/components/RegisterPage.tsx
@@ -4,6 +4,9 @@ import { useLanguage } from '../contexts/LanguageContext'
 import { t } from '../i18n/translations'
 import { getSystemConfig } from '../lib/config'
 import HeaderBar from './landing/HeaderBar'
+import { Eye, EyeOff } from 'lucide-react'
+import { Input } from './ui/input'
+import PasswordChecklist from 'react-password-checklist'
 
 export function RegisterPage() {
   const { language } = useLanguage()
@@ -22,6 +25,9 @@ export function RegisterPage() {
   const [qrCodeURL, setQrCodeURL] = useState('')
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
+  const [passwordValid, setPasswordValid] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
 
   useEffect(() => {
     // 获取系统配置，检查是否开启内测模式
@@ -38,13 +44,10 @@ export function RegisterPage() {
     e.preventDefault()
     setError('')
 
-    if (password !== confirmPassword) {
-      setError(t('passwordMismatch', language))
-      return
-    }
-
-    if (password.length < 6) {
-      setError(t('passwordTooShort', language))
+    // 客户端强校验：长度>=8，包含大小写、数字、特殊字符，且两次一致
+    const strong = isStrongPassword(password)
+    if (!strong || password !== confirmPassword) {
+      setError(t('passwordNotMeetRequirements', language))
       return
     }
 
@@ -149,16 +152,10 @@ export function RegisterPage() {
                   >
                     {t('email', language)}
                   </label>
-                  <input
+                  <Input
                     type="email"
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
-                    className="w-full px-3 py-2 rounded"
-                    style={{
-                      background: 'var(--brand-black)',
-                      border: '1px solid var(--panel-border)',
-                      color: 'var(--brand-light-gray)',
-                    }}
                     placeholder={t('emailPlaceholder', language)}
                     required
                   />
@@ -171,19 +168,26 @@ export function RegisterPage() {
                   >
                     {t('password', language)}
                   </label>
-                  <input
-                    type="password"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    className="w-full px-3 py-2 rounded"
-                    style={{
-                      background: 'var(--brand-black)',
-                      border: '1px solid var(--panel-border)',
-                      color: 'var(--brand-light-gray)',
-                    }}
-                    placeholder={t('passwordPlaceholder', language)}
-                    required
-                  />
+                  <div className="relative">
+                    <Input
+                      type={showPassword ? 'text' : 'password'}
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      className="pr-10"
+                      placeholder={t('passwordPlaceholder', language)}
+                      required
+                    />
+                    <button
+                      type="button"
+                      aria-label={showPassword ? '隐藏密码' : '显示密码'}
+                      onMouseDown={(e) => e.preventDefault()}
+                      onClick={() => setShowPassword((v) => !v)}
+                      className="absolute inset-y-0 right-2 w-8 h-10 flex items-center justify-center rounded bg-transparent p-0 m-0 border-0 outline-none focus:outline-none focus:ring-0 appearance-none cursor-pointer btn-icon"
+                      style={{ color: 'var(--text-secondary)' }}
+                    >
+                      {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                    </button>
+                  </div>
                 </div>
 
                 <div>
@@ -193,18 +197,65 @@ export function RegisterPage() {
                   >
                     {t('confirmPassword', language)}
                   </label>
-                  <input
-                    type="password"
-                    value={confirmPassword}
-                    onChange={(e) => setConfirmPassword(e.target.value)}
-                    className="w-full px-3 py-2 rounded"
-                    style={{
-                      background: 'var(--brand-black)',
-                      border: '1px solid var(--panel-border)',
-                      color: 'var(--brand-light-gray)',
+                  <div className="relative">
+                    <Input
+                      type={showConfirmPassword ? 'text' : 'password'}
+                      value={confirmPassword}
+                      onChange={(e) => setConfirmPassword(e.target.value)}
+                      className="pr-10"
+                      placeholder={t('confirmPasswordPlaceholder', language)}
+                      required
+                    />
+                    <button
+                      type="button"
+                      aria-label={showConfirmPassword ? '隐藏密码' : '显示密码'}
+                      onMouseDown={(e) => e.preventDefault()}
+                      onClick={() => setShowConfirmPassword((v) => !v)}
+                      className="absolute inset-y-0 right-2 w-8 h-10 flex items-center justify-center rounded bg-transparent p-0 m-0 border-0 outline-none focus:outline-none focus:ring-0 appearance-none cursor-pointer btn-icon"
+                      style={{ color: 'var(--text-secondary)' }}
+                    >
+                      {showConfirmPassword ? (
+                        <EyeOff size={18} />
+                      ) : (
+                        <Eye size={18} />
+                      )}
+                    </button>
+                  </div>
+                </div>
+
+                {/* 密码规则清单（通过才允许提交） */}
+                <div
+                  className="mt-1 text-xs"
+                  style={{ color: 'var(--text-secondary)' }}
+                >
+                  <div
+                    className="mb-1"
+                    style={{ color: 'var(--brand-light-gray)' }}
+                  >
+                    {t('passwordRequirements', language)}
+                  </div>
+                  <PasswordChecklist
+                    rules={[
+                      'minLength',
+                      'capital',
+                      'lowercase',
+                      'number',
+                      'specialChar',
+                      'match',
+                    ]}
+                    minLength={8}
+                    value={password}
+                    valueAgain={confirmPassword}
+                    messages={{
+                      minLength: t('passwordRuleMinLength', language),
+                      capital: t('passwordRuleUppercase', language),
+                      lowercase: t('passwordRuleLowercase', language),
+                      number: t('passwordRuleNumber', language),
+                      specialChar: t('passwordRuleSpecial', language),
+                      match: t('passwordRuleMatch', language),
                     }}
-                    placeholder={t('confirmPasswordPlaceholder', language)}
-                    required
+                    className="space-y-1"
+                    onChange={(isValid) => setPasswordValid(isValid)}
                   />
                 </div>
 
@@ -256,7 +307,9 @@ export function RegisterPage() {
 
                 <button
                   type="submit"
-                  disabled={loading || (betaMode && !betaCode.trim())}
+                  disabled={
+                    loading || (betaMode && !betaCode.trim()) || !passwordValid
+                  }
                   className="w-full px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105 disabled:opacity-50"
                   style={{
                     background: 'var(--brand-yellow)',
@@ -500,3 +553,13 @@ export function RegisterPage() {
     </div>
   )
 }
+
+// 本地密码强度校验（与 UI 规则一致）
+function isStrongPassword(pwd: string): boolean {
+  if (!pwd || pwd.length < 8) return false
+  const hasUpper = /[A-Z]/.test(pwd)
+  const hasLower = /[a-z]/.test(pwd)
+  const hasNumber = /\d/.test(pwd)
+  const hasSpecial = /[@#$%!&*?]/.test(pwd)
+  return hasUpper && hasLower && hasNumber && hasSpecial
+}
diff --git a/web/src/components/ResetPasswordPage.tsx b/web/src/components/ResetPasswordPage.tsx
index 95e9918e..6cf2cef5 100644
--- a/web/src/components/ResetPasswordPage.tsx
+++ b/web/src/components/ResetPasswordPage.tsx
@@ -4,6 +4,8 @@ import { useLanguage } from '../contexts/LanguageContext'
 import { t } from '../i18n/translations'
 import { Header } from './Header'
 import { ArrowLeft, KeyRound, Eye, EyeOff } from 'lucide-react'
+import PasswordChecklist from 'react-password-checklist'
+import { Input } from './ui/input'
 
 export function ResetPasswordPage() {
   const { language } = useLanguage()
@@ -17,6 +19,7 @@ export function ResetPasswordPage() {
   const [loading, setLoading] = useState(false)
   const [showPassword, setShowPassword] = useState(false)
   const [showConfirmPassword, setShowConfirmPassword] = useState(false)
+  const [passwordValid, setPasswordValid] = useState(false)
 
   const handleResetPassword = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -112,16 +115,10 @@ export function ResetPasswordPage() {
                   >
                     {t('email', language)}
                   </label>
-                  <input
+                  <Input
                     type="email"
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
-                    className="w-full px-3 py-2 rounded"
-                    style={{
-                      background: '#0B0E11',
-                      border: '1px solid #2B3139',
-                      color: '#EAECEF',
-                    }}
                     placeholder={t('emailPlaceholder', language)}
                     required
                   />
@@ -135,24 +132,20 @@ export function ResetPasswordPage() {
                     {t('newPassword', language)}
                   </label>
                   <div className="relative">
-                    <input
+                    <Input
                       type={showPassword ? 'text' : 'password'}
                       value={newPassword}
                       onChange={(e) => setNewPassword(e.target.value)}
-                      className="w-full px-3 py-2 pr-10 rounded"
-                      style={{
-                        background: '#0B0E11',
-                        border: '1px solid #2B3139',
-                        color: '#EAECEF',
-                      }}
+                      className="pr-10"
                       placeholder={t('newPasswordPlaceholder', language)}
                       required
-                      minLength={6}
                     />
                     <button
                       type="button"
+                      onMouseDown={(e) => e.preventDefault()}
                       onClick={() => setShowPassword(!showPassword)}
-                      className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-300"
+                      className="absolute inset-y-0 right-2 w-8 h-10 flex items-center justify-center btn-icon"
+                      style={{ color: 'var(--text-secondary)' }}
                     >
                       {showPassword ? (
                         <EyeOff className="w-5 h-5" />
@@ -171,26 +164,22 @@ export function ResetPasswordPage() {
                     {t('confirmPassword', language)}
                   </label>
                   <div className="relative">
-                    <input
+                    <Input
                       type={showConfirmPassword ? 'text' : 'password'}
                       value={confirmPassword}
                       onChange={(e) => setConfirmPassword(e.target.value)}
-                      className="w-full px-3 py-2 pr-10 rounded"
-                      style={{
-                        background: '#0B0E11',
-                        border: '1px solid #2B3139',
-                        color: '#EAECEF',
-                      }}
+                      className="pr-10"
                       placeholder={t('confirmPasswordPlaceholder', language)}
                       required
-                      minLength={6}
                     />
                     <button
                       type="button"
+                      onMouseDown={(e) => e.preventDefault()}
                       onClick={() =>
                         setShowConfirmPassword(!showConfirmPassword)
                       }
-                      className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-300"
+                      className="absolute inset-y-0 right-2 w-8 h-10 flex items-center justify-center btn-icon"
+                      style={{ color: 'var(--text-secondary)' }}
                     >
                       {showConfirmPassword ? (
                         <EyeOff className="w-5 h-5" />
@@ -201,6 +190,42 @@ export function ResetPasswordPage() {
                   </div>
                 </div>
 
+                {/* 密码强度检查（必须通过才允许提交） */}
+                <div
+                  className="mt-1 text-xs"
+                  style={{ color: 'var(--text-secondary)' }}
+                >
+                  <div
+                    className="mb-1"
+                    style={{ color: 'var(--brand-light-gray)' }}
+                  >
+                    {t('passwordRequirements', language)}
+                  </div>
+                  <PasswordChecklist
+                    rules={[
+                      'minLength',
+                      'capital',
+                      'lowercase',
+                      'number',
+                      'specialChar',
+                      'match',
+                    ]}
+                    minLength={8}
+                    value={newPassword}
+                    valueAgain={confirmPassword}
+                    messages={{
+                      minLength: t('passwordRuleMinLength', language),
+                      capital: t('passwordRuleUppercase', language),
+                      lowercase: t('passwordRuleLowercase', language),
+                      number: t('passwordRuleNumber', language),
+                      specialChar: t('passwordRuleSpecial', language),
+                      match: t('passwordRuleMatch', language),
+                    }}
+                    className="space-y-1"
+                    onChange={(isValid) => setPasswordValid(isValid)}
+                  />
+                </div>
+
                 <div>
                   <label
                     className="block text-sm font-semibold mb-2"
@@ -246,7 +271,7 @@ export function ResetPasswordPage() {
 
                 <button
                   type="submit"
-                  disabled={loading || otpCode.length !== 6}
+                  disabled={loading || otpCode.length !== 6 || !passwordValid}
                   className="w-full px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105 disabled:opacity-50"
                   style={{ background: '#F0B90B', color: '#000' }}
                 >
diff --git a/web/src/components/ui/input.tsx b/web/src/components/ui/input.tsx
new file mode 100644
index 00000000..9b796241
--- /dev/null
+++ b/web/src/components/ui/input.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { cn } from '../../lib/cn'
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type = 'text', ...props }, ref) => {
+    return (
+      <input
+        ref={ref}
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded px-3 py-2 text-sm',
+          'bg-[var(--brand-black)] border border-[var(--panel-border)]',
+          'text-[var(--brand-light-gray)] focus:outline-none',
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+Input.displayName = 'Input'
diff --git a/web/src/i18n/translations.ts b/web/src/i18n/translations.ts
index 2a0f3760..5bada4e5 100644
--- a/web/src/i18n/translations.ts
+++ b/web/src/i18n/translations.ts
@@ -364,12 +364,23 @@ export const translations = {
     // Login & Register
     login: 'Sign In',
     register: 'Sign Up',
+    username: 'Username',
     email: 'Email',
     password: 'Password',
     confirmPassword: 'Confirm Password',
+    usernamePlaceholder: 'your username',
     emailPlaceholder: 'your@email.com',
     passwordPlaceholder: 'Enter your password',
     confirmPasswordPlaceholder: 'Re-enter your password',
+    passwordRequirements: 'Password requirements',
+    passwordRuleMinLength: 'Minimum 8 characters',
+    passwordRuleUppercase: 'At least 1 uppercase letter',
+    passwordRuleLowercase: 'At least 1 lowercase letter',
+    passwordRuleNumber: 'At least 1 number',
+    passwordRuleSpecial: 'At least 1 special character (@#$%!&*?)',
+    passwordRuleMatch: 'Passwords match',
+    passwordNotMeetRequirements:
+      'Password does not meet the security requirements',
     otpPlaceholder: '000000',
     loginTitle: 'Sign in to your account',
     registerTitle: 'Create a new account',
@@ -419,6 +430,12 @@ export const translations = {
     registrationFailed: 'Registration failed',
     verificationFailed: 'OTP verification failed',
     invalidCredentials: 'Invalid email or password',
+    weak: 'Weak',
+    medium: 'Medium',
+    strong: 'Strong',
+    passwordStrength: 'Password strength',
+    passwordStrengthHint:
+      'Use at least 8 characters with mix of letters, numbers and symbols',
     passwordMismatch: 'Passwords do not match',
     emailRequired: 'Email is required',
     passwordRequired: 'Password is required',
@@ -1089,12 +1106,22 @@ export const translations = {
     // Login & Register
     login: '登录',
     register: '注册',
+    username: '用户名',
     email: '邮箱',
     password: '密码',
     confirmPassword: '确认密码',
+    usernamePlaceholder: '请输入用户名',
     emailPlaceholder: '请输入邮箱地址',
     passwordPlaceholder: '请输入密码（至少6位）',
     confirmPasswordPlaceholder: '请再次输入密码',
+    passwordRequirements: '密码要求',
+    passwordRuleMinLength: '至少 8 位',
+    passwordRuleUppercase: '至少 1 个大写字母',
+    passwordRuleLowercase: '至少 1 个小写字母',
+    passwordRuleNumber: '至少 1 个数字',
+    passwordRuleSpecial: '至少 1 个特殊字符（@#$%!&*?）',
+    passwordRuleMatch: '两次密码一致',
+    passwordNotMeetRequirements: '密码不符合安全要求',
     otpPlaceholder: '000000',
     loginTitle: '登录到您的账户',
     registerTitle: '创建新账户',
@@ -1140,6 +1167,11 @@ export const translations = {
     registrationFailed: '注册失败',
     verificationFailed: 'OTP验证失败',
     invalidCredentials: '邮箱或密码错误',
+    weak: '弱',
+    medium: '中',
+    strong: '强',
+    passwordStrength: '密码强度',
+    passwordStrengthHint: '建议至少8位，包含大小写、数字和符号',
     passwordMismatch: '两次输入的密码不一致',
     emailRequired: '请输入邮箱',
     passwordRequired: '请输入密码',
diff --git a/web/src/lib/cn.ts b/web/src/lib/cn.ts
new file mode 100644
index 00000000..5f08aa04
--- /dev/null
+++ b/web/src/lib/cn.ts
@@ -0,0 +1,7 @@
+import { type ClassValue } from 'clsx'
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}