admin panel

2023-11-30 19:30:51 +03:00 · 2023-11-30 19:30:51 +03:00 · 0c74411808
commit 0c74411808
parent 5f1849caf1
231 changed files with 57372 additions and 22 deletions
--- a/.gitignore
+++ b/.gitignore
@ -3,3 +3,6 @@
 .vscode/c_cpp_properties.json
 .vscode/launch.json
 .vscode/ipch
 build
 node_modules
--- a/data/www/app/icon.png.gz
+++ b/data/www/app/icon.png.gz
--- a/data/www/app/manifest.json.gz
+++ b/data/www/app/manifest.json.gz
--- a/data/www/css/roboto.css.gz
+++ b/data/www/css/roboto.css.gz
--- a/data/www/favicon.ico
+++ b/data/www/favicon.ico
--- a/data/www/favicon.ico.gz
+++ b/data/www/favicon.ico.gz
--- a/data/www/fonts/md.woff2.gz
+++ b/data/www/fonts/md.woff2.gz
--- a/data/www/fonts/re.woff2.gz
+++ b/data/www/fonts/re.woff2.gz
--- a/data/www/index.html.gz
+++ b/data/www/index.html.gz
--- a/data/www/js/179.fa22.js.gz
+++ b/data/www/js/179.fa22.js.gz
--- a/frontend2/.eslintrc.cjs
+++ b/frontend2/.eslintrc.cjs
@ -0,0 +1,14 @@
 module.exports = {
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': 'warn',
  },
 }
--- a/frontend2/.gitignore
+++ b/frontend2/.gitignore
@ -0,0 +1,22 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 *.local
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/frontend2/.vs/slnx.sqlite
+++ b/frontend2/.vs/slnx.sqlite
--- a/frontend2/.vs/slnx.sqlite-journal
+++ b/frontend2/.vs/slnx.sqlite-journal
--- a/frontend2/compress-cra.json
+++ b/frontend2/compress-cra.json
@ -0,0 +1,20 @@
 {
  "filetypes": [
    ".html",
    ".js",
    ".css",
    ".svg",
    ".png",
    ".jpg",
    ".ico",
    ".txt",
    ".json",
    ".mp3",
    ".wav",
    ".tff",
    ".woff2"
  ],
  "algorithms": ["gz"],
  "directory": "../data/www",
  "retainUncompressedFiles": false
 }
--- a/frontend2/favicon.ico
+++ b/frontend2/favicon.ico
--- a/frontend2/index.html
+++ b/frontend2/index.html
@ -0,0 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Captive Portal website written in React" />
    <title>Digitum Admin Panel</title>
 </head>
 <body>
    <div id="🌐"></div>
    <script type="module" src="/src/main.tsx"></script>
 </body>
 </html>
--- a/frontend2/package-lock.json
+++ b/frontend2/package-lock.json
--- a/frontend2/package.json
+++ b/frontend2/package.json
@ -0,0 +1,35 @@
 {
  "name": "react-websocket-client",
  "type": "module",
  "version": "0.1.1",
  "private": true,
  "scripts": {
    "dev": "vite",
 	"build": "tsc && vite build",
 	"build:compressed": "tsc && vite build && compress-cra -c compress-cra.json",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.13.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "websocket": "^1.0.34"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@types/websocket": "^1.0.5",
    "@typescript-eslint/eslint-plugin": "^5.57.1",
    "@typescript-eslint/parser": "^5.57.1",
    "@vitejs/plugin-react-swc": "^3.0.0",
    "compress-create-react-app": "^1.4.2",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "typescript": "^5.0.2",
    "vite": "^4.3.2"
  }
 }
--- a/frontend2/src/App.css
+++ b/frontend2/src/App.css
@ -0,0 +1,18 @@
 .wrapper,
 html,
 body {
  height: 100%;
  margin: 0;
 }
 .wrapper {
  display: flex;
  flex-direction: column;
 }
 .centered {
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
 }
--- a/frontend2/src/App.tsx
+++ b/frontend2/src/App.tsx
@ -0,0 +1,33 @@
 import { useState } from 'react';
 function App() {
  const [responseMessage, setResponseMessage] = useState('');
  const handleButtonClick = () => {
    fetch('http://%API_URL%/api/v1/door/open')
      .then(response => {
        if (response.status === 200) {
          setResponseMessage('Successful');
        } else {
          setResponseMessage('Request failed');
        }
      })
      .catch(() => {
        setResponseMessage('Request failed');
      });
  };
  return (
    <div className="centered">
      <div className="wrapper">
        <h1>
          <span>Door</span>
        </h1>
          <button onClick={handleButtonClick}>Open door</button>
          <p>{responseMessage}</p>
      </div>
    </div>
  );
 }
 export default App;
--- a/frontend2/src/AppOld.tsx
+++ b/frontend2/src/AppOld.tsx
@ -0,0 +1,47 @@
 import "./App.css";
 import { IMessageEvent, w3cwebsocket } from "websocket";
 import { useState, useEffect, useRef, useCallback } from "react";
 import Button from "@mui/material/Button";
 function App() {
  const websocket = useRef<w3cwebsocket | null>(null);
  const [LED, setLED] = useState(false);
  useEffect(() => {
    websocket.current = new w3cwebsocket("ws://192.168.2.1/ws");
    websocket.current.onmessage = (message: IMessageEvent) => {
      const dataFromServer = JSON.parse(message.data.toString());
      if (dataFromServer.type === "message") {
        setLED(dataFromServer.LED);
      }
    };
    return () => websocket.current?.close();
  }, []);
  const sendUpdate = useCallback(({ led }: { led: boolean }) => {
    websocket.current?.send(
      JSON.stringify({
        type: "message",
        LED: led,
      })
    );
  }, []);
  const toggleLed = useCallback(() => sendUpdate({ led: !LED }), [LED, sendUpdate]);
  return (
    <div className="centered">
      <div className="wrapper">
        <h1>
          <span>Currently </span>
          <span>{LED ? "ON" : "OFF"}</span>
        </h1>
        <Button variant="contained" onClick={toggleLed}>
          {LED ? "Turn Off" : "Turn On"}
        </Button>
      </div>
    </div>
  );
 }
 export default App;
--- a/frontend2/src/index.css
+++ b/frontend2/src/index.css
@ -0,0 +1,6 @@
 body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
--- a/frontend2/src/main.tsx
+++ b/frontend2/src/main.tsx
@ -0,0 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
 ReactDOM.createRoot(document.getElementById('🌐') as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
 )
--- a/frontend2/src/vite-env.d.ts
+++ b/frontend2/src/vite-env.d.ts
@ -0,0 +1 @@
 /// <reference types="vite/client" />
--- a/frontend2/tsconfig.json
+++ b/frontend2/tsconfig.json
@ -0,0 +1,21 @@
 {
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ESNext",
    "allowJs": false,
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
 }
--- a/frontend2/tsconfig.node.json
+++ b/frontend2/tsconfig.node.json
@ -0,0 +1,10 @@
 {
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
 }
--- a/frontend2/vite.config.ts
+++ b/frontend2/vite.config.ts
@ -0,0 +1,11 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
 // https://vitejs.dev/config/
 export default defineConfig({
  plugins: [react()],
  build: {
    emptyOutDir: true,
    outDir: '../data/www',
  },
 })
--- a/interface/.env
+++ b/interface/.env
@ -0,0 +1,8 @@
 # This enables lint extensions
 EXTEND_ESLINT=true
 # This is the name of your project. It appears on the sign-in page and in the menu bar.
 REACT_APP_PROJECT_NAME=Digitum
 # This is the url path your project will be exposed under.
 REACT_APP_PROJECT_PATH=project
--- a/interface/.env.production
+++ b/interface/.env.production
@ -0,0 +1,2 @@
 # Disable the generation of the sourcemap on the production build to reduce the artefact size
 GENERATE_SOURCEMAP=false
--- a/interface/compress-cra.json
+++ b/interface/compress-cra.json
@ -0,0 +1,20 @@
 {
  "filetypes": [
    ".html",
    ".js",
    ".css",
    ".svg",
    ".png",
    ".jpg",
    ".ico",
    ".txt",
    ".json",
    ".mp3",
    ".wav",
    ".tff",
    ".woff2"
  ],
  "algorithms": ["gz"],
  "directory": "build",
  "retainUncompressedFiles": false
 }
--- a/interface/config-overrides.js
+++ b/interface/config-overrides.js
@ -0,0 +1,28 @@
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ProgmemGenerator = require('./progmem-generator.js');
 const TerserPlugin = require('terser-webpack-plugin');
 module.exports = function override(config, env) {
  if (env === "production") {
    // rename the ouput file, we need it's path to be short, for embedded FS
    config.output.filename = 'js/[id].[chunkhash:4].js';
    config.output.chunkFilename = 'js/[id].[chunkhash:4].js';
    // take out the manifest plugin
    config.plugins = config.plugins.filter((plugin) => !(plugin instanceof WebpackManifestPlugin));
    // shorten css filenames
    const miniCssExtractPlugin = config.plugins.find((plugin) => plugin instanceof MiniCssExtractPlugin);
    miniCssExtractPlugin.options.filename = "css/[id].[contenthash:4].css";
    miniCssExtractPlugin.options.chunkFilename = "css/[id].[contenthash:4].c.css";
    // don't emit license file
    const terserPlugin = config.optimization.minimizer.find((plugin) => plugin instanceof TerserPlugin);
    terserPlugin.options.extractComments = false;
    // build progmem data files
    config.plugins.push(new ProgmemGenerator({ outputPath: "../lib/framework/WWWData.h", bytesPerLine: 20 }));
  }
  return config;
 };
