initial commit

.gitignore

@@ -1,23 +1,24 @@
 # vscode
 .vscode
 
+# build
+/build/
+.clang_complete
+.gcc-flags.json
+
 # platformio
 .pio
-lib/readme.txt
+pio_local.ini
-
-# web stuff compiled
-src/websrc/temp
-src/webh/*.gz.h
-
-# NPM directories
-node_modules
 
 # OS specific
 .DS_Store
+*Thumbs.db
 
 # project specfic
-scripts/stackdmp.txt
+/scripts/stackdmp.txt
-firmware
-
-# firmware
 *.bin
+emsesp
+/data/www/
+/lib/framework/WWWData.h
+/interface/build/
+/interface/node_modules/

.travis.yml

@@ -10,11 +10,10 @@ cache:
 
 env:
   global:
-    #   - BUILDER_TOTAL_THREADS=4
     - BUILDER_TOTAL_THREADS=1
     - OWNER=${TRAVIS_REPO_SLUG%/*}
-    - DEV=${OWNER/proddy/dev}
+    - DEV=${OWNER/proddy/v2}
-    - BRANCH=${TRAVIS_BRANCH/dev/}
+    - BRANCH=${TRAVIS_BRANCH/v2/}
     - TAG=${DEV}${BRANCH:+_}${BRANCH}
 
 install:
@@ -30,22 +29,16 @@ branches:
 
 script:
   - ./scripts/build.sh
-# - ./scripts/build.sh -p
 
 stages:
   - name: Release
-#   if: type IN (cron, api)
 
 jobs:
   include:
     - stage: Release
-#     env: BUILDER_THREAD=0
-#   - env: BUILDER_THREAD=1
-#   - env: BUILDER_THREAD=2
-#   - env: BUILDER_THREAD=3
 
 before_deploy:
-  - export FIRMWARE_VERSION=$(grep -E '^#define APP_VERSION' ./src/version.h | awk '{print $3}' | sed 's/"//g')
+  - export FIRMWARE_VERSION=$(grep -E '^#define EMSESP_APP_VERSION' ./src/version.h | awk '{print $3}' | sed 's/"//g')
   - git tag -f travis-${TAG}-build
   - git remote add gh
     https://${OWNER}:${GITHUB_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git
@@ -56,13 +49,11 @@ before_deploy:
 deploy:
   provider: releases
   edge:
-  #  source: wenkokke/dpl
     branch: master
   token: ${GITHUB_TOKEN}
   file_glob: true
-  # file: "firmware/*.bin"
   file: "*.bin"
-  name: latest development build
+  name: latest v2 development builds
   release_notes:
     Version $FIRMWARE_VERSION.
     Automatic firmware builds of the current EMS-ESP branch built on $(date +'%F %T %Z') from commit $TRAVIS_COMMIT.
@@ -73,16 +64,9 @@ deploy:
   target_commitish: $TRAVIS_COMMIT
   on:
     tags: false
-    branch: dev
+    branch: v2
 
 notifications:
   email:
     on_success: change
     on_failure: change
-
-  webhooks:
-    urls:
-      - https://webhooks.gitter.im/e/57e15f7798656d888194
-    on_success: always
-    on_failure: never
-    on_start: never

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.0 alpha]
+
+### Changed
+- everything. See README
+
 ## [1.9.5] 30-04-2020
 
 ### Added
@@ -46,7 +51,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.9.4] 15-12-2019
 
-There are breaking changes in this release. Make you sure you adjust the MQTT topics as described in the wiki.
+There are breaking changes in this release. See `publish_time` below and make sure you set this value to 0.
 
 ### Added
 
@@ -182,7 +187,7 @@ There are breaking changes in this release. Make you sure you adjust the MQTT to
 ### Added
 
 - Added back -DCRASH in Debug build target for capturing any ESP8266 stack dumps during crashes
-- Basic Web Interface, for checking stats and setting wifi credentials. See wiki for more details.
+- Web Interface, for checking stats and setting wifi credentials. See wiki for more details.
 - reset firmware option. If the reset button on the ESP is pressed during boot up sequence (the LED is flashing very fast) all settings are erased and goes into AP mode.
 - Added tx_mode back with options 0,1 and 2 until we've fixed option 2 that works for everyone and doesn't reset ESP
 - More solar module data captured, thanks to @Vuego123

README.md

@@ -1,42 +1,113 @@
-![logo](https://emsesp.github.io/docs/_media/logo/EMS-ESP_logo_dark.png)
+# EMS-ESP version 2.0 (beta)
 
-[![version](https://img.shields.io/github/release/proddy/EMS-ESP.svg?label=Latest%20Release)](https://github.com/proddy/EMS-ESP/blob/master/CHANGELOG.md)
+## **New Features in v2**
-[![release-date](https://img.shields.io/github/release-date/proddy/EMS-ESP.svg?label=Released)](https://github.com/proddy/EMS-ESP/commits/master)
-<br />
-[![license](https://img.shields.io/github/license/proddy/EMS-ESP.svg)](LICENSE)
-[![travis](https://travis-ci.com/proddy/EMS-ESP.svg?branch=dev)](https://travis-ci.com/proddy/EMS-ESP)
-[![Codacy Badge](https://api.codacy.com/project/badge/Grade/b8880625bdf841d4adb2829732030887)](https://app.codacy.com/app/proddy/EMS-ESP?utm_source=github.com&utm_medium=referral&utm_content=proddy/EMS-ESP&utm_campaign=Badge_Grade_Settings)
-[![downloads](https://img.shields.io/github/downloads/proddy/EMS-ESP/total.svg)](https://github.com/proddy/EMS-ESP/releases)
-<br />
-[![gitter](https://img.shields.io/gitter/room/EMS-ESP/EMS-ESP.svg)](https://gitter.im/EMS-ESP/community)
-<br>
 
-EMS-ESP is a open-source system built for the Espressif ESP8266 microcontroller to communicate with **EMS** (Energy Management System) based boilers, thermostats and other modules from manufacturers like Bosch, Buderus, Nefit, Junkers and Sieger.
+- A new web interface using React and TypeScript that's now secure as each URL endpoint is protected by issuing a JWT which is then sent using Bearer Authentication. Using a Captive Portal in AP mode or connecting to a local wifi network.
 
-## Features
+![settings](/media/web_settings.PNG)
+![status](/media/web_status.PNG)
 
-* Supporting more than [50 EMS devices](https://emsesp.github.io/docs/#/Supported-EMS-Devices) (EMS 1, EMS 2.0/Plus and Heatronics 3).
+- A new console. Like in version 1.9 it works with both Serial and Telnet but with a rich set of commands and more intuitive with behavior similar to a Linux-style shell. It supports multiple connections and commands that alter the settings or interact directly with EMS devices are secure behind an admin password. A full list of commands is below, here are the key ones:
-* A web interface for easy configuration and real-time monitoring of the EMS bus.
+    * `help` lists the commands and keywords
-* Telnet for advanced configuration and verbose traffic logging.
+    * some commands take you into a new context, a bit like a sub-menu. e.g. `system`, `thermostat`. Use `help` to show which commands this context has and `exit` or CTRL-D to get back to the root.
-* Configurable MQTT, with templates for Home Assistant and Domoticz.
+    * To change a setting use the `set` command. Typing `set` shows the current settings.
-* Includes an simple schematic for a test breadboard interface board.
+    * `show` shows the data specific to the which context you're in.
-* Native compatibility with bbqkees' [EMS Gateway](https://bbqkees-electronics.nl/) interface board.
+    * `su` to switch to Admin which enables more commands such as most of the `set` commands. The default password is "ems-esp-neo" which can be changed with `passwd` from the system menu. When in Admin mode the command prompt switches from `$` to `#`.
+    * `log` sets the logging level. `log off` disables logging. Use `log debug` for debugging commands and actions.
+    * `watch` will output the incoming Rx telegrams to the console. You can also show these in its 'raw' data format and also watch a particular ID.
+    * CTRL-D to exit, CTRL-U to remove line, TAB to auto-complete 
   
-Please reference the [Wiki](https://emsesp.github.io/docs) for further details and instructions on how to build and configure the firmware.
+- There is no "serial mode" anymore like with version 1.9. When the Wifi cannot connect to the SSID it will automatically enter a "safe" mode where the Serial console is activated automatically (baud 115200). Note Serial is always available on the ESP32 because it has multiple UARTs.
 
----
+- The onboard LED behaves like in 1.9. A solid LED means good connection and EMS data is coming in. A slow pulse means either the WiFi or the EMS bus is not connected yet. A very fast pulse is when the system is booting up and configuring itself, which typically takes 5 seconds.
 
-## Say Thanks
+- Built to work with both EMS8266 and ESP32
-If you like EMS-ESP buy me a :coffee: via [PayPal](https://www.paypal.me/prderbyshire/2).
 
----
+- Extended MQTT to use MQTT discovery on Home Assistant.
 
-| ![web menu](https://emsesp.github.io/docs/_media/web/system_status.PNG) | ![web menu](https://emsesp.github.io/docs/_media/web/ems_dashboard.PNG) |
+- For debugging there is an offline mode where the code can be compiled and executed standalone without uploading to an ESP controller. Use `make` (based off GNUMakefile).
-| - | - |
-![ha](https://emsesp.github.io/docs/_media/home%20assistant/ha.png)
 
-| ![telnet menu](https://emsesp.github.io/docs/_media/telnet/telnet_menu.jpg) | ![telnet menu](https://emsesp.github.io/docs/_media/telnet/telnet_stats.PNG) |
+## **Uploading the firmware**
-| - | - |
+
+- If you're not using PlatformIO, use the command-line and Python. You can download Python from https://www.python.org/downloads/. Make sure you also get:
+  - `esptool`, install using the command `pip install esptool`
+  - and for OTA updates later, `espota` from https://github.com/esp8266/Arduino/blob/master/tools/espota.py
+
+- Grab the latest firmware binary from https://github.com/proddy/EMS-ESP/releases/tag/travis-v2-build
+- Uploading directly via USB.
+  
+  For ESP8266: `esptool.py -p <COM PORT> -b 921600 write_flash 0x00000 <firmware.bin>`
+  
+  For ESP32: `esptool.py --chip esp32 --port "COM6" --baud 921600 --before default_reset --after hard_reset write_flash -z --flash_mode dio --flash_freq 40m --flash_size detect 0x1000 XX\.platformio\packages\framework-arduinoespressif32\tools\sdk\bin\bootloader_dio_40m.bin 0x8000 XX\.pio\build\esp32\partitions.bin 0xe000 XX\.platformio\packages\framework-arduinoespressif32\tools\partitions\boot_app0.bin 0x10000  <firmware.bin>`
+- Uploading over WiFi: `espota.py --debug --progress --port 8266 --auth ems-esp-neo -i <IP address> -f <firmware.bin>`
+
+## **Setting EMS-ESP up for the first time**
+
+ - Connect to the Access Point called ems-esp. Login to the captive portal with admin/admin and set the WiFi credentials and restart the ESP.
+ - When it connects to your network you can use the Web UI to configure the other settings or login using Telnet. See the console commands below for options. The password for `su` is the sames as the JWT secret which you can see from the WebUI.
+
+## **List of console commands**
+
+```
+common commands available in all contexts:
+  exit
+  help
+  log [level]
+  watch <on | off | raw> [ID]
+  su
+
+(from the root)
+	set
+	refresh
+	system (enters a context)
+	boiler (enters a context)
+	thermostat (enters a context)
+	scan devices [deep]
+	send telegram <"XX XX ...">
+	set bus_id <device ID>
+	set tx_mode <n>
+	show
+	show devices
+	show ems
+	show values
+
+system
+	set
+	show
+	show mqtt
+	passwd
+	restart
+	set wifi hostname <name>
+	set wifi password
+	set wifi ssid <name>
+
+boiler
+	comfort <hot |eco | intelligent>
+	flowtemp <degrees>
+	wwactive <on | off>
+	wwcirculation <on | off>
+	wwonetime <on | off>
+	wwtemp <degrees>
+	read <type ID>
+
+thermostat
+	set
+	set master [device ID]
+	mode <mode> [heating circuit]
+	temp <degrees> [heating circuit]
+	read <type ID>
+```
+  
+----------
+
+### **Basic Design Principles**
+
+- The core services like telnet, logging and shell are based off the libraries from @nomis. I also adopted his general design pattens such as making everything as asynchronous as possible so that no one operation should starve another operation of it's time to execute (https://isocpp.org/wiki/faq/ctors#static-init-order).
+- All EMS devices (e.g. boiler, thermostat, solar modules, mixing units etc) are derived from a factory base class and each class handles its own registering of telegram and mqtt handlers. This makes the EMS device code easier to manage and we can extend with new telegrams types and features.
+
+### **Things to tidy up in code later**
+
+- Replace vectors of class objects with shared pointers and use emplace_back since it instantiates during construction. It may have a performance gain.
+- Add real unit tests using platformio's test bed (https://docs.platformio.org/en/latest/plus/pio-remote.html)
+- See if it's easier to use timers instead of millis() based timers, using https://github.com/esp8266/Arduino/blob/master/libraries/esp8266/examples/BlinkPolledTimeout/BlinkPolledTimeout.ino
 
-| ![on boiler](https://emsesp.github.io/docs/_media/ems%20gateway/on-boiler.jpg) | ![kit](https://emsesp.github.io/docs/_media/ems%20gateway/ems-kit-2.jpg) | ![basic circuit](https://emsesp.github.io/docs/_media/ems%20gateway/ems-board-white.jpg) |
-| - | - | - |

TODO.md

@@ -0,0 +1,11 @@
+- It's slow on ESP8266 - probably due to heap
+- AP not showing correct wifi SSID
+- remove Serial.*s
+- add Boiler web page using web sockets
+- check Chrome Tab errors
+- check if we need to disabled UART during OTA
+- fix Makefile for standalone
+
+handy git commands
+- git pull --tags -f
+- git pull upstream master

factory_settings.ini

@@ -0,0 +1,44 @@
+[factory_settings]
+build_flags = 
+    ; WiFi settings
+    -D FACTORY_WIFI_SSID=\"\"
+    -D FACTORY_WIFI_PASSWORD=\"\"
+    -D FACTORY_WIFI_HOSTNAME=\"ems-esp\"
+
+    ; Access point settings
+    -D FACTORY_AP_SSID=\"ems-esp\"
+    -D FACTORY_AP_PASSWORD=\"ems-esp-neo\"
+    -D FACTORY_AP_PROVISION_MODE=AP_MODE_DISCONNECTED
+
+    ; User credentials for admin and guest user
+    -D FACTORY_ADMIN_USERNAME=\"admin\"
+    -D FACTORY_ADMIN_PASSWORD=\"admin\"
+    -D FACTORY_GUEST_USERNAME=\"guest\"
+    -D FACTORY_GUEST_PASSWORD=\"guest\"
+
+    ; NTP settings
+    -D FACTORY_NTP_ENABLED=true
+    -D FACTORY_NTP_TIME_ZONE_LABEL=\"Europe/Amsterdam\"
+    -D FACTORY_NTP_TIME_ZONE_FORMAT=\"CET-1CEST,M3.5.0,M10.5.0/3\"
+    -D FACTORY_NTP_SERVER=\"time.google.com\"
+
+    ; OTA settings
+    -D FACTORY_OTA_PORT=8266
+    -D FACTORY_OTA_PASSWORD=\"ems-esp-neo\"
+    -D FACTORY_OTA_ENABLED=true
+
+    ; MQTT settings
+    -D FACTORY_MQTT_ENABLED=false
+    -D FACTORY_MQTT_HOST=\"test.mosquitto.org\"
+    -D FACTORY_MQTT_PORT=1883
+    -D FACTORY_MQTT_USERNAME=\"\"
+    -D FACTORY_MQTT_PASSWORD=\"\"
+    ; if unspecified the devices hardware ID will be used
+    -D FACTORY_MQTT_CLIENT_ID=\"ems-esp\"
+    -D FACTORY_MQTT_KEEP_ALIVE=16
+    -D FACTORY_MQTT_CLEAN_SESSION=true
+    -D FACTORY_MQTT_MAX_TOPIC_LENGTH=128
+
+    ; JWT Secret
+    ; if unspecified the devices hardware ID will be used
+    -D FACTORY_JWT_SECRET=\"ems-esp-neo\"

features.ini

@@ -0,0 +1,8 @@
+[features]
+build_flags = 
+    -D FT_PROJECT=1
+    -D FT_SECURITY=1
+    -D FT_MQTT=1
+    -D FT_NTP=0
+    -D FT_OTA=1
+    -D FT_UPLOAD_FIRMWARE=1

interface/.env

@@ -0,0 +1,5 @@
+# This is the name of your project. It appears on the sign-in page and in the menu bar.
+REACT_APP_PROJECT_NAME=EMS-ESP
+
+# This is the url path your project will be exposed under.
+REACT_APP_PROJECT_PATH=ems-esp

interface/.env.development

@@ -0,0 +1,4 @@
+# Change the IP address to that of your ESP device to enable local development of the UI.
+# Remember to also enable CORS in platformio.ini before uploading the code to the device.
+REACT_APP_HTTP_ROOT=http://10.10.10.81
+REACT_APP_WEB_SOCKET_ROOT=ws://10.10.10.81

interface/.env.production

@@ -0,0 +1 @@
+GENERATE_SOURCEMAP=false

interface/config-overrides.js

@@ -0,0 +1,37 @@
+const ManifestPlugin = require('webpack-manifest-plugin');
+const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CompressionPlugin = require('compression-webpack-plugin');
+const ProgmemGenerator = require('./progmem-generator.js');
+
+const path = require('path');
+const fs = require('fs');
+
+module.exports = function override(config, env) {
+  if (env === "production") {
+    // rename the ouput file, we need it's path to be short, for SPIFFS
+    config.output.filename = 'js/[id].[chunkhash:4].js';
+    config.output.chunkFilename = 'js/[id].[chunkhash:4].js';
+
+    // take out the manifest and service worker plugins
+    config.plugins = config.plugins.filter(plugin => !(plugin instanceof ManifestPlugin));
+    config.plugins = config.plugins.filter(plugin => !(plugin instanceof WorkboxWebpackPlugin.GenerateSW));
+
+    // 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";
+
+    // build progmem data files
+    config.plugins.push(new ProgmemGenerator({ outputPath: "../lib/framework/WWWData.h", bytesPerLine: 20 }));
+
+    // add compression plugin, compress javascript
+    config.plugins.push(new CompressionPlugin({
+      filename: "[path].gz[query]",
+      algorithm: "gzip",
+      test: /\.(js)$/,
+      deleteOriginalAssets: true
+    }));
+  }
+  return config;
+}

interface/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "esp8266-react",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@material-ui/core": "^4.9.8",
+    "@material-ui/icons": "^4.9.1",
+    "@types/jwt-decode": "^2.2.1",
+    "@types/lodash": "^4.14.149",
+    "@types/node": "^12.12.32",
+    "@types/react": "^16.9.27",
+    "@types/react-dom": "^16.9.5",
+    "@types/react-material-ui-form-validator": "^2.0.5",
+    "@types/react-router": "^5.1.3",
+    "@types/react-router-dom": "^5.1.3",
+    "compression-webpack-plugin": "^4.0.0",
+    "jwt-decode": "^2.2.0",
+    "lodash": "^4.17.15",
+    "mime-types": "^2.1.25",
+    "moment": "^2.26.0",
+    "notistack": "^0.9.16",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-dropzone": "^11.0.1",
+    "react-form-validator-core": "^0.6.4",
+    "react-material-ui-form-validator": "^2.0.10",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.4.1",
+    "sockette": "^2.0.6",
+    "typescript": "^3.9.5",
+    "zlib": "^1.0.5"
+  },
+  "scripts": {
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "react-app-rewired": "^2.1.6"
+  }
+}

interface/progmem-generator.js

@@ -0,0 +1,122 @@
+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 = () => {
+            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;

interface/public/app/manifest.json

@@ -0,0 +1,12 @@
+{
+  "name":"EMS-ESP",
+  "icons":[
+    {
+      "src":"/app/icon.png",
+      "sizes":"48x48 72x72 96x96 128x128 256x256"
+    }
+  ],
+  "start_url":"/",
+  "display":"fullscreen",
+  "orientation":"any"
+}

interface/public/css/roboto.css

@@ -0,0 +1,22 @@
+/* Just supporting latin due to size constrains on the esp chip */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(../fonts/li.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+2212, U+2215;
+}
+@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+2212, U+2215;
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/me.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+2212, U+2215;
+}

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, shrink-to-fit=no">
+    <link rel="stylesheet" href="%PUBLIC_URL%/css/roboto.css">
+    <link rel="manifest" href="%PUBLIC_URL%/app/manifest.json">
+    <title>EMS-ESP</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+  </body>
+</html>

interface/src/App.tsx

