@diagramers/admin/src/components/setup-guard/SetupGuard.js

Diagramers Admin Template - React starter for admin dashboards.

import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { useSelector } from 'react-redux';
import configService from 'services/configService';

const SetupGuard = ({ children }) => {
  const location = useLocation();
  const [isChecking, setIsChecking] = useState(true);
  const { isLogin } = useSelector((state) => state.auth);

  useEffect(() => {
    const checkSetupStatus = () => {
      try {
        // Check if setup is completed using ConfigService
        const isSetupCompleted = configService.isSetupCompleted();
        
        console.log('SetupGuard: Checking setup status...', {
          isSetupCompleted,
          currentPath: location.pathname,
          isLogin
        });
        
        // If not on setup page and setup is not completed, redirect to setup
        if (!isSetupCompleted && location.pathname !== '/setup') {
          console.log('SetupGuard: Setup not completed, redirecting to /setup');
          window.location.replace('/setup');
          return;
        }
        
        // If setup is completed and on setup page, redirect to dashboard
        if (isSetupCompleted && location.pathname === '/setup') {
          console.log('SetupGuard: Setup completed, redirecting to dashboard');
          window.location.replace('/dashboards/default');
          return;
        }
        
        console.log('SetupGuard: Setup check completed, allowing access');
        setIsChecking(false);
      } catch (error) {
        console.error('SetupGuard: Error checking setup status:', error);
        // If there's an error, assume setup is not completed and redirect
        if (location.pathname !== '/setup') {
          console.log('SetupGuard: Error occurred, redirecting to setup');
          window.location.replace('/setup');
        } else {
          setIsChecking(false);
        }
      }
    };

    // Always check setup status, regardless of login status
    // This ensures setup is forced for new projects
    checkSetupStatus();
  }, [location.pathname, isLogin]);

  // Show loading while checking setup status
  if (isChecking) {
    return (
      <div className="d-flex justify-content-center align-items-center" style={{ height: '100vh' }}>
        <div className="spinner-border text-primary" role="status">
          <span className="visually-hidden">Loading...</span>
        </div>
      </div>
    );
  }

  return children;
};

export default SetupGuard;