--- a/interface/favicon.ico
+++ b/interface/favicon.ico
--- a/interface/package-lock.json
+++ b/interface/package-lock.json
--- a/interface/package.json
+++ b/interface/package.json
@ -0,0 +1,93 @@
 {
  "name": "esp8266-react",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://192.168.0.23",
  "dependencies": {
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.8.0",
    "@mui/material": "^5.8.0",
    "@types/lodash": "^4.14.176",
    "@types/node": "^16.11.14",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.4",
    "async-validator": "^4.1.1",
    "axios": "^0.27.2",
    "http-proxy-middleware": "^2.0.1",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.21",
    "notistack": "^2.0.5",
    "parse-ms": "^3.0.0",
    "react": "^18.1.0",
    "react-app-rewired": "^2.1.8",
    "react-dom": "^18.1.0",
    "react-dropzone": "^11.4.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "sockette": "^2.0.6",
    "typescript": "^4.6.4"
  },
  "devDependencies": {
 	"compress-create-react-app": "^1.4.2"
  },
  "scripts": {
    "start": "react-app-rewired start",
 	"build": "react-app-rewired build",
    "build:compressed": "react-app-rewired build && compress-cra -c compress-cra.json",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "eol-last": 1,
      "react/jsx-closing-bracket-location": 1,
      "react/jsx-closing-tag-location": 1,
      "react/jsx-wrap-multilines": 1,
      "react/jsx-curly-newline": 1,
      "no-multiple-empty-lines": [
        1,
        {
          "max": 1
        }
      ],
      "no-trailing-spaces": 1,
      "semi": 1,
      "no-extra-semi": 1,
      "react/jsx-max-props-per-line": [
        1,
        {
          "when": "multiline"
        }
      ],
      "react/jsx-first-prop-new-line": [
        1,
        "multiline"
      ],
      "@typescript-eslint/no-shadow": 1,
      "max-len": [
        1,
        {
          "code": 140
        }
      ],
      "arrow-parens": 1
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
 }
--- a/interface/progmem-generator.js
+++ b/interface/progmem-generator.js
@ -0,0 +1,123 @@
 const { resolve, relative, sep } = require('path');
 const { readdirSync, existsSync, unlinkSync, readFileSync, createWriteStream } = require('fs');
 var zlib = require('zlib');
 var mime = require('mime-types');
 const ARDUINO_INCLUDES = "#include <Arduino.h>\n\n";
 function getFilesSync(dir, files = []) {
  readdirSync(dir, { withFileTypes: true }).forEach((entry) => {
    const entryPath = resolve(dir, entry.name);
    if (entry.isDirectory()) {
      getFilesSync(entryPath, files);
    } else {
      files.push(entryPath);
    }
  });
  return files;
 }
 function coherseToBuffer(input) {
  return Buffer.isBuffer(input) ? input : Buffer.from(input);
 }
 function cleanAndOpen(path) {
  if (existsSync(path)) {
    unlinkSync(path);
  }
  return createWriteStream(path, { flags: "w+" });
 }
 class ProgmemGenerator {
  constructor(options = {}) {
    const { outputPath, bytesPerLine = 20, indent = "  ", includes = ARDUINO_INCLUDES } = options;
    this.options = { outputPath, bytesPerLine, indent, includes };
  }
  apply(compiler) {
    compiler.hooks.emit.tapAsync(
      { name: 'ProgmemGenerator' },
      (compilation, callback) => {
        const { outputPath, bytesPerLine, indent, includes } = this.options;
        const fileInfo = [];
        const writeStream = cleanAndOpen(resolve(compilation.options.context, outputPath));
        try {
          const writeIncludes = () => {
            writeStream.write(includes);
          };
          const writeFile = (relativeFilePath, buffer) => {
            const variable = "ESP_REACT_DATA_" + fileInfo.length;
            const mimeType = mime.lookup(relativeFilePath);
            var size = 0;
            writeStream.write("const uint8_t " + variable + "[] PROGMEM = {");
            const zipBuffer = zlib.gzipSync(buffer);
            zipBuffer.forEach((b) => {
              if (!(size % bytesPerLine)) {
                writeStream.write("\n");
                writeStream.write(indent);
              }
              writeStream.write("0x" + ("00" + b.toString(16).toUpperCase()).substr(-2) + ",");
              size++;
            });
            if (size % bytesPerLine) {
              writeStream.write("\n");
            }
            writeStream.write("};\n\n");
            fileInfo.push({
              uri: '/' + relativeFilePath.replace(sep, '/'),
              mimeType,
              variable,
              size
            });
          };
          const writeFiles = () => {
            // process static files
            const buildPath = compilation.options.output.path;
            for (const filePath of getFilesSync(buildPath)) {
              const readStream = readFileSync(filePath);
              const relativeFilePath = relative(buildPath, filePath);
              writeFile(relativeFilePath, readStream);
            }
            // process assets
            const { assets } = compilation;
            Object.keys(assets).forEach((relativeFilePath) => {
              writeFile(relativeFilePath, coherseToBuffer(assets[relativeFilePath].source()));
            });
          };
          const generateWWWClass = () => {
            // eslint-disable-next-line max-len
            return `typedef std::function<void(const String& uri, const String& contentType, const uint8_t * content, size_t len)> RouteRegistrationHandler;
 class WWWData {
 ${indent}public:
 ${indent.repeat(2)}static void registerRoutes(RouteRegistrationHandler handler) {
 ${fileInfo.map((file) => `${indent.repeat(3)}handler("${file.uri}", "${file.mimeType}", ${file.variable}, ${file.size});`).join('\n')}
 ${indent.repeat(2)}}
 };
 `;
          };
          const writeWWWClass = () => {
            writeStream.write(generateWWWClass());
          };
          writeIncludes();
          writeFiles();
          writeWWWClass();
          writeStream.on('finish', () => {
            callback();
          });
        } finally {
          writeStream.end();
        }
      }
    );
  }
 }
 module.exports = ProgmemGenerator;
--- a/interface/public/app/icon.png
+++ b/interface/public/app/icon.png
--- a/interface/public/app/manifest.json
+++ b/interface/public/app/manifest.json
@ -0,0 +1,12 @@
 {
  "name":"ESP8266 React",
  "icons":[
    {
      "src":"/app/icon.png",
      "sizes":"48x48 72x72 96x96 128x128 256x256"
    }
  ],
  "start_url":"/",
  "display":"fullscreen",
  "orientation":"any"
 }
--- a/interface/public/css/roboto.css
+++ b/interface/public/css/roboto.css
@ -0,0 +1,22 @@
 /* 
 * Just supporting latin due to size constrains on the esp chip 
 *
 * The framework only makes use of 400 (regular) + 500 (medium) weight fonts.
 *
 * If using light or strong typography variants you will need to add additional fonts.
 */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/re.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/md.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
--- a/interface/public/favicon.ico
+++ b/interface/public/favicon.ico
--- a/interface/public/fonts/md.woff2
+++ b/interface/public/fonts/md.woff2
--- a/interface/public/fonts/re.woff2
+++ b/interface/public/fonts/re.woff2
--- a/interface/public/index.html
+++ b/interface/public/index.html
@ -0,0 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1">
    <link rel="stylesheet" href="%PUBLIC_URL%/css/roboto.css">
    <link rel="manifest" href="%PUBLIC_URL%/app/manifest.json">
    <title>Digitum</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
 </html>
--- a/interface/src/App.tsx
+++ b/interface/src/App.tsx
@ -0,0 +1,39 @@
 import React, { FC, RefObject } from 'react';
 import { SnackbarProvider } from 'notistack';
 import { IconButton } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import { FeaturesLoader } from './contexts/features';
 import CustomTheme from './CustomTheme';
 import AppRouting from './AppRouting';
 const App: FC = () => {
  const notistackRef: RefObject<any> = React.createRef();
  const onClickDismiss = (key: string | number | undefined) => () => {
    notistackRef.current.closeSnackbar(key);
  };
  return (
    <CustomTheme>
      <SnackbarProvider
        maxSnack={3}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
        ref={notistackRef}
        action={(key) => (
          <IconButton onClick={onClickDismiss(key)} size="small">
            <CloseIcon />
          </IconButton>
        )}
      >
        <FeaturesLoader>
          <AppRouting />
        </FeaturesLoader>
      </SnackbarProvider>
    </CustomTheme>
  );
 };
 export default App;
--- a/interface/src/AppRouting.tsx
+++ b/interface/src/AppRouting.tsx
@ -0,0 +1,78 @@
 import { FC, useContext, useEffect } from 'react';
 import { Navigate, Routes, Route, useLocation } from 'react-router-dom';
 import { useSnackbar, VariantType } from 'notistack';
 import { Authentication, AuthenticationContext } from './contexts/authentication';
 import { FeaturesContext } from './contexts/features';
 import { RequireAuthenticated, RequireUnauthenticated } from './components';
 import SignIn from './SignIn';
 import AuthenticatedRouting from './AuthenticatedRouting';
 interface SecurityRedirectProps {
  message: string;
  variant?: VariantType;
  signOut?: boolean;
 }
 const RootRedirect: FC<SecurityRedirectProps> = ({ message, variant, signOut }) => {
  const authenticationContext = useContext(AuthenticationContext);
  const { enqueueSnackbar } = useSnackbar();
  useEffect(() => {
    signOut && authenticationContext.signOut(false);
    enqueueSnackbar(message, { variant });
  }, [message, variant, signOut, authenticationContext, enqueueSnackbar]);
  return (<Navigate to="/" />);
 };
 export const RemoveTrailingSlashes = () => {
  const location = useLocation();
  return location.pathname.match('/.*/$') && (
    <Navigate
      to={{
        pathname: location.pathname.replace(/\/+$/, ""),
        search: location.search
      }}
    />
  );
 };
 const AppRouting: FC = () => {
  const { features } = useContext(FeaturesContext);
  return (
    <Authentication>
      <RemoveTrailingSlashes />
      <Routes>
        <Route
          path="/unauthorized"
          element={<RootRedirect message="Please log in to continue" signOut />}
        />
        <Route
          path="/firmwareUpdated"
          element={<RootRedirect message="Firmware update successful" variant="success" />}
        />
        {features.security &&
          <Route
            path="/"
            element={
              <RequireUnauthenticated>
                <SignIn />
              </RequireUnauthenticated>
            }
          />}
        <Route
          path="/*"
          element={
            <RequireAuthenticated>
              <AuthenticatedRouting />
            </RequireAuthenticated>
          }
        />
      </Routes>
    </Authentication>
  );
 };
 export default AppRouting;
--- a/interface/src/AuthenticatedRouting.tsx
+++ b/interface/src/AuthenticatedRouting.tsx
@ -0,0 +1,69 @@
 import { FC, useCallback, useContext, useEffect } from 'react';
 import { Navigate, Routes, Route, useNavigate, useLocation } from 'react-router-dom';
 import { AxiosError } from 'axios';
 import { FeaturesContext } from './contexts/features';
 import * as AuthenticationApi from './api/authentication';
 import { PROJECT_PATH } from './api/env';
 import { AXIOS } from './api/endpoints';
 import { Layout, RequireAdmin } from './components';
 import ProjectRouting from './project/ProjectRouting';
 import NetworkConnection from './framework/network/NetworkConnection';
 import AccessPoint from './framework/ap/AccessPoint';
 import NetworkTime from './framework/ntp/NetworkTime';
 import Mqtt from './framework/mqtt/Mqtt';
 import System from './framework/system/System';
 import Security from './framework/security/Security';
 const AuthenticatedRouting: FC = () => {
  const { features } = useContext(FeaturesContext);
  const location = useLocation();
  const navigate = useNavigate();
  const handleApiResponseError = useCallback((error: AxiosError) => {
    if (error.response && error.response.status === 401) {
      AuthenticationApi.storeLoginRedirect(location);
      navigate("/unauthorized");
    }
    return Promise.reject(error);
  }, [location, navigate]);
  useEffect(() => {
    const axiosHandlerId = AXIOS.interceptors.response.use((response) => response, handleApiResponseError);
    return () => AXIOS.interceptors.response.eject(axiosHandlerId);
  }, [handleApiResponseError]);
  return (
    <Layout>
      <Routes>
        {features.project && (
          <Route path={`/${PROJECT_PATH}/*`} element={<ProjectRouting />} />
        )}
        <Route path="/network/*" element={<NetworkConnection />} />
        <Route path="/intercom/*" element={<AccessPoint />} />
        {features.ntp && (
          <Route path="/ntp/*" element={<NetworkTime />} />
        )}
        {features.mqtt && (
          <Route path="/mqtt/*" element={<Mqtt />} />
        )}
        {features.security && (
          <Route
            path="/security/*"
            element={
              <RequireAdmin>
                <Security />
              </RequireAdmin>
            }
          />
        )}
        <Route path="/system/*" element={<System />} />
        <Route path="/*" element={<Navigate to={AuthenticationApi.getDefaultRoute(features)} />} />
      </Routes>
    </Layout>
  );
 };
 export default AuthenticatedRouting;
--- a/interface/src/CustomTheme.tsx
+++ b/interface/src/CustomTheme.tsx
@ -0,0 +1,40 @@
 import { FC } from 'react';
 import { CssBaseline } from '@mui/material';
 import { createTheme, responsiveFontSizes, ThemeProvider } from '@mui/material/styles';
 import { indigo, blueGrey, orange, red, green } from '@mui/material/colors';
 import { RequiredChildrenProps } from './utils';
 const theme = responsiveFontSizes(
  createTheme({
    palette: {
      background: {
        default: "#fafafa"
      },
      primary: indigo,
      secondary: blueGrey,
      info: {
        main: indigo[500]
      },
      warning: {
        main: orange[500]
      },
      error: {
        main: red[500]
      },
      success: {
        main: green[500]
      }
    }
  })
 );
 const CustomTheme: FC<RequiredChildrenProps> = ({ children }) => (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    {children}
  </ThemeProvider>
 );
 export default CustomTheme;
--- a/interface/src/SignIn.tsx
+++ b/interface/src/SignIn.tsx
@ -0,0 +1,112 @@
 import { FC, useContext, useState } from 'react';
 import { ValidateFieldsError } from 'async-validator';
 import { useSnackbar } from 'notistack';
 import { Box, Fab, Paper, Typography } from '@mui/material';
 import ForwardIcon from '@mui/icons-material/Forward';
 import * as AuthenticationApi from './api/authentication';
 import { PROJECT_NAME } from './api/env';
 import { SignInRequest } from './types';
 import { ValidatedTextField } from './components';
 import { SIGN_IN_REQUEST_VALIDATOR, validate } from './validators';
 import { extractErrorMessage, onEnterCallback, updateValue } from './utils';
 import { AuthenticationContext } from './contexts/authentication';
 const SignIn: FC = () => {
  const authenticationContext = useContext(AuthenticationContext);
  const { enqueueSnackbar } = useSnackbar();
  const [signInRequest, setSignInRequest] = useState<SignInRequest>({
    username: '',
    password: ''
  });
  const [processing, setProcessing] = useState<boolean>(false);
  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
  const updateLoginRequestValue = updateValue(setSignInRequest);
  const validateAndSignIn = async () => {
    setProcessing(true);
    try {
      await validate(SIGN_IN_REQUEST_VALIDATOR, signInRequest);
      signIn();
    } catch (errors: any) {
      setFieldErrors(errors);
      setProcessing(false);
    }
  };
  const signIn = async () => {
    try {
      const { data: loginResponse } = await AuthenticationApi.signIn(signInRequest);
      authenticationContext.signIn(loginResponse.access_token);
    } catch (error: any) {
      if (error.response?.status === 401) {
        enqueueSnackbar("Invalid login details", { variant: "warning" });
      } else {
        enqueueSnackbar(extractErrorMessage(error, "Unexpected error, please try again"), { variant: "error" });
      }
      setProcessing(false);
    }
  };
  const submitOnEnter = onEnterCallback(signIn);
  return (
    <Box
      display="flex"
      height="100vh"
      margin="auto"
      padding={2}
      justifyContent="center"
      flexDirection="column"
      maxWidth={(theme) => theme.breakpoints.values.sm}
    >
      <Paper
        sx={(theme) => ({
          textAlign: "center",
          padding: theme.spacing(2),
          paddingTop: "200px",
          backgroundImage: 'url("/app/icon.png")',
          backgroundRepeat: "no-repeat",
          backgroundPosition: "50% " + theme.spacing(2),
          backgroundSize: "auto 150px",
          width: "100%"
        })}
      >
        <Typography variant="h4">{PROJECT_NAME}</Typography>
        <ValidatedTextField
          fieldErrors={fieldErrors}
          disabled={processing}
          name="username"
          label="Username"
          value={signInRequest.username}
          onChange={updateLoginRequestValue}
          margin="normal"
          variant="outlined"
          fullWidth
        />
        <ValidatedTextField
          fieldErrors={fieldErrors}
          disabled={processing}
          type="password"
          name="password"
          label="Password"
          value={signInRequest.password}
          onChange={updateLoginRequestValue}
          onKeyDown={submitOnEnter}
          margin="normal"
          variant="outlined"
          fullWidth
        />
        <Fab variant="extended" color="primary" sx={{ mt: 2 }} onClick={validateAndSignIn} disabled={processing}>
          <ForwardIcon sx={{ mr: 1 }} />
          Sign In
        </Fab>
      </Paper>
    </Box>
  );
 };
 export default SignIn;
--- a/interface/src/api/ap.ts
+++ b/interface/src/api/ap.ts
@ -0,0 +1,16 @@
 import { AxiosPromise } from "axios";
 import { APSettings, APStatus } from "../types";
 import { AXIOS } from "./endpoints";
 export function readAPStatus(): AxiosPromise<APStatus> {
  return AXIOS.get('/intercomStatus');
 }
 export function readAPSettings(): AxiosPromise<APSettings> {
  return AXIOS.get('/intercomSettings');
 }
 export function updateAPSettings(apSettings: APSettings): AxiosPromise<APSettings> {
  return AXIOS.post('/intercomSettings', apSettings);
 }
--- a/interface/src/api/authentication.ts
+++ b/interface/src/api/authentication.ts
@ -0,0 +1,64 @@
 import { AxiosPromise } from "axios";
 import * as H from 'history';
 import jwtDecode from 'jwt-decode';
 import { Path } from "react-router-dom";
 import { Features, Me, SignInRequest, SignInResponse } from "../types";
 import { ACCESS_TOKEN, AXIOS } from "./endpoints";
 import { PROJECT_PATH } from './env';
 export const SIGN_IN_PATHNAME = 'loginPathname';
 export const SIGN_IN_SEARCH = 'loginSearch';
 export const getDefaultRoute = (features: Features) => features.project ? `/${PROJECT_PATH}` : "/network";
 export function verifyAuthorization(): AxiosPromise<void> {
  return AXIOS.get('/verifyAuthorization');
 }
 export function signIn(request: SignInRequest): AxiosPromise<SignInResponse> {
  return AXIOS.post('/signIn', request);
 }
 /**
 * Fallback to sessionStorage if localStorage is absent. WebView may not have local storage enabled.
 */
 export function getStorage() {
  return localStorage || sessionStorage;
 }
 export function storeLoginRedirect(location?: H.Location) {
  if (location) {
    getStorage().setItem(SIGN_IN_PATHNAME, location.pathname);
    getStorage().setItem(SIGN_IN_SEARCH, location.search);
  }
 }
 export function clearLoginRedirect() {
  getStorage().removeItem(SIGN_IN_PATHNAME);
  getStorage().removeItem(SIGN_IN_SEARCH);
 }
 export function fetchLoginRedirect(features: Features): Partial<Path> {
  const signInPathname = getStorage().getItem(SIGN_IN_PATHNAME);
  const signInSearch = getStorage().getItem(SIGN_IN_SEARCH);
  clearLoginRedirect();
  return {
    pathname: signInPathname || getDefaultRoute(features),
    search: (signInPathname && signInSearch) || undefined
  };
 }
 export const clearAccessToken = () => localStorage.removeItem(ACCESS_TOKEN);
 export const decodeMeJWT = (accessToken: string): Me => jwtDecode(accessToken) as Me;
 export function addAccessTokenParameter(url: string) {
  const accessToken = getStorage().getItem(ACCESS_TOKEN);
  if (!accessToken) {
    return url;
  }
  const parsedUrl = new URL(url);
  parsedUrl.searchParams.set(ACCESS_TOKEN, accessToken);
  return parsedUrl.toString();
 }
--- a/interface/src/api/endpoints.ts
+++ b/interface/src/api/endpoints.ts
@ -0,0 +1,47 @@
 import axios, { AxiosPromise, CancelToken } from 'axios';
 export const WS_BASE_URL = '/ws/';
 export const API_BASE_URL = '/api/v1/';
 export const ACCESS_TOKEN = 'access_token';
 export const WEB_SOCKET_ROOT = calculateWebSocketRoot(WS_BASE_URL);
 export const AXIOS = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
  transformRequest: [(data, headers) => {
    if (headers) {
      if (localStorage.getItem(ACCESS_TOKEN)) {
        headers.Authorization = 'Bearer ' + localStorage.getItem(ACCESS_TOKEN);
      }
      if (headers['Content-Type'] !== 'application/json') {
        return data;
      }
    }
    return JSON.stringify(data);
  }]
 });
 function calculateWebSocketRoot(webSocketPath: string) {
  const location = window.location;
  const webProtocol = location.protocol === "https:" ? "wss:" : "ws:";
  return webProtocol + "//" + location.host + webSocketPath;
 }
 export interface FileUploadConfig {
  cancelToken?: CancelToken;
  onUploadProgress?: (progressEvent: ProgressEvent) => void;
 }
 export const uploadFile = (url: string, file: File, config?: FileUploadConfig): AxiosPromise<void> => {
  const formData = new FormData();
  formData.append('file', file);
  return AXIOS.post(url, formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    ...(config || {})
  });
 };