@@ -0,0 +1,50 @@
+import React, { Component, RefObject } from 'react';
+import { Redirect, Route, Switch } from 'react-router';
+import { SnackbarProvider } from 'notistack';
+
+import { IconButton } from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+
+import AppRouting from './AppRouting';
+import CustomMuiTheme from './CustomMuiTheme';
+import { PROJECT_NAME } from './api';
+import FeaturesWrapper from './features/FeaturesWrapper';
+
+// this redirect forces a call to authenticationContext.refresh() which invalidates the JWT if it is invalid.
+const unauthorizedRedirect = () => <Redirect to="/" />;
+
+class App extends Component {
+
+  notistackRef: RefObject<any> = React.createRef();
+
+  componentDidMount() {
+    document.title = PROJECT_NAME;
+  }
+
+  onClickDismiss = (key: string | number | undefined) => () => {
+    this.notistackRef.current.closeSnackbar(key);
+  }
+
+  render() {
+    return (
+      <CustomMuiTheme>
+        <SnackbarProvider maxSnack={3} anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+          ref={this.notistackRef}
+          action={(key) => (
+            <IconButton onClick={this.onClickDismiss(key)} size="small">
+              <CloseIcon />
+            </IconButton>
+          )}>
+          <FeaturesWrapper>
+            <Switch>
+              <Route exact path="/unauthorized" component={unauthorizedRedirect} />
+              <Route component={AppRouting} />
+            </Switch>
+          </FeaturesWrapper>
+        </SnackbarProvider>
+      </CustomMuiTheme>
+    );
+  }
+}
+
+export default App

interface/src/AppRouting.tsx

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import { Switch, Redirect } from 'react-router';
+
+import * as Authentication from './authentication/Authentication';
+import AuthenticationWrapper from './authentication/AuthenticationWrapper';
+import UnauthenticatedRoute from './authentication/UnauthenticatedRoute';
+import AuthenticatedRoute from './authentication/AuthenticatedRoute';
+
+import SignIn from './SignIn';
+import ProjectRouting from './project/ProjectRouting';
+import WiFiConnection from './wifi/WiFiConnection';
+import AccessPoint from './ap/AccessPoint';
+import NetworkTime from './ntp/NetworkTime';
+import Security from './security/Security';
+import System from './system/System';
+
+import { PROJECT_PATH } from './api';
+import Mqtt from './mqtt/Mqtt';
+import { withFeatures, WithFeaturesProps } from './features/FeaturesContext';
+import { Features } from './features/types';
+
+export const getDefaultRoute = (features: Features) => features.project ? `/${PROJECT_PATH}/` : "/wifi/";
+
+class AppRouting extends Component<WithFeaturesProps> {
+
+  componentDidMount() {
+    Authentication.clearLoginRedirect();
+  }
+
+  render() {
+    const { features } = this.props;
+    return (
+      <AuthenticationWrapper>
+        <Switch>
+          {features.security && (
+            <UnauthenticatedRoute exact path="/" component={SignIn} />
+          )}
+          {features.project && (
+            <AuthenticatedRoute exact path={`/${PROJECT_PATH}/*`} component={ProjectRouting} />
+          )}
+          <AuthenticatedRoute exact path="/wifi/*" component={WiFiConnection} />
+          <AuthenticatedRoute exact path="/ap/*" component={AccessPoint} />
+          {features.ntp && (
+          <AuthenticatedRoute exact path="/ntp/*" component={NetworkTime} />
+          )}
+          {features.mqtt && (
+            <AuthenticatedRoute exact path="/mqtt/*" component={Mqtt} />
+          )}
+          {features.security && (
+            <AuthenticatedRoute exact path="/security/*" component={Security} />
+          )}
+          <AuthenticatedRoute exact path="/system/*" component={System} />
+          <Redirect to={getDefaultRoute(features)} />
+        </Switch>
+      </AuthenticationWrapper>
+    )
+  }
+}
+
+export default withFeatures(AppRouting);

interface/src/CustomMuiTheme.tsx

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+
+import { CssBaseline } from '@material-ui/core';
+import { MuiThemeProvider, createMuiTheme, StylesProvider } from '@material-ui/core/styles';
+import { blueGrey, orange, red, green } from '@material-ui/core/colors';
+
+const theme = createMuiTheme({
+  palette: {
+    type: "dark",
+    primary: {
+      main: '#33bfff',
+    },
+    secondary: {
+      main: '#3d5afe',
+    },
+    info: {
+      main: blueGrey[900]
+    },
+    warning: {
+      main: orange[500]
+    },
+    error: {
+      main: red[500]
+    },
+    success: {
+      main: green[500]
+    }
+  },
+});
+
+export default class CustomMuiTheme extends Component {
+
+  render() {
+    return (
+      <StylesProvider>
+        <MuiThemeProvider theme={theme}>
+          <CssBaseline />
+          {this.props.children}
+        </MuiThemeProvider>
+      </StylesProvider>
+    );
+  }
+
+}

interface/src/SignIn.tsx

@@ -0,0 +1,147 @@
+import React, { Component } from 'react';
+import { withSnackbar, WithSnackbarProps } from 'notistack';
+import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
+
+import { withStyles, createStyles, Theme, WithStyles } from '@material-ui/core/styles';
+import { Paper, Typography, Fab } from '@material-ui/core';
+import ForwardIcon from '@material-ui/icons/Forward';
+
+import { withAuthenticationContext, AuthenticationContextProps } from './authentication/AuthenticationContext';
+import {PasswordValidator} from './components';
+import { PROJECT_NAME, SIGN_IN_ENDPOINT } from './api';
+
+const styles = (theme: Theme) => createStyles({
+  loginPage: {
+    display: "flex",
+    height: "100vh",
+    margin: "auto",
+    padding: theme.spacing(2),
+    justifyContent: "center",
+    flexDirection: "column",
+    maxWidth: theme.breakpoints.values.sm
+  },
+  loginPanel: {
+    textAlign: "center",
+    padding: theme.spacing(2),
+    paddingTop: "200px",
+    backgroundImage: 'url("/app/icon.png")',
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "50% " + theme.spacing(2) + "px",
+    backgroundSize: "auto 150px",
+    width: "100%"
+  },
+  extendedIcon: {
+    marginRight: theme.spacing(0.5),
+  },
+  button: {
+    marginRight: theme.spacing(2),
+    marginTop: theme.spacing(2),
+  }
+});
+
+type SignInProps = WithSnackbarProps & WithStyles<typeof styles> & AuthenticationContextProps;
+
+interface SignInState {
+  username: string,
+  password: string,
+  processing: boolean
+}
+
+class SignIn extends Component<SignInProps, SignInState> {
+
+  constructor(props: SignInProps) {
+    super(props);
+    this.state = {
+      username: '',
+      password: '',
+      processing: false
+    };
+  }
+
+  updateInputElement = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    const { name, value } = event.currentTarget;
+    this.setState(prevState => ({
+      ...prevState,
+      [name]: value,
+    }))
+  };
+
+  onSubmit = () => {
+    const { username, password } = this.state;
+    const { authenticationContext } = this.props;
+    this.setState({ processing: true });
+    fetch(SIGN_IN_ENDPOINT, {
+      method: 'POST',
+      body: JSON.stringify({ username, password }),
+      headers: new Headers({
+        'Content-Type': 'application/json'
+      })
+    })
+      .then(response => {
+        if (response.status === 200) {
+          return response.json();
+        } else if (response.status === 401) {
+          throw Error("Invalid login details.");
+        } else {
+          throw Error("Invalid status code: " + response.status);
+        }
+      }).then(json => {
+        authenticationContext.signIn(json.access_token);
+      })
+      .catch(error => {
+        this.props.enqueueSnackbar(error.message, {
+          variant: 'warning',
+        });
+        this.setState({ processing: false });
+      });
+  };
+
+  render() {
+    const { username, password, processing } = this.state;
+    const { classes } = this.props;
+    return (
+      <div className={classes.loginPage}>
+        <Paper className={classes.loginPanel}>
+          <Typography variant="h4">{PROJECT_NAME}</Typography>
+          <ValidatorForm onSubmit={this.onSubmit}>
+            <TextValidator
+              disabled={processing}
+              validators={['required']}
+              errorMessages={['Username is required']}
+              name="username"
+              label="Username"
+              fullWidth
+              variant="outlined"
+              value={username}
+              onChange={this.updateInputElement}
+              margin="normal"
+              inputProps={{
+                autoCapitalize: "none",
+                autoCorrect: "off",
+              }}
+            />
+            <PasswordValidator
+              disabled={processing}
+              validators={['required']}
+              errorMessages={['Password is required']}
+              name="password"
+              label="Password"
+              fullWidth
+              variant="outlined"
+              value={password}
+              onChange={this.updateInputElement}
+              margin="normal"
+            />
+            <Fab variant="extended" color="primary" className={classes.button} type="submit" disabled={processing}>
+              <ForwardIcon className={classes.extendedIcon} />
+              Sign In
+            </Fab>
+          </ValidatorForm>
+        </Paper>
+      </div>
+    );
+  }
+
+}
+
+export default withAuthenticationContext(withSnackbar(withStyles(styles)(SignIn)));

interface/src/ap/APModes.ts

@@ -0,0 +1,5 @@
+import { APSettings, APProvisionMode } from "./types";
+
+export const isAPEnabled = ({ provision_mode }: APSettings) => {
+    return provision_mode === APProvisionMode.AP_MODE_ALWAYS || provision_mode === APProvisionMode.AP_MODE_DISCONNECTED;
+}

interface/src/ap/APSettingsController.tsx

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+
+import { AP_SETTINGS_ENDPOINT } from '../api';
+import {restController, RestControllerProps, RestFormLoader, SectionContent } from '../components';
+
+import APSettingsForm from './APSettingsForm';
+import { APSettings } from './types';
+
+type APSettingsControllerProps = RestControllerProps<APSettings>;
+
+class APSettingsController extends Component<APSettingsControllerProps> {
+
+  componentDidMount() {
+    this.props.loadData();
+  }
+
+  render() {
+    return (
+      <SectionContent title="Access Point Settings" titleGutter>
+        <RestFormLoader
+          {...this.props}
+          render={formProps => <APSettingsForm {...formProps} />}
+        />
+      </SectionContent>
+    )
+  }
+
+}
+
+export default restController(AP_SETTINGS_ENDPOINT, APSettingsController);

interface/src/ap/APSettingsForm.tsx

@@ -0,0 +1,71 @@
+import React, { Fragment } from 'react';
+import { TextValidator, ValidatorForm, SelectValidator } from 'react-material-ui-form-validator';
+
+import MenuItem from '@material-ui/core/MenuItem';
+import SaveIcon from '@material-ui/icons/Save';
+
+import {PasswordValidator, RestFormProps, FormActions, FormButton} from '../components';
+
+import { isAPEnabled } from './APModes';
+import { APSettings, APProvisionMode } from './types';
+
+type APSettingsFormProps = RestFormProps<APSettings>;
+
+class APSettingsForm extends React.Component<APSettingsFormProps> {
+
+  render() {
+    const { data, handleValueChange, saveData, loadData } = this.props;
+    return (
+      <ValidatorForm onSubmit={saveData} ref="APSettingsForm">
+        <SelectValidator name="provision_mode"
+          label="Provide Access Point&hellip;"
+          value={data.provision_mode}
+          fullWidth
+          variant="outlined"
+          onChange={handleValueChange('provision_mode')}
+          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>
+        </SelectValidator>
+        {
+          isAPEnabled(data) &&
+          <Fragment>
+            <TextValidator
+              validators={['required', 'matchRegexp:^.{1,32}$']}
+              errorMessages={['Access Point SSID is required', 'Access Point SSID must be 32 characters or less']}
+              name="ssid"
+              label="Access Point SSID"
+              fullWidth
+              variant="outlined"
+              value={data.ssid}
+              onChange={handleValueChange('ssid')}
+              margin="normal"
+            />
+            <PasswordValidator
+              validators={['required', 'matchRegexp:^.{1,64}$']}
+              errorMessages={['Access Point Password is required', 'Access Point Password must be 64 characters or less']}
+              name="password"
+              label="Access Point Password"
+              fullWidth
+              variant="outlined"
+              value={data.password}
+              onChange={handleValueChange('password')}
+              margin="normal"
+            />
+          </Fragment>
+        }
+        <FormActions>
+          <FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit">
+            Save
+          </FormButton>
+          <FormButton variant="contained" color="secondary" onClick={loadData}>
+            Reset
+          </FormButton>
+        </FormActions>
+      </ValidatorForm>
+    );
+  }
+}
+
+export default APSettingsForm;

interface/src/ap/APStatus.ts

@@ -0,0 +1,28 @@
+import { Theme } from "@material-ui/core";
+import { APStatus, APNetworkStatus } from "./types";
+
+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";
+  }
+};

interface/src/ap/APStatusController.tsx

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+
+import {restController, RestControllerProps, RestFormLoader, SectionContent } from '../components';
+import { AP_STATUS_ENDPOINT } from '../api';
+
+import APStatusForm from './APStatusForm';
+import { APStatus } from './types';
+
+type APStatusControllerProps = RestControllerProps<APStatus>;
+
+class APStatusController extends Component<APStatusControllerProps> {
+
+  componentDidMount() {
+    this.props.loadData();
+  }
+
+  render() {
+    return (
+      <SectionContent title="Access Point Status">
+        <RestFormLoader
+          {...this.props}
+          render={formProps => <APStatusForm {...formProps} />}
+        />
+      </SectionContent>
+    )
+  }
+}
+
+export default restController(AP_STATUS_ENDPOINT, APStatusController);

interface/src/ap/APStatusForm.tsx

@@ -0,0 +1,78 @@
+import React, { Component, Fragment } from 'react';
+
+import { WithTheme, withTheme } from '@material-ui/core/styles';
+import { Avatar, Divider, List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core';
+
+import SettingsInputAntennaIcon from '@material-ui/icons/SettingsInputAntenna';
+import DeviceHubIcon from '@material-ui/icons/DeviceHub';
+import ComputerIcon from '@material-ui/icons/Computer';
+import RefreshIcon from '@material-ui/icons/Refresh';
+
+import { RestFormProps, FormActions, FormButton, HighlightAvatar } from '../components';
+import { apStatusHighlight, apStatus } from './APStatus';
+import { APStatus } from './types';
+
+type APStatusFormProps = RestFormProps<APStatus> & WithTheme;
+
+class APStatusForm extends Component<APStatusFormProps> {
+
+  createListItems() {
+    const { data, theme } = this.props
+    return (
+      <Fragment>
+        <ListItem>
+          <ListItemAvatar>
+            <HighlightAvatar color={apStatusHighlight(data, theme)}>
+              <SettingsInputAntennaIcon />
+            </HighlightAvatar>
+          </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" />
+      </Fragment>
+    );
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <List>
+          {this.createListItems()}
+        </List>
+        <FormActions>
+          <FormButton startIcon={<RefreshIcon />} variant="contained" color="secondary" onClick={this.props.loadData}>
+            Refresh
+          </FormButton>
+        </FormActions>
+      </Fragment>
+    );
+  }
+
+}
+
+export default withTheme(APStatusForm);

interface/src/ap/AccessPoint.tsx

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import { Redirect, Switch, RouteComponentProps } from 'react-router-dom'
+
+import { Tabs, Tab } from '@material-ui/core';
+
+import { AuthenticatedContextProps, withAuthenticatedContext, AuthenticatedRoute } from '../authentication';
+import { MenuAppBar } from '../components';
+
+import APSettingsController from './APSettingsController';
+import APStatusController from './APStatusController';
+
+type AccessPointProps = AuthenticatedContextProps & RouteComponentProps;
+
+class AccessPoint extends Component<AccessPointProps> {
+
+  handleTabChange = (event: React.ChangeEvent<{}>, path: string) => {
+    this.props.history.push(path);
+  };
+
+  render() {
+    const { authenticatedContext } = this.props;
+    return (
+      <MenuAppBar sectionTitle="Access Point">
+        <Tabs value={this.props.match.url} onChange={this.handleTabChange} variant="fullWidth">
+          <Tab value="/ap/status" label="Access Point Status" />
+          <Tab value="/ap/settings" label="Access Point Settings" disabled={!authenticatedContext.me.admin} />
+        </Tabs>
+        <Switch>
+          <AuthenticatedRoute exact path="/ap/status" component={APStatusController} />
+          <AuthenticatedRoute exact path="/ap/settings" component={APSettingsController} />
+          <Redirect to="/ap/status" />
+        </Switch>
+      </MenuAppBar>
+    )
+  }
+}
+
+export default withAuthenticatedContext(AccessPoint);

interface/src/ap/types.ts

@@ -0,0 +1,24 @@
+export enum APProvisionMode {
+  AP_MODE_ALWAYS = 0,
+  AP_MODE_DISCONNECTED = 1,
+  AP_NEVER = 2
+}
+
+export enum APNetworkStatus {
+  ACTIVE = 0,
+  INACTIVE = 1,
+  LINGERING = 2
+}
+
+export interface APStatus {
+  status: APNetworkStatus;
+  ip_address: string;
+  mac_address: string;
+  station_num: number;
+}
+
+export interface APSettings {
+  provision_mode: APProvisionMode;
+  ssid: string;
+  password: string;
+}

interface/src/api/Endpoints.ts

@@ -0,0 +1,22 @@
+import { ENDPOINT_ROOT } from './Env';
+
+export const FEATURES_ENDPOINT = ENDPOINT_ROOT + "features";
+export const NTP_STATUS_ENDPOINT = ENDPOINT_ROOT + "ntpStatus";
+export const NTP_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "ntpSettings";
+export const TIME_ENDPOINT = ENDPOINT_ROOT + "time";
+export const AP_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "apSettings";
+export const AP_STATUS_ENDPOINT = ENDPOINT_ROOT + "apStatus";
+export const SCAN_NETWORKS_ENDPOINT = ENDPOINT_ROOT + "scanNetworks";
+export const LIST_NETWORKS_ENDPOINT = ENDPOINT_ROOT + "listNetworks";
+export const WIFI_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "wifiSettings";
+export const WIFI_STATUS_ENDPOINT = ENDPOINT_ROOT + "wifiStatus";
+export const OTA_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "otaSettings";
+export const UPLOAD_FIRMWARE_ENDPOINT = ENDPOINT_ROOT + "uploadFirmware";
+export const MQTT_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "mqttSettings";
+export const MQTT_STATUS_ENDPOINT = ENDPOINT_ROOT + "mqttStatus";
+export const SYSTEM_STATUS_ENDPOINT = ENDPOINT_ROOT + "systemStatus";
+export const SIGN_IN_ENDPOINT = ENDPOINT_ROOT + "signIn";
+export const VERIFY_AUTHORIZATION_ENDPOINT = ENDPOINT_ROOT + "verifyAuthorization";
+export const SECURITY_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "securitySettings";
+export const RESTART_ENDPOINT = ENDPOINT_ROOT + "restart";
+export const FACTORY_RESET_ENDPOINT = ENDPOINT_ROOT + "factoryReset";

interface/src/api/Env.ts

@@ -0,0 +1,24 @@
+export const PROJECT_NAME = process.env.REACT_APP_PROJECT_NAME!;
+export const PROJECT_PATH = process.env.REACT_APP_PROJECT_PATH!;
+
+export const ENDPOINT_ROOT = calculateEndpointRoot("/rest/");
+export const WEB_SOCKET_ROOT = calculateWebSocketRoot("/ws/");
+
+function calculateEndpointRoot(endpointPath: string) {
+    const httpRoot = process.env.REACT_APP_HTTP_ROOT;
+    if (httpRoot) {
+        return httpRoot + endpointPath;
+    }
+    const location = window.location;
+    return location.protocol + "//" + location.host + endpointPath;
+}
+
+function calculateWebSocketRoot(webSocketPath: string) {
+    const webSocketRoot = process.env.REACT_APP_WEB_SOCKET_ROOT;
+    if (webSocketRoot) {
+        return webSocketRoot + webSocketPath;
+    }
+    const location = window.location;
+    const webProtocol = location.protocol === "https:" ? "wss:" : "ws:";
+    return webProtocol + "//" + location.host + webSocketPath;
+}

interface/src/api/index.ts

@@ -0,0 +1,2 @@
+export * from './Env'
+export * from './Endpoints'

interface/src/authentication/AuthenticatedRoute.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Redirect, Route, RouteProps, RouteComponentProps } from "react-router-dom";
+import { withSnackbar, WithSnackbarProps } from 'notistack';
+
+import * as Authentication from './Authentication';
+import { withAuthenticationContext, AuthenticationContextProps, AuthenticatedContext } from './AuthenticationContext';
+
+type ChildComponent = React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
+
+interface AuthenticatedRouteProps extends RouteProps, WithSnackbarProps, AuthenticationContextProps {
+  component: ChildComponent;
+}
+
+type RenderComponent = (props: RouteComponentProps<any>) => React.ReactNode;
+
+export class AuthenticatedRoute extends React.Component<AuthenticatedRouteProps> {
+
+  render() {
+    const { enqueueSnackbar, authenticationContext, component: Component, ...rest } = this.props;
+    const { location } = this.props;
+    const renderComponent: RenderComponent = (props) => {
+      if (authenticationContext.me) {
+        return (
+          <AuthenticatedContext.Provider value={authenticationContext as AuthenticatedContext}>
+            <Component {...props} />
+          </AuthenticatedContext.Provider>
+        );
+      }
+      Authentication.storeLoginRedirect(location);
+      enqueueSnackbar("Please log in to continue.", { variant: 'info' });
+      return (
+        <Redirect to='/' />
+      );
+    }
+    return (
+      <Route {...rest} render={renderComponent} />
+    );
+  }
+
+}
+
+export default withSnackbar(withAuthenticationContext(AuthenticatedRoute));

interface/src/authentication/Authentication.ts

