Merge branch 'v2' into main

.gitignore

@@ -1,23 +1,24 @@
 # vscode
 .vscode
 
+# build
+/build/
+.clang_complete
+.gcc-flags.json
+
 # platformio
 .pio
-lib/readme.txt
-
-# web stuff compiled
-src/websrc/temp
-src/webh/*.gz.h
-
-# NPM directories
-node_modules
+pio_local.ini
 
 # OS specific
 .DS_Store
+*Thumbs.db
 
 # project specfic
-scripts/stackdmp.txt
-firmware
-
-# firmware
+/scripts/stackdmp.txt
 *.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}
-    - BRANCH=${TRAVIS_BRANCH/dev/}
+    - DEV=${OWNER/proddy/v2}
+    - 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 beta]
+
+### Changed
+- A lot! See `README.md`
+
 ## [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,4 +1,4 @@
-![logo](https://emsesp.github.io/docs/_media/logo/EMS-ESP_logo_dark.png)
+# ![logo](media/EMS-ESP_logo_dark.png)
 
 [![version](https://img.shields.io/github/release/proddy/EMS-ESP.svg?label=Latest%20Release)](https://github.com/proddy/EMS-ESP/blob/main/CHANGELOG.md)
 [![release-date](https://img.shields.io/github/release-date/proddy/EMS-ESP.svg?label=Released)](https://github.com/proddy/EMS-ESP/commits/main)
@@ -13,30 +13,175 @@
 
 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.
 
-## Features
+## **New Features in v2**
 
-* Supporting more than [50 EMS devices](https://emsesp.github.io/docs/#/Supported-EMS-Devices) (EMS 1, EMS 2.0/Plus and Heatronics 3).
-* A web interface for easy configuration and real-time monitoring of the EMS bus.
-* Telnet for advanced configuration and verbose traffic logging.
-* Configurable MQTT, with templates for Home Assistant and Domoticz.
-* Includes an simple schematic for a test breadboard interface board.
-* Native compatibility with bbqkees' [EMS Gateway](https://bbqkees-electronics.nl/) interface board.
+- Supports both ESP8266 and ESP32
+- New MQTT option to support Home Assistant MQTT Discovery (https://www.home-assistant.io/docs/mqtt/discovery/)
+- Tighter security in Web and Console
+- New secure web interface (based on React/TypeScript)
+- Can be run on WiFi on as a Stand alone Access Point
+- Easier first-time configuration via a web Captive Portal
+- Supporting over 70 EMS devices
 
-Please reference the [Wiki](https://emsesp.github.io/docs) for further details and instructions on how to build and configure the firmware.
+<img src="media/web_settings.PNG" width=70% height=70%>
+<img src="media/web_status.PNG" width=70% height=70%>
+<img src="media/web_devices.PNG" width=70% height=70%>
+<img src="media/web_mqtt.PNG" width=70% height=70%>
 
----
+- A new console. As in version 1.9 it works with both Serial and Telnet but now with a more intuitive Linux shell like behavior. It supports multiple connections and has basic security to prevent any changes to EMS-ESP. A full list of commands is below, here are the key ones:
+    * `help` lists the commands and keywords. This works in each context.
+    * `exit` will exit the console or exit the current context. CTRL-D does the same.
+    * `CTRL-U` for Undo
+    * `TAB` for auto-complete
+    * Some specific commands are behind contexts. Think of this as a sub-menu. e.g. `system`, `thermostat`. The path will always show you which context you are in. `$` is the root.
+    * `su` will switch to super-user or Admin. The default password is "ems-esp-neo" and can be changed with `passwd` from the system menu or via the Web UI (called secret password). When in Admin mode the command prompt switches from `$` to `#`.
+    * Some settings can be changed in the console. The `set` command will list them.
+    * `show` shows the data specific to the which context you're in. From the root it will show you all the EMS device information and any external temperature sensors. From a context it will be more specific to that context, e.g. `show mqtt` from `system` will list MQTT subscriptions and show the status and queue. 
+    * `log` sets the logging level. `log off` disables logging. Use `log debug` for debugging commands and actions. This will be reset next time the console is opened.
+    * `watch` will output the incoming Rx telegrams directly to the console. You can also put on a watch on a specific EMS device ID or telegram ID. Also choose to output as verbose text or raw data bytes.  these in its 'raw' data format and also watch a particular ID.
   
-## Say Thanks
-If you like EMS-ESP buy me a :coffee: via [PayPal](https://www.paypal.me/prderbyshire/2).
+## **Migrating from version 1.9**
 
----
+EMS-ESP will attempt to automatically migrate the 1.9 settings. 
 
-| ![web menu](https://emsesp.github.io/docs/_media/web/system_status.PNG) | ![web menu](https://emsesp.github.io/docs/_media/web/ems_dashboard.PNG) |
-| - | - |
-![ha](https://emsesp.github.io/docs/_media/home%20assistant/ha.png)
+Note there are some noticeable different to be aware of in version 2:
+  - MQTT base has been removed
+  - 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 automatically activated (note Serial is always available on the ESP32 because it has multiple UARTs). The EMS-ESP will blink fast when in Serial mode. Connect via a USB with baud 115200 to see the serial console. Note in this mode the EMS will be disconnect so there will be no incoming traffic. Use only for debugging or changing settings.
 
-| ![telnet menu](https://emsesp.github.io/docs/_media/telnet/telnet_menu.jpg) | ![telnet menu](https://emsesp.github.io/docs/_media/telnet/telnet_stats.PNG) |
-| - | - |
 
-| ![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) |
-| - | - | - |
+## **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 using `python espota.py --debug --progress --port 8266 --auth ems-esp-neo -i ems-esp.local -f <firmware.bin>` 
+
+- 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>`
+  note: if this fails try a lower speed like `115200` instead of `921600`.
+  
+  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**
+
+ - After powering up the ESP, watch the onboard LED. A solid light 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.
+  
+ - Connect to the Access Point called ems-esp using the WPA password `ems-esp-neo`. When you see the captive portal sign-in with username `admin` and password `admin`. Set the WiFi credentials and go back to http://ems-esp
+
+ - First thing to check is if Tx is working and that you have a connect to the EMS bus. If it's showing an error try changing the Tx Mode from the settings page. Then check the Status (no need to restart EMS-ESP).
+
+ - If Rx incomplete telegrams are reported in the Web UI, don't panic. Some telegrams can be missed and this is usually due to noise on line.
+
+## **Using the  Console**
+
+Connecting to the console will give you more insight into the EMS bus traffic, MQTT queues and the actual device information. The console is reachable via Telnet (port 22) or via the Serial port if using an USB (on baud 115200). To change any settings in the console you must be admin (use `su` with the default password `ems-esp-neo`). On an ESP8266 the Serial port is disabled by default unless it's unable to connect to the WiFi.
+
+The `call` command is to execute a command. The command names (`[cmd]`) are the same as the MQTT command listed in the next section.
+
+(* = available in su/Admin mode)
+
+```
+common commands available in all contexts:
+  exit
+  help
+  log [level]
+  watch <on | off | raw> [ID]
+  su
+
+(from the root)
+  system (enters a context)
+  boiler (enters a context)
+  thermostat (enters a context)
+  set
+  fetch
+  scan devices [deep] *
+  send telegram <"XX XX ..."> *
+  set bus_id <device ID> *
+  set tx_mode <n> *
+  show
+  show devices
+  show ems
+  show values
+  show mqtt
+
+system
+  set
+  show
+  format *
+  show users *
+  passwd *
+  restart *
+  set wifi hostname <name> *
+  set wifi password *
+  set wifi ssid <name> *
+  wifi reconnect *
+  pin <gpio> [data] *
+
+boiler
+  read <type ID> *
+  call [cmd] [data] *
+
+thermostat
+  set
+  set master [device ID] *
+  read <type ID> *
+  call [cmd] [data] [heating circuit] *
+
+```
+  
+----------
+## **MQTT commands**
+
+Breaking change: The MQTT base has been removed in version 2. The hostname is only used as prefixed to the topic, e.g. `ems-esp/status`.
+
+All commands must be written as `{"cmd":<cmd> ,"data":<data>, "id":<n>}`. 
+
+The `id` can be replaced with `hc` for some devices and represented as a string or a number. `cmd` is a string, `data` can be a string or number.
+
+```
+*boiler_cmd*
+  comfort <hot, eco, intelligent>
+  flowtemp <degrees>
+  wwtemp <degrees>
+  boilhyston <degrees> (negative value)
+  boilhystoff <degrees> (positive value)
+  burnperiod <minutes>
+  burnminpower <%>
+  burnmaxpower <%>
+  pumpdelay <minutes>
+
+*thermostat_cmd*
+--- without hc ---
+  wwmode <off | on | auto>
+  calinttemp <degrees>
+  minexttemp <degrees>
+  building <light | medium | heavy>
+  language <n> (0=de, 1=nl, 2=fr, 3=it) only RC30
+  display <n>  (0=int temp, 1= int set, 2=ext. temp, 3=burner, 4=ww, 5=mode, 6=time, 7=date, 8=smoke) only RC30
+  clockoffset <seconds>    (only RC30)
+--- with hc ---
+  mode <auto | night | day | nofrost | heat | eco>
+  temp <degrees>
+  nighttemp <degrees>
+  daytemp <degrees>
+  nofrosttemp <degrees>
+  ecotemp <degrees>
+  heattemp <degrees>
+  summertemp <degrees>
+  designtemp <degrees>
+  offsettemp <degrees>
+  holidaytemp <degrees>
+  remotetemp <degrees>
+  control <0 | 1 | 2>
+  pause <hours>
+  party <hours>
+  holiday <dd.mm.yyyy-dd.mm.yyyy>
+  date <NTP | hh:mm:ss-dd.mm.yyyy-dw-dst>
+
+*system_cmd*
+  send <"0B XX XX ..">
+  pin <gpio> <on|off|1|0|true|false>
+
+```

doc/coding.md

@@ -0,0 +1,71 @@
+# Notes on customizing the code
+
+
+## **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.
+- 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).
+
+## **Customizing the Web UI**
+
+The Web is based off Rick's awesome [esp8266-react](https://github.com/rjwats/esp8266-react/) framework. These are the files that are modified:
+
+**`interface:`**
+  * `.env` project name and project path to ems-esp
+  * `.env.development` CORS URL
+ 
+**`interface/public:`**
+  * `app/manifest.json` ems-esp name
+  * `index.html` ems-esp name
+  * `app/icon.png` 256x256 PNG
+  * `favicon.ico` replaced
+
+**`interface/src:`**
+  * `CustomMuiTheme.tsx` colors for dark mode
+  * `interface/src/wifi/WifiSettingsController.tsx` rename esp8266-react
+
+**`interface/src/project:`**
+  * `ProjectRouting.tsx` removed demo, added paths to ems-esp/status, ems-esp/settings and *
+  * `DemoProject.tsx` remove /demo/ and changed title, renamed to EMSESP.tsx
+  * `ProjectMenu.tsx` title change, added /ems-esp/settings
+  * `DemoInformation.tsx` removed file
+  * `types.ts` add variables
+  * added all custom files starting with EMSESP*
+
+**`interface/src/mqtt:`**
+  * `types.ts` added mqtt_fails
+  * `MqttStatusForm.tsx` added MQTT Publish Errors
+  * `MqttStatus.ts` added function mqttPublishHighlight
+  * `MqttSettingsForm.tsx` added publish time, qos, format
+
+**`interface/src/authentication:`**
+  * `AuthenticationWrapper.tsx` commented out features.security because we added version
+  * `AuthenticationContext.tsx` added version
+  * `MqttSettingsForm.tsx` added publish time, qos, format
+
+**`interface/src/components:`**
+  * `MenuAppBar.tsx` added version to toolbar
+
+**`interface/src/system:`**
+  * `types.ts` added uptime and free_mem
+  * `SystemStatusForm.tsx` added system uptime, % free mem
+
+**`lib/framework`:**
+  * `SystemStatus.h` added #include <LittleFS.h>, #include <uuid/log.h>, #include "../../src/system.h"
+  * `SystemStatus.cpp` added LittleFS.info(fs_info); root["uptime"], root["free_mem"]
+  * Commented out all `Serial.print`'s in all files
+  * `MqttStatus.h` added #include "../../src/mqtt.h"
+  * `MqttStatus.cpp` added root["mqtt_fails"]
+  * `SecuritySettingsService.cpp` added version to the JWT payload
+  * `SecuritySettingsService.h` #include "../../src/version.h"
+  * `WiFiSettingsService.cpp` added WiFi.setOutputPower(20.0f), moved setHostname
+  * `OTASettingsService.h` added #include "../../src/system.h" 
+  * `OTASettingsService.cpp` added call to emsesp::System::upload_status(true)
+  * `features.ini`: -D FT_NTP=0
+  * `platformio.ini` using our own version
+  * `factory_settings.ini` modified with `ems-esp-neo` as password and `ems-esp` everywhere else
+
+
+
+

factory_settings.ini

@@ -0,0 +1,45 @@
+[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_PROVISION_MODE=AP_MODE_DISCONNECTED
+    -D FACTORY_AP_SSID=\"ems-esp\" ; 1-64 characters
+    -D FACTORY_AP_PASSWORD=\"ems-esp-neo\" ; 8-64 characters
+    -D FACTORY_AP_LOCAL_IP=\"192.168.4.1\"
+    -D FACTORY_AP_GATEWAY_IP=\"192.168.4.1\"
+    -D FACTORY_AP_SUBNET_MASK=\"255.255.255.0\"
+
+    ; 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=false
+    -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=\"\"
+    -D FACTORY_MQTT_CLIENT_ID=\"ems-esp\"
+    -D FACTORY_MQTT_KEEP_ALIVE=60
+    -D FACTORY_MQTT_CLEAN_SESSION=false
+    -D FACTORY_MQTT_MAX_TOPIC_LENGTH=128
+
+    ; JWT Secret
+    -D FACTORY_JWT_SECRET=\"ems-esp-neo\"

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,10 @@
+# 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.
+
+# ESP32 dev
+#REACT_APP_HTTP_ROOT=http://10.10.10.194
+#REACT_APP_WEB_SOCKET_ROOT=ws://10.10.10.194
+
+# ESP8266 dev
+REACT_APP_HTTP_ROOT=http://10.10.10.140
+REACT_APP_WEB_SOCKET_ROOT=ws://10.10.10.140

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.157",
+    "@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.19",
+    "mime-types": "^2.1.25",
+    "moment": "^2.26.0",
+    "notistack": "^0.9.17",
+    "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.3",
+    "sockette": "^2.0.6",
+    "typescript": "^4.0.2",
+    "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[500]
+    },
+    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({
+  signInPage: {
+    display: "flex",
+    height: "100vh",
+    margin: "auto",
+    padding: theme.spacing(2),
+    justifyContent: "center",
+    flexDirection: "column",
+    maxWidth: theme.breakpoints.values.sm
+  },
+  signInPanel: {
+    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 credentials.");
+        } 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.signInPage}>
+        <Paper className={classes.signInPanel}>
+          <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,106 @@
+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';
+import { isIP } from '../validators';
+
+type APSettingsFormProps = RestFormProps<APSettings>;
+
+class APSettingsForm extends React.Component<APSettingsFormProps> {
+
+  componentWillMount() {
+    ValidatorForm.addValidationRule('isIP', isIP);
+  }
+
+  render() {
+    const { data, handleValueChange, saveData } = 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:^.{8,64}$']}
+              errorMessages={['Access Point Password is required', 'Access Point Password must be 8-64 characters']}
+              name="password"
+              label="Access Point Password"
+              fullWidth
+              variant="outlined"
+              value={data.password}
+              onChange={handleValueChange('password')}
+              margin="normal"
+            />
+            <TextValidator
+              validators={['required', 'isIP']}
+              errorMessages={['Local IP is required', 'Must be an IP address']}
+              name="local_ip"
+              label="Local IP"
+              fullWidth
+              variant="outlined"
+              value={data.local_ip}
+              onChange={handleValueChange('local_ip')}
+              margin="normal"
+            />
+            <TextValidator
+              validators={['required', 'isIP']}
+              errorMessages={['Gateway IP is required', 'Must be an IP address']}
+              name="gateway_ip"
+              label="Gateway"
+              fullWidth
+              variant="outlined"
+              value={data.gateway_ip}
+              onChange={handleValueChange('gateway_ip')}
+              margin="normal"
+            />
+            <TextValidator
+              validators={['required', 'isIP']}
+              errorMessages={['Subnet mask is required', 'Must be an IP address']}
+              name="subnet_mask"
+              label="Subnet"
+              fullWidth
+              variant="outlined"
+              value={data.subnet_mask}
+              onChange={handleValueChange('subnet_mask')}
+              margin="normal"
+            />
+          </Fragment>
+        }
+        <FormActions>
+          <FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit">
+            Save
+          </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,27 @@
+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;
+  local_ip: string;
+  gateway_ip: string;
+  subnet_mask: 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 sign 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 SIGN_IN_PATHNAME = 'signInPathname';
+export const SIGN_IN_SEARCH = 'signInSearch';
+
+/**
+ * Fallback to sessionStorage if localStorage is absent. WebView may not have local storage enabled.
+ */
+export function getStorage() {
+  return localStorage || sessionStorage;
+}
+
+export function storeLoginRedirect(location?: H.Location) {
+  if (location) {
+    getStorage().setItem(SIGN_IN_PATHNAME, location.pathname);
+    getStorage().setItem(SIGN_IN_SEARCH, location.search);
+  }
+}
+
+export function clearLoginRedirect() {
+  getStorage().removeItem(SIGN_IN_PATHNAME);
+  getStorage().removeItem(SIGN_IN_SEARCH);
+}
+
+export function fetchLoginRedirect(features: Features): H.LocationDescriptorObject {
+  const signInPathname = getStorage().getItem(SIGN_IN_PATHNAME);
+  const signInSearch = getStorage().getItem(SIGN_IN_SEARCH);
+  clearLoginRedirect();
+  return {
+    pathname: signInPathname || getDefaultRoute(features),
+    search: (signInPathname && signInSearch) || 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,60 @@
+import * as React from "react";
+
+export interface Me {
+  username: string;
+  admin: boolean;
+  version: string; // proddy added
+}
+
+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,110 @@
+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 = () => {
+    // proddy removed
+    // 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,294 @@
+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>
+
+          <Typography align="right" variant="caption" color="textPrimary">
+            &nbsp;&nbsp;v{authenticatedContext.me.version}
+          </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("Update successful.", { variant: 'success' });
+          this.setState({ data: json, loading: false });
+        }).catch(error => {
+          const errorMessage = error.message || "Unknown error";
+          this.props.enqueueSnackbar("Problem updating: " + 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}>
+          Retry
+        </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,96 @@
+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';
+
+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 or click here";
+  }
+
+  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>
+            <Button startIcon={<CancelIcon />} variant="contained" color="secondary" onClick={onCancel}>
+              Cancel
+            </Button>
+          </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,174 @@
+import React from 'react';
+import { TextValidator, ValidatorForm, SelectValidator } from 'react-material-ui-form-validator';
+
+import { Checkbox, TextField } from '@material-ui/core';
+import SaveIcon from '@material-ui/icons/Save';
+import MenuItem from '@material-ui/core/MenuItem';
+
+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 } = 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"
+        />
+        <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={['Publish time 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"
+        />
+        <FormActions>
+          <FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit">
+            Save
+          </FormButton>
+        </FormActions>
+      </ValidatorForm>
+    );
+  }
+}
+
+export default MqttSettingsForm;