--- a/interface/src/api/env.ts
+++ b/interface/src/api/env.ts
@ -0,0 +1,2 @@
 export const PROJECT_NAME = process.env.REACT_APP_PROJECT_NAME || 'Digitum';
 export const PROJECT_PATH = process.env.REACT_APP_PROJECT_PATH || 'project';
--- a/interface/src/api/features.ts
+++ b/interface/src/api/features.ts
@ -0,0 +1,8 @@
 import { AxiosPromise } from 'axios';
 import { Features } from '../types';
 import { AXIOS } from './endpoints';
 export function readFeatures(): AxiosPromise<Features> {
  return AXIOS.get('/features');
 }
--- a/interface/src/api/mqtt.ts
+++ b/interface/src/api/mqtt.ts
@ -0,0 +1,16 @@
 import { AxiosPromise } from "axios";
 import { MqttSettings, MqttStatus } from "../types";
 import { AXIOS } from "./endpoints";
 export function readMqttStatus(): AxiosPromise<MqttStatus> {
  return AXIOS.get('/mqttStatus');
 }
 export function readMqttSettings(): AxiosPromise<MqttSettings> {
  return AXIOS.get('/mqttSettings');
 }
 export function updateMqttSettings(ntpSettings: MqttSettings): AxiosPromise<MqttSettings> {
  return AXIOS.post('/mqttSettings', ntpSettings);
 }
--- a/interface/src/api/network.ts
+++ b/interface/src/api/network.ts
@ -0,0 +1,24 @@
 import { AxiosPromise } from 'axios';
 import { NetworkList, NetworkSettings, NetworkStatus } from '../types';
 import { AXIOS } from './endpoints';
 export function readNetworkStatus(): AxiosPromise<NetworkStatus> {
  return AXIOS.get('/networkStatus');
 }
 export function scanNetworks(): AxiosPromise<void> {
  return AXIOS.get('/scanNetworks');
 }
 export function listNetworks(): AxiosPromise<NetworkList> {
  return AXIOS.get('/listNetworks');
 }
 export function readNetworkSettings(): AxiosPromise<NetworkSettings> {
  return AXIOS.get('/networkSettings');
 }
 export function updateNetworkSettings(NetworkSettings: NetworkSettings): AxiosPromise<NetworkSettings> {
  return AXIOS.post('/networkSettings', NetworkSettings);
 }
--- a/interface/src/api/ntp.ts
+++ b/interface/src/api/ntp.ts
@ -0,0 +1,20 @@
 import { AxiosPromise } from "axios";
 import { NTPSettings, NTPStatus, Time } from "../types";
 import { AXIOS } from "./endpoints";
 export function readNTPStatus(): AxiosPromise<NTPStatus> {
  return AXIOS.get('/ntpStatus');
 }
 export function readNTPSettings(): AxiosPromise<NTPSettings> {
  return AXIOS.get('/ntpSettings');
 }
 export function updateNTPSettings(ntpSettings: NTPSettings): AxiosPromise<NTPSettings> {
  return AXIOS.post('/ntpSettings', ntpSettings);
 }
 export function updateTime(time: Time): AxiosPromise<Time> {
  return AXIOS.post('/time', time);
 }
--- a/interface/src/api/security.ts
+++ b/interface/src/api/security.ts
@ -0,0 +1,13 @@
 import { AxiosPromise } from 'axios';
 import { SecuritySettings } from '../types';
 import { AXIOS } from './endpoints';
 export function readSecuritySettings(): AxiosPromise<SecuritySettings> {
  return AXIOS.get('/securitySettings');
 }
 export function updateSecuritySettings(securitySettings: SecuritySettings): AxiosPromise<SecuritySettings> {
  return AXIOS.post('/securitySettings', securitySettings);
 }