@@ -0,0 +1,114 @@
+import * as H from 'history';
+
+import history from '../history';
+import { Features } from '../features/types';
+import { getDefaultRoute } from '../AppRouting';
+
+export const ACCESS_TOKEN = 'access_token';
+export const LOGIN_PATHNAME = 'loginPathname';
+export const LOGIN_SEARCH = 'loginSearch';
+
+/**
+ * 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(LOGIN_PATHNAME, location.pathname);
+    getStorage().setItem(LOGIN_SEARCH, location.search);
+  }
+}
+
+export function clearLoginRedirect() {
+  getStorage().removeItem(LOGIN_PATHNAME);
+  getStorage().removeItem(LOGIN_SEARCH);
+}
+
+export function fetchLoginRedirect(features: Features): H.LocationDescriptorObject {
+  const loginPathname = getStorage().getItem(LOGIN_PATHNAME);
+  const loginSearch = getStorage().getItem(LOGIN_SEARCH);
+  clearLoginRedirect();
+  return {
+    pathname: loginPathname || getDefaultRoute(features),
+    search: (loginPathname && loginSearch) || undefined
+  };
+}
+
+/**
+ * Wraps the normal fetch routene with one with provides the access token if present.
+ */
+export function authorizedFetch(url: RequestInfo, params?: RequestInit): Promise<Response> {
+  const accessToken = getStorage().getItem(ACCESS_TOKEN);
+  if (accessToken) {
+    params = params || {};
+    params.credentials = 'include';
+    params.headers = {
+      ...params.headers,
+      "Authorization": 'Bearer ' + accessToken
+    };
+  }
+  return fetch(url, params);
+}
+
+/**
+ * fetch() does not yet support upload progress, this wrapper allows us to configure the xhr request 
+ * for a single file upload and takes care of adding the Authroization header and redirecting on 
+ * authroization errors as we do for normal fetch operations.
+ */
+export function redirectingAuthorizedUpload(xhr: XMLHttpRequest, url: string, file: File, onProgress: (event: ProgressEvent<EventTarget>) => void): Promise<void> {
+  return new Promise((resolve, reject) => {
+    xhr.open("POST", url, true);
+    const accessToken = getStorage().getItem(ACCESS_TOKEN);
+    if (accessToken) {
+      xhr.withCredentials = true;
+      xhr.setRequestHeader("Authorization", 'Bearer ' + accessToken);
+    }
+    xhr.upload.onprogress = onProgress;
+    xhr.onload = function () {
+      if (xhr.status === 401 || xhr.status === 403) {
+        history.push("/unauthorized");
+      } else {
+        resolve();
+      }
+    };
+    xhr.onerror = function (event: ProgressEvent<EventTarget>) {
+      reject(new DOMException('Error', 'UploadError'));
+    };
+    xhr.onabort = function () {
+      reject(new DOMException('Aborted', 'AbortError'));
+    };
+    const formData = new FormData();
+    formData.append('file', file);
+    xhr.send(formData);
+  });
+}
+
+/**
+ * Wraps the normal fetch routene which redirects on 401 response.
+ */
+export function redirectingAuthorizedFetch(url: RequestInfo, params?: RequestInit): Promise<Response> {
+  return new Promise<Response>((resolve, reject) => {
+    authorizedFetch(url, params).then(response => {
+      if (response.status === 401 || response.status === 403) {
+        history.push("/unauthorized");
+      } else {
+        resolve(response);
+      }
+    }).catch(error => {
+      reject(error);
+    });
+  });
+}
+
+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();
+}

interface/src/authentication/AuthenticationContext.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+
+export interface Me {
+  username: string;
+  admin: boolean;
+}
+
+export interface AuthenticationContext {
+  refresh: () => void;
+  signIn: (accessToken: string) => void;
+  signOut: () => void;
+  me?: Me;
+}
+
+const AuthenticationContextDefaultValue = {} as AuthenticationContext
+export const AuthenticationContext = React.createContext(
+  AuthenticationContextDefaultValue
+);
+
+export interface AuthenticationContextProps {
+  authenticationContext: AuthenticationContext;
+}
+
+export function withAuthenticationContext<T extends AuthenticationContextProps>(Component: React.ComponentType<T>) {
+  return class extends React.Component<Omit<T, keyof AuthenticationContextProps>> {
+    render() {
+      return (
+        <AuthenticationContext.Consumer>
+          {authenticationContext => <Component {...this.props as T} authenticationContext={authenticationContext} />}
+        </AuthenticationContext.Consumer>
+      );
+    }
+  };
+}
+
+export interface AuthenticatedContext extends AuthenticationContext {
+  me: Me;
+}
+
+const AuthenticatedContextDefaultValue = {} as AuthenticatedContext
+export const AuthenticatedContext = React.createContext(
+  AuthenticatedContextDefaultValue
+);
+
+export interface AuthenticatedContextProps {
+  authenticatedContext: AuthenticatedContext;
+}
+
+export function withAuthenticatedContext<T extends AuthenticatedContextProps>(Component: React.ComponentType<T>) {
+  return class extends React.Component<Omit<T, keyof AuthenticatedContextProps>> {
+    render() {
+      return (
+        <AuthenticatedContext.Consumer>
+          {authenticatedContext => <Component {...this.props as T} authenticatedContext={authenticatedContext} />}
+        </AuthenticatedContext.Consumer>
+      );
+    }
+  };
+}

interface/src/authentication/AuthenticationWrapper.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { withSnackbar, WithSnackbarProps } from 'notistack';
+import jwtDecode from 'jwt-decode';
+
+import history from '../history'
+import { VERIFY_AUTHORIZATION_ENDPOINT } from '../api';
+import { ACCESS_TOKEN, authorizedFetch, getStorage } from './Authentication';
+import { AuthenticationContext, Me } from './AuthenticationContext';
+import FullScreenLoading from '../components/FullScreenLoading';
+import { withFeatures, WithFeaturesProps } from '../features/FeaturesContext';
+
+export const decodeMeJWT = (accessToken: string): Me => jwtDecode(accessToken);
+
+interface AuthenticationWrapperState {
+  context: AuthenticationContext;
+  initialized: boolean;
+}
+
+type AuthenticationWrapperProps = WithSnackbarProps & WithFeaturesProps;
+
+class AuthenticationWrapper extends React.Component<AuthenticationWrapperProps, AuthenticationWrapperState> {
+
+  constructor(props: AuthenticationWrapperProps) {
+    super(props);
+    this.state = {
+      context: {
+        refresh: this.refresh,
+        signIn: this.signIn,
+        signOut: this.signOut,
+      },
+      initialized: false
+    };
+  }
+
+  componentDidMount() {
+    this.refresh();
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        {this.state.initialized ? this.renderContent() : this.renderContentLoading()}
+      </React.Fragment>
+    );
+  }
+
+  renderContent() {
+    return (
+      <AuthenticationContext.Provider value={this.state.context}>
+        {this.props.children}
+      </AuthenticationContext.Provider>
+    );
+  }
+
+  renderContentLoading() {
+    return (
+      <FullScreenLoading />
+    );
+  }
+
+  refresh = () => {
+    if (!this.props.features.security) {
+      this.setState({ initialized: true, context: { ...this.state.context, me: { admin: true, username: "admin" } } });
+      return;
+    }
+    const accessToken = getStorage().getItem(ACCESS_TOKEN)
+    if (accessToken) {
+      authorizedFetch(VERIFY_AUTHORIZATION_ENDPOINT)
+        .then(response => {
+          const me = response.status === 200 ? decodeMeJWT(accessToken) : undefined;
+          this.setState({ initialized: true, context: { ...this.state.context, me } });
+        }).catch(error => {
+          this.setState({ initialized: true, context: { ...this.state.context, me: undefined } });
+          this.props.enqueueSnackbar("Error verifying authorization: " + error.message, {
+            variant: 'error',
+          });
+        });
+    } else {
+      this.setState({ initialized: true, context: { ...this.state.context, me: undefined } });
+    }
+  }
+
+  signIn = (accessToken: string) => {
+    try {
+      getStorage().setItem(ACCESS_TOKEN, accessToken);
+      const me: Me = decodeMeJWT(accessToken);
+      this.setState({ context: { ...this.state.context, me } });
+      this.props.enqueueSnackbar(`Logged in as ${me.username}`, { variant: 'success' });
+    } catch (err) {
+      this.setState({ initialized: true, context: { ...this.state.context, me: undefined } });
+      throw new Error("Failed to parse JWT " + err.message);
+    }
+  }
+
+  signOut = () => {
+    getStorage().removeItem(ACCESS_TOKEN);
+    this.setState({
+      context: {
+        ...this.state.context,
+        me: undefined
+      }
+    });
+    this.props.enqueueSnackbar("You have signed out.", { variant: 'success', });
+    history.push('/');
+  }
+
+}
+
+export default withFeatures(withSnackbar(AuthenticationWrapper))

interface/src/authentication/UnauthenticatedRoute.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Redirect, Route, RouteProps, RouteComponentProps } from "react-router-dom";
+
+import { withAuthenticationContext, AuthenticationContextProps } from './AuthenticationContext';
+import * as Authentication from './Authentication';
+import { WithFeaturesProps, withFeatures } from '../features/FeaturesContext';
+
+interface UnauthenticatedRouteProps extends RouteProps, AuthenticationContextProps, WithFeaturesProps {
+  component: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
+}
+
+type RenderComponent = (props: RouteComponentProps<any>) => React.ReactNode;
+
+class UnauthenticatedRoute extends Route<UnauthenticatedRouteProps> {
+
+  public render() {
+    const { authenticationContext, component: Component, features, ...rest } = this.props;
+    const renderComponent: RenderComponent = (props) => {
+      if (authenticationContext.me) {
+        return (<Redirect to={Authentication.fetchLoginRedirect(features)} />);
+      }
+      return (<Component {...props} />);
+    }
+    return (
+      <Route {...rest} render={renderComponent} />
+    );
+  }
+}
+
+export default withFeatures(withAuthenticationContext(UnauthenticatedRoute));

interface/src/authentication/index.ts

@@ -0,0 +1,6 @@
+export { default as AuthenticatedRoute } from './AuthenticatedRoute';
+export { default as AuthenticationWrapper } from './AuthenticationWrapper';
+export { default as UnauthenticatedRoute } from './UnauthenticatedRoute';
+
+export * from './Authentication';
+export * from './AuthenticationContext';

interface/src/components/ApplicationError.tsx

@@ -0,0 +1,59 @@
+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/styles';
+import { Paper, Typography, Box, CssBaseline } from "@material-ui/core";
+import WarningIcon from "@material-ui/icons/Warning"
+
+const styles = makeStyles(
+  {
+    siteErrorPage: {
+      display: "flex",
+      height: "100vh",
+      justifyContent: "center",
+      flexDirection: "column"
+    },
+    siteErrorPagePanel: {
+      textAlign: "center",
+      padding: "280px 0 40px 0",
+      backgroundImage: 'url("/app/icon.png")',
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "50% 40px",
+      backgroundSize: "200px auto",
+      width: "100%",
+    }
+  }
+);
+
+interface ApplicationErrorProps {
+  error?: string;
+}
+
+const ApplicationError: FC<ApplicationErrorProps> = ({ error }) => {
+  const classes = styles();
+  return (
+    <div className={classes.siteErrorPage}>
+      <CssBaseline />
+      <Paper className={classes.siteErrorPagePanel} elevation={10}>
+        <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>
+        {error &&
+          (
+            <Typography variant="subtitle2" gutterBottom>
+              Error: {error}
+            </Typography>
+          )
+        }
+      </Paper>
+    </div>
+  );
+}
+
+export default ApplicationError;

interface/src/components/BlockFormControlLabel.tsx

@@ -0,0 +1,10 @@
+import React, { FC } from "react";
+import { FormControlLabel, FormControlLabelProps } from "@material-ui/core";
+
+const BlockFormControlLabel: FC<FormControlLabelProps> = (props) => (
+  <div>
+    <FormControlLabel {...props} />
+  </div>
+)
+
+export default BlockFormControlLabel;

interface/src/components/ErrorButton.tsx

@@ -0,0 +1,11 @@
+import { Button, styled } from "@material-ui/core";
+
+const ErrorButton = styled(Button)(({ theme }) => ({
+  color: theme.palette.getContrastText(theme.palette.error.main),
+  backgroundColor: theme.palette.error.main,
+  '&:hover': {
+    backgroundColor: theme.palette.error.dark,
+  }
+}));
+
+export default ErrorButton;

interface/src/components/FormActions.tsx

@@ -0,0 +1,7 @@
+import { styled, Box } from "@material-ui/core";
+
+const FormActions = styled(Box)(({ theme }) => ({
+  marginTop: theme.spacing(1)
+}));
+
+export default FormActions;

interface/src/components/FormButton.tsx

@@ -0,0 +1,13 @@
+import { Button, styled } from "@material-ui/core";
+
+const FormButton = styled(Button)(({ theme }) => ({
+  margin: theme.spacing(0, 1),
+  '&:last-child': {
+    marginRight: 0,
+  },
+  '&:first-child': {
+    marginLeft: 0,
+  }
+}));
+
+export default FormButton;

interface/src/components/FullScreenLoading.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { Typography, Theme } from '@material-ui/core';
+import { makeStyles, createStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles((theme: Theme) => createStyles({
+  fullScreenLoading: {
+    padding: theme.spacing(2),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100vh",
+    flexDirection: "column"
+  },
+  progress: {
+    margin: theme.spacing(4),
+  }
+}));
+
+const FullScreenLoading = () => {
+  const classes = useStyles();
+  return (
+    <div className={classes.fullScreenLoading}>
+      <CircularProgress className={classes.progress} size={100} />
+      <Typography variant="h4">
+        Loading &hellip;
+      </Typography>
+    </div>
+  )
+}
+
+export default FullScreenLoading;

interface/src/components/HighlightAvatar.tsx

@@ -0,0 +1,23 @@
+import { Avatar, makeStyles } from "@material-ui/core";
+import React, { FC } from "react";
+
+interface HighlightAvatarProps {
+  color: string;
+}
+
+const useStyles = makeStyles({
+  root: (props: HighlightAvatarProps) => ({
+    backgroundColor: props.color
+  })
+});
+
+const HighlightAvatar: FC<HighlightAvatarProps> = (props) => {
+  const classes = useStyles(props);
+  return (
+    <Avatar className={classes.root}>
+      {props.children}
+    </Avatar>
+  );
+}
+
+export default HighlightAvatar;

interface/src/components/MenuAppBar.tsx

@@ -0,0 +1,286 @@
+import React, { RefObject, Fragment } from 'react';
+import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
+
+import { Drawer, AppBar, Toolbar, Avatar, Divider, Button, Box, IconButton } from '@material-ui/core';
+import { ClickAwayListener, Popper, Hidden, Typography } from '@material-ui/core';
+import { List, ListItem, ListItemIcon, ListItemText, ListItemAvatar } from '@material-ui/core';
+import { Card, CardContent, CardActions } from '@material-ui/core';
+
+import { withStyles, createStyles, Theme, WithTheme, WithStyles, withTheme } from '@material-ui/core/styles';
+
+import WifiIcon from '@material-ui/icons/Wifi';
+import SettingsIcon from '@material-ui/icons/Settings';
+import AccessTimeIcon from '@material-ui/icons/AccessTime';
+import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+import SettingsInputAntennaIcon from '@material-ui/icons/SettingsInputAntenna';
+import DeviceHubIcon from '@material-ui/icons/DeviceHub';
+import LockIcon from '@material-ui/icons/Lock';
+import MenuIcon from '@material-ui/icons/Menu';
+
+import ProjectMenu from '../project/ProjectMenu';
+import { PROJECT_NAME } from '../api';
+import { withAuthenticatedContext, AuthenticatedContextProps } from '../authentication';
+import { withFeatures, WithFeaturesProps } from '../features/FeaturesContext';
+
+const drawerWidth = 290;
+
+const styles = (theme: Theme) => createStyles({
+  root: {
+    display: 'flex',
+  },
+  drawer: {
+    [theme.breakpoints.up('md')]: {
+      width: drawerWidth,
+      flexShrink: 0,
+    },
+  },
+  title: {
+    flexGrow: 1
+  },
+  appBar: {
+    marginLeft: drawerWidth,
+    [theme.breakpoints.up('md')]: {
+      width: `calc(100% - ${drawerWidth}px)`,
+    },
+  },
+  toolbarImage: {
+    [theme.breakpoints.up('xs')]: {
+      height: 24,
+      marginRight: theme.spacing(2)
+    },
+    [theme.breakpoints.up('sm')]: {
+      height: 36,
+      marginRight: theme.spacing(3)
+    },
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+    [theme.breakpoints.up('md')]: {
+      display: 'none',
+    },
+  },
+  toolbar: theme.mixins.toolbar,
+  drawerPaper: {
+    width: drawerWidth,
+  },
+  content: {
+    flexGrow: 1
+  },
+  authMenu: {
+    zIndex: theme.zIndex.tooltip,
+    maxWidth: 400,
+  },
+  authMenuActions: {
+    padding: theme.spacing(2),
+    "& > * + *": {
+      marginLeft: theme.spacing(2),
+    }
+  },
+});
+
+interface MenuAppBarState {
+  mobileOpen: boolean;
+  authMenuOpen: boolean;
+}
+
+interface MenuAppBarProps extends WithFeaturesProps, AuthenticatedContextProps, WithTheme, WithStyles<typeof styles>, RouteComponentProps {
+  sectionTitle: string;
+}
+
+class MenuAppBar extends React.Component<MenuAppBarProps, MenuAppBarState> {
+
+  constructor(props: MenuAppBarProps) {
+    super(props);
+    this.state = {
+      mobileOpen: false,
+      authMenuOpen: false
+    };
+  }
+
+  anchorRef: RefObject<HTMLButtonElement> = React.createRef();
+
+  handleToggle = () => {
+    this.setState({ authMenuOpen: !this.state.authMenuOpen });
+  }
+
+  handleClose = (event: React.MouseEvent<Document>) => {
+    if (this.anchorRef.current && this.anchorRef.current.contains(event.currentTarget)) {
+      return;
+    }
+    this.setState({ authMenuOpen: false });
+  }
+
+  handleDrawerToggle = () => {
+    this.setState({ mobileOpen: !this.state.mobileOpen });
+  };
+
+  render() {
+    const { classes, theme, children, sectionTitle, authenticatedContext, features } = this.props;
+    const { mobileOpen, authMenuOpen } = this.state;
+    const path = this.props.match.url;
+    const drawer = (
+      <div>
+        <Toolbar>
+          <Box display="flex">
+            <img src="/app/icon.png" className={classes.toolbarImage} alt={PROJECT_NAME} />
+          </Box>
+          <Typography variant="h6" color="textPrimary">
+            {PROJECT_NAME}
+          </Typography>
+          <Divider absolute />
+        </Toolbar>
+        {features.project && (
+          <Fragment>
+            <ProjectMenu />
+            <Divider />
+          </Fragment>
+        )}
+        <List>
+          <ListItem to='/wifi/' selected={path.startsWith('/wifi/')} button component={Link}>
+            <ListItemIcon>
+              <WifiIcon />
+            </ListItemIcon>
+            <ListItemText primary="WiFi Connection" />
+          </ListItem>
+          <ListItem to='/ap/' selected={path.startsWith('/ap/')} button component={Link}>
+            <ListItemIcon>
+              <SettingsInputAntennaIcon />
+            </ListItemIcon>
+            <ListItemText primary="Access Point" />
+          </ListItem>
+          {features.ntp && (
+          <ListItem to='/ntp/' selected={path.startsWith('/ntp/')} button component={Link}>
+            <ListItemIcon>
+              <AccessTimeIcon />
+            </ListItemIcon>
+            <ListItemText primary="Network Time" />
+          </ListItem>
+          )}
+          {features.mqtt && (
+            <ListItem to='/mqtt/' selected={path.startsWith('/mqtt/')} button component={Link}>
+              <ListItemIcon>
+                <DeviceHubIcon />
+              </ListItemIcon>
+              <ListItemText primary="MQTT" />
+            </ListItem>
+          )}
+          {features.security && (
+            <ListItem to='/security/' selected={path.startsWith('/security/')} button component={Link} disabled={!authenticatedContext.me.admin}>
+              <ListItemIcon>
+                <LockIcon />
+              </ListItemIcon>
+              <ListItemText primary="Security" />
+            </ListItem>
+          )}
+          <ListItem to='/system/' selected={path.startsWith('/system/')} button component={Link} >
+            <ListItemIcon>
+              <SettingsIcon />
+            </ListItemIcon>
+            <ListItemText primary="System" />
+          </ListItem>
+        </List>
+      </div>
+    );
+
+    const userMenu = (
+      <div>
+        <IconButton
+          ref={this.anchorRef}
+          aria-owns={authMenuOpen ? 'menu-list-grow' : undefined}
+          aria-haspopup="true"
+          onClick={this.handleToggle}
+          color="inherit"
+        >
+          <AccountCircleIcon />
+        </IconButton>
+        <Popper open={authMenuOpen} anchorEl={this.anchorRef.current} transition className={classes.authMenu}>
+          <ClickAwayListener onClickAway={this.handleClose}>
+            <Card id="menu-list-grow">
+              <CardContent>
+                <List disablePadding>
+                  <ListItem disableGutters>
+                    <ListItemAvatar>
+                      <Avatar>
+                        <AccountCircleIcon />
+                      </Avatar>
+                    </ListItemAvatar>
+                    <ListItemText primary={"Signed in as: " + authenticatedContext.me.username} secondary={authenticatedContext.me.admin ? "Admin User" : undefined} />
+                  </ListItem>
+                </List>
+              </CardContent>
+              <Divider />
+              <CardActions className={classes.authMenuActions}>
+                <Button variant="contained" fullWidth color="primary" onClick={authenticatedContext.signOut}>Sign Out</Button>
+              </CardActions>
+            </Card>
+          </ClickAwayListener>
+        </Popper>
+      </div>
+    );
+
+    return (
+      <div className={classes.root}>
+        <AppBar position="fixed" className={classes.appBar} elevation={0}>
+          <Toolbar>
+            <IconButton
+              color="inherit"
+              aria-label="Open drawer"
+              edge="start"
+              onClick={this.handleDrawerToggle}
+              className={classes.menuButton}
+            >
+              <MenuIcon />
+            </IconButton>
+            <Typography variant="h6" color="inherit" noWrap className={classes.title}>
+              {sectionTitle}
+            </Typography>
+            {features.security && userMenu}
+          </Toolbar>
+        </AppBar>
+        <nav className={classes.drawer}>
+          <Hidden mdUp implementation="css">
+            <Drawer
+              variant="temporary"
+              anchor={theme.direction === 'rtl' ? 'right' : 'left'}
+              open={mobileOpen}
+              onClose={this.handleDrawerToggle}
+              classes={{
+                paper: classes.drawerPaper,
+              }}
+              ModalProps={{
+                keepMounted: true,
+              }}
+            >
+              {drawer}
+            </Drawer>
+          </Hidden>
+          <Hidden smDown implementation="css">
+            <Drawer
+              classes={{
+                paper: classes.drawerPaper,
+              }}
+              variant="permanent"
+              open
+            >
+              {drawer}
+            </Drawer>
+          </Hidden>
+        </nav>
+        <main className={classes.content}>
+          <div className={classes.toolbar} />
+          {children}
+        </main>
+      </div>
+    );
+  }
+}
+
+export default withRouter(
+  withTheme(
+    withFeatures(
+      withAuthenticatedContext(
+        withStyles(styles)(MenuAppBar)
+      )
+    )
+  )
+);

interface/src/components/PasswordValidator.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { TextValidator, ValidatorComponentProps } from 'react-material-ui-form-validator';
+
+import { withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
+import { InputAdornment, IconButton } from '@material-ui/core';
+import {Visibility,VisibilityOff } from '@material-ui/icons';
+
+const styles = createStyles({
+  input: {
+    "&::-ms-reveal": {
+      display: "none"
+    }
+  }
+});
+
+type PasswordValidatorProps = WithStyles<typeof styles> & Exclude<ValidatorComponentProps, "type" | "InputProps">;
+
+interface PasswordValidatorState {
+  showPassword: boolean;
+}
+
+class PasswordValidator extends React.Component<PasswordValidatorProps, PasswordValidatorState> {
+
+  state = {
+    showPassword: false
+  };
+
+  toggleShowPassword = () => {
+    this.setState({
+      showPassword: !this.state.showPassword
+    });
+  }
+
+  render() {
+    const { classes, ...rest } = this.props;
+    return (
+      <TextValidator
+        {...rest}
+        type={this.state.showPassword ? 'text' : 'password'}
+        InputProps={{
+          classes,
+          endAdornment:
+            <InputAdornment position="end">
+              <IconButton
+                aria-label="Toggle password visibility"
+                onClick={this.toggleShowPassword}
+              >
+                {this.state.showPassword ? <Visibility /> : <VisibilityOff />}
+              </IconButton>
+            </InputAdornment>
+        }}
+      />
+    );
+  }
+
+}
+
+export default withStyles(styles)(PasswordValidator);

interface/src/components/RestController.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { withSnackbar, WithSnackbarProps } from 'notistack';
+
+import { redirectingAuthorizedFetch } from '../authentication';
+
+export interface RestControllerProps<D> extends WithSnackbarProps {
+  handleValueChange: (name: keyof D) => (event: React.ChangeEvent<HTMLInputElement>) => void;
+
+  setData: (data: D, callback?: () => void) => void;
+  saveData: () => void;
+  loadData: () => void;
+
+  data?: D;
+  loading: boolean;
+  errorMessage?: string;
+}
+
+export const extractEventValue = (event: React.ChangeEvent<HTMLInputElement>) => {
+  switch (event.target.type) {
+    case "number":
+      return event.target.valueAsNumber;
+    case "checkbox":
+      return event.target.checked;
+    default:
+      return event.target.value
+  }
+}
+
+interface RestControllerState<D> {
+  data?: D;
+  loading: boolean;
+  errorMessage?: string;
+}
+
+export function restController<D, P extends RestControllerProps<D>>(endpointUrl: string, RestController: React.ComponentType<P & RestControllerProps<D>>) {
+  return withSnackbar(
+    class extends React.Component<Omit<P, keyof RestControllerProps<D>> & WithSnackbarProps, RestControllerState<D>> {
+
+      state: RestControllerState<D> = {
+        data: undefined,
+        loading: false,
+        errorMessage: undefined
+      };
+
+      setData = (data: D, callback?: () => void) => {
+        this.setState({
+          data,
+          loading: false,
+          errorMessage: undefined
+        }, callback);
+      }
+
+      loadData = () => {
+        this.setState({
+          data: undefined,
+          loading: true,
+          errorMessage: undefined
+        });
+        redirectingAuthorizedFetch(endpointUrl).then(response => {
+          if (response.status === 200) {
+            return response.json();
+          }
+          throw Error("Invalid status code: " + response.status);
+        }).then(json => {
+          this.setState({ data: json, loading: false })
+        }).catch(error => {
+          const errorMessage = error.message || "Unknown error";
+          this.props.enqueueSnackbar("Problem fetching: " + errorMessage, { variant: 'error' });
+          this.setState({ data: undefined, loading: false, errorMessage });
+        });
+      }
+
+      saveData = () => {
+        this.setState({ loading: true });
+        redirectingAuthorizedFetch(endpointUrl, {
+          method: 'POST',
+          body: JSON.stringify(this.state.data),
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        }).then(response => {
+          if (response.status === 200) {
+            return response.json();
+          }
+          throw Error("Invalid status code: " + response.status);
+        }).then(json => {
+          this.props.enqueueSnackbar("Changes successfully applied.", { variant: 'success' });
+          this.setState({ data: json, loading: false });
+        }).catch(error => {
+          const errorMessage = error.message || "Unknown error";
+          this.props.enqueueSnackbar("Problem saving: " + errorMessage, { variant: 'error' });
+          this.setState({ data: undefined, loading: false, errorMessage });
+        });
+      }
+
+      handleValueChange = (name: keyof D) => (event: React.ChangeEvent<HTMLInputElement>) => {
+        const data = { ...this.state.data!, [name]: extractEventValue(event) };
+        this.setState({ data });
+      }
+
+      render() {
+        return <RestController
+          {...this.state}
+          {...this.props as P}
+          handleValueChange={this.handleValueChange}
+          setData={this.setData}
+          saveData={this.saveData}
+          loadData={this.loadData}
+        />;
+      }
+
+    });
+}

interface/src/components/RestFormLoader.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import { Button, LinearProgress, Typography } from '@material-ui/core';
+
+import { RestControllerProps } from '.';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    loadingSettings: {
+      margin: theme.spacing(0.5),
+    },
+    loadingSettingsDetails: {
+      margin: theme.spacing(4),
+      textAlign: "center"
+    },
+    button: {
+      marginRight: theme.spacing(2),
+      marginTop: theme.spacing(2),
+    }
+  })
+);
+
+export type RestFormProps<D> = Omit<RestControllerProps<D>, "loading" | "errorMessage"> & { data: D };
+
+interface RestFormLoaderProps<D> extends RestControllerProps<D> {
+  render: (props: RestFormProps<D>) => JSX.Element;
+}
+
+export default function RestFormLoader<D>(props: RestFormLoaderProps<D>) {
+  const { loading, errorMessage, loadData, render, data, ...rest } = props;
+  const classes = useStyles();
+  if (loading || !data) {
+    return (
+      <div className={classes.loadingSettings}>
+        <LinearProgress className={classes.loadingSettingsDetails} />
+        <Typography variant="h6" className={classes.loadingSettingsDetails}>
+          Loading&hellip;
+        </Typography>
+      </div>
+    );
+  }
+  if (errorMessage) {
+    return (
+      <div className={classes.loadingSettings}>
+        <Typography variant="h6" className={classes.loadingSettingsDetails}>
+          {errorMessage}
+        </Typography>
+        <Button variant="contained" color="secondary" className={classes.button} onClick={loadData}>
+          Reset
+        </Button>
+      </div>
+    );
+  }
+  return render({ ...rest, loadData, data });
+}