interface/src/mqtt/MqttStatus.ts

@@ -0,0 +1,56 @@
+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"
+  }
+}
+
+export const mqttPublishHighlight = ({ mqtt_fails }: MqttStatus, theme: Theme) => {
+
+  if (mqtt_fails === 0)
+    return theme.palette.success.main;
+
+  if (mqtt_fails < 10)
+    return theme.palette.warning.main;
+
+  return theme.palette.error.main;
+}

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,95 @@
+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 SpeakerNotesOffIcon from "@material-ui/icons/SpeakerNotesOff";
+
+import { RestFormProps, FormActions, FormButton, HighlightAvatar } from '../components';
+import { mqttStatusHighlight, mqttStatus, mqttPublishHighlight, disconnectReason } from './MqttStatus';
+import { MqttStatus } from './types';
+
+type MqttStatusFormProps = RestFormProps<MqttStatus> & WithTheme;
+
+class MqttStatusForm extends Component<MqttStatusFormProps> {
+
+  renderConnectionStatus() {
+    const { data, theme } = 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" />
+          <ListItem>
+          <ListItemAvatar>
+            <HighlightAvatar color={mqttPublishHighlight(data, theme)}>
+              <SpeakerNotesOffIcon />
+            </HighlightAvatar>
+          </ListItemAvatar>
+          <ListItemText
+            primary="MQTT Publish Errors"
+            secondary={data.mqtt_fails}
+          />
+        </ListItem>
+        </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,34 @@
+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;
+  mqtt_fails: number;
+}
+
+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;
+  publish_time: number;
+  mqtt_format: number;
+  mqtt_qos: number;
+  system_heartbeat: boolean;
+}

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,80 @@
+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 } = 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>
+        </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,41 @@
+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 EMSESPStatusController from './EMSESPStatusController';
+import EMSESPDevicesController from './EMSESPDevicesController';
+import EMSESPHelp from './EMSESPHelp';
+
+class EMSESP extends Component<RouteComponentProps> {
+
+  handleTabChange = (event: React.ChangeEvent<{}>, path: string) => {
+    this.props.history.push(path);
+  };
+
+  render() {
+    return (
+      <MenuAppBar sectionTitle="Dashboard">
+        <Tabs value={this.props.match.url} onChange={this.handleTabChange} variant="fullWidth">
+          <Tab value={`/${PROJECT_PATH}/devices`} label="Devices & Sensors" />
+          <Tab value={`/${PROJECT_PATH}/status`} label="EMS Status" />
+          <Tab value={`/${PROJECT_PATH}/help`} label="EMS-ESP Help" />
+        </Tabs>
+        <Switch>
+          <AuthenticatedRoute exact path={`/${PROJECT_PATH}/devices`} component={EMSESPDevicesController} />
+          <AuthenticatedRoute exact path={`/${PROJECT_PATH}/status`} component={EMSESPStatusController} />
+          <AuthenticatedRoute exact path={`/${PROJECT_PATH}/help`} component={EMSESPHelp} />
+          <Redirect to={`/${PROJECT_PATH}/devices`} />
+        </Switch>
+      </MenuAppBar>
+
+    )
+  }
+
+}
+
+export default EMSESP;