--- a/interface/src/api/system.ts
+++ b/interface/src/api/system.ts
@ -0,0 +1,28 @@
 import { AxiosPromise } from 'axios';
 import { OTASettings, SystemStatus } from '../types';
 import { AXIOS, FileUploadConfig, uploadFile } from './endpoints';
 export function readSystemStatus(timeout?: number): AxiosPromise<SystemStatus> {
  return AXIOS.get('/systemStatus', { timeout });
 }
 export function restart(): AxiosPromise<void> {
  return AXIOS.post('/restart');
 }
 export function factoryReset(): AxiosPromise<void> {
  return AXIOS.post('/factoryReset');
 }
 export function readOTASettings(): AxiosPromise<OTASettings> {
  return AXIOS.get('/otaSettings');
 }
 export function updateOTASettings(otaSettings: OTASettings): AxiosPromise<OTASettings> {
  return AXIOS.post('/otaSettings', otaSettings);
 }
 export const uploadFirmware = (file: File, config?: FileUploadConfig): AxiosPromise<void> => (
  uploadFile('/uploadFirmware', file, config)
 );
--- a/interface/src/components/ButtonRow.tsx
+++ b/interface/src/components/ButtonRow.tsx
@ -0,0 +1,26 @@
 import { FC } from 'react';
 import { Box, BoxProps } from '@mui/material';
 const ButtonRow: FC<BoxProps> = ({ children, ...rest }) => {
  return (
    <Box
      sx={{
        '& button, & a, & .MuiCard-root': {
          mx: .5,
          '&:last-child': {
            mr: 0,
          },
          '&:first-of-type': {
            ml: 0,
          }
        }
      }}
      {...rest}
    >
      {children}
    </Box>
  );
 };
 export default ButtonRow;
--- a/interface/src/components/MessageBox.tsx
+++ b/interface/src/components/MessageBox.tsx
@ -0,0 +1,53 @@
 import React, { FC } from 'react';
 import { Box, BoxProps, SvgIconProps, Theme, Typography, useTheme } from '@mui/material';
 import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
 import ErrorIcon from '@mui/icons-material/Error';
 type MessageBoxLevel = 'warning' | 'success' | 'info' | 'error';
 export interface MessageBoxProps extends BoxProps {
  level: MessageBoxLevel;
  message: string;
 }
 const LEVEL_ICONS: { [type in MessageBoxLevel]: React.ComponentType<SvgIconProps> } = {
  success: CheckCircleOutlineOutlinedIcon,
  info: InfoOutlinedIcon,
  warning: ReportProblemOutlinedIcon,
  error: ErrorIcon
 };
 const LEVEL_BACKGROUNDS: { [type in MessageBoxLevel]: (theme: Theme) => string } = {
  success: (theme: Theme) => theme.palette.success.dark,
  info: (theme: Theme) => theme.palette.info.main,
  warning: (theme: Theme) => theme.palette.warning.dark,
  error: (theme: Theme) => theme.palette.error.dark,
 };
 const MessageBox: FC<MessageBoxProps> = ({ level, message, sx, children, ...rest }) => {
  const theme = useTheme();
  const Icon = LEVEL_ICONS[level];
  const backgroundColor = LEVEL_BACKGROUNDS[level](theme);
  const color = theme.palette.getContrastText(backgroundColor);
  return (
    <Box
      p={2}
      display="flex"
      alignItems="center"
      borderRadius={1}
      sx={{ backgroundColor, color, ...sx }}
      {...rest}
    >
      <Icon />
      <Typography sx={{ ml: 2, flexGrow: 1 }} variant="body1">
        {message}
      </Typography>
      {children}
    </Box>
  );
 };
 export default MessageBox;
--- a/interface/src/components/SectionContent.tsx
+++ b/interface/src/components/SectionContent.tsx
@ -0,0 +1,24 @@
 import React from 'react';
 import { Paper, Typography } from '@mui/material';
 import { RequiredChildrenProps } from '../utils';
 interface SectionContentProps extends RequiredChildrenProps {
  title: string;
  titleGutter?: boolean;
 }
 const SectionContent: React.FC<SectionContentProps> = (props) => {
  const { children, title, titleGutter } = props;
  return (
    <Paper sx={{ p: 2, m: 2 }}>
      <Typography variant="h6" gutterBottom={titleGutter}>
        {title}
      </Typography>
      {children}
    </Paper>
  );
 };
 export default SectionContent;
--- a/interface/src/components/index.ts
+++ b/interface/src/components/index.ts
@ -0,0 +1,8 @@
 export * from './inputs';
 export * from './layout';
 export * from './loading';
 export * from './routing';
 export * from './upload';
 export { default as SectionContent } from './SectionContent';
 export { default as ButtonRow } from './ButtonRow';
 export { default as MessageBox } from './MessageBox';
--- a/interface/src/components/inputs/BlockFormControlLabel.tsx
+++ b/interface/src/components/inputs/BlockFormControlLabel.tsx
@ -0,0 +1,11 @@
 import { FC } from "react";
 import { FormControlLabel, FormControlLabelProps } from "@mui/material";
 const BlockFormControlLabel: FC<FormControlLabelProps> = (props) => (
  <div>
    <FormControlLabel {...props} />
  </div>
 );
 export default BlockFormControlLabel;
--- a/interface/src/components/inputs/ValidatedPasswordField.tsx
+++ b/interface/src/components/inputs/ValidatedPasswordField.tsx
@ -0,0 +1,36 @@
 import { FC, useState } from 'react';
 import { IconButton, InputAdornment } from '@mui/material';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import ValidatedTextField, { ValidatedTextFieldProps } from './ValidatedTextField';
 type ValidatedPasswordFieldProps = Omit<ValidatedTextFieldProps, 'type'>
 const ValidatedPasswordField: FC<ValidatedPasswordFieldProps> = ({ InputProps, ...props }) => {
  const [showPassword, setShowPassword] = useState<boolean>(false);
  return (
    <ValidatedTextField
      {...props}
      type={showPassword ? 'text' : 'password'}
      InputProps={{
        ...InputProps,
        endAdornment: (
          <InputAdornment position="end">
            <IconButton
              aria-label="toggle password visibility"
              onClick={() => setShowPassword(!showPassword)}
              edge="end"
            >
              {showPassword ? <VisibilityIcon /> : <VisibilityOffIcon />}
            </IconButton>
          </InputAdornment>
        )
      }}
    />
  );
 };
 export default ValidatedPasswordField;
--- a/interface/src/components/inputs/ValidatedTextField.tsx
+++ b/interface/src/components/inputs/ValidatedTextField.tsx
@ -0,0 +1,27 @@
 import { FC } from 'react';
 import { ValidateFieldsError } from 'async-validator';
 import { FormHelperText, TextField, TextFieldProps } from '@mui/material';
 interface ValidatedFieldProps {
  fieldErrors?: ValidateFieldsError;
  name: string;
 }
 export type ValidatedTextFieldProps = ValidatedFieldProps & TextFieldProps;
 const ValidatedTextField: FC<ValidatedTextFieldProps> = ({ fieldErrors, ...rest }) => {
  const errors = fieldErrors && fieldErrors[rest.name];
  const renderErrors = () => errors && errors.map((e, i) => (<FormHelperText key={i}>{e.message}</FormHelperText>));
  return (
    <>
      <TextField
        error={!!errors}
        {...rest}
      />
      {renderErrors()}
    </>
  );
 };
 export default ValidatedTextField;
--- a/interface/src/components/inputs/index.ts
+++ b/interface/src/components/inputs/index.ts
@ -0,0 +1,3 @@
 export { default as BlockFormControlLabel } from './BlockFormControlLabel';
 export { default as ValidatedPasswordField } from './ValidatedPasswordField';
 export { default as ValidatedTextField } from './ValidatedTextField';
--- a/interface/src/components/layout/Layout.tsx
+++ b/interface/src/components/layout/Layout.tsx
@ -0,0 +1,44 @@
 import { FC, useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Box, Toolbar } from '@mui/material';
 import { PROJECT_NAME } from '../../api/env';
 import { RequiredChildrenProps } from '../../utils';
 import LayoutDrawer from './LayoutDrawer';
 import LayoutAppBar from './LayoutAppBar';
 import { LayoutContext } from './context';
 export const DRAWER_WIDTH = 260;
 const Layout: FC<RequiredChildrenProps> = ({ children }) => {
  const [mobileOpen, setMobileOpen] = useState(false);
  const [title, setTitle] = useState(PROJECT_NAME);
  const { pathname } = useLocation();
  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };
  useEffect(() => setMobileOpen(false), [pathname]);
  return (
    <LayoutContext.Provider value={{ title, setTitle }}>
      <LayoutAppBar title={title} onToggleDrawer={handleDrawerToggle} />
      <LayoutDrawer mobileOpen={mobileOpen} onClose={handleDrawerToggle} />
      <Box
        component="main"
        sx={{ marginLeft: { md: `${DRAWER_WIDTH}px` } }}
      >
        <Toolbar />
        {children}
      </Box>
    </LayoutContext.Provider >
  );
 };
 export default Layout;
--- a/interface/src/components/layout/LayoutAppBar.tsx
+++ b/interface/src/components/layout/LayoutAppBar.tsx
@ -0,0 +1,50 @@
 import { FC, useContext } from 'react';
 import { AppBar, Box, IconButton, Toolbar, Typography } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 import { FeaturesContext } from '../../contexts/features';
 import LayoutAuthMenu from './LayoutAuthMenu';
 export const DRAWER_WIDTH = 260;
 interface LayoutAppBarProps {
  title: string;
  onToggleDrawer: () => void;
 }
 const LayoutAppBar: FC<LayoutAppBarProps> = ({ title, onToggleDrawer }) => {
  const { features } = useContext(FeaturesContext);
  return (
    <AppBar
      position="fixed"
      sx={{
        width: { md: `calc(100% - ${DRAWER_WIDTH}px)` },
        ml: { md: `${DRAWER_WIDTH}px` },
        boxShadow: 'none'
      }}
    >
      <Toolbar>
        <IconButton
          color="inherit"
          aria-label="open drawer"
          edge="start"
          onClick={onToggleDrawer}
          sx={{ mr: 2, display: { md: 'none' } }}
        >
          <MenuIcon />
        </IconButton>
        <Typography variant="h6" noWrap component="div">
          {title}
        </Typography>
        <Box flexGrow={1} />
        {features.security && <LayoutAuthMenu />}
      </Toolbar>
    </AppBar>
  );
 };
 export default LayoutAppBar;
--- a/interface/src/components/layout/LayoutAuthMenu.tsx
+++ b/interface/src/components/layout/LayoutAuthMenu.tsx
@ -0,0 +1,81 @@
 import React, { FC, useContext } from "react";
 import { Box, Button, Divider, IconButton, Popover, Typography, Avatar, styled, TypographyProps } from '@mui/material';
 import PersonIcon from "@mui/icons-material/Person";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import { AuthenticatedContext } from "../../contexts/authentication";
 const ItemTypography = styled(Typography)<TypographyProps>({
  maxWidth: '250px',
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
 });
 const LayoutAuthMenu: FC = () => {
  const { me, signOut } = useContext(AuthenticatedContext);
  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };
  const open = Boolean(anchorEl);
  const id = anchorEl ? 'app-menu-popover' : undefined;
  return (
    <>
      <IconButton
        id="open-auth-menu"
        sx={{ padding: 0 }}
        aria-describedby={id}
        color="inherit"
        onClick={handleClick}
      >
        <AccountCircleIcon />
      </IconButton>
      <Popover
        id="app-menu-popover"
        sx={{ mt: 1 }}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
      >
        <Box display="flex" flexDirection="row" alignItems="center" p={2}>
          <Avatar sx={{ width: 80, height: 80 }}>
            <PersonIcon fontSize="large" />
          </Avatar>
          <Box pl={2}>
            <ItemTypography variant="h6">
              {me.username}
            </ItemTypography>
            <ItemTypography variant="body1">
              {me.admin ? "Admin User" : "Guest User"}
            </ItemTypography>
          </Box>
        </Box>
        <Divider />
        <Box p={1.5}>
          <Button variant="contained" fullWidth color="primary" onClick={() => signOut(true)}>Sign Out</Button>
        </Box>
      </Popover>
    </>
  );
 };
 export default LayoutAuthMenu;