interface/src/components/SectionContent.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { Typography, Paper } from '@material-ui/core';
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    content: {
+      padding: theme.spacing(2),
+      margin: theme.spacing(3),
+    }
+  })
+);
+
+interface SectionContentProps {
+  title: string;
+  titleGutter?: boolean;
+}
+
+const SectionContent: React.FC<SectionContentProps> = (props) => {
+  const { children, title, titleGutter } = props;
+  const classes = useStyles();
+  return (
+    <Paper className={classes.content}>
+      <Typography variant="h6" gutterBottom={titleGutter}>
+        {title}
+      </Typography>
+      {children}
+    </Paper>
+  );
+};
+
+export default SectionContent;

interface/src/components/SingleUpload.tsx

@@ -0,0 +1,97 @@
+import React, { FC, Fragment } from 'react';
+import { useDropzone, DropzoneState } from 'react-dropzone';
+
+import { makeStyles, createStyles } from '@material-ui/styles';
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import CancelIcon from '@material-ui/icons/Cancel';
+import { Theme, Box, Typography, LinearProgress, Button } from '@material-ui/core';
+import ErrorButton from './ErrorButton';
+
+interface SingleUploadStyleProps extends DropzoneState {
+  uploading: boolean;
+}
+
+const progressPercentage = (progress: ProgressEvent) => Math.round((progress.loaded * 100) / progress.total);
+
+const getBorderColor = (theme: Theme, props: SingleUploadStyleProps) => {
+  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];
+}
+
+const useStyles = makeStyles((theme: Theme) => createStyles({
+  dropzone: {
+    padding: theme.spacing(8, 2),
+    borderWidth: 2,
+    borderRadius: 2,
+    borderStyle: 'dashed',
+    color: theme.palette.grey[700],
+    transition: 'border .24s ease-in-out',
+    cursor: (props: SingleUploadStyleProps) => props.uploading ? 'default' : 'pointer',
+    width: '100%',
+    borderColor: (props: SingleUploadStyleProps) => getBorderColor(theme, props)
+  }
+}));
+
+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 classes = useStyles({ ...dropzoneState, uploading });
+
+
+  const renderProgressText = () => {
+    if (uploading) {
+      if (progress?.lengthComputable) {
+        return `Uploading: ${progressPercentage(progress)}%`;
+      }
+      return "Uploading\u2026";
+    }
+    return "Drop file here or click to browse";
+  }
+
+  const renderProgress = (progress?: ProgressEvent) => (
+    <LinearProgress
+      variant={!progress || progress.lengthComputable ? "determinate" : "indeterminate"}
+      value={!progress ? 0 : progress.lengthComputable ? progressPercentage(progress) : 0}
+    />
+  );
+
+  return (
+    <div {...getRootProps({ className: classes.dropzone })}>
+      <input {...getInputProps()} />
+      <Box flexDirection="column" display="flex" alignItems="center">
+        <CloudUploadIcon fontSize='large' />
+        <Typography variant="h6">
+          {renderProgressText()}
+        </Typography>
+        {uploading && (
+          <Fragment>
+            <Box width="100%" p={2}>
+              {renderProgress(progress)}
+            </Box>
+            <ErrorButton startIcon={<CancelIcon />} variant="contained" color="primary" onClick={onCancel}>
+              Cancel
+            </ErrorButton>
+          </Fragment>
+        )}
+      </Box>
+    </div>
+  );
+}
+
+export default SingleUpload;

interface/src/components/WebSocketController.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import Sockette from 'sockette';
+import throttle from 'lodash/throttle';
+import { withSnackbar, WithSnackbarProps } from 'notistack';
+
+import { addAccessTokenParameter } from '../authentication';
+import { extractEventValue } from '.';
+
+export interface WebSocketControllerProps<D> extends WithSnackbarProps {
+  handleValueChange: (name: keyof D) => (event: React.ChangeEvent<HTMLInputElement>) => void;
+
+  setData: (data: D, callback?: () => void) => void;
+  saveData: () => void;
+  saveDataAndClear(): () => void;
+
+  connected: boolean;
+  data?: D;
+}
+
+interface WebSocketControllerState<D> {
+  ws: Sockette;
+  connected: boolean;
+  clientId?: string;
+  data?: D;
+}
+
+enum WebSocketMessageType {
+  ID = "id",
+  PAYLOAD = "payload"
+}
+
+interface WebSocketIdMessage {
+  type: typeof WebSocketMessageType.ID;
+  id: string;
+}
+
+interface WebSocketPayloadMessage<D> {
+  type: typeof WebSocketMessageType.PAYLOAD;
+  origin_id: string;
+  payload: D;
+}
+
+export type WebSocketMessage<D> = WebSocketIdMessage | WebSocketPayloadMessage<D>;
+
+export function webSocketController<D, P extends WebSocketControllerProps<D>>(wsUrl: string, wsThrottle: number, WebSocketController: React.ComponentType<P & WebSocketControllerProps<D>>) {
+  return withSnackbar(
+    class extends React.Component<Omit<P, keyof WebSocketControllerProps<D>> & WithSnackbarProps, WebSocketControllerState<D>> {
+      constructor(props: Omit<P, keyof WebSocketControllerProps<D>> & WithSnackbarProps) {
+        super(props);
+        this.state = {
+          ws: new Sockette(addAccessTokenParameter(wsUrl), {
+            onmessage: this.onMessage,
+            onopen: this.onOpen,
+            onclose: this.onClose,
+          }),
+          connected: false
+        }
+      }
+
+      componentWillUnmount() {
+        this.state.ws.close();
+      }
+
+      onMessage = (event: MessageEvent) => {
+        const rawData = event.data;
+        if (typeof rawData === 'string' || rawData instanceof String) {
+          this.handleMessage(JSON.parse(rawData as string) as WebSocketMessage<D>);
+        }
+      }
+
+      handleMessage = (message: WebSocketMessage<D>) => {
+        switch (message.type) {
+          case WebSocketMessageType.ID:
+            this.setState({ clientId: message.id });
+            break;
+          case WebSocketMessageType.PAYLOAD:
+            const { clientId, data } = this.state;
+            if (clientId && (!data || clientId !== message.origin_id)) {
+              this.setState(
+                { data: message.payload }
+              );
+            }
+            break;
+        }
+      }
+
+      onOpen = () => {
+        this.setState({ connected: true });
+      }
+
+      onClose = () => {
+        this.setState({ connected: false, clientId: undefined, data: undefined });
+      }
+
+      setData = (data: D, callback?: () => void) => {
+        this.setState({ data }, callback);
+      }
+
+      saveData = throttle(() => {
+        const { ws, connected, data } = this.state;
+        if (connected) {
+          ws.json(data);
+        }
+      }, wsThrottle);
+
+      saveDataAndClear = throttle(() => {
+        const { ws, connected, data } = this.state;
+        if (connected) {
+          this.setState({
+            data: undefined
+          }, () => ws.json(data));
+        }
+      }, wsThrottle);
+
+      handleValueChange = (name: keyof D) => (event: React.ChangeEvent<HTMLInputElement>) => {
+        const data = { ...this.state.data!, [name]: extractEventValue(event) };
+        this.setState({ data });
+      }
+
+      render() {
+        return <WebSocketController
+          {...this.props as P}
+          handleValueChange={this.handleValueChange}
+          setData={this.setData}
+          saveData={this.saveData}
+          saveDataAndClear={this.saveDataAndClear}
+          connected={this.state.connected}
+          data={this.state.data}
+        />;
+      }
+
+    });
+}

interface/src/components/WebSocketFormLoader.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import { LinearProgress, Typography } from '@material-ui/core';
+
+import { WebSocketControllerProps } from '.';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    loadingSettings: {
+      margin: theme.spacing(0.5),
+    },
+    loadingSettingsDetails: {
+      margin: theme.spacing(4),
+      textAlign: "center"
+    }
+  })
+);
+
+export type WebSocketFormProps<D> = Omit<WebSocketControllerProps<D>, "connected"> & { data: D };
+
+interface WebSocketFormLoaderProps<D> extends WebSocketControllerProps<D> {
+  render: (props: WebSocketFormProps<D>) => JSX.Element;
+}
+
+export default function WebSocketFormLoader<D>(props: WebSocketFormLoaderProps<D>) {
+  const { connected, render, data, ...rest } = props;
+  const classes = useStyles();
+  if (!connected || !data) {
+    return (
+      <div className={classes.loadingSettings}>
+        <LinearProgress className={classes.loadingSettingsDetails} />
+        <Typography variant="h6" className={classes.loadingSettingsDetails}>
+          Connecting to WebSocket...
+        </Typography>
+      </div>
+    );
+  }
+  return render({ ...rest, data });
+}

interface/src/components/index.ts

@@ -0,0 +1,17 @@
+export { default as BlockFormControlLabel } from './BlockFormControlLabel';
+export { default as FormActions } from './FormActions';
+export { default as FormButton } from './FormButton';
+export { default as HighlightAvatar } from './HighlightAvatar';
+export { default as MenuAppBar } from './MenuAppBar';
+export { default as PasswordValidator } from './PasswordValidator';
+export { default as RestFormLoader } from './RestFormLoader';
+export { default as SectionContent } from './SectionContent';
+export { default as WebSocketFormLoader } from './WebSocketFormLoader';
+export { default as ErrorButton } from './ErrorButton';
+export { default as SingleUpload } from './SingleUpload';
+
+export * from './RestFormLoader';
+export * from './RestController';
+
+export * from './WebSocketFormLoader';
+export * from './WebSocketController';

interface/src/features/ApplicationContext.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Features } from './types';
+
+export interface ApplicationContext {
+  features: Features;
+}
+
+const ApplicationContextDefaultValue = {} as ApplicationContext
+export const ApplicationContext = React.createContext(
+  ApplicationContextDefaultValue
+);
+
+export function withAuthenticatedContexApplicationContext<T extends ApplicationContext>(Component: React.ComponentType<T>) {
+  return class extends React.Component<Omit<T, keyof ApplicationContext>> {
+    render() {
+      return (
+        <ApplicationContext.Consumer>
+          {authenticatedContext => <Component {...this.props as T} features={authenticatedContext} />}
+        </ApplicationContext.Consumer>
+      );
+    }
+  };
+}

interface/src/features/FeaturesContext.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Features } from './types';
+
+export interface FeaturesContext {
+  features: Features;
+}
+
+const FeaturesContextDefaultValue = {} as FeaturesContext
+export const FeaturesContext = React.createContext(
+  FeaturesContextDefaultValue
+);
+
+export interface WithFeaturesProps {
+  features: Features;
+}
+
+export function withFeatures<T extends WithFeaturesProps>(Component: React.ComponentType<T>) {
+  return class extends React.Component<Omit<T, keyof WithFeaturesProps>> {
+    render() {
+      return (
+        <FeaturesContext.Consumer>
+          {featuresContext => <Component {...this.props as T} features={featuresContext.features} />}
+        </FeaturesContext.Consumer>
+      );
+    }
+  };
+}

interface/src/features/FeaturesWrapper.tsx

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+
+import { Features } from './types';
+import { FeaturesContext } from './FeaturesContext';
+import FullScreenLoading from '../components/FullScreenLoading';
+import ApplicationError from '../components/ApplicationError';
+import { FEATURES_ENDPOINT } from '../api';
+
+interface FeaturesWrapperState {
+  features?: Features;
+  error?: string;
+};
+
+class FeaturesWrapper extends Component<{}, FeaturesWrapperState> {
+
+  state: FeaturesWrapperState = {};
+
+  componentDidMount() {
+    this.fetchFeaturesDetails();
+  }
+
+  fetchFeaturesDetails = () => {
+    fetch(FEATURES_ENDPOINT)
+      .then(response => {
+        if (response.status === 200) {
+          return response.json();
+        } else {
+          throw Error("Unexpected status code: " + response.status);
+        }
+      }).then(features => {
+        this.setState({ features });
+      })
+      .catch(error => {
+        this.setState({ error: error.message });
+      });
+  }
+
+  render() {
+    const { features, error } = this.state;
+    if (features) {
+      return (
+        <FeaturesContext.Provider value={{
+          features
+        }}>
+          {this.props.children}
+        </FeaturesContext.Provider>
+      );
+    }
+    if (error) {
+      return (
+        <ApplicationError error={error} />
+      );
+    }
+    return (
+      <FullScreenLoading />
+    );
+  }
+
+}
+
+export default FeaturesWrapper;

interface/src/features/types.ts

@@ -0,0 +1,8 @@
+export interface Features {
+  project: boolean;
+  security: boolean;
+  mqtt: boolean;
+  ntp: boolean;
+  ota: boolean;
+  upload_firmware: boolean;
+}

interface/src/history.ts

@@ -0,0 +1,5 @@
+import { createBrowserHistory } from 'history';
+
+export default createBrowserHistory({
+  /* pass a configuration object here if needed */
+})

interface/src/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import history from './history';
+import { Router } from 'react-router';
+
+import App from './App';
+
+render((
+  <Router history={history}>
+    <App/>
+  </Router>
+), document.getElementById("root"))

