Feat: Enable admin password in admin mode (#540)

* WIP: save local changes before merging

* Enable admin password in admin mode #374

web/src/App.tsx

@@ -229,6 +229,10 @@ function App() {
     return <LoginPage />
   }
   if (route === '/register') {
+    if (systemConfig?.admin_mode) {
+      window.history.pushState({}, '', '/login');
+      return <LoginPage />;
+    }    
     return <RegisterPage />
   }
   if (route === '/reset-password') {
@@ -286,10 +290,15 @@ function App() {
 
   // Show landing page for root route
   if (route === '/' || route === '') {
-    return <LandingPage />
+    return <LandingPage isAdminMode={systemConfig?.admin_mode} />;
   }
 
-  // Show main app for authenticated users on other routes
+  // In admin mode, require authentication for any protected routes
+  if (systemConfig?.admin_mode && (!user || !token)) {
+    return <LoginPage />;
+  }
+
+  // Show main app for authenticated users on other routes (non-admin mode)
   if (!systemConfig?.admin_mode && (!user || !token)) {
     // Default to landing page when not authenticated and no specific route
     return <LandingPage />

web/src/components/LoginPage.tsx

@@ -1,12 +1,13 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react';
 import { useAuth } from '../contexts/AuthContext'
 import { useLanguage } from '../contexts/LanguageContext'
 import { t } from '../i18n/translations'
 import HeaderBar from './landing/HeaderBar'
+import { getSystemConfig } from '../lib/config';
 
 export function LoginPage() {
   const { language } = useLanguage()
-  const { login, verifyOTP } = useAuth()
+  const { login, loginAdmin, verifyOTP } = useAuth()
   const [step, setStep] = useState<'login' | 'otp'>('login')
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
@@ -14,6 +15,30 @@ export function LoginPage() {
   const [userID, setUserID] = useState('')
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
+  const [adminPassword, setAdminPassword] = useState('');
+  const [adminMode, setAdminMode] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    getSystemConfig()
+      .then((cfg) => {
+        setAdminMode(!!cfg.admin_mode);
+      })
+      .catch(() => {
+        setAdminMode(false);
+      });
+  }, []);
+
+  const handleAdminLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    const result = await loginAdmin(adminPassword);
+    if (!result.success) {
+      setError(result.message || t('loginFailed', language));
+    }
+    setLoading(false);
+  };
+
 
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -102,7 +127,39 @@ export function LoginPage() {
               border: '1px solid var(--panel-border)',
             }}
           >
-            {step === 'login' ? (
+          {adminMode ? (
+            <form onSubmit={handleAdminLogin} className="space-y-4">
+              <div>
+                <label className="block text-sm font-semibold mb-2" style={{ color: 'var(--brand-light-gray)' }}>
+                  管理员密码
+                </label>
+                <input
+                  type="password"
+                  value={adminPassword}
+                  onChange={(e) => setAdminPassword(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="请输入管理员密码"
+                  required
+                />
+              </div>
+
+              {error && (
+                <div className="text-sm px-3 py-2 rounded" style={{ background: 'var(--binance-red-bg)', color: 'var(--binance-red)' }}>
+                  {error}
+                </div>
+              )}
+
+              <button
+                type="submit"
+                disabled={loading}
+                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)', color: 'var(--brand-black)' }}
+              >
+                {loading ? t('loading', language) : '登录'}
+              </button>
+            </form>
+          ) : step === 'login' ? (
               <form onSubmit={handleLogin} className="space-y-4">
                 <div>
                   <label
@@ -263,21 +320,23 @@ export function LoginPage() {
           </div>
 
           {/* Register Link */}
-          <div className="text-center mt-6">
-            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-              还没有账户？{' '}
-              <button
-                onClick={() => {
-                  window.history.pushState({}, '', '/register')
-                  window.dispatchEvent(new PopStateEvent('popstate'))
-                }}
-                className="font-semibold hover:underline transition-colors"
-                style={{ color: 'var(--brand-yellow)' }}
-              >
-                立即注册
-              </button>
-            </p>
-          </div>
+          {!adminMode && (
+            <div className="text-center mt-6">
+              <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+                还没有账户？{' '}
+                <button
+                  onClick={() => {
+                    window.history.pushState({}, '', '/register')
+                    window.dispatchEvent(new PopStateEvent('popstate'))
+                  }}
+                  className="font-semibold hover:underline transition-colors"
+                  style={{ color: 'var(--brand-yellow)' }}
+                >
+                  立即注册
+                </button>
+              </p>
+            </div>
+          )}
         </div>
       </div>
     </div>

web/src/components/landing/HeaderBar.tsx

@@ -394,16 +394,16 @@ export default function HeaderBar({
                     >
                       {t('signIn', language)}
                     </a>
-                    <a
-                      href="/register"
-                      className="px-4 py-2 rounded font-semibold text-sm transition-colors hover:opacity-90"
-                      style={{
-                        background: 'var(--brand-yellow)',
-                        color: 'var(--brand-black)',
-                      }}
-                    >
+                    {!isAdminMode && (
+                      <a
+                        href='/register'
+                        className='px-4 py-2 rounded font-semibold text-sm transition-colors hover:opacity-90'
+                        style={{ background: 'var(--brand-yellow)', color: 'var(--brand-black)' }}
+                      >
                       {t('signUp', language)}
-                    </a>
+                      </a>
+                    )}
+
                   </div>
                 )
               )}
@@ -797,17 +797,19 @@ export default function HeaderBar({
                 >
                   {t('signIn', language)}
                 </a>
-                <a
-                  href="/register"
-                  className="block w-full px-4 py-2 rounded font-semibold text-sm text-center transition-colors"
-                  style={{
-                    background: 'var(--brand-yellow)',
-                    color: 'var(--brand-black)',
-                  }}
-                  onClick={() => setMobileMenuOpen(false)}
-                >
-                  {t('signUp', language)}
-                </a>
+                {!isAdminMode && (
+                  <a
+                    href="/register"
+                    className="block w-full px-4 py-2 rounded font-semibold text-sm text-center transition-colors"
+                    style={{
+                      background: 'var(--brand-yellow)',
+                      color: 'var(--brand-black)',
+                    }}
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    {t('signUp', language)}
+                  </a>
+                )}
               </div>
             )}
         </div>

web/src/contexts/AuthContext.tsx

@@ -18,6 +18,12 @@ interface AuthContextType {
     userID?: string
     requiresOTP?: boolean
   }>
+  loginAdmin: (
+    password: string
+  ) => Promise<{ 
+    success: boolean; 
+    message?: string 
+  }>; 
   register: (
     email: string,
     password: string,
@@ -56,21 +62,15 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
   useEffect(() => {
     // 先检查是否为管理员模式（使用带缓存的系统配置获取）
     getSystemConfig()
-      .then((data) => {
-        if (data.admin_mode) {
-          // 管理员模式下，模拟admin用户
-          setUser({ id: 'admin', email: 'admin@localhost' })
-          setToken('admin-mode')
-        } else {
-          // 非管理员模式，检查本地存储中是否有token
-          const savedToken = localStorage.getItem('auth_token')
-          const savedUser = localStorage.getItem('auth_user')
-
-          if (savedToken && savedUser) {
-            setToken(savedToken)
-            setUser(JSON.parse(savedUser))
-          }
+      .then(() => {
+        // 不再在管理员模式下模拟登录；统一检查本地存储
+        const savedToken = localStorage.getItem('auth_token');
+        const savedUser = localStorage.getItem('auth_user');
+        if (savedToken && savedUser) {
+          setToken(savedToken);
+          setUser(JSON.parse(savedUser));
         }
+
         setIsLoading(false)
       })
       .catch((err) => {
@@ -118,6 +118,32 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     return { success: false, message: '未知错误' }
   }
 
+    const loginAdmin = async (password: string) => {
+    try {
+      const response = await fetch('/api/admin-login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ password }),
+      });
+      const data = await response.json();
+      if (response.ok) {
+        const userInfo = { id: data.user_id || 'admin', email: data.email || 'admin@localhost' };
+        setToken(data.token);
+        setUser(userInfo);
+        localStorage.setItem('auth_token', data.token);
+        localStorage.setItem('auth_user', JSON.stringify(userInfo));
+        // 跳转到仪表盘
+        window.history.pushState({}, '', '/dashboard');
+        window.dispatchEvent(new PopStateEvent('popstate'));
+        return { success: true };
+      } else {
+        return { success: false, message: data.error || '登录失败' };
+      }
+    } catch (e) {
+      return { success: false, message: '登录失败，请重试' };
+    }
+  };
+
   const register = async (
     email: string,
     password: string,
@@ -256,6 +282,13 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
   }
 
   const logout = () => {
+    const savedToken = localStorage.getItem('auth_token');
+    if (savedToken) {
+      fetch('/api/logout', {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${savedToken}` },
+      }).catch(() => {/* ignore network errors on logout */});
+    }
     setUser(null)
     setToken(null)
     localStorage.removeItem('auth_token')
@@ -268,6 +301,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
         user,
         token,
         login,
+        loginAdmin,        
         register,
         verifyOTP,
         completeRegistration,

web/src/pages/LandingPage.tsx

@@ -14,7 +14,7 @@ import { useAuth } from '../contexts/AuthContext'
 import { useLanguage } from '../contexts/LanguageContext'
 import { t } from '../i18n/translations'
 
-export function LandingPage() {
+export function LandingPage({ isAdminMode = false }: { isAdminMode?: boolean }) {
   const [showLoginModal, setShowLoginModal] = useState(false)
   const { user, logout } = useAuth()
   const { language, setLanguage } = useLanguage()
@@ -31,6 +31,7 @@ export function LandingPage() {
         onLanguageChange={setLanguage}
         user={user}
         onLogout={logout}
+        isAdminMode={isAdminMode}        
         onPageChange={(page) => {
           console.log('LandingPage onPageChange called with:', page)
           if (page === 'competition') {