--- a/interface/src/components/layout/LayoutDrawer.tsx
+++ b/interface/src/components/layout/LayoutDrawer.tsx
@ -0,0 +1,78 @@
 import { FC } from 'react';
 import { Box, Divider, Drawer, Toolbar, Typography, styled } from '@mui/material';
 import { PROJECT_NAME } from '../../api/env';
 import LayoutMenu from './LayoutMenu';
 import { DRAWER_WIDTH } from './Layout';
 const LayoutDrawerLogo = styled('img')(({ theme }) => ({
  [theme.breakpoints.down("sm")]: {
    height: 24,
    marginRight: theme.spacing(2)
  },
  [theme.breakpoints.up("sm")]: {
    height: 36,
    marginRight: theme.spacing(2)
  }
 }));
 interface LayoutDrawerProps {
  mobileOpen: boolean;
  onClose: () => void;
 }
 const LayoutDrawer: FC<LayoutDrawerProps> = ({ mobileOpen, onClose }) => {
  const drawer = (
    <>
      <Toolbar disableGutters>
        <Box display="flex" alignItems="center" px={2}>
          <LayoutDrawerLogo src="/app/icon.png" alt={PROJECT_NAME} />
          <Typography variant="h6" color="textPrimary">
            {PROJECT_NAME}
          </Typography>
        </Box>
        <Divider absolute />
      </Toolbar>
      <Divider />
      <LayoutMenu />
    </>
  );
  return (
    <Box
      component="nav"
      sx={{ width: { md: DRAWER_WIDTH }, flexShrink: { md: 0 } }}
    >
      <Drawer
        variant="temporary"
        open={mobileOpen}
        onClose={onClose}
        ModalProps={{
          keepMounted: true, // Better open performance on mobile.
        }}
        sx={{
          display: { xs: 'block', md: 'none' },
          '& .MuiDrawer-paper': { boxSizing: 'border-box', width: DRAWER_WIDTH },
        }}
      >
        {drawer}
      </Drawer>
      <Drawer
        variant="permanent"
        sx={{
          display: { xs: 'none', md: 'block' },
          '& .MuiDrawer-paper': { boxSizing: 'border-box', width: DRAWER_WIDTH },
        }}
        open
      >
        {drawer}
      </Drawer>
    </Box>
  );
 };
 export default LayoutDrawer;
--- a/interface/src/components/layout/LayoutMenu.tsx
+++ b/interface/src/components/layout/LayoutMenu.tsx
@ -0,0 +1,47 @@
 import { FC, useContext } from 'react';
 import { Divider, List } from '@mui/material';
 import RoomPreferencesIcon from '@mui/icons-material/RoomPreferences';
 import LanIcon from '@mui/icons-material/Lan';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import SettingsIcon from '@mui/icons-material/Settings';
 import LockIcon from '@mui/icons-material/Lock';
 import { FeaturesContext } from '../../contexts/features';
 import ProjectMenu from '../../project/ProjectMenu';
 import { AuthenticatedContext } from '../../contexts/authentication';
 import LayoutMenuItem from './LayoutMenuItem';
 const LayoutMenu: FC = () => {
  const { features } = useContext(FeaturesContext);
  const authenticatedContext = useContext(AuthenticatedContext);
  return (
    <>
      {features.project && (
        <List disablePadding component="nav">
          <ProjectMenu />
          <Divider />
        </List>
      )}
      <List disablePadding component="nav">
        <LayoutMenuItem icon={LanIcon} label="Network" to="/network" />
        <LayoutMenuItem icon={RoomPreferencesIcon} label="Intercom" to="/intercom" />
        {features.ntp && (
          <LayoutMenuItem icon={AccessTimeIcon} label="Network Time" to="/ntp" />
        )}
        {features.mqtt && (
          <LayoutMenuItem icon={DeviceHubIcon} label="MQTT" to="/mqtt" />
        )}
        {features.security && (
          <LayoutMenuItem icon={LockIcon} label="Security" to="/security" disabled={!authenticatedContext.me.admin} />
        )}
        <LayoutMenuItem icon={SettingsIcon} label="System" to="/system" />
      </List>
    </>
  );
 };
 export default LayoutMenu;
--- a/interface/src/components/layout/LayoutMenuItem.tsx
+++ b/interface/src/components/layout/LayoutMenuItem.tsx
@ -0,0 +1,30 @@
 import React, { FC } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { ListItem, ListItemButton, ListItemIcon, ListItemText, SvgIconProps } from "@mui/material";
 import { routeMatches } from "../../utils";
 interface LayoutMenuItemProps {
  icon: React.ComponentType<SvgIconProps>;
  label: string;
  to: string;
  disabled?: boolean;
 }
 const LayoutMenuItem: FC<LayoutMenuItemProps> = ({ icon: Icon, label, to, disabled }) => {
  const { pathname } = useLocation();
  return (
    <ListItem disablePadding selected={routeMatches(to, pathname)}>
      <ListItemButton component={Link} to={to} disabled={disabled}>
        <ListItemIcon>
          <Icon />
        </ListItemIcon>
        <ListItemText>{label}</ListItemText>
      </ListItemButton>
    </ListItem>
  );
 };
 export default LayoutMenuItem;
--- a/interface/src/components/layout/context.ts
+++ b/interface/src/components/layout/context.ts
@ -0,0 +1,26 @@
 import React, { useRef, useEffect, useContext } from 'react';
 export interface LayoutContextValue {
  title: string;
  setTitle: (title: string) => void;
 }
 const LayoutContextDefaultValue = {} as LayoutContextValue;
 export const LayoutContext = React.createContext(
  LayoutContextDefaultValue
 );
 export const useLayoutTitle = (myTitle: string) => {
  const { title, setTitle } = useContext(LayoutContext);
  const previousTitle = useRef(title);
  useEffect(() => {
    setTitle(myTitle);
  }, [setTitle, myTitle]);
  useEffect(() => () => {
    setTitle(previousTitle.current);
  }, [setTitle]);
 };
--- a/interface/src/components/layout/index.ts
+++ b/interface/src/components/layout/index.ts
@ -0,0 +1,2 @@
 export * from './context';
 export { default as Layout } from './Layout';
--- a/interface/src/components/loading/ApplicationError.tsx
+++ b/interface/src/components/loading/ApplicationError.tsx
@ -0,0 +1,48 @@
 import { FC } from 'react';
 import { Box, Paper, Typography } from '@mui/material';
 import WarningIcon from '@mui/icons-material/Warning';
 interface ApplicationErrorProps {
  message?: string;
 }
 const ApplicationError: FC<ApplicationErrorProps> = ({ message }) => (
  <Box display="flex" height="100vh" justifyContent="center" flexDirection="column">
    <Paper
      elevation={10}
      sx={{
        textAlign: "center",
        padding: "280px 0 40px 0",
        backgroundImage: 'url("/app/icon.png")',
        backgroundRepeat: "no-repeat",
        backgroundPosition: "50% 40px",
        backgroundSize: "200px auto",
        width: "100%",
        borderRadius: 0
      }}
    >
      <Box display="flex" flexDirection="row" justifyContent="center" alignItems="center" mb={2}>
        <WarningIcon fontSize="large" color="error" />
        <Box ml={2}>
          <Typography variant="h4">
            Application Error
          </Typography>
        </Box>
      </Box>
      <Typography variant="subtitle1" gutterBottom>
        Failed to configure the application, please refresh to try again.
      </Typography>
      {
        message &&
        (
          <Typography variant="subtitle2" gutterBottom>
            {message}
          </Typography>
        )
      }
    </Paper>
  </Box>
 );
 export default ApplicationError;
--- a/interface/src/components/loading/FormLoader.tsx
+++ b/interface/src/components/loading/FormLoader.tsx
@ -0,0 +1,39 @@
 import { FC } from 'react';
 import { Box, Button, CircularProgress, Typography } from '@mui/material';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { MessageBox } from '..';
 interface FormLoaderProps {
  message?: string;
  errorMessage?: string;
  onRetry?: () => void;
 }
 const FormLoader: FC<FormLoaderProps> = ({ errorMessage, onRetry, message = "Loading…" }) => {
  if (errorMessage) {
    return (
      <MessageBox my={2} level="error" message={errorMessage}>
        {
          onRetry &&
          <Button startIcon={<RefreshIcon />} variant="contained" color="error" onClick={onRetry}>
            Retry
          </Button>
        }
      </MessageBox>
    );
  }
  return (
    <Box m={2} py={2} display="flex" alignItems="center" flexDirection="column">
      <Box py={2}>
        <CircularProgress size={100} />
      </Box>
      <Typography variant="h6" fontWeight={400} textAlign="center">
        {message}
      </Typography>
    </Box>
  );
 };
 export default FormLoader;
--- a/interface/src/components/loading/LoadingSpinner.tsx
+++ b/interface/src/components/loading/LoadingSpinner.tsx
@ -0,0 +1,24 @@
 import { FC } from 'react';
 import { CircularProgress, Box, Typography, Theme } from '@mui/material';
 interface LoadingSpinnerProps {
  height?: number | string;
 }
 const LoadingSpinner: FC<LoadingSpinnerProps> = ({ height = '100%' }) => (
  <Box display="flex" alignItems="center" justifyContent="center" flexDirection="column" padding={2} height={height}>
    <CircularProgress
      sx={(theme: Theme) => ({
        margin: theme.spacing(4),
        color: theme.palette.text.secondary
      })}
      size={100}
    />
    <Typography variant="h4" color="textSecondary">
      Loading&hellip;
    </Typography>
  </Box>
 );
 export default LoadingSpinner;
--- a/interface/src/components/loading/index.ts
+++ b/interface/src/components/loading/index.ts
@ -0,0 +1,3 @@
 export { default as ApplicationError } from './ApplicationError';
 export { default as LoadingSpinner } from './LoadingSpinner';
 export { default as FormLoader } from './FormLoader';
--- a/interface/src/components/routing/RequireAdmin.tsx
+++ b/interface/src/components/routing/RequireAdmin.tsx
@ -0,0 +1,12 @@
 import { FC, useContext } from 'react';
 import { Navigate } from "react-router-dom";
 import { AuthenticatedContext } from '../../contexts/authentication';
 import { RequiredChildrenProps } from '../../utils';
 const RequireAdmin: FC<RequiredChildrenProps> = ({ children }) => {
  const authenticatedContext = useContext(AuthenticatedContext);
  return authenticatedContext.me.admin ? <>{children}</> : <Navigate replace to='/' />;
 };
 export default RequireAdmin;
--- a/interface/src/components/routing/RequireAuthenticated.tsx
+++ b/interface/src/components/routing/RequireAuthenticated.tsx
@ -0,0 +1,26 @@
 import { FC, useContext, useEffect } from 'react';
 import { Navigate, useLocation } from "react-router-dom";
 import { AuthenticatedContext, AuthenticatedContextValue, AuthenticationContext } from '../../contexts/authentication/context';
 import { storeLoginRedirect } from '../../api/authentication';
 import { RequiredChildrenProps } from '../../utils';
 const RequireAuthenticated: FC<RequiredChildrenProps> = ({ children }) => {
  const authenticationContext = useContext(AuthenticationContext);
  const location = useLocation();
  useEffect(() => {
    if (!authenticationContext.me) {
      storeLoginRedirect(location);
    }
  });
  return authenticationContext.me ?
    <AuthenticatedContext.Provider value={authenticationContext as AuthenticatedContextValue}>
      {children}
    </AuthenticatedContext.Provider>
    :
    <Navigate to='/unauthorized' />;
 };
 export default RequireAuthenticated;
