added developer options

src/App.js

@@ -30,6 +30,7 @@ function App() {
         <Route path="/dashboard/console" element={<Terminal/>} />
         <Route path="/settings" element={<SettingsMain/>} />
         <Route path="/settings/info" element={<SettingsInfo/>} />
+        
         <Route path="/maintenance" element={<ProgressBar/>} />
       </Routes>
     </Router>

src/Settings/SettingsMain.js

@@ -13,6 +13,8 @@ import {
   Typography,
   Menu,
   MenuItem,
+  Switch,
+  FormControlLabel
 } from '@mui/material';
 import PeopleIcon from '@mui/icons-material/PeopleOutline';
 import DashboardIcon from '@mui/icons-material/DashboardOutlined';
@@ -23,14 +25,16 @@ import AccountCircleIcon from '@mui/icons-material/AccountCircleOutlined';
 import { ThemeProvider } from '@mui/material/styles';
 import theme from '../theme';
 import deleteToken from '../core/deleteToken';
-import config from '../config.json';
+
+
+import {toggleDeveloperMode, getDeveloperMode } from '../core/configEdit';
 
 const drawerWidth = 240;
 
 export default function SettingsMain() {
   const [anchorEl, setAnchorEl] = useState(null);
   const openMenu = Boolean(anchorEl);
-
+  let [developerMode, setDeveloperMode] = useState(getDeveloperMode());
 
   const handleMenuClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -40,6 +44,11 @@ export default function SettingsMain() {
     setAnchorEl(null);
   };
 
+  const handleDeveloperModeChange = (e) => {
+    setDeveloperMode(e.target.checked);
+    toggleDeveloperMode();
+  };
+
   return (
     <ThemeProvider theme={theme}>
       <Box sx={{ display: 'flex' }}>
@@ -112,7 +121,7 @@ export default function SettingsMain() {
                 <PeopleIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
               <ListItemText primary="Access lists" sx={{ color: '#FFFFFF' }} />
             </ListItem>
-            {config.developerMode && (
+            {getDeveloperMode() && (
               <ListItem button key="Debug">
                   <BarChartIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
                 <ListItemText primary="Debug" sx={{ color: '#FFFFFF' }} />
@@ -127,8 +136,37 @@ export default function SettingsMain() {
         >
           <Toolbar />
           <Typography paragraph>
-            Welcome to the Settings!
+            Test settings page
           </Typography>
+          <Box sx={{ 
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            maxWidth: 600,
+            bgcolor: 'background.paper',
+            p: 3,
+            borderRadius: 2,
+            boxShadow: 1
+          }}>
+            <Typography variant="h6" sx={{ color: 'primary.main' }}>
+              Developer Settings
+            </Typography>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={developerMode}
+                  onChange={() => {
+                    setDeveloperMode(!developerMode);
+                    toggleDeveloperMode()
+                  }}
+                />
+              }
+              label="Developer Mode"
+            />
+            <Typography variant="body2" color="text.secondary">
+              Enable developer mode to access additional debugging features and tools
+            </Typography>
+          </Box>
         </Box>
       </Box>
     </ThemeProvider>

src/config.json

@@ -1,5 +1,4 @@
 {
-    "developerMode": false,
+    "backendUrl": "http://localhost:8080"
-    "backendUrl": "https://api.example.com"
 
 }

src/core/configEdit.js

@@ -0,0 +1,67 @@
+import config from '../config.json';
+
+export function updateConfig(newConfig) {
+  return fetch(config.backendUrl + '/config', {
+    method: 'POST', 
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Username': localStorage.getItem('token') // Add username header for auth
+    },
+    body: JSON.stringify(newConfig)
+  })
+  .then(response => {
+    if (!response.ok) {
+      throw new Error('Failed to update config');
+    }
+    return response;
+  });
+}
+
+export function getConfig() {
+  return fetch(config.backendUrl + '/config', {
+    headers: {
+      'X-Username': localStorage.getItem('token') // Add username header for auth
+    }
+  })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error('Failed to get config');
+      }
+      return response.json();
+    });
+}
+
+export function toggleDeveloperMode() {
+  let currentMode = localStorage.getItem('developerMode') === 'true';
+  let newMode = !currentMode;
+  
+  return updateConfig({ developerMode: newMode })
+    .then(() => {
+      localStorage.setItem('developerMode', newMode);
+      console.log(config.developerMode);
+      window.location.reload();
+    })
+    .catch(error => {
+      console.error('Error updating developer mode:', error);
+      throw error;
+    });
+}
+
+export function getDeveloperMode() {
+  // First try to get from localStorage
+  const localMode = localStorage.getItem('developerMode');
+  if (localMode !== null) {
+    return localMode === 'true';
+  }
+
+  // If not in localStorage, get from server and store it
+  return getConfig()
+    .then(config => {
+      localStorage.setItem('developerMode', config.developerMode);
+      return config.developerMode;
+    })
+    .catch(error => {
+      console.error('Error getting developer mode:', error);
+      throw error;
+    });
+}

src/metadata.json

@@ -1 +1 @@
-{"buildMajor":1,"buildMinor":0,"buildRevision":11,"buildTag":"DEV"}
+{"buildMajor":1,"buildMinor":0,"buildRevision":12,"buildTag":"DEV"}