Maintenance Page Cleanup

Moved it into the react app instead of a separate html file.

Author: wmuldergov

.env.example

@@ -61,6 +61,7 @@ VITE_REPORT_WMS_LAYER=<report wms layer url>
 VITE_BCEID_REGISTER_URL=<URL for BCeID basic registration page>
 VITE_FROM_EMAIL=<default from address for outgoing emails>
 VITE_LEGACY_URL=<legacy URL for the old DriveBC site>
+VITE_MAINTENANCE_MODE=<true/false to indicate if site is in maintenance mode>
 
 # API
 DRIVEBC_INLAND_FERRY_API_BASE_URL=<inland ferry api url>

compose/frontend/default_maintenance.txt

@@ -12,13 +12,6 @@ mkdir -p "${SHARED_CONFIG}/NGINX_CONFIG"
 SITE_ASSETS="${SHARED_CONFIG}/SITE_ASSETS"
 NGINX_CONFIG="${SHARED_CONFIG}/NGINX_CONFIG"
 
-# --- Maintenance Mode Check ---
-if [ "$MAINTENANCE_MODE" = "true" ]; then
-    echo "Maintenance mode is enabled."
-    cp /etc/nginx/default_maintenance.txt "${NGINX_CONFIG}/default.conf"
-    exit 0
-fi
-
 echo "Copying /usr/share/nginx/html/ to ${SITE_ASSETS}..."
 cp -r /usr/share/nginx/html/* "${SITE_ASSETS}/"
 

compose/frontend/generate-config.sh

@@ -44,6 +44,7 @@ import Header from './Components/shared/header/Header';
 import MapPage from './pages/MapPage';
 import AuthModal from './AuthModal';
 // import ConsentModal from "./ConsentModal";
+import MaintenancePage from './pages/MaintenancePage';
 import NotFoundPage from './pages/NotFoundPage';
 import ProblemsPage from './pages/ProblemsPage';
 import ReportElectricalPage from './pages/ReportElectricalPage';
@@ -280,24 +281,29 @@ function App() {
 
   /* Rendering */
   // Main component