--- a/interface/src/components/routing/RequireUnauthenticated.tsx
+++ b/interface/src/components/routing/RequireUnauthenticated.tsx
@ -0,0 +1,22 @@
 import { FC, useContext } from 'react';
 import { Navigate } from "react-router-dom";
 import * as AuthenticationApi from '../../api/authentication';
 import { AuthenticationContext } from '../../contexts/authentication';
 import { RequiredChildrenProps } from '../../utils';
 import { FeaturesContext } from '../../contexts/features';
 const RequireUnauthenticated: FC<RequiredChildrenProps> = ({ children }) => {
  const { features } = useContext(FeaturesContext);
  const authenticationContext = useContext(AuthenticationContext);
  return (
    authenticationContext.me ?
      <Navigate to={AuthenticationApi.fetchLoginRedirect(features)} />
      :
      <>{children}</>
  );
 };
 export default RequireUnauthenticated;
--- a/interface/src/components/routing/RouterTabs.tsx
+++ b/interface/src/components/routing/RouterTabs.tsx
@ -0,0 +1,30 @@
 import React, { FC } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Tabs, useMediaQuery, useTheme } from '@mui/material';
 import { RequiredChildrenProps } from '../../utils';
 interface RouterTabsProps extends RequiredChildrenProps {
  value: string | false;
 }
 const RouterTabs: FC<RouterTabsProps> = ({ value, children }) => {
  const navigate = useNavigate();
  const theme = useTheme();
  const smallDown = useMediaQuery(theme.breakpoints.down('sm'));
  const handleTabChange = (event: React.ChangeEvent<{}>, path: string) => {
    navigate(path);
  };
  return (
    <Tabs value={value} onChange={handleTabChange} variant={smallDown ? "scrollable" : "fullWidth"}>
      {children}
    </Tabs>
  );
 };
 export default RouterTabs;
--- a/interface/src/components/routing/index.ts
+++ b/interface/src/components/routing/index.ts
@ -0,0 +1,6 @@
 export { default as RouterTabs } from './RouterTabs';
 export { default as RequireAdmin } from './RequireAdmin';
 export { default as RequireAuthenticated } from './RequireAuthenticated';
 export { default as RequireUnauthenticated } from './RequireUnauthenticated';
 export * from './useRouterTab';
--- a/interface/src/components/routing/useRouterTab.ts
+++ b/interface/src/components/routing/useRouterTab.ts
@ -0,0 +1,9 @@
 import { useMatch, useResolvedPath } from "react-router-dom";
 export const useRouterTab = () => {
  const routerTabPath = useResolvedPath(":tab");
  const routerTabPathMatch = useMatch(routerTabPath.pathname);
  const routerTab = routerTabPathMatch?.params?.tab || false;
  return { routerTab } as const;
 };
--- a/interface/src/components/upload/SingleUpload.tsx
+++ b/interface/src/components/upload/SingleUpload.tsx
@ -0,0 +1,88 @@
 import { FC, Fragment } from 'react';
 import { useDropzone, DropzoneState } from 'react-dropzone';
 import { Box, Button, LinearProgress, Theme, Typography, useTheme } from '@mui/material';
 import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 import CancelIcon from '@mui/icons-material/Cancel';
 const progressPercentage = (progress: ProgressEvent) => Math.round((progress.loaded * 100) / progress.total);
 const getBorderColor = (theme: Theme, props: DropzoneState) => {
  if (props.isDragAccept) {
    return theme.palette.success.main;
  }
  if (props.isDragReject) {
    return theme.palette.error.main;
  }
  if (props.isDragActive) {
    return theme.palette.info.main;
  }
  return theme.palette.grey[700];
 };
 export interface SingleUploadProps {
  onDrop: (acceptedFiles: File[]) => void;
  onCancel: () => void;
  accept?: string | string[];
  uploading: boolean;
  progress?: ProgressEvent;
 }
 const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, accept, uploading, progress }) => {
  const dropzoneState = useDropzone({ onDrop, accept, disabled: uploading, multiple: false });
  const { getRootProps, getInputProps } = dropzoneState;
  const theme = useTheme();
  const progressText = () => {
    if (uploading) {
      if (progress?.lengthComputable) {
        return `Uploading: ${progressPercentage(progress)}%`;
      }
      return "Uploading\u2026";
    }
    return "Drop file or click here";
  };
  return (
    <Box
      {...getRootProps({
        sx: {
          py: 8,
          px: 2,
          borderWidth: 2,
          borderRadius: 2,
          borderStyle: 'dashed',
          color: theme.palette.grey[700],
          transition: 'border .24s ease-in-out',
          width: '100%',
          cursor: uploading ? 'default' : 'pointer',
          borderColor: getBorderColor(theme, dropzoneState)
        }
      })}
    >
      <input {...getInputProps()} />
      <Box flexDirection="column" display="flex" alignItems="center">
        <CloudUploadIcon fontSize='large' />
        <Typography variant="h6">
          {progressText()}
        </Typography>
        {uploading && (
          <Fragment>
            <Box width="100%" p={2}>
              <LinearProgress
                variant={!progress || progress.lengthComputable ? "determinate" : "indeterminate"}
                value={!progress ? 0 : progress.lengthComputable ? progressPercentage(progress) : 0}
              />
            </Box>
            <Button startIcon={<CancelIcon />} variant="contained" color="secondary" onClick={onCancel}>
              Cancel
            </Button>
          </Fragment>
        )}
      </Box>
    </Box >
  );
 };
 export default SingleUpload;
--- a/interface/src/components/upload/index.ts
+++ b/interface/src/components/upload/index.ts
@ -0,0 +1,2 @@
 export { default as SingleUpload } from './SingleUpload';
 export { default as useFileUpload } from './useFileUpload';
--- a/interface/src/components/upload/useFileUpload.ts
+++ b/interface/src/components/upload/useFileUpload.ts
@ -0,0 +1,59 @@
 import { useCallback, useEffect, useState } from 'react';
 import axios, { AxiosPromise, CancelTokenSource } from 'axios';
 import { useSnackbar } from "notistack";
 import { extractErrorMessage } from '../../utils';
 import { FileUploadConfig } from '../../api/endpoints';
 interface MediaUploadOptions {
  upload: (file: File, config?: FileUploadConfig) => AxiosPromise<void>;
 }
 const useFileUpload = ({ upload }: MediaUploadOptions) => {
  const { enqueueSnackbar } = useSnackbar();
  const [uploading, setUploading] = useState<boolean>(false);
  const [uploadProgress, setUploadProgress] = useState<ProgressEvent>();
  const [uploadCancelToken, setUploadCancelToken] = useState<CancelTokenSource>();
  const resetUploadingStates = () => {
    setUploading(false);
    setUploadProgress(undefined);
    setUploadCancelToken(undefined);
  };
  const cancelUpload = useCallback(() => {
    uploadCancelToken?.cancel();
    resetUploadingStates();
  }, [uploadCancelToken]);
  useEffect(() => {
    return () => {
      uploadCancelToken?.cancel();
    };
  }, [uploadCancelToken]);
  const uploadFile = async (images: File[]) => {
    try {
      const cancelToken = axios.CancelToken.source();
      setUploadCancelToken(cancelToken);
      setUploading(true);
      await upload(images[0], {
        onUploadProgress: setUploadProgress,
        cancelToken: cancelToken.token
      });
      resetUploadingStates();
      enqueueSnackbar('Upload successful', { variant: 'success' });
    } catch (error: any) {
      if (axios.isCancel(error)) {
        enqueueSnackbar('Upload aborted', { variant: 'warning' });
      } else {
        resetUploadingStates();
        enqueueSnackbar(extractErrorMessage(error, 'Upload failed'), { variant: 'error' });
      }
    }
  };
  return [uploadFile, cancelUpload, uploading, uploadProgress] as const;
 };
 export default useFileUpload;
--- a/interface/src/contexts/authentication/Authentication.tsx
+++ b/interface/src/contexts/authentication/Authentication.tsx
@ -0,0 +1,88 @@
 import { FC, useCallback, useContext, useEffect, useState } from 'react';
 import { useSnackbar } from 'notistack';
 import { useNavigate } from 'react-router-dom';
 import * as AuthenticationApi from '../../api/authentication';
 import { ACCESS_TOKEN } from '../../api/endpoints';
 import { RequiredChildrenProps } from '../../utils';
 import { LoadingSpinner } from '../../components';
 import { Me } from '../../types';
 import { FeaturesContext } from '../features';
 import { AuthenticationContext } from './context';
 const Authentication: FC<RequiredChildrenProps> = ({ children }) => {
  const { features } = useContext(FeaturesContext);
  const navigate = useNavigate();
  const { enqueueSnackbar } = useSnackbar();
  const [initialized, setInitialized] = useState<boolean>(false);
  const [me, setMe] = useState<Me>();
  const signIn = (accessToken: string) => {
    try {
      AuthenticationApi.getStorage().setItem(ACCESS_TOKEN, accessToken);
      const decodedMe = AuthenticationApi.decodeMeJWT(accessToken);
      setMe(decodedMe);
      enqueueSnackbar(`Logged in as ${decodedMe.username}`, { variant: 'success' });
    } catch (error: any) {
      setMe(undefined);
      throw new Error("Failed to parse JWT " + error.message);
    }
  };
  const signOut = (redirect: boolean) => {
    AuthenticationApi.clearAccessToken();
    setMe(undefined);
    if (redirect) {
      navigate('/');
    }
  };
  const refresh = useCallback(async () => {
    if (!features.security) {
      setMe({ admin: true, username: "admin" });
      setInitialized(true);
      return;
    }
    const accessToken = AuthenticationApi.getStorage().getItem(ACCESS_TOKEN);
    if (accessToken) {
      try {
        await AuthenticationApi.verifyAuthorization();
        setMe(AuthenticationApi.decodeMeJWT(accessToken));
        setInitialized(true);
      } catch (error: any) {
        setMe(undefined);
        setInitialized(true);
      }
    } else {
      setMe(undefined);
      setInitialized(true);
    }
  }, [features]);
  useEffect(() => {
    refresh();
  }, [refresh]);
  if (initialized) {
    return (
      <AuthenticationContext.Provider
        value={{
          signIn,
          signOut,
          me,
          refresh
        }}
      >
        {children}
      </AuthenticationContext.Provider >
    );
  }
  return (
    <LoadingSpinner height="100vh" />
  );
 };
 export default Authentication;
--- a/interface/src/contexts/authentication/context.ts
+++ b/interface/src/contexts/authentication/context.ts
@ -0,0 +1,23 @@
 import { createContext } from "react";
 import { Me } from "../../types";
 export interface AuthenticationContextValue {
  refresh: () => Promise<void>;
  signIn: (accessToken: string) => void;
  signOut: (redirect: boolean) => void;
  me?: Me;
 }
 const AuthenticationContextDefaultValue = {} as AuthenticationContextValue;
 export const AuthenticationContext = createContext(
  AuthenticationContextDefaultValue
 );
 export interface AuthenticatedContextValue extends AuthenticationContextValue {
  me: Me;
 }
 const AuthenticatedContextDefaultValue = {} as AuthenticatedContextValue;
 export const AuthenticatedContext = createContext(
  AuthenticatedContextDefaultValue
 );
--- a/interface/src/contexts/authentication/index.ts
+++ b/interface/src/contexts/authentication/index.ts
@ -0,0 +1,2 @@
 export * from './context';
 export { default as Authentication } from './Authentication';
