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 Login from '@/pages/Login';
|
||||||
import Setup from '@/pages/Setup';
|
import Setup from '@/pages/Setup';
|
||||||
import { WelcomeChecker } from '@/components/WelcomeChecker';
|
import { WelcomeChecker } from '@/components/WelcomeChecker';
|
||||||
|
import { SetupCompletionChecker } from '@/components/SetupCompletionChecker';
|
||||||
|
|
||||||
// Protected route component
|
// Protected route component
|
||||||
const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||||
@@ -81,7 +82,14 @@ const App: React.FC = () => {
|
|||||||
{/* App routes */}
|
{/* App routes */}
|
||||||
<Routes>
|
<Routes>
|
||||||
{/* Setup route - shown when server needs configuration */}
|
{/* Setup route - shown when server needs configuration */}
|
||||||
<Route path="/setup" element={<Setup />} />
|
<Route
|
||||||
|
path="/setup"
|
||||||
|
element={
|
||||||
|
<SetupCompletionChecker>
|
||||||
|
<Setup />
|
||||||
|
</SetupCompletionChecker>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
{/* Login route */}
|
{/* Login route */}
|
||||||
<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