interface/src/mqtt/Mqtt.tsx

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import { Redirect, Switch, RouteComponentProps } from 'react-router-dom'
+
+import { Tabs, Tab } from '@material-ui/core';
+
+import { AuthenticatedContextProps, withAuthenticatedContext, AuthenticatedRoute } from '../authentication';
+import { MenuAppBar } from '../components';
+import MqttStatusController from './MqttStatusController';
+import MqttSettingsController from './MqttSettingsController';
+
+type MqttProps = AuthenticatedContextProps & RouteComponentProps;
+
+class Mqtt extends Component<MqttProps> {
+
+  handleTabChange = (event: React.ChangeEvent<{}>, path: string) => {
+    this.props.history.push(path);
+  };
+
+  render() {
+    const { authenticatedContext } = this.props;
+    return (
+      <MenuAppBar sectionTitle="MQTT">
+        <Tabs value={this.props.match.url} onChange={this.handleTabChange} variant="fullWidth">
+          <Tab value="/mqtt/status" label="MQTT Status" />
+          <Tab value="/mqtt/settings" label="MQTT Settings" disabled={!authenticatedContext.me.admin} />
+        </Tabs>
+        <Switch>
+          <AuthenticatedRoute exact path="/mqtt/status" component={MqttStatusController} />
+          <AuthenticatedRoute exact path="/mqtt/settings" component={MqttSettingsController} />
+          <Redirect to="/mqtt/status" />
+        </Switch>
+      </MenuAppBar>
+    )
+  }
+}
+
+export default withAuthenticatedContext(Mqtt);

interface/src/mqtt/MqttSettingsController.tsx

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+
+import {restController, RestControllerProps, RestFormLoader, SectionContent } from '../components';
+import { MQTT_SETTINGS_ENDPOINT } from '../api';
+
+import MqttSettingsForm from './MqttSettingsForm';
+import { MqttSettings } from './types';
+
+type MqttSettingsControllerProps = RestControllerProps<MqttSettings>;
+
+class MqttSettingsController extends Component<MqttSettingsControllerProps> {
+
+  componentDidMount() {
+    this.props.loadData();
+  }
+
+  render() {
+    return (
+      <SectionContent title="MQTT Settings" titleGutter>
+        <RestFormLoader
+          {...this.props}
+          render={formProps => <MqttSettingsForm {...formProps} />}
+        />
+      </SectionContent>
+    )
+  }
+
+}
+
+export default restController(MQTT_SETTINGS_ENDPOINT, MqttSettingsController);

interface/src/mqtt/MqttSettingsForm.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
+
+import { Checkbox, TextField } from '@material-ui/core';
+import SaveIcon from '@material-ui/icons/Save';
+
+import { RestFormProps, FormActions, FormButton, BlockFormControlLabel, PasswordValidator } from '../components';
+import { isIP, isHostname, or } from '../validators';
+
+import { MqttSettings } from './types';
+
+type MqttSettingsFormProps = RestFormProps<MqttSettings>;
+
+class MqttSettingsForm extends React.Component<MqttSettingsFormProps> {
+
+  componentDidMount() {
+    ValidatorForm.addValidationRule('isIPOrHostname', or(isIP, isHostname));
+  }
+
+  render() {
+    const { data, handleValueChange, saveData, loadData } = this.props;
+    return (
+      <ValidatorForm onSubmit={saveData}>
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              checked={data.enabled}
+              onChange={handleValueChange('enabled')}
+              value="enabled"
+            />
+          }
+          label="Enable MQTT?"
+        />
+        <TextValidator
+          validators={['required', 'isIPOrHostname']}
+          errorMessages={['Host is required', "Not a valid IP address or hostname"]}
+          name="host"
+          label="Host"
+          fullWidth
+          variant="outlined"
+          value={data.host}
+          onChange={handleValueChange('host')}
+          margin="normal"
+        />
+        <TextValidator
+          validators={['required', 'isNumber', 'minNumber:0', 'maxNumber:65535']}
+          errorMessages={['Port is required', "Must be a number", "Must be greater than 0 ", "Max value is 65535"]}
+          name="port"
+          label="Port"
+          fullWidth
+          variant="outlined"
+          value={data.port}
+          type="number"
+          onChange={handleValueChange('port')}
+          margin="normal"
+        />
+        <TextField
+          name="username"
+          label="Username"
+          fullWidth
+          variant="outlined"
+          value={data.username}
+          onChange={handleValueChange('username')}
+          margin="normal"
+        />
+        <PasswordValidator
+          name="password"
+          label="Password"
+          fullWidth
+          variant="outlined"
+          value={data.password}
+          onChange={handleValueChange('password')}
+          margin="normal"
+        />
+        <TextField
+          name="client_id"
+          label="Client ID (optional)"
+          fullWidth
+          variant="outlined"
+          value={data.client_id}
+          onChange={handleValueChange('client_id')}
+          margin="normal"
+        />
+        <TextValidator
+          validators={['required', 'isNumber', 'minNumber:1', 'maxNumber:65535']}
+          errorMessages={['Keep alive is required', "Must be a number", "Must be greater than 0", "Max value is 65535"]}
+          name="keep_alive"
+          label="Keep Alive (seconds)"
+          fullWidth
+          variant="outlined"
+          value={data.keep_alive}
+          type="number"
+          onChange={handleValueChange('keep_alive')}
+          margin="normal"
+        />
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              checked={data.clean_session}
+              onChange={handleValueChange('clean_session')}
+              value="clean_session"
+            />
+          }
+          label="Clean Session?"
+        />
+        <TextValidator
+          validators={['required', 'isNumber', 'minNumber:1', 'maxNumber:65535']}
+          errorMessages={['Max topic length is required', "Must be a number", "Must be greater than 0", "Max value is 65535"]}
+          name="max_topic_length"
+          label="Max Topic Length"
+          fullWidth
+          variant="outlined"
+          value={data.max_topic_length}
+          type="number"
+          onChange={handleValueChange('max_topic_length')}
+          margin="normal"
+        />
+        <FormActions>
+          <FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit">
+            Save
+          </FormButton>
+          <FormButton variant="contained" color="secondary" onClick={loadData}>
+            Reset
+          </FormButton>
+        </FormActions>
+      </ValidatorForm>
+    );
+  }
+}
+
+export default MqttSettingsForm;

interface/src/mqtt/MqttStatus.ts

@@ -0,0 +1,45 @@
+import { Theme } from "@material-ui/core";
+import { MqttStatus, MqttDisconnectReason } from "./types";
+
+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"
+  }
+}

interface/src/mqtt/MqttStatusController.tsx

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+
+import {restController, RestControllerProps, RestFormLoader, SectionContent } from '../components';
+import { MQTT_STATUS_ENDPOINT } from '../api';
+
+import MqttStatusForm from './MqttStatusForm';
+import { MqttStatus } from './types';
+
+type MqttStatusControllerProps = RestControllerProps<MqttStatus>;
+
+class MqttStatusController extends Component<MqttStatusControllerProps> {
+
+  componentDidMount() {
+    this.props.loadData();
+  }
+
+  render() {
+    return (
+      <SectionContent title="MQTT Status">
+        <RestFormLoader
+          {...this.props}
+          render={formProps => <MqttStatusForm {...formProps} />}
+        />
+      </SectionContent>
+    )
+  }
+}
+
+export default restController(MQTT_STATUS_ENDPOINT, MqttStatusController);

interface/src/mqtt/MqttStatusForm.tsx

@@ -0,0 +1,83 @@
+import React, { Component, Fragment } from 'react';
+
+import { WithTheme, withTheme } from '@material-ui/core/styles';
+import { Avatar, Divider, List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core';
+
+import DeviceHubIcon from '@material-ui/icons/DeviceHub';
+import RefreshIcon from '@material-ui/icons/Refresh';
+import ReportIcon from '@material-ui/icons/Report';
+
+import { RestFormProps, FormActions, FormButton, HighlightAvatar } from '../components';
+import { mqttStatusHighlight, mqttStatus, disconnectReason } from './MqttStatus';
+import { MqttStatus } from './types';
+
+type MqttStatusFormProps = RestFormProps<MqttStatus> & WithTheme;
+
+class MqttStatusForm extends Component<MqttStatusFormProps> {
+
+  renderConnectionStatus() {
+    const { data } = this.props
+    if (data.connected) {
+      return (
+        <Fragment>
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar>#</Avatar>
+            </ListItemAvatar>
+            <ListItemText primary="Client ID" secondary={data.client_id} />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+        </Fragment>
+      );
+    }
+    return (
+      <Fragment>
+        <ListItem>
+          <ListItemAvatar>
+            <Avatar>
+              <ReportIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary="Disconnect Reason" secondary={disconnectReason(data)} />
+        </ListItem>
+        <Divider variant="inset" component="li" />
+      </Fragment>
+    );
+  }
+
+  createListItems() {
+    const { data, theme } = this.props
+    return (
+      <Fragment>
+        <ListItem>
+          <ListItemAvatar>
+            <HighlightAvatar color={mqttStatusHighlight(data, theme)}>
+              <DeviceHubIcon />
+            </HighlightAvatar>
+          </ListItemAvatar>
+          <ListItemText primary="Status" secondary={mqttStatus(data)} />
+        </ListItem>
+        <Divider variant="inset" component="li" />
+        {data.enabled && this.renderConnectionStatus()}
+      </Fragment>
+    );
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <List>
+          {this.createListItems()}
+        </List>
+        <FormActions>
+          <FormButton startIcon={<RefreshIcon />} variant="contained" color="secondary" onClick={this.props.loadData}>
+            Refresh
+          </FormButton>
+        </FormActions>
+      </Fragment>
+    );
+  }
+
+}
+
+export default withTheme(MqttStatusForm);

interface/src/mqtt/types.ts

@@ -0,0 +1,29 @@
+export enum MqttDisconnectReason {
+  TCP_DISCONNECTED = 0,
+  MQTT_UNACCEPTABLE_PROTOCOL_VERSION = 1,
+  MQTT_IDENTIFIER_REJECTED = 2,
+  MQTT_SERVER_UNAVAILABLE = 3,
+  MQTT_MALFORMED_CREDENTIALS = 4,
+  MQTT_NOT_AUTHORIZED = 5,
+  ESP8266_NOT_ENOUGH_SPACE = 6,
+  TLS_BAD_FINGERPRINT = 7
+}
+
+export interface MqttStatus {
+  enabled: boolean;
+  connected: boolean;
+  client_id: string;
+  disconnect_reason: MqttDisconnectReason;
+}
+
+export interface MqttSettings {
+  enabled: boolean;
+  host: string;
+  port: number;
+  username: string;
+  password: string;
+  client_id: string;
+  keep_alive: number;
+  clean_session: boolean;
+  max_topic_length: number;
+}

interface/src/ntp/NTPSettingsController.tsx

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+
+import {restController, RestControllerProps, RestFormLoader, SectionContent } from '../components';
+import { NTP_SETTINGS_ENDPOINT } from '../api';
+
+import NTPSettingsForm from './NTPSettingsForm';
+import { NTPSettings } from './types';
+
+type NTPSettingsControllerProps = RestControllerProps<NTPSettings>;
+
+class NTPSettingsController extends Component<NTPSettingsControllerProps> {
+
+  componentDidMount() {
+    this.props.loadData();
+  }
+
+  render() {
+    return (
+      <SectionContent title="NTP Settings" titleGutter>
+        <RestFormLoader
+          {...this.props}
+          render={formProps => <NTPSettingsForm {...formProps} />}
+        />
+      </SectionContent>
+    )
+  }
+
+}
+
+export default restController(NTP_SETTINGS_ENDPOINT, NTPSettingsController);

interface/src/ntp/NTPSettingsForm.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { TextValidator, ValidatorForm, SelectValidator } from 'react-material-ui-form-validator';
+
+import { Checkbox, MenuItem } from '@material-ui/core';
+import SaveIcon from '@material-ui/icons/Save';
+
+import { RestFormProps, FormActions, FormButton, BlockFormControlLabel } from '../components';
+import { isIP, isHostname, or } from '../validators';
+
+import { TIME_ZONES, timeZoneSelectItems, selectedTimeZone } from './TZ';
+import { NTPSettings } from './types';
+
+type NTPSettingsFormProps = RestFormProps<NTPSettings>;
+
+class NTPSettingsForm extends React.Component<NTPSettingsFormProps> {
+
+  componentDidMount() {
+    ValidatorForm.addValidationRule('isIPOrHostname', or(isIP, isHostname));
+  }
+
+  changeTimeZone = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const { data, setData } = this.props;
+    setData({
+      ...data,
+      tz_label: event.target.value,
+      tz_format: TIME_ZONES[event.target.value]
+    });
+  }
+
+  render() {
+    const { data, handleValueChange, saveData, loadData } = this.props;
+    return (
+      <ValidatorForm onSubmit={saveData}>
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              checked={data.enabled}
+              onChange={handleValueChange('enabled')}
+              value="enabled"
+            />
+          }
+          label="Enable NTP?"
+        />
+        <TextValidator
+          validators={['required', 'isIPOrHostname']}
+          errorMessages={['Server is required', "Not a valid IP address or hostname"]}
+          name="server"
+          label="Server"
+          fullWidth
+          variant="outlined"
+          value={data.server}
+          onChange={handleValueChange('server')}
+          margin="normal"
+        />
+        <SelectValidator
+          validators={['required']}
+          errorMessages={['Time zone is required']}
+          name="tz_label"
+          label="Time zone"
+          fullWidth
+          variant="outlined"
+          native="true"
+          value={selectedTimeZone(data.tz_label, data.tz_format)}
+          onChange={this.changeTimeZone}
+          margin="normal"
+        >
+          <MenuItem disabled>Time zone...</MenuItem>
+          {timeZoneSelectItems()}
+        </SelectValidator>
+        <FormActions>
+          <FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit">
+            Save
+          </FormButton>
+          <FormButton variant="contained" color="secondary" onClick={loadData}>
+            Reset
+          </FormButton>
+        </FormActions>
+      </ValidatorForm>
+    );
+  }
+}
+
+export default NTPSettingsForm;

interface/src/ntp/NTPStatus.ts

@@ -0,0 +1,26 @@
+import { Theme } from "@material-ui/core";
+import { NTPStatus, NTPSyncStatus } from "./types";
+
+export const isNtpActive = ({ status }: NTPStatus) => status === NTPSyncStatus.NTP_ACTIVE;
+
+export const ntpStatusHighlight = ({ status }: NTPStatus, theme: Theme) => {
+  switch (status) {
+    case NTPSyncStatus.NTP_INACTIVE:
+      return theme.palette.info.main;
+    case NTPSyncStatus.NTP_ACTIVE:
+      return theme.palette.success.main;
+    default:
+      return theme.palette.error.main;
+  }
+}
+
+export const ntpStatus = ({ status }: NTPStatus) => {
+  switch (status) {
+    case NTPSyncStatus.NTP_INACTIVE:
+      return "Inactive";
+    case NTPSyncStatus.NTP_ACTIVE:
+      return "Active";
+    default:
+      return "Unknown";
+  }
+}

interface/src/ntp/NTPStatusController.tsx

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+
+import { restController, RestControllerProps, RestFormLoader, SectionContent } from '../components';
+import { NTP_STATUS_ENDPOINT } from '../api';
+
+import NTPStatusForm from './NTPStatusForm';
+import { NTPStatus } from './types';
+
+type NTPStatusControllerProps = RestControllerProps<NTPStatus>;
+
+class NTPStatusController extends Component<NTPStatusControllerProps> {
+
+  componentDidMount() {
+    this.props.loadData();
+  }
+
+  render() {
+    return (
+      <SectionContent title="NTP Status">
+        <RestFormLoader
+          {...this.props}
+          render={formProps => <NTPStatusForm {...formProps} />}
+        />
+      </SectionContent>
+    );
+  }
+
+}
+
+export default restController(NTP_STATUS_ENDPOINT, NTPStatusController);

interface/src/ntp/NTPStatusForm.tsx

