fix: Fixed redundant key input fields and corrected formatting on the frontend. (#566)

* Eliminate redundant key input fields in the front-end.

* go / react Formatting.

web/src/components/ResetPasswordPage.tsx

@@ -1,63 +1,66 @@
-import React, { useState } from 'react';
-import { useAuth } from '../contexts/AuthContext';
-import { useLanguage } from '../contexts/LanguageContext';
-import { t } from '../i18n/translations';
-import { Header } from './Header';
-import { ArrowLeft, KeyRound, Eye, EyeOff } from 'lucide-react';
+import React, { useState } from 'react'
+import { useAuth } from '../contexts/AuthContext'
+import { useLanguage } from '../contexts/LanguageContext'
+import { t } from '../i18n/translations'
+import { Header } from './Header'
+import { ArrowLeft, KeyRound, Eye, EyeOff } from 'lucide-react'
 
 export function ResetPasswordPage() {
-  const { language } = useLanguage();
-  const { resetPassword } = useAuth();
-  const [email, setEmail] = useState('');
-  const [newPassword, setNewPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [otpCode, setOtpCode] = useState('');
-  const [error, setError] = useState('');
-  const [success, setSuccess] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const { language } = useLanguage()
+  const { resetPassword } = useAuth()
+  const [email, setEmail] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [otpCode, setOtpCode] = useState('')
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
 
   const handleResetPassword = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-    setSuccess(false);
+    e.preventDefault()
+    setError('')
+    setSuccess(false)
 
     // 验证两次密码是否一致
     if (newPassword !== confirmPassword) {
-      setError(t('passwordMismatch', language));
-      return;
+      setError(t('passwordMismatch', language))
+      return
     }
 
-    setLoading(true);
+    setLoading(true)
 
-    const result = await resetPassword(email, newPassword, otpCode);
+    const result = await resetPassword(email, newPassword, otpCode)
 
     if (result.success) {
-      setSuccess(true);
+      setSuccess(true)
       // 3秒后跳转到登录页面
       setTimeout(() => {
-        window.history.pushState({}, '', '/login');
-        window.dispatchEvent(new PopStateEvent('popstate'));
-      }, 3000);
+        window.history.pushState({}, '', '/login')
+        window.dispatchEvent(new PopStateEvent('popstate'))
+      }, 3000)
     } else {
-      setError(result.message || t('resetPasswordFailed', language));
+      setError(result.message || t('resetPasswordFailed', language))
     }
 
-    setLoading(false);
-  };
+    setLoading(false)
+  }
 
   return (
     <div className="min-h-screen" style={{ background: '#0B0E11' }}>
       <Header simple />
 
-      <div className="flex items-center justify-center" style={{ minHeight: 'calc(100vh - 80px)' }}>
+      <div
+        className="flex items-center justify-center"
+        style={{ minHeight: 'calc(100vh - 80px)' }}
+      >
         <div className="w-full max-w-md">
           {/* Back to Login */}
           <button
             onClick={() => {
-              window.history.pushState({}, '', '/login');
-              window.dispatchEvent(new PopStateEvent('popstate'));
+              window.history.pushState({}, '', '/login')
+              window.dispatchEvent(new PopStateEvent('popstate'))
             }}
             className="flex items-center gap-2 mb-6 text-sm hover:text-[#F0B90B] transition-colors"
             style={{ color: '#848E9C' }}
@@ -68,7 +71,10 @@ export function ResetPasswordPage() {
 
           {/* Logo */}
           <div className="text-center mb-8">
-            <div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center rounded-full" style={{ background: 'rgba(240, 185, 11, 0.1)' }}>
+            <div
+              className="w-16 h-16 mx-auto mb-4 flex items-center justify-center rounded-full"
+              style={{ background: 'rgba(240, 185, 11, 0.1)' }}
+            >
               <KeyRound className="w-8 h-8" style={{ color: '#F0B90B' }} />
             </div>
             <h1 className="text-2xl font-bold" style={{ color: '#EAECEF' }}>
@@ -80,11 +86,17 @@ export function ResetPasswordPage() {
           </div>
 
           {/* Reset Password Form */}
-          <div className="rounded-lg p-6" style={{ background: '#1E2329', border: '1px solid #2B3139' }}>
+          <div
+            className="rounded-lg p-6"
+            style={{ background: '#1E2329', border: '1px solid #2B3139' }}
+          >
             {success ? (
               <div className="text-center py-8">
                 <div className="text-5xl mb-4">✅</div>
-                <p className="text-lg font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                <p
+                  className="text-lg font-semibold mb-2"
+                  style={{ color: '#EAECEF' }}
+                >
                   {t('resetPasswordSuccess', language)}
                 </p>
                 <p className="text-sm" style={{ color: '#848E9C' }}>
@@ -94,7 +106,10 @@ export function ResetPasswordPage() {
             ) : (
               <form onSubmit={handleResetPassword} className="space-y-4">
                 <div>
-                  <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                  <label
+                    className="block text-sm font-semibold mb-2"
+                    style={{ color: '#EAECEF' }}
+                  >
                     {t('email', language)}
                   </label>
                   <input
@@ -102,14 +117,21 @@ export function ResetPasswordPage() {
                     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' }}
+                    style={{
+                      background: '#0B0E11',
+                      border: '1px solid #2B3139',
+                      color: '#EAECEF',
+                    }}
                     placeholder={t('emailPlaceholder', language)}
                     required
                   />
                 </div>
 
                 <div>
-                  <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                  <label
+                    className="block text-sm font-semibold mb-2"
+                    style={{ color: '#EAECEF' }}
+                  >
                     {t('newPassword', language)}
                   </label>
                   <div className="relative">
@@ -118,7 +140,11 @@ export function ResetPasswordPage() {
                       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' }}
+                      style={{
+                        background: '#0B0E11',
+                        border: '1px solid #2B3139',
+                        color: '#EAECEF',
+                      }}
                       placeholder={t('newPasswordPlaceholder', language)}
                       required
                       minLength={6}
@@ -128,13 +154,20 @@ export function ResetPasswordPage() {
                       onClick={() => setShowPassword(!showPassword)}
                       className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-300"
                     >
-                      {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                      {showPassword ? (
+                        <EyeOff className="w-5 h-5" />
+                      ) : (
+                        <Eye className="w-5 h-5" />
+                      )}
                     </button>
                   </div>
                 </div>
 
                 <div>
-                  <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                  <label
+                    className="block text-sm font-semibold mb-2"
+                    style={{ color: '#EAECEF' }}
+                  >
                     {t('confirmPassword', language)}
                   </label>
                   <div className="relative">
@@ -143,23 +176,36 @@ export function ResetPasswordPage() {
                       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' }}
+                      style={{
+                        background: '#0B0E11',
+                        border: '1px solid #2B3139',
+                        color: '#EAECEF',
+                      }}
                       placeholder={t('confirmPasswordPlaceholder', language)}
                       required
                       minLength={6}
                     />
                     <button
                       type="button"
-                      onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                      onClick={() =>
+                        setShowConfirmPassword(!showConfirmPassword)
+                      }
                       className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-300"
                     >
-                      {showConfirmPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                      {showConfirmPassword ? (
+                        <EyeOff className="w-5 h-5" />
+                      ) : (
+                        <Eye className="w-5 h-5" />
+                      )}
                     </button>
                   </div>
                 </div>
 
                 <div>
-                  <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                  <label
+                    className="block text-sm font-semibold mb-2"
+                    style={{ color: '#EAECEF' }}
+                  >
                     {t('otpCode', language)}
                   </label>
                   <div className="text-center mb-3">
@@ -171,9 +217,15 @@ export function ResetPasswordPage() {
                   <input
                     type="text"
                     value={otpCode}
-                    onChange={(e) => setOtpCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
+                    onChange={(e) =>
+                      setOtpCode(e.target.value.replace(/\D/g, '').slice(0, 6))
+                    }
                     className="w-full px-3 py-2 rounded text-center text-2xl font-mono"
-                    style={{ background: '#0B0E11', border: '1px solid #2B3139', color: '#EAECEF' }}
+                    style={{
+                      background: '#0B0E11',
+                      border: '1px solid #2B3139',
+                      color: '#EAECEF',
+                    }}
                     placeholder={t('otpPlaceholder', language)}
                     maxLength={6}
                     required
@@ -181,7 +233,13 @@ export function ResetPasswordPage() {
                 </div>
 
                 {error && (
-                  <div className="text-sm px-3 py-2 rounded" style={{ background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D' }}>
+                  <div
+                    className="text-sm px-3 py-2 rounded"
+                    style={{
+                      background: 'rgba(246, 70, 93, 0.1)',
+                      color: '#F6465D',
+                    }}
+                  >
                     {error}
                   </div>
                 )}
@@ -192,7 +250,9 @@ export function ResetPasswordPage() {
                   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' }}
                 >
-                  {loading ? t('loading', language) : t('resetPasswordButton', language)}
+                  {loading
+                    ? t('loading', language)
+                    : t('resetPasswordButton', language)}
                 </button>
               </form>
             )}
@@ -200,5 +260,5 @@ export function ResetPasswordPage() {
         </div>
       </div>
     </div>
-  );
+  )
 }