Add admin guard to settings route, conditionally render config option

Client/src/App.jsx

@@ -39,6 +39,7 @@ function App() {
   const DetailsWithAdminProp = withAdminProp(Details);
   const PageSpeedWithAdminProp = withAdminProp(PageSpeed);
   const MaintenanceWithAdminProp = withAdminProp(Maintenance);
+  const SettingsWithAdminProp = withAdminProp(Settings);
 
   const mode = useSelector((state) => state.ui.mode);
 
@@ -90,7 +91,7 @@ function App() {
           />
           <Route
             path="settings"
-            element={<ProtectedRoute Component={Settings} />}
+            element={<ProtectedRoute Component={SettingsWithAdminProp} />}
           />
           <Route
             path="account/profile"

Client/src/Pages/Settings/index.jsx

@@ -10,7 +10,8 @@ import "./index.css";
 import { useDispatch, useSelector } from "react-redux";
 import { createToast } from "../../Utils/toastUtils";
 import { deleteMonitorChecksByTeamId } from "../../Features/UptimeMonitors/uptimeMonitorsSlice";
-const Settings = () => {
+import PropTypes from "prop-types";
+const Settings = ({ isAdmin }) => {
   const theme = useTheme();
   const { user, authToken } = useSelector((state) => state.auth);
   const { isLoading } = useSelector((state) => state.uptimeMonitors);
@@ -102,37 +103,39 @@ const Settings = () => {
             />
           </Stack>
         </ConfigBox>
-        <ConfigBox>
-          <Box>
-            <Typography component="h1">History and monitoring</Typography>
-            <Typography sx={{ mt: theme.spacing(2) }}>
-              Define here for how long you want to keep the data. You can also
-              remove all past data.
-            </Typography>
-          </Box>
-          <Stack gap={theme.spacing(20)}>
-            <Field
-              type="text"
-              id="history-monitoring"
-              label="The days you want to keep monitoring history."
-              isOptional={true}
-              optionalLabel="0 for infinite"
-              placeholder="90"
-              value=""
-              onChange={() => logger.warn("Disabled")}
-            />
+        {isAdmin && (
+          <ConfigBox>
             <Box>
-              <Typography>Clear all stats. This is irreversible.</Typography>
-              <ButtonSpinner
-                isLoading={isLoading}
-                level="error"
-                label="Clear all stats"
-                onClick={handleClearStats}
-                sx={{ mt: theme.spacing(4) }}
-              />
+              <Typography component="h1">History and monitoring</Typography>
+              <Typography sx={{ mt: theme.spacing(2) }}>
+                Define here for how long you want to keep the data. You can also
+                remove all past data.
+              </Typography>
             </Box>
-          </Stack>
-        </ConfigBox>
+            <Stack gap={theme.spacing(20)}>
+              <Field
+                type="text"
+                id="history-monitoring"
+                label="The days you want to keep monitoring history."
+                isOptional={true}
+                optionalLabel="0 for infinite"
+                placeholder="90"
+                value=""
+                onChange={() => logger.warn("Disabled")}
+              />
+              <Box>
+                <Typography>Clear all stats. This is irreversible.</Typography>
+                <ButtonSpinner
+                  isLoading={isLoading}
+                  level="error"
+                  label="Clear all stats"
+                  onClick={handleClearStats}
+                  sx={{ mt: theme.spacing(4) }}
+                />
+              </Box>
+            </Stack>
+          </ConfigBox>
+        )}
         <ConfigBox>
           <Box>
             <Typography component="h1">About</Typography>
@@ -163,4 +166,7 @@ const Settings = () => {
   );
 };
 
+Settings.propTypes = {
+  isAdmin: PropTypes.bool,
+};
 export default Settings;