error pages

client/src/components/auth-verifier/index.tsx

@@ -11,9 +11,10 @@ import { useEffect, useState } from "react";
 import { useAppSelector } from "@/hooks/AppHooks";
 import type { ReactNode } from "react";
 import { get } from "@/utils/ApiClient";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 export const AuthVerifier = ({ children }: { children: ReactNode }) => {
   const location = useLocation();
+  const navigate = useNavigate();
   const isAuthRoute =
     ["/login", "/register"].includes(location.pathname) ||
     location.pathname.startsWith("/recovery") ||
@@ -36,6 +37,11 @@ export const AuthVerifier = ({ children }: { children: ReactNode }) => {
         dispatch(setAuthenticated(true));
         dispatch(setUser(user));
 
+        if (user.teams.length === 0) {
+          navigate("/no-team");
+          return;
+        }
+
         if (
           !selectedTeamId ||
           !user.teams.find((t) => t.id === selectedTeamId)

client/src/components/protected-route/index.tsx

@@ -5,11 +5,15 @@ export const ProtectedRoute: React.FC<React.PropsWithChildren> = ({
   children,
 }) => {
   const isAuthenticated = useAppSelector((state) => state.auth.isAuthenticated);
-
+  const user = useAppSelector((state) => state.auth.user);
   if (!isAuthenticated) {
     return <Navigate to="/login" replace />;
   }
 
+  if (user?.teams.length === 0) {
+    return <Navigate to="/no-team" replace />;
+  }
+
   if (!isAuthenticated) {
     return null;
   }

client/src/pages/auth/Login.tsx

@@ -62,6 +62,12 @@ const Login = () => {
     dispatch(setAuthenticated(true));
     dispatch(setUser(user));
     dispatch(setSelectedTeamId(user.teams[0]?.id || null));
+
+    if (user.teams.length === 0) {
+      navigate("/no-team");
+      return;
+    }
+
     navigate("/");
   };
 

client/src/pages/errors/NoTeam.tsx

@@ -0,0 +1,59 @@
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { BaseBox } from "@/components/design-elements";
+import { Button } from "@/components/inputs";
+
+import { useTheme } from "@mui/material/styles";
+import { useNavigate } from "react-router";
+import { useAppDispatch } from "@/hooks/AppHooks";
+import { usePost } from "@/hooks/UseApi";
+
+const NoTeam = () => {
+  const dispatch = useAppDispatch();
+  const theme = useTheme();
+  const navigate = useNavigate();
+  const { post } = usePost();
+
+  return (
+    <Stack
+      alignItems="center"
+      justifyContent="center"
+      minHeight="70vh"
+      paddingX={theme.spacing(8)}
+      paddingY={theme.spacing(6)}
+    >
+      <BaseBox
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          gap: theme.spacing(2),
+          maxWidth: 560,
+          width: "100%",
+          padding: theme.spacing(8),
+          margin: theme.spacing(2),
+        }}
+      >
+        <Typography variant="h1">You don't belong to a team yet</Typography>
+        <Typography color="text.secondary">
+          Please contact your administrator to be added to a team.
+        </Typography>
+        <Box>
+          <Button
+            variant="contained"
+            color="accent"
+            onClick={async () => {
+              await post("/auth/logout", {});
+              navigate("/login");
+              dispatch(logout());
+            }}
+          >
+            Logout
+          </Button>
+        </Box>
+      </BaseBox>
+    </Stack>
+  );
+};
+
+export default NoTeam;

client/src/pages/errors/NotFound.tsx

@@ -0,0 +1,5 @@
+const NotFound = () => {
+  return "Not Found, fail";
+};
+
+export default NotFound;

client/src/pages/teams/TeamMemberConfig.tsx

@@ -35,9 +35,11 @@ const TeamMemberConfig = () => {
   };
 
   const handleConfirm = async () => {
-    await deleteFn(`/team-members/${id}`);
-    mutate("/teams/joined");
-    navigate(-1);
+    const res = await deleteFn(`/team-members/${memberId}`);
+    if (res) {
+      mutate("/teams/joined");
+      navigate(-1);
+    }
     setDialogOpen(false);
   };
 

client/src/pages/uptime/CheckTable.tsx

@@ -18,7 +18,6 @@ const getHeaders = (t: Function, uiTimezone: string) => {
       id: "status",
       content: t("status"),
       render: (row) => {
-        console.log(row);
         return <StatusLabel status={row.status as MonitorStatus} />;
       },
     },

client/src/routes/Router.tsx

@@ -47,6 +47,9 @@ import ProfilePage from "@/pages/profile/Profile";
 
 import ExportPage from "@/pages/export/Export";
 
+import NoTeam from "@/pages/errors/NoTeam";
+import NotFound from "@/pages/errors/NotFound";
+
 import RootLayout from "@/components/layouts/RootLayout";
 import { ProtectedRoute } from "@/components/protected-route";
 
@@ -137,6 +140,8 @@ const Router = () => {
         <Route path="profile" element={<ProfilePage />} />
         <Route path="export" element={<ExportPage />} />
       </Route>
+      <Route path="no-team" element={<NoTeam />} />
+      <Route path="*" element={<NotFound />} />
     </Routes>
   );
 };