initial commit

.gitignore

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

.travis.yml

@@ -1,88 +1,72 @@
-os: linux
+os: linux
-dist: bionic
+dist: bionic
-language: python
+language: python
-python:
+python:
-  - "3.8"
+  - "3.8"
-
+
-cache:
+cache:
-  directories:
+  directories:
-    - ${HOME}/.pio
+    - ${HOME}/.pio
-
+
-env:
+env:
-  global:
+  global:
-    #   - BUILDER_TOTAL_THREADS=4
+    - BUILDER_TOTAL_THREADS=1
-    - BUILDER_TOTAL_THREADS=1
+    - OWNER=${TRAVIS_REPO_SLUG%/*}
-    - OWNER=${TRAVIS_REPO_SLUG%/*}
+    - DEV=${OWNER/proddy/v2}
-    - DEV=${OWNER/proddy/dev}
+    - BRANCH=${TRAVIS_BRANCH/v2/}
-    - BRANCH=${TRAVIS_BRANCH/dev/}
+    - TAG=${DEV}${BRANCH:+_}${BRANCH}
-    - TAG=${DEV}${BRANCH:+_}${BRANCH}
+
-
+install:
-install:
+  - env | grep TRAVIS
-  - env | grep TRAVIS
+  - set -e
-  - set -e
+  - pip install -U platformio
-  - pip install -U platformio
+  - pio platform update -p
-  - pio platform update -p
+  - set +e
-  - set +e
+
-
+branches:
-branches:
+  except:
-  except:
+    - /^travis-.*-build$/
-    - /^travis-.*-build$/
+
-
+script:
-script:
+  - ./scripts/build.sh
-  - ./scripts/build.sh
+
-# - ./scripts/build.sh -p
+stages:
-
+  - name: Release
-stages:
+
-  - name: Release
+jobs:
-#   if: type IN (cron, api)
+  include:
-
+    - stage: Release
-jobs:
+
-  include:
+before_deploy:
-    - stage: Release
+  - export FIRMWARE_VERSION=$(grep -E '^#define EMSESP_APP_VERSION' ./src/version.h | awk '{print $3}' | sed 's/"//g')
-#     env: BUILDER_THREAD=0
+  - git tag -f travis-${TAG}-build
-#   - env: BUILDER_THREAD=1
+  - git remote add gh
-#   - env: BUILDER_THREAD=2
+    https://${OWNER}:${GITHUB_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git
-#   - env: BUILDER_THREAD=3
+  - git push gh :travis-${TAG}-build || true
-
+  - git push -f gh travis-${TAG}-build
-before_deploy:
+  - git remote remove gh
-  - export FIRMWARE_VERSION=$(grep -E '^#define APP_VERSION' ./src/version.h | awk '{print $3}' | sed 's/"//g')
+
-  - git tag -f travis-${TAG}-build
+deploy:
-  - git remote add gh
+  provider: releases
-    https://${OWNER}:${GITHUB_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git
+  edge:
-  - git push gh :travis-${TAG}-build || true
+    branch: master
-  - git push -f gh travis-${TAG}-build
+  token: ${GITHUB_TOKEN}
-  - git remote remove gh
+  file_glob: true
-
+  file: "*.bin"
-deploy:
+  name: latest v2 development builds
-  provider: releases
+  release_notes:
-  edge:
+    Version $FIRMWARE_VERSION.
-  #  source: wenkokke/dpl
+    Automatic firmware builds of the current EMS-ESP branch built on $(date +'%F %T %Z') from commit $TRAVIS_COMMIT.
-    branch: master
+    Warning, this is a development build and not fully tested. Use at your own risk.
-  token: ${GITHUB_TOKEN}
+  cleanup: false
-  file_glob: true
+  prerelease: true
-  # file: "firmware/*.bin"
+  overwrite: true
-  file: "*.bin"
+  target_commitish: $TRAVIS_COMMIT
-  name: latest development build
+  on:
-  release_notes:
+    tags: false
-    Version $FIRMWARE_VERSION.
+    branch: v2
-    Automatic firmware builds of the current EMS-ESP branch built on $(date +'%F %T %Z') from commit $TRAVIS_COMMIT.
+
-    Warning, this is a development build and not fully tested. Use at your own risk.
+notifications:
-  cleanup: false
+  email:
-  prerelease: true
+    on_success: change
-  overwrite: true
+    on_failure: change
-  target_commitish: $TRAVIS_COMMIT
-  on:
-    tags: false
-    branch: dev
-
-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

LICENSE

@@ -1,165 +1,165 @@
-                   GNU LESSER GENERAL PUBLIC LICENSE
+                   GNU LESSER GENERAL PUBLIC LICENSE
-                       Version 3, 29 June 2007
+                       Version 3, 29 June 2007
-
+
- Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
- Everyone is permitted to copy and distribute verbatim copies
+ Everyone is permitted to copy and distribute verbatim copies
- of this license document, but changing it is not allowed.
+ of this license document, but changing it is not allowed.
-
+
-
+
-  This version of the GNU Lesser General Public License incorporates
+  This version of the GNU Lesser General Public License incorporates
-the terms and conditions of version 3 of the GNU General Public
+the terms and conditions of version 3 of the GNU General Public
-License, supplemented by the additional permissions listed below.
+License, supplemented by the additional permissions listed below.
-
+
-  0. Additional Definitions.
+  0. Additional Definitions.
-
+
-  As used herein, "this License" refers to version 3 of the GNU Lesser
+  As used herein, "this License" refers to version 3 of the GNU Lesser
-General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
-General Public License.
+General Public License.
-
+
-  "The Library" refers to a covered work governed by this License,
+  "The Library" refers to a covered work governed by this License,
-other than an Application or a Combined Work as defined below.
+other than an Application or a Combined Work as defined below.
-
+
-  An "Application" is any work that makes use of an interface provided
+  An "Application" is any work that makes use of an interface provided
-by the Library, but which is not otherwise based on the Library.
+by the Library, but which is not otherwise based on the Library.
-Defining a subclass of a class defined by the Library is deemed a mode
+Defining a subclass of a class defined by the Library is deemed a mode
-of using an interface provided by the Library.
+of using an interface provided by the Library.
-
+
-  A "Combined Work" is a work produced by combining or linking an
+  A "Combined Work" is a work produced by combining or linking an
-Application with the Library.  The particular version of the Library
+Application with the Library.  The particular version of the Library
-with which the Combined Work was made is also called the "Linked
+with which the Combined Work was made is also called the "Linked
-Version".
+Version".
-
+
-  The "Minimal Corresponding Source" for a Combined Work means the
+  The "Minimal Corresponding Source" for a Combined Work means the
-Corresponding Source for the Combined Work, excluding any source code
+Corresponding Source for the Combined Work, excluding any source code
-for portions of the Combined Work that, considered in isolation, are
+for portions of the Combined Work that, considered in isolation, are
-based on the Application, and not on the Linked Version.
+based on the Application, and not on the Linked Version.
-
+
-  The "Corresponding Application Code" for a Combined Work means the
+  The "Corresponding Application Code" for a Combined Work means the
-object code and/or source code for the Application, including any data
+object code and/or source code for the Application, including any data
-and utility programs needed for reproducing the Combined Work from the
+and utility programs needed for reproducing the Combined Work from the
-Application, but excluding the System Libraries of the Combined Work.
+Application, but excluding the System Libraries of the Combined Work.
-
+
-  1. Exception to Section 3 of the GNU GPL.
+  1. Exception to Section 3 of the GNU GPL.
-
+
-  You may convey a covered work under sections 3 and 4 of this License
+  You may convey a covered work under sections 3 and 4 of this License
-without being bound by section 3 of the GNU GPL.
+without being bound by section 3 of the GNU GPL.
-
+
-  2. Conveying Modified Versions.
+  2. Conveying Modified Versions.
-
+
-  If you modify a copy of the Library, and, in your modifications, a
+  If you modify a copy of the Library, and, in your modifications, a
-facility refers to a function or data to be supplied by an Application
+facility refers to a function or data to be supplied by an Application
-that uses the facility (other than as an argument passed when the
+that uses the facility (other than as an argument passed when the
-facility is invoked), then you may convey a copy of the modified
+facility is invoked), then you may convey a copy of the modified
-version:
+version:
-
+
-   a) under this License, provided that you make a good faith effort to
+   a) under this License, provided that you make a good faith effort to
-   ensure that, in the event an Application does not supply the
+   ensure that, in the event an Application does not supply the
-   function or data, the facility still operates, and performs
+   function or data, the facility still operates, and performs
-   whatever part of its purpose remains meaningful, or
+   whatever part of its purpose remains meaningful, or
-
+
-   b) under the GNU GPL, with none of the additional permissions of
+   b) under the GNU GPL, with none of the additional permissions of
-   this License applicable to that copy.
+   this License applicable to that copy.
-
+
-  3. Object Code Incorporating Material from Library Header Files.
+  3. Object Code Incorporating Material from Library Header Files.
-
+
-  The object code form of an Application may incorporate material from
+  The object code form of an Application may incorporate material from
-a header file that is part of the Library.  You may convey such object
+a header file that is part of the Library.  You may convey such object
-code under terms of your choice, provided that, if the incorporated
+code under terms of your choice, provided that, if the incorporated
-material is not limited to numerical parameters, data structure
+material is not limited to numerical parameters, data structure
-layouts and accessors, or small macros, inline functions and templates
+layouts and accessors, or small macros, inline functions and templates
-(ten or fewer lines in length), you do both of the following:
+(ten or fewer lines in length), you do both of the following:
-
+
-   a) Give prominent notice with each copy of the object code that the
+   a) Give prominent notice with each copy of the object code that the
-   Library is used in it and that the Library and its use are
+   Library is used in it and that the Library and its use are
-   covered by this License.
+   covered by this License.
-
+
-   b) Accompany the object code with a copy of the GNU GPL and this license
+   b) Accompany the object code with a copy of the GNU GPL and this license
-   document.
+   document.
-
+
-  4. Combined Works.
+  4. Combined Works.
-
+
-  You may convey a Combined Work under terms of your choice that,
+  You may convey a Combined Work under terms of your choice that,
-taken together, effectively do not restrict modification of the
+taken together, effectively do not restrict modification of the
-portions of the Library contained in the Combined Work and reverse
+portions of the Library contained in the Combined Work and reverse
-engineering for debugging such modifications, if you also do each of
+engineering for debugging such modifications, if you also do each of
-the following:
+the following:
-
+
-   a) Give prominent notice with each copy of the Combined Work that
+   a) Give prominent notice with each copy of the Combined Work that
-   the Library is used in it and that the Library and its use are
+   the Library is used in it and that the Library and its use are
-   covered by this License.
+   covered by this License.
-
+
-   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
-   document.
+   document.
-
+
-   c) For a Combined Work that displays copyright notices during
+   c) For a Combined Work that displays copyright notices during
-   execution, include the copyright notice for the Library among
+   execution, include the copyright notice for the Library among
-   these notices, as well as a reference directing the user to the
+   these notices, as well as a reference directing the user to the
-   copies of the GNU GPL and this license document.
+   copies of the GNU GPL and this license document.
-
+
-   d) Do one of the following:
+   d) Do one of the following:
-
+
-       0) Convey the Minimal Corresponding Source under the terms of this
+       0) Convey the Minimal Corresponding Source under the terms of this
-       License, and the Corresponding Application Code in a form
+       License, and the Corresponding Application Code in a form
-       suitable for, and under terms that permit, the user to
+       suitable for, and under terms that permit, the user to
-       recombine or relink the Application with a modified version of
+       recombine or relink the Application with a modified version of
-       the Linked Version to produce a modified Combined Work, in the
+       the Linked Version to produce a modified Combined Work, in the
-       manner specified by section 6 of the GNU GPL for conveying
+       manner specified by section 6 of the GNU GPL for conveying
-       Corresponding Source.
+       Corresponding Source.
-
+
-       1) Use a suitable shared library mechanism for linking with the
+       1) Use a suitable shared library mechanism for linking with the
-       Library.  A suitable mechanism is one that (a) uses at run time
+       Library.  A suitable mechanism is one that (a) uses at run time
-       a copy of the Library already present on the user's computer
+       a copy of the Library already present on the user's computer
-       system, and (b) will operate properly with a modified version
+       system, and (b) will operate properly with a modified version
-       of the Library that is interface-compatible with the Linked
+       of the Library that is interface-compatible with the Linked
-       Version.
+       Version.
-
+
-   e) Provide Installation Information, but only if you would otherwise
+   e) Provide Installation Information, but only if you would otherwise
-   be required to provide such information under section 6 of the
+   be required to provide such information under section 6 of the
-   GNU GPL, and only to the extent that such information is
+   GNU GPL, and only to the extent that such information is
-   necessary to install and execute a modified version of the
+   necessary to install and execute a modified version of the
-   Combined Work produced by recombining or relinking the
+   Combined Work produced by recombining or relinking the
-   Application with a modified version of the Linked Version. (If
+   Application with a modified version of the Linked Version. (If
-   you use option 4d0, the Installation Information must accompany
+   you use option 4d0, the Installation Information must accompany
-   the Minimal Corresponding Source and Corresponding Application
+   the Minimal Corresponding Source and Corresponding Application
-   Code. If you use option 4d1, you must provide the Installation
+   Code. If you use option 4d1, you must provide the Installation
-   Information in the manner specified by section 6 of the GNU GPL
+   Information in the manner specified by section 6 of the GNU GPL
-   for conveying Corresponding Source.)
+   for conveying Corresponding Source.)
-
+
-  5. Combined Libraries.
+  5. Combined Libraries.
-
+
-  You may place library facilities that are a work based on the
+  You may place library facilities that are a work based on the
-Library side by side in a single library together with other library
+Library side by side in a single library together with other library
-facilities that are not Applications and are not covered by this
+facilities that are not Applications and are not covered by this
-License, and convey such a combined library under terms of your
+License, and convey such a combined library under terms of your
-choice, if you do both of the following:
+choice, if you do both of the following:
-
+
-   a) Accompany the combined library with a copy of the same work based
+   a) Accompany the combined library with a copy of the same work based
-   on the Library, uncombined with any other library facilities,
+   on the Library, uncombined with any other library facilities,
-   conveyed under the terms of this License.
+   conveyed under the terms of this License.
-
+
-   b) Give prominent notice with the combined library that part of it
+   b) Give prominent notice with the combined library that part of it
-   is a work based on the Library, and explaining where to find the
+   is a work based on the Library, and explaining where to find the
-   accompanying uncombined form of the same work.
+   accompanying uncombined form of the same work.
-
+
-  6. Revised Versions of the GNU Lesser General Public License.
+  6. Revised Versions of the GNU Lesser General Public License.
-
+
-  The Free Software Foundation may publish revised and/or new versions
+  The Free Software Foundation may publish revised and/or new versions
-of the GNU Lesser General Public License from time to time. Such new
+of the GNU Lesser General Public License from time to time. Such new
-versions will be similar in spirit to the present version, but may
+versions will be similar in spirit to the present version, but may
-differ in detail to address new problems or concerns.
+differ in detail to address new problems or concerns.
-
+
-  Each version is given a distinguishing version number. If the
+  Each version is given a distinguishing version number. If the
-Library as you received it specifies that a certain numbered version
+Library as you received it specifies that a certain numbered version
-of the GNU Lesser General Public License "or any later version"
+of the GNU Lesser General Public License "or any later version"
-applies to it, you have the option of following the terms and
+applies to it, you have the option of following the terms and
-conditions either of that published version or of any later version
+conditions either of that published version or of any later version
-published by the Free Software Foundation. If the Library as you
+published by the Free Software Foundation. If the Library as you
-received it does not specify a version number of the GNU Lesser
+received it does not specify a version number of the GNU Lesser
-General Public License, you may choose any version of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
-General Public License ever published by the Free Software Foundation.
+General Public License ever published by the Free Software Foundation.
-
+
-  If the Library as you received it specifies that a proxy can decide
+  If the Library as you received it specifies that a proxy can decide
-whether future versions of the GNU Lesser General Public License shall
+whether future versions of the GNU Lesser General Public License shall
-apply, that proxy's public statement of acceptance of any version is
+apply, that proxy's public statement of acceptance of any version is
-permanent authorization for you to choose that version for the
+permanent authorization for you to choose that version for the
-Library.
+Library.

README.md

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

TODO.md

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

factory_settings.ini

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

features.ini

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

interface/.env

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

interface/.env.development

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

interface/.env.production

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

interface/config-overrides.js

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

interface/package.json

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

interface/progmem-generator.js

@@ -0,0 +1,122 @@
+const { resolve, relative, sep } = require('path');
+const { readdirSync, existsSync, unlinkSync, readFileSync, createWriteStream } = require('fs');
+var zlib = require('zlib');
+var mime = require('mime-types');
+
+const ARDUINO_INCLUDES = "#include <Arduino.h>\n\n";
+
+function getFilesSync(dir, files = []) {
+  readdirSync(dir, { withFileTypes: true }).forEach(entry => {
+    const entryPath = resolve(dir, entry.name);
+    if (entry.isDirectory()) {
+      getFilesSync(entryPath, files);
+    } else {
+      files.push(entryPath);
+    }
+  })
+  return files;
+}
+
+function coherseToBuffer(input) {
+  return Buffer.isBuffer(input) ? input : Buffer.from(input);
+}
+
+function cleanAndOpen(path) {
+  if (existsSync(path)) {
+    unlinkSync(path);
+  }
+  return createWriteStream(path, { flags: "w+" });
+}
+
+class ProgmemGenerator {
+
+  constructor(options = {}) {
+    const { outputPath, bytesPerLine = 20, indent = "  ", includes = ARDUINO_INCLUDES } = options;
+    this.options = { outputPath, bytesPerLine, indent, includes };
+  }
+
+  apply(compiler) {
+    compiler.hooks.emit.tapAsync(
+      { name: 'ProgmemGenerator' },
+      (compilation, callback) => {
+        const { outputPath, bytesPerLine, indent, includes } = this.options;
+        const fileInfo = [];
+        const writeStream = cleanAndOpen(resolve(compilation.options.context, outputPath));
+        try {
+          const writeIncludes = () => {
+            writeStream.write(includes);
+          }
+
+          const writeFile = (relativeFilePath, buffer) => {
+            const variable = "ESP_REACT_DATA_" + fileInfo.length;
+            const mimeType = mime.lookup(relativeFilePath);
+            var size = 0;
+            writeStream.write("const uint8_t " + variable + "[] PROGMEM = {");
+            const zipBuffer = zlib.gzipSync(buffer);
+            zipBuffer.forEach((b) => {
+              if (!(size % bytesPerLine)) {
+                writeStream.write("\n");
+                writeStream.write(indent);
+              }
+              writeStream.write("0x" + ("00" + b.toString(16).toUpperCase()).substr(-2) + ",");
+              size++;
+            });
+            if (size % bytesPerLine) {
+              writeStream.write("\n");
+            }
+            writeStream.write("};\n\n");
+            fileInfo.push({
+              uri: '/' + relativeFilePath.replace(sep, '/'),
+              mimeType,
+              variable,
+              size
+            });
+          };
+
+          const writeFiles = () => {
+            // process static files
+            const buildPath = compilation.options.output.path;
+            for (const filePath of getFilesSync(buildPath)) {
+              const readStream = readFileSync(filePath);
+              const relativeFilePath = relative(buildPath, filePath);
+              writeFile(relativeFilePath, readStream);
+            }
+            // process assets
+            const { assets } = compilation;
+            Object.keys(assets).forEach((relativeFilePath) => {
+              writeFile(relativeFilePath, coherseToBuffer(assets[relativeFilePath].source()));
+            });
+          }
+
+          const generateWWWClass = () => {
+            return `typedef std::function<void(const String& uri, const String& contentType, const uint8_t * content, size_t len)> RouteRegistrationHandler;          
+
+class WWWData {
+${indent}public:
+${indent.repeat(2)}static void registerRoutes(RouteRegistrationHandler handler) {
+${fileInfo.map(file => `${indent.repeat(3)}handler("${file.uri}", "${file.mimeType}", ${file.variable}, ${file.size});`).join('\n')}
+${indent.repeat(2)}}
+};
+`;
+          }
+
+          const writeWWWClass = () => {
+            writeStream.write(generateWWWClass());
+          }
+
+          writeIncludes();
+          writeFiles();
+          writeWWWClass();
+
+          writeStream.on('finish', () => {
+            callback();
+          });
+        } finally {
+          writeStream.end();
+        }
+      }
+    );
+  }
+}
+
+module.exports = ProgmemGenerator;

interface/public/app/manifest.json

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

interface/public/css/roboto.css

@@ -0,0 +1,22 @@
+/* Just supporting latin due to size constrains on the esp chip */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(../fonts/li.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/re.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/me.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
+}

interface/public/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" href="%PUBLIC_URL%/css/roboto.css">
+    <link rel="manifest" href="%PUBLIC_URL%/app/manifest.json">
+    <title>EMS-ESP</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+  </body>
+</html>

interface/src/App.tsx

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

interface/src/AppRouting.tsx

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

interface/src/CustomMuiTheme.tsx

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

interface/src/SignIn.tsx

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

interface/src/ap/APModes.ts

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

interface/src/ap/APSettingsController.tsx

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

interface/src/ap/APSettingsForm.tsx

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

interface/src/ap/APStatus.ts

@@ -0,0 +1,28 @@
+import { Theme } from "@material-ui/core";
+import { APStatus, APNetworkStatus } from "./types";
+
+export const apStatusHighlight = ({ status }: APStatus, theme: Theme) => {
+  switch (status) {
+    case APNetworkStatus.ACTIVE:
+      return theme.palette.success.main;
+    case APNetworkStatus.INACTIVE:
+      return theme.palette.info.main;
+    case APNetworkStatus.LINGERING:
+      return theme.palette.warning.main;
+    default:
+      return theme.palette.warning.main;
+  }
+}
+
+export const apStatus = ({ status }: APStatus) => {
+  switch (status) {
+    case APNetworkStatus.ACTIVE:
+      return "Active";
+    case APNetworkStatus.INACTIVE:
+      return "Inactive";
+    case APNetworkStatus.LINGERING:
+      return "Lingering until idle";
+    default:
+      return "Unknown";
+  }
+};

interface/src/ap/APStatusController.tsx

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

interface/src/ap/APStatusForm.tsx

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

interface/src/ap/AccessPoint.tsx

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

interface/src/ap/types.ts

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

interface/src/api/Endpoints.ts

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

interface/src/api/Env.ts

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

interface/src/api/index.ts

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

interface/src/authentication/AuthenticatedRoute.tsx

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

interface/src/authentication/Authentication.ts

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

interface/src/authentication/AuthenticationContext.tsx

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

interface/src/authentication/AuthenticationWrapper.tsx

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

interface/src/authentication/UnauthenticatedRoute.tsx

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

interface/src/authentication/index.ts

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

interface/src/components/ApplicationError.tsx

@@ -0,0 +1,59 @@
+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/styles';
+import { Paper, Typography, Box, CssBaseline } from "@material-ui/core";
+import WarningIcon from "@material-ui/icons/Warning"
+
+const styles = makeStyles(
+  {
+    siteErrorPage: {
+      display: "flex",
+      height: "100vh",
+      justifyContent: "center",
+      flexDirection: "column"
+    },
+    siteErrorPagePanel: {
+      textAlign: "center",
+      padding: "280px 0 40px 0",
+      backgroundImage: 'url("/app/icon.png")',
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "50% 40px",
+      backgroundSize: "200px auto",
+      width: "100%",
+    }
+  }
+);
+
+interface ApplicationErrorProps {
+  error?: string;
+}
+
+const ApplicationError: FC<ApplicationErrorProps> = ({ error }) => {
+  const classes = styles();
+  return (
+    <div className={classes.siteErrorPage}>
+      <CssBaseline />
+      <Paper className={classes.siteErrorPagePanel} elevation={10}>
+        <Box display="flex" flexDirection="row" justifyContent="center" alignItems="center" mb={2}>
+          <WarningIcon fontSize="large" color="error" />
+          <Box ml={2}>
+            <Typography variant="h4">
+              Application error
+            </Typography>
+          </Box>
+        </Box>
+        <Typography variant="subtitle1" gutterBottom>
+          Failed to configure the application, please refresh to try again.
+        </Typography>
+        {error &&
+          (
+            <Typography variant="subtitle2" gutterBottom>
+              Error: {error}
+            </Typography>
+          )
+        }
+      </Paper>
+    </div>
+  );
+}
+
+export default ApplicationError;

interface/src/components/BlockFormControlLabel.tsx

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

interface/src/components/ErrorButton.tsx

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

interface/src/components/FormActions.tsx

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

interface/src/components/FormButton.tsx

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

interface/src/components/FullScreenLoading.tsx

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

interface/src/components/HighlightAvatar.tsx

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

interface/src/components/MenuAppBar.tsx

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

interface/src/components/PasswordValidator.tsx

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

interface/src/components/RestController.tsx

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

interface/src/components/RestFormLoader.tsx

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

interface/src/components/SectionContent.tsx

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

interface/src/components/SingleUpload.tsx

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

interface/src/components/WebSocketController.tsx

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

interface/src/components/WebSocketFormLoader.tsx

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

interface/src/components/index.ts

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

interface/src/features/ApplicationContext.tsx

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

interface/src/features/FeaturesContext.tsx

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

interface/src/features/FeaturesWrapper.tsx

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

interface/src/features/types.ts

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

interface/src/history.ts

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

interface/src/index.tsx

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

interface/src/mqtt/Mqtt.tsx

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

interface/src/mqtt/MqttSettingsController.tsx

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

interface/src/mqtt/MqttSettingsForm.tsx

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

interface/src/mqtt/MqttStatus.ts

@@ -0,0 +1,45 @@
+import { Theme } from "@material-ui/core";
+import { MqttStatus, MqttDisconnectReason } from "./types";
+
+export const mqttStatusHighlight = ({ enabled, connected }: MqttStatus, theme: Theme) => {
+  if (!enabled) {
+    return theme.palette.info.main;
+  }
+  if (connected) {
+    return theme.palette.success.main;
+  }
+  return theme.palette.error.main;
+}
+
+export const mqttStatus = ({ enabled, connected }: MqttStatus) => {
+  if (!enabled) {
+    return "Not enabled";
+  }
+  if (connected) {
+    return "Connected";
+  }
+  return "Disconnected";
+}
+
+export const disconnectReason = ({ disconnect_reason }: MqttStatus) => {
+  switch (disconnect_reason) {
+    case MqttDisconnectReason.TCP_DISCONNECTED:
+      return "TCP disconnected";
+    case MqttDisconnectReason.MQTT_UNACCEPTABLE_PROTOCOL_VERSION:
+      return "Unacceptable protocol version";
+    case MqttDisconnectReason.MQTT_IDENTIFIER_REJECTED:
+      return "Client ID rejected";
+    case MqttDisconnectReason.MQTT_SERVER_UNAVAILABLE:
+      return "Server unavailable";
+    case MqttDisconnectReason.MQTT_MALFORMED_CREDENTIALS:
+      return "Malformed credentials";
+    case MqttDisconnectReason.MQTT_NOT_AUTHORIZED:
+      return "Not authorized";
+    case MqttDisconnectReason.ESP8266_NOT_ENOUGH_SPACE:
+      return "Device out of memory";
+    case MqttDisconnectReason.TLS_BAD_FINGERPRINT:
+      return "Server fingerprint invalid";
+    default:
+      return "Unknown"
+  }
+}

interface/src/mqtt/MqttStatusController.tsx

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

interface/src/mqtt/MqttStatusForm.tsx

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

interface/src/mqtt/types.ts

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

interface/src/ntp/NTPSettingsController.tsx

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

interface/src/ntp/NTPSettingsForm.tsx

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

interface/src/ntp/NTPStatus.ts

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

interface/src/ntp/NTPStatusController.tsx

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

interface/src/ntp/NTPStatusForm.tsx

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

interface/src/ntp/NetworkTime.tsx

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

interface/src/ntp/TZ.tsx

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

interface/src/ntp/TimeFormat.ts

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

interface/src/ntp/types.ts

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

interface/src/project/EMSESP.tsx

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

interface/src/project/EMSESPSettingsController.tsx

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

interface/src/project/EMSESPStatus.ts

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

interface/src/project/EMSESPStatusController.tsx

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

interface/src/project/EMSESPStatusForm.tsx

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

interface/src/project/ProjectMenu.tsx

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

interface/src/project/ProjectRouting.tsx

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

interface/src/project/types.ts

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

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

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

interface/src/security/ManageUsersController.tsx

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

interface/src/security/ManageUsersForm.tsx

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

interface/src/security/Security.tsx

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

interface/src/security/SecuritySettingsController.tsx

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

interface/src/security/SecuritySettingsForm.tsx

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

interface/src/security/UserForm.tsx

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

interface/src/security/types.ts

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

interface/src/serviceWorker.ts

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

interface/src/system/OTASettingsController.tsx

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