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

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

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 ]