3.6.4

fix router loops

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,35 +1,50 @@
 ---
-name: Bug report
+name: Problem Report
-about: Create a report to help us improve
+about: Create a Report to help us improve
-title: ''
-labels: bug
-assignees: ''
-
 ---
 
-*Before creating a new issue please check that you have:*
+<!-- Thanks for reporting a problem for this project. READ THIS FIRST:
 
-* *searched the existing [issues](https://github.com/emsesp/EMS-ESP32/issues) (both open and closed)*
+Please DO NOT OPEN AN ISSUE if your EMS-ESP version is not the latest from the dev branch, please update your device before submitting your issue. Your problem might already be solved. The latest precompiled binaries of EMS-ESP can be downloaded from https://github.com/emsesp/EMS-ESP32/releases/tag/latest
-* *searched the [documentation help section](https://emsesp.github.io/docs)*
 
-*Completing this template will help developers and contributors to address the issue. Try to be as specific and extensive as possible. If the information provided is not enough the issue will likely be closed.*
+Please take a few minutes to complete the requested information below.
 
-*You can now remove this line and the above ones. Text in italic is meant to be replaced by your own words. If any of the sections below are not relevant to the issue (for instance, the screenshots) then you can delete them.*
+-->
 
-**Bug description**
+### PROBLEM DESCRIPTION
-*A clear and concise description of what the bug is. Mention which EMS-ESP version you're using.*
 
-**Steps to reproduce**
+_A clear and concise description of what the problem is._
-*Steps to reproduce the behavior.*
 
-**Expected behavior**
+### REQUESTED INFORMATION
-*A clear and concise description of what you expected to happen.*
 
-**Screenshots**
+_Make sure your have performed every step and checked the applicable boxes before submitting your issue. Thank you!_
-*If applicable, add screenshots to help explain your problem.*
 
-**Device information**
+- [ ] Searched the problem in [issues](https://github.com/emsesp/EMS-ESP32/issues)
-*Copy-paste here the information as it is outputted by the device. You can get this information by from http://ems-esp.local/api/system*
+- [ ] Searched the problem in [discussions](https://github.com/emsesp/EMS-ESP32/discussions)
+- [ ] Searched the problem in the [docs](https://emsesp.github.io/docs/Troubleshooting/)
+- [ ] Searched the problem in the [chat](https://discord.gg/3J3GgnzpyT)
+- [ ] Provide the output of http://ems-esp.local/api/system :
 
-**Additional context**
+```lua
-*Add any other context about the problem here.*
+  System information output here:
+
+
+```
+
+### TO REPRODUCE
+
+_Steps to reproduce the behavior:_
+
+### EXPECTED BEHAVIOUR
+
+_A clear and concise description of what you expected to happen._
+
+### SCREENSHOTS
+
+_If applicable, add screenshots to help explain your problem._
+
+### ADDITIONAL CONTEXT
+
+_Add any other context about the problem here._
+
+**(Please, remember to close the issue when the problem has been addressed)**

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,11 @@
+blank_issues_enabled: false
+contact_links:
+  - name: EMS-ESP Docs
+    url: https://emsesp.github.io/docs/
+    about: All the information related to EMS-ESP.
+  - name: EMS-ESP Discussions and Support
+    url: https://github.com/emsesp/EMS-ESP32/discussions
+    about: EMS-ESP usage Questions, Feature Requests and Projects.
+  - name: EMS-ESP Users Chat
+    url: https://discord.gg/3J3GgnzpyT
+    about: Chat for feedback, questions and troubleshooting.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,26 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: enhancement
-assignees: ''
-
----
-
-*Before creating a new feature request please check that you have searched the existing [issues](https://github.com/emsesp/EMS-ESP32/issues) (both open and closed)*
-
-*Completing this template will help developers and contributors evaluating the feature. If the information provided is not enough the issue will likely be closed.*
-
-*You can now remove this line and the above ones. Text in italic is meant to be replaced by your own words. If any of the sections below are not relevant to the request then you can delete them.*
-
-**Is your feature request related to a problem? Please describe.**
-*A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]*
-
-**Describe the solution you'd like**
-*A clear and concise description of what you want to happen.*
-
-**Describe alternatives you've considered**
-*A clear and concise description of any alternative solutions or features you've considered.*
-
-**Additional context**
-*Add any other context or screenshots about the feature request here.*

.github/ISSUE_TEMPLATE/questions---troubleshooting.md

@@ -1,29 +0,0 @@
----
-name: Questions & Troubleshooting
-about: Anything not a bug or feature request
-title: ''
-labels: question
-assignees: ''
-
----
-
-*Before creating a new issue please check that you have:*
-
-* *searched the existing [issues](https://github.com/emsesp/EMS-ESP32/issues) (both open and closed)*
-* *searched the [documentation help section](https://emsesp.github.io/docs)*
-
-*Completing this template will help developers and contributors help you. Try to be as specific and extensive as possible. If the information provided is not enough the issue will likely be closed.*
-
-*You can now remove this line and the above ones. Text in italic is meant to be replaced by your own words. If any of the sections below are not relevant to the issue (for instance, the screenshots) then you can delete them.*
-
-**Question**
-*A clear and concise description of what the problem/doubt is.*
-
-**Screenshots**
-*If applicable, add screenshots to help explain your problem.*
-
-**Device information**
-*Copy-paste here the information as it is outputted by the device. You can get this information from http://ems-esp.local/api/system*
-
-**Additional context**
-*Add any other context about the problem here.*

.github/workflows/github-releases-to-discord.yml

@@ -0,0 +1,24 @@
+name: 'github-releases-to-discord'
+
+on:
+  workflow_dispatch:
+  release:
+    types: [published]
+
+jobs:
+  github-releases-to-discord:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Github Releases To Discord
+        uses: SethCohen/github-releases-to-discord@v1.13.1
+        with:
+          webhook_url: ${{ secrets.WEBHOOK_URL }}
+          color: '2105893'
+          username: 'Release Changelog'
+          avatar_url: 'https://cdn.discordapp.com/icons/816637840644505620/0b14718532d855c452903851b4f0c9a2.png'
+          content: '||@everyone||'
+          footer_title: 'Changelog'
+          footer_icon_url: 'https://cdn.discordapp.com/icons/816637840644505620/0b14718532d855c452903851b4f0c9a2.png'
+          footer_timestamp: true

.github/workflows/pre_release.yml

@@ -1,57 +1,61 @@
-name: "pre-release"
+name: 'pre-release'
 
 on:
   workflow_dispatch:
   push:
     branches:
-      - "dev"
+      - 'dev'
 
 jobs:
   pre-release:
-
+    name: 'Automatic pre-release build'
-    name: "Automatic pre-release build"
     runs-on: ubuntu-latest
 
     steps:
-    
+      - uses: actions/checkout@v4
-      - uses: actions/checkout@v2
+      - uses: actions/setup-python@v4
-      - uses: actions/setup-python@v2
-      - uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          python-version: '3.11'
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
 
       - name: Get EMS-ESP source code and version
         id: build_info
         run: |
           version=`grep -E '^#define EMSESP_APP_VERSION' ./src/version.h | awk -F'"' '{print $2}'`
-          echo "::set-output name=version::$version"
+          echo "VERSION=$version" >> $GITHUB_OUTPUT
 
       - name: Install PlatformIO
         run: |
           python -m pip install --upgrade pip
           pip install -U platformio
-          platformio upgrade
-          platformio update
 
       - name: Build WebUI
         run: |
           cd interface
-          npm ci
+          yarn install
-          npm run build
+          yarn typesafe-i18n --no-watch
+          sed -i "s/= 'pl'/= 'en'/" ./src/i18n/i18n-util.ts
+          yarn build
+          yarn webUI
 
       - name: Build firmware
         run: |
           platformio run -e ci
 
+      - name: Build S3 firmware
+        run: |
+          platformio run -e ci_s3
+
       - name: Create a GH Release
-        id: "automatic_releases"
+        id: 'automatic_releases'
-        uses: "marvinpinto/action-automatic-releases@latest"
+        uses: 'marvinpinto/action-automatic-releases@latest'
         with:
-          repo_token: "${{ secrets.GITHUB_TOKEN }}"
+          repo_token: '${{ secrets.GITHUB_TOKEN }}'
-          title: Development Build v${{steps.build_info.outputs.version}}
+          title: Development Build v${{steps.build_info.outputs.VERSION}}
-          automatic_release_tag: "latest"
+          automatic_release_tag: 'latest'
           prerelease: true
           files: |
             CHANGELOG_LATEST.md
             ./build/firmware/*.*
-            

.github/workflows/sonar_check.yml

@@ -7,50 +7,24 @@ on:
     types: [opened, synchronize, reopened]
 jobs:
   build:
-    name: Build
+    name: Build and analyze
     runs-on: ubuntu-latest
+    # if: github.repository_owner == 'emsesp'
+    # if: github.repository == 'emsesp/EMS-ESP32'
     env:
-      # https://binaries.sonarsource.com/?prefix=Distribution/sonar-scanner-cli/
+      BUILD_WRAPPER_OUT_DIR: bw-output
-      # SONAR_SCANNER_VERSION: 4.6.1.2450
-      SONAR_SCANNER_VERSION: 4.7.0.2747                                
-      SONAR_SERVER_URL: "https://sonarcloud.io"
-      BUILD_WRAPPER_OUT_DIR: build_wrapper_output_directory
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis
-      - name: Set up JDK 11
+      - name: Install sonar-scanner and build-wrapper
-        uses: actions/setup-java@v1
+        uses: SonarSource/sonarcloud-github-c-cpp@v2
-        with:
-          java-version: 11
-      - name: Cache SonarCloud packages
-        uses: actions/cache@v1
-        with:
-          path: ~/.sonar/cache
-          key: ${{ runner.os }}-sonar
-          restore-keys: ${{ runner.os }}-sonar
-      - name: Download and set up sonar-scanner
-        env:
-          SONAR_SCANNER_DOWNLOAD_URL: https://binaries.sonarsource.com/Distribution/sonar-scanner-cli/sonar-scanner-cli-${{ env.SONAR_SCANNER_VERSION }}-linux.zip
-        run: |
-          mkdir -p $HOME/.sonar
-          curl -sSLo $HOME/.sonar/sonar-scanner.zip ${{ env.SONAR_SCANNER_DOWNLOAD_URL }} 
-          unzip -o $HOME/.sonar/sonar-scanner.zip -d $HOME/.sonar/
-          echo "$HOME/.sonar/sonar-scanner-${{ env.SONAR_SCANNER_VERSION }}-linux/bin" >> $GITHUB_PATH
-      - name: Download and set up build-wrapper
-        env:
-          BUILD_WRAPPER_DOWNLOAD_URL: ${{ env.SONAR_SERVER_URL }}/static/cpp/build-wrapper-linux-x86.zip
-        run: |
-          curl -sSLo $HOME/.sonar/build-wrapper-linux-x86.zip ${{ env.BUILD_WRAPPER_DOWNLOAD_URL }}
-          unzip -o $HOME/.sonar/build-wrapper-linux-x86.zip -d $HOME/.sonar/
-          echo "$HOME/.sonar/build-wrapper-linux-x86" >> $GITHUB_PATH
       - name: Run build-wrapper
         run: |
-          make clean
+          build-wrapper-linux-x86-64 --out-dir ${{ env.BUILD_WRAPPER_OUT_DIR }} make all
-          build-wrapper-linux-x86-64 --out-dir ${{ env.BUILD_WRAPPER_OUT_DIR }} make clean all
       - name: Run sonar-scanner
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
         run: |
-          sonar-scanner
+          sonar-scanner --define sonar.cfamily.build-wrapper-output="${{ env.BUILD_WRAPPER_OUT_DIR }}"

.github/workflows/tagged_release.yml

@@ -1,45 +1,52 @@
-name: "tagged-release"
+name: 'tagged-release'
 
 on:
   push:
     tags:
-      - "v*"
+      - 'v*'
 
 jobs:
   tagged-release:
-
+    name: 'Tagged Release'
-    name: "Tagged Release"
     runs-on: ubuntu-latest
 
     steps:
-
+      - uses: actions/checkout@v4
-      - uses: actions/checkout@v2
+      - uses: actions/setup-python@v4
-      - uses: actions/setup-python@v2
-      - uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          python-version: '3.11'
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
 
       - name: Install PlatformIO
         run: |
           python -m pip install --upgrade pip
           pip install -U platformio
           platformio upgrade
-          platformio update
+          pio pkg update
 
       - name: Build WebUI
         run: |
           cd interface
-          npm ci
+          yarn install
-          npm run build
+          yarn typesafe-i18n --no-watch
+          sed -i "s/= 'pl'/= 'en'/" ./src/i18n/i18n-util.ts
+          yarn build
+          yarn webUI
 
       - name: Build firmware
         run: |
           platformio run -e ci
 
+      - name: Build S3 firmware
+        run: |
+          platformio run -e ci_s3
+
       - name: Release
-        uses: "marvinpinto/action-automatic-releases@latest"
+        uses: 'marvinpinto/action-automatic-releases@latest'
         with:
-          repo_token: "${{ secrets.GITHUB_TOKEN }}"
+          repo_token: '${{ secrets.GITHUB_TOKEN }}'
           prerelease: false
           files: |
             CHANGELOG.md

.github/workflows/test_release.yml

@@ -0,0 +1,61 @@
+name: 'test-release'
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - 'dev2'
+
+jobs:
+  pre-release:
+    name: 'Automatic test-release build'
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v4
+        with:
+          python-version: '3.11'
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Get EMS-ESP source code and version
+        id: build_info
+        run: |
+          version=`grep -E '^#define EMSESP_APP_VERSION' ./src/version.h | awk -F'"' '{print $2}'`
+          echo "VERSION=$version" >> $GITHUB_OUTPUT
+
+      - name: Install PlatformIO
+        run: |
+          python -m pip install --upgrade pip
+          pip install -U platformio
+
+      - name: Build WebUI
+        run: |
+          cd interface
+          yarn install
+          yarn typesafe-i18n --no-watch
+          sed -i "s/= 'pl'/= 'en'/" ./src/i18n/i18n-util.ts
+          yarn build
+          yarn webUI
+
+      - name: Build firmware
+        run: |
+          platformio run -e ci
+
+      - name: Build S3 firmware
+        run: |
+          platformio run -e ci_s3
+
+      - name: Create a GH Release
+        id: 'automatic_releases'
+        uses: 'marvinpinto/action-automatic-releases@latest'
+        with:
+          repo_token: '${{ secrets.GITHUB_TOKEN }}'
+          title: Test Build v${{steps.build_info.outputs.VERSION}}
+          automatic_release_tag: 'test'
+          prerelease: true
+          files: |
+            CHANGELOG_LATEST.md
+            ./build/firmware/*.*

.gitignore

@@ -1,37 +1,63 @@
 # vscode
-.vscode
+.vscode/c_cpp_properties.json
-.directory
+.vscode/extensions.json
-workspace.code-workspace
+.vscode/launch.json
+# .vscode/settings.json
 
-# build
+# c++ compiling
-build/
 .clang_complete
 .gcc-flags.json
 cppcheck.out.xml
-debug.log
 
 # platformio
 .pio
 pio_local.ini
-/.VSCodeCounter
 
 # OS specific
 .DS_Store
 *Thumbs.db
-
-# project specfic
-/scripts/stackdmp.txt
 emsesp
+
+# web specfic
+build/
+dist/
 /data/www
 /lib/framework/WWWData.h
 /interface/build
 node_modules
 /interface/.eslintcache
+stats.html
+*.sln
+*.sw?
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+yarn.lock
+interface/analyse.html
+
+# scripts
 test.sh
+scripts/run.sh
 scripts/__pycache__
-.temp
+/scripts/stackdmp.txt
+
+# i18n generated files
+interface/src/i18n/i18n-react.tsx
+interface/src/i18n/i18n-types.ts
+interface/src/i18n/i18n-util.ts
+interface/src/i18n/i18n-util.sync.ts
+interface/src/i18n/i18n-util.async.ts
 
 # sonar
 .scannerwork/
 sonar/
-build_wrapper_output_directory/
+bw-output/
+
+# entity dump results
+# dump_entities.csv
+# dump_entities.xls*
+

.prettierrc

@@ -1,6 +1,8 @@
 {
-  "singleQuote": true,
-  "semi": true,
   "trailingComma": "none",
-  "printWidth": 120
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 120,
+  "bracketSpacing": true
 }

.vscode/extensions.json

@@ -0,0 +1,12 @@
+{
+    // See http://go.microsoft.com/fwlink/?LinkId=827846
+    // for the documentation about the extensions.json format
+    "recommendations": [
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "platformio.platformio-ide"
+    ],
+    "unwantedRecommendations": [
+        "ms-vscode.cpptools-extension-pack"
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,89 @@
+{
+  "search.exclude": {
+    "**/.yarn": true,
+    "**/.pnp.*": true
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+    // "source.organizeImports": true
+  },
+  "eslint.nodePath": "interface/.yarn/sdks",
+  "eslint.workingDirectories": ["interface"],
+  "prettier.prettierPath": "",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "files.associations": {
+    "*.tsx": "typescriptreact",
+    "*.tcc": "cpp",
+    "optional": "cpp",
+    "istream": "cpp",
+    "ostream": "cpp",
+    "ratio": "cpp",
+    "system_error": "cpp",
+    "array": "cpp",
+    "functional": "cpp",
+    "regex": "cpp",
+    "tuple": "cpp",
+    "type_traits": "cpp",
+    "utility": "cpp",
+    "string": "cpp",
+    "string_view": "cpp",
+    "atomic": "cpp",
+    "bitset": "cpp",
+    "cctype": "cpp",
+    "chrono": "cpp",
+    "clocale": "cpp",
+    "cmath": "cpp",
+    "condition_variable": "cpp",
+    "cstdarg": "cpp",
+    "cstddef": "cpp",
+    "cstdint": "cpp",
+    "cstdio": "cpp",
+    "cstdlib": "cpp",
+    "cstring": "cpp",
+    "ctime": "cpp",
+    "cwchar": "cpp",
+    "cwctype": "cpp",
+    "deque": "cpp",
+    "list": "cpp",
+    "unordered_map": "cpp",
+    "unordered_set": "cpp",
+    "vector": "cpp",
+    "exception": "cpp",
+    "algorithm": "cpp",
+    "iterator": "cpp",
+    "map": "cpp",
+    "memory": "cpp",
+    "memory_resource": "cpp",
+    "numeric": "cpp",
+    "random": "cpp",
+    "set": "cpp",
+    "fstream": "cpp",
+    "initializer_list": "cpp",
+    "iomanip": "cpp",
+    "iosfwd": "cpp",
+    "iostream": "cpp",
+    "limits": "cpp",
+    "mutex": "cpp",
+    "new": "cpp",
+    "sstream": "cpp",
+    "stdexcept": "cpp",
+    "streambuf": "cpp",
+    "thread": "cpp",
+    "cinttypes": "cpp",
+    "typeinfo": "cpp"
+  },
+  "todo-tree.filtering.excludeGlobs": [
+    "**/vendor/**",
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/bower_components/**",
+    "**/build/**",
+    "**/.vscode/**",
+    "**/.github/**",
+    "**/_output/**",
+    "**/*.min.*",
+    "**/*.map",
+    "**/ArduinoJson/**"
+  ],
+  "cSpell.enableFiletypes": ["!cpp"]
+}

.vscode/tasks.json

@@ -0,0 +1,18 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "shell",
+      "label": "build standalone emsesp",
+      "command": "make",
+      "args": [],
+      "problemMatcher": ["$gcc"],
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
+}

CHANGELOG.md

@@ -5,13 +5,265 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.6.4] November 24 2023
+
+## **IMPORTANT! BREAKING CHANGES**
+
+Writeable Text entities have moved from type `sensor` to `text` in Home Assistant to make them also editable within an HA dashboard. Examples are `datetime`, `holidays`, `switchtime`, `vacations`, `maintenancedate`. You will need to manually remove any old discovery topics from your MQTT broker using an application like MQTT Explorer.
+
+## Added
+
+- humidity for ventilation devices
+- telegrams for RC100H, hc2, etc. (seen on discord, not tested)
+- names for BC400, GB192i.2, read temperatures for low loss header and heatblock [#1317](https://github.com/emsesp/EMS-ESP32/discussions/1317)
+- option for `forceheatingoff` [#1262](https://github.com/emsesp/EMS-ESP32/issues/1262)
+- remote thermostat emulation RC100H for RC3xx [#1278](https://github.com/emsesp/EMS-ESP32/discussions/1278)
+- shower_data MQTT payload contains the timestamp [#1329](https://github.com/emsesp/EMS-ESP32/issues/1329)
+- HA discovery for writeable text entities [#1337](https://github.com/emsesp/EMS-ESP32/pull/1377)
+- autodetect board_profile, store in nvs, add telnet command option, add E32V2
+- heat pump high res energy counters [#1348, #1349. #1350](https://github.com/emsesp/EMS-ESP32/issues/1348)
+- optional bssid in network settings
+- extension module EM100 [#1315](https://github.com/emsesp/EMS-ESP32/discussions/1315)
+- digital_out with new options for polarity and startup state
+- added 'system allvalues' command that dumps all the EMS device values, plus sensors and any custom entities
+
+## Fixed
+
+- remove command `remoteseltemp`, thermostat accept it only from remote thermostat
+- shower_data MQTT payload contains the timestamp [#1329](https://github.com/emsesp/EMS-ESP32/issues/1329)
+- fixed helper text in Web Device Entity dialog box for numerical ranges
+- MQTT base with paths not working in HA [#1393](https://github.com/emsesp/EMS-ESP32/issues/1393)
+- set/read thermostat mode for RC100-RC300, [#1440](https://github.com/emsesp/EMS-ESP32/issues/1440) [#1442](https://github.com/emsesp/EMS-ESP32/issues/1442)
+- some setting commands for ems-boiler have used wrong ems+ telegram in 3.6.3
+
+## Changed
+
+- update to platform 6.4.0, arduino 2.0.14 / idf 4.4.6
+- small changes for arduino 3.0.0 / idf 5.1 compatibility (not backward compatible to platform 6.3.2 and before)
+- AP start after 10 sec, stay until station/eth connected
+- tested wifi-all-channel-scan (3.6.3-dev4 a-e), removed again because of connect issues
+- mqtt disconnect stops queue
+
+## [3.6.2] October 1 2023
+
+## **IMPORTANT! BREAKING CHANGES**
+
+## Added
+
+- Power entities
+- Optional input of BSSID for AP connection
+- Return empty json if no entries in scheduler/custom/analogsensor/temperaturesensor
+
+## Fixed
+
+- Wifi full scan to get strongest AP
+- Add missing dhw tags
+- Sending a dash/- to the Reset command doesn't return an error [#1308](https://github.com/emsesp/EMS-ESP32/discussions/1308)
+
+## Changed
+
+- MQTT queue max 300 messages, check heap and maxAlloc
+- API call commands are logged as WARN in the log
+- Reset Command renamed to 'reset' in lowercase in EN
+
+## [3.6.1] September 9 2023
+
+## **IMPORTANT! BREAKING CHANGES**
+
+- `shower_data` MQTT topic shows duration is seconds (was previously a full english sentence)
+
+## Added
+
+- Show WiFi rssi in Network Status Page, show quality as color
+
+## Fixed
+
+- Issue in espMqttClient causing a memory leak when MQTT broker is disconnected due to network unavailability [#1264](https://github.com/emsesp/EMS-ESP32/issues/1264)
+- Using MQTT enum values correctly formatted in MQTT Discovery [#1280](https://github.com/emsesp/EMS-ESP32/issues/1280)
+
+## Changed
+
+- MQTT free mem check set to 60 kb
+- Small cosmetic changes to Searching in Customization web page
+- Updated to espressif32@6.4.0
+
+# [3.6.0] August 13 2023
+
+## **IMPORTANT! BREAKING CHANGES**
+
+There are breaking changes between 3.5.x and earlier versions of 3.6.0. Please read carefully before applying the update.
+
+- The sensors have been renamed. `dallassensor` is now `temperaturesensor` in the MQTT topic and named `ts` in the Customizations file. Likewise `analogs` is now `analogsensor` in MQTT and called `as` in the Customizations file. If you have previous customizations you will need to manually update by downloading, changing the JSON file and uploading. It's also recommended cleaning up any old MQTT topics from your broker using an application like MQTTExplorer.
+
+## Added
+
+- Workaround for better Domoticz MQTT integration? [#904](https://github.com/emsesp/EMS-ESP32/issues/904)
+- Show MAC address without connecting to network enhancement [#933](https://github.com/emsesp/EMS-ESP32/issues/933)
+- Warn user in WebUI of unsaved changes [#911](https://github.com/emsesp/EMS-ESP32/issues/911)
+- Detect old Tado thermostat, device-id 0x19, no entities
+- Some more HM200 entities [#500](https://github.com/emsesp/EMS-ESP32/issues/500)
+- Added Scheduler [#701](https://github.com/emsesp/EMS-ESP32/issues/701)
+- Added Custom Entities read/write from EMS bus
+- Build S3 binary with github actions
+- Greenstar HIU [#1158](https://github.com/emsesp/EMS-ESP32/issues/1158)
+- AM200 code 10 [#1161](https://github.com/emsesp/EMS-ESP32/issues/1161)
+- Ventilation device (Logavent HRV176) [#1172](https://github.com/emsesp/EMS-ESP32/issues/1172)
+- Turn ETH off on wifi connect [#1167](https://github.com/emsesp/EMS-ESP32/issues/1167)
+- Support for multiple EMS-ESPs with HA [#1196](https://github.com/emsesp/EMS-ESP32/issues/1196)
+- Italian translation [#1199](https://github.com/emsesp/EMS-ESP32/issues/1199)
+- Turkish language support [#1076](https://github.com/emsesp/EMS-ESP32/issues/1076)
+- Buderus GB182 - HC1 mode change not work bug [#1193](https://github.com/emsesp/EMS-ESP32/issues/1193)
+- Minimal flow temperature enhancement [#1192](https://github.com/emsesp/EMS-ESP32/issues/1192)
+- Roomtemperature Switching Difference enhancement [#1191](https://github.com/emsesp/EMS-ESP32/issues/1191)
+- Dew Point Temperature Difference enhancement [#1190](https://github.com/emsesp/EMS-ESP32/issues/1190)
+- Control of heating circuit mode enhancement [#1187](https://github.com/emsesp/EMS-ESP32/issues/1187)
+- Warn user in WebUI of unsaved changes enhancement [#911](https://github.com/emsesp/EMS-ESP32/issues/911)
+- Create safebuild app to fit into factory partition to give ESP32 more flash memory enhancement [#608](https://github.com/emsesp/EMS-ESP32/issues/608)
+- Support ESP32 S2, C3 mini and S3 [#605](https://github.com/emsesp/EMS-ESP32/issues/605)
+- Support Buderus AM200 [#1161](https://github.com/emsesp/EMS-ESP32/issues/1161)
+- Custom telegram handler [#1155](https://github.com/emsesp/EMS-ESP32/issues/1155)
+- Added support for TLS in MQTT (ESP32-S3 only) [#1178](https://github.com/emsesp/EMS-ESP32/issues/1178)
+- Boardprofile BBQKees Gateway S3
+- Custom entity type RAW [#1212](https://github.com/emsesp/EMS-ESP32/discussions/1212)
+- API command response [#1212](https://github.com/emsesp/EMS-ESP32/discussions/1212)
+
+## Fixed
+
+- HA-discovery for analog sensor commands [#1035](https://github.com/emsesp/EMS-ESP32/issues/1035)
+- Enum order of RC3x nofrost mode
+- Heartbeat interval
+- Exhaust temperature always zero on GB125/MC110/RC310 bug [#1147](https://github.com/emsesp/EMS-ESP32/issues/1147)
+- thermostat modetype is not changing when mode changes (e.g. to night) bugSomething isn't working [#1098](https://github.com/emsesp/EMS-ESP32/issues/1098)
+- NTP: cant apply changed timezone [#1182](https://github.com/emsesp/EMS-ESP32/issues/1182)
+- Missing Status of VS1 for Buderus SM200 enhancement [#1034](https://github.com/emsesp/EMS-ESP32/issues/1034)
+- Allowed gpios for S3
+
+## Changed
+
+- Optional upgrade to platform-espressif32 6.3.0 (after 5.3.0) [#862](https://github.com/emsesp/EMS-ESP32/issues/862)
+- Use byte 3 for detection RC30 active heatingcircuit [#786](https://github.com/emsesp/EMS-ESP32/issues/786)
+- Write repeated selflowtemp if tx-queue is empty without verify [#954](https://github.com/emsesp/EMS-ESP32/issues/954)
+- HA discovery recreate after disconnect by device [#1067](https://github.com/emsesp/EMS-ESP32/issues/1067)
+- File upload: check flash size (overflow) instead of filesize
+- Improved HA Discovery so previous configs no longer need to be removed when starting [#1077](https://github.com/emsesp/EMS-ESP32/pull/1077) (thanks @pswid)
+- Enlarge UART-Stack to 2,5k
+- Retry timeout for Mqtt-QOS1/2 10seconds
+- Optimize WebUI rendering when using Dialog Boxes [#1116](https://github.com/emsesp/EMS-ESP32/issues/1116)
+- Optimize Web libraries to reduce bundle size (3.6.x) [#1112](https://github.com/emsesp/EMS-ESP32/issues/1112)
+- Use [espMqttClient](https://github.com/bertmelis/espMqttClient) with integrated queue [#1178](https://github.com/emsesp/EMS-ESP32/issues/1178)
+- Move Sensors from Web dashboard to it's own tab enhancement [#1170](https://github.com/emsesp/EMS-ESP32/issues/1170)
+- Optimize WebUI dashboard data [#1169](https://github.com/emsesp/EMS-ESP32/issues/1169)
+- Replace React core library with Preact to save on memory footprint
+- Response to `system/send` raw reads gives combined data for telegrams with more parts
+
+# [3.5.0] February 6 2023
+
+## **IMPORTANT! BREAKING CHANGES**
+
+- When upgrading to v3.5 for the first time from v3.4 on a BBQKees Gateway board you will need to use the [EMS-EPS Flasher](https://github.com/emsesp/EMS-ESP-Flasher/releases) to correctly re-partition the flash. Make sure you backup the settings and customizations from the WebUI (System->Upload/Download) and restore after the upgrade.
+
+## Added
+
+- Translations in Web UI and all device entity names (DE, NL, SV, PL, NO, FR) [#22](https://github.com/emsesp/EMS-ESP32/issues/22)
+- Add support for Lolin C3 mini [#620](https://github.com/emsesp/EMS-ESP32/pull/620)
+- Add support for ESP32-S2 [#667](https://github.com/emsesp/EMS-ESP32/pull/667)
+- Add devices: Greenstar 30Ri boiler, Junkers FW500 thermostat, Buderus BC30 controller
+- Add program memory info
+- Add mqtt queue and connection infos
+- Adapt min/max if ems-value is not in this range
+- Add heat pump settings for inputs and limits [#600](https://github.com/emsesp/EMS-ESP32/issues/600)
+- Add hybrid heatpump [#500](https://github.com/emsesp/EMS-ESP32/issues/500)
+- Add translated tags
+- Add min/max to customization table [#686](https://github.com/emsesp/EMS-ESP32/issues/686)
+- Add MD5 check [#637](https://github.com/emsesp/EMS-ESP32/issues/637)
+- Add more bus-ids [#673](https://github.com/emsesp/EMS-ESP32/issues/673)
+- Use HA connectivity device class for Status, added boot time [#751](https://github.com/emsesp/EMS-ESP32/issues/751)
+- Add commands for analog sensors outputs
+- Support for multiple EMS-ESPs with MQTT and HA [[#759](https://github.com/emsesp/EMS-ESP32/issues/759)]
+- Settings for heatpump silent mode and additional heater [[#802](https://github.com/emsesp/EMS-ESP32/issues/802)] [[#803](https://github.com/emsesp/EMS-ESP32/issues/803)]
+- Zone module MZ100 [#826](https://github.com/emsesp/EMS-ESP32/issues/826)
+- Default MQTT hostname is blank [#829](https://github.com/emsesp/EMS-ESP32/issues/829)
+- wwCurFlow for ems+ devices [#829](https://github.com/emsesp/EMS-ESP32/issues/829)
+- Add Rego 3000, TR120RF thermostats [#917](https://github.com/emsesp/EMS-ESP32/issues/917)
+- Add config for ESP32-S3
+- Add heatpump silent mode and other entities [#896](https://github.com/emsesp/EMS-ESP32/issues/896)
+- Allow reboot to other partition (factory or asymetric OTA)
+- Blacklist entities to remove from memory [#891](https://github.com/emsesp/EMS-ESP32/issues/891)
+- Add boiler pump operating mode [#944](https://github.com/emsesp/EMS-ESP32/issues/944)
+
+## Fixed
+
+- Factory Reset not working [#628](https://github.com/emsesp/EMS-ESP32/issues/628)
+- Valid 4 byte values [#820](https://github.com/emsesp/EMS-ESP32/issues/820)
+- Commands for multiple thermostats [#826](https://github.com/emsesp/EMS-ESP32/issues/826)
+- API queries for multiple devices [#865](https://github.com/emsesp/EMS-ESP32/issues/865)
+- Console crash when using call with command `hcx` only. [#841](https://github.com/emsesp/EMS-ESP32/issues/841)
+- `heatingPump2Mod` was wrong, changed to absBurnPow [[#908](https://github.com/emsesp/EMS-ESP32/issues/908)
+- Rounding of web input values
+- Analog sensor with single gpio number [#915](https://github.com/emsesp/EMS-ESP32/issues/915)
+- HA dallas and analog configs: remove/rebuild on change [#888](https://github.com/emsesp/EMS-ESP32/issues/888)
+- Modes and set seltemp for RC30 and RC20 [#932](https://github.com/emsesp/EMS-ESP32/issues/932)
+
+## Changed
+
+- Discovery in HomeAssistant don't work with custom base topic. [#596](https://github.com/emsesp/EMS-ESP32/issues/596) Base topic containing `/` are changed to `_`
+- RF room temperature sensor are shown as thermostat
+- Render mqtt float json values with trailing zero
+- Removed flash strings, to increase available heap memory
+- Reload page after restart button is pressed
+- Analog/dallas values command as list like ems-devices
+- Analog/dallas HA-entities based on id
+- MQTT Base is a mandatory field. Removed MQTT topic length from settings
+- HA duration class for time entities [[#822](https://github.com/emsesp/EMS-ESP32/issues/822)
+- AM200 alternative heatsource as class heatsource [[#857](https://github.com/emsesp/EMS-ESP32/issues/857)
+
+# [3.4.2] September 18 2022
+
+## Added
+
+- RC310 additions [#520](https://github.com/emsesp/EMS-ESP32/pull/520)
+  - damping
+  - wwprio for RC310 heating circuits
+  - switchonoptimization for RC310 heating circuits
+  - enum_controlmode for RC310 (new enum list)
+  - nofrostmode, reducemode, reducetemp & noreducetemp for RC310
+  - emergencyops and emergencytemp, wwmaxtemp, wwflowtempoffset and wwcomfort1 for RC310
+  - HM200 hybrid module [#500](https://github.com/emsesp/EMS-ESP32/issues/500)
+  - AM200 alternative heatsource module [#573](https://github.com/emsesp/EMS-ESP32/issues/573)
+  - EM10 error module as gateway [#575](https://github.com/emsesp/EMS-ESP32/issues/575)
+
+## Fixed
+
+- fix Table resizing in WebUI [#519](https://github.com/emsesp/EMS-ESP32/issues/519)
+- allow larger customization files [#570](https://github.com/emsesp/EMS-ESP32/issues/570)
+- losing entitiy wwcomfort [#581](https://github.com/emsesp/EMS-ESP32/issues/581)
+
+## Changed
+
+- Shorten "friendly names" in Home Assistant [#555](https://github.com/emsesp/EMS-ESP32/issues/555)
+- platformio 2.3.0 (IDF 4, Arduino 2)
+- remove master-thermostat, support multiple thermostats
+- merge up- and download in webui [#577](https://github.com/emsesp/EMS-ESP32/issues/577)
+
+# [3.4.1] May 29 2022
+
+## Fixed
+
+- Fix memory leak in api [#524](https://github.com/emsesp/EMS-ESP32/issues/524)
+
+## Changed
+
+- Controller data in web-ui only for IVT [#522](https://github.com/emsesp/EMS-ESP32/issues/522)
+- Rename hidden `climate` to a more explaining name [#523](https://github.com/emsesp/EMS-ESP32/issues/523)
+- Minor changes to the Customizations web page [#527](https://github.com/emsesp/EMS-ESP32/pull/527)
+
 # [3.4.0] May 23 2022
 
 ## Added
 
 - WebUI optimizations, updated look&feel and better performance [#124](https://github.com/emsesp/EMS-ESP32/issues/124)
 - Auto refresh of WebUI after successful firmware upload [#178](https://github.com/emsesp/EMS-ESP32/issues/178)
-- New Customization Service in WebUI. First feature is the ability to enable/disabled Enitites (device values) from EMS devices [#206](https://github.com/emsesp/EMS-ESP32/issues/206)
+- New Customization Service in WebUI. First feature is the ability to enable/disabled Entities (device values) from EMS devices [#206](https://github.com/emsesp/EMS-ESP32/issues/206)
 - Option to disable Telnet Console [#209](https://github.com/emsesp/EMS-ESP32/issues/209)
 - Added Hide SSID, Max Clients and Preferred Channel to Access Point
 - Merged in MichaelDvP's changes like Fahrenheit conversion, publish single (for IOBroker) and a few other critical optimizations
@@ -111,7 +363,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added pool data to telegrams 0x494 & 0x495 [#102](https://github.com/emsesp/EMS-ESP32/issues/102)
 - Add RC300 second summermode telegram [#108](https://github.com/emsesp/EMS-ESP32/issues/108)
 - Add support for the RC25 thermostat [#106](https://github.com/emsesp/EMS-ESP32/issues/106)
-- Add new command 'entities' for a device, e.g. http://ems-esp/api/boiler/entities to show the shortname, description and HA Entity name (if HA enabled) [#116](https://github.com/emsesp/EMS-ESP32/issues/116)
+- Add new command 'entities' for a device, e.g. <http://ems-esp/api/boiler/entities> to show the shortname, description and HA Entity name (if HA enabled) [#116](https://github.com/emsesp/EMS-ESP32/issues/116)
 - Support for Junkers program and remote (fb10/fb110) temperature
 - Home Assistant `state_class` attribute for Wh, kWh, W and KW [#129](https://github.com/emsesp/EMS-ESP32/issues/129)
 - Add current room influence for RC300 [#136](https://github.com/emsesp/EMS-ESP32/issues/136)
@@ -270,51 +522,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Added
 
-- power settings, disabling BLE and turning off Wifi sleep
-- Rx and Tx counts to Heartbeat MQTT payload
-- ethernet support
-- id to info command to show only a heatingcircuit
-- add sending devices that are not listed to 0x07
-- extra MQTT boolean option for "ON" and "OFF"
-- support for chunked MQTT payloads to allow large data sets > 2kb
-- external Button support (#708) for resetting to factory defaults and other actions
-- new console set command in `system`, `set board_profile <profile>` for quickly enabling cabled ethernet connections without using the captive wifi portal
-- added in MQTT nested mode, for thermostat and mixer, like we had back in v2
-- cascade MC400 (product-id 210) (3.0.0b6), power values for heating sources (3.0.1b1)
-- values for wwMaxPower, wwFlowtempOffset
-- RC300 `thermostat temp -1` to clear temporary setpoint in auto mode
-- syslog port selectable (#744)
 - individual mqtt commands (#31)
 - board Profiles (#11)
 
 ## Fixed
 
-- telegrams matched to masterthermostat 0x18
-- multiple roomcontrollers
-- readback after write with delay (give ems-devices time to set the value)
-- thermostat ES72/RC20 device 66 to command-set RC20_2
-- MQTT payloads not adding to queue when MQTT is re-connecting (fixes #369)
-- fix for HA topics with invalid command formats (#728)
-- wrong position of values #723, #732
-- OTA Upload via Web on OSX
 - Rx and Tx quality % would sometimes show > 100
 
 ## Changed
 
-- changed how telegram parameters are rendered for mqtt, console and web (#632)
-- split `show values` in smaller packages (edited)
-- extended length of IP/hostname from 32 to 48 chars (#676)
-- check flowsensor for `tap_water_active`
-- mqtt prefixed with `Base`
-- count Dallas sensor fails
-- switch from SPIFFS to LITTLEFS
-- added ID to MQTT payloads which is the Device's product ID and used in HA to identify a unique HA device
-- increased MQTT buffer and reduced wait time between publishes
-- updated to the latest ArduinoJson library
-- some names of mqtt-tags like in v2.2.1
-- new ESP32 partition side to allow for smoother OTA and fallback
-- network Gateway IP is optional (#682)emsesp/EMS-ESP
-- moved to a new GitHub repo https://github.com/emsesp/EMS-ESP32
 - invert LED changed to Hide LED. Default is off.
 - renamed Scan Network to Scan WiFi Network
 - added version to cmd=settings
@@ -369,4 +585,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - some names of mqtt-tags like in v2.2.1
 - new ESP32 partition side to allow for smoother OTA and fallback
 - Network Gateway IP is optional (#682)emsesp/EMS-ESP
-- moved to a new GitHub repo https://github.com/emsesp/EMS-ESP32
+- moved to a new GitHub repo <https://github.com/emsesp/EMS-ESP32>

CHANGELOG_LATEST.md

@@ -0,0 +1,11 @@
+# Changelog
+
+## [3.6.5]
+
+## **IMPORTANT! BREAKING CHANGES**
+
+## Added
+
+## Fixed
+
+## Changed

Makefile

@@ -1,7 +1,7 @@
 #
 # GNUMakefile for EMS-ESP
-# (c) 2020 Paul Derbyshire
 #
+
 NUMJOBS=${NUMJOBS:-" -j4 "}
 MAKEFLAGS+="j "
 #----------------------------------------------------------------------
@@ -17,23 +17,32 @@ MAKEFLAGS+="j "
 #TARGET    := $(notdir $(CURDIR))
 TARGET    := emsesp
 BUILD     := build
-SOURCES   := src src/* lib_standalone lib/uuid-common/src lib/uuid-console/src lib/uuid-log/src src/devices lib/ArduinoJson/src lib/PButton
+SOURCES   := src src/* lib_standalone lib/uuid-common/src lib/uuid-console/src lib/uuid-log/src src/devices lib/ArduinoJson/src lib/PButton lib/semver lib/espMqttClient/src lib/espMqttClient/src/*
-INCLUDES  := src lib_standalone lib/ArduinoJson/src lib/uuid-common/src lib/uuid-console/src lib/uuid-log/src lib/uuid-telnet/src lib/uuid-syslog/src lib/* src/devices
+INCLUDES  := src lib_standalone lib/espMqttClient/src lib/espMqttClient/src/Transport lib/ArduinoJson/src lib/uuid-common/src lib/uuid-console/src lib/uuid-log/src lib/uuid-telnet/src lib/uuid-syslog/src lib/semver lib/* src/devices
 LIBRARIES :=
 
 CPPCHECK = cppcheck
+# CHECKFLAGS = -q --force --std=c++17
 CHECKFLAGS = -q --force --std=c++11
 
 #----------------------------------------------------------------------
 # Languages Standard
 #----------------------------------------------------------------------
-C_STANDARD   := -std=c11
+C_STANDARD   := -std=c17
-CXX_STANDARD := -std=c++11
+# CXX_STANDARD := -std=c++17
+CXX_STANDARD := -std=gnu++11
+
+# C_STANDARD   := -std=c11
+# CXX_STANDARD := -std=c++11
 
 #----------------------------------------------------------------------
 # Defined Symbols
 #----------------------------------------------------------------------
-DEFINES += -DFACTORY_WIFI_HOSTNAME=\"ems-esp\" -DARDUINOJSON_ENABLE_STD_STRING=1 -DARDUINOJSON_ENABLE_PROGMEM=1 -DARDUINOJSON_ENABLE_ARDUINO_STRING -DARDUINOJSON_USE_DOUBLE=0 -DEMSESP_DEBUG -DEMSESP_STANDALONE -DEMSESP_USE_SERIAL -DEMSESP_DEFAULT_BOARD_PROFILE=\"LOLIN\"
+DEFINES += -DARDUINOJSON_ENABLE_STD_STRING=1 -DARDUINOJSON_ENABLE_PROGMEM=1 -DARDUINOJSON_ENABLE_ARDUINO_STRING -DARDUINOJSON_USE_DOUBLE=0
+DEFINES += -DEMSESP_DEBUG -DEMSESP_STANDALONE -DEMSESP_TEST -D__linux__ -DEMC_RX_BUFFER_SIZE=1500
+DEFINES += $(ARGS)
+
+DEFAULTS = -DEMSESP_DEFAULT_LOCALE=\"en\" -DEMSESP_DEFAULT_TX_MODE=8 -DEMSESP_DEFAULT_VERSION=\"3.6.4-dev\" -DEMSESP_DEFAULT_BOARD_PROFILE=\"S32\"
 
 #----------------------------------------------------------------------
 # Sources & Files
@@ -66,15 +75,13 @@ CXX := /usr/bin/g++
 # CXXFLAGS  C++ Compiler Flags
 # LDFLAGS   Linker Flags
 #----------------------------------------------------------------------
-CPPFLAGS  += $(DEFINES) $(INCLUDE)
+CPPFLAGS  += $(DEFINES) $(DEFAULTS) $(INCLUDE)
 CPPFLAGS  += -ggdb
 CPPFLAGS  += -g3
 CPPFLAGS  += -Os
 
 CFLAGS    += $(CPPFLAGS)
-CFLAGS    += -Wall
+CFLAGS    += -Wall -Wextra -Werror -Wswitch-enum -Wno-unused-parameter -Wno-inconsistent-missing-override -Wno-missing-braces -Wno-unused-lambda-capture -Wno-sign-compare
-CFLAGS    += -Wextra
-CFLAGS    += -Wno-unused-parameter
 
 CXXFLAGS  += $(CFLAGS) -MMD
 
@@ -114,6 +121,8 @@ COMPILE.cpp = $(CXX) $(CXX_STANDARD) $(CXXFLAGS) $(DEPFLAGS) -c $< -o $@
 # Targets
 #----------------------------------------------------------------------
 .PHONY: all
+.SILENT: $(OUTPUT)
+
 all: $(OUTPUT)
 
 $(OUTPUT): $(OBJS)
@@ -141,7 +150,7 @@ run: $(OUTPUT)
 
 .PHONY: clean
 clean:
-	@$(RM) -r $(BUILD) $(OUTPUT)
+	@$(RM) -rf $(BUILD) $(OUTPUT)
 
 help:
 	@echo available targets: all run clean

README.md

@@ -1,17 +1,5 @@
 # ![logo](media/EMS-ESP_logo_dark.png)
 
-**EMS-ESP** is an open-source firmware for the Espressif ESP8266 and ESP32 microcontroller that communicates with **EMS** (Energy Management System) based equipment from manufacturers like Bosch, Buderus, Nefit, Junkers, Worcester and Sieger.
-
-This project is the specifically for the ESP32. Compared with the previous ESP8266 (version 2) release it has the following enhancements:
-
-- Ethernet Support
-- Pre-configured circuit board layouts
-- Supports writing EMS values directly from within Web UI
-- Mock API server for faster offline development and testing
-- Improved API and MQTT commands
-- Improvements to Dallas temperature sensors
-- Embedded log tracing in the Web UI
-
 [![version](https://img.shields.io/github/release/emsesp/EMS-ESP32.svg?label=Latest%20Release)](https://github.com/emsesp/EMS-ESP32/blob/main/CHANGELOG.md)
 [![release-date](https://img.shields.io/github/release-date/emsesp/EMS-ESP32.svg?label=Released)](https://github.com/emsesp/EMS-ESP32/commits/main)
 [![license](https://img.shields.io/github/license/emsesp/EMS-ESP32.svg)](LICENSE)
@@ -20,34 +8,54 @@ This project is the specifically for the ESP32. Compared with the previous ESP82
 [![downloads](https://img.shields.io/github/downloads/emsesp/EMS-ESP32/total.svg)](https://github.com/emsesp/EMS-ESP32/releases)
 [![chat](https://img.shields.io/discord/816637840644505620.svg?style=flat-square&color=blueviolet)](https://discord.gg/3J3GgnzpyT)
 
-If you like **EMS-ESP**, please give it a star, or fork it and contribute!
-
 [![GitHub stars](https://img.shields.io/github/stars/emsesp/EMS-ESP32.svg?style=social&label=Star)](https://github.com/emsesp/EMS-ESP32/stargazers)
 [![GitHub forks](https://img.shields.io/github/forks/emsesp/EMS-ESP32.svg?style=social&label=Fork)](https://github.com/emsesp/EMS-ES32P/network)
 [![donate](https://img.shields.io/badge/donate-PayPal-blue.svg)](https://www.paypal.com/paypalme/prderbyshire/2)
 
-Note, EMS-ESP requires a small hardware circuit that can convert the EMS bus data to be read by the microcontroller. These can be ordered at <https://bbqkees-electronics.nl> or contact the contributors that can provide the schematic and designs.
+**EMS-ESP** is an open-source firmware for the Espressif ESP32 microcontroller that communicates with **EMS** (Energy Management System) based equipment from manufacturers like Bosch, Buderus, Nefit, Junkers, Worcester and Sieger. It requires a small gateway circuit to interface with the EMS bus which can be purchased from <https://bbqkees-electronics.nl> or custom built.
 
-<img src="media/gateway-integration.jpg" width=40%>
+## **Features**
 
----
+- A multi-user, multi-language secure web interface to change settings and monitor incoming data
-
-# **Features**
-
-- A multi-user secure web interface to change settings and monitor incoming data
 - A console, accessible via Serial and Telnet for more advanced monitoring
-- Native support for Home Assistant and Domoticz via [MQTT Discovery](https://www.home-assistant.io/docs/mqtt/discovery/)
+- Native support for Home Assistant, Domoticz and openHAB via [MQTT Discovery](https://www.home-assistant.io/docs/mqtt/discovery/)
 - Can run standalone as an independent WiFi Access Point or join an existing WiFi network
 - Easy first-time configuration via a web Captive Portal
-- Support for more than [100 EMS devices](https://emsesp.github.io/docs/#/Supported-EMS-Devices) (boilers, thermostats, solar modules, mixer modules, heat pumps, gateways)
+- Support for more than [110+ EMS devices](https://emsesp.github.io/docs/All-Devices/) (boilers, thermostats, solar modules, mixer modules, heat pumps, gateways, switches, heat sources)
+
+## **Documentation**
+
+For the complete documentation on how to install, configure and get support visit the [EMS-ESP Wiki](https://emsesp.github.io/docs).
+
+## **Support**
+
+To chat with the community reach out on our [Discord Server](https://discord.gg/3J3GgnzpyT).
+
+If you like **EMS-ESP**, please give it a star, or fork it and contribute or offer a small donation!
 
 ## **Demo**
 
-See a demo [here](https://ems-esp.derbyshire.nl). Log in with any username/password.
+For a live demo of the Web UI click [here](https://ems-esp.derbyshire.nl) and log in with any username/password.
 
-# **Screenshots**
+## **Contributors ✨**
 
-## Web Interface
+EMS-ESP is a project owned and maintained by [proddy](https://github.com/proddy) and [MichaelDvP](https://github.com/MichaelDvP).
+
+## **Libraries used**
+
+- [esp8266-react](https://github.com/rjwats/esp8266-react) by @rjwats for the framework that provides the core of the Web UI
+- [uuid-\*](https://github.com/nomis/mcu-uuid-console) from @nomis. The console, syslog, telnet and logging are based off these open source libraries
+- [ArduinoJson](https://github.com/bblanchon/ArduinoJson) for all the JSON
+- [espMqttClient](https://github.com/bertmelis/espMqttClient) for the MQTT client, with custom modifications from @MichaelDvP and @proddy
+- ESPAsyncWebServer and AsyncTCP for the Web server and TCP backends, with custom modifications for performance
+
+## **License**
+
+This program is licensed under GPL-3.0
+
+## **Screenshots**
+
+### Web Interface
 
 |                                    |                                  |
 | ---------------------------------- | -------------------------------- |
@@ -55,75 +63,10 @@ See a demo [here](https://ems-esp.derbyshire.nl). Log in with any username/passw
 | <img src="media/web_devices.png">  | <img src="media/web_mqtt.png">   |
 | <img src="media/web_edit.png">     | <img src="media/web_log.png">    |
 
-## Telnet Console
+### Telnet Console
 
-<img src="media/console.png" width=80% height=80%>
+<img src="media/console0.png" width=80% height=80%>
 
-## In Home Assistant
+### In Home Assistant
 
 <img src="media/ha_lovelace.png" width=80% height=80%>
-  
-# **Installing**
-
-Refer to the [official documentation](https://emsesp.github.io/docs) to how to install the firmware and configure it. The documentation is being constantly updated as new features and settings are added.
-
-You can choose to use an pre-built firmware image or compile the code yourself:
-
-- [Uploading a pre-built firmware build](https://emsesp.github.io/docs/#/Uploading-firmware)
-- [Building the firmware from source code and flashing manually](https://emsesp.github.io/docs/#/Building-firmware)
-
-# **Support Information**
-
-If you're looking for support on **EMS-ESP** there are some options available:
-
-## Documentation
-
-- [Official EMS-ESP Documentation](https://emsesp.github.io/docs): For information on how to build and upload the firmware
-- [FAQ and Troubleshooting](https://emsesp.github.io/docs/#/Troubleshooting): For information on common problems and solutions. See also [BBQKees's wiki](https://bbqkees-electronics.nl/wiki/gateway/troubleshooting.html)
-
-## Support Community
-
-- [Discord Server](https://discord.gg/3J3GgnzpyT): For support, troubleshooting and general questions. You have better chances to get fast answers from members of the community
-- [Search in Issues](https://github.com/emsesp/EMS-ESP32/issues): You might find an answer to your question by searching current or closed issues
-
-## Developer's Community
-
-- [Bug Report](https://github.com/emsesp/EMS-ESP32/issues/new?template=bug_report.md): For reporting Bugs
-- [Feature Request](https://github.com/emsesp/EMS-ESP32/issues/new?template=feature_request.md): For requesting features/functions
-- [Troubleshooting](https://github.com/emsesp/EMS-ESP32/issues/new?template=questions---troubleshooting.md): As a last resort, you can open new _Troubleshooting & Question_ issue on GitHub if the solution could not be found using the other channels. Just remember: the more info you provide the more chances you'll have to get an accurate answer
-
-# **Contributors ✨**
-
-EMS-ESP is a project originally created and owned by [proddy](https://github.com/proddy). Key contributors are:
-
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-  <tr>
-    <td align="center">
-    <a href="https://github.com/MichaelDvP"><img src="https://avatars.githubusercontent.com/u/59284019?v=3?s=100" width="100px;" alt=""/><br /><sub><b>MichaelDvP</b></sub></a><br /></a> <a href="https://github.com/emsesp/EMS-ESP/commits?author=MichaelDvP" title="v2 Commits">v2</a>
-    <a href="https://github.com/emsesp/EMS-ESP32/commits?author=MichaelDvP" title="v3 Commits">v3</a>
-    </td>
-
-  </tr>
-</table>
-<!-- markdownlint-restore -->
-<!-- prettier-ignore-end -->
-
-You can also contribute to EMS-ESP by
-
-- providing Pull Requests (Features, Fixes, suggestions)
-- testing new released features and report issues on your EMS equipment
-- contributing to missing [Documentation](https://emsesp.github.io/docs)
-
-# **Libraries used**
-
-- [esp8266-react](https://github.com/rjwats/esp8266-react) by @rjwats for the framework that provides the core of the Web UI
-- [uuid-\*](https://github.com/nomis/mcu-uuid-console) from @nomis. The console, syslog, telnet and logging are based off these open source libraries
-- [ArduinoJson](https://github.com/bblanchon/ArduinoJson) for JSON
-- [AsyncMqttClient](https://github.com/marvinroger/async-mqtt-client) for the MQTT client, with custom modifications from @bertmelis and @proddy
-- ESPAsyncWebServer and AsyncTCP for the Web server and TCP backends, with custom modifications for performance
-
-# **License**
-
-This program is licensed under GPL-3.0

RELEASENOTES.md

@@ -1,6 +0,0 @@
-# ![logo](https://github.com/emsesp/EMS-ESP32/blob/main/media/EMS-ESP_logo_dark.png)
-
-# Firmware Installation
-
-Follow the instructions in the [documentation](https://emsesp.github.io/docs) on how to install the firmware binaries in the Assets below.
-

RELEASENOTES_DEV.md

@@ -1,8 +0,0 @@
-# ![logo](https://github.com/emsesp/EMS-ESP32/blob/main/media/EMS-ESP_logo_dark.png)
-
-This is a snapshot of the current "beta" development code and firmware binaries for the ESP32. It has all the latest features and fixes but please be aware that this is still experimental firmware used for testing and thus may contain the odd bug. Use at your own risk and remember to report an issue if you find something unusual.
-
-# Firmware Installation
-
-Follow the instructions in the [documentation](https://emsesp.github.io/docs) on how to install the firmware binaries in the Assets below.
-

esp32_asym_partition_4M.csv

@@ -0,0 +1,6 @@
+# Name,   Type, SubType, Offset,   Size,    Flags
+nvs,      data, nvs,     0x9000,   0x5000,
+otadata,  data, ota,     ,         0x2000,
+app0,     app,  ota_0,   ,         0x2A0000,
+app1,     app,  ota_1,   ,         0x140000,
+spiffs,   data, spiffs,  ,         64K,

esp32_partition_16M.csv

@@ -0,0 +1,6 @@
+# Name,   Type, SubType, Offset,   Size,    Flags
+nvs,      data, nvs,     0x9000,   0x5000,
+otadata,  data, ota,     ,         0x2000,
+app0,     app,  ota_0,   ,         0x7F0000,
+app1,     app,  ota_1,   ,         0x7F0000,
+spiffs,   data, spiffs,  ,         64K,

esp32_partition_4M.csv

@@ -0,0 +1,6 @@
+# Name,   Type, SubType, Offset,   Size,    Flags
+nvs,      data, nvs,     0x9000,   0x5000,
+otadata,  data, ota,     ,         0x2000,
+app0,     app,  ota_0,   ,         0x1F0000,
+app1,     app,  ota_1,   ,         0x1F0000,
+spiffs,   data, spiffs,  ,         64K,

esp32_partition_app1984k_spiffs64k.csv

@@ -1,6 +0,0 @@
-# Name,   Type, SubType, Offset,   Size,    Flags
-nvs,      data, nvs,     0x9000,   0x5000,
-otadata,  data, ota,     0xE000,   0x2000,
-app0,     app,  ota_0,   0x10000,  0x1F0000,
-app1,     app,  ota_1,   0x200000, 0x1F0000,
-spiffs,   data, spiffs,  0x3F0000, 0x10000,

factory_settings.ini

@@ -7,8 +7,8 @@ build_flags =
 
 	; Access point settings
     -D FACTORY_AP_PROVISION_MODE=AP_MODE_DISCONNECTED
-    -D FACTORY_AP_SSID=\"ems-esp\" ; 1-64 characters
+    -D FACTORY_AP_SSID=\"ems-esp\"
-    -D FACTORY_AP_PASSWORD=\"ems-esp-neo\" ; 8-64 characters
+    -D FACTORY_AP_PASSWORD=\"ems-esp-neo\"
     -D FACTORY_AP_LOCAL_IP=\"192.168.4.1\"
     -D FACTORY_AP_GATEWAY_IP=\"192.168.4.1\"
     -D FACTORY_AP_SUBNET_MASK=\"255.255.255.0\"
@@ -28,11 +28,11 @@ build_flags =
     ; OTA settings
     -D FACTORY_OTA_PORT=8266
     -D FACTORY_OTA_PASSWORD=\"ems-esp-neo\"
-    -D FACTORY_OTA_ENABLED=true
+    -D FACTORY_OTA_ENABLED=false
 
     ; MQTT settings
     -D FACTORY_MQTT_ENABLED=false
-    -D FACTORY_MQTT_HOST=\"test.mosquitto.org\"
+    -D FACTORY_MQTT_HOST=\"\"
     -D FACTORY_MQTT_PORT=1883
     -D FACTORY_MQTT_USERNAME=\"\"
     -D FACTORY_MQTT_PASSWORD=\"\"

interface/.env

@@ -1,8 +0,0 @@
-# This enables lint extensions
-EXTEND_ESLINT=true
-
-# This is the name of your project. It appears on the sign-in page and in the menu bar.
-REACT_APP_PROJECT_NAME=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,2 @@
+VITE_ALOVA_TIPS=0
+REACT_APP_ALOVA_TIPS=0

interface/.env.hosted

@@ -1,3 +0,0 @@
-GENERATE_SOURCEMAP=false
-
-REACT_APP_HOSTED=true

interface/.env.production

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

interface/.eslintignore

@@ -0,0 +1,12 @@
+node_modules/
+build/
+dist/
+.yarn/
+
+.prettierrc
+.eslintrc*
+env.d.ts
+progmem-generator.js
+unpack.ts
+vite.config.ts
+package.json

interface/.eslintrc.json

@@ -0,0 +1,108 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "airbnb/hooks",
+    "airbnb-typescript",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:prettier/recommended",
+    "plugin:import/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "tsconfigRootDir": ".",
+    "project": ["tsconfig.json"]
+  },
+  "plugins": ["react", "@typescript-eslint", "autofix", "react-hooks"],
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "project": "./tsconfig.json"
+      }
+    },
+    "react": {
+      "version": "18.x"
+    }
+  },
+  "rules": {
+    "object-shorthand": "error",
+    "no-console": "warn",
+    "@typescript-eslint/consistent-type-definitions": ["off", "type"],
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-unsafe-call": "off",
+    "@typescript-eslint/no-unsafe-enum-comparison": "off",
+    "@typescript-eslint/no-unsafe-assignment": "off",
+    "@typescript-eslint/no-unsafe-return": "off",
+    "@typescript-eslint/no-unsafe-member-access": "off",
+    "@typescript-eslint/naming-convention": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unsafe-argument": "off",
+    "@typescript-eslint/restrict-plus-operands": "off",
+    "@typescript-eslint/no-unused-expressions": "off",
+    "@typescript-eslint/no-implied-eval": "off",
+    "@typescript-eslint/no-misused-promises": "off",
+    "arrow-body-style": ["error", "as-needed"],
+    "react-hooks/exhaustive-deps": "warn",
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        "prefer": "type-imports"
+      }
+    ],
+    "import/order": [
+      "warn",
+      {
+        "groups": ["builtin", "external", "parent", "sibling", "index", "object", "type"],
+        "pathGroups": [
+          {
+            "pattern": "@/**/**",
+            "group": "parent",
+            "position": "before"
+          }
+        ],
+        "alphabetize": { "order": "asc" }
+      }
+    ],
+    // "autofix/no-unused-vars": [
+    //   "error",
+    //   {
+    //     "argsIgnorePattern": "^_",
+    //     "ignoreRestSiblings": true,
+    //     "destructuredArrayIgnorePattern": "^_"
+    //   }
+    // ],
+    "react/self-closing-comp": [
+      "error",
+      {
+        "component": true,
+        "html": true
+      }
+    ],
+    "@typescript-eslint/ban-types": [
+      "error",
+      {
+        "extendDefaults": true,
+        "types": {
+          "{}": false
+        }
+      }
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ]
+  }
+}

interface/.gitignore

@@ -0,0 +1,7 @@
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

interface/.prettierignore

@@ -0,0 +1,6 @@
+node_modules/
+build/
+dist/
+.prettierrc
+.yarn/
+.typesafe-i18n.json

interface/.typesafe-i18n.json

@@ -0,0 +1,5 @@
+{
+   "adapter": "react",
+   "baseLocale": "pl",
+   "$schema": "https://unpkg.com/typesafe-i18n@5.26.2/schema/typesafe-i18n.json"
+}

interface/.yarnrc.yml

@@ -0,0 +1,7 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

interface/config-overrides.js

@@ -1,30 +0,0 @@
-const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const ProgmemGenerator = require('./progmem-generator.js');
-const TerserPlugin = require('terser-webpack-plugin');
-
-module.exports = function override(config, env) {
-  const hosted = process.env.REACT_APP_HOSTED;
-
-  if (env === 'production' && !hosted) {
-    // rename the ouput file, we need it's path to be short, for embedded FS
-    config.output.filename = 'js/[id].[chunkhash:4].js';
-    config.output.chunkFilename = 'js/[id].[chunkhash:4].js';
-
-    // take out the manifest plugin
-    config.plugins = config.plugins.filter((plugin) => !(plugin instanceof WebpackManifestPlugin));
-
-    // shorten css filenames
-    const miniCssExtractPlugin = config.plugins.find((plugin) => plugin instanceof MiniCssExtractPlugin);
-    miniCssExtractPlugin.options.filename = 'css/[id].[contenthash:4].css';
-    miniCssExtractPlugin.options.chunkFilename = 'css/[id].[contenthash:4].c.css';
-
-    // don't emit license file
-    const terserPlugin = config.optimization.minimizer.find((plugin) => plugin instanceof TerserPlugin);
-    terserPlugin.options.extractComments = false;
-
-    // build progmem data files
-    config.plugins.push(new ProgmemGenerator({ outputPath: '../lib/framework/WWWData.h', bytesPerLine: 20 }));
-  }
-  return config;
-};

interface/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="stylesheet" href="/css/roboto.css" />
+    <link rel="manifest" href="/app/manifest.json" />
+    <title>EMS-ESP</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

interface/package.json

@@ -1,103 +1,78 @@
 {
   "name": "EMS-ESP",
-  "version": "3.4.0",
+  "version": "3.6.5",
+  "description": "build EMS-ESP WebUI",
+  "homepage": "https://emsesp.github.io/docs",
+  "author": "proddy",
+  "license": "MIT",
   "private": true,
-  "proxy": "http://localhost:3080",
+  "type": "module",
-  "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
-    "@msgpack/msgpack": "^2.7.2",
-    "@mui/icons-material": "^5.8.0",
-    "@mui/material": "^5.8.1",
-    "@table-library/react-table-library": "^3.1.2",
-    "@types/lodash": "^4.14.182",
-    "@types/node": "^17.0.35",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.5",
-    "@types/react-router-dom": "^5.3.3",
-    "async-validator": "^4.1.1",
-    "axios": "^0.27.2",
-    "http-proxy-middleware": "^2.0.6",
-    "jwt-decode": "^3.1.2",
-    "lodash": "^4.17.21",
-    "notistack": "^2.0.5",
-    "parse-ms": "^3.0.0",
-    "react": "^18.1.0",
-    "react-app-rewired": "^2.2.1",
-    "react-dom": "^18.1.0",
-    "react-dropzone": "^14.2.1",
-    "react-icons": "^4.3.1",
-    "react-router-dom": "^6.3.0",
-    "react-scripts": "5.0.1",
-    "sockette": "^2.0.6",
-    "typescript": "^4.6.4"
-  },
   "scripts": {
-    "start": "react-app-rewired start",
+    "build": "vite build",
-    "build": "react-app-rewired build",
+    "preview": "vite preview",
-    "test": "react-app-rewired test",
+    "build-hosted": "typesafe-i18n --no-watch && vite build --mode hosted",
-    "eject": "react-scripts eject",
+    "preview-standalone": "typesafe-i18n --no-watch && vite build && concurrently -c \"auto\" \"npm:mock-api\" \"vite preview\"",
+    "mock-api": "node --watch ../mock-api ../mock-api/server.js",
+    "standalone": "concurrently -c \"auto\" \"typesafe-i18n\" \"npm:mock-api\" \"vite\"",
+    "typesafe-i18n": "typesafe-i18n --no-watch",
+    "webUI": "node progmem-generator.js",
     "format": "prettier --write '**/*.{ts,tsx,js,css,json,md}'",
-    "build-hosted": "env-cmd -f .env.hosted npm run build",
+    "lint": "eslint . --cache --fix"
-    "build-localhost": "PUBLIC_URL=/ react-app-rewired build",
-    "mock-api": "nodemon --watch ../mock-api ../mock-api/server.js",
-    "standalone": "npm-run-all -p start mock-api",
-    "lint": "eslint . --ext .ts,.tsx"
   },
-  "eslintConfig": {
+  "dependencies": {
-    "extends": [
+    "@alova/adapter-xhr": "^1.0.1",
-      "react-app",
+    "@babel/core": "^7.23.3",
-      "react-app/jest"
+    "@emotion/react": "^11.11.1",
-    ],
+    "@emotion/styled": "^11.11.0",
-    "rules": {
+    "@mui/icons-material": "^5.14.18",
-      "eol-last": 1,
+    "@mui/material": "^5.14.18",
-      "react/jsx-closing-bracket-location": 1,
+    "@table-library/react-table-library": "4.1.7",
-      "react/jsx-closing-tag-location": 1,
+    "@types/imagemin": "^8.0.5",
-      "react/jsx-wrap-multilines": 1,
+    "@types/lodash-es": "^4.17.12",
-      "react/jsx-curly-newline": 1,
+    "@types/node": "^20.10.0",
-      "no-multiple-empty-lines": [
+    "@types/react": "^18.2.38",
-        1,
+    "@types/react-dom": "^18.2.17",
-        {
+    "@types/react-router-dom": "^5.3.3",
-          "max": 1
+    "alova": "^2.14.0",
-        }
+    "async-validator": "^4.2.5",
-      ],
+    "history": "^5.3.0",
-      "no-trailing-spaces": 1,
+    "jwt-decode": "^4.0.0",
-      "semi": 1,
+    "lodash-es": "^4.17.21",
-      "no-extra-semi": 1,
+    "mime-types": "^2.1.35",
-      "react/jsx-max-props-per-line": [
+    "react": "latest",
-        1,
+    "react-dom": "latest",
-        {
+    "react-dropzone": "^14.2.3",
-          "when": "multiline"
+    "react-icons": "^4.12.0",
-        }
+    "react-router-dom": "^6.20.0",
-      ],
+    "react-toastify": "^9.1.3",
-      "react/jsx-first-prop-new-line": [
+    "sockette": "^2.0.6",
-        1,
+    "typesafe-i18n": "^5.26.2",
-        "multiline"
+    "typescript": "^5.3.2"
-      ],
-      "@typescript-eslint/no-shadow": 1,
-      "max-len": [
-        1,
-        {
-          "code": 200
-        }
-      ],
-      "arrow-parens": 1
-    }
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
   },
   "devDependencies": {
-    "nodemon": "^2.0.16",
+    "@preact/compat": "^17.1.2",
-    "npm-run-all": "^4.1.5"
+    "@preact/preset-vite": "^2.7.0",
-  }
+    "@typescript-eslint/eslint-plugin": "^6.12.0",
+    "@typescript-eslint/parser": "^6.12.0",
+    "concurrently": "^8.2.2",
+    "eslint": "^8.54.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-autofix": "^1.1.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "alpha",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "preact": "^10.19.2",
+    "prettier": "^3.1.0",
+    "rollup-plugin-visualizer": "^5.9.3",
+    "terser": "^5.24.0",
+    "vite": "^5.0.2",
+    "vite-plugin-imagemin": "^0.6.1",
+    "vite-tsconfig-paths": "^4.2.1"
+  },
+  "packageManager": "yarn@4.0.2"
 }

interface/progmem-generator.js

@@ -1,9 +1,27 @@
-const { resolve, relative, sep } = require('path');
+import { readdirSync, existsSync, unlinkSync, readFileSync, createWriteStream } from 'fs';
-const { readdirSync, existsSync, unlinkSync, readFileSync, createWriteStream } = require('fs');
+import { resolve, relative, sep } from 'path';
-var zlib = require('zlib');
+import zlib from 'zlib';
-var mime = require('mime-types');
+import mime from 'mime-types';
 
 const ARDUINO_INCLUDES = '#include <Arduino.h>\n\n';
+const INDENT = '  ';
+const outputPath = '../lib/framework/WWWData.h';
+const sourcePath = './dist';
+const bytesPerLine = 20;
+var totalSize = 0;
+
+const generateWWWClass = () =>
+  `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)}}
+};
+`;
 
 function getFilesSync(dir, files = []) {
   readdirSync(dir, { withFileTypes: true }).forEach((entry) => {
@@ -17,10 +35,6 @@ function getFilesSync(dir, files = []) {
   return files;
 }
 
-function coherseToBuffer(input) {
-  return Buffer.isBuffer(input) ? input : Buffer.from(input);
-}
-
 function cleanAndOpen(path) {
   if (existsSync(path)) {
     unlinkSync(path);
@@ -28,34 +42,19 @@ function cleanAndOpen(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 = {');
+  writeStream.write('const uint8_t ' + variable + '[] = {');
-          const zipBuffer = zlib.gzipSync(buffer);
+  // const zipBuffer = zlib.brotliCompressSync(buffer, { quality: 1 });
+  const zipBuffer = zlib.gzipSync(buffer, { level: 9 });
   zipBuffer.forEach((b) => {
     if (!(size % bytesPerLine)) {
       writeStream.write('\n');
       writeStream.write(indent);
     }
-            writeStream.write('0x' + ('00' + b.toString(16).toUpperCase()).substr(-2) + ',');
+    writeStream.write('0x' + ('00' + b.toString(16).toUpperCase()).slice(-2) + ',');
     size++;
   });
   if (size % bytesPerLine) {
@@ -68,54 +67,33 @@ class ProgmemGenerator {
     variable,
     size
   });
+
+  // console.log(relativeFilePath + ' (size ' + size + ' bytes)');
+  totalSize += size;
 };
 
-        const writeFiles = () => {
+// start
+console.log('Generating ' + outputPath + ' from ' + sourcePath);
+const includes = ARDUINO_INCLUDES;
+const indent = INDENT;
+const fileInfo = [];
+const writeStream = cleanAndOpen(resolve(outputPath));
+
+// includes
+writeStream.write(includes);
+
 // process static files
-          const buildPath = compilation.options.output.path;
+const buildPath = resolve(sourcePath);
 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 = () => {
+// add class
-          // eslint-disable-next-line max-len
-          return `typedef std::function<void(const String& uri, const String& contentType, const uint8_t * content, size_t len)> RouteRegistrationHandler;
-
-class WWWData {
-${indent}public:
-${indent.repeat(2)}static void registerRoutes(RouteRegistrationHandler handler) {
-${fileInfo
-  .map((file) => `${indent.repeat(3)}handler("${file.uri}", "${file.mimeType}", ${file.variable}, ${file.size});`)
-  .join('\n')}
-${indent.repeat(2)}}
-};
-`;
-        };
-
-        const writeWWWClass = () => {
 writeStream.write(generateWWWClass());
-        };
 
-        writeIncludes();
+// end
-        writeFiles();
-        writeWWWClass();
-
-        writeStream.on('finish', () => {
-          callback();
-        });
-      } finally {
 writeStream.end();
-      }
-    });
-  }
-}
 
-module.exports = ProgmemGenerator;
+console.log('Total size: ' + totalSize / 1000 + ' KB');

interface/public/css/roboto.css

@@ -1,24 +1,18 @@
 /*
-* Just supporting latin due to size constrains on the esp chip 
+* Uses font-size 400 (normal) only and Latin (plus extra unicode chars) to keep flash memory to a minimum
-*
+* View fonts on https://fonts.google.com/
-* The framework only makes use of 400 (regular) + 500 (medium) weight fonts.
+* Download woff2 using e.g. https://fonts.googleapis.com/css2?family=Lato or https://fonts.googleapis.com/css2?family=Roboto
-*
-* If using light or strong typography variants you will need to add additional fonts.
 */
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/re.woff2) format('woff2');
+  /* src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.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,
+  src:
-    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    local('Roboto'),
-}
+    local('Roboto-Regular'),
-
+    url(../fonts/re.woff2) format('woff2');
-@font-face {
+  unicode-range: U+0000-00FF, U+0104-0107, U+0118-0119, U+011E-011F, U+0130-0131, U+0141-0144, U+0152-0153, U+015A-015B,
-  font-family: 'Roboto';
+    U+015E-015F, U+0179-017C, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
-  font-style: normal;
+    U+2212, U+2215, U+FEFF, U+FFFD;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/md.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
-    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

interface/public/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1"
-    />
-    <link rel="stylesheet" href="%PUBLIC_URL%/css/roboto.css" />
-    <link rel="manifest" href="%PUBLIC_URL%/app/manifest.json" />
-    <title>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

@@ -1,44 +1,51 @@
-import { FC, createRef, createContext, useContext, RefObject } from 'react';
+import { useEffect, useState } from 'react';
-import { SnackbarProvider } from 'notistack';
+import { ToastContainer, Slide } from 'react-toastify';
 
-import { IconButton } from '@mui/material';
+import 'react-toastify/dist/ReactToastify.min.css';
-import CloseIcon from '@mui/icons-material/Close';
 
+import { localStorageDetector } from 'typesafe-i18n/detectors';
 import { FeaturesLoader } from './contexts/features';
+import type { FC } from 'react';
+import AppRouting from 'AppRouting';
+import CustomTheme from 'CustomTheme';
 
-import CustomTheme from './CustomTheme';
+import TypesafeI18n from 'i18n/i18n-react';
-import AppRouting from './AppRouting';
+import { detectLocale } from 'i18n/i18n-util';
+import { loadLocaleAsync } from 'i18n/i18n-util.async';
+
+const detectedLocale = detectLocale(localStorageDetector);
 
 const App: FC = () => {
-  const notistackRef: RefObject<any> = createRef();
+  const [wasLoaded, setWasLoaded] = useState(false);
 
-  const onClickDismiss = (key: string | number | undefined) => () => {
+  useEffect(() => {
-    notistackRef.current.closeSnackbar(key);
+    void loadLocaleAsync(detectedLocale).then(() => setWasLoaded(true));
-  };
+  }, []);
 
-  const ColorModeContext = createContext({ toggleColorMode: () => {} });
+  if (!wasLoaded) return null;
-
-  const colorMode = useContext(ColorModeContext);
 
   return (
-    <ColorModeContext.Provider value={colorMode}>
+    <TypesafeI18n locale={detectedLocale}>
       <CustomTheme>
-        <SnackbarProvider
-          maxSnack={3}
-          anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-          ref={notistackRef}
-          action={(key) => (
-            <IconButton onClick={onClickDismiss(key)} size="small">
-              <CloseIcon />
-            </IconButton>
-          )}
-        >
         <FeaturesLoader>
           <AppRouting />
         </FeaturesLoader>
-        </SnackbarProvider>
+        <ToastContainer
+          position="bottom-left"
+          autoClose={3000}
+          hideProgressBar={false}
+          newestOnTop={false}
+          closeOnClick={true}
+          rtl={false}
+          pauseOnFocusLoss={false}
+          draggable={false}
+          pauseOnHover={false}
+          transition={Slide}
+          closeButton={false}
+          theme="light"
+        />
       </CustomTheme>
-    </ColorModeContext.Provider>
+    </TypesafeI18n>
   );
 };
 

interface/src/AppRouting.tsx

@@ -1,27 +1,28 @@
-import { FC, useContext, useEffect } from 'react';
+import { useContext, useEffect } from 'react';
-import { Navigate, Routes, Route, useLocation } from 'react-router-dom';
-import { useSnackbar, VariantType } from 'notistack';
 
-import { Authentication, AuthenticationContext } from './contexts/authentication';
+import { Route, Routes, Navigate, useLocation } from 'react-router-dom';
-import { FeaturesContext } from './contexts/features';
-import { RequireAuthenticated, RequireUnauthenticated } from './components';
 
-import SignIn from './SignIn';
+import { toast } from 'react-toastify';
-import AuthenticatedRouting from './AuthenticatedRouting';
+import type { FC } from 'react';
+
+import AuthenticatedRouting from 'AuthenticatedRouting';
+import SignIn from 'SignIn';
+import { RequireAuthenticated, RequireUnauthenticated } from 'components';
+
+import { Authentication, AuthenticationContext } from 'contexts/authentication';
+import { useI18nContext } from 'i18n/i18n-react';
 
 interface SecurityRedirectProps {
   message: string;
-  variant?: VariantType;
   signOut?: boolean;
 }
 
-const RootRedirect: FC<SecurityRedirectProps> = ({ message, variant, signOut }) => {
+const RootRedirect: FC<SecurityRedirectProps> = ({ message, signOut }) => {
   const authenticationContext = useContext(AuthenticationContext);
-  const { enqueueSnackbar } = useSnackbar();
   useEffect(() => {
     signOut && authenticationContext.signOut(false);
-    enqueueSnackbar(message, { variant });
+    toast.success(message);
-  }, [message, variant, signOut, authenticationContext, enqueueSnackbar]);
+  }, [message, signOut, authenticationContext]);
   return <Navigate to="/" />;
 };
 
@@ -40,15 +41,14 @@ export const RemoveTrailingSlashes = () => {
 };
 
 const AppRouting: FC = () => {
-  const { features } = useContext(FeaturesContext);
+  const { LL } = useI18nContext();
 
   return (
     <Authentication>
       <RemoveTrailingSlashes />
       <Routes>
-        <Route path="/unauthorized" element={<RootRedirect message="Please sign in to continue" signOut />} />
+        <Route path="/unauthorized" element={<RootRedirect message={LL.PLEASE_SIGNIN()} signOut />} />
-        <Route path="/fileUpdated" element={<RootRedirect message="Upload successful" variant="success" />} />
+        <Route path="/fileUpdated" element={<RootRedirect message={LL.UPLOAD_SUCCESSFUL()} />} />
-        {features.security && (
         <Route
           path="/"
           element={
@@ -57,7 +57,6 @@ const AppRouting: FC = () => {
             </RequireUnauthenticated>
           }
         />
-        )}
         <Route
           path="/*"
           element={

interface/src/AuthenticatedRouting.tsx

@@ -1,52 +1,52 @@
-import { FC, useCallback, useContext, useEffect } from 'react';
+import { Navigate, Routes, Route } from 'react-router-dom';
-import { Navigate, Routes, Route, useNavigate, useLocation } from 'react-router-dom';
+import Dashboard from './project/Dashboard';
-import { AxiosError } from 'axios';
+import Help from './project/Help';
+import Settings from './project/Settings';
+import type { FC } from 'react';
 
-import { FeaturesContext } from './contexts/features';
+import { Layout, RequireAdmin } from 'components';
-import * as AuthenticationApi from './api/authentication';
+import AccessPoint from 'framework/ap/AccessPoint';
-import { PROJECT_PATH } from './api/env';
+import Mqtt from 'framework/mqtt/Mqtt';
-import { AXIOS } from './api/endpoints';
+import NetworkConnection from 'framework/network/NetworkConnection';
-import { Layout, RequireAdmin } from './components';
+import NetworkTime from 'framework/ntp/NetworkTime';
+import Security from 'framework/security/Security';
+import System from 'framework/system/System';
 
-import ProjectRouting from './project/ProjectRouting';
+const AuthenticatedRouting: FC = () => (
+  // const location = useLocation();
+  // const navigate = useNavigate();
+  // const handleApiResponseError = useCallback(
+  //   (error: AxiosError) => {
+  //     if (error.response && error.response.status === 401) {
+  //       AuthenticationApi.storeLoginRedirect(location);
+  //       navigate('/unauthorized');
+  //     }
+  //     return Promise.reject(error);
+  //   },
+  //   [location, navigate]
+  // );
+  // useEffect(() => {
+  //   const axiosHandlerId = AXIOS.interceptors.response.use((response) => response, handleApiResponseError);
+  //   return () => AXIOS.interceptors.response.eject(axiosHandlerId);
+  // }, [handleApiResponseError]);
 
-import NetworkConnection from './framework/network/NetworkConnection';
-import AccessPoint from './framework/ap/AccessPoint';
-import NetworkTime from './framework/ntp/NetworkTime';
-import Mqtt from './framework/mqtt/Mqtt';
-import System from './framework/system/System';
-import Security from './framework/security/Security';
-
-const AuthenticatedRouting: FC = () => {
-  const { features } = useContext(FeaturesContext);
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  const handleApiResponseError = useCallback(
-    (error: AxiosError) => {
-      if (error.response && error.response.status === 401) {
-        AuthenticationApi.storeLoginRedirect(location);
-        navigate('/unauthorized');
-      }
-      return Promise.reject(error);
-    },
-    [location, navigate]
-  );
-
-  useEffect(() => {
-    const axiosHandlerId = AXIOS.interceptors.response.use((response) => response, handleApiResponseError);
-    return () => AXIOS.interceptors.response.eject(axiosHandlerId);
-  }, [handleApiResponseError]);
-
-  return (
   <Layout>
     <Routes>
-        {features.project && <Route path={`/${PROJECT_PATH}/*`} element={<ProjectRouting />} />}
+      <Route path="/dashboard/*" element={<Dashboard />} />
+      <Route
+        path="/settings/*"
+        element={
+          <RequireAdmin>
+            <Settings />
+          </RequireAdmin>
+        }
+      />
+      <Route path="/help/*" element={<Help />} />
+
       <Route path="/network/*" element={<NetworkConnection />} />
       <Route path="/ap/*" element={<AccessPoint />} />
-        {features.ntp && <Route path="/ntp/*" element={<NetworkTime />} />}
+      <Route path="/ntp/*" element={<NetworkTime />} />
-        {features.mqtt && <Route path="/mqtt/*" element={<Mqtt />} />}
+      <Route path="/mqtt/*" element={<Mqtt />} />
-        {features.security && (
       <Route
         path="/security/*"
         element={
@@ -55,12 +55,10 @@ const AuthenticatedRouting: FC = () => {
           </RequireAdmin>
         }
       />
-        )}
       <Route path="/system/*" element={<System />} />
-        <Route path="/*" element={<Navigate to={AuthenticationApi.getDefaultRoute(features)} />} />
+      <Route path="/*" element={<Navigate to="/" />} />
     </Routes>
   </Layout>
 );
-};
 
 export default AuthenticatedRouting;

interface/src/CustomTheme.tsx

@@ -1,10 +1,18 @@
-import { FC } from 'react';
-
 import { CssBaseline } from '@mui/material';
 import { createTheme, responsiveFontSizes, ThemeProvider } from '@mui/material/styles';
-import { blueGrey, blue } from '@mui/material/colors';
+import type { FC } from 'react';
 
-import { RequiredChildrenProps } from './utils';
+import type { RequiredChildrenProps } from 'utils';
+
+export const dialogStyle = {
+  '& .MuiDialog-paper': {
+    borderRadius: '8px',
+    borderColor: '#565656',
+    borderStyle: 'solid',
+    borderWidth: '1px'
+  },
+  backdropFilter: 'blur(1px)'
+};
 
 const theme = responsiveFontSizes(
   createTheme({
@@ -14,10 +22,13 @@ const theme = responsiveFontSizes(
     palette: {
       mode: 'dark',
       secondary: {
-        main: blue[500]
+        main: '#2196f3' // blue[500]
       },
       info: {
-        main: blueGrey[500]
+        main: '#607d8b' // blueGrey[500]
+      },
+      text: {
+        disabled: '#eee' // white
       }
     }
   })

interface/src/SignIn.tsx

@@ -1,24 +1,40 @@
-import { FC, useContext, useState } from 'react';
-import { ValidateFieldsError } from 'async-validator';
-import { useSnackbar } from 'notistack';
-
-import { Box, Fab, Paper, Typography } from '@mui/material';
 import ForwardIcon from '@mui/icons-material/Forward';
+import { Box, Paper, Typography, MenuItem, TextField, Button } from '@mui/material';
+import { useRequest } from 'alova';
+import { useContext, useState } from 'react';
+import { toast } from 'react-toastify';
+import { FeaturesContext } from './contexts/features';
+import type { ValidateFieldsError } from 'async-validator';
 
-import * as AuthenticationApi from './api/authentication';
+import type { Locales } from 'i18n/i18n-types';
-import { PROJECT_NAME } from './api/env';
+import type { ChangeEventHandler, FC } from 'react';
-import { AuthenticationContext } from './contexts/authentication';
+import type { SignInRequest } from 'types';
+import * as AuthenticationApi from 'api/authentication';
+import { PROJECT_NAME } from 'api/env';
 
-import { AxiosError } from 'axios';
+import { ValidatedPasswordField, ValidatedTextField } from 'components';
+import { AuthenticationContext } from 'contexts/authentication';
 
-import { extractErrorMessage, onEnterCallback, updateValue } from './utils';
+import DEflag from 'i18n/DE.svg';
-import { SignInRequest } from './types';
+import FRflag from 'i18n/FR.svg';
-import { ValidatedTextField } from './components';
+import GBflag from 'i18n/GB.svg';
-import { SIGN_IN_REQUEST_VALIDATOR, validate } from './validators';
+import ITflag from 'i18n/IT.svg';
+import NLflag from 'i18n/NL.svg';
+import NOflag from 'i18n/NO.svg';
+import PLflag from 'i18n/PL.svg';
+import SVflag from 'i18n/SV.svg';
+import TRflag from 'i18n/TR.svg';
+import { I18nContext } from 'i18n/i18n-react';
+import { loadLocaleAsync } from 'i18n/i18n-util.async';
+import { onEnterCallback, updateValue } from 'utils';
+import { SIGN_IN_REQUEST_VALIDATOR, validate } from 'validators';
 
 const SignIn: FC = () => {
   const authenticationContext = useContext(AuthenticationContext);
-  const { enqueueSnackbar } = useSnackbar();
+
+  const { LL, setLocale, locale } = useContext(I18nContext);
+
+  const { features } = useContext(FeaturesContext);
 
   const [signInRequest, setSignInRequest] = useState<SignInRequest>({
     username: '',
@@ -27,37 +43,52 @@ const SignIn: FC = () => {
   const [processing, setProcessing] = useState<boolean>(false);
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
+  const { send: callSignIn, onSuccess } = useRequest((request: SignInRequest) => AuthenticationApi.signIn(request), {
+    immediate: false
+  });
+
+  onSuccess((response) => {
+    if (response.data) {
+      authenticationContext.signIn(response.data.access_token);
+    }
+  });
+
   const updateLoginRequestValue = updateValue(setSignInRequest);
 
+  const signIn = async () => {
+    await callSignIn(signInRequest).catch((event) => {
+      if (event.message === 'Unauthorized') {
+        toast.warning(LL.INVALID_LOGIN());
+      } else {
+        toast.error(LL.ERROR() + ' ' + event.message);
+      }
+      setProcessing(false);
+    });
+  };
+
   const validateAndSignIn = async () => {
     setProcessing(true);
+    SIGN_IN_REQUEST_VALIDATOR.messages({
+      required: LL.IS_REQUIRED('%s')
+    });
     try {
       await validate(SIGN_IN_REQUEST_VALIDATOR, signInRequest);
-      signIn();
+      await signIn();
     } catch (errors: any) {
       setFieldErrors(errors);
       setProcessing(false);
     }
   };
 
-  const signIn = async () => {
-    try {
-      const { data: loginResponse } = await AuthenticationApi.signIn(signInRequest);
-      authenticationContext.signIn(loginResponse.access_token);
-    } catch (error: unknown) {
-      if (error instanceof AxiosError) {
-        if (error.response?.status === 401) {
-          enqueueSnackbar('Invalid login details', { variant: 'warning' });
-        }
-      } else {
-        enqueueSnackbar(extractErrorMessage(error, 'Unexpected error, please try again'), { variant: 'error' });
-      }
-      setProcessing(false);
-    }
-  };
-
   const submitOnEnter = onEnterCallback(signIn);
 
+  const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = async ({ target }) => {
+    const loc = target.value as Locales;
+    localStorage.setItem('lang', loc);
+    await loadLocaleAsync(loc);
+    setLocale(loc);
+  };
+
   return (
     <Box
       display="flex"
@@ -72,43 +103,88 @@ const SignIn: FC = () => {
         sx={(theme) => ({
           textAlign: 'center',
           padding: theme.spacing(2),
-          paddingTop: '200px',
+          paddingTop: '172px',
           backgroundImage: 'url("/app/icon.png")',
           backgroundRepeat: 'no-repeat',
           backgroundPosition: '50% ' + theme.spacing(2),
-          backgroundSize: 'auto 150px',
           width: '100%'
         })}
       >
         <Typography variant="h4">{PROJECT_NAME}</Typography>
+        <Typography variant="subtitle2">{features.version}</Typography>
+
+        <TextField name="locale" variant="outlined" value={locale} onChange={onLocaleSelected} size="small" select>
+          <MenuItem key="de" value="de">
+            <img src={DEflag} style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;DE
+          </MenuItem>
+          <MenuItem key="en" value="en">
+            <img src={GBflag} style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;EN
+          </MenuItem>
+          <MenuItem key="fr" value="fr">
+            <img src={FRflag} style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;FR
+          </MenuItem>
+          <MenuItem key="it" value="it">
+            <img src={ITflag} style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;IT
+          </MenuItem>
+          <MenuItem key="nl" value="nl">
+            <img src={NLflag} style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;NL
+          </MenuItem>
+          <MenuItem key="no" value="no">
+            <img src={NOflag} style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;NO
+          </MenuItem>
+          <MenuItem key="pl" value="pl">
+            <img src={PLflag} style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;PL
+          </MenuItem>
+          <MenuItem key="sv" value="sv">
+            <img src={SVflag} style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;SV
+          </MenuItem>
+          <MenuItem key="tr" value="tr">
+            <img src={TRflag} style={{ width: 16, verticalAlign: 'middle' }} />
+            &nbsp;TR
+          </MenuItem>
+        </TextField>
+
+        <Box display="flex" flexDirection="column" alignItems="center">
           <ValidatedTextField
             fieldErrors={fieldErrors}
             disabled={processing}
+            sx={{
+              width: 240
+            }}
             name="username"
-          label="Username"
+            label={LL.USERNAME(0)}
             value={signInRequest.username}
             onChange={updateLoginRequestValue}
             margin="normal"
             variant="outlined"
-          fullWidth
           />
-        <ValidatedTextField
+          <ValidatedPasswordField
             fieldErrors={fieldErrors}
             disabled={processing}
-          type="password"
+            sx={{
+              width: 240
+            }}
             name="password"
-          label="Password"
+            label={LL.PASSWORD()}
             value={signInRequest.password}
             onChange={updateLoginRequestValue}
             onKeyDown={submitOnEnter}
-          margin="normal"
             variant="outlined"
-          fullWidth
           />
-        <Fab variant="extended" color="primary" sx={{ mt: 2 }} onClick={validateAndSignIn} disabled={processing}>
+        </Box>
+
+        <Button variant="contained" color="primary" sx={{ mt: 2 }} onClick={validateAndSignIn} disabled={processing}>
           <ForwardIcon sx={{ mr: 1 }} />
-          Sign In
+          {LL.SIGN_IN()}
-        </Fab>
+        </Button>
       </Paper>
     </Box>
   );

interface/src/api/ap.ts

@@ -1,16 +1,7 @@
-import { AxiosPromise } from 'axios';
+import { alovaInstance } from './endpoints';
 
-import { APSettings, APStatus } from '../types';
+import type { APSettings, APStatus } from 'types';
-import { AXIOS } from './endpoints';
 
-export function readAPStatus(): AxiosPromise<APStatus> {
+export const readAPStatus = () => alovaInstance.Get<APStatus>('/rest/apStatus');
-  return AXIOS.get('/apStatus');
+export const readAPSettings = () => alovaInstance.Get<APSettings>('/rest/apSettings');
-}
+export const updateAPSettings = (data: APSettings) => alovaInstance.Post<APSettings>('/rest/apSettings', data);
-
-export function readAPSettings(): AxiosPromise<APSettings> {
-  return AXIOS.get('/apSettings');
-}
-
-export function updateAPSettings(apSettings: APSettings): AxiosPromise<APSettings> {
-  return AXIOS.post('/apSettings', apSettings);
-}

interface/src/api/authentication.ts

@@ -1,29 +1,16 @@
-import { AxiosPromise } from 'axios';
+import { jwtDecode } from 'jwt-decode';
-import * as H from 'history';
+import { ACCESS_TOKEN, alovaInstance } from './endpoints';
-import jwtDecode from 'jwt-decode';
+import type * as H from 'history';
-import { Path } from 'react-router-dom';
+import type { Path } from 'react-router-dom';
 
-import { Features, Me, SignInRequest, SignInResponse } from '../types';
+import type { Me, SignInRequest, SignInResponse } from 'types';
-
-import { ACCESS_TOKEN, AXIOS } from './endpoints';
-import { PROJECT_PATH } from './env';
 
 export const SIGN_IN_PATHNAME = 'loginPathname';
 export const SIGN_IN_SEARCH = 'loginSearch';
 
-export const getDefaultRoute = (features: Features) => (features.project ? `/${PROJECT_PATH}` : '/wifi');
+export const verifyAuthorization = () => alovaInstance.Get('/rest/verifyAuthorization');
+export const signIn = (request: SignInRequest) => alovaInstance.Post<SignInResponse>('/rest/signIn', request);
 
-export function verifyAuthorization(): AxiosPromise<void> {
-  return AXIOS.get('/verifyAuthorization');
-}
-
-export function signIn(request: SignInRequest): AxiosPromise<SignInResponse> {
-  return AXIOS.post('/signIn', request);
-}
-
-/**
- * Fallback to sessionStorage if localStorage is absent. WebView may not have local storage enabled.
- */
 export function getStorage() {
   return localStorage || sessionStorage;
 }
@@ -40,18 +27,18 @@ export function clearLoginRedirect() {
   getStorage().removeItem(SIGN_IN_SEARCH);
 }
 
-export function fetchLoginRedirect(features: Features): Partial<Path> {
+export function fetchLoginRedirect(): Partial<Path> {
   const signInPathname = getStorage().getItem(SIGN_IN_PATHNAME);
   const signInSearch = getStorage().getItem(SIGN_IN_SEARCH);
   clearLoginRedirect();
   return {
-    pathname: signInPathname || getDefaultRoute(features),
+    pathname: signInPathname || `/dashboard`,
     search: (signInPathname && signInSearch) || undefined
   };
 }
 
 export const clearAccessToken = () => localStorage.removeItem(ACCESS_TOKEN);
-export const decodeMeJWT = (accessToken: string): Me => jwtDecode(accessToken) as Me;
+export const decodeMeJWT = (accessToken: string): Me => jwtDecode(accessToken);
 
 export function addAccessTokenParameter(url: string) {
   const accessToken = getStorage().getItem(ACCESS_TOKEN);

interface/src/api/endpoints.ts

@@ -1,105 +1,60 @@
-import axios, { AxiosPromise, CancelToken } from 'axios';
+import { xhrRequestAdapter } from '@alova/adapter-xhr';
+import { createAlova } from 'alova';
+import ReactHook from 'alova/react';
+import { unpack } from '../api/unpack';
 
-import { decode } from '@msgpack/msgpack';
-
-export const WS_BASE_URL = '/ws/';
-export const API_BASE_URL = '/rest/';
-export const ES_BASE_URL = '/es/';
-export const EMSESP_API_BASE_URL = '/api/';
 export const ACCESS_TOKEN = 'access_token';
-export const WEB_SOCKET_ROOT = calculateWebSocketRoot(WS_BASE_URL);
-export const EVENT_SOURCE_ROOT = calculateEventSourceRoot(ES_BASE_URL);
 
-export const AXIOS = axios.create({
+const host = window.location.host;
-  baseURL: API_BASE_URL,
+export const WEB_SOCKET_ROOT = 'ws://' + host + '/ws/';
-  headers: {
+export const EVENT_SOURCE_ROOT = 'http://' + host + '/es/';
-    'Content-Type': 'application/json'
+
-  },
+export const alovaInstance = createAlova({
-  transformRequest: [
+  statesHook: ReactHook,
-    (data, headers) => {
+  timeout: 3000, // 3 seconds but throwing a timeout error
-      if (headers) {
+  localCache: null,
+  // localCache: {
+  //   GET: {
+  //     mode: 'placeholder', // see https://alova.js.org/learning/response-cache/#cache-replaceholder-mode
+  //     expire: 2000
+  //   }
+  // },
+  requestAdapter: xhrRequestAdapter(),
+  beforeRequest(method) {
     if (localStorage.getItem(ACCESS_TOKEN)) {
-          headers.Authorization = 'Bearer ' + localStorage.getItem(ACCESS_TOKEN);
+      method.config.headers.Authorization = 'Bearer ' + localStorage.getItem(ACCESS_TOKEN);
+    }
+  },
+
+  responded: {
+    onSuccess: async (response) => {
+      // if (response.status === 202) {
+      //   throw new Error('Wait'); // wifi scan in progress
+      // } else
+      if (response.status === 205) {
+        throw new Error('Reboot required');
+      } else if (response.status === 400) {
+        throw new Error('Request Failed');
+      } else if (response.status >= 400) {
+        throw new Error(response.statusText);
+      }
+      const data = await response.data;
+      if (response.data instanceof ArrayBuffer) {
+        return unpack(data);
       }
-        if (headers['Content-Type'] !== 'application/json') {
       return data;
     }
+
+    // Interceptor for request failure. This interceptor will be entered when the request is wrong.
+    // http errors like 401 (unauthorized) are handled either in the methods or AuthenticatedRouting()
+    // onError: (error, method) => {
+    //   alert(error.message);
+    // }
   }
-      return JSON.stringify(data);
-    }
-  ]
 });
 
-export const AXIOS_API = axios.create({
+export const alovaInstanceGH = createAlova({
-  baseURL: EMSESP_API_BASE_URL,
+  baseURL: 'https://api.github.com/repos/emsesp/EMS-ESP32/releases',
-  headers: {
+  statesHook: ReactHook,
-    'Content-Type': 'application/json'
+  requestAdapter: xhrRequestAdapter()
-  },
-  transformRequest: [
-    (data, headers) => {
-      if (headers) {
-        if (localStorage.getItem(ACCESS_TOKEN)) {
-          headers.Authorization = 'Bearer ' + localStorage.getItem(ACCESS_TOKEN);
-        }
-        if (headers['Content-Type'] !== 'application/json') {
-          return data;
-        }
-      }
-      return JSON.stringify(data);
-    }
-  ]
 });
-
-export const AXIOS_BIN = axios.create({
-  baseURL: API_BASE_URL,
-  headers: {
-    'Content-Type': 'application/json'
-  },
-  responseType: 'arraybuffer',
-  transformRequest: [
-    (data, headers) => {
-      if (headers) {
-        if (localStorage.getItem(ACCESS_TOKEN)) {
-          headers.Authorization = 'Bearer ' + localStorage.getItem(ACCESS_TOKEN);
-        }
-        if (headers['Content-Type'] !== 'application/json') {
-          return data;
-        }
-      }
-      return JSON.stringify(data);
-    }
-  ],
-  transformResponse: [
-    (data) => {
-      return decode(data);
-    }
-  ]
-});
-
-function calculateWebSocketRoot(webSocketPath: string) {
-  const location = window.location;
-  const webProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
-  return webProtocol + '//' + location.host + webSocketPath;
-}
-
-function calculateEventSourceRoot(endpointPath: string) {
-  const location = window.location;
-  return location.protocol + '//' + location.host + endpointPath;
-}
-
-export interface FileUploadConfig {
-  cancelToken?: CancelToken;
-  onUploadProgress?: (progressEvent: ProgressEvent) => void;
-}
-
-export const startUploadFile = (url: string, file: File, config?: FileUploadConfig): AxiosPromise<void> => {
-  const formData = new FormData();
-  formData.append('file', file);
-
-  return AXIOS.post(url, formData, {
-    headers: {
-      'Content-Type': 'multipart/form-data'
-    },
-    ...(config || {})
-  });
-};

interface/src/api/env.ts

@@ -1,2 +1 @@
-export const PROJECT_NAME = process.env.REACT_APP_PROJECT_NAME || 'EMS-ESP';
+export const PROJECT_NAME = 'EMS-ESP';
-export const PROJECT_PATH = process.env.REACT_APP_PROJECT_PATH || 'project';

interface/src/api/features.ts

@@ -1,9 +1,5 @@
-import { AxiosPromise } from 'axios';
+import { alovaInstance } from './endpoints';
 
-import { Features } from '../types';
+import type { Features } from 'types';
 
-import { AXIOS } from './endpoints';
+export const readFeatures = () => alovaInstance.Get<Features>('/rest/features');
-
-export function readFeatures(): AxiosPromise<Features> {
-  return AXIOS.get('/features');
-}

interface/src/api/mqtt.ts

@@ -1,16 +1,6 @@
-import { AxiosPromise } from 'axios';
+import { alovaInstance } from './endpoints';
-import { MqttSettings, MqttStatus } from '../types';
+import type { MqttSettings, MqttStatus } from 'types';
 
-import { AXIOS } from './endpoints';
+export const readMqttStatus = () => alovaInstance.Get<MqttStatus>('/rest/mqttStatus');
-
+export const readMqttSettings = () => alovaInstance.Get<MqttSettings>('/rest/mqttSettings');
-export function readMqttStatus(): AxiosPromise<MqttStatus> {
+export const updateMqttSettings = (data: MqttSettings) => alovaInstance.Post<MqttSettings>('/rest/mqttSettings', data);
-  return AXIOS.get('/mqttStatus');
-}
-
-export function readMqttSettings(): AxiosPromise<MqttSettings> {
-  return AXIOS.get('/mqttSettings');
-}
-
-export function updateMqttSettings(ntpSettings: MqttSettings): AxiosPromise<MqttSettings> {
-  return AXIOS.post('/mqttSettings', ntpSettings);
-}

interface/src/api/network.ts

@@ -1,25 +1,15 @@
-import { AxiosPromise } from 'axios';
+import { alovaInstance } from './endpoints';
 
-import { WiFiNetworkList, NetworkSettings, NetworkStatus } from '../types';
+import type { WiFiNetworkList, NetworkSettings, NetworkStatus } from 'types';
 
-import { AXIOS } from './endpoints';
+export const readNetworkStatus = () => alovaInstance.Get<NetworkStatus>('/rest/networkStatus');
-
+export const scanNetworks = () => alovaInstance.Get('/rest/scanNetworks');
-export function readNetworkStatus(): AxiosPromise<NetworkStatus> {
+export const listNetworks = () =>
-  return AXIOS.get('/networkStatus');
+  alovaInstance.Get<WiFiNetworkList>('/rest/listNetworks', {
-}
+    name: 'listNetworks',
-
+    timeout: 20000 // timeout 20 seconds
-export function scanNetworks(): AxiosPromise<void> {
+  });
-  return AXIOS.get('/scanNetworks');
+export const readNetworkSettings = () =>
-}
+  alovaInstance.Get<NetworkSettings>('/rest/networkSettings', { name: 'networkSettings' });
-
+export const updateNetworkSettings = (wifiSettings: NetworkSettings) =>
-export function listNetworks(): AxiosPromise<WiFiNetworkList> {
+  alovaInstance.Post<NetworkSettings>('/rest/networkSettings', wifiSettings);
-  return AXIOS.get('/listNetworks');
-}
-
-export function readNetworkSettings(): AxiosPromise<NetworkSettings> {
-  return AXIOS.get('/networkSettings');
-}
-
-export function updateNetworkSettings(wifiSettings: NetworkSettings): AxiosPromise<NetworkSettings> {
-  return AXIOS.post('/networkSettings', wifiSettings);
-}

interface/src/api/ntp.ts

@@ -1,20 +1,11 @@
-import { AxiosPromise } from 'axios';
+import { alovaInstance } from './endpoints';
-import { NTPSettings, NTPStatus, Time } from '../types';
+import type { NTPSettings, NTPStatus, Time } from 'types';
 
-import { AXIOS } from './endpoints';
+export const readNTPStatus = () => alovaInstance.Get<NTPStatus>('/rest/ntpStatus');
+export const readNTPSettings = () =>
+  alovaInstance.Get<NTPSettings>('/rest/ntpSettings', {
+    name: 'ntpSettings'
+  });
+export const updateNTPSettings = (data: NTPSettings) => alovaInstance.Post<NTPSettings>('/rest/ntpSettings', data);
 
-export function readNTPStatus(): AxiosPromise<NTPStatus> {
+export const updateTime = (data: Time) => alovaInstance.Post<Time>('/rest/time', data);
-  return AXIOS.get('/ntpStatus');
-}
-
-export function readNTPSettings(): AxiosPromise<NTPSettings> {
-  return AXIOS.get('/ntpSettings');
-}
-
-export function updateNTPSettings(ntpSettings: NTPSettings): AxiosPromise<NTPSettings> {
-  return AXIOS.post('/ntpSettings', ntpSettings);
-}
-
-export function updateTime(time: Time): AxiosPromise<Time> {
-  return AXIOS.post('/time', time);
-}

interface/src/api/security.ts

@@ -1,17 +1,13 @@
-import { AxiosPromise } from 'axios';
+import { alovaInstance } from './endpoints';
 
-import { SecuritySettings, Token } from '../types';
+import type { SecuritySettings, Token } from 'types';
 
-import { AXIOS } from './endpoints';
+export const readSecuritySettings = () => alovaInstance.Get<SecuritySettings>('/rest/securitySettings');
 
-export function readSecuritySettings(): AxiosPromise<SecuritySettings> {
+export const updateSecuritySettings = (securitySettings: SecuritySettings) =>
-  return AXIOS.get('/securitySettings');
+  alovaInstance.Post('/rest/securitySettings', securitySettings);
-}
 
-export function updateSecuritySettings(securitySettings: SecuritySettings): AxiosPromise<SecuritySettings> {
+export const generateToken = (username?: string) =>
-  return AXIOS.post('/securitySettings', securitySettings);
+  alovaInstance.Get<Token>('/rest/generateToken', {
-}
+    params: { username }
-
+  });
-export function generateToken(username?: string): AxiosPromise<Token> {
-  return AXIOS.get('/generateToken', { params: { username } });
-}

interface/src/api/system.ts

@@ -1,41 +1,42 @@
-import { AxiosPromise } from 'axios';
+import { alovaInstance, alovaInstanceGH } from './endpoints';
+import type { OTASettings, SystemStatus, LogSettings } from 'types';
 
-import { OTASettings, SystemStatus, LogSettings, LogEntries } from '../types';
+// SystemStatus - also used to ping in Restart monitor for pinging
+export const readSystemStatus = () => alovaInstance.Get<SystemStatus>('/rest/systemStatus');
 
-import { AXIOS, AXIOS_BIN, FileUploadConfig, startUploadFile } from './endpoints';
+// commands
+export const restart = () => alovaInstance.Post('/rest/restart');
+export const partition = () => alovaInstance.Post('/rest/partition');
+export const factoryReset = () => alovaInstance.Post('/rest/factoryReset');
 
-export function readSystemStatus(timeout?: number): AxiosPromise<SystemStatus> {
+// OTA
-  return AXIOS.get('/systemStatus', { timeout });
+export const readOTASettings = () => alovaInstance.Get<OTASettings>(`/rest/otaSettings`);
+export const updateOTASettings = (data: any) => alovaInstance.Post('/rest/otaSettings', data);
+
+// SystemLog
+export const readLogSettings = () => alovaInstance.Get<LogSettings>(`/rest/logSettings`);
+export const updateLogSettings = (data: any) => alovaInstance.Post('/rest/logSettings', data);
+export const fetchLog = () => alovaInstance.Post('/rest/fetchLog');
+
+// Get versions from github
+export const getStableVersion = () =>
+  alovaInstanceGH.Get('latest', {
+    transformData(response: any) {
+      return response.data.name.substring(1);
     }
-
+  });
-export function restart(): AxiosPromise<void> {
+export const getDevVersion = () =>
-  return AXIOS.post('/restart');
+  alovaInstanceGH.Get('tags/latest', {
-}
+    transformData(response: any) {
-
+      return response.data.name.split(/\s+/).splice(-1)[0].substring(1);
-export function factoryReset(): AxiosPromise<void> {
-  return AXIOS.post('/factoryReset');
-}
-
-export function readOTASettings(): AxiosPromise<OTASettings> {
-  return AXIOS.get('/otaSettings');
-}
-
-export function updateOTASettings(otaSettings: OTASettings): AxiosPromise<OTASettings> {
-  return AXIOS.post('/otaSettings', otaSettings);
-}
-
-export const uploadFile = (file: File, config?: FileUploadConfig): AxiosPromise<void> =>
-  startUploadFile('/uploadFile', file, config);
-
-export function readLogSettings(): AxiosPromise<LogSettings> {
-  return AXIOS.get('/logSettings');
-}
-
-export function updateLogSettings(logSettings: LogSettings): AxiosPromise<LogSettings> {
-  return AXIOS.post('/logSettings', logSettings);
-}
-
-export function readLogEntries(): AxiosPromise<LogEntries> {
-  return AXIOS_BIN.get('/fetchLog');
     }
+  });
 
+export const uploadFile = (file: File) => {
+  const formData = new FormData();
+  formData.append('file', file);
+  return alovaInstance.Post('/rest/uploadFile', formData, {
+    timeout: 60000, // override timeout for uploading firmware - 1 minute
+    enableUpload: true
+  });
+};

interface/src/components/ButtonRow.tsx

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { Box } from '@mui/material';
-import { Box, BoxProps } from '@mui/material';
+import type { BoxProps } from '@mui/material';
+import type { FC } from 'react';
 
-const ButtonRow: FC<BoxProps> = ({ children, ...rest }) => {
+const ButtonRow: FC<BoxProps> = ({ children, ...rest }) => (
-  return (
   <Box
     sx={{
       '& button, & a, & .MuiCard-root': {
@@ -21,6 +21,5 @@ const ButtonRow: FC<BoxProps> = ({ children, ...rest }) => {
     {children}
   </Box>
 );
-};
 
 export default ButtonRow;

interface/src/components/MessageBox.tsx

@@ -1,11 +1,10 @@
-import { FC } from 'react';
-
-import { Box, BoxProps, SvgIconProps, Theme, Typography, useTheme } from '@mui/material';
-
 import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
+import ErrorIcon from '@mui/icons-material/Error';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
-import ErrorIcon from '@mui/icons-material/Error';
+import { Box, Typography, useTheme } from '@mui/material';
+import type { BoxProps, SvgIconProps, Theme } from '@mui/material';
+import type { FC } from 'react';
 
 type MessageBoxLevel = 'warning' | 'success' | 'info' | 'error';
 

interface/src/components/SectionContent.tsx

@@ -1,8 +1,7 @@
-import { FC } from 'react';
-
 import { Paper, Divider } from '@mui/material';
+import type { FC } from 'react';
 
-import { RequiredChildrenProps } from '../utils';
+import type { RequiredChildrenProps } from 'utils';
 
 interface SectionContentProps extends RequiredChildrenProps {
   title: string;

interface/src/components/index.ts

@@ -6,3 +6,4 @@ export * from './upload';
 export { default as SectionContent } from './SectionContent';
 export { default as ButtonRow } from './ButtonRow';
 export { default as MessageBox } from './MessageBox';
+export { default as BlockNavigation } from './routing/BlockNavigation';

interface/src/components/inputs/BlockFormControlLabel.tsx

@@ -1,5 +1,6 @@
-import { FC } from 'react';
+import { FormControlLabel } from '@mui/material';
-import { FormControlLabel, FormControlLabelProps } from '@mui/material';
+import type { FormControlLabelProps } from '@mui/material';
+import type { FC } from 'react';
 
 const BlockFormControlLabel: FC<FormControlLabelProps> = (props) => (
   <div>

interface/src/components/inputs/ValidatedPasswordField.tsx

@@ -1,10 +1,11 @@
-import { FC, useState } from 'react';
-
-import { IconButton, InputAdornment } from '@mui/material';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import { IconButton, InputAdornment } from '@mui/material';
+import { useState } from 'react';
 
-import ValidatedTextField, { ValidatedTextFieldProps } from './ValidatedTextField';
+import ValidatedTextField from './ValidatedTextField';
+import type { ValidatedTextFieldProps } from './ValidatedTextField';
+import type { FC } from 'react';
 
 type ValidatedPasswordFieldProps = Omit<ValidatedTextFieldProps, 'type'>;
 
@@ -19,11 +20,7 @@ const ValidatedPasswordField: FC<ValidatedPasswordFieldProps> = ({ InputProps, .
         ...InputProps,
         endAdornment: (
           <InputAdornment position="end">
-            <IconButton
+            <IconButton onClick={() => setShowPassword(!showPassword)} edge="end">
-              aria-label="toggle password visibility"
-              onClick={() => setShowPassword(!showPassword)}
-              edge="end"
-            >
               {showPassword ? <VisibilityIcon /> : <VisibilityOffIcon />}
             </IconButton>
           </InputAdornment>

interface/src/components/inputs/ValidatedTextField.tsx

@@ -1,7 +1,7 @@
-import { FC } from 'react';
+import { FormHelperText, TextField } from '@mui/material';
-import { ValidateFieldsError } from 'async-validator';
+import type { TextFieldProps } from '@mui/material';
-
+import type { ValidateFieldsError } from 'async-validator';
-import { FormHelperText, TextField, TextFieldProps } from '@mui/material';
+import type { FC } from 'react';
 
 interface ValidatedFieldProps {
   fieldErrors?: ValidateFieldsError;

interface/src/components/layout/Layout.tsx

@@ -1,16 +1,15 @@
-import { FC, useState, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
-
 import { Box, Toolbar } from '@mui/material';
-
+import { useState, useEffect } from 'react';
-import { PROJECT_NAME } from '../../api/env';
+import { useLocation } from 'react-router-dom';
-import { RequiredChildrenProps } from '../../utils';
-
-import LayoutDrawer from './LayoutDrawer';
 import LayoutAppBar from './LayoutAppBar';
+import LayoutDrawer from './LayoutDrawer';
 import { LayoutContext } from './context';
+import type { FC } from 'react';
 
-export const DRAWER_WIDTH = 240;
+import type { RequiredChildrenProps } from 'utils';
+import { PROJECT_NAME } from 'api/env';
+
+export const DRAWER_WIDTH = 210;
 
 const Layout: FC<RequiredChildrenProps> = ({ children }) => {
   const [mobileOpen, setMobileOpen] = useState(false);

interface/src/components/layout/LayoutAppBar.tsx

@@ -1,23 +1,16 @@
-import { FC, useContext } from 'react';
-
-import { AppBar, Box, IconButton, Toolbar, Typography } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
-
+import { AppBar, Box, IconButton, Toolbar, Typography } from '@mui/material';
 import LayoutAuthMenu from './LayoutAuthMenu';
+import type { FC } from 'react';
 
-import { FeaturesContext } from '../../contexts/features';
+export const DRAWER_WIDTH = 210;
-
-export const DRAWER_WIDTH = 240;
 
 interface LayoutAppBarProps {
   title: string;
   onToggleDrawer: () => void;
 }
 
-const LayoutAppBar: FC<LayoutAppBarProps> = ({ title, onToggleDrawer }) => {
+const LayoutAppBar: FC<LayoutAppBarProps> = ({ title, onToggleDrawer }) => (
-  const { features } = useContext(FeaturesContext);
-
-  return (
   <AppBar
     position="fixed"
     sx={{
@@ -28,23 +21,16 @@ const LayoutAppBar: FC<LayoutAppBarProps> = ({ title, onToggleDrawer }) => {
     }}
   >
     <Toolbar>
-        <IconButton
+      <IconButton color="inherit" edge="start" onClick={onToggleDrawer} sx={{ mr: 2, display: { md: 'none' } }}>
-          color="inherit"
-          aria-label="open drawer"
-          edge="start"
-          onClick={onToggleDrawer}
-          sx={{ mr: 2, display: { md: 'none' } }}
-        >
         <MenuIcon />
       </IconButton>
       <Typography variant="h6" noWrap component="div">
         {title}
       </Typography>
       <Box flexGrow={1} />
-        {features.security && <LayoutAuthMenu />}
+      <LayoutAuthMenu />
     </Toolbar>
   </AppBar>
 );
-};
 
 export default LayoutAppBar;

interface/src/components/layout/LayoutAuthMenu.tsx

@@ -1,11 +1,35 @@
-import { FC, useState, useContext } from 'react';
-
-import { Box, Button, Divider, IconButton, Popover, Typography, Avatar, styled, TypographyProps } from '@mui/material';
-
-import PersonIcon from '@mui/icons-material/Person';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import PersonIcon from '@mui/icons-material/Person';
+import {
+  Box,
+  Button,
+  Divider,
+  IconButton,
+  Popover,
+  Typography,
+  Avatar,
+  styled,
+  MenuItem,
+  TextField
+} from '@mui/material';
+import { useState, useContext } from 'react';
+import type { TypographyProps } from '@mui/material';
 
-import { AuthenticatedContext } from '../../contexts/authentication';
+import type { Locales } from 'i18n/i18n-types';
+import type { FC, ChangeEventHandler } from 'react';
+import { AuthenticatedContext } from 'contexts/authentication';
+
+import DEflag from 'i18n/DE.svg';
+import FRflag from 'i18n/FR.svg';
+import GBflag from 'i18n/GB.svg';
+import ITflag from 'i18n/IT.svg';
+import NLflag from 'i18n/NL.svg';
+import NOflag from 'i18n/NO.svg';
+import PLflag from 'i18n/PL.svg';
+import SVflag from 'i18n/SV.svg';
+import TRflag from 'i18n/TR.svg';
+import { I18nContext } from 'i18n/i18n-react';
+import { loadLocaleAsync } from 'i18n/i18n-util.async';
 
 const ItemTypography = styled(Typography)<TypographyProps>({
   maxWidth: '250px',
@@ -23,6 +47,15 @@ const LayoutAuthMenu: FC = () => {
     setAnchorEl(event.currentTarget);
   };
 
+  const { locale, LL, setLocale } = useContext(I18nContext);
+
+  const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = async ({ target }) => {
+    const loc = target.value as Locales;
+    localStorage.setItem('lang', loc);
+    await loadLocaleAsync(loc);
+    setLocale(loc);
+  };
+
   const handleClose = () => {
     setAnchorEl(null);
   };
@@ -32,7 +65,60 @@ const LayoutAuthMenu: FC = () => {
 
   return (
     <>
-      <IconButton id="open-auth-menu" sx={{ padding: 0 }} aria-describedby={id} color="inherit" onClick={handleClick}>
+      <TextField
+        name="locale"
+        InputProps={{ style: { fontSize: 10 } }}
+        variant="outlined"
+        value={locale}
+        onChange={onLocaleSelected}
+        size="small"
+        select
+      >
+        <MenuItem key="de" value="de">
+          <img src={DEflag} style={{ width: 16, verticalAlign: 'middle' }} />
+          &nbsp;DE
+        </MenuItem>
+        <MenuItem key="en" value="en">
+          <img src={GBflag} style={{ width: 16, verticalAlign: 'middle' }} />
+          &nbsp;EN
+        </MenuItem>
+        <MenuItem key="fr" value="fr">
+          <img src={FRflag} style={{ width: 16, verticalAlign: 'middle' }} />
+          &nbsp;FR
+        </MenuItem>
+        <MenuItem key="it" value="it">
+          <img src={ITflag} style={{ width: 16, verticalAlign: 'middle' }} />
+          &nbsp;IT
+        </MenuItem>
+        <MenuItem key="nl" value="nl">
+          <img src={NLflag} style={{ width: 16, verticalAlign: 'middle' }} />
+          &nbsp;NL
+        </MenuItem>
+        <MenuItem key="no" value="no">
+          <img src={NOflag} style={{ width: 16, verticalAlign: 'middle' }} />
+          &nbsp;NO
+        </MenuItem>
+        <MenuItem key="pl" value="pl">
+          <img src={PLflag} style={{ width: 16, verticalAlign: 'middle' }} />
+          &nbsp;PL
+        </MenuItem>
+        <MenuItem key="sv" value="sv">
+          <img src={SVflag} style={{ width: 16, verticalAlign: 'middle' }} />
+          &nbsp;SV
+        </MenuItem>
+        <MenuItem key="tr" value="tr">
+          <img src={TRflag} style={{ width: 16, verticalAlign: 'middle' }} />
+          &nbsp;TR
+        </MenuItem>
+      </TextField>
+
+      <IconButton
+        id="open-auth-menu"
+        sx={{ ml: 1, padding: 0 }}
+        aria-describedby={id}
+        color="inherit"
+        onClick={handleClick}
+      >
         <AccountCircleIcon />
       </IconButton>
       <Popover
@@ -56,13 +142,15 @@ const LayoutAuthMenu: FC = () => {
           </Avatar>
           <Box pl={2}>
             <ItemTypography variant="h6">{me.username}</ItemTypography>
-            <ItemTypography variant="body1">{me.admin ? 'Admin User' : 'Guest User'}</ItemTypography>
+            <ItemTypography variant="body1">
+              {me.admin ? LL.ADMIN() : LL.GUEST()}&nbsp;{LL.USER(2)}
+            </ItemTypography>
           </Box>
         </Box>
         <Divider />
         <Box p={1.5}>
           <Button variant="outlined" fullWidth color="primary" onClick={() => signOut(true)}>
-            Sign Out
+            {LL.SIGN_OUT()}
           </Button>
         </Box>
       </Popover>

interface/src/components/layout/LayoutDrawer.tsx

@@ -1,11 +1,9 @@
-import { FC } from 'react';
-
 import { Box, Divider, Drawer, Toolbar, Typography, styled } from '@mui/material';
-
-import { PROJECT_NAME } from '../../api/env';
-
-import LayoutMenu from './LayoutMenu';
 import { DRAWER_WIDTH } from './Layout';
+import LayoutMenu from './LayoutMenu';
+import type { FC } from 'react';
+
+import { PROJECT_NAME } from 'api/env';
 
 const LayoutDrawerLogo = styled('img')(({ theme }) => ({
   [theme.breakpoints.down('sm')]: {
@@ -13,7 +11,7 @@ const LayoutDrawerLogo = styled('img')(({ theme }) => ({
     marginRight: theme.spacing(2)
   },
   [theme.breakpoints.up('sm')]: {
-    height: 36,
+    height: 38,
     marginRight: theme.spacing(2)
   }
 }));
@@ -29,9 +27,7 @@ const LayoutDrawer: FC<LayoutDrawerProps> = ({ mobileOpen, onClose }) => {
       <Toolbar disableGutters>
         <Box display="flex" alignItems="center" px={2}>
           <LayoutDrawerLogo src="/app/icon.png" alt={PROJECT_NAME} />
-          <Typography variant="h6" color="textPrimary">
+          <Typography variant="h6">{PROJECT_NAME}</Typography>
-            {PROJECT_NAME}
-          </Typography>
         </Box>
         <Divider absolute />
       </Toolbar>

interface/src/components/layout/LayoutMenu.tsx

@@ -1,39 +1,52 @@
-import { FC, useContext } from 'react';
-
-import { Divider, List } from '@mui/material';
-
-import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
+
+import DashboardIcon from '@mui/icons-material/Dashboard';
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
-import SettingsIcon from '@mui/icons-material/Settings';
+import InfoIcon from '@mui/icons-material/Info';
 import LockIcon from '@mui/icons-material/Lock';
+import SettingsIcon from '@mui/icons-material/Settings';
 import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernet';
+import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
+import TuneIcon from '@mui/icons-material/Tune';
+import { Divider, List } from '@mui/material';
+import { useContext } from 'react';
+import type { FC } from 'react';
 
-import { FeaturesContext } from '../../contexts/features';
+import LayoutMenuItem from 'components/layout/LayoutMenuItem';
-import ProjectMenu from '../../project/ProjectMenu';
 
-import LayoutMenuItem from './LayoutMenuItem';
+import { AuthenticatedContext } from 'contexts/authentication';
-import { AuthenticatedContext } from '../../contexts/authentication';
+
+import { useI18nContext } from 'i18n/i18n-react';
 
 const LayoutMenu: FC = () => {
-  const { features } = useContext(FeaturesContext);
   const authenticatedContext = useContext(AuthenticatedContext);
+  const { LL } = useI18nContext();
 
   return (
     <>
-      {features.project && (
       <List disablePadding component="nav">
-          <ProjectMenu />
+        <LayoutMenuItem icon={DashboardIcon} label={LL.DASHBOARD()} to={`/dashboard`} />
+        <LayoutMenuItem
+          icon={TuneIcon}
+          label={LL.SETTINGS_OF('')}
+          to={`/settings`}
+          disabled={!authenticatedContext.me.admin}
+        />
+        <LayoutMenuItem icon={InfoIcon} label={LL.HELP_OF('')} to={`/help`} />
         <Divider />
       </List>
-      )}
       <List disablePadding component="nav">
-        <LayoutMenuItem icon={SettingsEthernetIcon} label="Network Connection" to="/network" />
+        <LayoutMenuItem icon={SettingsEthernetIcon} label={LL.NETWORK(0)} to="/network" />
-        <LayoutMenuItem icon={SettingsInputAntennaIcon} label="Access Point" to="/ap" />
+        <LayoutMenuItem icon={SettingsInputAntennaIcon} label={LL.ACCESS_POINT(0)} to="/ap" />
-        {features.ntp && <LayoutMenuItem icon={AccessTimeIcon} label="Network Time" to="/ntp" />}
+        <LayoutMenuItem icon={AccessTimeIcon} label="NTP" to="/ntp" />
-        {features.mqtt && <LayoutMenuItem icon={DeviceHubIcon} label="MQTT" to="/mqtt" />}
+        <LayoutMenuItem icon={DeviceHubIcon} label="MQTT" to="/mqtt" />
-        <LayoutMenuItem icon={LockIcon} label="Security" to="/security" disabled={!authenticatedContext.me.admin} />
+        <LayoutMenuItem
-        <LayoutMenuItem icon={SettingsIcon} label="System" to="/system" />
+          icon={LockIcon}
+          label={LL.SECURITY(0)}
+          to="/security"
+          disabled={!authenticatedContext.me.admin}
+        />
+        <LayoutMenuItem icon={SettingsIcon} label={LL.SYSTEM(0)} to="/system" />
       </List>
     </>
   );

interface/src/components/layout/LayoutMenuItem.tsx

@@ -1,11 +1,9 @@
-import { FC } from 'react';
+import { ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import { Link, useLocation } from 'react-router-dom';
+import type { SvgIconProps } from '@mui/material';
+import type { FC } from 'react';
 
-import { ListItem, ListItemButton, ListItemIcon, ListItemText, SvgIconProps } from '@mui/material';
+import { routeMatches } from 'utils';
-
-import { grey } from '@mui/material/colors';
-
-import { routeMatches } from '../../utils';
 
 interface LayoutMenuItemProps {
   icon: React.ComponentType<SvgIconProps>;
@@ -17,13 +15,15 @@ interface LayoutMenuItemProps {
 const LayoutMenuItem: FC<LayoutMenuItemProps> = ({ icon: Icon, label, to, disabled }) => {
   const { pathname } = useLocation();
 
+  const selected = routeMatches(to, pathname);
+
   return (
-    <ListItem disablePadding selected={routeMatches(to, pathname)}>
+    <ListItem disablePadding>
-      <ListItemButton component={Link} to={to} disabled={disabled}>
+      <ListItemButton component={Link} to={to} disabled={disabled} selected={selected}>
-        <ListItemIcon sx={{ color: grey[500] }}>
+        <ListItemIcon sx={{ color: selected ? '#90caf9' : '#9e9e9e' }}>
           <Icon />
         </ListItemIcon>
-        <ListItemText>{label}</ListItemText>
+        <ListItemText sx={{ color: selected ? '#90caf9' : '#f5f5f5' }}>{label}</ListItemText>
       </ListItemButton>
     </ListItem>
   );

interface/src/components/loading/ApplicationError.tsx

@@ -1,7 +1,6 @@
-import { FC } from 'react';
-
-import { Box, Paper, Typography } from '@mui/material';
 import WarningIcon from '@mui/icons-material/Warning';
+import { Box, Paper, Typography } from '@mui/material';
+import type { FC } from 'react';
 
 interface ApplicationErrorProps {
   message?: string;

interface/src/components/loading/FormLoader.tsx

@@ -1,9 +1,10 @@
-import { FC } from 'react';
-
-import { Box, Button, CircularProgress, Typography } from '@mui/material';
 import RefreshIcon from '@mui/icons-material/Refresh';
+import { Box, Button, CircularProgress, Typography } from '@mui/material';
+import type { FC } from 'react';
 
-import { MessageBox } from '..';
+import { MessageBox } from 'components';
+
+import { useI18nContext } from 'i18n/i18n-react';
 
 interface FormLoaderProps {
   message?: string;
@@ -12,12 +13,14 @@ interface FormLoaderProps {
 }
 
 const FormLoader: FC<FormLoaderProps> = ({ errorMessage, onRetry, message = 'Loading…' }) => {
+  const { LL } = useI18nContext();
+
   if (errorMessage) {
     return (
       <MessageBox my={2} level="error" message={errorMessage}>
         {onRetry && (
           <Button startIcon={<RefreshIcon />} variant="contained" color="error" onClick={onRetry}>
-            Retry
+            {LL.RETRY()}
           </Button>
         )}
       </MessageBox>

interface/src/components/loading/LoadingSpinner.tsx

@@ -1,12 +1,17 @@
-import { FC } from 'react';
+import { CircularProgress, Box, Typography } from '@mui/material';
+import type { Theme } from '@mui/material';
+import type { FC } from 'react';
 
-import { CircularProgress, Box, Typography, Theme } from '@mui/material';
+import { useI18nContext } from 'i18n/i18n-react';
 
 interface LoadingSpinnerProps {
   height?: number | string;
 }
 
-const LoadingSpinner: FC<LoadingSpinnerProps> = ({ height = '100%' }) => (
+const LoadingSpinner: FC<LoadingSpinnerProps> = ({ height = '100%' }) => {
+  const { LL } = useI18nContext();
+
+  return (
     <Box display="flex" alignItems="center" justifyContent="center" flexDirection="column" padding={2} height={height}>
       <CircularProgress
         sx={(theme: Theme) => ({
@@ -16,9 +21,10 @@ const LoadingSpinner: FC<LoadingSpinnerProps> = ({ height = '100%' }) => (
         size={100}
       />
       <Typography variant="h4" color="textSecondary">
-      Loading&hellip;
+        {LL.LOADING()}&hellip;
       </Typography>
     </Box>
   );
+};
 
 export default LoadingSpinner;

interface/src/components/routing/BlockNavigation.tsx

@@ -0,0 +1,32 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
+import type { FC } from 'react';
+
+import type { unstable_Blocker as Blocker } from 'react-router-dom';
+
+import { dialogStyle } from 'CustomTheme';
+import { useI18nContext } from 'i18n/i18n-react';
+
+interface BlockNavigationProps {
+  blocker: Blocker;
+}
+
+const BlockNavigation: FC<BlockNavigationProps> = ({ blocker }) => {
+  const { LL } = useI18nContext();
+
+  return (
+    <Dialog sx={dialogStyle} open={blocker.state === 'blocked'}>
+      <DialogTitle>{LL.BLOCK_NAVIGATE_1()}</DialogTitle>
+      <DialogContent dividers>{LL.BLOCK_NAVIGATE_2()}</DialogContent>
+      <DialogActions>
+        <Button variant="outlined" onClick={() => blocker.reset?.()} color="secondary">
+          {LL.STAY()}
+        </Button>
+        <Button variant="contained" onClick={() => blocker.proceed?.()} color="primary">
+          {LL.LEAVE()}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default BlockNavigation;

interface/src/components/routing/RequireAdmin.tsx

@@ -1,8 +1,9 @@
-import { FC, useContext } from 'react';
+import { useContext } from 'react';
 import { Navigate } from 'react-router-dom';
+import type { FC } from 'react';
 
-import { AuthenticatedContext } from '../../contexts/authentication';
+import type { RequiredChildrenProps } from 'utils';
-import { RequiredChildrenProps } from '../../utils';
+import { AuthenticatedContext } from 'contexts/authentication';
 
 const RequireAdmin: FC<RequiredChildrenProps> = ({ children }) => {
   const authenticatedContext = useContext(AuthenticatedContext);

interface/src/components/routing/RequireAuthenticated.tsx

@@ -1,14 +1,12 @@
-import { FC, useContext, useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
 
-import {
+import type { AuthenticatedContextValue } from 'contexts/authentication/context';
-  AuthenticatedContext,
+import type { FC } from 'react';
-  AuthenticatedContextValue,
-  AuthenticationContext
-} from '../../contexts/authentication/context';
-import { storeLoginRedirect } from '../../api/authentication';
 
-import { RequiredChildrenProps } from '../../utils';
+import type { RequiredChildrenProps } from 'utils';
+import { storeLoginRedirect } from 'api/authentication';
+import { AuthenticatedContext, AuthenticationContext } from 'contexts/authentication/context';
 
 const RequireAuthenticated: FC<RequiredChildrenProps> = ({ children }) => {
   const authenticationContext = useContext(AuthenticationContext);

interface/src/components/routing/RequireUnauthenticated.tsx

@@ -1,16 +1,15 @@
-import { FC, useContext } from 'react';
+import { useContext } from 'react';
 import { Navigate } from 'react-router-dom';
+import type { FC } from 'react';
 
-import * as AuthenticationApi from '../../api/authentication';
+import type { RequiredChildrenProps } from 'utils';
-import { AuthenticationContext } from '../../contexts/authentication';
+import * as AuthenticationApi from 'api/authentication';
-import { RequiredChildrenProps } from '../../utils';
+import { AuthenticationContext } from 'contexts/authentication';
-import { FeaturesContext } from '../../contexts/features';
 
 const RequireUnauthenticated: FC<RequiredChildrenProps> = ({ children }) => {
-  const { features } = useContext(FeaturesContext);
   const authenticationContext = useContext(AuthenticationContext);
 
-  return authenticationContext.me ? <Navigate to={AuthenticationApi.fetchLoginRedirect(features)} /> : <>{children}</>;
+  return authenticationContext.me ? <Navigate to={AuthenticationApi.fetchLoginRedirect()} /> : <>{children}</>;
 };
 
 export default RequireUnauthenticated;

interface/src/components/routing/RouterTabs.tsx

@@ -1,9 +1,8 @@
-import React, { FC } from 'react';
-import { useNavigate } from 'react-router-dom';
-
 import { Tabs, useMediaQuery, useTheme } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import type { FC } from 'react';
 
-import { RequiredChildrenProps } from '../../utils';
+import type { RequiredChildrenProps } from 'utils';
 
 interface RouterTabsProps extends RequiredChildrenProps {
   value: string | false;
@@ -15,7 +14,7 @@ const RouterTabs: FC<RouterTabsProps> = ({ value, children }) => {
   const theme = useTheme();
   const smallDown = useMediaQuery(theme.breakpoints.down('sm'));
 
-  const handleTabChange = (event: React.ChangeEvent<{}>, path: string) => {
+  const handleTabChange = (event: React.ChangeEvent<HTMLInputElement>, path: string) => {
     navigate(path);
   };
 

interface/src/components/routing/useRouterTab.ts

@@ -1,9 +1,8 @@
-import { useMatch, useResolvedPath } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 export const useRouterTab = () => {
-  const routerTabPath = useResolvedPath(':tab');
+  const loc = useLocation().pathname;
-  const routerTabPathMatch = useMatch(routerTabPath.pathname);
+  const routerTab = loc.substring(0, loc.lastIndexOf('/')) ? loc : false;
 
-  const routerTab = routerTabPathMatch?.params?.tab || false;
   return { routerTab } as const;
 };

interface/src/components/upload/SingleUpload.tsx

@@ -1,12 +1,14 @@
-import { FC, Fragment } from 'react';
-import { useDropzone, DropzoneState } from 'react-dropzone';
-
-import { Box, Button, LinearProgress, Theme, Typography, useTheme } from '@mui/material';
-
-import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 import CancelIcon from '@mui/icons-material/Cancel';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+import { Box, Button, LinearProgress, Typography, useTheme } from '@mui/material';
+import { Fragment } from 'react';
+import { useDropzone } from 'react-dropzone';
+import type { Theme } from '@mui/material';
+import type { Progress } from 'alova';
+import type { FC } from 'react';
+import type { DropzoneState } from 'react-dropzone';
 
-const progressPercentage = (progress: ProgressEvent) => Math.round((progress.loaded * 100) / progress.total);
+import { useI18nContext } from 'i18n/i18n-react';
 
 const getBorderColor = (theme: Theme, props: DropzoneState) => {
   if (props.isDragAccept) {
@@ -24,31 +26,35 @@ const getBorderColor = (theme: Theme, props: DropzoneState) => {
 export interface SingleUploadProps {
   onDrop: (acceptedFiles: File[]) => void;
   onCancel: () => void;
-  uploading: boolean;
+  isUploading: boolean;
-  progress?: ProgressEvent;
+  progress: Progress;
 }
 
-const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, uploading, progress }) => {
+const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, isUploading, progress }) => {
+  const uploading = isUploading && progress.total > 0;
+
   const dropzoneState = useDropzone({
     onDrop,
     accept: {
       'application/octet-stream': ['.bin'],
-      'application/json': ['.json']
+      'application/json': ['.json'],
+      'text/plain': ['.md5']
     },
-    disabled: uploading,
+    disabled: isUploading,
     multiple: false
   });
+
   const { getRootProps, getInputProps } = dropzoneState;
   const theme = useTheme();
+  const { LL } = useI18nContext();
 
   const progressText = () => {
     if (uploading) {
-      if (progress?.lengthComputable) {
+      if (progress.total) {
-        return `Uploading: ${progressPercentage(progress)}%`;
+        return LL.UPLOADING() + ': ' + Math.round((progress.loaded * 100) / progress.total) + '%';
       }
-      return 'Uploading\u2026';
     }
-    return 'Drop file or click here';
+    return LL.UPLOAD_DROP_TEXT();
   };
 
   return (
@@ -60,7 +66,7 @@ const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, uploading, prog
           borderWidth: 2,
           borderRadius: 2,
           borderStyle: 'dashed',
-          color: theme.palette.grey[700],
+          color: theme.palette.grey[400],
           transition: 'border .24s ease-in-out',
           width: '100%',
           cursor: uploading ? 'default' : 'pointer',
@@ -76,12 +82,12 @@ const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, uploading, prog
           <Fragment>
             <Box width="100%" p={2}>
               <LinearProgress
-                variant={!progress || progress.lengthComputable ? 'determinate' : 'indeterminate'}
+                variant="determinate"
-                value={!progress ? 0 : progress.lengthComputable ? progressPercentage(progress) : 0}
+                value={progress.total === 0 ? 0 : Math.round((progress.loaded * 100) / progress.total)}
               />
             </Box>
             <Button startIcon={<CancelIcon />} variant="outlined" color="secondary" onClick={onCancel}>
-              Cancel
+              {LL.CANCEL()}
             </Button>
           </Fragment>
         )}

interface/src/components/upload/index.ts

@@ -1,2 +1 @@
 export { default as SingleUpload } from './SingleUpload';
-export { default as useFileUpload } from './useFileUpload';

interface/src/components/upload/useFileUpload.ts

@@ -1,59 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import axios, { AxiosPromise, CancelTokenSource } from 'axios';
-import { useSnackbar } from 'notistack';
-
-import { extractErrorMessage } from '../../utils';
-import { FileUploadConfig } from '../../api/endpoints';
-
-interface MediaUploadOptions {
-  upload: (file: File, config?: FileUploadConfig) => AxiosPromise<void>;
-}
-
-const useFileUpload = ({ upload }: MediaUploadOptions) => {
-  const { enqueueSnackbar } = useSnackbar();
-  const [uploading, setUploading] = useState<boolean>(false);
-  const [uploadProgress, setUploadProgress] = useState<ProgressEvent>();
-  const [uploadCancelToken, setUploadCancelToken] = useState<CancelTokenSource>();
-
-  const resetUploadingStates = () => {
-    setUploading(false);
-    setUploadProgress(undefined);
-    setUploadCancelToken(undefined);
-  };
-
-  const cancelUpload = useCallback(() => {
-    uploadCancelToken?.cancel();
-    resetUploadingStates();
-  }, [uploadCancelToken]);
-
-  useEffect(() => {
-    return () => {
-      uploadCancelToken?.cancel();
-    };
-  }, [uploadCancelToken]);
-
-  const uploadFile = async (images: File[]) => {
-    try {
-      const cancelToken = axios.CancelToken.source();
-      setUploadCancelToken(cancelToken);
-      setUploading(true);
-      await upload(images[0], {
-        onUploadProgress: setUploadProgress,
-        cancelToken: cancelToken.token
-      });
-      resetUploadingStates();
-      enqueueSnackbar('File uploaded', { variant: 'success' });
-    } catch (error: unknown) {
-      if (axios.isCancel(error)) {
-        enqueueSnackbar('Upload aborted', { variant: 'warning' });
-      } else {
-        resetUploadingStates();
-        enqueueSnackbar(extractErrorMessage(error, 'Upload failed'), { variant: 'error' });
-      }
-    }
-  };
-
-  return [uploadFile, cancelUpload, uploading, uploadProgress] as const;
-};
-
-export default useFileUpload;

interface/src/contexts/authentication/Authentication.tsx

@@ -1,67 +1,69 @@
-import { FC, useCallback, useContext, useEffect, useState } from 'react';
+import { useRequest } from 'alova';
-import { useSnackbar } from 'notistack';
+import { useCallback, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { redirect } from 'react-router-dom';
-
+import { toast } from 'react-toastify';
-import * as AuthenticationApi from '../../api/authentication';
-import { ACCESS_TOKEN } from '../../api/endpoints';
-import { RequiredChildrenProps } from '../../utils';
-import { LoadingSpinner } from '../../components';
-import { Me } from '../../types';
-import { FeaturesContext } from '../features';
 import { AuthenticationContext } from './context';
+import type { FC } from 'react';
+
+import type { Me } from 'types';
+import type { RequiredChildrenProps } from 'utils';
+import * as AuthenticationApi from 'api/authentication';
+import { ACCESS_TOKEN } from 'api/endpoints';
+import { LoadingSpinner } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
 
 const Authentication: FC<RequiredChildrenProps> = ({ children }) => {
-  const { features } = useContext(FeaturesContext);
+  const { LL } = useI18nContext();
-  const navigate = useNavigate();
-  const { enqueueSnackbar } = useSnackbar();
 
   const [initialized, setInitialized] = useState<boolean>(false);
   const [me, setMe] = useState<Me>();
 
+  const { send: verifyAuthorization } = useRequest(AuthenticationApi.verifyAuthorization(), {
+    immediate: false
+  });
+
   const signIn = (accessToken: string) => {
     try {
       AuthenticationApi.getStorage().setItem(ACCESS_TOKEN, accessToken);
       const decodedMe = AuthenticationApi.decodeMeJWT(accessToken);
       setMe(decodedMe);
-      enqueueSnackbar(`Logged in as ${decodedMe.username}`, { variant: 'success' });
+      toast.success(LL.LOGGED_IN({ name: decodedMe.username }));
-    } catch (error: unknown) {
+    } catch (error) {
       setMe(undefined);
       throw new Error('Failed to parse JWT');
     }
   };
 
-  const signOut = (redirect: boolean) => {
+  const signOut = (doRedirect: boolean) => {
     AuthenticationApi.clearAccessToken();
     setMe(undefined);
-    if (redirect) {
+    if (doRedirect) {
-      navigate('/');
+      // navigate('/');
+      redirect('/');
     }
   };
 
   const refresh = useCallback(async () => {
-    if (!features.security) {
-      setMe({ admin: true, username: 'admin' });
-      setInitialized(true);
-      return;
-    }
     const accessToken = AuthenticationApi.getStorage().getItem(ACCESS_TOKEN);
     if (accessToken) {
-      try {
+      await verifyAuthorization()
-        await AuthenticationApi.verifyAuthorization();
+        .then(() => {
           setMe(AuthenticationApi.decodeMeJWT(accessToken));
           setInitialized(true);
-      } catch (error: unknown) {
+        })
+        .catch(() => {
           setMe(undefined);
           setInitialized(true);
-      }
+        });
     } else {
       setMe(undefined);
       setInitialized(true);
     }
-  }, [features]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   useEffect(() => {
-    refresh();
+    void refresh();
   }, [refresh]);
 
   if (initialized) {

interface/src/contexts/authentication/context.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { Me } from '../../types';
+import type { Me } from 'types';
 
 export interface AuthenticationContextValue {
   refresh: () => Promise<void>;

interface/src/contexts/features/FeaturesLoader.tsx

@@ -1,29 +1,13 @@
-import { FC, useCallback, useEffect, useState } from 'react';
+import { useRequest } from 'alova';
-
-import * as FeaturesApi from '../../api/features';
-
-import { extractErrorMessage, RequiredChildrenProps } from '../../utils';
-import { Features } from '../../types';
-import { ApplicationError, LoadingSpinner } from '../../components';
 
 import { FeaturesContext } from '.';
+import type { FC } from 'react';
+
+import type { RequiredChildrenProps } from 'utils';
+import * as FeaturesApi from 'api/features';
 
 const FeaturesLoader: FC<RequiredChildrenProps> = (props) => {
-  const [errorMessage, setErrorMessage] = useState<string>();
+  const { data: features } = useRequest(FeaturesApi.readFeatures);
-  const [features, setFeatures] = useState<Features>();
-
-  const loadFeatures = useCallback(async () => {
-    try {
-      const response = await FeaturesApi.readFeatures();
-      setFeatures(response.data);
-    } catch (error: unknown) {
-      setErrorMessage(extractErrorMessage(error, 'Failed to fetch application details.'));
-    }
-  }, []);
-
-  useEffect(() => {
-    loadFeatures();
-  }, [loadFeatures]);
 
   if (features) {
     return (
@@ -36,12 +20,6 @@ const FeaturesLoader: FC<RequiredChildrenProps> = (props) => {
       </FeaturesContext.Provider>
     );
   }
-
-  if (errorMessage) {
-    return <ApplicationError message={errorMessage} />;
-  }
-
-  return <LoadingSpinner height="100vh" />;
 };
 
 export default FeaturesLoader;

interface/src/contexts/features/context.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react';
 
-import { Features } from '../../types';
+import type { Features } from 'types';
 
 export interface FeaturesContextValue {
   features: Features;

interface/src/framework/ap/APSettingsForm.tsx

@@ -1,37 +1,54 @@
-import { FC, useState } from 'react';
+import CancelIcon from '@mui/icons-material/Cancel';
-import { ValidateFieldsError } from 'async-validator';
+import WarningIcon from '@mui/icons-material/Warning';
-import { range } from 'lodash';
-
 import { Button, Checkbox, MenuItem } from '@mui/material';
-import SaveIcon from '@mui/icons-material/Save';
+import { range } from 'lodash-es';
+import { useState } from 'react';
+import type { ValidateFieldsError } from 'async-validator';
+import type { FC } from 'react';
 
-import { createAPSettingsValidator, validate } from '../../validators';
+import type { APSettings } from 'types';
+import * as APApi from 'api/ap';
 import {
   BlockFormControlLabel,
   ButtonRow,
   FormLoader,
   SectionContent,
   ValidatedPasswordField,
-  ValidatedTextField
+  ValidatedTextField,
-} from '../../components';
+  BlockNavigation
+} from 'components';
 
-import { APProvisionMode, APSettings } from '../../types';
+import { useI18nContext } from 'i18n/i18n-react';
-import { numberValue, updateValue, useRest } from '../../utils';
+import { APProvisionMode } from 'types';
-import * as APApi from '../../api/ap';
+import { numberValue, updateValueDirty, useRest } from 'utils';
 
-export const isAPEnabled = ({ provision_mode }: APSettings) => {
+import { createAPSettingsValidator, validate } from 'validators';
-  return provision_mode === APProvisionMode.AP_MODE_ALWAYS || provision_mode === APProvisionMode.AP_MODE_DISCONNECTED;
+
-};
+export const isAPEnabled = ({ provision_mode }: APSettings) =>
+  provision_mode === APProvisionMode.AP_MODE_ALWAYS || provision_mode === APProvisionMode.AP_MODE_DISCONNECTED;
 
 const APSettingsForm: FC = () => {
-  const { loadData, saving, data, setData, saveData, errorMessage } = useRest<APSettings>({
+  const {
+    loadData,
+    saving,
+    data,
+    updateDataValue,
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    blocker,
+    saveData,
+    errorMessage
+  } = useRest<APSettings>({
     read: APApi.readAPSettings,
     update: APApi.updateAPSettings
   });
 
+  const { LL } = useI18nContext();
+
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
-  const updateFormValue = updateValue(setData);
+  const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, updateDataValue);
 
   const content = () => {
     if (!data) {
@@ -42,7 +59,7 @@ const APSettingsForm: FC = () => {
       try {
         setFieldErrors(undefined);
         await validate(createAPSettingsValidator(data), data);
-        saveData();
+        await saveData();
       } catch (errors: any) {
         setFieldErrors(errors);
       }
@@ -53,7 +70,7 @@ const APSettingsForm: FC = () => {
         <ValidatedTextField
           fieldErrors={fieldErrors}
           name="provision_mode"
-          label="Provide Access Point&hellip;"
+          label={LL.AP_PROVIDE() + '...'}
           value={data.provision_mode}
           fullWidth
           select
@@ -61,16 +78,16 @@ const APSettingsForm: FC = () => {
           onChange={updateFormValue}
           margin="normal"
         >
-          <MenuItem value={APProvisionMode.AP_MODE_ALWAYS}>Always</MenuItem>
+          <MenuItem value={APProvisionMode.AP_MODE_ALWAYS}>{LL.AP_PROVIDE_TEXT_1()}</MenuItem>
-          <MenuItem value={APProvisionMode.AP_MODE_DISCONNECTED}>When WiFi Disconnected</MenuItem>
+          <MenuItem value={APProvisionMode.AP_MODE_DISCONNECTED}>{LL.AP_PROVIDE_TEXT_2()}</MenuItem>
-          <MenuItem value={APProvisionMode.AP_NEVER}>Never</MenuItem>
+          <MenuItem value={APProvisionMode.AP_NEVER}>{LL.AP_PROVIDE_TEXT_3()}</MenuItem>
         </ValidatedTextField>
         {isAPEnabled(data) && (
           <>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="ssid"
-              label="Access Point SSID"
+              label={LL.ACCESS_POINT(2) + ' SSID'}
               fullWidth
               variant="outlined"
               value={data.ssid}
@@ -80,7 +97,7 @@ const APSettingsForm: FC = () => {
             <ValidatedPasswordField
               fieldErrors={fieldErrors}
               name="password"
-              label="Access Point Password"
+              label={LL.ACCESS_POINT(2) + ' ' + LL.PASSWORD()}
               fullWidth
               variant="outlined"
               value={data.password}
@@ -90,7 +107,7 @@ const APSettingsForm: FC = () => {
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="channel"
-              label="Preferred Channel"
+              label={LL.AP_PREFERRED_CHANNEL()}
               value={numberValue(data.channel)}
               fullWidth
               select
@@ -107,12 +124,12 @@ const APSettingsForm: FC = () => {
             </ValidatedTextField>
             <BlockFormControlLabel
               control={<Checkbox name="ssid_hidden" checked={data.ssid_hidden} onChange={updateFormValue} />}
-              label="Hide SSID"
+              label={LL.AP_HIDE_SSID()}
             />
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="max_clients"
-              label="Max Clients"
+              label={LL.AP_MAX_CLIENTS()}
               value={numberValue(data.max_clients)}
               fullWidth
               select
@@ -130,7 +147,7 @@ const APSettingsForm: FC = () => {
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="local_ip"
-              label="Local IP"
+              label={LL.AP_LOCAL_IP()}
               fullWidth
               variant="outlined"
               value={data.local_ip}
@@ -140,7 +157,7 @@ const APSettingsForm: FC = () => {
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="gateway_ip"
-              label="Gateway"
+              label={LL.NETWORK_GATEWAY()}
               fullWidth
               variant="outlined"
               value={data.gateway_ip}
@@ -150,7 +167,7 @@ const APSettingsForm: FC = () => {
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="subnet_mask"
-              label="Subnet"
+              label={LL.NETWORK_SUBNET()}
               fullWidth
               variant="outlined"
               value={data.subnet_mask}
@@ -159,24 +176,37 @@ const APSettingsForm: FC = () => {
             />
           </>
         )}
+        {dirtyFlags && dirtyFlags.length !== 0 && (
           <ButtonRow>
             <Button
-            startIcon={<SaveIcon />}
+              startIcon={<CancelIcon />}
               disabled={saving}
               variant="outlined"
               color="primary"
               type="submit"
+              onClick={loadData}
+            >
+              {LL.CANCEL()}
+            </Button>
+            <Button
+              startIcon={<WarningIcon color="warning" />}
+              disabled={saving}
+              variant="contained"
+              color="info"
+              type="submit"
               onClick={validateAndSubmit}
             >
-            Save
+              {LL.APPLY_CHANGES(dirtyFlags.length)}
             </Button>
           </ButtonRow>
+        )}
       </>
     );
   };
 
   return (
-    <SectionContent title="Access Point Settings" titleGutter>
+    <SectionContent title={LL.SETTINGS_OF(LL.ACCESS_POINT(1))} titleGutter>
+      {blocker ? <BlockNavigation blocker={blocker} /> : null}
       {content()}
     </SectionContent>
   );

interface/src/framework/ap/APStatusForm.tsx

@@ -1,15 +1,18 @@
-import { FC } from 'react';
-
-import { Avatar, Button, Divider, List, ListItem, ListItemAvatar, ListItemText, Theme, useTheme } from '@mui/material';
-import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
-import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import ComputerIcon from '@mui/icons-material/Computer';
+import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import RefreshIcon from '@mui/icons-material/Refresh';
+import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
+import { Avatar, Button, Divider, List, ListItem, ListItemAvatar, ListItemText, useTheme } from '@mui/material';
+import { useRequest } from 'alova';
+import type { Theme } from '@mui/material';
+import type { FC } from 'react';
 
-import * as APApi from '../../api/ap';
+import type { APStatus } from 'types';
-import { APNetworkStatus, APStatus } from '../../types';
+import * as APApi from 'api/ap';
-import { ButtonRow, FormLoader, SectionContent } from '../../components';
+import { ButtonRow, FormLoader, SectionContent } from 'components';
-import { useRest } from '../../utils';
+
+import { useI18nContext } from 'i18n/i18n-react';
+import { APNetworkStatus } from 'types';
 
 export const apStatusHighlight = ({ status }: APStatus, theme: Theme) => {
   switch (status) {
@@ -24,27 +27,29 @@ export const apStatusHighlight = ({ status }: APStatus, theme: Theme) => {
   }
 };
 
-export const apStatus = ({ status }: APStatus) => {
-  switch (status) {
-    case APNetworkStatus.ACTIVE:
-      return 'Active';
-    case APNetworkStatus.INACTIVE:
-      return 'Inactive';
-    case APNetworkStatus.LINGERING:
-      return 'Lingering until idle';
-    default:
-      return 'Unknown';
-  }
-};
-
 const APStatusForm: FC = () => {
-  const { loadData, data, errorMessage } = useRest<APStatus>({ read: APApi.readAPStatus });
+  const { data: data, send: loadData, error } = useRequest(APApi.readAPStatus);
+
+  const { LL } = useI18nContext();
 
   const theme = useTheme();
 
+  const apStatus = ({ status }: APStatus) => {
+    switch (status) {
+      case APNetworkStatus.ACTIVE:
+        return LL.ACTIVE();
+      case APNetworkStatus.INACTIVE:
+        return LL.INACTIVE(0);
+      case APNetworkStatus.LINGERING:
+        return 'Lingering until idle';
+      default:
+        return LL.UNKNOWN();
+    }
+  };
+
   const content = () => {
     if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
+      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
     }
 
     return (
@@ -56,14 +61,14 @@ const APStatusForm: FC = () => {
                 <SettingsInputAntennaIcon />
               </Avatar>
             </ListItemAvatar>
-            <ListItemText primary="Status" secondary={apStatus(data)} />
+            <ListItemText primary={LL.STATUS_OF('')} secondary={apStatus(data)} />
           </ListItem>
           <Divider variant="inset" component="li" />
           <ListItem>
             <ListItemAvatar>
               <Avatar>IP</Avatar>
             </ListItemAvatar>
-            <ListItemText primary="IP Address" secondary={data.ip_address} />
+            <ListItemText primary={LL.ADDRESS_OF('IP')} secondary={data.ip_address} />
           </ListItem>
           <Divider variant="inset" component="li" />
           <ListItem>
@@ -72,7 +77,7 @@ const APStatusForm: FC = () => {
                 <DeviceHubIcon />
               </Avatar>
             </ListItemAvatar>
-            <ListItemText primary="MAC Address" secondary={data.mac_address} />
+            <ListItemText primary={LL.ADDRESS_OF('MAC')} secondary={data.mac_address} />
           </ListItem>
           <Divider variant="inset" component="li" />
           <ListItem>
@@ -81,13 +86,13 @@ const APStatusForm: FC = () => {
                 <ComputerIcon />
               </Avatar>
             </ListItemAvatar>
-            <ListItemText primary="AP Clients" secondary={data.station_num} />
+            <ListItemText primary={LL.AP_CLIENTS()} secondary={data.station_num} />
           </ListItem>
           <Divider variant="inset" component="li" />
         </List>
         <ButtonRow>
           <Button startIcon={<RefreshIcon />} variant="outlined" color="secondary" onClick={loadData}>
-            Refresh
+            {LL.REFRESH()}
           </Button>
         </ButtonRow>
       </>
@@ -95,7 +100,7 @@ const APStatusForm: FC = () => {
   };
 
   return (
-    <SectionContent title="Access Point Status" titleGutter>
+    <SectionContent title={LL.STATUS_OF(LL.ACCESS_POINT(1))} titleGutter>
       {content()}
     </SectionContent>
   );

interface/src/framework/ap/AccessPoint.tsx

@@ -1,15 +1,19 @@
-import { FC, useContext } from 'react';
+import { Tab } from '@mui/material';
+import { useContext } from 'react';
 import { Navigate, Routes, Route } from 'react-router-dom';
 
-import { Tab } from '@mui/material';
-
-import { AuthenticatedContext } from '../../contexts/authentication';
-import APStatusForm from './APStatusForm';
 import APSettingsForm from './APSettingsForm';
-import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from '../../components';
+import APStatusForm from './APStatusForm';
+import type { FC } from 'react';
+import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from 'components';
+import { AuthenticatedContext } from 'contexts/authentication';
+
+import { useI18nContext } from 'i18n/i18n-react';
 
 const AccessPoint: FC = () => {
-  useLayoutTitle('Access Point');
+  const { LL } = useI18nContext();
+
+  useLayoutTitle(LL.ACCESS_POINT(0));
 
   const authenticatedContext = useContext(AuthenticatedContext);
 
@@ -18,11 +22,16 @@ const AccessPoint: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="status" label="Access Point Status" />
+        <Tab value="/ap/status" label={LL.STATUS_OF(LL.ACCESS_POINT(1))} />
-        <Tab value="settings" label="Access Point Settings" disabled={!authenticatedContext.me.admin} />
+        <Tab
+          value="/ap/settings"
+          label={LL.SETTINGS_OF(LL.ACCESS_POINT(1))}
+          disabled={!authenticatedContext.me.admin}
+        />
       </RouterTabs>
       <Routes>
         <Route path="status" element={<APStatusForm />} />
+        <Route index element={<Navigate to="status" />} />
         <Route
           path="settings"
           element={
@@ -31,7 +40,7 @@ const AccessPoint: FC = () => {
             </RequireAdmin>
           }
         />
-        <Route path="/*" element={<Navigate replace to="status" />} />
+        <Route path="*" element={<Navigate replace to="/ap/status" />} />
       </Routes>
     </>
   );

interface/src/framework/mqtt/Mqtt.tsx

@@ -1,15 +1,18 @@
-import React, { FC, useContext } from 'react';
-import { Navigate, Route, Routes } from 'react-router-dom';
-
 import { Tab } from '@mui/material';
-
+import { useContext } from 'react';
-import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from '../../components';
+import { Navigate, Route, Routes } from 'react-router-dom';
-import { AuthenticatedContext } from '../../contexts/authentication';
-
-import MqttStatusForm from './MqttStatusForm';
 import MqttSettingsForm from './MqttSettingsForm';
+import MqttStatusForm from './MqttStatusForm';
+import type { FC } from 'react';
+
+import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from 'components';
+import { AuthenticatedContext } from 'contexts/authentication';
+
+import { useI18nContext } from 'i18n/i18n-react';
 
 const Mqtt: FC = () => {
+  const { LL } = useI18nContext();
+
   useLayoutTitle('MQTT');
 
   const authenticatedContext = useContext(AuthenticatedContext);
@@ -18,8 +21,8 @@ const Mqtt: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="status" label="MQTT Status" />
+        <Tab value="/mqtt/status" label={LL.STATUS_OF('MQTT')} />
-        <Tab value="settings" label="MQTT Settings" disabled={!authenticatedContext.me.admin} />
+        <Tab value="/mqtt/settings" label={LL.SETTINGS_OF('MQTT')} disabled={!authenticatedContext.me.admin} />
       </RouterTabs>
       <Routes>
         <Route path="status" element={<MqttStatusForm />} />
@@ -31,7 +34,7 @@ const Mqtt: FC = () => {
             </RequireAdmin>
           }
         />
-        <Route path="/*" element={<Navigate replace to="status" />} />
+        <Route path="*" element={<Navigate replace to="/mqtt/status" />} />
       </Routes>
     </>
   );

interface/src/framework/mqtt/MqttSettingsForm.tsx

@@ -1,31 +1,48 @@
-import { FC, useState } from 'react';
+import CancelIcon from '@mui/icons-material/Cancel';
-import { ValidateFieldsError } from 'async-validator';
+import WarningIcon from '@mui/icons-material/Warning';
+import { Button, Checkbox, MenuItem, Grid, Typography, InputAdornment, TextField } from '@mui/material';
+import { useState } from 'react';
+import type { ValidateFieldsError } from 'async-validator';
+import type { FC } from 'react';
 
-import { Button, Checkbox, MenuItem, Grid, Typography } from '@mui/material';
+import type { MqttSettings } from 'types';
-import SaveIcon from '@mui/icons-material/Save';
+import * as MqttApi from 'api/mqtt';
-
-import { MQTT_SETTINGS_VALIDATOR, validate } from '../../validators';
 import {
   BlockFormControlLabel,
   ButtonRow,
   FormLoader,
   SectionContent,
   ValidatedPasswordField,
-  ValidatedTextField
+  ValidatedTextField,
-} from '../../components';
+  BlockNavigation
-import { MqttSettings } from '../../types';
+} from 'components';
-import { numberValue, updateValue, useRest } from '../../utils';
+import { useI18nContext } from 'i18n/i18n-react';
-import * as MqttApi from '../../api/mqtt';
+import { numberValue, updateValueDirty, useRest } from 'utils';
+
+import { createMqttSettingsValidator, validate } from 'validators';
 
 const MqttSettingsForm: FC = () => {
-  const { loadData, saving, data, setData, saveData, errorMessage } = useRest<MqttSettings>({
+  const {
+    loadData,
+    saving,
+    data,
+    updateDataValue,
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    blocker,
+    saveData,
+    errorMessage
+  } = useRest<MqttSettings>({
     read: MqttApi.readMqttSettings,
     update: MqttApi.updateMqttSettings
   });
 
+  const { LL } = useI18nContext();
+
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
-  const updateFormValue = updateValue(setData);
+  const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, updateDataValue);
 
   const content = () => {
     if (!data) {
@@ -35,8 +52,8 @@ const MqttSettingsForm: FC = () => {
     const validateAndSubmit = async () => {
       try {
         setFieldErrors(undefined);
-        await validate(MQTT_SETTINGS_VALIDATOR, data);
+        await validate(createMqttSettingsValidator(data), data);
-        saveData();
+        await saveData();
       } catch (errors: any) {
         setFieldErrors(errors);
       }
@@ -46,14 +63,14 @@ const MqttSettingsForm: FC = () => {
       <>
         <BlockFormControlLabel
           control={<Checkbox name="enabled" checked={data.enabled} onChange={updateFormValue} />}
-          label="Enable MQTT"
+          label={LL.ENABLE_MQTT()}
         />
         <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="host"
-              label="Host"
+              label={LL.ADDRESS_OF(LL.BROKER())}
               fullWidth
               variant="outlined"
               value={data.host}
@@ -61,7 +78,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="port"
@@ -74,13 +91,11 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-        </Grid>
+          <Grid item xs={12} sm={6}>
-        <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-          <Grid item xs={6}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="base"
-              label="Bsse"
+              label={LL.BASE_TOPIC()}
               fullWidth
               variant="outlined"
               value={data.base}
@@ -88,10 +103,10 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
-            <ValidatedTextField
+            <TextField
               name="client_id"
-              label="Client ID (optional)"
+              label={LL.ID_OF(LL.CLIENT()) + ' (' + LL.OPTIONAL() + ')'}
               fullWidth
               variant="outlined"
               value={data.client_id}
@@ -99,12 +114,10 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-        </Grid>
+          <Grid item xs={12} sm={6}>
-        <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
+            <TextField
-          <Grid item xs={6}>
-            <ValidatedTextField
               name="username"
-              label="Username"
+              label={LL.USERNAME(0)}
               fullWidth
               variant="outlined"
               value={data.username}
@@ -112,10 +125,10 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedPasswordField
               name="password"
-              label="Password"
+              label={LL.PASSWORD()}
               fullWidth
               variant="outlined"
               value={data.password}
@@ -123,13 +136,14 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-        </Grid>
+          <Grid item xs={12} sm={6}>
-        <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-          <Grid item xs={6}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="keep_alive"
-              label="Keep Alive (seconds)"
+              label="Keep Alive"
+              InputProps={{
+                endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+              }}
               fullWidth
               variant="outlined"
               value={numberValue(data.keep_alive)}
@@ -138,8 +152,8 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
-            <ValidatedTextField
+            <TextField
               name="mqtt_qos"
               label="QoS"
               value={data.mqtt_qos}
@@ -149,26 +163,41 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
               select
             >
-              <MenuItem value={0}>0 (default)</MenuItem>
+              <MenuItem value={0}>0</MenuItem>
               <MenuItem value={1}>1</MenuItem>
               <MenuItem value={2}>2</MenuItem>
-            </ValidatedTextField>
+            </TextField>
           </Grid>
+          {data.rootCA !== undefined && (
+            <Grid item xs={12} sm={6}>
+              <ValidatedPasswordField
+                name="rootCA"
+                label={LL.CERT()}
+                fullWidth
+                variant="outlined"
+                value={data.rootCA}
+                onChange={updateFormValue}
+                margin="normal"
+              />
             </Grid>
+          )}
+        </Grid>
+
         <BlockFormControlLabel
           control={<Checkbox name="clean_session" checked={data.clean_session} onChange={updateFormValue} />}
-          label="Set Clean Session"
+          label={LL.MQTT_CLEAN_SESSION()}
         />
         <BlockFormControlLabel
           control={<Checkbox name="mqtt_retain" checked={data.mqtt_retain} onChange={updateFormValue} />}
-          label="Always use Retain Flag"
+          label={LL.MQTT_RETAIN_FLAG()}
         />
+
         <Typography sx={{ pt: 2 }} variant="h6" color="primary">
-          Formatting
+          {LL.FORMATTING()}
         </Typography>
-        <ValidatedTextField
+        <TextField
           name="nested_format"
-          label="Topic/Payload Format"
+          label={LL.MQTT_FORMAT()}
           value={data.nested_format}
           fullWidth
           variant="outlined"
@@ -176,19 +205,26 @@ const MqttSettingsForm: FC = () => {
           margin="normal"
           select
         >
-          <MenuItem value={1}>Nested in a single topic</MenuItem>
+          <MenuItem value={1}>{LL.MQTT_NEST_1()}</MenuItem>
-          <MenuItem value={2}>As individual topics</MenuItem>
+          <MenuItem value={2}>{LL.MQTT_NEST_2()}</MenuItem>
-        </ValidatedTextField>
+        </TextField>
         <BlockFormControlLabel
           control={<Checkbox name="send_response" checked={data.send_response} onChange={updateFormValue} />}
-          label="Publish command output to a 'response' topic"
+          label={LL.MQTT_RESPONSE()}
         />
         {!data.ha_enabled && (
-          <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
+          <Grid
+            container
+            rowSpacing={-1}
+            spacing={1}
+            direction="row"
+            justifyContent="flex-start"
+            alignItems="flex-start"
+          >
             <Grid item>
               <BlockFormControlLabel
                 control={<Checkbox name="publish_single" checked={data.publish_single} onChange={updateFormValue} />}
-                label="Publish single value topics on change"
+                label={LL.MQTT_PUBLISH_TEXT_1()}
               />
             </Grid>
             {data.publish_single && (
@@ -197,7 +233,7 @@ const MqttSettingsForm: FC = () => {
                   control={
                     <Checkbox name="publish_single2cmd" checked={data.publish_single2cmd} onChange={updateFormValue} />
                   }
-                  label="Publish to command topics (ioBroker)"
+                  label={LL.MQTT_PUBLISH_TEXT_2()}
                 />
               </Grid>
             )}
@@ -208,14 +244,37 @@ const MqttSettingsForm: FC = () => {
             <Grid item>
               <BlockFormControlLabel
                 control={<Checkbox name="ha_enabled" checked={data.ha_enabled} onChange={updateFormValue} />}
-                label="Enable MQTT Discovery (Home Assistant, Domoticz)"
+                label={LL.MQTT_PUBLISH_TEXT_3()}
               />
             </Grid>
             {data.ha_enabled && (
-              <Grid item xs={6}>
+              <Grid
-                <ValidatedTextField
+                container
+                sx={{ pl: 1 }}
+                spacing={1}
+                direction="row"
+                justifyContent="flex-start"
+                alignItems="flex-start"
+              >
+                <Grid item xs={12} sm={6} md={4}>
+                  <TextField
+                    name="discovery_type"
+                    label={LL.MQTT_PUBLISH_TEXT_5()}
+                    value={data.discovery_type}
+                    fullWidth
+                    variant="outlined"
+                    onChange={updateFormValue}
+                    margin="normal"
+                    select
+                  >
+                    <MenuItem value={0}>Home Assistant</MenuItem>
+                    <MenuItem value={1}>Domoticz</MenuItem>
+                  </TextField>
+                </Grid>
+                <Grid item xs={12} sm={6} md={4}>
+                  <TextField
                     name="discovery_prefix"
-                  label="Prefix for the Discovery topics"
+                    label={LL.MQTT_PUBLISH_TEXT_4()}
                     fullWidth
                     variant="outlined"
                     value={data.discovery_prefix}
@@ -223,18 +282,53 @@ const MqttSettingsForm: FC = () => {
                     margin="normal"
                   />
                 </Grid>
+                <Grid item xs={12} sm={6} md={4}>
+                  <TextField
+                    name="entity_format"
+                    label={LL.MQTT_ENTITY_FORMAT()}
+                    value={data.entity_format}
+                    fullWidth
+                    variant="outlined"
+                    onChange={updateFormValue}
+                    margin="normal"
+                    select
+                  >
+                    <MenuItem value={0}>{LL.MQTT_ENTITY_FORMAT_0()}</MenuItem>
+                    <MenuItem value={1}>{LL.MQTT_ENTITY_FORMAT_1()}</MenuItem>
+                    <MenuItem value={2}>{LL.MQTT_ENTITY_FORMAT_2()}</MenuItem>
+                  </TextField>
+                </Grid>
+              </Grid>
             )}
           </Grid>
         )}
         <Typography sx={{ pt: 2 }} variant="h6" color="primary">
-          Publish Intervals (in seconds, 0=automatic)
+          {LL.MQTT_PUBLISH_INTERVALS()}&nbsp;(0=auto)
         </Typography>
         <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-          <Grid item xs={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
+              name="publish_time_heartbeat"
+              label="Heartbeat"
+              InputProps={{
+                endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+              }}
+              fullWidth
+              variant="outlined"
+              value={numberValue(data.publish_time_heartbeat)}
+              type="number"
+              onChange={updateFormValue}
+              margin="normal"
+            />
+          </Grid>
+          <Grid item xs={12} sm={6} md={4}>
+            <TextField
               name="publish_time_boiler"
-              label="Boilers and Heat Pumps"
+              label={LL.MQTT_INT_BOILER()}
+              InputProps={{
+                endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+              }}
               fullWidth
               variant="outlined"
               value={numberValue(data.publish_time_boiler)}
@@ -243,11 +337,13 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={4}>
+          <Grid item xs={12} sm={6} md={4}>
-            <ValidatedTextField
+            <TextField
-              fieldErrors={fieldErrors}
               name="publish_time_thermostat"
-              label="Thermostats"
+              label={LL.MQTT_INT_THERMOSTATS()}
+              InputProps={{
+                endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+              }}
               fullWidth
               variant="outlined"
               value={numberValue(data.publish_time_thermostat)}
@@ -256,11 +352,13 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={4}>
+          <Grid item xs={12} sm={6} md={4}>
-            <ValidatedTextField
+            <TextField
-              fieldErrors={fieldErrors}
               name="publish_time_solar"
-              label="Solar Modules"
+              label={LL.MQTT_INT_SOLAR()}
+              InputProps={{
+                endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+              }}
               fullWidth
               variant="outlined"
               value={numberValue(data.publish_time_solar)}
@@ -269,11 +367,13 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={4}>
+          <Grid item xs={12} sm={6} md={4}>
-            <ValidatedTextField
+            <TextField
-              fieldErrors={fieldErrors}
               name="publish_time_mixer"
-              label="Mixer Modules"
+              label={LL.MQTT_INT_MIXER()}
+              InputProps={{
+                endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+              }}
               fullWidth
               variant="outlined"
               value={numberValue(data.publish_time_mixer)}
@@ -282,11 +382,13 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={4}>
+          <Grid item xs={12} sm={6} md={4}>
-            <ValidatedTextField
+            <TextField
-              fieldErrors={fieldErrors}
               name="publish_time_sensor"
-              label="Temperature Sensors"
+              label={LL.TEMP_SENSORS()}
+              InputProps={{
+                endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+              }}
               fullWidth
               variant="outlined"
               value={numberValue(data.publish_time_sensor)}
@@ -295,11 +397,13 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={4}>
+          <Grid item xs={12} sm={6} md={4}>
-            <ValidatedTextField
+            <TextField
-              fieldErrors={fieldErrors}
               name="publish_time_other"
-              label="Default"
+              InputProps={{
+                endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+              }}
+              label={LL.DEFAULT(0)}
               fullWidth
               variant="outlined"
               value={numberValue(data.publish_time_other)}
@@ -309,24 +413,38 @@ const MqttSettingsForm: FC = () => {
             />
           </Grid>
         </Grid>
+
+        {dirtyFlags && dirtyFlags.length !== 0 && (
           <ButtonRow>
             <Button
-            startIcon={<SaveIcon />}
+              startIcon={<CancelIcon />}
               disabled={saving}
               variant="outlined"
               color="primary"
               type="submit"
+              onClick={loadData}
+            >
+              {LL.CANCEL()}
+            </Button>
+            <Button
+              startIcon={<WarningIcon color="warning" />}
+              disabled={saving}
+              variant="contained"
+              color="info"
+              type="submit"
               onClick={validateAndSubmit}
             >
-            Save
+              {LL.APPLY_CHANGES(dirtyFlags.length)}
             </Button>
           </ButtonRow>
+        )}
       </>
     );
   };
 
   return (
-    <SectionContent title="MQTT Settings" titleGutter>
+    <SectionContent title={LL.SETTINGS_OF('MQTT')} titleGutter>
+      {blocker ? <BlockNavigation blocker={blocker} /> : null}
       {content()}
     </SectionContent>
   );

interface/src/framework/mqtt/MqttStatusForm.tsx

@@ -1,15 +1,18 @@
-import { FC } from 'react';
+import AutoAwesomeMotionIcon from '@mui/icons-material/AutoAwesomeMotion';
-import { Avatar, Button, Divider, List, ListItem, ListItemAvatar, ListItemText, Theme, useTheme } from '@mui/material';
-
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import ReportIcon from '@mui/icons-material/Report';
 import SpeakerNotesOffIcon from '@mui/icons-material/SpeakerNotesOff';
+import { Avatar, Button, Divider, List, ListItem, ListItemAvatar, ListItemText, useTheme } from '@mui/material';
+import { useRequest } from 'alova';
+import type { Theme } from '@mui/material';
+import type { FC } from 'react';
 
-import { ButtonRow, FormLoader, SectionContent } from '../../components';
+import type { MqttStatus } from 'types';
-import { MqttStatus, MqttDisconnectReason } from '../../types';
+import * as MqttApi from 'api/mqtt';
-import * as MqttApi from '../../api/mqtt';
+import { ButtonRow, FormLoader, SectionContent } from 'components';
-import { useRest } from '../../utils';
+import { useI18nContext } from 'i18n/i18n-react';
+import { MqttDisconnectReason } from 'types';
 
 export const mqttStatusHighlight = ({ enabled, connected }: MqttStatus, theme: Theme) => {
   if (!enabled) {
@@ -23,23 +26,35 @@ export const mqttStatusHighlight = ({ enabled, connected }: MqttStatus, theme: T
 
 export const mqttPublishHighlight = ({ mqtt_fails }: MqttStatus, theme: Theme) => {
   if (mqtt_fails === 0) return theme.palette.success.main;
-
   if (mqtt_fails < 10) return theme.palette.warning.main;
 
   return theme.palette.error.main;
 };
 
-export const mqttStatus = ({ enabled, connected }: MqttStatus) => {
+export const mqttQueueHighlight = ({ mqtt_queued }: MqttStatus, theme: Theme) => {
-  if (!enabled) {
+  if (mqtt_queued <= 1) return theme.palette.success.main;
-    return 'Not enabled';
+
-  }
+  return theme.palette.warning.main;
-  if (connected) {
-    return 'Connected';
-  }
-  return 'Disconnected';
 };
 
-export const disconnectReason = ({ disconnect_reason }: MqttStatus) => {
+const MqttStatusForm: FC = () => {
+  const { data: data, send: loadData, error } = useRequest(MqttApi.readMqttStatus);
+
+  const { LL } = useI18nContext();
+
+  const theme = useTheme();
+
+  const mqttStatus = ({ enabled, connected, connect_count }: MqttStatus) => {
+    if (!enabled) {
+      return LL.NOT_ENABLED();
+    }
+    if (connected) {
+      return LL.CONNECTED(0) + (connect_count > 1 ? ' (' + connect_count + ')' : '');
+    }
+    return LL.DISCONNECTED() + (connect_count > 1 ? ' (' + connect_count + ')' : '');
+  };
+
+  const disconnectReason = ({ disconnect_reason }: MqttStatus) => {
     switch (disconnect_reason) {
       case MqttDisconnectReason.TCP_DISCONNECTED:
         return 'TCP disconnected';
@@ -53,34 +68,47 @@ export const disconnectReason = ({ disconnect_reason }: MqttStatus) => {
         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';
+        return 'TLS fingerprint invalid';
       default:
         return 'Unknown';
     }
   };
 
-const MqttStatusForm: FC = () => {
-  const { loadData, data, errorMessage } = useRest<MqttStatus>({ read: MqttApi.readMqttStatus });
-
-  const theme = useTheme();
-
   const content = () => {
     if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
+      return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
     }
 
-    const renderConnectionStatus = () => {
+    const renderConnectionStatus = () => (
-      if (data.connected) {
-        return (
       <>
+        {!data.connected && (
+          <>
+            <ListItem>
+              <ListItemAvatar>
+                <Avatar>
+                  <ReportIcon />
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={LL.DISCONNECT_REASON()} secondary={disconnectReason(data)} />
+            </ListItem>
+            <Divider variant="inset" component="li" />
+          </>
+        )}
         <ListItem>
           <ListItemAvatar>
             <Avatar>#</Avatar>
           </ListItemAvatar>
-              <ListItemText primary="Client ID" secondary={data.client_id} />
+          <ListItemText primary={LL.ID_OF(LL.CLIENT())} secondary={data.client_id} />
+        </ListItem>
+        <Divider variant="inset" component="li" />
+        <ListItem>
+          <ListItemAvatar>
+            <Avatar sx={{ bgcolor: mqttQueueHighlight(data, theme) }}>
+              <AutoAwesomeMotionIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary={LL.MQTT_QUEUE()} secondary={data.mqtt_queued} />
         </ListItem>
         <Divider variant="inset" component="li" />
         <ListItem>
@@ -89,25 +117,11 @@ const MqttStatusForm: FC = () => {
               <SpeakerNotesOffIcon />
             </Avatar>
           </ListItemAvatar>
-              <ListItemText primary="MQTT Publish Errors" secondary={data.mqtt_fails} />
+          <ListItemText primary={LL.ERRORS_OF('MQTT')} secondary={data.mqtt_fails} />
-            </ListItem>
-          </>
-        );
-      }
-      return (
-        <>
-          <ListItem>
-            <ListItemAvatar>
-              <Avatar>
-                <ReportIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary="Disconnect Reason" secondary={disconnectReason(data)} />
         </ListItem>
         <Divider variant="inset" component="li" />
       </>
     );
-    };
 
     return (
       <>
@@ -118,14 +132,14 @@ const MqttStatusForm: FC = () => {
                 <DeviceHubIcon />
               </Avatar>
             </ListItemAvatar>
-            <ListItemText primary="Status" secondary={mqttStatus(data)} />
+            <ListItemText primary={LL.STATUS_OF('')} secondary={mqttStatus(data)} />
           </ListItem>
           <Divider variant="inset" component="li" />
           {data.enabled && renderConnectionStatus()}
         </List>
         <ButtonRow>
           <Button startIcon={<RefreshIcon />} variant="outlined" color="secondary" onClick={loadData}>
-            Refresh
+            {LL.REFRESH()}
           </Button>
         </ButtonRow>
       </>
@@ -133,7 +147,7 @@ const MqttStatusForm: FC = () => {
   };
 
   return (
-    <SectionContent title="MQTT Status" titleGutter>
+    <SectionContent title={LL.STATUS_OF('MQTT')} titleGutter>
       {content()}
     </SectionContent>
   );

interface/src/framework/network/NetworkConnection.tsx

@@ -1,22 +1,25 @@
-import React, { FC, useCallback, useContext, useState } from 'react';
-import { Navigate, Routes, Route, useNavigate } from 'react-router-dom';
-
 import { Tab } from '@mui/material';
-
+import { useCallback, useContext, useState } from 'react';
-import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from '../../components';
+import { Navigate, Routes, Route, useNavigate } from 'react-router-dom';
-import { WiFiNetwork } from '../../types';
-import { AuthenticatedContext } from '../../contexts/authentication';
-import { WiFiConnectionContext } from './WiFiConnectionContext';
-import NetworkStatusForm from './NetworkStatusForm';
-import WiFiNetworkScanner from './WiFiNetworkScanner';
 import NetworkSettingsForm from './NetworkSettingsForm';
+import NetworkStatusForm from './NetworkStatusForm';
+import { WiFiConnectionContext } from './WiFiConnectionContext';
+import WiFiNetworkScanner from './WiFiNetworkScanner';
+import type { FC } from 'react';
+
+import type { WiFiNetwork } from 'types';
+import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from 'components';
+import { AuthenticatedContext } from 'contexts/authentication';
+import { useI18nContext } from 'i18n/i18n-react';
 
 const NetworkConnection: FC = () => {
-  useLayoutTitle('Network Connection');
+  const { LL } = useI18nContext();
+  useLayoutTitle(LL.NETWORK(0));
+
+  const { routerTab } = useRouterTab();
 
   const authenticatedContext = useContext(AuthenticatedContext);
   const navigate = useNavigate();
-  const { routerTab } = useRouterTab();
 
   const [selectedNetwork, setSelectedNetwork] = useState<WiFiNetwork>();
 
@@ -41,9 +44,13 @@ const NetworkConnection: FC = () => {
       }}
     >
       <RouterTabs value={routerTab}>
-        <Tab value="status" label="Network Status" />
+        <Tab value="/network/status" label={LL.STATUS_OF(LL.NETWORK(1))} />
-        <Tab value="scan" label="Scan WiFi Networks" disabled={!authenticatedContext.me.admin} />
+        <Tab value="/network/scan" label={LL.NETWORK_SCAN()} disabled={!authenticatedContext.me.admin} />
-        <Tab value="settings" label="Network Settings" disabled={!authenticatedContext.me.admin} />
+        <Tab
+          value="/network/settings"
+          label={LL.SETTINGS_OF(LL.NETWORK(1))}
+          disabled={!authenticatedContext.me.admin}
+        />
       </RouterTabs>
       <Routes>
         <Route path="status" element={<NetworkStatusForm />} />
@@ -63,7 +70,7 @@ const NetworkConnection: FC = () => {
             </RequireAdmin>
           }
         />
-        <Route path="/*" element={<Navigate replace to="status" />} />
+        <Route path="*" element={<Navigate replace to="/network/status" />} />
       </Routes>
     </WiFiConnectionContext.Provider>
   );

interface/src/framework/network/NetworkSettingsForm.tsx

@@ -1,5 +1,9 @@
-import { FC, useContext, useEffect, useState } from 'react';
+import CancelIcon from '@mui/icons-material/Cancel';
-
+import DeleteIcon from '@mui/icons-material/Delete';
+import LockIcon from '@mui/icons-material/Lock';
+import LockOpenIcon from '@mui/icons-material/LockOpen';
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
+import WarningIcon from '@mui/icons-material/Warning';
 import {
   Avatar,
   Button,
@@ -10,61 +14,92 @@ import {
   ListItemAvatar,
   ListItemSecondaryAction,
   ListItemText,
-  Typography
+  Typography,
+  InputAdornment,
+  TextField
 } from '@mui/material';
+// eslint-disable-next-line import/named
+import { updateState, useRequest } from 'alova';
+import { useContext, useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import RestartMonitor from '../system/RestartMonitor';
+import { WiFiConnectionContext } from './WiFiConnectionContext';
+import { isNetworkOpen, networkSecurityMode } from './WiFiNetworkSelector';
+import type { ValidateFieldsError } from 'async-validator';
+import type { FC } from 'react';
 
-import LockOpenIcon from '@mui/icons-material/LockOpen';
+import type { NetworkSettings } from 'types';
-import DeleteIcon from '@mui/icons-material/Delete';
+import * as NetworkApi from 'api/network';
-import SaveIcon from '@mui/icons-material/Save';
+import * as SystemApi from 'api/system';
-import LockIcon from '@mui/icons-material/Lock';
-
 import {
   BlockFormControlLabel,
   ButtonRow,
   FormLoader,
   SectionContent,
   ValidatedPasswordField,
-  ValidatedTextField
+  ValidatedTextField,
-} from '../../components';
+  MessageBox,
-import { NetworkSettings } from '../../types';
+  BlockNavigation
-import * as NetworkApi from '../../api/network';
+} from 'components';
-import { numberValue, updateValue, useRest } from '../../utils';
+import { useI18nContext } from 'i18n/i18n-react';
 
-import { WiFiConnectionContext } from './WiFiConnectionContext';
+import { numberValue, updateValueDirty, useRest } from 'utils';
-import { isNetworkOpen, networkSecurityMode } from './WiFiNetworkSelector';
+
-import { ValidateFieldsError } from 'async-validator';
+import { validate } from 'validators';
-import { validate } from '../../validators';
+import { createNetworkSettingsValidator } from 'validators/network';
-import { createNetworkSettingsValidator } from '../../validators/network';
 
 const WiFiSettingsForm: FC = () => {
+  const { LL } = useI18nContext();
+
   const { selectedNetwork, deselectNetwork } = useContext(WiFiConnectionContext);
 
   const [initialized, setInitialized] = useState(false);
-  const { loadData, saving, data, setData, saveData, errorMessage } = useRest<NetworkSettings>({
+  const [restarting, setRestarting] = useState(false);
+
+  const {
+    loadData,
+    saving,
+    data,
+    updateDataValue,
+    origData,
+    dirtyFlags,
+    setDirtyFlags,
+    blocker,
+    saveData,
+    errorMessage,
+    restartNeeded
+  } = useRest<NetworkSettings>({
     read: NetworkApi.readNetworkSettings,
     update: NetworkApi.updateNetworkSettings
   });
 
+  const { send: restartCommand } = useRequest(SystemApi.restart(), {
+    immediate: false
+  });
+
   useEffect(() => {
     if (!initialized && data) {
       if (selectedNetwork) {
-        setData({
+        updateState('networkSettings', (current_data) => ({
           ssid: selectedNetwork.ssid,
-          password: '',
+          bssid: selectedNetwork.bssid,
-          hostname: data?.hostname,
+          password: current_data ? current_data.password : '',
+          hostname: current_data?.hostname,
           static_ip_config: false,
           enableIPv6: false,
           bandwidth20: false,
           tx_power: 20,
           nosleep: false,
-          enableMDNS: true
+          enableMDNS: true,
-        });
+          enableCORS: false,
+          CORSOrigin: '*'
+        }));
       }
       setInitialized(true);
     }
-  }, [initialized, setInitialized, data, setData, selectedNetwork]);
+  }, [initialized, setInitialized, data, selectedNetwork]);
 
-  const updateFormValue = updateValue(setData);
+  const updateFormValue = updateValueDirty(origData, dirtyFlags, setDirtyFlags, updateDataValue);
 
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
@@ -79,10 +114,23 @@ const WiFiSettingsForm: FC = () => {
       try {
         setFieldErrors(undefined);
         await validate(createNetworkSettingsValidator(data), data);
-        saveData();
+        await saveData();
       } catch (errors: any) {
         setFieldErrors(errors);
       }
+      deselectNetwork();
+    };
+
+    const setCancel = async () => {
+      deselectNetwork();
+      await loadData();
+    };
+
+    const restart = async () => {
+      await restartCommand().catch((error) => {
+        toast.error(error.message);
+      });
+      setRestarting(true);
     };
 
     return (
@@ -98,10 +146,17 @@ const WiFiSettingsForm: FC = () => {
               </ListItemAvatar>
               <ListItemText
                 primary={selectedNetwork.ssid}
-                secondary={'Security: ' + networkSecurityMode(selectedNetwork) + ', Ch: ' + selectedNetwork.channel}
+                secondary={
+                  'Security: ' +
+                  networkSecurityMode(selectedNetwork) +
+                  ', Ch: ' +
+                  selectedNetwork.channel +
+                  ', bssid: ' +
+                  selectedNetwork.bssid
+                }
               />
               <ListItemSecondaryAction>
-                <IconButton aria-label="Manual Config" onClick={deselectNetwork}>
+                <IconButton onClick={setCancel}>
                   <DeleteIcon />
                 </IconButton>
               </ListItemSecondaryAction>
@@ -111,7 +166,7 @@ const WiFiSettingsForm: FC = () => {
           <ValidatedTextField
             fieldErrors={fieldErrors}
             name="ssid"
-            label="SSID (leave blank to disable WiFi)"
+            label={'SSID (' + LL.NETWORK_BLANK_SSID() + ')'}
             fullWidth
             variant="outlined"
             value={data.ssid}
@@ -119,11 +174,21 @@ const WiFiSettingsForm: FC = () => {
             margin="normal"
           />
         )}
+        <ValidatedTextField
+          fieldErrors={fieldErrors}
+          name="bssid"
+          label={'BSSID (' + LL.NETWORK_BLANK_BSSID() + ')'}
+          fullWidth
+          variant="outlined"
+          value={data.bssid}
+          onChange={updateFormValue}
+          margin="normal"
+        />
         {(!selectedNetwork || !isNetworkOpen(selectedNetwork)) && (
           <ValidatedPasswordField
             fieldErrors={fieldErrors}
             name="password"
-            label="Password"
+            label={LL.PASSWORD()}
             fullWidth
             variant="outlined"
             value={data.password}
@@ -131,11 +196,13 @@ const WiFiSettingsForm: FC = () => {
             margin="normal"
           />
         )}
-
         <ValidatedTextField
           fieldErrors={fieldErrors}
           name="tx_power"
-          label="WiFi Tx Power (dBm)"
+          label={LL.TX_POWER()}
+          InputProps={{
+            endAdornment: <InputAdornment position="end">dBm</InputAdornment>
+          }}
           fullWidth
           variant="outlined"
           value={numberValue(data.tx_power)}
@@ -143,52 +210,60 @@ const WiFiSettingsForm: FC = () => {
           type="number"
           margin="normal"
         />
-
         <BlockFormControlLabel
           control={<Checkbox name="nosleep" checked={data.nosleep} onChange={updateFormValue} />}
-          label="Disable WiFi Sleep Mode"
+          label={LL.NETWORK_DISABLE_SLEEP()}
         />
-
         <BlockFormControlLabel
           control={<Checkbox name="bandwidth20" checked={data.bandwidth20} onChange={updateFormValue} />}
-          label="Use Lower WiFi Bandwidth"
+          label={LL.NETWORK_LOW_BAND()}
         />
-
-        <BlockFormControlLabel
-          control={<Checkbox name="enableMDNS" checked={data.enableMDNS} onChange={updateFormValue} />}
-          label="Enable mDNS Service"
-        />
-
         <Typography sx={{ pt: 2 }} variant="h6" color="primary">
-          General
+          {LL.GENERAL_OPTIONS()}
         </Typography>
-
         <ValidatedTextField
           fieldErrors={fieldErrors}
           name="hostname"
-          label="Hostname"
+          label={LL.HOSTNAME()}
           fullWidth
           variant="outlined"
           value={data.hostname}
           onChange={updateFormValue}
           margin="normal"
         />
-
+        <BlockFormControlLabel
+          control={<Checkbox name="enableMDNS" checked={data.enableMDNS} onChange={updateFormValue} />}
+          label={LL.NETWORK_USE_DNS()}
+        />
+        <BlockFormControlLabel
+          control={<Checkbox name="enableCORS" checked={data.enableCORS} onChange={updateFormValue} />}
+          label={LL.NETWORK_ENABLE_CORS()}
+        />
+        {data.enableCORS && (
+          <TextField
+            name="CORSOrigin"
+            label={LL.NETWORK_CORS_ORIGIN()}
+            fullWidth
+            variant="outlined"
+            value={data.CORSOrigin}
+            onChange={updateFormValue}
+            margin="normal"
+          />
+        )}
         <BlockFormControlLabel
           control={<Checkbox name="enableIPv6" checked={data.enableIPv6} onChange={updateFormValue} />}
-          label="Enable IPv6 support"
+          label={LL.NETWORK_ENABLE_IPV6()}
         />
-
         <BlockFormControlLabel
           control={<Checkbox name="static_ip_config" checked={data.static_ip_config} onChange={updateFormValue} />}
-          label="Use Fixed IP address"
+          label={LL.NETWORK_FIXED_IP()}
         />
         {data.static_ip_config && (
           <>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="local_ip"
-              label="Local IP"
+              label={LL.AP_LOCAL_IP()}
               fullWidth
               variant="outlined"
               value={data.local_ip}
@@ -198,7 +273,7 @@ const WiFiSettingsForm: FC = () => {
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="gateway_ip"
-              label="Gateway"
+              label={LL.NETWORK_GATEWAY()}
               fullWidth
               variant="outlined"
               value={data.gateway_ip}
@@ -208,7 +283,7 @@ const WiFiSettingsForm: FC = () => {
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="subnet_mask"
-              label="Subnet"
+              label={LL.NETWORK_SUBNET()}
               fullWidth
               variant="outlined"
               value={data.subnet_mask}
@@ -218,7 +293,7 @@ const WiFiSettingsForm: FC = () => {
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="dns_ip_1"
-              label="DNS IP #1"
+              label="DNS #1"
               fullWidth
               variant="outlined"
               value={data.dns_ip_1}
@@ -228,7 +303,7 @@ const WiFiSettingsForm: FC = () => {
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="dns_ip_2"
-              label="DNS IP #2"
+              label="DNS #2"
               fullWidth
               variant="outlined"
               value={data.dns_ip_2}
@@ -237,25 +312,46 @@ const WiFiSettingsForm: FC = () => {
             />
           </>
         )}
+        {restartNeeded && (
+          <MessageBox my={2} level="warning" message={LL.RESTART_TEXT()}>
+            <Button startIcon={<PowerSettingsNewIcon />} variant="contained" color="error" onClick={restart}>
+              {LL.RESTART()}
+            </Button>
+          </MessageBox>
+        )}
+
+        {!restartNeeded && (selectedNetwork || (dirtyFlags && dirtyFlags.length !== 0)) && (
           <ButtonRow>
             <Button
-            startIcon={<SaveIcon />}
+              startIcon={<CancelIcon />}
               disabled={saving}
               variant="outlined"
               color="primary"
               type="submit"
+              onClick={loadData}
+            >
+              {LL.CANCEL()}
+            </Button>
+            <Button
+              startIcon={<WarningIcon color="warning" />}
+              disabled={saving}
+              variant="contained"
+              color="info"
+              type="submit"
               onClick={validateAndSubmit}
             >
-            Save
+              {LL.APPLY_CHANGES(dirtyFlags.length)}
             </Button>
           </ButtonRow>
+        )}
       </>
     );
   };
 
   return (
-    <SectionContent title="Network Settings" titleGutter>
+    <SectionContent title={LL.SETTINGS_OF(LL.NETWORK(1))} titleGutter>
-      {content()}
+      {blocker ? <BlockNavigation blocker={blocker} /> : null}
+      {restarting ? <RestartMonitor /> : content()}
     </SectionContent>
   );
 };