--- a/interface/src/contexts/features/FeaturesLoader.tsx
+++ b/interface/src/contexts/features/FeaturesLoader.tsx
@ -0,0 +1,53 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import * as FeaturesApi from '../../api/features';
 import { extractErrorMessage, RequiredChildrenProps } from '../../utils';
 import { Features } from '../../types';
 import {ApplicationError, LoadingSpinner} from '../../components';
 import { FeaturesContext } from '.';
 const FeaturesLoader: FC<RequiredChildrenProps> = (props) => {
  const [errorMessage, setErrorMessage] = useState<string>();
  const [features, setFeatures] = useState<Features>();
  const loadFeatures = useCallback(async () => {
    try {
      const response = await FeaturesApi.readFeatures();
      setFeatures(response.data);
    } catch (error: any) {
      setErrorMessage(extractErrorMessage(error, 'Failed to fetch application details.'));
    }
  }, []);
  useEffect(() => {
    loadFeatures();
  }, [loadFeatures]);
  if (features) {
    return (
      <FeaturesContext.Provider
        value={{
          features
        }}
      >
        {props.children}
      </FeaturesContext.Provider>
    );
  }
  if (errorMessage) {
    return (
      <ApplicationError message={errorMessage} />
    );
  }
  return (
    <LoadingSpinner height="100vh" />
  );
 };
 export default FeaturesLoader;
--- a/interface/src/contexts/features/context.ts
+++ b/interface/src/contexts/features/context.ts
@ -0,0 +1,12 @@
 import React from 'react';
 import { Features } from '../../types';
 export interface FeaturesContextValue {
  features: Features;
 }
 const FeaturesContextDefaultValue = {} as FeaturesContextValue;
 export const FeaturesContext = React.createContext(
  FeaturesContextDefaultValue
 );
--- a/interface/src/contexts/features/index.ts
+++ b/interface/src/contexts/features/index.ts
@ -0,0 +1,2 @@
 export * from './context';
 export { default as FeaturesLoader } from './FeaturesLoader';
--- a/interface/src/framework/ap/APSettingsForm.tsx
+++ b/interface/src/framework/ap/APSettingsForm.tsx
@ -0,0 +1,171 @@
 import { FC, useState } from 'react';
 import { ValidateFieldsError } from 'async-validator';
 import { range } from 'lodash';
 import { Button, Checkbox, MenuItem } from '@mui/material';
 import SaveIcon from '@mui/icons-material/Save';
 import * as APApi from "../../api/ap";
 import { APProvisionMode, APSettings } from '../../types';
 import { BlockFormControlLabel, ButtonRow, FormLoader, SectionContent, ValidatedPasswordField, ValidatedTextField } from '../../components';
 import { createAPSettingsValidator, validate } from '../../validators';
 import { numberValue, updateValue, useRest } from '../../utils';
 export const isAPEnabled = ({ provision_mode }: APSettings) => {
  return provision_mode === APProvisionMode.AP_MODE_ALWAYS || provision_mode === APProvisionMode.AP_MODE_DISCONNECTED;
 };
 const APSettingsForm: FC = () => {
  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
  const {
    loadData, saving, data, setData, saveData, errorMessage
  } = useRest<APSettings>({ read: APApi.readAPSettings, update: APApi.updateAPSettings });
  const updateFormValue = updateValue(setData);
  const content = () => {
    if (!data) {
      return (<FormLoader onRetry={loadData} errorMessage={errorMessage} />);
    }
    const validateAndSubmit = async () => {
      try {
        setFieldErrors(undefined);
        await validate(createAPSettingsValidator(data), data);
        saveData();
      } catch (errors: any) {
        setFieldErrors(errors);
      }
    };
    return (
      <>
        <ValidatedTextField
          fieldErrors={fieldErrors}
          name="provision_mode"
          label="Provide Access Point&hellip;"
          value={data.provision_mode}
          fullWidth
          select
          variant="outlined"
          onChange={updateFormValue}
          margin="normal"
        >
          <MenuItem value={APProvisionMode.AP_MODE_ALWAYS}>Always</MenuItem>
          <MenuItem value={APProvisionMode.AP_MODE_DISCONNECTED}>When WiFi Disconnected</MenuItem>
          <MenuItem value={APProvisionMode.AP_NEVER}>Never</MenuItem>
        </ValidatedTextField>
        {
          isAPEnabled(data) &&
          <>
            <ValidatedTextField
              fieldErrors={fieldErrors}
              name="ssid"
              label="Access Point SSID"
              fullWidth
              variant="outlined"
              value={data.ssid}
              onChange={updateFormValue}
              margin="normal"
            />
            <ValidatedPasswordField
              fieldErrors={fieldErrors}
              name="password"
              label="Access Point Password"
              fullWidth
              variant="outlined"
              value={data.password}
              onChange={updateFormValue}
              margin="normal"
            />
            <ValidatedTextField
              fieldErrors={fieldErrors}
              name="channel"
              label="Preferred Channel"
              value={numberValue(data.channel)}
              fullWidth
              select
              type="number"
              variant="outlined"
              onChange={updateFormValue}
              margin="normal"
            >
              {
                range(1, 14).map((i) => <MenuItem key={i} value={i}>{i}</MenuItem>)
              }
            </ValidatedTextField>
            <BlockFormControlLabel
              control={
                <Checkbox
                  name="ssid_hidden"
                  checked={data.ssid_hidden}
                  onChange={updateFormValue}
                />
              }
              label="Hide SSID?"
            />
            <ValidatedTextField
              fieldErrors={fieldErrors}
              name="max_clients"
              label="Max Clients"
              value={numberValue(data.max_clients)}
              fullWidth
              select
              type="number"
              variant="outlined"
              onChange={updateFormValue}
              margin="normal"
            >
              {
                range(1, 9).map((i) => <MenuItem key={i} value={i}>{i}</MenuItem>)
              }
            </ValidatedTextField>
            <ValidatedTextField
              fieldErrors={fieldErrors}
              name="local_ip"
              label="Local IP"
              fullWidth
              variant="outlined"
              value={data.local_ip}
              onChange={updateFormValue}
              margin="normal"
            />
            <ValidatedTextField
              fieldErrors={fieldErrors}
              name="gateway_ip"
              label="Gateway"
              fullWidth
              variant="outlined"
              value={data.gateway_ip}
              onChange={updateFormValue}
              margin="normal"
            />
            <ValidatedTextField
              fieldErrors={fieldErrors}
              name="subnet_mask"
              label="Subnet"
              fullWidth
              variant="outlined"
              value={data.subnet_mask}
              onChange={updateFormValue}
              margin="normal"
            />
          </>
        }
        <ButtonRow mt={1}>
          <Button startIcon={<SaveIcon />} disabled={saving} variant="contained" color="primary" type="submit" onClick={validateAndSubmit}>
            Save
          </Button>
        </ButtonRow>
      </>
    );
  };
  return (
    <SectionContent title='Access Point Settings' titleGutter>
      {content()}
    </SectionContent>
  );
 };
 export default APSettingsForm;
--- a/interface/src/framework/ap/APStatusForm.tsx
+++ b/interface/src/framework/ap/APStatusForm.tsx
@ -0,0 +1,105 @@
 import { FC } from "react";
 import { Avatar, Button, Divider, List, ListItem, ListItemAvatar, ListItemText, Theme, useTheme } from "@mui/material";
 import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import ComputerIcon from '@mui/icons-material/Computer';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import * as APApi from "../../api/ap";
 import { APNetworkStatus, APStatus } from "../../types";
 import { ButtonRow, FormLoader, SectionContent } from "../../components";
 import { useRest } from "../../utils";
 export const apStatusHighlight = ({ status }: APStatus, theme: Theme) => {
  switch (status) {
    case APNetworkStatus.ACTIVE:
      return theme.palette.success.main;
    case APNetworkStatus.INACTIVE:
      return theme.palette.info.main;
    case APNetworkStatus.LINGERING:
      return theme.palette.warning.main;
    default:
      return theme.palette.warning.main;
  }
 };
 export const apStatus = ({ status }: APStatus) => {
  switch (status) {
    case APNetworkStatus.ACTIVE:
      return "Active";
    case APNetworkStatus.INACTIVE:
      return "Inactive";
    case APNetworkStatus.LINGERING:
      return "Lingering until idle";
    default:
      return "Unknown";
  }
 };
 const APStatusForm: FC = () => {
  const { loadData, data, errorMessage } = useRest<APStatus>({ read: APApi.readAPStatus });
  const theme = useTheme();
  const content = () => {
    if (!data) {
      return (<FormLoader onRetry={loadData} errorMessage={errorMessage} />);
    }
    return (
      <>
        <List>
          <ListItem>
            <ListItemAvatar>
              <Avatar sx={{ bgcolor: apStatusHighlight(data, theme) }}>
                <SettingsInputAntennaIcon />
              </Avatar>
            </ListItemAvatar>
            <ListItemText primary="Status" secondary={apStatus(data)} />
          </ListItem>
          <Divider variant="inset" component="li" />
          <ListItem>
            <ListItemAvatar>
              <Avatar>IP</Avatar>
            </ListItemAvatar>
            <ListItemText primary="IP Address" secondary={data.ip_address} />
          </ListItem>
          <Divider variant="inset" component="li" />
          <ListItem>
            <ListItemAvatar>
              <Avatar>
                <DeviceHubIcon />
              </Avatar>
            </ListItemAvatar>
            <ListItemText primary="MAC Address" secondary={data.mac_address} />
          </ListItem>
          <Divider variant="inset" component="li" />
          <ListItem>
            <ListItemAvatar>
              <Avatar>
                <ComputerIcon />
              </Avatar>
            </ListItemAvatar>
            <ListItemText primary="AP Clients" secondary={data.station_num} />
          </ListItem>
          <Divider variant="inset" component="li" />
        </List>
        <ButtonRow pt={1}>
          <Button startIcon={<RefreshIcon />} variant="contained" color="secondary" onClick={loadData}>
            Refresh
          </Button>
        </ButtonRow>
      </>
    );
  };
  return (
    <SectionContent title='Access Point Status' titleGutter>
      {content()}
    </SectionContent>
  );
 };
 export default APStatusForm;
--- a/interface/src/framework/ap/AccessPoint.tsx
+++ b/interface/src/framework/ap/AccessPoint.tsx
@ -0,0 +1,41 @@
 import React, { FC, useContext } from 'react';
 import { Navigate, Routes, Route } from 'react-router-dom';
 import { Tab } from '@mui/material';
 import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from '../../components';
 import { AuthenticatedContext } from '../../contexts/authentication';
 import APStatusForm from './APStatusForm';
 import APSettingsForm from './APSettingsForm';
 const AccessPoint: FC = () => {
  useLayoutTitle("Access Point");
  const authenticatedContext = useContext(AuthenticatedContext);
  const { routerTab } = useRouterTab();
  return (
    <>
      <RouterTabs value={routerTab}>
        <Tab value="status" label="Intercom Status" />
        <Tab value="settings" label="Intercom Settings" disabled={!authenticatedContext.me.admin} />
      </RouterTabs>
      <Routes>
        <Route path="status" element={<APStatusForm />} />
        <Route
          path="settings"
          element={
            <RequireAdmin>
              <APSettingsForm />
            </RequireAdmin>
          }
        />
        <Route path="/*" element={<Navigate replace to="status" />} />
      </Routes>
    </>
  );
 };
 export default AccessPoint;