@@ -0,0 +1,198 @@
+import React, { Component, Fragment } from 'react';
+import moment from 'moment';
+
+import { WithTheme, withTheme } from '@material-ui/core/styles';
+import { Avatar, Divider, List, ListItem, ListItemAvatar, ListItemText, Button } from '@material-ui/core';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Box, TextField } from '@material-ui/core';
+
+import SwapVerticalCircleIcon from '@material-ui/icons/SwapVerticalCircle';
+import AccessTimeIcon from '@material-ui/icons/AccessTime';
+import DNSIcon from '@material-ui/icons/Dns';
+import UpdateIcon from '@material-ui/icons/Update';
+import AvTimerIcon from '@material-ui/icons/AvTimer';
+import RefreshIcon from '@material-ui/icons/Refresh';
+
+import { RestFormProps, FormButton, HighlightAvatar } from '../components';
+import { isNtpActive, ntpStatusHighlight, ntpStatus } from './NTPStatus';
+import { formatIsoDateTime, formatLocalDateTime } from './TimeFormat';
+import { NTPStatus, Time } from './types';
+import { redirectingAuthorizedFetch, withAuthenticatedContext, AuthenticatedContextProps } from '../authentication';
+import { TIME_ENDPOINT } from '../api';
+
+type NTPStatusFormProps = RestFormProps<NTPStatus> & WithTheme & AuthenticatedContextProps;
+
+interface NTPStatusFormState {
+  settingTime: boolean;
+  localTime: string;
+  processing: boolean;
+}
+
+class NTPStatusForm extends Component<NTPStatusFormProps, NTPStatusFormState> {
+
+  constructor(props: NTPStatusFormProps) {
+    super(props);
+    this.state = {
+      settingTime: false,
+      localTime: '',
+      processing: false
+    };
+  }
+
+  updateLocalTime = (event: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ localTime: event.target.value });
+  }
+
+  openSetTime = () => {
+    this.setState({ localTime: formatLocalDateTime(moment()), settingTime: true, });
+  }
+
+  closeSetTime = () => {
+    this.setState({ settingTime: false });
+  }
+
+  createAdjustedTime = (): Time => {
+    const currentLocalTime = moment(this.props.data.time_local);
+    const newLocalTime = moment(this.state.localTime);
+    newLocalTime.subtract(currentLocalTime.utcOffset())
+    newLocalTime.milliseconds(0);
+    newLocalTime.utc();
+    return {
+      time_utc: newLocalTime.format()
+    }
+  }
+
+  configureTime = () => {
+    this.setState({ processing: true });
+    redirectingAuthorizedFetch(TIME_ENDPOINT,
+      {
+        method: 'POST',
+        body: JSON.stringify(this.createAdjustedTime()),
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+      .then(response => {
+        if (response.status === 200) {
+          this.props.enqueueSnackbar("Time set successfully", { variant: 'success' });
+          this.setState({ processing: false, settingTime: false }, this.props.loadData);
+        } else {
+          throw Error("Error setting time, status code: " + response.status);
+        }
+      })
+      .catch(error => {
+        this.props.enqueueSnackbar(error.message || "Problem setting the time", { variant: 'error' });
+        this.setState({ processing: false, settingTime: false });
+      });
+  }
+
+  renderSetTimeDialog() {
+    return (
+      <Dialog
+        open={this.state.settingTime}
+        onClose={this.closeSetTime}
+      >
+        <DialogTitle>Set Time</DialogTitle>
+        <DialogContent dividers>
+          <Box mb={2}>Enter local date and time below to set the device's time.</Box>
+          <TextField
+            label="Local Time"
+            type="datetime-local"
+            value={this.state.localTime}
+            onChange={this.updateLocalTime}
+            disabled={this.state.processing}
+            variant="outlined"
+            fullWidth
+            InputLabelProps={{
+              shrink: true,
+            }}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button variant="contained" onClick={this.closeSetTime} color="secondary">
+            Cancel
+          </Button>
+          <Button startIcon={<AccessTimeIcon />} variant="contained" onClick={this.configureTime} disabled={this.state.processing} color="primary" autoFocus>
+            Set Time
+          </Button>
+        </DialogActions>
+      </Dialog>
+    )
+  }
+
+  render() {
+    const { data, theme } = this.props
+    const me = this.props.authenticatedContext.me;
+    return (
+      <Fragment>
+        <List>
+          <ListItem>
+            <ListItemAvatar>
+              <HighlightAvatar color={ntpStatusHighlight(data, theme)}>
+                <UpdateIcon />
+              </HighlightAvatar>
+            </ListItemAvatar>
+            <ListItemText primary="Status" secondary={ntpStatus(data)} />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+          {isNtpActive(data) && (
+            <Fragment>
+              <ListItem>
+                <ListItemAvatar>
+                  <Avatar>
+                    <DNSIcon />
+                  </Avatar>
+                </ListItemAvatar>
+                <ListItemText primary="NTP Server" secondary={data.server} />
+              </ListItem>
+              <Divider variant="inset" component="li" />
+            </Fragment>
+          )}
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar>
+                <AccessTimeIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary="Local Time" secondary={formatIsoDateTime(data.time_local)} />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar>
+                <SwapVerticalCircleIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary="UTC Time" secondary={formatIsoDateTime(data.time_utc)} />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar>
+                <AvTimerIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary="Uptime" secondary={moment.duration(data.uptime, 'seconds').humanize()} />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+        </List>
+        <Box display="flex" flexWrap="wrap">
+          <Box flexGrow={1} padding={1}>
+            <FormButton startIcon={<RefreshIcon />} variant="contained" color="secondary" onClick={this.props.loadData}>
+              Refresh
+            </FormButton>
+          </Box>
+          {me.admin && !isNtpActive(data) && (
+            <Box flexWrap="none" padding={1} whiteSpace="nowrap">
+              <Button onClick={this.openSetTime} variant="contained" color="primary" startIcon={<AccessTimeIcon />}>
+                Set Time
+              </Button>
+            </Box>
+          )}
+        </Box>
+        {this.renderSetTimeDialog()}
+      </Fragment>
+    );
+  }
+}
+
+export default withAuthenticatedContext(withTheme(NTPStatusForm));

interface/src/ntp/NetworkTime.tsx

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import { Redirect, Switch, RouteComponentProps } from 'react-router-dom'
+
+import { Tabs, Tab } from '@material-ui/core';
+
+import { withAuthenticatedContext, AuthenticatedContextProps, AuthenticatedRoute } from '../authentication';
+import { MenuAppBar } from '../components';
+
+import NTPStatusController from './NTPStatusController';
+import NTPSettingsController from './NTPSettingsController';
+
+type NetworkTimeProps = AuthenticatedContextProps & RouteComponentProps;
+
+class NetworkTime extends Component<NetworkTimeProps> {
+
+  handleTabChange = (event: React.ChangeEvent<{}>, path: string) => {
+    this.props.history.push(path);
+  };
+
+  render() {
+    const { authenticatedContext } = this.props;
+    return (
+      <MenuAppBar sectionTitle="Network Time">
+        <Tabs value={this.props.match.url} onChange={this.handleTabChange} variant="fullWidth">
+          <Tab value="/ntp/status" label="NTP Status" />
+          <Tab value="/ntp/settings" label="NTP Settings" disabled={!authenticatedContext.me.admin} />
+        </Tabs>
+        <Switch>
+          <AuthenticatedRoute exact path="/ntp/status" component={NTPStatusController} />
+          <AuthenticatedRoute exact path="/ntp/settings" component={NTPSettingsController} />
+          <Redirect to="/ntp/status" />
+        </Switch>
+      </MenuAppBar>
+    )
+  }
+
+}
+
+export default withAuthenticatedContext(NetworkTime)

interface/src/ntp/TZ.tsx

@@ -0,0 +1,479 @@
+import React from 'react';
+import MenuItem from '@material-ui/core/MenuItem';
+
+type TimeZones = { 
+  [name: string]: string 
+};
+
+export const TIME_ZONES: TimeZones = {
+  "Africa/Abidjan": "GMT0",
+  "Africa/Accra": "GMT0",
+  "Africa/Addis_Ababa": "EAT-3",
+  "Africa/Algiers": "CET-1",
+  "Africa/Asmara": "EAT-3",
+  "Africa/Bamako": "GMT0",
+  "Africa/Bangui": "WAT-1",
+  "Africa/Banjul": "GMT0",
+  "Africa/Bissau": "GMT0",
+  "Africa/Blantyre": "CAT-2",
+  "Africa/Brazzaville": "WAT-1",
+  "Africa/Bujumbura": "CAT-2",
+  "Africa/Cairo": "EET-2",
+  "Africa/Casablanca": "<+01>-1",
+  "Africa/Ceuta": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Africa/Conakry": "GMT0",
+  "Africa/Dakar": "GMT0",
+  "Africa/Dar_es_Salaam": "EAT-3",
+  "Africa/Djibouti": "EAT-3",
+  "Africa/Douala": "WAT-1",
+  "Africa/El_Aaiun": "<+01>-1",
+  "Africa/Freetown": "GMT0",
+  "Africa/Gaborone": "CAT-2",
+  "Africa/Harare": "CAT-2",
+  "Africa/Johannesburg": "SAST-2",
+  "Africa/Juba": "EAT-3",
+  "Africa/Kampala": "EAT-3",
+  "Africa/Khartoum": "CAT-2",
+  "Africa/Kigali": "CAT-2",
+  "Africa/Kinshasa": "WAT-1",
+  "Africa/Lagos": "WAT-1",
+  "Africa/Libreville": "WAT-1",
+  "Africa/Lome": "GMT0",
+  "Africa/Luanda": "WAT-1",
+  "Africa/Lubumbashi": "CAT-2",
+  "Africa/Lusaka": "CAT-2",
+  "Africa/Malabo": "WAT-1",
+  "Africa/Maputo": "CAT-2",
+  "Africa/Maseru": "SAST-2",
+  "Africa/Mbabane": "SAST-2",
+  "Africa/Mogadishu": "EAT-3",
+  "Africa/Monrovia": "GMT0",
+  "Africa/Nairobi": "EAT-3",
+  "Africa/Ndjamena": "WAT-1",
+  "Africa/Niamey": "WAT-1",
+  "Africa/Nouakchott": "GMT0",
+  "Africa/Ouagadougou": "GMT0",
+  "Africa/Porto-Novo": "WAT-1",
+  "Africa/Sao_Tome": "GMT0",
+  "Africa/Tripoli": "EET-2",
+  "Africa/Tunis": "CET-1",
+  "Africa/Windhoek": "CAT-2",
+  "America/Adak": "HST10HDT,M3.2.0,M11.1.0",
+  "America/Anchorage": "AKST9AKDT,M3.2.0,M11.1.0",
+  "America/Anguilla": "AST4",
+  "America/Antigua": "AST4",
+  "America/Araguaina": "<-03>3",
+  "America/Argentina/Buenos_Aires": "<-03>3",
+  "America/Argentina/Catamarca": "<-03>3",
+  "America/Argentina/Cordoba": "<-03>3",
+  "America/Argentina/Jujuy": "<-03>3",
+  "America/Argentina/La_Rioja": "<-03>3",
+  "America/Argentina/Mendoza": "<-03>3",
+  "America/Argentina/Rio_Gallegos": "<-03>3",
+  "America/Argentina/Salta": "<-03>3",
+  "America/Argentina/San_Juan": "<-03>3",
+  "America/Argentina/San_Luis": "<-03>3",
+  "America/Argentina/Tucuman": "<-03>3",
+  "America/Argentina/Ushuaia": "<-03>3",
+  "America/Aruba": "AST4",
+  "America/Asuncion": "<-04>4<-03>,M10.1.0/0,M3.4.0/0",
+  "America/Atikokan": "EST5",
+  "America/Bahia": "<-03>3",
+  "America/Bahia_Banderas": "CST6CDT,M4.1.0,M10.5.0",
+  "America/Barbados": "AST4",
+  "America/Belem": "<-03>3",
+  "America/Belize": "CST6",
+  "America/Blanc-Sablon": "AST4",
+  "America/Boa_Vista": "<-04>4",
+  "America/Bogota": "<-05>5",
+  "America/Boise": "MST7MDT,M3.2.0,M11.1.0",
+  "America/Cambridge_Bay": "MST7MDT,M3.2.0,M11.1.0",
+  "America/Campo_Grande": "<-04>4",
+  "America/Cancun": "EST5",
+  "America/Caracas": "<-04>4",
+  "America/Cayenne": "<-03>3",
+  "America/Cayman": "EST5",
+  "America/Chicago": "CST6CDT,M3.2.0,M11.1.0",
+  "America/Chihuahua": "MST7MDT,M4.1.0,M10.5.0",
+  "America/Costa_Rica": "CST6",
+  "America/Creston": "MST7",
+  "America/Cuiaba": "<-04>4",
+  "America/Curacao": "AST4",
+  "America/Danmarkshavn": "GMT0",
+  "America/Dawson": "PST8PDT,M3.2.0,M11.1.0",
+  "America/Dawson_Creek": "MST7",
+  "America/Denver": "MST7MDT,M3.2.0,M11.1.0",
+  "America/Detroit": "EST5EDT,M3.2.0,M11.1.0",
+  "America/Dominica": "AST4",
+  "America/Edmonton": "MST7MDT,M3.2.0,M11.1.0",
+  "America/Eirunepe": "<-05>5",
+  "America/El_Salvador": "CST6",
+  "America/Fortaleza": "<-03>3",
+  "America/Fort_Nelson": "MST7",
+  "America/Glace_Bay": "AST4ADT,M3.2.0,M11.1.0",
+  "America/Godthab": "<-03>3<-02>,M3.5.0/-2,M10.5.0/-1",
+  "America/Goose_Bay": "AST4ADT,M3.2.0,M11.1.0",
+  "America/Grand_Turk": "EST5EDT,M3.2.0,M11.1.0",
+  "America/Grenada": "AST4",
+  "America/Guadeloupe": "AST4",
+  "America/Guatemala": "CST6",
+  "America/Guayaquil": "<-05>5",
+  "America/Guyana": "<-04>4",
+  "America/Halifax": "AST4ADT,M3.2.0,M11.1.0",
+  "America/Havana": "CST5CDT,M3.2.0/0,M11.1.0/1",
+  "America/Hermosillo": "MST7",
+  "America/Indiana/Indianapolis": "EST5EDT,M3.2.0,M11.1.0",
+  "America/Indiana/Knox": "CST6CDT,M3.2.0,M11.1.0",
+  "America/Indiana/Marengo": "EST5EDT,M3.2.0,M11.1.0",
+  "America/Indiana/Petersburg": "EST5EDT,M3.2.0,M11.1.0",
+  "America/Indiana/Tell_City": "CST6CDT,M3.2.0,M11.1.0",
+  "America/Indiana/Vevay": "EST5EDT,M3.2.0,M11.1.0",
+  "America/Indiana/Vincennes": "EST5EDT,M3.2.0,M11.1.0",
+  "America/Indiana/Winamac": "EST5EDT,M3.2.0,M11.1.0",
+  "America/Inuvik": "MST7MDT,M3.2.0,M11.1.0",
+  "America/Iqaluit": "EST5EDT,M3.2.0,M11.1.0",
+  "America/Jamaica": "EST5",
+  "America/Juneau": "AKST9AKDT,M3.2.0,M11.1.0",
+  "America/Kentucky/Louisville": "EST5EDT,M3.2.0,M11.1.0",
+  "America/Kentucky/Monticello": "EST5EDT,M3.2.0,M11.1.0",
+  "America/Kralendijk": "AST4",
+  "America/La_Paz": "<-04>4",
+  "America/Lima": "<-05>5",
+  "America/Los_Angeles": "PST8PDT,M3.2.0,M11.1.0",
+  "America/Lower_Princes": "AST4",
+  "America/Maceio": "<-03>3",
+  "America/Managua": "CST6",
+  "America/Manaus": "<-04>4",
+  "America/Marigot": "AST4",
+  "America/Martinique": "AST4",
+  "America/Matamoros": "CST6CDT,M3.2.0,M11.1.0",
+  "America/Mazatlan": "MST7MDT,M4.1.0,M10.5.0",
+  "America/Menominee": "CST6CDT,M3.2.0,M11.1.0",
+  "America/Merida": "CST6CDT,M4.1.0,M10.5.0",
+  "America/Metlakatla": "AKST9AKDT,M3.2.0,M11.1.0",
+  "America/Mexico_City": "CST6CDT,M4.1.0,M10.5.0",
+  "America/Miquelon": "<-03>3<-02>,M3.2.0,M11.1.0",
+  "America/Moncton": "AST4ADT,M3.2.0,M11.1.0",
+  "America/Monterrey": "CST6CDT,M4.1.0,M10.5.0",
+  "America/Montevideo": "<-03>3",
+  "America/Montreal": "EST5EDT,M3.2.0,M11.1.0",
+  "America/Montserrat": "AST4",
+  "America/Nassau": "EST5EDT,M3.2.0,M11.1.0",
+  "America/New_York": "EST5EDT,M3.2.0,M11.1.0",
+  "America/Nipigon": "EST5EDT,M3.2.0,M11.1.0",
+  "America/Nome": "AKST9AKDT,M3.2.0,M11.1.0",
+  "America/Noronha": "<-02>2",
+  "America/North_Dakota/Beulah": "CST6CDT,M3.2.0,M11.1.0",
+  "America/North_Dakota/Center": "CST6CDT,M3.2.0,M11.1.0",
+  "America/North_Dakota/New_Salem": "CST6CDT,M3.2.0,M11.1.0",
+  "America/Ojinaga": "MST7MDT,M3.2.0,M11.1.0",
+  "America/Panama": "EST5",
+  "America/Pangnirtung": "EST5EDT,M3.2.0,M11.1.0",
+  "America/Paramaribo": "<-03>3",
+  "America/Phoenix": "MST7",
+  "America/Port-au-Prince": "EST5EDT,M3.2.0,M11.1.0",
+  "America/Port_of_Spain": "AST4",
+  "America/Porto_Velho": "<-04>4",
+  "America/Puerto_Rico": "AST4",
+  "America/Punta_Arenas": "<-03>3",
+  "America/Rainy_River": "CST6CDT,M3.2.0,M11.1.0",
+  "America/Rankin_Inlet": "CST6CDT,M3.2.0,M11.1.0",
+  "America/Recife": "<-03>3",
+  "America/Regina": "CST6",
+  "America/Resolute": "CST6CDT,M3.2.0,M11.1.0",
+  "America/Rio_Branco": "<-05>5",
+  "America/Santarem": "<-03>3",
+  "America/Santiago": "<-04>4<-03>,M9.1.6/24,M4.1.6/24",
+  "America/Santo_Domingo": "AST4",
+  "America/Sao_Paulo": "<-03>3",
+  "America/Scoresbysund": "<-01>1<+00>,M3.5.0/0,M10.5.0/1",
+  "America/Sitka": "AKST9AKDT,M3.2.0,M11.1.0",
+  "America/St_Barthelemy": "AST4",
+  "America/St_Johns": "NST3:30NDT,M3.2.0,M11.1.0",
+  "America/St_Kitts": "AST4",
+  "America/St_Lucia": "AST4",
+  "America/St_Thomas": "AST4",
+  "America/St_Vincent": "AST4",
+  "America/Swift_Current": "CST6",
+  "America/Tegucigalpa": "CST6",
+  "America/Thule": "AST4ADT,M3.2.0,M11.1.0",
+  "America/Thunder_Bay": "EST5EDT,M3.2.0,M11.1.0",
+  "America/Tijuana": "PST8PDT,M3.2.0,M11.1.0",
+  "America/Toronto": "EST5EDT,M3.2.0,M11.1.0",
+  "America/Tortola": "AST4",
+  "America/Vancouver": "PST8PDT,M3.2.0,M11.1.0",
+  "America/Whitehorse": "PST8PDT,M3.2.0,M11.1.0",
+  "America/Winnipeg": "CST6CDT,M3.2.0,M11.1.0",
+  "America/Yakutat": "AKST9AKDT,M3.2.0,M11.1.0",
+  "America/Yellowknife": "MST7MDT,M3.2.0,M11.1.0",
+  "Antarctica/Casey": "<+08>-8",
+  "Antarctica/Davis": "<+07>-7",
+  "Antarctica/DumontDUrville": "<+10>-10",
+  "Antarctica/Macquarie": "<+11>-11",
+  "Antarctica/Mawson": "<+05>-5",
+  "Antarctica/McMurdo": "NZST-12NZDT,M9.5.0,M4.1.0/3",
+  "Antarctica/Palmer": "<-03>3",
+  "Antarctica/Rothera": "<-03>3",
+  "Antarctica/Syowa": "<+03>-3",
+  "Antarctica/Troll": "<+00>0<+02>-2,M3.5.0/1,M10.5.0/3",
+  "Antarctica/Vostok": "<+06>-6",
+  "Arctic/Longyearbyen": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Asia/Aden": "<+03>-3",
+  "Asia/Almaty": "<+06>-6",
+  "Asia/Amman": "EET-2EEST,M3.5.4/24,M10.5.5/1",
+  "Asia/Anadyr": "<+12>-12",
+  "Asia/Aqtau": "<+05>-5",
+  "Asia/Aqtobe": "<+05>-5",
+  "Asia/Ashgabat": "<+05>-5",
+  "Asia/Atyrau": "<+05>-5",
+  "Asia/Baghdad": "<+03>-3",
+  "Asia/Bahrain": "<+03>-3",
+  "Asia/Baku": "<+04>-4",
+  "Asia/Bangkok": "<+07>-7",
+  "Asia/Barnaul": "<+07>-7",
+  "Asia/Beirut": "EET-2EEST,M3.5.0/0,M10.5.0/0",
+  "Asia/Bishkek": "<+06>-6",
+  "Asia/Brunei": "<+08>-8",
+  "Asia/Chita": "<+09>-9",
+  "Asia/Choibalsan": "<+08>-8",
+  "Asia/Colombo": "<+0530>-5:30",
+  "Asia/Damascus": "EET-2EEST,M3.5.5/0,M10.5.5/0",
+  "Asia/Dhaka": "<+06>-6",
+  "Asia/Dili": "<+09>-9",
+  "Asia/Dubai": "<+04>-4",
+  "Asia/Dushanbe": "<+05>-5",
+  "Asia/Famagusta": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+  "Asia/Gaza": "EET-2EEST,M3.5.5/0,M10.5.6/1",
+  "Asia/Hebron": "EET-2EEST,M3.5.5/0,M10.5.6/1",
+  "Asia/Ho_Chi_Minh": "<+07>-7",
+  "Asia/Hong_Kong": "HKT-8",
+  "Asia/Hovd": "<+07>-7",
+  "Asia/Irkutsk": "<+08>-8",
+  "Asia/Jakarta": "WIB-7",
+  "Asia/Jayapura": "WIT-9",
+  "Asia/Jerusalem": "IST-2IDT,M3.4.4/26,M10.5.0",
+  "Asia/Kabul": "<+0430>-4:30",
+  "Asia/Kamchatka": "<+12>-12",
+  "Asia/Karachi": "PKT-5",
+  "Asia/Kathmandu": "<+0545>-5:45",
+  "Asia/Khandyga": "<+09>-9",
+  "Asia/Kolkata": "IST-5:30",
+  "Asia/Krasnoyarsk": "<+07>-7",
+  "Asia/Kuala_Lumpur": "<+08>-8",
+  "Asia/Kuching": "<+08>-8",
+  "Asia/Kuwait": "<+03>-3",
+  "Asia/Macau": "CST-8",
+  "Asia/Magadan": "<+11>-11",
+  "Asia/Makassar": "WITA-8",
+  "Asia/Manila": "PST-8",
+  "Asia/Muscat": "<+04>-4",
+  "Asia/Nicosia": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+  "Asia/Novokuznetsk": "<+07>-7",
+  "Asia/Novosibirsk": "<+07>-7",
+  "Asia/Omsk": "<+06>-6",
+  "Asia/Oral": "<+05>-5",
+  "Asia/Phnom_Penh": "<+07>-7",
+  "Asia/Pontianak": "WIB-7",
+  "Asia/Pyongyang": "KST-9",
+  "Asia/Qatar": "<+03>-3",
+  "Asia/Qyzylorda": "<+05>-5",
+  "Asia/Riyadh": "<+03>-3",
+  "Asia/Sakhalin": "<+11>-11",
+  "Asia/Samarkand": "<+05>-5",
+  "Asia/Seoul": "KST-9",
+  "Asia/Shanghai": "CST-8",
+  "Asia/Singapore": "<+08>-8",
+  "Asia/Srednekolymsk": "<+11>-11",
+  "Asia/Taipei": "CST-8",
+  "Asia/Tashkent": "<+05>-5",
+  "Asia/Tbilisi": "<+04>-4",
+  "Asia/Tehran": "<+0330>-3:30<+0430>,J79/24,J263/24",
+  "Asia/Thimphu": "<+06>-6",
+  "Asia/Tokyo": "JST-9",
+  "Asia/Tomsk": "<+07>-7",
+  "Asia/Ulaanbaatar": "<+08>-8",
+  "Asia/Urumqi": "<+06>-6",
+  "Asia/Ust-Nera": "<+10>-10",
+  "Asia/Vientiane": "<+07>-7",
+  "Asia/Vladivostok": "<+10>-10",
+  "Asia/Yakutsk": "<+09>-9",
+  "Asia/Yangon": "<+0630>-6:30",
+  "Asia/Yekaterinburg": "<+05>-5",
+  "Asia/Yerevan": "<+04>-4",
+  "Atlantic/Azores": "<-01>1<+00>,M3.5.0/0,M10.5.0/1",
+  "Atlantic/Bermuda": "AST4ADT,M3.2.0,M11.1.0",
+  "Atlantic/Canary": "WET0WEST,M3.5.0/1,M10.5.0",
+  "Atlantic/Cape_Verde": "<-01>1",
+  "Atlantic/Faroe": "WET0WEST,M3.5.0/1,M10.5.0",
+  "Atlantic/Madeira": "WET0WEST,M3.5.0/1,M10.5.0",
+  "Atlantic/Reykjavik": "GMT0",
+  "Atlantic/South_Georgia": "<-02>2",
+  "Atlantic/Stanley": "<-03>3",
+  "Atlantic/St_Helena": "GMT0",
+  "Australia/Adelaide": "ACST-9:30ACDT,M10.1.0,M4.1.0/3",
+  "Australia/Brisbane": "AEST-10",
+  "Australia/Broken_Hill": "ACST-9:30ACDT,M10.1.0,M4.1.0/3",
+  "Australia/Currie": "AEST-10AEDT,M10.1.0,M4.1.0/3",
+  "Australia/Darwin": "ACST-9:30",
+  "Australia/Eucla": "<+0845>-8:45",
+  "Australia/Hobart": "AEST-10AEDT,M10.1.0,M4.1.0/3",
+  "Australia/Lindeman": "AEST-10",
+  "Australia/Lord_Howe": "<+1030>-10:30<+11>-11,M10.1.0,M4.1.0",
+  "Australia/Melbourne": "AEST-10AEDT,M10.1.0,M4.1.0/3",
+  "Australia/Perth": "AWST-8",
+  "Australia/Sydney": "AEST-10AEDT,M10.1.0,M4.1.0/3",
+  "Europe/Amsterdam": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Andorra": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Astrakhan": "<+04>-4",
+  "Europe/Athens": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+  "Europe/Belgrade": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Berlin": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Bratislava": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Brussels": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Bucharest": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+  "Europe/Budapest": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Busingen": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Chisinau": "EET-2EEST,M3.5.0,M10.5.0/3",
+  "Europe/Copenhagen": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Dublin": "IST-1GMT0,M10.5.0,M3.5.0/1",
+  "Europe/Gibraltar": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Guernsey": "GMT0BST,M3.5.0/1,M10.5.0",
+  "Europe/Helsinki": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+  "Europe/Isle_of_Man": "GMT0BST,M3.5.0/1,M10.5.0",
+  "Europe/Istanbul": "<+03>-3",
+  "Europe/Jersey": "GMT0BST,M3.5.0/1,M10.5.0",
+  "Europe/Kaliningrad": "EET-2",
+  "Europe/Kiev": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+  "Europe/Kirov": "<+03>-3",
+  "Europe/Lisbon": "WET0WEST,M3.5.0/1,M10.5.0",
+  "Europe/Ljubljana": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/London": "GMT0BST,M3.5.0/1,M10.5.0",
+  "Europe/Luxembourg": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Madrid": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Malta": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Mariehamn": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+  "Europe/Minsk": "<+03>-3",
+  "Europe/Monaco": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Moscow": "MSK-3",
+  "Europe/Oslo": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Paris": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Podgorica": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Prague": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Riga": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+  "Europe/Rome": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Samara": "<+04>-4",
+  "Europe/San_Marino": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Sarajevo": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Saratov": "<+04>-4",
+  "Europe/Simferopol": "MSK-3",
+  "Europe/Skopje": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Sofia": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+  "Europe/Stockholm": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Tallinn": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+  "Europe/Tirane": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Ulyanovsk": "<+04>-4",
+  "Europe/Uzhgorod": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+  "Europe/Vaduz": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Vatican": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Vienna": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Vilnius": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+  "Europe/Volgograd": "<+04>-4",
+  "Europe/Warsaw": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Zagreb": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Europe/Zaporozhye": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+  "Europe/Zurich": "CET-1CEST,M3.5.0,M10.5.0/3",
+  "Indian/Antananarivo": "EAT-3",
+  "Indian/Chagos": "<+06>-6",
+  "Indian/Christmas": "<+07>-7",
+  "Indian/Cocos": "<+0630>-6:30",
+  "Indian/Comoro": "EAT-3",
+  "Indian/Kerguelen": "<+05>-5",
+  "Indian/Mahe": "<+04>-4",
+  "Indian/Maldives": "<+05>-5",
+  "Indian/Mauritius": "<+04>-4",
+  "Indian/Mayotte": "EAT-3",
+  "Indian/Reunion": "<+04>-4",
+  "Pacific/Apia": "<+13>-13<+14>,M9.5.0/3,M4.1.0/4",
+  "Pacific/Auckland": "NZST-12NZDT,M9.5.0,M4.1.0/3",
+  "Pacific/Bougainville": "<+11>-11",
+  "Pacific/Chatham": "<+1245>-12:45<+1345>,M9.5.0/2:45,M4.1.0/3:45",
+  "Pacific/Chuuk": "<+10>-10",
+  "Pacific/Easter": "<-06>6<-05>,M9.1.6/22,M4.1.6/22",
+  "Pacific/Efate": "<+11>-11",
+  "Pacific/Enderbury": "<+13>-13",
+  "Pacific/Fakaofo": "<+13>-13",
+  "Pacific/Fiji": "<+12>-12<+13>,M11.2.0,M1.2.3/99",
+  "Pacific/Funafuti": "<+12>-12",
+  "Pacific/Galapagos": "<-06>6",
+  "Pacific/Gambier": "<-09>9",
+  "Pacific/Guadalcanal": "<+11>-11",
+  "Pacific/Guam": "ChST-10",
+  "Pacific/Honolulu": "HST10",
+  "Pacific/Kiritimati": "<+14>-14",
+  "Pacific/Kosrae": "<+11>-11",
+  "Pacific/Kwajalein": "<+12>-12",
+  "Pacific/Majuro": "<+12>-12",
+  "Pacific/Marquesas": "<-0930>9:30",
+  "Pacific/Midway": "SST11",
+  "Pacific/Nauru": "<+12>-12",
+  "Pacific/Niue": "<-11>11",
+  "Pacific/Norfolk": "<+11>-11<+12>,M10.1.0,M4.1.0/3",
+  "Pacific/Noumea": "<+11>-11",
+  "Pacific/Pago_Pago": "SST11",
+  "Pacific/Palau": "<+09>-9",
+  "Pacific/Pitcairn": "<-08>8",
+  "Pacific/Pohnpei": "<+11>-11",
+  "Pacific/Port_Moresby": "<+10>-10",
+  "Pacific/Rarotonga": "<-10>10",
+  "Pacific/Saipan": "ChST-10",
+  "Pacific/Tahiti": "<-10>10",
+  "Pacific/Tarawa": "<+12>-12",
+  "Pacific/Tongatapu": "<+13>-13",
+  "Pacific/Wake": "<+12>-12",
+  "Pacific/Wallis": "<+12>-12",
+  "Etc/GMT": "GMT0",
+  "Etc/GMT-0": "GMT0",
+  "Etc/GMT-1": "<+01>-1",
+  "Etc/GMT-2": "<+02>-2",
+  "Etc/GMT-3": "<+03>-3",
+  "Etc/GMT-4": "<+04>-4",
+  "Etc/GMT-5": "<+05>-5",
+  "Etc/GMT-6": "<+06>-6",
+  "Etc/GMT-7": "<+07>-7",
+  "Etc/GMT-8": "<+08>-8",
+  "Etc/GMT-9": "<+09>-9",
+  "Etc/GMT-10": "<+10>-10",
+  "Etc/GMT-11": "<+11>-11",
+  "Etc/GMT-12": "<+12>-12",
+  "Etc/GMT-13": "<+13>-13",
+  "Etc/GMT-14": "<+14>-14",
+  "Etc/GMT0": "GMT0",
+  "Etc/GMT+0": "GMT0",
+  "Etc/GMT+1": "<-01>1",
+  "Etc/GMT+2": "<-02>2",
+  "Etc/GMT+3": "<-03>3",
+  "Etc/GMT+4": "<-04>4",
+  "Etc/GMT+5": "<-05>5",
+  "Etc/GMT+6": "<-06>6",
+  "Etc/GMT+7": "<-07>7",
+  "Etc/GMT+8": "<-08>8",
+  "Etc/GMT+9": "<-09>9",
+  "Etc/GMT+10": "<-10>10",
+  "Etc/GMT+11": "<-11>11",
+  "Etc/GMT+12": "<-12>12",
+  "Etc/UCT": "UTC0",
+  "Etc/UTC": "UTC0",
+  "Etc/Greenwich": "GMT0",
+  "Etc/Universal": "UTC0",
+  "Etc/Zulu": "UTC0"
+}
+
+export function selectedTimeZone(label: string, format: string) {
+  return TIME_ZONES[label] === format ? label : undefined;
+}
+
+export function timeZoneSelectItems() {
+  return Object.keys(TIME_ZONES).map(label => (
+    <MenuItem key={label} value={label}>{label}</MenuItem>
+  ));
+}

interface/src/ntp/TimeFormat.ts

@@ -0,0 +1,5 @@
+import moment, { Moment } from 'moment';
+
+export const formatIsoDateTime = (isoDateString: string) => moment.parseZone(isoDateString).format('ll @ HH:mm:ss');
+
+export const formatLocalDateTime = (moment: Moment) => moment.format('YYYY-MM-DDTHH:mm');

interface/src/ntp/types.ts

@@ -0,0 +1,23 @@
+export enum NTPSyncStatus {
+  NTP_INACTIVE = 0,
+  NTP_ACTIVE = 1
+}
+
+export interface NTPStatus {
+  status: NTPSyncStatus;
+  time_utc: string;
+  time_local: string;
+  server: string;
+  uptime: number;
+}
+
+export interface NTPSettings {
+  enabled: boolean;
+  server: string;
+  tz_label: string;
+  tz_format: string;
+}
+
+export interface Time {
+  time_utc: string;
+}

interface/src/project/EMSESP.tsx

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import { Redirect, Switch, RouteComponentProps } from 'react-router-dom'
+
+import { Tabs, Tab } from '@material-ui/core';
+
+import { PROJECT_PATH } from '../api';
+import { MenuAppBar } from '../components';
+import { AuthenticatedRoute } from '../authentication';
+
+import EMSESPSettingsController from './EMSESPSettingsController';
+import EMSESPStatusController from './EMSESPStatusController';
+
+class EMSESP extends Component<RouteComponentProps> {
+
+  handleTabChange = (event: React.ChangeEvent<{}>, path: string) => {
+    this.props.history.push(path);
+  };
+
+  render() {
+    return (
+      <MenuAppBar sectionTitle="EMS-ESP">
+        <Tabs value={this.props.match.url} onChange={this.handleTabChange} variant="fullWidth">
+          <Tab value={`/${PROJECT_PATH}/status`} label="EMS-ESP Status" />
+          <Tab value={`/${PROJECT_PATH}/settings`} label="EMS-ESP Settings" />
+        </Tabs>
+        <Switch>
+          <AuthenticatedRoute exact path={`/${PROJECT_PATH}/status`} component={EMSESPStatusController} />
+          <AuthenticatedRoute exact path={`/${PROJECT_PATH}/settings`} component={EMSESPSettingsController} />
+          <Redirect to={`/${PROJECT_PATH}/status`} />
+        </Switch>
+      </MenuAppBar>
+
+    )
+  }
+
+}
+
+export default EMSESP;

interface/src/project/EMSESPSettingsController.tsx

@@ -0,0 +1,180 @@
+import React, { Component, Fragment } from 'react';
+import { ValidatorForm, TextValidator, SelectValidator } from 'react-material-ui-form-validator';
+
+import { Checkbox, Typography, Box } from '@material-ui/core';
+import SaveIcon from '@material-ui/icons/Save';
+import MenuItem from '@material-ui/core/MenuItem';
+
+import { ENDPOINT_ROOT } from '../api';
+import { restController, RestControllerProps, RestFormLoader, RestFormProps, FormActions, FormButton, BlockFormControlLabel, SectionContent } from '../components';
+
+import { isIP, isHostname, or } from '../validators';
+
+import { EMSESPSettings } from './types';
+
+export const EMSESP_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "emsespSettings";
+
+type EMSESPSettingsControllerProps = RestControllerProps<EMSESPSettings>;
+
+class EMSESPSettingsController extends Component<EMSESPSettingsControllerProps> {
+
+    componentDidMount() {
+        ValidatorForm.addValidationRule('isIPOrHostname', or(isIP, isHostname));
+        this.props.loadData();
+    }
+
+    render() {
+        return (
+            <SectionContent title='EMS-ESP Settings' titleGutter>
+                <RestFormLoader
+                    {...this.props}
+                    render={props => (
+                        <EMSESPSettingsControllerForm {...props} />
+                    )}
+                />
+            </SectionContent>
+        )
+    }
+
+}
+
+export default restController(EMSESP_SETTINGS_ENDPOINT, EMSESPSettingsController);
+
+type EMSESPSettingsControllerFormProps = RestFormProps<EMSESPSettings>;
+
+function EMSESPSettingsControllerForm(props: EMSESPSettingsControllerFormProps) {
+    const { data, saveData, loadData, handleValueChange } = props;
+    return (
+        <ValidatorForm onSubmit={saveData}>
+            <Box bgcolor="primary.main" color="primary.contrastText" p={2} mt={2} mb={2}>
+                <Typography variant="body1">
+                    Customize EMS-ESP by editing the default settings here. Refer to the <a href="https://emsesp.github.io/docs/#/">Wiki</a> for assistance.
+                </Typography>
+            </Box>
+            <TextValidator
+                validators={['required', 'isNumber', 'minNumber:1', 'maxNumber:255']}
+                errorMessages={['TX mode is required', "Must be a number", "Must be greater than 0", "Max value is 255"]}
+                name="tx_mode"
+                label="Tx mode"
+                fullWidth
+                variant="outlined"
+                value={data.tx_mode}
+                type="number"
+                onChange={handleValueChange('tx_mode')}
+                margin="normal"
+            />
+            <BlockFormControlLabel
+                control={
+                    <Checkbox
+                        checked={data.system_heartbeat}
+                        onChange={handleValueChange('system_heartbeat')}
+                        value="system_heartbeat"
+                    />
+                }
+                label="MQTT heartbeat"
+            />
+            <SelectValidator name="mqtt_format"
+                label="MQTT format"
+                value={data.mqtt_format}
+                fullWidth
+                variant="outlined"
+                onChange={handleValueChange('mqtt_format')}
+                margin="normal">
+                <MenuItem value={1}>Single</MenuItem>
+                <MenuItem value={2}>Nested</MenuItem>
+                <MenuItem value={3}>Home Assistant</MenuItem>
+                <MenuItem value={4}>Custom</MenuItem>
+            </SelectValidator>
+            <SelectValidator name="mqtt_qos"
+                label="MQTT QoS"
+                value={data.mqtt_qos}
+                fullWidth
+                variant="outlined"
+                onChange={handleValueChange('mqtt_qos')}
+                margin="normal">
+                <MenuItem value={0}>0</MenuItem>
+                <MenuItem value={1}>1</MenuItem>
+                <MenuItem value={2}>2</MenuItem>
+            </SelectValidator>
+            <TextValidator
+                validators={['required', 'isNumber', 'minNumber:1', 'maxNumber:65535']}
+                errorMessages={['Keep alive is required', "Must be a number", "Must be greater than 0", "Max value is 65535"]}
+                name="publish_time"
+                label="MQTT Publish time (seconds)"
+                fullWidth
+                variant="outlined"
+                value={data.publish_time}
+                type="number"
+                onChange={handleValueChange('publish_time')}
+                margin="normal"
+            />
+            <SelectValidator name="syslog_level"
+                label="Syslog log level"
+                value={data.syslog_level}
+                fullWidth
+                variant="outlined"
+                onChange={handleValueChange('syslog_level')}
+                margin="normal">
+                <MenuItem value={-1}>OFF</MenuItem>
+                <MenuItem value={3}>ERR</MenuItem>
+                <MenuItem value={6}>INFO</MenuItem>
+                <MenuItem value={7}>DEBUG</MenuItem>
+            </SelectValidator>
+            <BlockFormControlLabel
+                control={
+                    <Checkbox
+                        checked={data.shower_timer}
+                        onChange={handleValueChange('shower_timer')}
+                        value="shower_timer"
+                    />
+                }
+                label="Shower Timer"
+            />
+            <BlockFormControlLabel
+                control={
+                    <Checkbox
+                        checked={data.shower_alert}
+                        onChange={handleValueChange('shower_alert')}
+                        value="shower_alert"
+                    />
+                }
+                label="Shower Alert"
+            />
+            {data.syslog_level !== -1 &&
+                <Fragment>
+                    <TextValidator
+                        validators={['isIPOrHostname']}
+                        errorMessages={["Not a valid IP address or hostname"]}
+                        name="syslog_host"
+                        label="Syslog IP/Host"
+                        fullWidth
+                        variant="outlined"
+                        value={data.syslog_host}
+                        onChange={handleValueChange('syslog_host')}
+                        margin="normal"
+                    />
+                    <TextValidator
+                        validators={['required', 'isNumber', 'minNumber:1', 'maxNumber:65535']}
+                        errorMessages={['Keep alive is required', "Must be a number", "Must be greater than 0", "Max value is 65535"]}
+                        name="syslog_mark_interval"
+                        label="Syslog mark interval (seconds)"
+                        fullWidth
+                        variant="outlined"
+                        value={data.publish_time}
+                        type="number"
+                        onChange={handleValueChange('syslog_mark_interval')}
+                        margin="normal"
+                    />
+                </Fragment>
+            }
+            <FormActions>
+                <FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit">
+                    Save
+        </FormButton>
+                <FormButton variant="contained" color="secondary" onClick={loadData}>
+                    Reset
+        </FormButton>
+            </FormActions>
+        </ValidatorForm>
+    );
+}

interface/src/project/EMSESPStatus.ts

@@ -0,0 +1,41 @@
+import { Theme } from '@material-ui/core';
+import { EMSESPStatus, busConnectionStatus } from './types';
+
+export const isConnected = ({ status }: EMSESPStatus) => status === busConnectionStatus.BUS_STATUS_CONNECTED;
+
+export const busStatusHighlight = ({ status }: EMSESPStatus, theme: Theme) => {
+  switch (status) {
+    case busConnectionStatus.BUS_STATUS_TX_ERRORS:
+      return theme.palette.info.main;
+    case busConnectionStatus.BUS_STATUS_CONNECTED:
+      return theme.palette.success.main;
+    case busConnectionStatus.BUS_STATUS_OFFLINE:
+      return theme.palette.error.main;
+    default:
+      return theme.palette.warning.main;
+  }
+}
+
+export const busStatus = ({ status }: EMSESPStatus) => {
+  switch (status) {
+    case busConnectionStatus.BUS_STATUS_CONNECTED:
+      return "Connected";
+    case busConnectionStatus.BUS_STATUS_TX_ERRORS:
+      return "Tx not stable";
+    case busConnectionStatus.BUS_STATUS_OFFLINE:
+      return "Disconnected";
+    default:
+      return "Unknown";
+  }
+}
+
+export const mqttStatusHighlight = ({ mqtt_fails }: EMSESPStatus, theme: Theme) => {
+  if (mqtt_fails === 0)
+    return theme.palette.success.main;
+
+  if (mqtt_fails < 10)
+    return theme.palette.warning.main;
+
+  return theme.palette.success.main;
+
+}

interface/src/project/EMSESPStatusController.tsx

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+
+import { restController, RestControllerProps, RestFormLoader, SectionContent } from '../components';
+import { ENDPOINT_ROOT } from '../api';
+import EMSESPStatusForm from './EMSESPStatusForm';
+import { EMSESPStatus } from './types';
+
+export const EMSESP_STATUS_ENDPOINT = ENDPOINT_ROOT + "emsespStatus";
+
+type EMSESPStatusControllerProps = RestControllerProps<EMSESPStatus>;
+
+class EMSESPStatusController extends Component<EMSESPStatusControllerProps> {
+
+    componentDidMount() {
+        this.props.loadData();
+    }
+
+    render() {
+        return (
+            <SectionContent title="EMS-ESP Status">
+                <RestFormLoader
+                    {...this.props}
+                    render={formProps => <EMSESPStatusForm {...formProps} />}
+                />
+            </SectionContent>
+        )
+    }
+}
+
+export default restController(EMSESP_STATUS_ENDPOINT, EMSESPStatusController);

interface/src/project/EMSESPStatusForm.tsx

@@ -0,0 +1,149 @@
+import React, { Component, Fragment } from 'react';
+
+import { WithTheme, withTheme } from '@material-ui/core/styles';
+import { Table, TableBody, TableCell, TableHead, TableRow, Avatar, Divider, List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core';
+
+import BuildIcon from '@material-ui/icons/Build';
+import RefreshIcon from '@material-ui/icons/Refresh';
+import DeviceHubIcon from '@material-ui/icons/DeviceHub';
+import SpeakerNotesOffIcon from '@material-ui/icons/SpeakerNotesOff';
+import TimerIcon from '@material-ui/icons/Timer';
+import BatteryUnknownIcon from '@material-ui/icons/BatteryUnknown';
+
+import { RestFormProps, FormActions, FormButton, HighlightAvatar } from '../components';
+import { busStatus, busStatusHighlight, isConnected, mqttStatusHighlight } from './EMSESPStatus';
+
+import { EMSESPStatus } from './types';
+
+type EMSESPStatusFormProps = RestFormProps<EMSESPStatus> & WithTheme;
+
+class EMSESPStatusForm extends Component<EMSESPStatusFormProps> {
+
+    createListItems() {
+        const { data, theme } = this.props;
+        return (
+            <Fragment>
+                <ListItem>
+                    <ListItemAvatar>
+                        <Avatar>
+                            <BuildIcon />
+                        </Avatar>
+                    </ListItemAvatar>
+                    <ListItemText primary="Firmware Version" secondary={data.version} />
+                </ListItem>
+                <Divider variant="inset" component="li" />
+
+                <ListItem>
+                    <ListItemAvatar>
+                        <Avatar>
+                            <TimerIcon />
+                        </Avatar>
+                    </ListItemAvatar>
+                    <ListItemText primary="System Uptime" secondary={data.uptime} />
+                </ListItem>
+                <Divider variant="inset" component="li" />
+
+                <ListItem>
+                    <ListItemAvatar>
+                        <Avatar>
+                            <BatteryUnknownIcon />
+                        </Avatar>
+                    </ListItemAvatar>
+                    <ListItemText primary="Free System Memory" secondary={data.free_mem + '%'} />
+                </ListItem>
+                <Divider variant="inset" component="li" />
+
+                <ListItem>
+                    <ListItemAvatar>
+                        <HighlightAvatar color={busStatusHighlight(data, theme)}>
+                            <DeviceHubIcon />
+                        </HighlightAvatar>
+                    </ListItemAvatar>
+                    <ListItemText primary="EMS Bus Status" secondary={busStatus(data)} />
+                </ListItem>
+                <Divider variant="inset" component="li" />
+                {
+                    isConnected(data) &&
+                    <Fragment>
+
+                        <Table size="small" padding="default">
+                            <TableHead>
+                                <TableRow>
+                                    <TableCell>Statistic</TableCell>
+                                    <TableCell align="center"># Telegrams</TableCell>
+                                    <TableCell />
+                                </TableRow>
+                            </TableHead>
+                            <TableBody>
+                                <TableRow>
+                                    <TableCell component="th" scope="row">
+                                        Rx Received
+                          </TableCell>
+                                    <TableCell align="center">
+                                        {data.rx_received}
+                                    </TableCell>
+                                </TableRow>
+                                <TableRow>
+                                    <TableCell component="th" scope="row">
+                                        Tx Sent
+                          </TableCell>
+                                    <TableCell align="center">
+                                        {data.tx_sent}
+                                    </TableCell>
+                                </TableRow>
+                                <TableRow>
+                                    <TableCell component="th" scope="row">
+                                        CRC Errors
+                          </TableCell>
+                                    <TableCell align="center">
+                                        {data.crc_errors}
+                                    </TableCell>
+                                </TableRow>
+                                <TableRow>
+                                    <TableCell component="th" scope="row">
+                                        Tx Errors
+                          </TableCell>
+                                    <TableCell align="center">
+                                        {data.tx_errors}
+                                    </TableCell>
+                                </TableRow>
+
+                            </TableBody>
+                        </Table>
+
+                    </Fragment>
+                }
+
+                <ListItem>
+                    <ListItemAvatar>
+                        <HighlightAvatar color={mqttStatusHighlight(data, theme)}>
+                            <SpeakerNotesOffIcon />
+                        </HighlightAvatar>
+                    </ListItemAvatar>
+                    <ListItemText primary="MQTT Publish fails" secondary={data.mqtt_fails} />
+                </ListItem>
+
+                <Divider variant="inset" component="li" />
+                <ListItem></ListItem>
+            </Fragment>
+        );
+    }
+
+    render() {
+        return (
+            <Fragment>
+                <List>
+                    {this.createListItems()}
+                </List>
+                <FormActions>
+                    <FormButton startIcon={<RefreshIcon />} variant="contained" color="secondary" onClick={this.props.loadData}>
+                        Refresh
+          </FormButton>
+                </FormActions>
+            </Fragment>
+        );
+    }
+
+}
+
+export default withTheme(EMSESPStatusForm);

interface/src/project/ProjectMenu.tsx

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
+
+import { List, ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
+import SettingsRemoteIcon from '@material-ui/icons/SettingsRemote';
+
+import { PROJECT_PATH } from '../api';
+
+class ProjectMenu extends Component<RouteComponentProps> {
+
+  render() {
+    const path = this.props.match.url;
+    return (
+      <List>
+        <ListItem to={`/${PROJECT_PATH}/`} selected={path.startsWith(`/${PROJECT_PATH}/`)} button component={Link}>
+          <ListItemIcon>
+            <SettingsRemoteIcon />
+          </ListItemIcon>
+          <ListItemText primary="EMS-ESP" />
+        </ListItem>
+      </List>
+    )
+  }
+
+}
+
+export default withRouter(ProjectMenu);

interface/src/project/ProjectRouting.tsx

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import { Redirect, Switch } from 'react-router';
+
+import { PROJECT_PATH } from '../api';
+import { AuthenticatedRoute } from '../authentication';
+
+import EMSESP from './EMSESP';
+
+class ProjectRouting extends Component {
+
+  render() {
+    return (
+      <Switch>
+        {
+          /*
+          * Add your project page routing below.
+          */
+        }
+        <AuthenticatedRoute exact path={`/${PROJECT_PATH}/*`} component={EMSESP} />
+        {
+          /*
+          * The redirect below caters for the default project route and redirecting invalid paths.
+          * The "to" property must match one of the routes above for this to work correctly.
+          */
+        }
+        <Redirect to={`/${PROJECT_PATH}/`} />
+      </Switch>
+    )
+  }
+
+}
+
+export default ProjectRouting;

interface/src/project/types.ts

@@ -0,0 +1,32 @@
+export interface EMSESPSettings {
+  tx_mode: number;
+  ems_bus_id: number;
+  system_heartbeat: boolean;
+  syslog_level: number;
+  syslog_mark_interval: number;
+  syslog_host: string;
+  master_thermostat: number;
+  shower_timer: boolean;
+  shower_alert: boolean;
+  publish_time: number;
+  mqtt_format: number;
+  mqtt_qos: number;
+}
+
+export enum busConnectionStatus {
+  BUS_STATUS_CONNECTED = 0,
+  BUS_STATUS_TX_ERRORS = 1,
+  BUS_STATUS_OFFLINE = 2
+}
+
+export interface EMSESPStatus {
+  version: string;
+  status: busConnectionStatus;
+  rx_received: number;
+  tx_sent: number;
+  crc_errors: number;
+  tx_errors: number;
+  mqtt_fails: number;
+  uptime: string;
+  free_mem: number;
+}

interface/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

interface/src/security/ManageUsersController.tsx

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+
+import {restController, RestControllerProps, RestFormLoader, SectionContent } from '../components';
+import { SECURITY_SETTINGS_ENDPOINT } from '../api';
+
+import ManageUsersForm from './ManageUsersForm';
+import { SecuritySettings } from './types';
+
+type ManageUsersControllerProps = RestControllerProps<SecuritySettings>;
+
+class ManageUsersController extends Component<ManageUsersControllerProps> {
+
+  componentDidMount() {
+    this.props.loadData();
+  }
+
+  render() {
+    return (
+      <SectionContent title="Manage Users" titleGutter>
+        <RestFormLoader
+          {...this.props}
+          render={formProps => <ManageUsersForm {...formProps} />}
+        />
+      </SectionContent>
+    )
+  }
+
+}
+
+export default restController(SECURITY_SETTINGS_ENDPOINT, ManageUsersController);

interface/src/security/ManageUsersForm.tsx

@@ -0,0 +1,191 @@
+import React, { Fragment } from 'react';
+import { ValidatorForm } from 'react-material-ui-form-validator';
+
+import { Table, TableBody, TableCell, TableHead, TableFooter, TableRow, withWidth, WithWidthProps, isWidthDown } from '@material-ui/core';
+import { Box, Button, Typography, } from '@material-ui/core';
+
+import EditIcon from '@material-ui/icons/Edit';
+import DeleteIcon from '@material-ui/icons/Delete';
+import CloseIcon from '@material-ui/icons/Close';
+import CheckIcon from '@material-ui/icons/Check';
+import IconButton from '@material-ui/core/IconButton';
+import SaveIcon from '@material-ui/icons/Save';
+import PersonAddIcon from '@material-ui/icons/PersonAdd';
+
+import { withAuthenticatedContext, AuthenticatedContextProps } from '../authentication';
+import { RestFormProps, FormActions, FormButton } from '../components';
+
+import UserForm from './UserForm';
+import { SecuritySettings, User } from './types';
+
+function compareUsers(a: User, b: User) {
+  if (a.username < b.username) {
+    return -1;
+  }
+  if (a.username > b.username) {
+    return 1;
+  }
+  return 0;
+}
+
+type ManageUsersFormProps = RestFormProps<SecuritySettings> & AuthenticatedContextProps & WithWidthProps;
+
+type ManageUsersFormState = {
+  creating: boolean;
+  user?: User;
+}
+
+class ManageUsersForm extends React.Component<ManageUsersFormProps, ManageUsersFormState> {
+
+  state: ManageUsersFormState = {
+    creating: false
+  };
+
+  createUser = () => {
+    this.setState({
+      creating: true,
+      user: {
+        username: "",
+        password: "",
+        admin: true
+      }
+    });
+  };
+
+  uniqueUsername = (username: string) => {
+    return !this.props.data.users.find(u => u.username === username);
+  }
+
+  noAdminConfigured = () => {
+    return !this.props.data.users.find(u => u.admin);
+  }
+
+  removeUser = (user: User) => {
+    const { data } = this.props;
+    const users = data.users.filter(u => u.username !== user.username);
+    this.props.setData({ ...data, users });
+  }
+
+  startEditingUser = (user: User) => {
+    this.setState({
+      creating: false,
+      user
+    });
+  };
+
+  cancelEditingUser = () => {
+    this.setState({
+      user: undefined
+    });
+  }
+
+  doneEditingUser = () => {
+    const { user } = this.state;
+    if (user) {
+      const { data } = this.props;
+      const users = data.users.filter(u => u.username !== user.username);
+      users.push(user);
+      this.props.setData({ ...data, users });
+      this.setState({
+        user: undefined
+      });
+    }
+  };
+
+  handleUserValueChange = (name: keyof User) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ user: { ...this.state.user!, [name]: event.target.value } });
+  };
+
+  handleUserCheckboxChange = (name: keyof User) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ user: { ...this.state.user!, [name]: event.target.checked } });
+  }
+
+  onSubmit = () => {
+    this.props.saveData();
+    this.props.authenticatedContext.refresh();
+  }
+
+  render() {
+    const { width, data, loadData } = this.props;
+    const { user, creating } = this.state;
+    return (
+      <Fragment>
+        <ValidatorForm onSubmit={this.onSubmit}>
+          <Table size="small" padding={isWidthDown('xs', width!) ? "none" : "default"}>
+            <TableHead>
+              <TableRow>
+                <TableCell>Username</TableCell>
+                <TableCell align="center">Admin?</TableCell>
+                <TableCell />
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {data.users.sort(compareUsers).map(user => (
+                <TableRow key={user.username}>
+                  <TableCell component="th" scope="row">
+                    {user.username}
+                  </TableCell>
+                  <TableCell align="center">
+                    {
+                      user.admin ? <CheckIcon /> : <CloseIcon />
+                    }
+                  </TableCell>
+                  <TableCell align="center">
+                    <IconButton size="small" aria-label="Delete" onClick={() => this.removeUser(user)}>
+                      <DeleteIcon />
+                    </IconButton>
+                    <IconButton size="small" aria-label="Edit" onClick={() => this.startEditingUser(user)}>
+                      <EditIcon />
+                    </IconButton>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+            <TableFooter >
+              <TableRow>
+                <TableCell colSpan={2} />
+                <TableCell align="center" padding="default">
+                  <Button startIcon={<PersonAddIcon />} variant="contained" color="secondary" onClick={this.createUser}>
+                    Add
+                  </Button>
+                </TableCell>
+              </TableRow>
+            </TableFooter>
+          </Table>
+          {
+            this.noAdminConfigured() &&
+            (
+              <Box bgcolor="error.main" color="error.contrastText" p={2} mt={2} mb={2}>
+                <Typography variant="body1">
+                  You must have at least one admin user configured.
+                </Typography>
+              </Box>
+            )
+          }
+          <FormActions>
+            <FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit" disabled={this.noAdminConfigured()}>
+              Save
+            </FormButton>
+            <FormButton variant="contained" color="secondary" onClick={loadData}>
+              Reset
+            </FormButton>
+          </FormActions>
+        </ValidatorForm>
+        {
+          user &&
+          <UserForm
+            user={user}
+            creating={creating}
+            onDoneEditing={this.doneEditingUser}
+            onCancelEditing={this.cancelEditingUser}
+            handleValueChange={this.handleUserValueChange}
+            uniqueUsername={this.uniqueUsername}
+          />
+        }
+      </Fragment>
+    );
+  }
+
+}
+
+export default withAuthenticatedContext(withWidth()(ManageUsersForm));

interface/src/security/Security.tsx

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import { Redirect, Switch, RouteComponentProps } from 'react-router-dom'
+
+import { Tabs, Tab } from '@material-ui/core';
+
+import { AuthenticatedContextProps, AuthenticatedRoute } from '../authentication';
+import { MenuAppBar } from '../components';
+
+import ManageUsersController from './ManageUsersController';
+import SecuritySettingsController from './SecuritySettingsController';
+
+type SecurityProps = AuthenticatedContextProps & RouteComponentProps;
+
+class Security extends Component<SecurityProps> {
+
+  handleTabChange = (event: React.ChangeEvent<{}>, path: string) => {
+    this.props.history.push(path);
+  };
+
+  render() {
+    return (
+      <MenuAppBar sectionTitle="Security">
+        <Tabs value={this.props.match.url} onChange={this.handleTabChange} variant="fullWidth">
+          <Tab value="/security/users" label="Manage Users" />
+          <Tab value="/security/settings" label="Security Settings" />
+        </Tabs>
+        <Switch>
+          <AuthenticatedRoute exact path="/security/users" component={ManageUsersController} />
+          <AuthenticatedRoute exact path="/security/settings" component={SecuritySettingsController} />
+          <Redirect to="/security/users" />
+        </Switch>
+      </MenuAppBar>
+    )
+  }
+}
+
+export default Security;

interface/src/security/SecuritySettingsController.tsx

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+
+import {restController, RestControllerProps, RestFormLoader, SectionContent } from '../components';
+import { SECURITY_SETTINGS_ENDPOINT } from '../api';
+
+import SecuritySettingsForm from './SecuritySettingsForm';
+import { SecuritySettings } from './types';
+
+type SecuritySettingsControllerProps = RestControllerProps<SecuritySettings>;
+
+class SecuritySettingsController extends Component<SecuritySettingsControllerProps> {
+
+  componentDidMount() {
+    this.props.loadData();
+  }
+
+  render() {
+    return (
+      <SectionContent title="Security Settings" titleGutter>
+        <RestFormLoader
+          {...this.props}
+          render={formProps => <SecuritySettingsForm {...formProps} />}
+        />
+      </SectionContent>
+    );
+  }
+
+}
+
+export default restController(SECURITY_SETTINGS_ENDPOINT, SecuritySettingsController);

interface/src/security/SecuritySettingsForm.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ValidatorForm } from 'react-material-ui-form-validator';
+
+import { Box, Typography } from '@material-ui/core';
+import SaveIcon from '@material-ui/icons/Save';
+
+import { withAuthenticatedContext, AuthenticatedContextProps } from '../authentication';
+import { RestFormProps, PasswordValidator, FormActions, FormButton } from '../components';
+
+import { SecuritySettings } from './types';
+
+type SecuritySettingsFormProps = RestFormProps<SecuritySettings> & AuthenticatedContextProps;
+
+class SecuritySettingsForm extends React.Component<SecuritySettingsFormProps> {
+
+  onSubmit = () => {
+    this.props.saveData();
+    this.props.authenticatedContext.refresh();
+  }
+
+  render() {
+    const { data, handleValueChange, loadData } = this.props;
+    return (
+      <ValidatorForm onSubmit={this.onSubmit}>
+        <PasswordValidator
+          validators={['required', 'matchRegexp:^.{1,64}$']}
+          errorMessages={['JWT Secret Required', 'JWT Secret must be 64 characters or less']}
+          name="jwt_secret"
+          label="JWT Secret"
+          fullWidth
+          variant="outlined"
+          value={data.jwt_secret}
+          onChange={handleValueChange('jwt_secret')}
+          margin="normal"
+        />
+        <Box bgcolor="primary.main" color="primary.contrastText" p={2} mt={2} mb={2}>
+          <Typography variant="body1">
+            If you modify the JWT Secret, all users will be logged out.
+          </Typography>
+        </Box>
+        <FormActions>
+          <FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit">
+            Save
+          </FormButton>
+          <FormButton variant="contained" color="secondary" onClick={loadData}>
+            Reset
+          </FormButton>
+        </FormActions>
+      </ValidatorForm>
+    );
+  }
+
+}
+
+export default withAuthenticatedContext(SecuritySettingsForm);

interface/src/security/UserForm.tsx

@@ -0,0 +1,86 @@
+import React, { RefObject } from 'react';
+import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
+
+import { Dialog, DialogTitle, DialogContent, DialogActions, Checkbox } from '@material-ui/core';
+
+import { PasswordValidator, BlockFormControlLabel, FormButton } from '../components';
+
+import { User } from './types';
+
+interface UserFormProps {
+  creating: boolean;
+  user: User;
+  uniqueUsername: (value: any) => boolean;
+  handleValueChange: (name: keyof User) => (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onDoneEditing: () => void;
+  onCancelEditing: () => void;
+}
+
+class UserForm extends React.Component<UserFormProps> {
+
+  formRef: RefObject<any> = React.createRef();
+
+  componentDidMount() {
+    ValidatorForm.addValidationRule('uniqueUsername', this.props.uniqueUsername);
+  }
+
+  submit = () => {
+    this.formRef.current.submit();
+  }
+
+  render() {
+    const { user, creating, handleValueChange, onDoneEditing, onCancelEditing } = this.props;
+    return (
+      <ValidatorForm onSubmit={onDoneEditing} ref={this.formRef}>
+        <Dialog onClose={onCancelEditing} aria-labelledby="user-form-dialog-title" open>
+          <DialogTitle id="user-form-dialog-title">{creating ? 'Add' : 'Modify'} User</DialogTitle>
+          <DialogContent dividers>
+            <TextValidator
+              validators={creating ? ['required', 'uniqueUsername', 'matchRegexp:^[a-zA-Z0-9_\\.]{1,24}$'] : []}
+              errorMessages={creating ? ['Username is required', "Username already exists", "Must be 1-24 characters: alpha numeric, '_' or '.'"] : []}
+              name="username"
+              label="Username"
+              fullWidth
+              variant="outlined"
+              value={user.username}
+              disabled={!creating}
+              onChange={handleValueChange('username')}
+              margin="normal"
+            />
+            <PasswordValidator
+              validators={['required', 'matchRegexp:^.{1,64}$']}
+              errorMessages={['Password is required', 'Password must be 64 characters or less']}
+              name="password"
+              label="Password"
+              fullWidth
+              variant="outlined"
+              value={user.password}
+              onChange={handleValueChange('password')}
+              margin="normal"
+            />
+            <BlockFormControlLabel
+              control={
+                <Checkbox
+                  value="admin"
+                  checked={user.admin}
+                  onChange={handleValueChange('admin')}
+                />
+              }
+              label="Admin?"
+            />
+          </DialogContent>
+          <DialogActions>
+            <FormButton variant="contained" color="secondary" onClick={onCancelEditing}>
+              Cancel
+            </FormButton>
+            <FormButton variant="contained" color="primary" type="submit" onClick={this.submit}>
+              Done
+            </FormButton>
+          </DialogActions>
+        </Dialog>
+      </ValidatorForm>
+    );
+  }
+}
+
+export default UserForm;

interface/src/security/types.ts

@@ -0,0 +1,11 @@
+export interface User {
+  username: string;
+  password: string;
+  admin: boolean;
+}
+
+export interface SecuritySettings {
+  users: User[];
+  jwt_secret: string;
+}
+

interface/src/serviceWorker.ts

@@ -0,0 +1,145 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.0/8 are considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+type Config = {
+  onSuccess?: (registration: ServiceWorkerRegistration) => void;
+  onUpdate?: (registration: ServiceWorkerRegistration) => void;
+};
+
+export function register(config?: Config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(
+      process.env.PUBLIC_URL,
+      window.location.href
+    );
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl: string, config?: Config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl: string, config?: Config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl, {
+    headers: { 'Service-Worker': 'script' }
+  })
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}

interface/src/system/OTASettingsController.tsx

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+
+import {restController, RestControllerProps, RestFormLoader, SectionContent } from '../components';
+import { OTA_SETTINGS_ENDPOINT } from '../api';
+
+import OTASettingsForm from './OTASettingsForm';
+import { OTASettings } from './types';
+
+type OTASettingsControllerProps = RestControllerProps<OTASettings>;
+
+class OTASettingsController extends Component<OTASettingsControllerProps> {
+
+  componentDidMount() {
+    this.props.loadData();
+  }
+
+  render() {
+    return (
+      <SectionContent title="OTA Settings" titleGutter>
+        <RestFormLoader
+          {...this.props}
+          render={formProps => <OTASettingsForm {...formProps} />}
+        />
+      </SectionContent>
+    );
+  }
+
+}
+
+export default restController(OTA_SETTINGS_ENDPOINT, OTASettingsController);

interface/src/system/OTASettingsForm.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
+
+import { Checkbox } from '@material-ui/core';
+import SaveIcon from '@material-ui/icons/Save';
+
+import { RestFormProps, BlockFormControlLabel, PasswordValidator, FormButton, FormActions } from '../components';
+import {isIP,isHostname,or}  from '../validators';
+
+import { OTASettings } from './types';
+
+type OTASettingsFormProps = RestFormProps<OTASettings>;
+
+class OTASettingsForm extends React.Component<OTASettingsFormProps> {
+
+  componentDidMount() {
+    ValidatorForm.addValidationRule('isIPOrHostname', or(isIP, isHostname));
+  }
+
+  render() {
+    const { data, handleValueChange, saveData, loadData } = this.props;
+    return (
+      <ValidatorForm onSubmit={saveData}>
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              checked={data.enabled}
+              onChange={handleValueChange("enabled")}
+            />
+          }
+          label="Enable OTA Updates?"
+        />
+        <TextValidator
+          validators={['required', 'isNumber', 'minNumber:1025', 'maxNumber:65535']}
+          errorMessages={['Port is required', "Must be a number", "Must be greater than 1024 ", "Max value is 65535"]}
+          name="port"
+          label="Port"
+          fullWidth
+          variant="outlined"
+          value={data.port}
+          type="number"
+          onChange={handleValueChange('port')}
+          margin="normal"
+        />
+        <PasswordValidator
+          validators={['required', 'matchRegexp:^.{1,64}$']}
+          errorMessages={['OTA Password is required', 'OTA Point Password must be 64 characters or less']}
+          name="password"
+          label="Password"
+          fullWidth
+          variant="outlined"
+          value={data.password}
+          onChange={handleValueChange('password')}
+          margin="normal"
+        />
+        <FormActions>
+          <FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit">
+            Save
+          </FormButton>
+          <FormButton variant="contained" color="secondary" onClick={loadData}>
+            Reset
+          </FormButton>
+        </FormActions>
+      </ValidatorForm>
+    );
+  }
+}
+
+export default OTASettingsForm;