refactor: replace window.location with useNavigate for routing in auth components (#1470)

Co-authored-by: Dean <afei.wuhao@gmail.com>

web/src/components/auth/LoginPage.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { Eye, EyeOff } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
 import { toast } from 'sonner'
 import { useAuth } from '../../contexts/AuthContext'
 import { useLanguage } from '../../contexts/LanguageContext'
@@ -13,12 +14,15 @@ import { invalidateSystemConfig } from '../../lib/config'
 export function LoginPage() {
   const { language } = useLanguage()
   const { login } = useAuth()
+  const navigate = useNavigate()
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [showPassword, setShowPassword] = useState(false)
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
-  const [expiredToastId, setExpiredToastId] = useState<string | number | null>(null)
+  const [expiredToastId, setExpiredToastId] = useState<string | number | null>(
+    null
+  )
   const [mode, setMode] = useState<UserMode>('beginner')
 
   // Clean up stale auth state once on mount
@@ -31,7 +35,9 @@ export function LoginPage() {
   // Show session-expired toast (re-runs on language change to update text)
   useEffect(() => {
     if (sessionStorage.getItem('from401') === 'true') {
-      const id = toast.warning(t('sessionExpired', language), { duration: Infinity })
+      const id = toast.warning(t('sessionExpired', language), {
+        duration: Infinity,
+      })
       setExpiredToastId(id)
       sessionStorage.removeItem('from401')
     }
@@ -48,7 +54,9 @@ export function LoginPage() {
         sessionStorage.removeItem('from401')
         invalidateSystemConfig()
         toast.success(t('forgotAccountSuccess', language))
-        setTimeout(() => { window.location.href = '/setup' }, 1500)
+        setTimeout(() => {
+          navigate('/setup')
+        }, 1500)
       } else {
         const data = await res.json()
         toast.error(data.error || 'Reset failed')
@@ -79,23 +87,27 @@ export function LoginPage() {
 
       <div className="flex-1 flex items-center justify-center px-4 py-16">
         <div className="w-full max-w-sm">
-
           {/* Logo + Title */}
           <div className="text-center mb-10">
             <div className="flex justify-center mb-5">
               <div className="relative">
                 <div className="absolute -inset-3 bg-nofx-gold/15 rounded-full blur-2xl" />
-                <img src="/icons/nofx.svg" alt="NOFX" className="w-14 h-14 relative z-10" />
+                <img
+                  src="/icons/nofx.svg"
+                  alt="NOFX"
+                  className="w-14 h-14 relative z-10"
+                />
               </div>
             </div>
-            <h1 className="text-2xl font-bold text-white mb-1.5">Welcome back</h1>
+            <h1 className="text-2xl font-bold text-white mb-1.5">
+              Welcome back
+            </h1>
             <p className="text-zinc-500 text-sm">Sign in to your account</p>
           </div>
 
           {/* Card */}
           <div className="bg-zinc-900/60 backdrop-blur-xl border border-zinc-800/80 rounded-2xl p-8 shadow-2xl">
             <form onSubmit={handleLogin} className="space-y-5">
-
               {/* Email */}
               <div>
                 <label className="block text-xs font-medium text-zinc-400 mb-2">
@@ -120,7 +132,7 @@ export function LoginPage() {
                   </label>
                   <button
                     type="button"
-                    onClick={() => window.location.href = '/reset-password'}
+                    onClick={() => navigate('/reset-password')}
                     className="text-xs text-zinc-500 hover:text-nofx-gold transition-colors"
                   >
                     {t('forgotPassword', language)}
@@ -164,7 +176,9 @@ export function LoginPage() {
                 disabled={loading}
                 className="w-full bg-nofx-gold hover:bg-yellow-400 active:scale-[0.98] text-black font-semibold py-3 rounded-xl text-sm transition-all disabled:opacity-50 disabled:cursor-not-allowed mt-2"
               >
-                {loading ? t('loggingIn', language) || 'Signing in...' : t('signIn', language) || 'Sign In'}
+                {loading
+                  ? t('loggingIn', language) || 'Signing in...'
+                  : t('signIn', language) || 'Sign In'}
               </button>
             </form>
 
@@ -178,7 +192,6 @@ export function LoginPage() {
               </button>
             </div>
           </div>
-
         </div>
       </div>
     </DeepVoidBackground>

web/src/components/auth/LoginRequiredOverlay.tsx

@@ -1,5 +1,6 @@
 import { motion, AnimatePresence } from 'framer-motion'
 import { LogIn, UserPlus, X, AlertTriangle, Terminal } from 'lucide-react'
+import { Link } from 'react-router-dom'
 import { DeepVoidBackground } from '../common/DeepVoidBackground'
 import { useLanguage } from '../../contexts/LanguageContext'
 import { t } from '../../i18n/translations'
@@ -10,7 +11,11 @@ interface LoginRequiredOverlayProps {
   featureName?: string
 }
 
-export function LoginRequiredOverlay({ isOpen, onClose, featureName }: LoginRequiredOverlayProps) {
+export function LoginRequiredOverlay({
+  isOpen,
+  onClose,
+  featureName,
+}: LoginRequiredOverlayProps) {
   const { language } = useLanguage()
 
   const tr = (key: string, params?: Record<string, string | number>) =>
@@ -20,11 +25,7 @@ export function LoginRequiredOverlay({ isOpen, onClose, featureName }: LoginRequ
     ? tr('subtitleWithFeature', { featureName })
     : tr('subtitleDefault')
 
-  const benefits = [
-    tr('benefit1'),
-    tr('benefit2'),
-    tr('benefit4'),
-  ]
+  const benefits = [tr('benefit1'), tr('benefit2'), tr('benefit4')]
 
   return (
     <AnimatePresence>
@@ -40,7 +41,6 @@ export function LoginRequiredOverlay({ isOpen, onClose, featureName }: LoginRequ
             disableAnimation
             onClick={onClose}
           >
-
             <motion.div
               initial={{ opacity: 0, scale: 0.95, y: 10 }}
               animate={{ opacity: 1, scale: 1, y: 0 }}
@@ -53,7 +53,9 @@ export function LoginRequiredOverlay({ isOpen, onClose, featureName }: LoginRequ
               <div className="flex items-center justify-between px-3 py-2 bg-nofx-bg-lighter border-b border-nofx-gold/20">
                 <div className="flex items-center gap-2">
                   <Terminal size={12} className="text-nofx-gold" />
-                  <span className="text-[10px] text-nofx-text-muted uppercase tracking-wider">auth_protocol.exe</span>
+                  <span className="text-[10px] text-nofx-text-muted uppercase tracking-wider">
+                    auth_protocol.exe
+                  </span>
                 </div>
                 <button
                   onClick={onClose}
@@ -75,7 +77,9 @@ export function LoginRequiredOverlay({ isOpen, onClose, featureName }: LoginRequ
                       <div className="absolute inset-0 bg-red-500/20 blur-xl animate-pulse"></div>
                       <div className="bg-nofx-bg border border-red-500/50 text-red-500 px-4 py-2 flex items-center gap-3 shadow-[0_0_15px_rgba(239,68,68,0.2)]">
                         <AlertTriangle size={18} className="animate-pulse" />
-                        <span className="font-bold tracking-widest text-sm uppercase">{tr('accessDenied')}</span>
+                        <span className="font-bold tracking-widest text-sm uppercase">
+                          {tr('accessDenied')}
+                        </span>
                       </div>
                     </div>
                   </div>
@@ -83,8 +87,12 @@ export function LoginRequiredOverlay({ isOpen, onClose, featureName }: LoginRequ
                   {/* Terminal Text */}
                   <div className="space-y-4 mb-8">
                     <div className="text-center">
-                      <h2 className="text-xl font-bold text-white uppercase tracking-wider mb-2">{tr('title')}</h2>
-                      <p className="text-nofx-gold text-xs uppercase tracking-widest border-b border-nofx-gold/20 pb-4 inline-block">{subtitle}</p>
+                      <h2 className="text-xl font-bold text-white uppercase tracking-wider mb-2">
+                        {tr('title')}
+                      </h2>
+                      <p className="text-nofx-gold text-xs uppercase tracking-widest border-b border-nofx-gold/20 pb-4 inline-block">
+                        {subtitle}
+                      </p>
                     </div>
 
                     <div className="bg-nofx-bg-lighter border-l-2 border-nofx-gold/20 p-3 my-4">
@@ -96,7 +104,10 @@ export function LoginRequiredOverlay({ isOpen, onClose, featureName }: LoginRequ
 
                     <div className="grid grid-cols-2 gap-2">
                       {benefits.map((benefit, i) => (
-                        <div key={i} className="flex items-center gap-2 text-[10px] text-nofx-text-muted uppercase tracking-wide">
+                        <div
+                          key={i}
+                          className="flex items-center gap-2 text-[10px] text-nofx-text-muted uppercase tracking-wide"
+                        >
                           <span className="text-nofx-gold">✓</span> {benefit}
                         </div>
                       ))}
@@ -105,22 +116,24 @@ export function LoginRequiredOverlay({ isOpen, onClose, featureName }: LoginRequ
 
                   {/* Action Buttons */}
                   <div className="space-y-3">
-                    <a
-                      href="/login"
+                    <Link
+                      to="/login"
                       className="flex items-center justify-center gap-2 w-full py-3 bg-nofx-gold text-black font-bold text-xs uppercase tracking-widest hover:bg-yellow-400 transition-all shadow-neon hover:shadow-[0_0_25px_rgba(240,185,11,0.4)] group"
                     >
                       <LogIn size={14} />
                       <span>{tr('loginButton')}</span>
-                      <span className="opacity-0 group-hover:opacity-100 transition-opacity -ml-2 group-hover:ml-0">-&gt;</span>
-                    </a>
+                      <span className="opacity-0 group-hover:opacity-100 transition-opacity -ml-2 group-hover:ml-0">
+                        -&gt;
+                      </span>
+                    </Link>
 
-                    <a
-                      href="/register"
+                    <Link
+                      to="/register"
                       className="flex items-center justify-center gap-2 w-full py-3 bg-transparent border border-nofx-gold/20 text-nofx-text-muted hover:text-white hover:border-nofx-gold font-bold text-xs uppercase tracking-widest transition-all hover:bg-nofx-gold/10"
                     >
                       <UserPlus size={14} />
                       <span>{tr('registerButton')}</span>
-                    </a>
+                    </Link>
                   </div>
 
                   <div className="mt-4 text-center">
@@ -131,14 +144,12 @@ export function LoginRequiredOverlay({ isOpen, onClose, featureName }: LoginRequ
                       [ {tr('abort')} ]
                     </button>
                   </div>
-
                 </div>
               </div>
 
               {/* Corner Accents */}
               <div className="absolute top-0 right-0 w-2 h-2 border-t border-r border-nofx-gold"></div>
               <div className="absolute bottom-0 left-0 w-2 h-2 border-b border-l border-nofx-gold"></div>
-
             </motion.div>
           </DeepVoidBackground>
         </motion.div>

web/src/components/auth/RegisterPage.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { Eye, EyeOff } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
 import PasswordChecklist from 'react-password-checklist'
 import { toast } from 'sonner'
 import { useAuth } from '../../contexts/AuthContext'
@@ -13,6 +14,7 @@ import { WhitelistFullPage } from '../common/WhitelistFullPage'
 export function RegisterPage() {
   const { language } = useLanguage()
   const { register } = useAuth()
+  const navigate = useNavigate()
   const [view, setView] = useState<'register' | 'whitelist-full'>('register')
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
@@ -61,7 +63,11 @@ export function RegisterPage() {
 
     setLoading(true)
     try {
-      const result = await register(email, password, betaCode.trim() || undefined)
+      const result = await register(
+        email,
+        password,
+        betaCode.trim() || undefined
+      )
 
       const isWhitelistError = (msg: string) => {
         const lowerMsg = msg.toLowerCase()
@@ -86,7 +92,10 @@ export function RegisterPage() {
       // success path is handled in AuthContext (auto login + navigation)
     } catch (e) {
       console.error('Registration error:', e)
-      const errorMsg = e instanceof Error ? e.message : 'Registration failed due to server error'
+      const errorMsg =
+        e instanceof Error
+          ? e.message
+          : 'Registration failed due to server error'
       const lowerMsg = errorMsg.toLowerCase()
       if (
         lowerMsg.includes('whitelist') ||
@@ -106,15 +115,20 @@ export function RegisterPage() {
   }
 
   return (
-    <DeepVoidBackground className="min-h-screen flex items-center justify-center py-12 font-mono" disableAnimation>
+    <DeepVoidBackground
+      className="min-h-screen flex items-center justify-center py-12 font-mono"
+      disableAnimation
+    >
       <div className="w-full max-w-lg relative z-10 px-6">
         <div className="flex justify-between items-center mb-8">
           <button
-            onClick={() => (window.location.href = '/')}
+            onClick={() => navigate('/')}
             className="flex items-center gap-2 text-zinc-500 hover:text-white transition-colors group px-3 py-1.5 rounded border border-transparent hover:border-zinc-700 bg-black/20 backdrop-blur-sm"
           >
             <div className="w-2 h-2 rounded-full bg-red-500 group-hover:animate-pulse"></div>
-            <span className="text-xs font-mono uppercase tracking-widest">&lt; ABORT_REGISTRATION</span>
+            <span className="text-xs font-mono uppercase tracking-widest">
+              &lt; ABORT_REGISTRATION
+            </span>
           </button>
         </div>
 
@@ -122,7 +136,11 @@ export function RegisterPage() {
           <div className="flex justify-center mb-6">
             <div className="relative">
               <div className="absolute -inset-2 bg-nofx-gold/20 rounded-full blur-xl animate-pulse"></div>
-              <img src="/icons/nofx.svg" alt="NoFx Logo" className="w-16 h-16 object-contain relative z-10 opacity-90" />
+              <img
+                src="/icons/nofx.svg"
+                alt="NoFx Logo"
+                className="w-16 h-16 object-contain relative z-10 opacity-90"
+              />
             </div>
           </div>
           <h1 className="text-3xl font-bold tracking-tighter text-white uppercase mb-2">
@@ -140,7 +158,7 @@ export function RegisterPage() {
             <div className="flex gap-1.5">
               <div
                 className="w-2.5 h-2.5 rounded-full bg-red-500/50 hover:bg-red-500 cursor-pointer transition-colors"
-                onClick={() => (window.location.href = '/')}
+                onClick={() => navigate('/')}
                 title="Close / Return Home"
               ></div>
               <div className="w-2.5 h-2.5 rounded-full bg-yellow-500/50"></div>
@@ -155,7 +173,9 @@ export function RegisterPage() {
             <div className="mb-6 font-mono text-xs space-y-1 text-zinc-500 border-b border-zinc-800/50 pb-4">
               <div className="flex gap-2">
                 <span className="text-emerald-500">➜</span>
-                <span>System Check: <span className="text-emerald-500">READY</span></span>
+                <span>
+                  System Check: <span className="text-emerald-500">READY</span>
+                </span>
               </div>
               <div className="flex gap-2">
                 <span className="text-emerald-500">➜</span>
@@ -165,7 +185,9 @@ export function RegisterPage() {
 
             <form onSubmit={handleRegister} className="space-y-5">
               <div>
-                <label className="block text-xs uppercase tracking-wider text-zinc-500 mb-1.5 ml-1 font-bold">{t('email', language)}</label>
+                <label className="block text-xs uppercase tracking-wider text-zinc-500 mb-1.5 ml-1 font-bold">
+                  {t('email', language)}
+                </label>
                 <input
                   type="email"
                   value={email}
@@ -178,7 +200,9 @@ export function RegisterPage() {
 
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-xs uppercase tracking-wider text-zinc-500 mb-1.5 ml-1 font-bold">{t('password', language)}</label>
+                  <label className="block text-xs uppercase tracking-wider text-zinc-500 mb-1.5 ml-1 font-bold">
+                    {t('password', language)}
+                  </label>
                   <div className="relative">
                     <input
                       type={showPassword ? 'text' : 'password'}
@@ -199,7 +223,9 @@ export function RegisterPage() {
                 </div>
 
                 <div>
-                  <label className="block text-xs uppercase tracking-wider text-zinc-500 mb-1.5 ml-1 font-bold">{t('confirmPassword', language)}</label>
+                  <label className="block text-xs uppercase tracking-wider text-zinc-500 mb-1.5 ml-1 font-bold">
+                    {t('confirmPassword', language)}
+                  </label>
                   <div className="relative">
                     <input
                       type={showConfirmPassword ? 'text' : 'password'}
@@ -211,10 +237,16 @@ export function RegisterPage() {
                     />
                     <button
                       type="button"
-                      onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                      onClick={() =>
+                        setShowConfirmPassword(!showConfirmPassword)
+                      }
                       className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-600 hover:text-zinc-400 transition-colors"
                     >
-                      {showConfirmPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                      {showConfirmPassword ? (
+                        <EyeOff size={16} />
+                      ) : (
+                        <Eye size={16} />
+                      )}
                     </button>
                   </div>
                 </div>
@@ -227,7 +259,14 @@ export function RegisterPage() {
                 </div>
                 <div className="text-xs font-mono text-zinc-400">
                   <PasswordChecklist
-                    rules={['minLength', 'capital', 'lowercase', 'number', 'specialChar', 'match']}
+                    rules={[
+                      'minLength',
+                      'capital',
+                      'lowercase',
+                      'number',
+                      'specialChar',
+                      'match',
+                    ]}
                     minLength={8}
                     value={password}
                     valueAgain={confirmPassword}
@@ -248,17 +287,25 @@ export function RegisterPage() {
 
               {betaMode && (
                 <div>
-                  <label className="block text-xs uppercase tracking-wider text-nofx-gold mb-1.5 ml-1 font-bold">Priority Access Code</label>
+                  <label className="block text-xs uppercase tracking-wider text-nofx-gold mb-1.5 ml-1 font-bold">
+                    Priority Access Code
+                  </label>
                   <input
                     type="text"
                     value={betaCode}
-                    onChange={(e) => setBetaCode(e.target.value.replace(/[^a-z0-9]/gi, '').toLowerCase())}
+                    onChange={(e) =>
+                      setBetaCode(
+                        e.target.value.replace(/[^a-z0-9]/gi, '').toLowerCase()
+                      )
+                    }
                     className="w-full bg-black/50 border border-zinc-700 rounded px-4 py-3 text-sm focus:border-nofx-gold focus:ring-1 focus:ring-nofx-gold/50 outline-none transition-all placeholder-zinc-800 text-white font-mono tracking-widest"
                     placeholder="XXXXXX"
                     maxLength={6}
                     required={betaMode}
                   />
-                  <p className="text-[10px] text-zinc-600 font-mono mt-1 ml-1">* CASE SENSITIVE ALPHANUMERIC</p>
+                  <p className="text-[10px] text-zinc-600 font-mono mt-1 ml-1">
+                    * CASE SENSITIVE ALPHANUMERIC
+                  </p>
                 </div>
               )}
 
@@ -270,7 +317,9 @@ export function RegisterPage() {
 
               <button
                 type="submit"
-                disabled={loading || (betaMode && !betaCode.trim()) || !passwordValid}
+                disabled={
+                  loading || (betaMode && !betaCode.trim()) || !passwordValid
+                }
                 className="w-full bg-nofx-gold text-black font-bold py-3 px-4 rounded text-sm tracking-wide uppercase hover:bg-yellow-400 transition-all transform active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed font-mono shadow-[0_0_15px_rgba(255,215,0,0.1)] hover:shadow-[0_0_25px_rgba(255,215,0,0.25)] flex items-center justify-center gap-2 group mt-4"
               >
                 {loading ? (
@@ -278,7 +327,9 @@ export function RegisterPage() {
                 ) : (
                   <>
                     <span>CREATE_ACCOUNT</span>
-                    <span className="group-hover:translate-x-1 transition-transform">-&gt;</span>
+                    <span className="group-hover:translate-x-1 transition-transform">
+                      -&gt;
+                    </span>
                   </>
                 )}
               </button>
@@ -295,14 +346,14 @@ export function RegisterPage() {
           <p className="text-xs font-mono text-zinc-500">
             EXISTING_OPERATOR?{' '}
             <button
-              onClick={() => (window.location.href = '/login')}
+              onClick={() => navigate('/login')}
               className="text-nofx-gold hover:underline hover:text-yellow-300 transition-colors ml-1 uppercase"
             >
               ACCESS TERMINAL
             </button>
           </p>
           <button
-            onClick={() => (window.location.href = '/')}
+            onClick={() => navigate('/')}
             className="text-[10px] text-zinc-600 hover:text-red-500 transition-colors uppercase tracking-widest hover:underline decoration-red-500/30 font-mono"
           >
             [ ABORT_REGISTRATION_RETURN_HOME ]

web/src/components/auth/RegistrationDisabled.test.tsx

@@ -1,8 +1,19 @@
 import { describe, it, expect, vi } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
 import { RegistrationDisabled } from './RegistrationDisabled'
 import { LanguageProvider } from '../../contexts/LanguageContext'
 
+const mockNavigate = vi.fn()
+
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom')
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  }
+})
+
 // Mock useLanguage hook
 vi.mock('../../contexts/LanguageContext', async () => {
   const actual = await vi.importActual('../../contexts/LanguageContext')
@@ -21,9 +32,11 @@ vi.mock('../../contexts/LanguageContext', async () => {
 describe('RegistrationDisabled Component', () => {
   const renderComponent = () => {
     return render(
-      <LanguageProvider>
-        <RegistrationDisabled />
-      </LanguageProvider>
+      <MemoryRouter>
+        <LanguageProvider>
+          <RegistrationDisabled />
+        </LanguageProvider>
+      </MemoryRouter>
     )
   }
 
@@ -48,7 +61,9 @@ describe('RegistrationDisabled Component', () => {
 
     it('should display registration closed message', () => {
       renderComponent()
-      const message = screen.getByText(/User registration is currently disabled/i)
+      const message = screen.getByText(
+        /User registration is currently disabled/i
+      )
       expect(message).toBeTruthy()
     })
 
@@ -61,19 +76,12 @@ describe('RegistrationDisabled Component', () => {
 
   describe('Navigation', () => {
     it('should navigate to login page when button is clicked', () => {
-      const pushStateSpy = vi.spyOn(window.history, 'pushState')
-      const dispatchEventSpy = vi.spyOn(window, 'dispatchEvent')
-
       renderComponent()
       const button = screen.getByRole('button', { name: /back to login/i })
 
       fireEvent.click(button)
 
-      expect(pushStateSpy).toHaveBeenCalledWith({}, '', '/login')
-      expect(dispatchEventSpy).toHaveBeenCalled()
-
-      pushStateSpy.mockRestore()
-      dispatchEventSpy.mockRestore()
+      expect(mockNavigate).toHaveBeenCalledWith('/login')
     })
   })
 

web/src/components/auth/RegistrationDisabled.tsx

@@ -1,12 +1,13 @@
+import { useNavigate } from 'react-router-dom'
 import { useLanguage } from '../../contexts/LanguageContext'
 import { t } from '../../i18n/translations'
 
 export function RegistrationDisabled() {
   const { language } = useLanguage()
+  const navigate = useNavigate()
 
   const handleBackToLogin = () => {
-    window.history.pushState({}, '', '/login')
-    window.dispatchEvent(new PopStateEvent('popstate'))
+    navigate('/login')
   }
 
   return (

web/src/components/auth/ResetPasswordPage.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { useAuth } from '../../contexts/AuthContext'
 import { useLanguage } from '../../contexts/LanguageContext'
 import { t } from '../../i18n/translations'
@@ -11,6 +12,7 @@ import { toast } from 'sonner'
 export function ResetPasswordPage() {
   const { language } = useLanguage()
   const { resetPassword } = useAuth()
+  const navigate = useNavigate()
   const [email, setEmail] = useState('')
   const [newPassword, setNewPassword] = useState('')
   const [confirmPassword, setConfirmPassword] = useState('')
@@ -41,8 +43,7 @@ export function ResetPasswordPage() {
       toast.success(t('resetPasswordSuccess', language) || '重置成功')
       // 3秒后跳转到登录页面
       setTimeout(() => {
-        window.history.pushState({}, '', '/login')
-        window.dispatchEvent(new PopStateEvent('popstate'))
+        navigate('/login')
       }, 3000)
     } else {
       const msg = result.message || t('resetPasswordFailed', language)
@@ -64,10 +65,7 @@ export function ResetPasswordPage() {
         <div className="w-full max-w-md">
           {/* Back to Login */}
           <button
-            onClick={() => {
-              window.history.pushState({}, '', '/login')
-              window.dispatchEvent(new PopStateEvent('popstate'))
-            }}
+            onClick={() => navigate('/login')}
             className="flex items-center gap-2 mb-6 text-sm hover:text-[#F0B90B] transition-colors"
             style={{ color: '#848E9C' }}
           >