+  const isMaintenanceMode = window.MAINTENANCE_MODE === 'true' || window.MAINTENANCE_MODE === true;
+
   return (
     <AuthContext.Provider value={{ authContext, setAuthContext }}>
       <MapContext.Provider value={{ mapContext, setMapContext }}>
         <CamsContext.Provider value={{ camsContext, setCamsContext }}>
           <AlertContext.Provider value={{ alertMessage, setAlertMessage }}>
             <CMSContext.Provider value={{ cmsContext, setCMSContext }}>
               <EmergencyAlertContext.Provider value={{ emergencyAlertContext, setEmergencyAlertContext }}>
-                  <FeatureContext.Provider value={{ featureContext, setFeatureContext }}>
-                    <FilterContext.Provider value={{ filterContext, setFilterContext }}>
-                      <div className="App">
-                        <Header />
-
-                        <EmergencyAlert />
+                <FeatureContext.Provider value={{ featureContext, setFeatureContext }}>
+                  <FilterContext.Provider value={{ filterContext, setFilterContext }}>
+                    
+                    <div className="App">
+                      <Header isMaintenance={isMaintenanceMode} />
 
-                        <main id='main'>
+                      {!isMaintenanceMode && <EmergencyAlert />}
 
-                          <ScrollToTop />
+                      <main id='main'>
+                        <ScrollToTop />
 
+                        {isMaintenanceMode ? (
+                          <MaintenancePage />
+                        ) : (
                           <Routes>
                             <Route path="/" element={<MapPage />} />
                             <Route path="/my-cameras" element={<SavedCamerasPage />} />
@@ -315,24 +321,22 @@ function App() {
                             <Route path="/feedback" element={<FeedbackPage />} />
                             <Route path="/verify-email" element={<VerifyEmailPage />} />
                             <Route path="/emergency-alert-detail/:slug" element={<EmergencyAlertDetail />} />
-                            {/* Catch-all route for 404 errors */}
                             <Route path="*" element={<NotFoundPage />} />
                             <Route path="/problems" element={<ProblemsPage />} />
                             <Route path="/website-problem" element={<div>Website Problem or Suggestion Page</div>} />
                             <Route path="/highway-problem" element={<ReportRoadPage />} />
                             <Route path="/road-electrical-problem" element={<ReportElectricalPage />} />
                           </Routes>
+                        )}
+                      </main>
 
-                        </main>
-
-                        <AuthModal />
-
-                        <Alert alertMessage={alertMessage} closeAlert={() => setAlertMessage(null)} />
+                      <AuthModal />
+                      <Alert alertMessage={alertMessage} closeAlert={() => setAlertMessage(null)} />
+                      <Survey />
+                    </div>
 
-                        <Survey />
-                      </div>
-                    </FilterContext.Provider>
-                  </FeatureContext.Provider>
+                  </FilterContext.Provider>
+                </FeatureContext.Provider>
               </EmergencyAlertContext.Provider>
             </CMSContext.Provider>
           </AlertContext.Provider>

src/frontend/src/App.jsx

@@ -32,12 +32,32 @@ import logo from '../../..//images/dbc-header-logo.svg';
 // Styling
 import './Header.scss';
 
-export default function Header() {
+export default function Header({ isMaintenance }) {
   /* Setup */
   // Misc
   const xLargeScreen = useMediaQuery('only screen and (min-width : 1200px)');
-  const smallScreen = useMediaQuery('only screen and (max-width: 575px)');
 
+  if (isMaintenance) {
+    return (
+      <header className="maintenance-header"> {/* Added class here */}
+        <Navbar expand="xl">
+          <Container>
+            <div className='header'>
+              <div className='header-left'>
+                <Navbar.Brand href="/">
+                  <img className="header-logo" src={logo} alt="Government of British Columbia" />
+                </Navbar.Brand>
+                {/* Ensure the divider shows even in maintenance if screen is large */}
+                <div className="nav-divider"></div>
+              </div>
+            </div>
+          </Container>
+        </Navbar>
+      </header>
+    );
+  }
+
+  const smallScreen = useMediaQuery('only screen and (max-width: 575px)');
   // Check current page location
   const location = useLocation();
   const showSearch = ['/cameras', '/delays'].some(path => location.pathname.startsWith(path)) || location.pathname === '/';

src/frontend/src/Components/shared/header/Header.jsx

@@ -491,3 +491,21 @@
 		}
 	}
 }
+
+.maintenance-header {
+  .navbar {
+    .header-left {
+      padding: 10px 0 10px 20px; 
+
+      @media (min-width: 1200px) {
+        padding-left: 0; 
+      }
+    }
+    
+    .nav-divider {
+      @media (min-width: 1200px) {
+        display: block;
+      }
+    }
+  }
+}

src/frontend/src/Components/shared/header/Header.scss

@@ -25,3 +25,4 @@ export const DEPLOYMENT_TAG = `${getEnv('DEPLOYMENT_TAG')}`;
 export const RELEASE = `${getEnv('RELEASE')}`;
 export const FROM_EMAIL = `${getEnv('FROM_EMAIL')}`;
 export const LEGACY_URL = `${getEnv('LEGACY_URL')}`;
+export const MAINTENANCE_MODE = `${getEnv('MAINTENANCE_MODE')}`;

src/frontend/src/env.js

@@ -0,0 +1,25 @@
+// React
+import React from 'react';
+
+// Internal imports
+import Footer from '../Footer';
+
+// Styling
+import './MaintenancePage.scss';
+
+export default function MaintenancePage() {
+  document.title = 'DriveBC - Maintenance';
+
+  return (
+    <div className='maintenance-page'>
+      {/* Changed from Container to div */}
+      <div className='text-container'>
+        <h1>DriveBC is currently down for maintenance</h1>
+        <p>We're working on getting the site back up again as soon as possible.</p>
+        <p>In the meantime, please visit our <a href="https://x.com/DriveBC" target="_blank" rel="noreferrer">X (Twitter) page</a> for updates.</p>
+      </div>
+
+      <Footer />
+    </div>
+  );
+}

src/frontend/src/pages/MaintenancePage.jsx

@@ -0,0 +1,20 @@
+@import "../styles/variables.scss";
+
+.maintenance-page {
+  .text-container {
+    max-width: 50rem;
+    margin: 50px auto;
+    padding: 0 15px;
+    
+    color: $BC-Blue; 
+
+    h1, p {
+      color: inherit;
+      margin-bottom: 15px;
+    }
+
+    a {
+      color: inherit;
+    }
+  }
+}