--- a/interface/src/framework/mqtt/Mqtt.tsx
+++ b/interface/src/framework/mqtt/Mqtt.tsx
@ -0,0 +1,41 @@
 import React, { FC, useContext } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { Tab } from '@mui/material';
 import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from '../../components';
 import { AuthenticatedContext } from '../../contexts/authentication';
 import MqttStatusForm from './MqttStatusForm';
 import MqttSettingsForm from './MqttSettingsForm';
 const Mqtt: FC = () => {
  useLayoutTitle("MQTT");
  const authenticatedContext = useContext(AuthenticatedContext);
  const { routerTab } = useRouterTab();
  return (
    <>
      <RouterTabs value={routerTab}>
        <Tab value="status" label="MQTT Status" />
        <Tab value="settings" label="MQTT Settings" disabled={!authenticatedContext.me.admin} />
      </RouterTabs>
      <Routes>
        <Route path="status" element={<MqttStatusForm />} />
        <Route
          path="settings"
          element={
            <RequireAdmin>
              <MqttSettingsForm />
            </RequireAdmin>
          }
        />
        <Route path="/*" element={<Navigate replace to="status" />} />
      </Routes>
    </>
  );
 };
 export default Mqtt;
--- a/interface/src/framework/mqtt/MqttSettingsForm.tsx
+++ b/interface/src/framework/mqtt/MqttSettingsForm.tsx
@ -0,0 +1,144 @@
 import { FC, useState } from 'react';
 import { ValidateFieldsError } from 'async-validator';
 import { Button, Checkbox } from '@mui/material';
 import SaveIcon from '@mui/icons-material/Save';
 import * as MqttApi from "../../api/mqtt";
 import { MqttSettings } from '../../types';
 import { BlockFormControlLabel, ButtonRow, FormLoader, SectionContent, ValidatedPasswordField, ValidatedTextField } from '../../components';
 import { MQTT_SETTINGS_VALIDATOR, validate } from '../../validators';
 import { numberValue, updateValue, useRest } from '../../utils';
 const MqttSettingsForm: FC = () => {
  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
  const {
    loadData, saving, data, setData, saveData, errorMessage
  } = useRest<MqttSettings>({ read: MqttApi.readMqttSettings, update: MqttApi.updateMqttSettings });
  const updateFormValue = updateValue(setData);
  const content = () => {
    if (!data) {
      return (<FormLoader onRetry={loadData} errorMessage={errorMessage} />);
    }
    const validateAndSubmit = async () => {
      try {
        setFieldErrors(undefined);
        await validate(MQTT_SETTINGS_VALIDATOR, data);
        saveData();
      } catch (errors: any) {
        setFieldErrors(errors);
      }
    };
    return (
      <>
        <BlockFormControlLabel
          control={
            <Checkbox
              name="enabled"
              checked={data.enabled}
              onChange={updateFormValue}
            />
          }
          label="Enable MQTT?"
        />
        <ValidatedTextField
          fieldErrors={fieldErrors}
          name="host"
          label="Host"
          fullWidth
          variant="outlined"
          value={data.host}
          onChange={updateFormValue}
          margin="normal"
        />
        <ValidatedTextField
          fieldErrors={fieldErrors}
          name="port"
          label="Port"
          fullWidth
          variant="outlined"
          value={numberValue(data.port)}
          type="number"
          onChange={updateFormValue}
          margin="normal"
        />
        <ValidatedTextField
          name="username"
          label="Username"
          fullWidth
          variant="outlined"
          value={data.username}
          onChange={updateFormValue}
          margin="normal"
        />
        <ValidatedPasswordField
          name="password"
          label="Password"
          fullWidth
          variant="outlined"
          value={data.password}
          onChange={updateFormValue}
          margin="normal"
        />
        <ValidatedTextField
          name="client_id"
          label="Client ID (optional)"
          fullWidth
          variant="outlined"
          value={data.client_id}
          onChange={updateFormValue}
          margin="normal"
        />
        <ValidatedTextField
          fieldErrors={fieldErrors}
          name="keep_alive"
          label="Keep Alive (seconds)"
          fullWidth
          variant="outlined"
          value={numberValue(data.keep_alive)}
          type="number"
          onChange={updateFormValue}
          margin="normal"
        />
        <BlockFormControlLabel
          control={
            <Checkbox
              name="clean_session"
              checked={data.clean_session}
              onChange={updateFormValue}
            />
          }
          label="Clean Session?"
        />
        <ValidatedTextField
          fieldErrors={fieldErrors}
          name="max_topic_length"
          label="Max Topic Length"
          fullWidth
          variant="outlined"
          value={numberValue(data.max_topic_length)}
          type="number"
          onChange={updateFormValue}
          margin="normal"
        />
        <ButtonRow mt={1}>
          <Button startIcon={<SaveIcon />} disabled={saving} variant="contained" color="primary" type="submit" onClick={validateAndSubmit}>
            Save
          </Button>
        </ButtonRow>
      </>
    );
  };
  return (
    <SectionContent title='MQTT Settings' titleGutter>
      {content()}
    </SectionContent>
  );
 };
 export default MqttSettingsForm;
--- a/interface/src/framework/mqtt/MqttStatusForm.tsx
+++ b/interface/src/framework/mqtt/MqttStatusForm.tsx
@ -0,0 +1,126 @@
 import { FC } from "react";
 import { Avatar, Button, Divider, List, ListItem, ListItemAvatar, ListItemText, Theme, useTheme } from "@mui/material";
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import ReportIcon from '@mui/icons-material/Report';
 import * as MqttApi from "../../api/mqtt";
 import { MqttStatus, MqttDisconnectReason } from "../../types";
 import { ButtonRow, FormLoader, SectionContent } from "../../components";
 import { useRest } from "../../utils";
 export const mqttStatusHighlight = ({ enabled, connected }: MqttStatus, theme: Theme) => {
  if (!enabled) {
    return theme.palette.info.main;
  }
  if (connected) {
    return theme.palette.success.main;
  }
  return theme.palette.error.main;
 };
 export const mqttStatus = ({ enabled, connected }: MqttStatus) => {
  if (!enabled) {
    return "Not enabled";
  }
  if (connected) {
    return "Connected";
  }
  return "Disconnected";
 };
 export const disconnectReason = ({ disconnect_reason }: MqttStatus) => {
  switch (disconnect_reason) {
    case MqttDisconnectReason.TCP_DISCONNECTED:
      return "TCP disconnected";
    case MqttDisconnectReason.MQTT_UNACCEPTABLE_PROTOCOL_VERSION:
      return "Unacceptable protocol version";
    case MqttDisconnectReason.MQTT_IDENTIFIER_REJECTED:
      return "Client ID rejected";
    case MqttDisconnectReason.MQTT_SERVER_UNAVAILABLE:
      return "Server unavailable";
    case MqttDisconnectReason.MQTT_MALFORMED_CREDENTIALS:
      return "Malformed credentials";
    case MqttDisconnectReason.MQTT_NOT_AUTHORIZED:
      return "Not authorized";
    case MqttDisconnectReason.ESP8266_NOT_ENOUGH_SPACE:
      return "Device out of memory";
    case MqttDisconnectReason.TLS_BAD_FINGERPRINT:
      return "Server fingerprint invalid";
    default:
      return "Unknown";
  }
 };
 const MqttStatusForm: FC = () => {
  const { loadData, data, errorMessage } = useRest<MqttStatus>({ read: MqttApi.readMqttStatus });
  const theme = useTheme();
  const content = () => {
    if (!data) {
      return (<FormLoader onRetry={loadData} errorMessage={errorMessage} />);
    }
    const renderConnectionStatus = () => {
      if (data.connected) {
        return (
          <>
            <ListItem>
              <ListItemAvatar>
                <Avatar>#</Avatar>
              </ListItemAvatar>
              <ListItemText primary="Client ID" secondary={data.client_id} />
            </ListItem>
            <Divider variant="inset" component="li" />
          </>
        );
      }
      return (
        <>
          <ListItem>
            <ListItemAvatar>
              <Avatar>
                <ReportIcon />
              </Avatar>
            </ListItemAvatar>
            <ListItemText primary="Disconnect Reason" secondary={disconnectReason(data)} />
          </ListItem>
          <Divider variant="inset" component="li" />
        </>
      );
    };
    return (
      <>
        <List>
          <ListItem>
            <ListItemAvatar>
              <Avatar sx={{ bgcolor: mqttStatusHighlight(data, theme) }}>
                <DeviceHubIcon />
              </Avatar>
            </ListItemAvatar>
            <ListItemText primary="Status" secondary={mqttStatus(data)} />
          </ListItem>
          <Divider variant="inset" component="li" />
          {data.enabled && renderConnectionStatus()}
        </List >
        <ButtonRow pt={1}>
          <Button startIcon={<RefreshIcon />} variant="contained" color="secondary" onClick={loadData}>
            Refresh
          </Button>
        </ButtonRow>
      </>
    );
  };
  return (
    <SectionContent title='MQTT Status' titleGutter>
      {content()}
    </SectionContent>
  );
 };
 export default MqttStatusForm;
--- a/interface/src/framework/network/NetworkConnection.tsx
+++ b/interface/src/framework/network/NetworkConnection.tsx
@ -0,0 +1,61 @@
 import React, { FC, useCallback, useContext, useState } from 'react';
 import { Navigate, Routes, Route, useNavigate } from 'react-router-dom';
 import { Tab } from '@mui/material';
 import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from '../../components';
 import { Network } from '../../types';
 import { AuthenticatedContext } from '../../contexts/authentication';
 import { NetworkConnectionContext } from './NetworkConnectionContext';
 import NetworkStatusForm from './NetworkStatusForm';
 import NetworkScanner from './NetworkScanner';
 import NetworkSettingsForm from './NetworkSettingsForm';
 const NetworkConnection: FC = () => {
  useLayoutTitle("Network");
  const authenticatedContext = useContext(AuthenticatedContext);
  const navigate = useNavigate();
  const { routerTab } = useRouterTab();
  const [selectedNetwork, setSelectedNetwork] = useState<Network>();
  const selectNetwork = useCallback((network: Network) => {
    setSelectedNetwork(network);
    navigate('settings');
  }, [navigate]);
  const deselectNetwork = useCallback(() => {
    setSelectedNetwork(undefined);
  }, []);
  return (
    <NetworkConnectionContext.Provider
      value={{
        selectedNetwork,
        selectNetwork,
        deselectNetwork
      }}
    >
      <RouterTabs value={routerTab}>
        <Tab value="status" label="Network Status" />
        <Tab value="settings" label="Network Settings" disabled={!authenticatedContext.me.admin} />
      </RouterTabs>
      <Routes>
        <Route path="status" element={<NetworkStatusForm />} />
        <Route
          path="settings"
          element={
            <RequireAdmin>
              <NetworkSettingsForm />
            </RequireAdmin>
          }
        />
        <Route path="/*" element={<Navigate replace to="status" />} />
      </Routes>
    </NetworkConnectionContext.Provider>
  );
 };
 export default NetworkConnection;
--- a/Show More
+++ b/Show More
		`@ -0,0 +1,2 @@`
							`# Disable the generation of the sourcemap on the production build to reduce the artefact size`
							`GENERATE_SOURCEMAP=false`
		`@ -0,0 +1,2 @@`
							`export const PROJECT_NAME = process.env.REACT_APP_PROJECT_NAME \|\| 'Digitum';`
							`export const PROJECT_PATH = process.env.REACT_APP_PROJECT_PATH \|\| 'project';`
		`@ -0,0 +1,2 @@`
							`export * from './context';`
							`export { default as Layout } from './Layout';`
		`@ -0,0 +1,2 @@`
							`export { default as SingleUpload } from './SingleUpload';`
							`export { default as useFileUpload } from './useFileUpload';`
		`@ -0,0 +1,2 @@`
							`export * from './context';`
							`export { default as Authentication } from './Authentication';`
		`@ -0,0 +1,2 @@`
							`export * from './context';`
							`export { default as FeaturesLoader } from './FeaturesLoader';`