using axios response interceptor

client/src/Pages/Auth/Login/Login.jsx

@@ -1,16 +1,13 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { Box, Stack, Typography, Button } from "@mui/material";
-import Alert from "../../../Components/Alert";
+import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { credentials } from "../../../Validation/validation";
 import { login } from "../../../Features/Auth/authSlice";
 import { useDispatch, useSelector } from "react-redux";
 import { createToast } from "../../../Utils/toastUtils";
-import { networkService } from "../../../main";
 import Background from "../../../assets/Images/background-grid.svg?react";
 import Logo from "../../../assets/icons/checkmate-icon.svg?react";
-import { logger } from "../../../Utils/Logger";
 import "../index.css";
 import EmailStep from "./Components/EmailStep";
 import PasswordStep from "./Components/PasswordStep";
@@ -46,63 +43,13 @@ const Login = () => {
 	const [errors, setErrors] = useState({});
 	const [step, setStep] = useState(0);
 
-	// State variables for backend connectivity status and loading state
-	const [backendReachable, setBackendReachable] = useState(true);
-	const [isCheckingConnection, setIsCheckingConnection] = useState(false);
-	const [initialCheckComplete, setInitialCheckComplete] = useState(false);
 
-	// Function to check if the backend server is reachable and handle connectivity status
-	// Wrapped in useCallback to prevent recreation on each render
-	const checkConnectivity = useCallback(async (isRetry = false) => {
-		setIsCheckingConnection(true);
-		try {
-			const isReachable = await networkService.checkBackendReachability();
-			setBackendReachable(isReachable);
-			
-			// Early return if backend is not reachable
-			if (isReachable === false) {
-				// Show toast only on retry attempts
-				if (isRetry) {
-					createToast({
-						body: t("backendStillUnreachable"),
-					});
-				}
-				return;
-			}
-			
-			// Show reconnection toast if this was a retry attempt and backend is now reachable
-			if (isRetry) {
-				createToast({
-					body: t("backendReconnected"),
-				});
-			}
-		} catch (error) {
-			logger.error("Error checking backend connectivity:", error);
-			setBackendReachable(false);
-			
-			if (isRetry) {
-				createToast({
-					body: t("backendConnectionError"),
-				});
-			}
-		} finally {
-			setIsCheckingConnection(false);
-			setInitialCheckComplete(true);
-		}
-	}, [t]); // Removed navigate since we no longer use it within this function
-	
-	// Function to handle retry button click
-	const handleRetry = () => checkConnectivity(true);
 
 	useEffect(() => {
 		if (authToken) {
 			navigate("/uptime");
-			return;
 		}
-		
-		// Initial connectivity check
-		checkConnectivity();
-	}, [authToken, navigate, checkConnectivity]);
+	}, [authToken, navigate]);
 
 	const handleChange = (event) => {
 		const { value, id } = event.target;
@@ -125,14 +72,6 @@ const Login = () => {
 
 	const handleSubmit = async (event) => {
 		event.preventDefault();
-		
-		// Check backend connectivity before proceeding
-		if (!backendReachable) {
-			createToast({
-				body: t("backendUnreachableError"),
-			});
-			return;
-		}
 
 		if (step === 0) {
 			const { error } = credentials.validate(
@@ -260,61 +199,7 @@ const Login = () => {
 					},
 				}}
 			>
-				{!initialCheckComplete ? (
-					<Stack spacing={theme.spacing(6)} alignItems="center">
-						{/* Show loading state while doing initial connectivity check */}
-						<Typography variant="h1">{t("retryingConnection")}</Typography>
-					</Stack>
-				) : !backendReachable ? (
-					<Stack spacing={theme.spacing(6)} alignItems="center">
-						<Box sx={{ 
-								width: theme.spacing(220), 
-								mx: 'auto', 
-								'& .alert.row-stack': { 
-									width: '100%',
-									alignItems: 'center',
-									gap: theme.spacing(3)
-								} 
-							}}>
-							<Alert 
-								variant="error"
-								body={t("backendUnreachable")}
-								hasIcon={true}
-							/>
-						</Box>
-						<Box mt={theme.spacing(2)}>
-							<Typography 
-								variant="body1" 
-								align="center"
-								color={theme.palette.primary.contrastTextSecondary}
-							>
-								{t("backendUnreachableMessage")}
-							</Typography>
-						</Box>
-						<Box sx={{ mt: theme.spacing(4) }}>
-							<Button 
-								variant="contained" 
-								color="accent" 
-								onClick={handleRetry}
-								disabled={isCheckingConnection}
-								loading={isCheckingConnection}
-								className="dashboard-style-button"
-								sx={{ 
-									px: theme.spacing(6),
-									borderRadius: `${theme.shape.borderRadius}px !important`,
-									'&.MuiButtonBase-root': {
-										borderRadius: `${theme.shape.borderRadius}px !important`
-									},
-									'&.MuiButton-root': {
-										borderRadius: `${theme.shape.borderRadius}px !important`
-									}
-								}}
-							>
-								{isCheckingConnection ? t("retryingConnection") : t("retryConnection")}
-							</Button>
-						</Box>
-					</Stack>
-				) : step === 0 ? (
+				{step === 0 ? (
 					<EmailStep
 						form={form}
 						errors={errors}
@@ -332,39 +217,35 @@ const Login = () => {
 						/>
 					)
 				)}
-				{backendReachable && (
-					<>
-						<ForgotPasswordLabel
-							email={form.email}
-							errorEmail={errors.email}
-						/>
-						
-						{/* Registration link */}
-						<Box textAlign="center" >
-							<Typography
-								className="forgot-p"
-								display="inline-block"
-								color={theme.palette.primary.main}
-							>
-								{t("doNotHaveAccount")}
-							</Typography>
-							<Typography
-								component="span"
-								color={theme.palette.accent.main}
-								ml={theme.spacing(2)}
-								sx={{ 
-									cursor: 'pointer',
-									'&:hover': {
-										color: theme.palette.accent.darker
-									}
-								}}
-								onClick={() => navigate("/register")}
-							>
-								{t("registerHere")}
-							</Typography>
-						</Box>
-					</>
-				)}
+				<ForgotPasswordLabel
+					email={form.email}
+					errorEmail={errors.email}
+				/>
+				
+				{/* Registration link */}
+				<Box textAlign="center" >
+					<Typography
+						className="forgot-p"
+						display="inline-block"
+						color={theme.palette.primary.main}
+					>
+						{t("doNotHaveAccount")}
+					</Typography>
+					<Typography
+						component="span"
+						color={theme.palette.accent.main}
+						ml={theme.spacing(2)}
+						sx={{ 
+							cursor: 'pointer',
+							'&:hover': {
+								color: theme.palette.accent.darker
+							}
+						}}
+						onClick={() => navigate("/register")}
+					>
+						{t("registerHere")}
+					</Typography>
+				</Box>
 			</Stack>
 		</Stack>
 	);

client/src/Pages/ServerUnreachable.jsx

@@ -0,0 +1,171 @@
+import React, { useState } from "react";
+import { Box, Typography, Button, Stack } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import { useNavigate } from "react-router";
+import { networkService } from "../Utils/NetworkService";
+import Alert from "../Components/Alert";
+import { createToast } from "../Utils/toastUtils";
+import { useTranslation } from "react-i18next";
+import Background from "../assets/Images/background-grid.svg?react";
+import Logo from "../assets/icons/checkmate-icon.svg?react";
+import ThemeSwitch from "../Components/ThemeSwitch";
+import LanguageSelector from "../Components/LanguageSelector";
+
+const ServerUnreachable = () => {
+  const theme = useTheme();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  
+  // State for tracking connection check status
+  const [isCheckingConnection, setIsCheckingConnection] = useState(false);
+
+  const handleRetry = React.useCallback(async () => {
+    setIsCheckingConnection(true);
+    try {
+      // Try to connect to the backend with a simple API call
+      // We'll use any lightweight endpoint that doesn't require authentication
+      await networkService.axiosInstance.get('/health', { timeout: 5000 });
+      
+      // If successful, show toast and navigate to login page
+      createToast({
+        body: t("backendReconnected", "Connection to server restored"),
+      });
+      navigate("/login");
+    } catch (error) {
+      // If still unreachable, stay on this page and show toast
+      console.error("Server still unreachable:", error);
+      createToast({
+        body: t("backendStillUnreachable", "Server is still unreachable"),
+      });
+    } finally {
+      setIsCheckingConnection(false);
+    }
+  }, [navigate, t]);
+
+  return (
+    <Stack
+      className="login-page auth"
+      overflow="hidden"
+      sx={{
+        "& h1": {
+          color: theme.palette.primary.contrastText,
+          fontWeight: 600,
+          fontSize: 28,
+        },
+        "& p": { fontSize: 14, color: theme.palette.primary.contrastTextSecondary },
+        "& span": { fontSize: "inherit" },
+      }}
+    >
+      <Box
+        className="background-pattern-svg"
+        sx={{
+          "& svg g g:last-of-type path": {
+            stroke: theme.palette.primary.lowContrast,
+          },
+        }}
+      >
+        <Background style={{ width: "100%" }} />
+      </Box>
+      
+      {/* Header with logo */}
+      <Stack
+        direction="row"
+        alignItems="center"
+        justifyContent="space-between"
+        px={theme.spacing(12)}
+        gap={theme.spacing(4)}
+      >
+        <Stack
+          direction="row"
+          alignItems="center"
+          gap={theme.spacing(4)}
+        >
+          <Logo style={{ borderRadius: theme.shape.borderRadius }} />
+          <Typography sx={{ userSelect: "none" }}>Checkmate</Typography>
+        </Stack>
+        <Stack
+          direction="row"
+          spacing={2}
+          alignItems="center"
+        >
+          <LanguageSelector />
+          <ThemeSwitch />
+        </Stack>
+      </Stack>
+      <Stack
+        width="100%"
+        maxWidth={600}
+        flex={1}
+        justifyContent="center"
+        px={{ xs: theme.spacing(12), lg: theme.spacing(20) }}
+        pb={theme.spacing(20)}
+        mx="auto"
+        rowGap={theme.spacing(8)}
+        sx={{
+          "& > .MuiStack-root": {
+            border: 1,
+            borderRadius: theme.spacing(5),
+            borderColor: theme.palette.primary.lowContrast,
+            backgroundColor: theme.palette.primary.main,
+            padding: {
+              xs: theme.spacing(12),
+              sm: theme.spacing(20),
+            },
+          },
+        }}
+      >
+        <Stack spacing={theme.spacing(6)} alignItems="center">
+          <Box sx={{ 
+            width: theme.spacing(220), 
+            mx: 'auto', 
+            '& .alert.row-stack': { 
+              width: '100%',
+              alignItems: 'center',
+              gap: theme.spacing(3)
+            } 
+          }}>
+            <Alert 
+              variant="error"
+              body={t("backendUnreachable", "Server Unreachable")}
+              hasIcon={true}
+            />
+          </Box>
+          <Box mt={theme.spacing(2)}>
+            <Typography 
+              variant="body1" 
+              align="center"
+              color={theme.palette.primary.contrastTextSecondary}
+            >
+              {t("backendUnreachableMessage", "The Checkmate server is not responding. Please check your deployment configuration or try again later.")}
+            </Typography>
+          </Box>
+          <Box sx={{ mt: theme.spacing(4) }}>
+            <Button 
+              variant="contained" 
+              color="accent" 
+              onClick={handleRetry}
+              disabled={isCheckingConnection}
+              className="dashboard-style-button"
+              sx={{ 
+                px: theme.spacing(6),
+                borderRadius: `${theme.shape.borderRadius}px !important`,
+                '&.MuiButtonBase-root': {
+                  borderRadius: `${theme.shape.borderRadius}px !important`
+                },
+                '&.MuiButton-root': {
+                  borderRadius: `${theme.shape.borderRadius}px !important`
+                }
+              }}
+            >
+              {isCheckingConnection ? 
+                t("retryingConnection", "Retrying Connection...") : 
+                t("retryConnection", "Retry Connection")}
+            </Button>
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default ServerUnreachable;

client/src/Routes/index.jsx

@@ -36,6 +36,9 @@ import DistributedUptimeDetails from "../Pages/DistributedUptime/Details";
 import CreateDistributedUptimeStatus from "../Pages/DistributedUptimeStatus/Create";
 import DistributedUptimeStatus from "../Pages/DistributedUptimeStatus/Status";
 
+// Server Status
+import ServerUnreachable from "../Pages/ServerUnreachable";
+
 // Incidents
 import Incidents from "../Pages/Incidents";
 
@@ -279,6 +282,10 @@ const Routes = () => {
 				element={<DistributedUptimeStatus />}
 			/>
 
+			<Route
+				path="/server-unreachable"
+				element={<ServerUnreachable />}
+			/>
 			<Route
 				path="*"
 				element={<NotFound />}

client/src/Utils/NetworkService.js

@@ -45,6 +45,15 @@ class NetworkService {
 		this.axiosInstance.interceptors.response.use(
 			(response) => response,
 			(error) => {
+				// Handle network errors (server unreachable)
+				if (error.code === "ERR_NETWORK") {
+					// Navigate to server unreachable page
+					navigate("/server-unreachable");
+					// Return an empty resolved promise to stop the error propagation
+					return Promise.reject(error);
+				}
+				
+				// Handle authentication errors
 				if (error.response && error.response.status === 401) {
 					dispatch(clearAuthState());
 					dispatch(clearUptimeMonitorState());