add automatic redirect from setup to login after completion
- Add SetupCompletionChecker component that monitors health status - Automatically redirect to /login when server becomes healthy after setup - Improves user experience by eliminating manual navigation step
This commit is contained in:
@@ -16,6 +16,7 @@ import AgentManagement from '@/pages/settings/AgentManagement';
|
||||
import Login from '@/pages/Login';
|
||||
import Setup from '@/pages/Setup';
|
||||
import { WelcomeChecker } from '@/components/WelcomeChecker';
|
||||
import { SetupCompletionChecker } from '@/components/SetupCompletionChecker';
|
||||
|
||||
// Protected route component
|
||||
const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
@@ -81,7 +82,14 @@ const App: React.FC = () => {
|
||||
{/* App routes */}
|
||||
<Routes>
|
||||
{/* Setup route - shown when server needs configuration */}
|
||||
<Route path="/setup" element={<Setup />} />
|
||||
<Route
|
||||
path="/setup"
|
||||
element={
|
||||
<SetupCompletionChecker>
|
||||
<Setup />
|
||||
</SetupCompletionChecker>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Login route */}
|
||||
<Route
|
||||
|
||||
48
aggregator-web/src/components/SetupCompletionChecker.tsx
Normal file
48
aggregator-web/src/components/SetupCompletionChecker.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
import { setupApi } from '@/lib/api';
|
||||
|
||||
interface SetupCompletionCheckerProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const SetupCompletionChecker: React.FC<SetupCompletionCheckerProps> = ({ children }) => {
|
||||
const [isSetupMode, setIsSetupMode] = useState<boolean | null>(null);
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
const checkSetupStatus = async () => {
|
||||
try {
|
||||
const data = await setupApi.checkHealth();
|
||||
|
||||
if (data.status === 'waiting for configuration') {
|
||||
setIsSetupMode(true);
|
||||
} else {
|
||||
setIsSetupMode(false);
|
||||
}
|
||||
} catch (error) {
|
||||
// If we can't reach the health endpoint, assume normal mode
|
||||
setIsSetupMode(false);
|
||||
}
|
||||
};
|
||||
|
||||
checkSetupStatus();
|
||||
|
||||
// Check periodically for configuration changes
|
||||
const interval = setInterval(checkSetupStatus, 3000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
// If we're on the setup page and server is now healthy, redirect to login
|
||||
useEffect(() => {
|
||||
if (isSetupMode === false && location.pathname === '/setup') {
|
||||
console.log('Setup completed - redirecting to login');
|
||||
navigate('/login', { replace: true });
|
||||
}
|
||||
}, [isSetupMode, location.pathname, navigate]);
|
||||
|
||||
// Always render children - this component only handles redirects
|
||||
return <>{children}</>;
|
||||
};
|
||||
Reference in New Issue
Block a user