interface/src/project/EMSESPDevicesController.tsx

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+
+import { restController, RestControllerProps, RestFormLoader, SectionContent } from '../components';
+import { ENDPOINT_ROOT } from '../api';
+import EMSESPDevicesForm from './EMSESPDevicesForm';
+import { EMSESPDevices } from './EMSESPtypes';
+
+export const EMSESP_DEVICES_ENDPOINT = ENDPOINT_ROOT + "allDevices";
+
+type EMSESPDevicesControllerProps = RestControllerProps<EMSESPDevices>;
+
+class EMSESPDevicesController extends Component<EMSESPDevicesControllerProps> {
+
+    componentDidMount() {
+        this.props.loadData();
+    }
+
+    render() {
+        return (
+            <SectionContent title="Devices & Sensors">
+                <RestFormLoader
+                    {...this.props}
+                    render={formProps => <EMSESPDevicesForm {...formProps} />}
+                />
+            </SectionContent>
+        )
+    }
+}
+
+export default restController(EMSESP_DEVICES_ENDPOINT, EMSESPDevicesController);

interface/src/project/EMSESPDevicesForm.tsx

@@ -0,0 +1,328 @@
+import React, { Component, Fragment } from "react";
+import { withStyles, Theme, createStyles } from '@material-ui/core/styles';
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  TableContainer,
+  withWidth,
+  WithWidthProps,
+  isWidthDown,
+  Button,
+  DialogTitle, DialogContent, DialogActions, Box, Dialog, Typography
+} from "@material-ui/core";
+
+import RefreshIcon from "@material-ui/icons/Refresh";
+
+import { redirectingAuthorizedFetch, withAuthenticatedContext, AuthenticatedContextProps } from '../authentication';
+
+import {
+  RestFormProps,
+  FormButton,
+} from "../components";
+
+import { EMSESPDevices, EMSESPDeviceData, Device } from "./EMSESPtypes";
+
+import { ENDPOINT_ROOT } from '../api';
+export const SCANDEVICES_ENDPOINT = ENDPOINT_ROOT + "scanDevices";
+export const DEVICE_DATA_ENDPOINT = ENDPOINT_ROOT + "deviceData";
+
+const StyledTableCell = withStyles((theme: Theme) =>
+  createStyles({
+    head: {
+      backgroundColor: theme.palette.common.black,
+      color: theme.palette.common.white,
+    },
+    body: {
+      fontSize: 14,
+    },
+  }),
+)(TableCell);
+
+function compareDevices(a: Device, b: Device) {
+  if (a.type < b.type) {
+    return -1;
+  }
+  if (a.type > b.type) {
+    return 1;
+  }
+  return 0;
+}
+
+interface EMSESPDevicesFormState {
+  confirmScanDevices: boolean;
+  processing: boolean;
+  deviceData?: EMSESPDeviceData;
+}
+
+type EMSESPDevicesFormProps = RestFormProps<EMSESPDevices> & AuthenticatedContextProps & WithWidthProps;
+
+class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesFormState> {
+
+  state: EMSESPDevicesFormState = {
+    confirmScanDevices: false,
+    processing: false
+  }
+
+  noDevices = () => {
+    return (this.props.data.devices.length === 0);
+  };
+
+  noSensors = () => {
+    return (this.props.data.sensors.length === 0);
+  };
+
+  noDeviceData = () => {
+    return (this.state.deviceData?.deviceData.length === 0);
+  };
+
+  createDeviceItems() {
+    const { width, data } = this.props;
+    return (
+      <TableContainer>
+        <Typography variant="h6" color="primary" paragraph>
+          Devices:
+        </Typography>
+        {!this.noDevices() && (
+          <Table size="small" padding={isWidthDown('xs', width!) ? "none" : "default"}>
+            <TableHead>
+              <TableRow>
+                <StyledTableCell>Type</StyledTableCell>
+                <StyledTableCell align="center">Brand</StyledTableCell>
+                <StyledTableCell align="center">Model</StyledTableCell>
+                <StyledTableCell align="center">Device ID</StyledTableCell>
+                <StyledTableCell align="center">Product ID</StyledTableCell>
+                <StyledTableCell align="center">Version</StyledTableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {data.devices.sort(compareDevices).map(device => (
+                <TableRow hover key={device.id}
+                  onClick={() => this.handleRowClick(device.id)}
+                >
+                  <TableCell component="th" scope="row">
+                    {device.type}
+                  </TableCell>
+                  <TableCell align="center">
+                    {device.brand}
+                  </TableCell>
+                  <TableCell align="center">
+                    {device.name}
+                  </TableCell>
+                  <TableCell align="center">
+                    0x{('00' + device.deviceid.toString(16).toUpperCase()).slice(-2)}
+                  </TableCell>
+                  <TableCell align="center">
+                    {device.productid}
+                  </TableCell>
+                  <TableCell align="center">
+                    {device.version}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+        {this.noDevices() &&
+          (
+            <Box bgcolor="error.main" color="error.contrastText" p={2} mt={2} mb={2}>
+              <Typography variant="body1">
+                No EMS devices found. Check the connections and for possible Tx errors.
+              </Typography>
+            </Box>
+          )
+        }
+      </TableContainer>
+    );
+  }
+
+  createSensorItems() {
+    const { data } = this.props;
+    return (
+      <TableContainer>
+        <p></p>
+        <Typography variant="h6" color="primary" paragraph>
+          Sensors:
+        </Typography>
+        {!this.noSensors() && (
+          <Table size="small" padding="default">
+            <TableHead>
+              <TableRow>
+                <StyledTableCell>ID</StyledTableCell>
+                <StyledTableCell align="left">Temperature</StyledTableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {data.sensors.map(sensorData => (
+                <TableRow key={sensorData.id}>
+                  <TableCell component="th" scope="row">
+                    {sensorData.id}
+                  </TableCell>
+                  <TableCell align="left">
+                    {sensorData.temp}&deg;C
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+        {this.noSensors() &&
+          (
+            <Box color="warning.main" p={0} mt={0} mb={0}>
+              <Typography variant="body1">
+                <i>No connected Dallas temperature sensors detected</i>
+              </Typography>
+            </Box>
+          )
+        }
+      </TableContainer>
+    );
+  }
+
+  renderScanDevicesDialog() {
+    return (
+      <Dialog
+        open={this.state.confirmScanDevices}
+        onClose={this.onScanDevicesRejected}
+      >
+        <DialogTitle>Confirm Scan Devices</DialogTitle>
+        <DialogContent dividers>
+          Are you sure you want to initiate a scan on the EMS bus for all new devices?
+        </DialogContent>
+        <DialogActions>
+          <Button variant="contained" onClick={this.onScanDevicesRejected} color="secondary">
+            Cancel
+          </Button>
+          <Button startIcon={<RefreshIcon />} variant="contained" onClick={this.onScanDevicesConfirmed} disabled={this.state.processing} color="primary" autoFocus>
+            Start Scan
+          </Button>
+        </DialogActions>
+      </Dialog>
+    )
+  }
+
+  onScanDevices = () => {
+    this.setState({ confirmScanDevices: true });
+  }
+
+  onScanDevicesRejected = () => {
+    this.setState({ confirmScanDevices: false });
+  }
+
+  onScanDevicesConfirmed = () => {
+    this.setState({ processing: true });
+    redirectingAuthorizedFetch(SCANDEVICES_ENDPOINT).then(response => {
+      if (response.status === 200) {
+        this.props.enqueueSnackbar("Device scan is starting...", { variant: 'info' });
+        this.setState({ processing: false, confirmScanDevices: false });
+      } else {
+        throw Error("Invalid status code: " + response.status);
+      }
+    })
+      .catch(error => {
+        this.props.enqueueSnackbar(error.message || "Problem with scan", { variant: 'error' });
+        this.setState({ processing: false, confirmScanDevices: false });
+      });
+  }
+
+  handleRowClick = (id: any) => {
+    this.setState({ deviceData: undefined });
+    redirectingAuthorizedFetch(DEVICE_DATA_ENDPOINT, {
+      method: 'POST',
+      body: JSON.stringify({ id: id }),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }).then(response => {
+      if (response.status === 200) {
+        return response.json();
+        // this.setState({ errorMessage: undefined }, this.props.loadData);
+      }
+      throw Error("Unexpected response code: " + response.status);
+    }).then(json => {
+      this.setState({ deviceData: json });
+    }).catch(error => {
+      this.props.enqueueSnackbar(error.message || "Problem getting device data", { variant: 'error' });
+      this.setState({ deviceData: undefined });
+    });
+  }
+
+  renderDeviceData() {
+    const { deviceData } = this.state;
+    const { width } = this.props;
+
+    if (this.noDevices()) {
+      return;
+    }
+
+    if (!deviceData) {
+      return;
+    }
+
+    if ((deviceData.deviceData || []).length === 0) {
+      return;
+    }
+
+    return (
+      <Fragment>
+        <p></p>
+        <Box bgcolor="info.main" p={2} mt={1} mb={1}>
+          <Typography variant="body1">
+            {deviceData.deviceName}
+          </Typography>
+        </Box>
+
+        <TableContainer>
+          <Table size="small" padding={isWidthDown('xs', width!) ? "none" : "default"}>
+            <TableHead>
+            </TableHead>
+            <TableBody>
+              {deviceData.deviceData.map(deviceData => (
+                <TableRow key={deviceData.name}>
+                  <TableCell component="th" scope="row">
+                    {deviceData.name}
+                  </TableCell>
+                  <TableCell align="left">
+                    {deviceData.value}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Fragment>
+    );
+
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <br></br>
+        {this.createDeviceItems()}
+        {this.renderDeviceData()}
+        {this.createSensorItems()}
+        <br></br>
+        <Box display="flex" flexWrap="wrap">
+          <Box flexGrow={1} padding={1}>
+            <FormButton startIcon={<RefreshIcon />} variant="contained" color="secondary" onClick={this.props.loadData}>
+              Refresh
+            </FormButton>
+          </Box>
+          <Box flexWrap="none" padding={1} whiteSpace="nowrap">
+            <FormButton startIcon={<RefreshIcon />} variant="contained" color="primary" onClick={this.onScanDevices}>
+              Scan Devices
+              </FormButton>
+          </Box>
+        </Box>
+        {this.renderScanDevicesDialog()}
+      </Fragment>
+    );
+  }
+
+}
+
+export default withAuthenticatedContext(withWidth()(EMSESPDevicesForm));

interface/src/project/EMSESPHelp.tsx

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import { Typography, Box, Link } from '@material-ui/core';
+import { SectionContent } from '../components';
+
+class EMSESPHelp extends Component {
+
+    render() {
+        return (
+            <SectionContent title='EMS-ESP Help' titleGutter>
+
+                <Box bgcolor="info.main" border={1} p={3} mt={1} mb={0}>
+                    <Typography variant="body1">
+                        EMS-ESP is an open-source firmware to communicate with heating devices that support the EMS protocol, such as equipment from Bosch, Junkers, Nefit, Buderus and Worcester.
+            <p></p>
+            Please consider supporting this project via the GitHub page <Link href="https://github.com/proddy/EMS-ESP" color="primary">{'http://github.com/proddy/EMS-ESP'}</Link>.
+                    </Typography>
+                </Box>
+                <br></br>
+                <Typography variant="body1" paragraph>
+                    Check for news and updates on the <Link href="https://emsesp.github.io/docs/#/" color="primary">{'Wiki'}</Link>.
+                </Typography>
+                <Typography variant="body1" paragraph>
+                    For live community chat go to <Link href="https://gitter.im/EMS-ESP/community#" color="primary">{'Gitter'}</Link>.
+                </Typography>
+                <Typography variant="body1" paragraph>
+                    To report an issue or feature request go to <Link href="https://github.com/proddy/EMS-ESP/issues/new/choose" color="primary">{'the github project page'}</Link>.
+                </Typography>
+
+            </SectionContent>
+        )
+    }
+
+}
+
+export default EMSESPHelp;

interface/src/project/EMSESPSettings.tsx

@@ -0,0 +1,35 @@
+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';
+
+class EMSESP extends Component<RouteComponentProps> {
+
+  handleTabChange = (event: React.ChangeEvent<{}>, path: string) => {
+    this.props.history.push(path);
+  };
+
+  render() {
+    return (
+      <MenuAppBar sectionTitle="Settings">
+        <Tabs value={this.props.match.url} onChange={this.handleTabChange} variant="fullWidth">
+          <Tab value={`/${PROJECT_PATH}/settings`} label="EMS-ESP Settings" />
+        </Tabs>
+        <Switch>
+          <AuthenticatedRoute exact path={`/${PROJECT_PATH}/settings`} component={EMSESPSettingsController} />
+          <Redirect to={`/${PROJECT_PATH}/settings`} />
+        </Switch>
+      </MenuAppBar>
+
+    )
+  }
+
+}
+
+export default EMSESP;

interface/src/project/EMSESPSettingsController.tsx

@@ -0,0 +1,203 @@
+import React, { Component, Fragment } from 'react';
+import { ValidatorForm, TextValidator, SelectValidator } from 'react-material-ui-form-validator';
+
+import { Checkbox, Typography, Box, Link } 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 './EMSESPtypes';
+
+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, handleValueChange } = props;
+    return (
+        <ValidatorForm onSubmit={saveData}>
+            <Box bgcolor="info.main" p={2} mt={2} mb={2}>
+                <Typography variant="body1">
+                    Customize EMS-ESP by editing the default settings here. Refer to the <Link href="https://emsesp.github.io/docs/#/" color="primary">{'Wiki'}</Link>&nbsp;for descriptions of each setting.
+                </Typography>
+            </Box>
+            <TextValidator
+                validators={['required', 'isNumber', 'minNumber:0', 'maxNumber:255']}
+                errorMessages={['TX mode is required', "Must be a number", "Must be 0 or higher", "Max value is 255"]}
+                name="tx_mode"
+                label="Tx Mode (0=off, 1=EMS1.0, 2=EMS+, 3=HT3)"
+                fullWidth
+                variant="outlined"
+                value={data.tx_mode}
+                type="number"
+                onChange={handleValueChange('tx_mode')}
+                margin="normal"
+            />
+            <SelectValidator name="ems_bus_id"
+                label="Bus ID"
+                value={data.ems_bus_id}
+                fullWidth
+                variant="outlined"
+                onChange={handleValueChange('ems_bus_id')}
+                margin="normal">
+                <MenuItem value={0x0B}>Service Key (0x0B)</MenuItem>
+                <MenuItem value={0x0D}>Modem (0x0D)</MenuItem>
+                <MenuItem value={0x0A}>Terminal (0x0A)</MenuItem>
+                <MenuItem value={0x0F}>Time Module (0x0F)</MenuItem>
+                <MenuItem value={0x12}>Alarm Module (0x12)</MenuItem>
+            </SelectValidator>
+            <TextValidator
+                validators={['required', 'isNumber', 'minNumber:0', 'maxNumber:40']}
+                errorMessages={['Rx GPIO is required', "Must be a number", "Must be 0 or higher", "Max value is 255"]}
+                name="rx_gpio"
+                label="Rx GPIO pin"
+                fullWidth
+                variant="outlined"
+                value={data.rx_gpio}
+                type="number"
+                onChange={handleValueChange('rx_gpio')}
+                margin="normal"
+            />
+            <TextValidator
+                validators={['required', 'isNumber', 'minNumber:0', 'maxNumber:40']}
+                errorMessages={['Tx GPIO is required', "Must be a number", "Must be 0 or higher", "Max value is 255"]}
+                name="tx_gpio"
+                label="Tx GPIO pin"
+                fullWidth
+                variant="outlined"
+                value={data.tx_gpio}
+                type="number"
+                onChange={handleValueChange('tx_gpio')}
+                margin="normal"
+            />
+            <TextValidator
+                validators={['required', 'isNumber', 'minNumber:0', 'maxNumber:40']}
+                errorMessages={['LED GPIO is required', "Must be a number", "Must be 0 or higher", "Max value is 255"]}
+                name="led_gpio"
+                label="LED GPIO pin (0=none)"
+                fullWidth
+                variant="outlined"
+                value={data.led_gpio}
+                type="number"
+                onChange={handleValueChange('led_gpio')}
+                margin="normal"
+            />
+            <TextValidator
+                validators={['required', 'isNumber', 'minNumber:0', 'maxNumber:40']}
+                errorMessages={['Dallas GPIO is required', "Must be a number", "Must be 0 or higher", "Max value is 255"]}
+                name="dallas_gpio"
+                label="Dallas GPIO pin (0=none)"
+                fullWidth
+                variant="outlined"
+                value={data.dallas_gpio}
+                type="number"
+                onChange={handleValueChange('dallas_gpio')}
+                margin="normal"
+            />
+            <BlockFormControlLabel
+                control={
+                    <Checkbox
+                        checked={data.hide_led}
+                        onChange={handleValueChange('hide_led')}
+                        value="hide_led"
+                    />
+                }
+                label="Hide LED"
+            />
+            <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"
+            />
+            <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>
+            {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:0', 'maxNumber:65535']}
+                        errorMessages={['Syslog Mark is required', "Must be a number", "Must be 0 or higher (0=off)", "Max value is 65535"]}
+                        name="syslog_mark_interval"
+                        label="Syslog Mark Interval (seconds, 0=off)"
+                        fullWidth
+                        variant="outlined"
+                        value={data.syslog_mark_interval}
+                        type="number"
+                        onChange={handleValueChange('syslog_mark_interval')}
+                        margin="normal"
+                    />
+                </Fragment>
+            }
+            <FormActions>
+                <FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit">
+                    Save
+                </FormButton>
+            </FormActions>
+        </ValidatorForm>
+    );
+}

interface/src/project/EMSESPStatus.ts

@@ -0,0 +1,31 @@
+import { Theme } from '@material-ui/core';
+import { EMSESPStatus, busConnectionStatus } from './EMSESPtypes';
+
+export const isConnected = ({ status }: EMSESPStatus) => status !== busConnectionStatus.BUS_STATUS_OFFLINE;
+
+export const busStatusHighlight = ({ status }: EMSESPStatus, theme: Theme) => {
+
+  switch (status) {
+    case busConnectionStatus.BUS_STATUS_TX_ERRORS:
+      return theme.palette.warning.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 Errors";
+    case busConnectionStatus.BUS_STATUS_OFFLINE:
+      return "Disconnected";
+    default:
+      return "Unknown";
+  }
+}

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 './EMSESPtypes';
+
+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 Status">
+                <RestFormLoader
+                    {...this.props}
+                    render={formProps => <EMSESPStatusForm {...formProps} />}
+                />
+            </SectionContent>
+        )
+    }
+}
+
+export default restController(EMSESP_STATUS_ENDPOINT, EMSESPStatusController);

interface/src/project/EMSESPStatusForm.tsx

@@ -0,0 +1,138 @@
+import React, { Component, Fragment } from "react";
+
+import { WithTheme, withTheme, withStyles, Theme, createStyles } from "@material-ui/core/styles";
+import {
+  TableContainer,
+  Table,
+  Box,
+  Typography,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  withWidth,
+  WithWidthProps,
+  isWidthDown
+} from "@material-ui/core";
+
+import RefreshIcon from "@material-ui/icons/Refresh";
+import DeviceHubIcon from "@material-ui/icons/DeviceHub";
+
+import {
+  RestFormProps,
+  FormActions,
+  FormButton,
+  HighlightAvatar,
+} from "../components";
+
+import {
+  busStatus,
+  busStatusHighlight,
+  isConnected
+} from "./EMSESPStatus";
+
+import { EMSESPStatus } from "./EMSESPtypes";
+
+type EMSESPStatusFormProps = RestFormProps<EMSESPStatus> & WithTheme & WithWidthProps;
+
+const StyledTableCell = withStyles((theme: Theme) =>
+  createStyles({
+    head: {
+      backgroundColor: theme.palette.common.black,
+      color: theme.palette.common.white,
+    },
+    body: {
+      fontSize: 14,
+    },
+  }),
+)(TableCell);
+
+class EMSESPStatusForm extends Component<EMSESPStatusFormProps> {
+
+  rxErrors = () => {
+    return this.props.data.crc_errors !== 0;
+  }
+
+  createListItems() {
+    const { data, theme, width } = this.props;
+    return (
+      <Fragment>
+        <ListItem>
+          <ListItemAvatar>
+            <HighlightAvatar color={busStatusHighlight(data, theme)}>
+              <DeviceHubIcon />
+            </HighlightAvatar>
+          </ListItemAvatar>
+          <ListItemText primary="EMS Connection Status" secondary={busStatus(data)} />
+        </ListItem>
+        {isConnected(data) && (
+          <TableContainer>
+            <Table size="small" padding={isWidthDown('xs', width!) ? "none" : "default"}>
+              <TableHead>
+                <TableRow>
+                  <StyledTableCell>Statistic</StyledTableCell>
+                  <StyledTableCell align="center"># Telegrams</StyledTableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                <TableRow>
+                  <TableCell>
+                    (Rx) Received telegrams
+                  </TableCell>
+                  <TableCell align="center">{data.rx_received}</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell >
+                    (Rx) Incomplete telegrams
+                  </TableCell>
+                  <TableCell align="center">{data.crc_errors}</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell >
+                    (Tx) Successfully sent telegrams
+                  </TableCell>
+                  <TableCell align="center">{data.tx_sent}</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell >
+                    (Tx) Send Errors
+                  </TableCell>
+                  <TableCell align="center">{data.tx_errors}</TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+            <Fragment>
+              {this.rxErrors() && (
+                <Box bgcolor="warning.main" p={1} mt={0} mb={0}>
+                  <Typography variant="caption" color="textPrimary">
+                    <i>Note: Having a small number of incomplete Rx telegrams is normal and often caused by noise on the EMS line.</i>
+                  </Typography>
+                </Box>
+              )}
+            </Fragment>
+          </TableContainer>
+        )}
+      </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(withWidth()(EMSESPStatusForm));

interface/src/project/EMSESPtypes.ts

@@ -0,0 +1,60 @@
+export interface EMSESPSettings {
+  tx_mode: number;
+  ems_bus_id: number;
+  syslog_level: number;
+  syslog_mark_interval: number;
+  syslog_host: string;
+  master_thermostat: number;
+  shower_timer: boolean;
+  shower_alert: boolean;
+  hide_led: boolean;
+  rx_gpio: number;
+  tx_gpio : number;
+  dallas_gpio : number;
+  led_gpio : number;
+}
+
+export enum busConnectionStatus {
+  BUS_STATUS_CONNECTED = 0,
+  BUS_STATUS_TX_ERRORS = 1,
+  BUS_STATUS_OFFLINE = 2
+}
+
+export interface EMSESPStatus {
+  status: busConnectionStatus;
+  rx_received: number;
+  tx_sent: number;
+  crc_errors: number;
+  tx_errors: number;
+}
+
+export interface Device {
+  id: number;
+  type: string;
+  brand: string;
+  name: string;
+  deviceid: number;
+  productid: number;
+  version: string;
+}
+
+export interface Sensor {
+  id: string;
+  temp: number;
+}
+
+export interface EMSESPDevices {
+  devices: Device[];
+  sensors: Sensor[];
+}
+
+export interface DeviceData {
+  name: string;
+  value: string;
+}
+
+export interface EMSESPDeviceData {
+  deviceName: string;
+  deviceData: DeviceData[];
+}
+

interface/src/project/ProjectMenu.tsx

@@ -0,0 +1,36 @@
+import React, { Component } from "react";
+import { Link, withRouter, RouteComponentProps } from "react-router-dom";
+
+import { List, ListItem, ListItemIcon, ListItemText } from "@material-ui/core";
+
+import SettingsIcon from '@material-ui/icons/Settings';
+import SettingsRemoteIcon from "@material-ui/icons/SettingsRemote";
+
+import { withAuthenticatedContext, AuthenticatedContextProps } from '../authentication';
+
+type ProjectProps = AuthenticatedContextProps & RouteComponentProps;
+
+class ProjectMenu extends Component<ProjectProps> {
+  render() {
+    const { authenticatedContext } = this.props;
+    const path = this.props.match.url;
+    return (
+      <List>
+        <ListItem to='/ems-esp/' selected={path.startsWith('/ems-esp/status') || path.startsWith('/ems-esp/devices') || path.startsWith('/ems-esp/help')} button component={Link}>
+          <ListItemIcon>
+            <SettingsRemoteIcon />
+          </ListItemIcon>
+          <ListItemText primary="Dashboard" />
+        </ListItem>
+        <ListItem to='/ems-esp/settings' selected={path.startsWith('/ems-esp/settings')} button component={Link} disabled={!authenticatedContext.me.admin}>
+          <ListItemIcon>
+            <SettingsIcon />
+          </ListItemIcon>
+          <ListItemText primary="Settings" /> 
+        </ListItem>
+      </List>
+    );
+  }
+}
+
+export default withRouter(withAuthenticatedContext(ProjectMenu));

interface/src/project/ProjectRouting.tsx

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import { Redirect, Switch } from 'react-router';
+
+import { AuthenticatedRoute } from '../authentication';
+
+import EMSESP from './EMSESP';
+import EMSESPSettings from './EMSESPSettings';
+
+class ProjectRouting extends Component {
+
+  render() {
+    return (
+      <Switch>
+        <AuthenticatedRoute exact path="/ems-esp/status/*" component={EMSESP} />
+        <AuthenticatedRoute exact path="/ems-esp/settings" component={EMSESPSettings} />
+        <AuthenticatedRoute exact path="/ems-esp/*" 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={`/ems-esp/status`} />
+      </Switch>
+    )
+  }
+
+}
+
+export default ProjectRouting;

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,188 @@
+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 } = 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>
+          </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,52 @@
+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 } = 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">
+            The JWT secret is used to sign authentication tokens. If you modify the JWT Secret, all users will be signed out.
+          </Typography>
+        </Box>
+        <FormActions>
+          <FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit">
+            Save
+          </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;
+}
+