initial commit

2025-05-03 18:51:24 +00:00 · 2018-09-04 22:12:01 +02:00 · 2018-09-04 22:12:01 +02:00 · 9f10324729
commit 9f10324729
79 changed files with 18037 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,19 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+ident_size = 4
+
+[*.md]
+ident_size = 2
+trim_trailing_whitespace = false
+
+[*.json]
+ident_size = 2
+
+[{.gitignore,.gitkeep,.editorconfig}]
+ident_size = 2
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@ -0,0 +1,4 @@
+# Require maintainer's :+1: for changes to the .github/ repo-config files
+# mainly due to https://github.com/probot/settings privilege escalation
+.github/* @frenck
+.gitlab-ci.yml @frenck
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@ -0,0 +1,20 @@
+# Problem/Motivation
+
+> (Why the issue was filed)
+
+## Expected behavior
+
+> (What you expected to happen)
+
+## Actual behavior
+
+> (What actually happened)
+
+## Steps to reproduce
+
+> (How can someone else make/see it happen)
+
+## Proposed changes
+
+> (If you have a proposed change, workaround or fix,
+> describe the rationale behind it)
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -0,0 +1,9 @@
+# Proposed Changes
+
+> (Describe the changes and rationale behind them)
+
+## Related Issues
+
+> ([Github link][autolink-references] to related issues or pull requests)
+
+[autolink-references]: https://help.github.com/articles/autolinked-references-and-urls/
--- a/.github/autolabeler.yml
+++ b/.github/autolabeler.yml
@ -0,0 +1,2 @@
+---
+"Type: Documentation": ["*.md", "*.j2"]
--- a/.github/config.yml
+++ b/.github/config.yml
@ -0,0 +1,50 @@
+---
+# Configuration for request-info - https://github.com/behaviorbot/request-info
+
+# *OPTIONAL* Comment to reply with
+# Can be either a string :
+requestInfoReplyComment:
+  - "We would appreciate it if you could provide us with more info about this issue/pr!"
+  - "Hmmm... That issue/PR is kinda low on text. Could you please provide some more content?"
+
+# *OPTIONAL* default titles to check against for lack of descriptiveness
+# MUST BE ALL LOWERCASE
+requestInfoDefaultTitles: []
+
+# *OPTIONAL* Label to be added to Issues and Pull Requests with insufficient information given
+requestInfoLabelToAdd: "Incomplete"
+
+# *OPTIONAL* Require Pull Requests to contain more information than what is provided in the PR template
+# Will fail if the pull request's body is equal to the provided template
+checkPullRequestTemplate: true
+
+# *OPTIONAL* Only warn about insufficient information on these events type
+# Keys must be lowercase. Valid values are 'issue' and 'pullRequest'
+requestInfoOn:
+  pullRequest: true
+  issue: true
+
+# *OPTIONAL* Add a list of people whose Issues/PRs will not be commented on
+# keys must be GitHub usernames
+requestInfoUserstoExclude: []
+
+# Configuration for new-issue-welcome - https://github.com/behaviorbot/new-issue-welcome
+
+# Comment to be posted to on first time issues
+newIssueWelcomeComment: >
+  :wave: Thanks for opening your first issue here!
+  If you're reporting a :bug: bug, please make sure you include steps to reproduce it.
+  Also, logs, error messages and information about your hardware might be usefull.
+
+# Configuration for new-pr-welcome - https://github.com/behaviorbot/new-pr-welcome
+
+# Comment to be posted to on PRs from first time contributors in your repository
+newPRWelcomeComment: >
+   :sparkling_heart: Thanks for opening this pull request! :sparkling_heart:
+   If your PR gets accepted and merged in, we will invite you to the project :tada:
+
+# Configuration for first-pr-merge - https://github.com/behaviorbot/first-pr-merge
+
+# Comment to be posted to on pull requests merged by a first time user
+firstPRMergeComment: >
+  Congrats on merging your first pull request! :tada::tada::tada:
--- a/.github/invite-contributors.yml
+++ b/.github/invite-contributors.yml
@ -0,0 +1,10 @@
+---
+# If true, this will add new contributors as outside collaborators
+# to the repo their PR was merged in. Team name is ignored if this
+# flag is set to true.
+isOutside: false
+
+# Specify team name to add new contributors to a specific team
+# within your organization.
+# Use team name or team-name-slug
+team: Contributors
--- a/.github/lock.yml
+++ b/.github/lock.yml
@ -0,0 +1,20 @@
+---
+# Configuration for lock-threads - https://github.com/dessant/lock-threads
+# Number of days of inactivity before a closed issue or pull request is locked
+daysUntilLock: 30
+
+# Comment to post before locking. Set to `false` to disable
+lockComment: >
+  This thread has been automatically locked because it has not had recent
+  activity. Please open a new issue for related bugs and link to relevant
+  comments in this thread.
+
+# Issues or pull requests with these labels will not be locked
+# exemptLabels:
+#   - no-locking
+
+# Limit to only `issues` or `pulls`
+# only: issues
+
+# Add a label when locking. Set to `false` to disable
+lockLabel: false
--- a/.github/move.yml
+++ b/.github/move.yml
@ -0,0 +1,20 @@
+---
+# Delete the command comment when it contains no other content
+deleteCommand: true
+
+# Close the source issue after moving
+closeSourceIssue: true
+
+# Lock the source issue after moving
+lockSourceIssue: true
+
+# Mention issue and comment authors
+mentionAuthors: true
+
+# Preserve mentions in the issue content
+keepContentMentions: false
+
+# Set custom aliases for targets
+# aliases:
+#   r: repo
+#   or: owner/repo
--- a/.github/no-response.yml
+++ b/.github/no-response.yml
@ -0,0 +1,13 @@
+---
+# Configuration for probot-no-response - https://github.com/probot/no-response
+# Number of days of inactivity before an Issue is closed for lack of response
+daysUntilClose: 14
+# Label requiring a response
+responseRequiredLabel: "Status: Awaiting response"
+# Comment to post when closing an Issue for lack of response. Set to `false` to disable
+closeComment: >
+  This issue has been automatically closed because there has been no response
+  to our request for more information from the original author. With only the
+  information that is currently in the issue, we don't have enough information
+  to take action. Please reach out if you have or find the answers we need so
+  that we can investigate further.
--- a/.github/potential-duplicates.yml
+++ b/.github/potential-duplicates.yml
@ -0,0 +1,14 @@
+---
+# Label name and color to set, when potential duplicates are detected
+issueLabel: "Potential duplicate"
+labelColor: e6e6e6
+
+# If similarity is higher than this threshold, issue will be marked as duplicate
+threshold: 0.70
+
+# Comment to post when potential duplicates are detected
+referenceComment: >
+  Potential duplicates found:
+  {{#issues}}
+    - [#{{ number }}] {{ title }} ({{ accuracy }}%)
+  {{/issues}}
--- a/.github/settings.yml
+++ b/.github/settings.yml
@ -0,0 +1,150 @@
+---
+repository:
+  description: "MQTT Broker & Web client - Community Hass.io Add-on for Home Assistant"
+  homepage: https://addons.community
+  topics: mosquitto, mqtt, hivemq, web, hassio-addons, hassio, hass, home-assistant, homeassistant
+  private: false
+  has_issues: true
+  has_projects: false
+  has_wiki: false
+  has_downloads: false
+  default_branch: master
+  allow_squash_merge: true
+  allow_merge_commit: false
+  allow_rebase_merge: true
+labels:
+  # Priority labels
+  - name: "Priority: Critical"
+    color: ee0701
+    description: "This should be dealt with ASAP. Not fixing this issue would be a serious error."
+  - name: "Priority: High"
+    color: b60205
+    description: "After critical issues are fixed, these should be dealt with before any further issues."
+  - name: "Priority: Medium"
+    color: 0e8a16
+    description: "This issue may be useful, and needs some attention."
+  - name: "Priority: Low"
+    color: e4ea8a
+    description: "Nice addition, maybe... someday..."
+
+  # Type labels
+  - name: "Type: Bug"
+    color: ee0701
+    description: "Inconsistencies or issues which will cause a problem for users or implementors."
+  - name: "Type: Documentation"
+    color: 0052cc
+    description: "Solely about the documentation of the project."
+  - name: "Type: Enhancement"
+    color: 1d76db
+    description: "Enhancement of the code, not introducing new features."
+  - name: "Type: Feature"
+    color: 0e8a16
+    description: "New features or options."
+  - name: "Type: Support"
+    color: 5319e7
+    description: "Marks an issue as an support ticket."
+  - name: "Type: Discussion"
+    color: d4c5f9
+    description: "Marks an issue as an generic discussion ticket."
+  - name: "Type: Maintaince"
+    color: 2af79e
+    description: "Generic maintaince tasks, e.g., package updates."
+
+  # Additional markers
+  - name: "Security"
+    color: ee0701
+    description: "Marks an security issues that needs to be resolved asap."
+  - name: "Idea"
+    color: fef2c0
+    description: "Marks an idea, which might be excepted and implemented."
+  - name: "Incomplete"
+    color: fef2c0
+    description: "Marks an PR or issue that is missing information."
+  - name: "Pull request"
+    color: fbca04
+    description: "There is an PR opened for this issue."
+  - name: "Accepted"
+    color: c2e0c6
+    description: "This issue or PR has been accepted."
+  - name: "Declined"
+    color: f9d0c4
+    description: "This issue or PR has been declined."
+  - name: "Potential duplicate"
+    color: e6e6e6
+    description: "This issue has been automatically marked as a potential duplicate."
+
+  # Ongoing Status labels
+  - name: "Status: Triage"
+    color: fbca04
+    description: "This issue needs to be triaged."
+  - name: "Status: On hold"
+    color: cccccc
+    description: "Issue or PR that has been placed on hold for now."
+  - name: "Status: In progress"
+    color: fbca04
+    description: "Issue is currently being resolved by a developer."
+  - name: "Status: Stale"
+    color: fef2c0
+    description: "There has not been activity on this issue or PR for quite some time."
+  - name: "Status: Awaiting response"
+    color: fef2c0
+    description: "Issue or PR awaits response from the creator."
+  - name: "Status: Blocked"
+    color: fef2c0
+    description: "Progress on this issue is currently not possible."
+
+  # Closing status labels
+  - name: "Closed: Known limitation"
+    color: e6e6e6
+    description: "Issue is closed, it is a known limitation."
+  - name: "Closed: Expected behavior"
+    color: e6e6e6
+    description: "Issues is closed, it is expected behavior."
+  - name: "Closed: Duplicate"
+    color: e6e6e6
+    description: "Issue is closed, duplicate of an existing issue."
+  - name: "Closed: Invalid"
+    color: e6e6e6
+    description: "Issue is closed, marked as not a valid issue (e.g., an user error)."
+  - name: "Closed: Wrong repository"
+    color: e6e6e6
+    description: "Issue is closed, was created in the wrong repository."
+  - name: "Closed: Won't Fix"
+    color: e6e6e6
+    description: "Issue is closed, it won't be fixed."
+  - name: "Closed: Done"
+    color: c2e0c6
+    description: "Issue closed, work on this issue has been marked complete."
+
+  # Others
+  - name: "Beginner Friendly"
+    color: 0e8a16
+    description: "Good first issue for people wanting to contribute to the project."
+  - name: "Help wanted"
+    color: 0e8a16
+    description: "We need some extra helping hands or expertise in order to resolve this."
+  - name: "Hacktoberfest"
+    description: "Issues/PRs are participating in the Hacktoberfest"
+    color: fbca04
+
+branches:
+  - name: master
+    protection:
+      required_pull_request_reviews:
+        # required_approving_review_count: 1
+        dismiss_stale_reviews: true
+        require_code_owner_reviews: true
+        dismissal_restrictions:
+          users: []
+          teams:
+            - Admins
+            - Masters
+      required_status_checks:
+        strict: false
+        contexts: []
+      enforce_admins: false
+      restrictions:
+        users: []
+        teams:
+          - Admins
+          - Masters
--- a/.github/stale.yml
+++ b/.github/stale.yml
@ -0,0 +1,61 @@
+---
+# Configuration for probot-stale - https://github.com/probot/stale
+
+# Number of days of inactivity before an Issue or Pull Request becomes stale
+daysUntilStale: 60
+
+# Number of days of inactivity before a stale Issue or Pull Request is closed.
+# Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale.
+daysUntilClose: 7
+
+# Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable
+exemptLabels:
+  - "Status: On hold"
+  - "Status: In progress"
+  - "Status: Awaiting response"
+  - "Status: Blocked"
+  - "Idea"
+  - "Security"
+
+# Set to true to ignore issues in a project (defaults to false)
+exemptProjects: false
+
+# Set to true to ignore issues in a milestone (defaults to false)
+exemptMilestones: false
+
+# Label to use when marking as stale
+staleLabel: "Status: Stale"
+
+# Comment to post when marking as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+
+# Comment to post when removing the stale label.
+# unmarkComment: >
+#   Your comment here.
+unmarkComment: false
+
+# Comment to post when closing a stale Issue or Pull Request.
+# closeComment: >
+#   Your comment here.
+closeComment: false
+
+# Limit the number of actions per hour, from 1-30. Default is 30
+limitPerRun: 30
+
+# Limit to only `issues` or `pulls`
+only: issues
+
+# Optionally, specify configuration settings that are specific to just 'issues' or 'pulls':
+# pulls:
+#   daysUntilStale: 30
+#   markComment: >
+#     This pull request has been automatically marked as stale because it has not had
+#     recent activity. It will be closed if no further activity occurs. Thank you
+#     for your contributions.
+
+# issues:
+#   exemptLabels:
+#     - confirmed
--- a/.github/support.yml
+++ b/.github/support.yml
@ -0,0 +1,22 @@
+---
+# Configuration for support-requests - https://github.com/dessant/support-requests
+
+# Label used to mark issues as support requests
+supportLabel: "Type: Support"
+
+# Comment to post on issues marked as support requests. Add a link
+# to a support page, or set to `false` to disable
+supportComment: >
+  :wave: We use the issue tracker exclusively for bug reports and feature requests.
+  However, this issue appears to be a support request. Please use our
+  support channels to get help with the project.
+
+  Head over to the
+  [Home Assistant community forum](https://community.home-assistant.io/?u=frenck)
+  or join our [Discord](https://discord.gg/c5DvZ4e) chat.
+
+# Close issues marked as support requests
+close: true
+
+# Lock issues marked as support requests
+lock: false
--- a/.gitignore
+++ b/.gitignore
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -0,0 +1,428 @@
+---
+image: docker:latest
+
+variables:
+  ADDON_GITHUB_REPO: hassio-addons/addon-hastebin
+  ADDON_SLUG: hastebin
+  ADDON_TARGET: hastebin
+  DOCKER_DRIVER: overlay2
+  DOCKER_HUB_ORG: hassioaddons
+
+stages:
+  - preflight
+  - build
+  - scan
+  - deploy
+  - manifest
+  - publish
+
+# Generic DIND template
+.dind: &dind
+  before_script:
+    - docker info
+  services:
+    - name: docker:dind
+      command: ["--experimental"]
+
+# Generic preflight template
+.preflight: &preflight
+  stage: preflight
+  tags:
+    - preflight
+
+# Generic build template
+.build: &build
+  <<: *dind
+  stage: build
+  before_script:
+    - docker info
+    - |
+      if [ "$(apk --print-arch)" = "amd64" ]; then
+        docker run --rm --privileged hassioaddons/qemu-user-static:latest
+      fi
+    - |
+      echo "${CI_JOB_TOKEN}" | docker login \
+        --username gitlab-ci-token \
+        --password-stdin \
+        registry.gitlab.com
+    - docker pull "registry.gitlab.com/${CI_PROJECT_PATH}/${ADDON_ARCH}:cache" || true
+  script:
+    - |
+      docker build \
+        --build-arg "BUILD_FROM=${FROM}" \
+        --build-arg "BUILD_DATE=$(date +"%Y-%m-%dT%H:%M:%SZ")" \
+        --build-arg "BUILD_ARCH=${ADDON_ARCH}" \
+        --build-arg "BUILD_REF=${CI_COMMIT_SHA}" \
+        --build-arg "BUILD_VERSION=${CI_COMMIT_TAG:-${CI_COMMIT_SHA:0:7}}" \
+        --cache-from "registry.gitlab.com/${CI_PROJECT_PATH}/${ADDON_ARCH}:cache" \
+        --tag \
+          "registry.gitlab.com/${CI_PROJECT_PATH}/${ADDON_ARCH}:${CI_COMMIT_SHA}" \
+        "${ADDON_TARGET}"
+    - |
+      docker push \
+        "registry.gitlab.com/${CI_PROJECT_PATH}/${ADDON_ARCH}:${CI_COMMIT_SHA}"
+# Generic scan template
+.scan: &scan
+  <<: *dind
+  stage: scan
+  allow_failure: true
+  before_script:
+    - docker info
+    - docker run -d --name db arminc/clair-db:latest
+    - docker run -p 6060:6060 --link db:postgres -d --name clair arminc/clair-local-scan:v2.0.1
+    - apk add -U curl ca-certificates
+    - |
+      curl \
+        --silent \
+        --show-error \
+        --location \
+        --fail \
+        --retry 3 \
+        --output /usr/bin/clair-scanner \
+        https://github.com/arminc/clair-scanner/releases/download/v8/clair-scanner_linux_amd64
+    - chmod +x /usr/bin/clair-scanner
+    - touch clair-whitelist.yml
+    - echo "Waiting for Clair to start"
+    - |
+      while ! nc -z docker 6060; do
+        sleep 1
+        WAIT=$((${WAIT} + 1))
+        if [ "${WAIT}" -gt 30 ]; then
+          echo "Error > Timeout waiting for Clair to start"
+          exit 1
+        fi
+      done
+    - docker pull "registry.gitlab.com/${CI_PROJECT_PATH}/${ADDON_ARCH}:${CI_COMMIT_SHA}"
+  script:
+    - |
+      clair-scanner \
+        -c http://docker:6060 \
+        --ip $(hostname -i) \
+        -w clair-whitelist.yml \
+        "registry.gitlab.com/${CI_PROJECT_PATH}/${ADDON_ARCH}:${CI_COMMIT_SHA}"
+  tags:
+    - scan
+
+# Generic deploy template
+.deploy: &deploy
+  <<: *dind
+  stage: deploy
+  before_script:
+    - docker info
+    - docker pull "registry.gitlab.com/${CI_PROJECT_PATH}/${ADDON_ARCH}:${CI_COMMIT_SHA}"
+    - |
+      echo "${CI_JOB_TOKEN}" | docker login \
+        --username gitlab-ci-token \
+        --password-stdin \
+        registry.gitlab.com
+    - |
+      echo "${DOCKER_PASSWORD}" | docker login \
+        --username "${DOCKER_LOGIN}" \
+        --password-stdin
+  script:
+    - |
+      docker tag \
+        "registry.gitlab.com/${CI_PROJECT_PATH}/${ADDON_ARCH}:${CI_COMMIT_SHA}" \
+        "registry.gitlab.com/${CI_PROJECT_PATH}/${ADDON_ARCH}:cache"
+    - docker push "registry.gitlab.com/${CI_PROJECT_PATH}/${ADDON_ARCH}:cache"
+    - TAG="${CI_COMMIT_TAG#v}"
+    - TAG="${TAG:-${CI_COMMIT_SHA:0:7}}"
+    - |
+      docker tag \
+        "registry.gitlab.com/${CI_PROJECT_PATH}/${ADDON_ARCH}:${CI_COMMIT_SHA}" \
+        "${DOCKER_HUB_ORG}/${ADDON_SLUG}:${ADDON_ARCH}-${TAG}"
+    - |
+      docker push \
+        "${DOCKER_HUB_ORG}/${ADDON_SLUG}:${ADDON_ARCH}-${TAG}"
+  tags:
+    - deploy
+  only:
+    - master
+    - /^v\d+\.\d+\.\d+(?:-(?:beta|rc)(?:(?:(?:\+|\.)?[a-zA-Z0-9]+)*)?)?$/
+  except:
+    - /^(?!master).+@/
+
+# Generic manifest template
+.manifest: &manifest
+  <<: *dind
+  stage: manifest
+  before_script:
+    - mkdir -p ~/.docker
+    - echo '{"experimental":"enabled"}' > ~/.docker/config.json
+    - docker info
+    - |
+      echo "${DOCKER_PASSWORD}" | docker login \
+        --username "${DOCKER_LOGIN}" \
+        --password-stdin
+  script:
+    - TAG="${TAG#v}"
+    - TAG="${TAG:-${CI_COMMIT_SHA:0:7}}"
+    - REF="${CI_COMMIT_TAG#v}"
+    - REF="${REF:-${CI_COMMIT_SHA:0:7}}"
+    - |
+      docker manifest create \
+        "${DOCKER_HUB_ORG}/${ADDON_SLUG}:${TAG}" \
+        "${DOCKER_HUB_ORG}/${ADDON_SLUG}:aarch64-${REF}" \
+        "${DOCKER_HUB_ORG}/${ADDON_SLUG}:amd64-${REF}" \
+        "${DOCKER_HUB_ORG}/${ADDON_SLUG}:armhf-${REF}" \
+        "${DOCKER_HUB_ORG}/${ADDON_SLUG}:i386-${REF}"
+    - |
+      docker manifest annotate \
+        "${DOCKER_HUB_ORG}/${ADDON_SLUG}:${TAG}" \
+        "${DOCKER_HUB_ORG}/${ADDON_SLUG}:aarch64-${REF}" \
+        --os=linux \
+        --arch=arm64 \
+        --variant=v8
+    - |
+      docker manifest annotate \
+        "${DOCKER_HUB_ORG}/${ADDON_SLUG}:${TAG}" \
+        "${DOCKER_HUB_ORG}/${ADDON_SLUG}:amd64-${REF}" \
+        --os=linux \
+        --arch=amd64
+    - |
+      docker manifest annotate \
+        "${DOCKER_HUB_ORG}/${ADDON_SLUG}:${TAG}" \
+        "${DOCKER_HUB_ORG}/${ADDON_SLUG}:armhf-${REF}" \
+        --os=linux \
+        --arch=arm \
+        --variant=v6
+    - |
+      docker manifest annotate \
+        "${DOCKER_HUB_ORG}/${ADDON_SLUG}:${TAG}" \
+        "${DOCKER_HUB_ORG}/${ADDON_SLUG}:i386-${REF}" \
+        --os=linux \
+        --arch=386
+    - |
+      docker manifest push \
+        "${DOCKER_HUB_ORG}/${ADDON_SLUG}:${TAG}"
+  tags:
+    - manifest
+  except:
+    - /^(?!master).+@/
+
+# Generic publish template
+.publish: &publish
+  stage: publish
+  image:
+    name: hassioaddons/repository-updater:latest
+    entrypoint: [""]
+  script:
+    - |
+      repository-updater \
+        --token "${GITHUB_TOKEN}" \
+        --repository "${REPOSITORY}" \
+        --addon "${ADDON_GITHUB_REPO}"
+  tags:
+    - publish
+  except:
+    - /^(?!master).+@/
+
+# Preflight jobs
+hadolint:
+  <<: *preflight
+  image: hadolint/hadolint:latest-debian
+  before_script:
+    - hadolint --version
+  script:
+    - hadolint "${ADDON_TARGET}/Dockerfile"
+
+shellcheck:
+  <<: *preflight
+  image:
+    name: koalaman/shellcheck-alpine:stable
+    entrypoint: [""]
+  before_script:
+    - shellcheck --version
+    - apk --no-cache add grep
+    - |
+      find . -type f -print0 | \
+        xargs -0 sed -i 's:#!/usr/bin/with-contenv bash:#!/bin/bash:g'
+  script:
+    - |
+      for file in $(grep -IRl "#\!\(/usr/bin/env \|/bin/\)" --exclude-dir ".git" "${ADDON_TARGET}"); do
+        if ! shellcheck $file; then
+          export FAILED=1
+        else
+          echo "$file OK"
+        fi
+      done
+      if [ "${FAILED}" = "1" ]; then
+        exit 1
+      fi
+
+yamllint:
+  <<: *preflight
+  image: sdesbure/yamllint
+  before_script:
+    - yamllint --version
+  script:
+    - yamllint .
+
+jsonlint:
+  <<: *preflight
+  image: sahsu/docker-jsonlint
+  before_script:
+    - jsonlint --version || true
+  script:
+    - |
+      for file in $(find . -type f -name "*.json"); do
+        if ! jsonlint -q $file; then
+          export FAILED=1
+        else
+          echo "$file OK"
+        fi
+      done
+      if [ "${FAILED}" = "1" ]; then
+        exit 1
+      fi
+markdownlint:
+  <<: *preflight
+  image:
+    name: ruby:alpine
+    entrypoint: [""]
+  before_script:
+    - gem install mdl
+    - mdl --version
+  script:
+    - mdl --style all --warnings .
+
+# Build Jobs
+build:armhf:
+  <<: *build
+  variables:
+    ADDON_ARCH: armhf
+    FROM: hassioaddons/base-armhf:2.1.2
+  tags:
+    - build
+    - armhf
+
+build:aarch64:
+  <<: *build
+  variables:
+    ADDON_ARCH: aarch64
+    FROM: hassioaddons/base-aarch64:2.1.2
+  tags:
+    - build
+    - aarch64
+
+build:i386:
+  <<: *build
+  variables:
+    ADDON_ARCH: i386
+    FROM: hassioaddons/base-i386:2.1.2
+  tags:
+    - build
+    - i386
+
+build:amd64:
+  <<: *build
+  variables:
+    ADDON_ARCH: amd64
+    FROM: hassioaddons/base-amd64:2.1.2
+  tags:
+    - build
+    - amd64
+
+# Scan jobs
+clair:armhf:
+  <<: *scan
+  variables:
+    ADDON_ARCH: armhf
+
+clair:aarch64:
+  <<: *scan
+  variables:
+    ADDON_ARCH: aarch64
+
+clair:i386:
+  <<: *scan
+  variables:
+    ADDON_ARCH: i386
+
+clair:amd64:
+  <<: *scan
+  variables:
+    ADDON_ARCH: amd64
+
+# Deploy jobs
+deploy:armhf:
+  <<: *deploy
+  variables:
+    ADDON_ARCH: armhf
+
+deploy:aarch64:
+  <<: *deploy
+  variables:
+    ADDON_ARCH: aarch64
+
+deploy:i386:
+  <<: *deploy
+  variables:
+    ADDON_ARCH: i386
+
+deploy:amd64:
+  <<: *deploy
+  variables:
+    ADDON_ARCH: amd64
+
+# Manifest jobs
+manifest:sha:
+  <<: *manifest
+  only:
+    - master
+
+manifest:version:
+  <<: *manifest
+  variables:
+    TAG: "${CI_COMMIT_TAG}"
+  only:
+    - /^v\d+\.\d+\.\d+(?:-(?:beta|rc)(?:(?:(?:\+|\.)?[a-zA-Z0-9]+)*)?)?$/
+
+manifest:stable:
+  <<: *manifest
+  variables:
+    TAG: latest
+  only:
+    - /^v\d+\.\d+\.\d+(?:(?:(?:\+|\.)?[a-zA-Z0-9]+)*)?$/
+
+manifest:beta:
+  <<: *manifest
+  variables:
+    TAG: beta
+  only:
+    - /^v\d+\.\d+\.\d+(?:-(?:beta|rc)(?:(?:(?:\+|\.)?[a-zA-Z0-9]+)*)?)?$/
+
+manifest:edge:
+  <<: *manifest
+  variables:
+    TAG: edge
+  only:
+    - master
+
+# Publish jobs
+publish:stable:
+  <<: *publish
+  variables:
+    REPOSITORY: hassio-addons/repository
+  only:
+    - /^v\d+\.\d+\.\d+(?:(?:(?:\+|\.)?[a-zA-Z0-9]+)*)?$/
+  environment:
+    name: stable
+
+publish:beta:
+  <<: *publish
+  variables:
+    REPOSITORY: hassio-addons/repository-beta
+  only:
+    - /^v\d+\.\d+\.\d+(?:-(?:beta|rc)(?:(?:(?:\+|\.)?[a-zA-Z0-9]+)*)?)?$/
+  environment:
+    name: beta
+
+publish:edge:
+  <<: *publish
+  variables:
+    REPOSITORY: hassio-addons/repository-edge
+  only:
+    - master
+  environment:
+    name: edge
--- a/.mdlrc
+++ b/.mdlrc
@ -0,0 +1 @@
+rules "~MD024"
--- a/.yamllint
+++ b/.yamllint
@ -0,0 +1,66 @@
+---
+rules:
+  braces:
+    level: error
+    min-spaces-inside: 0
+    max-spaces-inside: 1
+    min-spaces-inside-empty: -1
+    max-spaces-inside-empty: -1
+  brackets:
+    level: error
+    min-spaces-inside: 0
+    max-spaces-inside: 0
+    min-spaces-inside-empty: -1
+    max-spaces-inside-empty: -1
+  colons:
+    level: error
+    max-spaces-before: 0
+    max-spaces-after: 1
+  commas:
+    level: error
+    max-spaces-before: 0
+    min-spaces-after: 1
+    max-spaces-after: 1
+  comments:
+    level: error
+    require-starting-space: true
+    min-spaces-from-content: 2
+  comments-indentation:
+    level: error
+  document-end:
+    level: error
+    present: false
+  document-start:
+    level: error
+    present: true
+  empty-lines:
+    level: error
+    max: 1
+    max-start: 0
+    max-end: 1
+  hyphens:
+    level: error
+    max-spaces-after: 1
+  indentation:
+    level: error
+    spaces: 2
+    indent-sequences: true
+    check-multi-line-strings: false
+  key-duplicates:
+    level: error
+  line-length:
+    ignore: |
+      .github/support.yml
+    level: warning
+    max: 120
+    allow-non-breakable-words: true
+    allow-non-breakable-inline-mappings: true
+  new-line-at-end-of-file:
+    level: error
+  new-lines:
+    level: error
+    type: unix
+  trailing-spaces:
+    level: error
+  truthy:
+    level: error
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@ -0,0 +1,74 @@
+# Code of conduct
+
+## Our pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+## Our standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+- The use of sexualized language or imagery and unwelcome sexual attention
+  or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or
+  electronic address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate
+  in a professional setting
+
+## Our responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project lead at frenck@addons.community. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project lead is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -0,0 +1,29 @@
+# Contributing
+
+When contributing to this repository, please first discuss the change you wish
+to make via issue, email, or any other method with the owners of this repository
+before making a change.
+
+Please note we have a code of conduct, please follow it in all your interactions
+with the project.
+
+## Issues and feature requests
+
+You've found a bug in the source code, a mistake in the documentation or maybe
+you'd like a new feature? You can help us by submitting an issue to our
+[GitHub Repository][github]. Before you create an issue, make sure you search
+the archive, maybe your question was already answered.
+
+Even better: You could submit a pull request with a fix / new feature!
+
+## Pull request process
+
+1. Search our repository for open or closed [pull requests][prs] that relates
+   to your submission. You don't want to duplicate effort.
+
+1. You may merge the pull request in once you have the sign-off of two other
+   developers, or if you do not have permission to do that, you may request
+   the second reviewer to merge it for you.
+
+[github]: https://github.com/hassio-addons/addon-hastebin/issues
+[prs]: https://github.com/hassio-addons/addon-hastebin/pulls
--- a/LICENSE.md
+++ b/LICENSE.md
@ -0,0 +1,21 @@
+# MIT License
+
+Copyright (c) 2018 Joakim Sørensen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@ -0,0 +1,345 @@
+# Community Hass.io Add-ons: MQTT Broker & Web client
+
+[![GitHub Release][releases-shield]][releases]
+![Project Stage][project-stage-shield]
+[![License][license-shield]](LICENSE.md)
+
+[![GitLab CI][gitlabci-shield]][gitlabci]
+![Project Maintenance][maintenance-shield]
+[![GitHub Activity][commits-shield]][commits]
+
+[![Bountysource][bountysource-shield]][bountysource]
+[![Discord][discord-shield]][discord]
+[![Community Forum][forum-shield]][forum]
+
+[![Buy me a coffee][buymeacoffee-shield]][buymeacoffee]
+
+Mosquitto MQTT Broker bundled with Hivemq's web client.
+
+## About
+
+This add-on combines the power of [Hivemq](https://www.hivemq.com/)'s web based MQTT client, and the powerfull [Mosquitto](https://mosquitto.org/) broker.
+With this you can host your broker, and inspect/publish messages in the Web client!
+
+![sample](/images/image.png)
+
+## Installation
+
+The installation of this add-on is pretty straightforward and not different in
+comparison to installing any other Hass.io add-on.
+
+1. [Add our Hass.io add-ons repository][repository] to your Hass.io instance.
+1. Install the "MQTT Broker & Web client" add-on.
+1. Start the "MQTT Broker & Web client" add-on
+1. Configure the "MQTT Broker & Web client" add-on
+1. Check the logs of the "MQTT Broker & Web client" add-on to see if everything went well.
+1. Click "OPEN WEB UI" to open the MQTT Broker & Web client website.
+
+**NOTE**: Starting the add-on might take a couple of minutes (especially the
+first time starting the add-on).
+
+**NOTE**: Do not add this repository to Hass.io, please use:
+`https://github.com/hassio-addons/repository`.
+
+## Docker status
+
+![Supports armhf Architecture][armhf-shield]
+![Supports aarch64 Architecture][aarch64-shield]
+![Supports amd64 Architecture][amd64-shield]
+![Supports i386 Architecture][i386-shield]
+
+[![Docker Layers][layers-shield]][microbadger]
+[![Docker Pulls][pulls-shield]][dockerhub]
+
+## Configuration
+
+**Note**: _Remember to restart the add-on when the configuration is changed._
+
+Example add-on configuration:
+
+```json
+{
+  "log_level": "info",
+  "certfile": "fullchain.pem",
+  "keyfile": "privkey.pem",
+  "web": {
+    "enabled": true,
+    "username": "MarryPoppins",
+    "password": "Supercalifragilisticexpialidocious",
+    "ssl": true
+  },
+  "broker": {
+    "enabled": true,
+    "enable_ws": true,
+    "enable_mqtt": true,
+    "username": "MarryPoppins",
+    "password": "Supercalifragilisticexpialidocious",
+    "ssl": true,
+    "allow_anonymous": false
+  }
+}
+```
+
+**Note**: _This is just an example, don't copy and past it! Create your own!_
+
+### Option: `log_level`
+
+The `log_level` option controls the level of log output by the addon and can
+be changed to be more or less verbose, which might be useful when you are
+dealing with an unknown issue. Possible values are:
+
+- `trace`: Show every detail, like all called internal functions.
+- `debug`: Shows detailed debug information.
+- `info`: Normal (usually) interesting events.
+- `warning`: Exceptional occurrences that are not errors.
+- `error`:  Runtime errors that do not require immediate action.
+- `fatal`: Something went terribly wrong. Add-on becomes unusable.
+
+Please note that each level automatically includes log messages from a
+more severe level, e.g., `debug` also shows `info` messages. By default,
+the `log_level` is set to `info`, which is the recommended setting unless
+you are troubleshooting.
+
+### Option: `certfile`
+
+The certificate file to use for SSL.
+
+**Note**: _The file MUST be stored in `/ssl/`, which is the default for Hass.io_
+
+### Option: `keyfile`
+
+The private key file to use for SSL.
+
+**Note**: _The file MUST be stored in `/ssl/`, which is the default for Hass.io_
+
+### Option group `web`
+
+---
+The following options are for the option group: `web`. These settings
+only apply to the Hivemq MQTT web client.
+
+#### Option `web`: `enable`
+
+Flag to control if this service should be started.
+
+#### Option `web`: `username`
+
+Username for authenticating with the web client of this add-on. Leaving the username
+field empty, will disable the authentication mechanism entirely.
+
+Setting a username/password can be added as an extra line of defense,
+to prevent users of using your installation for themselves.
+
+This option is HIGHLY recommended in case you expose this add-on to the outside
+world.
+
+**Note**: _This option support secrets, e.g., `!secret mqtt_web_username`._
+
+#### Option `web`: `password`
+
+Password for authenticating with the web client of this add-on.
+
+**Note**: _This option support secrets, e.g., `!secret mqtt_web_password`._
+
+#### Option `web`: `ssl`
+
+Enables/Disables SSL (HTTPS) on the web client of this add-on. Set it `true`
+to enable it, `false` otherwise.
+
+### Option group `broker`
+
+---
+The following options are for the option group: `web`. These settings
+only apply to the Hivemq MQTT web client.
+
+#### Option `broker`: `enable`
+
+Flag to control if this service should be started.
+
+#### Option `broker`: `enable_ws`
+
+Enables the websocket protocol on the broker.  
+**This is needed if you have enabled the web client of this addon**  
+The default websocket port is `1884`.
+
+#### Option `broker`: `enable_mqtt`
+
+Enables the websocket protocol on the broker.  
+The default websocket port is `1883`.
+
+#### Option `broker`: `username`
+
+Username for authenticating with the mqtt broker of this add-on. Leaving the username
+field empty, will disable the authentication mechanism entirely.
+
+Setting a username/password can be added as an extra line of defense,
+to prevent users of using your installation for themselves.
+
+This option is HIGHLY recommended in case you expose this add-on to the outside
+world.
+
+**Note**: _This option support secrets, e.g., `!secret mqtt_broker_username`._
+
+#### Option `broker`: `password`
+
+Password for authenticating with the mqtt broker of this add-on.
+
+**Note**: _This option support secrets, e.g., `!secret mqtt_broker_password`._
+
+#### Option `broker`: `ssl`
+
+Enables/Disables SSL (HTTPS) on the mqtt broker of this add-on. Set it `true`
+to enable it, `false` otherwise.
+
+#### Option `broker`: `allow_anonymous`
+
+Set this to `true` if you need to enable anonymous authentication.
+**NB!: It is NOT a good idea having this enabled**
+
+### Option: `i_like_to_be_pwned`
+
+Adding this option to the add-on configuration allows to you bypass the
+HaveIBeenPwned password requirement by setting it to `true`.
+
+**Note**: _We STRONGLY suggest picking a stronger/safer password instead of
+using this option! USE AT YOUR OWN RISK!_
+
+### Option: `leave_front_door_open`
+
+Adding this option to the add-on configuration allows you to disable
+authentication on the Web Terminal by setting it to `true` and leaving the
+username and password empty.
+
+**Note**: _We STRONGLY suggest, not to use this, even if this add-on is
+only exposed to your internal network. USE AT YOUR OWN RISK!_
+
+## Embedding into Home Assistant
+
+It is possible to embed the web client of this add-on directly into Home Assistant, allowing you to
+access your the web client of this add-on through the Home Assistant frontend.
+
+Home Assistant provides the `panel_iframe` component, for these purposes.
+
+Example configuration:
+
+```yaml
+panel_iframe:
+  mqtt:
+    title: MQTT
+    icon: mdi:code-brackets
+    url: https://addres.to.your.hass.io:5713
+```
+
+## Changelog & Releases
+
+This repository keeps a change log using [GitHub's releases][releases]
+functionality. The format of the log is based on
+[Keep a Changelog][keepchangelog].
+
+Releases are based on [Semantic Versioning][semver], and use the format
+of ``MAJOR.MINOR.PATCH``. In a nutshell, the version will be incremented
+based on the following:
+
+- ``MAJOR``: Incompatible or major changes.
+- ``MINOR``: Backwards-compatible new features and enhancements.
+- ``PATCH``: Backwards-compatible bugfixes and package updates.
+
+## Support
+
+Got questions?
+
+You have several options to get them answered:
+
+- The [Community Hass.io Add-ons Discord chat server][discord] for add-on
+  support and feature requests.
+- The [Home Assistant Discord chat server][discord-ha] for general Home
+  Assistant discussions and questions.
+- The Home Assistant [Community Forum][forum].
+- Join the [Reddit subreddit][reddit] in [/r/homeassistant][reddit]
+
+You could also [open an issue here][issue] GitHub.
+
+## Contributing
+
+This is an active open-source project. We are always open to people who want to
+use the code or contribute to it.
+
+We have set up a separate document containing our
+[contribution guidelines](CONTRIBUTING.md).
+
+Thank you for being involved! :heart_eyes:
+
+## Authors & contributors
+
+The original setup of this repository is by [Joakim Sørensen][ludeeus].
+
+For a full list of all authors and contributors,
+check [the contributor's page][contributors].
+
+## We have got some Hass.io add-ons for you
+
+Want some more functionality to your Hass.io Home Assistant instance?
+
+We have created multiple add-ons for Hass.io. For a full list, check out
+our [GitHub Repository][repository].
+
+## License
+
+MIT License
+
+Copyright (c) 2018 Joakim Sørensen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+[aarch64-shield]: https://img.shields.io/badge/aarch64-yes-green.svg
+[amd64-shield]: https://img.shields.io/badge/amd64-yes-green.svg
+[anchore-shield]: https://anchore.io/service/badges/image/67d1185473090e99d5ac5e1bb4d1aa2295117a9bd3d7abbf8cd8a71e331c8388
+[anchore]: https://anchore.io/image/dockerhub/hassioaddons%2Funifi%3Alatest
+[armhf-shield]: https://img.shields.io/badge/armhf-yes-green.svg
+[bountysource-shield]: https://img.shields.io/bountysource/team/hassio-addons/activity.svg
+[bountysource]: https://www.bountysource.com/teams/hassio-addons/issues
+[buymeacoffee-shield]: https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg
+[buymeacoffee]: https://www.buymeacoffee.com/ludeeus
+[commits-shield]: https://img.shields.io/github/commit-activity/y/hassio-addons/addon-mqtt.svg
+[commits]: https://github.com/hassio-addons/addon-mqtt/commits/master
+[contributors]: https://github.com/hassio-addons/addon-mqtt/graphs/contributors
+[discord-ha]: https://discord.gg/c5DvZ4e
+[discord-shield]: https://img.shields.io/discord/478094546522079232.svg
+[discord]: https://discord.me/hassioaddons
+[dockerhub]: https://hub.docker.com/r/hassioaddons/mqtt
+[forum-shield]: https://img.shields.io/badge/community-forum-brightgreen.svg
+[forum]: https://community.home-assistant.io/
+[ludeeus]: https://github.com/ludeeus
+[gitlabci-shield]: https://gitlab.com/hassio-addons/addon-mqtt/badges/master/pipeline.svg
+[gitlabci]: https://gitlab.com/hassio-addons/addon-mqtt/pipelines
+[home-assistant]: https://home-assistant.io
+[i386-shield]: https://img.shields.io/badge/i386-yes-green.svg
+[issue]: https://github.com/hassio-addons/addon-mqtt/issues
+[keepchangelog]: http://keepachangelog.com/en/1.0.0/
+[layers-shield]: https://images.microbadger.com/badges/image/hassioaddons/mqtt.svg
+[license-shield]: https://img.shields.io/github/license/hassio-addons/addon-mqtt.svg
+[maintenance-shield]: https://img.shields.io/maintenance/yes/2018.svg
+[microbadger]: https://microbadger.com/images/hassioaddons/mqtt
+[project-stage-shield]: https://img.shields.io/badge/project%20stage-experimental-yellow.svg
+[pulls-shield]: https://img.shields.io/docker/pulls/hassioaddons/mqtt.svg
+[reddit]: https://reddit.com/r/homeassistant
+[releases-shield]: https://img.shields.io/github/release/hassio-addons/addon-mqtt.svg
+[releases]: https://github.com/hassio-addons/addon-mqtt/releases
+[repository]: https://github.com/hassio-addons/repository
+[semver]: http://semver.org/spec/v2.0.0.htm
--- a/images/image.png
+++ b/images/image.png
--- a/mqtt/.README.j2
+++ b/mqtt/.README.j2
@ -0,0 +1,70 @@
+# Community Hass.io Add-ons: SQLite-web
+
+[![Release][release-shield]][release] ![Project Stage][project-stage-shield] ![Project Maintenance][maintenance-shield]
+
+[![Discord][discord-shield]][discord] [![Community Forum][forum-shield]][forum]
+
+[![Buy me a coffee][buymeacoffee-shield]][buymeacoffee]
+
+Mosquitto MQTT Broker bundled with Hivemq's web client.
+
+## About
+
+This add-on combines the power of [Hivemq](https://www.hivemq.com/)'s web based MQTT client, and the powerfull [Mosquitto](https://mosquitto.org/) broker.
+With this you can host your broker, and inspect/publish messages in the Web client!
+
+[Click here for the full documentation][docs]
+
+![Home Assistant Control Panel screenshot][screenshot]
+
+{% if channel == "edge" %}
+## WARNING! THIS IS AN EDGE VERSION!
+
+This Hass.io Add-ons repository contains edge builds of add-ons. Edge builds
+add-ons are based upon the latest development version.
+
+- They may not work at all.
+- They might stop working at any time.
+- They could have a negative impact on your system.
+
+This repository was created for:
+
+- Anybody willing to test.
+- Anybody interested in trying out upcoming add-ons or add-on features.
+- Developers.
+
+If you are more interested in stable releases of our add-ons:
+
+<https://github.com/hassio-addons/repository>
+
+{% endif %}
+{% if channel == "beta" %}
+## WARNING! THIS IS A BETA VERSION!
+
+This Hass.io Add-ons repository contains beta releases of add-ons.
+
+- They might stop working at any time.
+- They could have a negative impact on your system.
+
+This repository was created for:
+
+- Anybody willing to test.
+- Anybody interested in trying out upcoming add-ons or add-on features.
+
+If you are more interested in stable releases of our add-ons:
+
+<https://github.com/hassio-addons/repository>
+
+{% endif %}
+[buymeacoffee-shield]: https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg
+[buymeacoffee]: https://www.buymeacoffee.com/ludeeus
+[discord-shield]: https://img.shields.io/discord/330944238910963714.svg
+[discord]: https://discord.gg/c5DvZ4e
+[docs]: {{ repo }}/blob/{{ version }}/README.md
+[forum-shield]: https://img.shields.io/badge/community-forum-brightgreen.svg
+[forum]: https://community.home-assistant.io
+[maintenance-shield]: https://img.shields.io/maintenance/yes/2018.svg
+[project-stage-shield]: https://img.shields.io/badge/project%20stage-experimental-yellow.svg
+[release-shield]: https://img.shields.io/badge/version-{{ version }}-blue.svg
+[release]: {{ repo }}/tree/{{ version }}
+[screenshot]: https://github.com/hassio-addons/addon-sqlite-web/raw/master/images/screenshot.png
--- a/mqtt/Dockerfile
+++ b/mqtt/Dockerfile
@ -0,0 +1,45 @@
+ARG BUILD_FROM=hassioaddons/base:2.1.2
+# hadolint ignore=DL3006
+FROM ${BUILD_FROM}
+
+# Set shell
+SHELL ["/bin/bash", "-o", "pipefail", "-c"]
+
+# Sets working directory
+WORKDIR /app
+
+# Copy root filesystem
+COPY rootfs /
+
+# Setup base
+RUN \
+  apk add --no-cache \
+    apache2-utils=2.4.34-r0 \
+    nginx=1.14.0-r0 \
+    libwebsockets=2.4.0-r1 \
+    mosquitto=1.4.15-r0 \
+    && mkdir /opt
+
+# Build arugments
+ARG BUILD_ARCH
+ARG BUILD_DATE
+ARG BUILD_REF
+ARG BUILD_VERSION
+
+# Labels
+LABEL \
+    io.hass.name="MQTT Broker & Web client" \
+    io.hass.description="Mosquitto MQTT Broker bundled with Hivemq's web client." \
+    io.hass.arch="${BUILD_ARCH}" \
+    io.hass.type="addon" \
+    io.hass.version=${BUILD_VERSION} \
+    maintainer="Joakim Sørensen @ludeeus <ludeeus@gmail.com>" \
+    org.label-schema.description="Mosquitto MQTT Broker bundled with Hivemq's web client." \
+    org.label-schema.build-date=${BUILD_DATE} \
+    org.label-schema.name="MQTT Broker & Web client" \
+    org.label-schema.schema-version="1.0" \
+    org.label-schema.url="https://community.home-assistant.io/t/community-hass-io-add-on-mqtt/XXXX" \
+    org.label-schema.usage="https://github.com/hassio-addons/addon-mqtt/tree/master/README.md" \
+    org.label-schema.vcs-ref=${BUILD_REF} \
+    org.label-schema.vcs-url="https://github.com/hassio-addons/addon-mqtt" \
+    org.label-schema.vendor="Community Hass.io Add-ons"
--- a/mqtt/build.json
+++ b/mqtt/build.json
@ -0,0 +1,9 @@
+{
+    "build_from": {
+        "aarch64": "hassioaddons/base-aarch64:2.1.2",
+        "amd64": "hassioaddons/base-amd64:2.1.2",
+        "armhf": "hassioaddons/base-armhf:2.1.2",
+        "i386": "hassioaddons/base-i386:2.1.2"
+    },
+    "args": {}
+}
--- a/mqtt/config.json
+++ b/mqtt/config.json
@ -0,0 +1,73 @@
+{
+  "name": "MQTT Broker & Web client",
+  "version": "dev",
+  "slug": "mqtt",
+  "description": "Mosquitto MQTT Broker bundled with Hivemq's web client",
+  "url": "https://github.com/hassio-addons/addon-mqtt/tree/master/README.md",
+  "webui": "https://[HOST]:[PORT:5713]",
+  "startup": "services",
+  "arch": [
+    "aarch64",
+    "amd64",
+    "armhf",
+    "i386"
+  ],
+  "boot": "auto",
+  "hassio_api": true,
+  "homeassistant_api": false,
+  "host_network": false,
+  "ports": {
+    "5713/tcp": 5713,
+    "1884/tcp": 1884,
+    "1883/tcp": 1883
+  },
+  "map": [
+    "ssl",
+    "config"
+  ],
+  "options": {
+    "log_level": "info",
+    "certfile": "fullchain.pem",
+    "keyfile": "privkey.pem",
+    "web": {
+      "enabled": true,
+      "username": "",
+      "password": "",
+      "ssl": true
+    },
+    "broker": {
+      "enabled": true,
+      "enable_ws": true,
+      "enable_mqtt": true,
+      "username": "",
+      "password": "",
+      "ssl": true,
+      "allow_anonymous": false
+    }
+  },
+  "schema": {
+    "log_level": "match(^(trace|debug|info|notice|warning|error|fatal)$)",
+    "certfile": "str",
+    "keyfile": "str",
+    "web": {
+      "enabled": "bool",
+      "username": "str",
+      "password": "str",
+      "ssl": "bool"
+    },
+    "broker": {
+      "enabled": "bool",
+      "enable_ws": "bool",
+      "enable_mqtt": "bool",
+      "username": "str",
+      "password": "str",
+      "ssl": "bool",
+      "allow_anonymous": "bool"
+    },
+    "i_like_to_be_pwned": "bool?",
+    "leave_front_door_open": "bool?"
+  },
+  "environment": {
+    "LOG_FORMAT": "{LEVEL}: {MESSAGE}"
+  }
+}
--- a/mqtt/icon.png
+++ b/mqtt/icon.png
--- a/mqtt/logo.png
+++ b/mqtt/logo.png
--- a/mqtt/rootfs/app/assets/arrow_down.png
+++ b/mqtt/rootfs/app/assets/arrow_down.png
--- a/mqtt/rootfs/app/assets/arrow_up.png
+++ b/mqtt/rootfs/app/assets/arrow_up.png
--- a/mqtt/rootfs/app/assets/jquery.minicolors.png
+++ b/mqtt/rootfs/app/assets/jquery.minicolors.png
--- a/mqtt/rootfs/app/assets/logo.png
+++ b/mqtt/rootfs/app/assets/logo.png
--- a/mqtt/rootfs/app/css/foundation.css
+++ b/mqtt/rootfs/app/css/foundation.css
--- a/mqtt/rootfs/app/css/foundation.min.css
+++ b/mqtt/rootfs/app/css/foundation.min.css
--- a/mqtt/rootfs/app/css/jquery.minicolors.css
+++ b/mqtt/rootfs/app/css/jquery.minicolors.css
@ -0,0 +1,245 @@
+.minicolors {
+	position: relative;
+}
+
+.minicolors-swatch {
+	position: absolute;
+	vertical-align: middle;
+	background: url(../assets/jquery.minicolors.png) -80px 0;
+	border: solid 1px #ccc;
+	cursor: text;
+	padding: 0;
+	margin: 0;
+	display: inline-block;
+}
+
+.minicolors-swatch-color {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+}
+
+.minicolors input[type=hidden] + .minicolors-swatch {
+	width: 28px;
+	position: static;
+	cursor: pointer;
+}
+
+/* Panel */
+.minicolors-panel {
+	position: absolute;
+	width: 173px;
+	height: 152px;
+	background: white;
+	border: solid 1px #CCC;
+	box-shadow: 0 0 20px rgba(0, 0, 0, .2);
+	z-index: 99999;
+	-moz-box-sizing: content-box;
+	-webkit-box-sizing: content-box;
+	box-sizing: content-box;
+	display: none;
+}
+
+.minicolors-panel.minicolors-visible {
+	display: block;
+}
+
+/* Panel positioning */
+.minicolors-position-top .minicolors-panel {
+	top: -154px;
+}
+
+.minicolors-position-right .minicolors-panel {
+	right: 0;
+}
+
+.minicolors-position-bottom .minicolors-panel {
+	top: auto;
+}
+
+.minicolors-position-left .minicolors-panel {
+	left: 0;
+}
+
+.minicolors-with-opacity .minicolors-panel {
+	width: 194px;
+}
+
+.minicolors .minicolors-grid {
+	position: absolute;
+	top: 1px;
+	left: 1px;
+	width: 150px;
+	height: 150px;
+	background: url(../assets/jquery.minicolors.png) -120px 0;
+	cursor: crosshair;
+}
+
+.minicolors .minicolors-grid-inner {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 150px;
+	height: 150px;
+	background: none;
+}
+
+.minicolors-slider-saturation .minicolors-grid {
+	background-position: -420px 0;
+}
+
+.minicolors-slider-saturation .minicolors-grid-inner {
+	background: url(../assets/jquery.minicolors.png) -270px 0;
+	}
+
+	.minicolors-slider-brightness .minicolors-grid {
+		background-position: -570px 0;
+	}
+
+	.minicolors-slider-brightness .minicolors-grid-inner {
+		background: black;
+	}
+
+	.minicolors-slider-wheel .minicolors-grid {
+		background-position: -720px 0;
+	}
+
+	.minicolors-slider,
+	.minicolors-opacity-slider {
+		position: absolute;
+		top: 1px;
+		left: 152px;
+		width: 20px;
+		height: 150px;
+		background: white url(../assets/jquery.minicolors.png) 0 0;
+	cursor: row-resize;
+}
+
+.minicolors-slider-saturation .minicolors-slider {
+	background-position: -60px 0;
+}
+
+.minicolors-slider-brightness .minicolors-slider {
+	background-position: -20px 0;
+}
+
+.minicolors-slider-wheel .minicolors-slider {
+	background-position: -20px 0;
+}
+
+.minicolors-opacity-slider {
+	left: 173px;
+	background-position: -40px 0;
+	display: none;
+}
+
+.minicolors-with-opacity .minicolors-opacity-slider {
+	display: block;
+}
+
+/* Pickers */
+.minicolors-grid .minicolors-picker {
+	position: absolute;
+	top: 70px;
+	left: 70px;
+	width: 12px;
+	height: 12px;
+	border: solid 1px black;
+	border-radius: 10px;
+	margin-top: -6px;
+	margin-left: -6px;
+	background: none;
+}
+
+.minicolors-grid .minicolors-picker > div {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 8px;
+	height: 8px;
+	border-radius: 8px;
+	border: solid 2px white;
+	-moz-box-sizing: content-box;
+	-webkit-box-sizing: content-box;
+	box-sizing: content-box;
+}
+
+.minicolors-picker {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 18px;
+	height: 2px;
+	background: white;
+	border: solid 1px black;
+	margin-top: -2px;
+	-moz-box-sizing: content-box;
+	-webkit-box-sizing: content-box;
+	box-sizing: content-box;
+}
+
+/* Inline controls */
+.minicolors-inline {
+	display: inline-block;
+}
+
+.minicolors-inline .minicolors-input {
+	display: none !important;
+}
+
+.minicolors-inline .minicolors-panel {
+	position: relative;
+	top: auto;
+	left: auto;
+	box-shadow: none;
+	z-index: auto;
+	display: inline-block;
+}
+
+/* Default theme */
+.minicolors-theme-default .minicolors-swatch {
+	top: 5px;
+	left: 5px;
+	width: 18px;
+	height: 18px;	
+}
+.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
+	left: auto;
+	right: 5px;
+}
+.minicolors-theme-default.minicolors {
+	width: auto;
+	display: inline-block;
+}
+.minicolors-theme-default .minicolors-input {
+	height: 20px;
+	width: auto;
+	display: inline-block;
+	padding-left: 26px;
+}
+.minicolors-theme-default.minicolors-position-right .minicolors-input {
+	padding-right: 26px;
+	padding-left: inherit;
+}
+
+/* Bootstrap theme */
+.minicolors-theme-bootstrap .minicolors-swatch {
+	top: 3px;
+	left: 3px;
+	width: 28px;
+	height: 28px;
+	border-radius: 3px;
+}
+.minicolors-theme-bootstrap.minicolors-position-right .minicolors-swatch {
+	left: auto;
+	right: 3px;
+}
+.minicolors-theme-bootstrap .minicolors-input {
+	padding-left: 44px;
+}
+.minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
+	padding-right: 44px;
+	padding-left: 12px;
+}
--- a/mqtt/rootfs/app/css/normalize.css
+++ b/mqtt/rootfs/app/css/normalize.css
@ -0,0 +1,402 @@
+/*! normalize.css v2.1.1 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined in IE 8/9.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 8/9.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+[hidden] {
+    display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/**
+ * 1. Prevent system color scheme's background color being used in Firefox, IE,
+ *    and Opera.
+ * 2. Prevent system color scheme's text color being used in Firefox, IE, and
+ *    Opera.
+ * 3. Set default font family to sans-serif.
+ * 4. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    background: #fff; /* 1 */
+    color: #000; /* 2 */
+    font-family: sans-serif; /* 3 */
+    -ms-text-size-adjust: 100%; /* 4 */
+    -webkit-text-size-adjust: 100%; /* 4 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/**
+ * Correct font family set oddly in Safari 5 and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    font-size: 1em;
+}
+
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+
+pre {
+    white-space: pre-wrap;
+}
+
+/**
+ * Set consistent quote types.
+ */
+
+q {
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9.
+ */
+
+img {
+    border: 0;
+}
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Correct font family not being inherited in all browsers.
+ * 2. Correct font size not being inherited in all browsers.
+ * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ */
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 2 */
+    margin: 0; /* 3 */
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+    text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to `content-box` in IE 8/9.
+ * 2. Remove excess padding in IE 8/9.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
--- a/mqtt/rootfs/app/css/style.css
+++ b/mqtt/rootfs/app/css/style.css
@ -0,0 +1,325 @@
+/**
+ * Copyright 2013 dc-square GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @author: Christoph Schäbel
+ *
+ */
+
+#header {
+    float: none;
+    margin: 0 auto;
+    padding: 0;
+    height: 80px;
+    background-color: #f2f2f2;
+    border-bottom: solid 2px #000000;
+    margin-bottom: 20px;
+    width: 100%;
+    background: #f2f2f2; /* Old browsers */
+    background-image: -moz-linear-gradient(top, #f8f8f8 0%, #f2f2f2 100%); /* FF3.6+ */
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8f8f8), color-stop(100%, #f2f2f2)); /* Chrome,Safari4+ */
+    background-image: -webkit-linear-gradient(top, #f8f8f8 0%, #f2f2f2 100%); /* Chrome10+,Safari5.1+ */
+    background-image: -o-linear-gradient(top, #f8f8f8 0%, #f2f2f2 100%); /* Opera 11.10+ */
+    background-image: -ms-linear-gradient(top, #f8f8f8 0%, #f2f2f2 100%); /* IE10+ */
+    background-image: linear-gradient(to bottom, #f8f8f8 0%, #f2f2f2 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#f2f2f2', GradientType=0); /* IE6-8 */
+}
+
+#header > div {
+    max-width: 62.5em;
+    margin: 0 auto;
+}
+
+#headertitle {
+    float: right;
+    margin-top: 30px;
+    margin-right: 20px;
+}
+
+#headerlogo {
+    margin-left: 20px;
+    margin-top: 5px;
+}
+
+.conniTop {
+    margin-left: 15px;
+    background-color: #f2f2f2;
+    width: 180px;
+}
+
+.publishTop {
+    background-color: #f2f2f2;
+    width: 160px;
+}
+
+.subTop {
+    background-color: #f2f2f2;
+    width: 215px;
+}
+
+.messagesTop {
+    background-color: #f2f2f2;
+    width: 180px;
+}
+
+div.conniArrow, div.publishArrow, div.subArrow, div.messagesArrow {
+    float: right;
+    text-align: right;
+}
+
+.checky {
+    margin-left: 22px;
+}
+
+.connection {
+    margin-bot: 20px;
+}
+
+.publish {
+
+    margin-top: 20px;
+    width: 60%;
+}
+
+.disc li {
+    list-style-type: none;
+    margin-bottom: 10px;
+    background-color: #ffffff;
+}
+
+#colorChooser {
+    width: 20px;
+    padding-left: 30px;
+    line-height: 24px;
+}
+
+/*.subs0, .mess0{
+    border-left: solid 10px #ffff00;
+    background-color: #ffffff;
+}
+.subs1, .mess1{
+    border-left: solid 10px #ff00ff;
+    background-color: #ffffff;
+}
+
+.subs2, .mess2{
+    border-left: solid 10px #00ffff;
+    background-color: #ffffff;
+}
+
+.subs3, .mess3{
+    border-left: solid 10px #f0fff0;
+    background-color: #ffffff;
+}
+
+.subs4, .mess4{
+    border-left: solid 10px #ff0f0f;
+    background-color: #ffffff;
+}*/
+
+.subText {
+    border-style: solid;
+    border-width: 1px;
+    border-color: #cccccc;
+    background-color: #ffffff;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.messageText {
+    border: solid 1px #cccccc;
+}
+
+.closer {
+    margin-bot: 20px;
+    padding: 0;
+}
+
+.left {
+    width: 10px;
+    background-color: #ffff00;
+}
+
+.right {
+    float: right;
+    color: #bababa;
+}
+
+.colorSub {
+    background-color: #ffff00;
+}
+
+.addSubButton {
+    width: 100%;
+}
+
+.empty {
+    clear: both;
+    height: 20px;
+}
+
+#connectButton, #disconnectButton {
+    margin-top: 17px;
+}
+
+#publishButton {
+    margin-top: 17px;
+    margin-left: -10px;
+}
+
+#filterButton {
+    margin-top: 17px;
+}
+
+#subscribeButton {
+    margin-top: 17px;
+    margin-left: -30px;
+}
+
+#lwQosInput {
+    margin-top: 7px;
+    margin-left: 20px;
+    width: 50px;
+}
+
+#publishQoSInput {
+    margin-top: 7px;
+    margin-left: -5px;
+    width: 50px;
+}
+
+#QoSInput {
+    margin-top: 7px;
+    margin-left: -5px;
+    width: 50px;
+}
+
+.qos, .date, .topicM, .retain {
+    color: #bababa;
+    font-size: 12px;
+}
+
+.columns h3 {
+    margin-bottom: 0;
+    margin-top: 0;
+    font-size: 23px;
+}
+
+form.custom .custom.dropdown.small {
+    width: 70px;
+}
+
+form.custom .custom.checkbox {
+    margin-left: 0.7em;
+    margin-top: 10px;
+}
+
+#connection, #publish-sub {
+    width: 100%;
+}
+
+.columns.subArrow, .columns.publishArrow, .columns.messagesArrow {
+    padding-right: 0;
+}
+
+#addSubButton {
+    margin-top: 15px;
+}
+
+#publishPanel {
+    padding-right: 0;
+    padding-left: 0;
+}
+
+div.messageText {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.row .messLine div.row, .row .subLine div.row {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#messagesMain {
+    margin-bottom: 20px;
+}
+
+div.icon-arrow-chevron {
+    background-image: url('../assets/arrow_up.png');
+    min-height: 32px;
+    min-width: 32px;
+    background-repeat: no-repeat;
+    background-position: right;
+}
+
+.closed div.icon-arrow-chevron {
+    background-image: url('../assets/arrow_down.png');
+}
+
+#connectionStatus {
+    margin-top: 7px;
+    width: 16px;
+    height: 16px;
+    border-radius: 8px;
+}
+
+body.notconnected #connectionStatus {
+    background-color: #bc0000;
+}
+
+body.connected #connectionStatus {
+    background-color: #009700;
+}
+
+body.notconnected #disconnectButton {
+    display: none;
+}
+
+body.connected #disconnectButton {
+    display: inline-block;
+}
+
+body.notconnected #connectButton {
+    display: inline-block;
+}
+
+body.connected #connectButton {
+    display: none;
+}
+
+body.connected #connectionStatus:after {
+    content: 'connected';
+    padding-left: 22px;
+}
+
+body.connectionbroke #connectionStatus:after {
+    content: 'disconnected';
+    padding-left: 22px;
+}
+
+.columns.subText {
+    padding-right: 2px;
+}
+
+.truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.break-words {
+    word-wrap: break-word;
+}
--- a/mqtt/rootfs/app/fancybox/blank.gif
+++ b/mqtt/rootfs/app/fancybox/blank.gif
--- a/mqtt/rootfs/app/fancybox/fancy_close.png
+++ b/mqtt/rootfs/app/fancybox/fancy_close.png
--- a/mqtt/rootfs/app/fancybox/fancy_loading.png
+++ b/mqtt/rootfs/app/fancybox/fancy_loading.png
--- a/mqtt/rootfs/app/fancybox/fancy_nav_left.png
+++ b/mqtt/rootfs/app/fancybox/fancy_nav_left.png
--- a/mqtt/rootfs/app/fancybox/fancy_nav_right.png
+++ b/mqtt/rootfs/app/fancybox/fancy_nav_right.png
--- a/mqtt/rootfs/app/fancybox/fancy_shadow_e.png
+++ b/mqtt/rootfs/app/fancybox/fancy_shadow_e.png
--- a/mqtt/rootfs/app/fancybox/fancy_shadow_n.png
+++ b/mqtt/rootfs/app/fancybox/fancy_shadow_n.png
--- a/mqtt/rootfs/app/fancybox/fancy_shadow_ne.png
+++ b/mqtt/rootfs/app/fancybox/fancy_shadow_ne.png
--- a/mqtt/rootfs/app/fancybox/fancy_shadow_nw.png
+++ b/mqtt/rootfs/app/fancybox/fancy_shadow_nw.png
--- a/mqtt/rootfs/app/fancybox/fancy_shadow_s.png
+++ b/mqtt/rootfs/app/fancybox/fancy_shadow_s.png
--- a/mqtt/rootfs/app/fancybox/fancy_shadow_se.png
+++ b/mqtt/rootfs/app/fancybox/fancy_shadow_se.png
--- a/mqtt/rootfs/app/fancybox/fancy_shadow_sw.png
+++ b/mqtt/rootfs/app/fancybox/fancy_shadow_sw.png
--- a/mqtt/rootfs/app/fancybox/fancy_shadow_w.png
+++ b/mqtt/rootfs/app/fancybox/fancy_shadow_w.png
--- a/mqtt/rootfs/app/fancybox/fancy_title_left.png
+++ b/mqtt/rootfs/app/fancybox/fancy_title_left.png
--- a/mqtt/rootfs/app/fancybox/fancy_title_main.png
+++ b/mqtt/rootfs/app/fancybox/fancy_title_main.png
--- a/mqtt/rootfs/app/fancybox/fancy_title_over.png
+++ b/mqtt/rootfs/app/fancybox/fancy_title_over.png
--- a/mqtt/rootfs/app/fancybox/fancy_title_right.png
+++ b/mqtt/rootfs/app/fancybox/fancy_title_right.png
--- a/mqtt/rootfs/app/fancybox/fancybox-x.png
+++ b/mqtt/rootfs/app/fancybox/fancybox-x.png
--- a/mqtt/rootfs/app/fancybox/fancybox-y.png
+++ b/mqtt/rootfs/app/fancybox/fancybox-y.png
--- a/mqtt/rootfs/app/fancybox/fancybox.png
+++ b/mqtt/rootfs/app/fancybox/fancybox.png
--- a/mqtt/rootfs/app/index.html
+++ b/mqtt/rootfs/app/index.html
@ -0,0 +1,334 @@
+<!DOCTYPE html>
+<!--
+Copyright 2013 dc-square GmbH
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+@author: Christoph Schäbel
+
+-->
+<!--[if IE 8]>
+<html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!-->
+<html class="no-js" lang="en"> <!--<![endif]-->
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>MQTT Websocket Client</title>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/foundation.css">
+    <link rel="stylesheet" href="css/jquery.minicolors.css">
+    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css">
+</head>
+<body class="notconnected">
+
+<div id="header">
+    <div>
+        <a href="/"><img id="headerlogo" src="assets/logo.png"></a>
+        <span id="headertitle" style="padding: 8px;">MQTT Broker and web client - Community Hass.io Add-on for Home Assistant</span>
+    </div>
+</div>
+<div id="content" class="row">
+<div id="connection" class="row large-12 columns">
+
+    <div class="large-8 columns conniTop">
+        <h3>Connection</h3>
+    </div>
+
+    <div class="large-1 columns conniStatus">
+        <div id="connectionStatus"></div>
+    </div>
+
+    <div class="large-2 columns conniArrow">
+        <a class="small bottom conniArrow" onclick="websocketclient.render.toggle('conni');">
+            <div class="icon-arrow-chevron"></div>
+        </a>
+    </div>
+    <div class="large-12 columns" id="conniMain">
+        <div class="panel">
+            <div class="row">
+                <form class="custom">
+                    <div class="large-5 columns">
+                        <label>Broker IP or hostname *</label>
+                        <input id="urlInput" type="text" value="Hass.io IP address">
+                    </div>
+
+                    <div class="large-1 columns">
+                        <label>Port *</label>
+                        <input id="portInput" type="text" value="1884"/>
+                    </div>
+
+                    <div class="large-4 columns">
+                        <label>ClientID *</label>
+                        <input id="clientIdInput" type="text"/>
+                    </div>
+
+                    <div class="large-2 columns">
+                        <a id="connectButton" class="small button" onclick="websocketclient.connect();">Connect</a>
+                    </div>
+
+                    <div class="large-2 columns">
+                        <a id="disconnectButton" class="small button"
+                           onclick="websocketclient.disconnect();">Disconnect</a>
+                    </div>
+
+                    <div class="large-4 columns">
+                        <label>Username</label>
+                        <input id="userInput" type="text"/>
+                    </div>
+
+                    <div class="large-3 columns">
+                        <label>Password</label>
+                        <input id="pwInput" type="password"/>
+                    </div>
+
+                    <div class="large-2 columns">
+                        <label>Keep Alive</label>
+                        <input id="keepAliveInput" type="text" value="60"/>
+                    </div>
+
+                    <div class="large-1 columns">
+                        <label>SSL</label>
+                        <input id="sslInput" type="checkbox" %%SSL_VALUE%%/>
+                    </div>
+
+                    <div class="large-2 columns" style="display: none;">
+                        <label>Clean Session</label>
+                        <input class="checky" id="cleanSessionInput" type="checkbox" checked="checked"
+                               disabled="disabled"/>
+                    </div>
+
+                    <div class="large-8 columns" style="display: none;">
+                        <label>Last-Will Topic</label>
+                        <input id="lwTopicInput" type="text"/>
+                    </div>
+
+                    <div class="large-2 columns" style="display: none;">
+                        <label>Last-Will QoS</label>
+                        <select id="lwQosInput">
+                            <option>0</option>
+                            <option>1</option>
+                            <option>2</option>
+                        </select>
+                    </div>
+
+                    <div class="large-2 columns" style="display: none;">
+                        <label>Last-Will Retain</label>
+                        <input class="checky" id="LWRInput" type="checkbox"/>
+                    </div>
+
+                    <div class="large-12 columns" style="display: none;">
+                        <label>Last-Will Messsage</label>
+                        <textarea id="LWMInput"></textarea>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="empty"></div>
+<div id="publish-sub" class="row large-12 columns">
+    <div class="columns large-8">
+        <div class="large-9 columns publishTop">
+            <h3>Publish</h3>
+        </div>
+
+        <div class="large-3 columns publishArrow">
+            <a class="small bottom publishArrow" onclick="websocketclient.render.toggle('publish');">
+                <div class="icon-arrow-chevron"></div>
+            </a>
+        </div>
+
+        <div class="large-12 columns" id="publishMain">
+
+            <!-- Grid Example -->
+            <div class="row panel" id="publishPanel">
+                <div class="large-12 columns">
+                    <form class="custom">
+                        <div class="row">
+                            <div class="large-6 columns">
+                                <label>Topic</label>
+                                <input id="publishTopic" type="text" value="test_topic/">
+                            </div>
+                            <div class="large-2 columns">
+                                <label for="publishQoSInput">QoS</label>
+                                <select id="publishQoSInput" class="small">
+                                    <option>0</option>
+                                    <option>1</option>
+                                    <option>2</option>
+                                </select>
+                            </div>
+                            <div class="large-2 columns">
+                                <label>Retain</label>
+                                <input id="publishRetain" type="checkbox">
+                            </div>
+                            <div class="large-2 columns">
+                                <a class="small button" id="publishButton"
+                                   onclick="websocketclient.publish($('#publishTopic').val(),$('#publishPayload').val(),parseInt($('#publishQoSInput').val(),10),$('#publishRetain').is(':checked'))">Publish</a>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="large-12 columns">
+                                <label>Message</label>
+                                <textarea id="publishPayload"></textarea>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <div class="empty"></div>
+        <div class="large-9 columns messagesTop">
+            <h3>Messages</h3>
+        </div>
+
+        <div class="large-3 columns messagesArrow">
+            <a class="small bottom messagesArrow" onclick="websocketclient.render.toggle('messages');">
+                <div class="icon-arrow-chevron"></div>
+            </a>
+        </div>
+
+        <div class="large-12 columns" id="messagesMain">
+
+            <!-- Grid Example -->
+            <div class="row panel">
+                <div class="large-12 columns">
+                    <form class="custom">
+                        <!--<div class="row">-->
+                        <!--<div class="large-10 columns">-->
+                        <!--<label>Filter</label>-->
+                        <!--<input id="filterString" type="text">-->
+                        <!--</div>-->
+
+                        <!--<div class="large-2 columns">-->
+                        <!--<a class="small button" id="filterButton"-->
+                        <!--onclick="websocketclient.filter($('#filterString').val())">Filter</a>-->
+                        <!--</div>-->
+                        <!--</div>-->
+
+                    </form>
+                    <div class="row">
+                        <ul id="messEdit" class="disc">
+
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+    <div class="columns large-4">
+
+        <div class="large-8 columns subTop">
+            <h3>Subscriptions</h3>
+        </div>
+
+        <div class="large-3 columns subArrow">
+            <a class="small bottom subArrow" onclick="websocketclient.render.toggle('sub');">
+                <div class="icon-arrow-chevron"></div>
+            </a>
+        </div>
+        <div class="large-12 columns" id="subMain">
+            <div class="row panel">
+                <div class="large-12 columns">
+
+                    <a id="addSubButton" href="#data" class="small button addSubButton">Add New Topic Subscription</a>
+
+                    <div style="display:none">
+                        <div id="data">
+                            <form class="custom">
+                                <div class="row large-12 columns">
+                                    <div class="large-4 columns">
+                                        <label>Color</label>
+                                        <input class="color" id="colorChooser" type="hidden">
+                                    </div>
+                                    <div class="large-5 columns">
+                                        <label for="QoSInput">QoS</label>
+                                        <select id="QoSInput" class="small">
+                                            <option>2</option>
+                                            <option>1</option>
+                                            <option>0</option>
+                                        </select>
+                                    </div>
+                                    <div class="large-3 columns">
+                                        <a class="small button" id="subscribeButton"
+                                           onclick="if(websocketclient.subscribe($('#subscribeTopic').val(),parseInt($('#QoSInput').val()),$('#colorChooser').val().substring(1))){$.fancybox.close();}">Subscribe</a>
+                                    </div>
+                                </div>
+                                <div class="row large-12 columns">
+                                    <div class="large-12 columns">
+                                        <label>Topic</label>
+                                        <input id="subscribeTopic" type="text" value="#">
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+
+                    <ul id="innerEdit" class="disc">
+
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</div>
+
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
+<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.min.js"></script>
+<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
+
+<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/4.2.3/js/foundation.min.js"></script>
+<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/4.2.3/js/foundation/foundation.forms.min.js"></script>
+<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
+<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
+<script src="js/jquery.minicolors.min.js"></script>
+<script src="js/mqttws31.js"></script>
+<script src="js/encoder.js"></script>
+<script src="js/app.js"></script>
+<script src="config.js"></script>
+
+<script>
+    $(document).foundation();
+    $(document).ready(function () {
+
+        $('#urlInput').val(websocketserver);
+        $('#portInput').val(websocketport);
+        $('#clientIdInput').val('hassio-mqtt-client');
+
+        $('#colorChooser').minicolors();
+
+        $("#addSubButton").fancybox({
+            'afterShow': function () {
+                var rndColor = websocketclient.getRandomColor();
+                $("#colorChooser").minicolors('value', rndColor);
+            }
+        });
+
+        websocketclient.render.toggle('publish');
+        websocketclient.render.toggle('messages');
+        websocketclient.render.toggle('sub');
+    });
+</script>
+
+<div style="right: 2%;bottom: 2%;position: fixed;display:  block;background-color: #f2f2f2;padding: 8px;">
+    <a href="https://www.buymeacoffee.com/ludeeus" target="_blank"> <i class="fa fa-coffee" style="margin-right: 10px;"></i>Buy Me A Coffee!</a>
+</div>
+</body>
+</html>
--- a/mqtt/rootfs/app/js/app.js
+++ b/mqtt/rootfs/app/js/app.js
@ -0,0 +1,342 @@
+/**
+ * Copyright 2013 dc-square GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @author: Christoph Schäbel
+ */
+
+var websocketclient = {
+    'client': null,
+    'lastMessageId': 1,
+    'lastSubId': 1,
+    'subscriptions': [],
+    'messages': [],
+    'connected': false,
+
+    'connect': function () {
+
+        var host = $('#urlInput').val();
+        var port = parseInt($('#portInput').val(), 10);
+        var clientId = $('#clientIdInput').val();
+        var username = $('#userInput').val();
+        var password = $('#pwInput').val();
+        var keepAlive = parseInt($('#keepAliveInput').val());
+        var cleanSession = $('#cleanSessionInput').is(':checked');
+        var lwTopic = $('#lwTopicInput').val();
+        var lwQos = parseInt($('#lwQosInput').val());
+        var lwRetain = $('#LWRInput').is(':checked');
+        var lwMessage = $('#LWMInput').val();
+        var ssl = $('#sslInput').is(':checked');
+
+        this.client = new Messaging.Client(host, port, clientId);
+        this.client.onConnectionLost = this.onConnectionLost;
+        this.client.onMessageArrived = this.onMessageArrived;
+
+        var options = {
+            timeout: 3,
+            keepAliveInterval: keepAlive,
+            cleanSession: cleanSession,
+            useSSL: ssl,
+            onSuccess: this.onConnect,
+            onFailure: this.onFail
+        };
+
+        if (username.length > 0) {
+            options.userName = username;
+        }
+        if (password.length > 0) {
+            options.password = password;
+        }
+        if (lwTopic.length > 0) {
+            var willmsg = new Messaging.Message(lwMessage);
+            willmsg.qos = lwQos;
+            willmsg.destinationName = lwTopic;
+            willmsg.retained = lwRetain;
+            options.willMessage = willmsg;
+        }
+
+        this.client.connect(options);
+    },
+
+    'onConnect': function () {
+        websocketclient.connected = true;
+        console.log("connected");
+        var body = $('body').addClass('connected').removeClass('notconnected').removeClass('connectionbroke');
+
+        websocketclient.render.hide('conni');
+        websocketclient.render.show('publish');
+        websocketclient.render.show('sub');
+        websocketclient.render.show('messages');
+    },
+
+    'onFail': function (message) {
+        websocketclient.connected = false;
+        console.log("error: " + message.errorMessage);
+        websocketclient.render.showError('Connect failed: ' + message.errorMessage);
+    },
+
+    'onConnectionLost': function (responseObject) {
+        websocketclient.connected = false;
+        if (responseObject.errorCode !== 0) {
+            console.log("onConnectionLost:" + responseObject.errorMessage);
+        }
+        $('body.connected').removeClass('connected').addClass('notconnected').addClass('connectionbroke');
+        websocketclient.render.show('conni');
+        websocketclient.render.hide('publish');
+        websocketclient.render.hide('sub');
+        websocketclient.render.hide('messages');
+
+        //Cleanup messages
+        websocketclient.messages = [];
+        websocketclient.render.clearMessages();
+
+        //Cleanup subscriptions
+        websocketclient.subscriptions = [];
+        websocketclient.render.clearSubscriptions();
+    },
+
+    'onMessageArrived': function (message) {
+//        console.log("onMessageArrived:" + message.payloadString + " qos: " + message.qos);
+
+        var subscription = websocketclient.getSubscriptionForTopic(message.destinationName);
+
+        var messageObj = {
+            'topic': message.destinationName,
+            'retained': message.retained,
+            'qos': message.qos,
+            'payload': message.payloadString,
+            'timestamp': moment(),
+            'subscriptionId': subscription.id,
+            'color': websocketclient.getColorForSubscription(subscription.id)
+        };
+
+        console.log(messageObj);
+        messageObj.id = websocketclient.render.message(messageObj);
+        websocketclient.messages.push(messageObj);
+    },
+
+    'disconnect': function () {
+        this.client.disconnect();
+    },
+
+    'publish': function (topic, payload, qos, retain) {
+
+        if (!websocketclient.connected) {
+            websocketclient.render.showError("Not connected");
+            return false;
+        }
+
+        var message = new Messaging.Message(payload);
+        message.destinationName = topic;
+        message.qos = qos;
+        message.retained = retain;
+        this.client.send(message);
+    },
+
+    'subscribe': function (topic, qosNr, color) {
+
+        if (!websocketclient.connected) {
+            websocketclient.render.showError("Not connected");
+            return false;
+        }
+
+        if (topic.length < 1) {
+            websocketclient.render.showError("Topic cannot be empty");
+            return false;
+        }
+
+        if (_.find(this.subscriptions, { 'topic': topic })) {
+            websocketclient.render.showError('You are already subscribed to this topic');
+            return false;
+        }
+
+        this.client.subscribe(topic, {qos: qosNr});
+        if (color.length < 1) {
+            color = '999999';
+        }
+
+        var subscription = {'topic': topic, 'qos': qosNr, 'color': color};
+        subscription.id = websocketclient.render.subscription(subscription);
+        this.subscriptions.push(subscription);
+        return true;
+    },
+
+    'unsubscribe': function (id) {
+        var subs = _.find(websocketclient.subscriptions, {'id': id});
+        this.client.unsubscribe(subs.topic);
+        websocketclient.subscriptions = _.filter(websocketclient.subscriptions, function (item) {
+            return item.id != id;
+        });
+
+        websocketclient.render.removeSubscriptionsMessages(id);
+    },
+
+    'deleteSubscription': function (id) {
+        var elem = $("#sub" + id);
+
+        if (confirm('Are you sure ?')) {
+            elem.remove();
+            this.unsubscribe(id);
+        }
+    },
+
+    'getRandomColor': function () {
+        var r = (Math.round(Math.random() * 255)).toString(16);
+        var g = (Math.round(Math.random() * 255)).toString(16);
+        var b = (Math.round(Math.random() * 255)).toString(16);
+        return r + g + b;
+    },
+
+    'getSubscriptionForTopic': function (topic) {
+        var i;
+        for (i = 0; i < this.subscriptions.length; i++) {
+            if (this.compareTopics(topic, this.subscriptions[i].topic)) {
+                return this.subscriptions[i];
+            }
+        }
+        return false;
+    },
+
+    'getColorForPublishTopic': function (topic) {
+        var id = this.getSubscriptionForTopic(topic);
+        return this.getColorForSubscription(id);
+    },
+
+    'getColorForSubscription': function (id) {
+        try {
+            if (!id) {
+                return '99999';
+            }
+
+            var sub = _.find(this.subscriptions, { 'id': id });
+            if (!sub) {
+                return '999999';
+            } else {
+                return sub.color;
+            }
+        } catch (e) {
+            return '999999';
+        }
+    },
+
+    'compareTopics': function (topic, subTopic) {
+        var pattern = subTopic.replace("+", "(.+?)").replace("#", "(.*)");
+        var regex = new RegExp("^" + pattern + "$");
+        return regex.test(topic);
+    },
+
+    'render': {
+
+        'showError': function (message) {
+            alert(message);
+        },
+        'messages': function () {
+
+            websocketclient.render.clearMessages();
+            _.forEach(websocketclient.messages, function (message) {
+                message.id = websocketclient.render.message(message);
+            });
+
+        },
+        'message': function (message) {
+
+            var largest = websocketclient.lastMessageId++;
+
+            var html = '<li class="messLine id="' + largest + '">' +
+                '   <div class="row large-12 mess' + largest + '" style="border-left: solid 10px #' + message.color + '; ">' +
+                '       <div class="large-12 columns messageText">' +
+                '           <div class="large-3 columns date">' + message.timestamp.format("YYYY-MM-DD HH:mm:ss") + '</div>' +
+                '           <div class="large-5 columns topicM truncate" id="topicM' + largest + '" title="' + Encoder.htmlEncode(message.topic, 0) + '">Topic: ' + Encoder.htmlEncode(message.topic) + '</div>' +
+                '           <div class="large-2 columns qos">Qos: ' + message.qos + '</div>' +
+                '           <div class="large-2 columns retain">';
+            if (message.retained) {
+                html += 'Retained';
+            }
+            html += '           </div>' +
+                '           <div class="large-12 columns message break-words">' + Encoder.htmlEncode(message.payload) + '</div>' +
+                '       </div>' +
+                '   </div>' +
+                '</li>';
+            $("#messEdit").prepend(html);
+            return largest;
+        },
+
+        'subscriptions': function () {
+            websocketclient.render.clearSubscriptions();
+            _.forEach(websocketclient.subscriptions, function (subs) {
+                subs.id = websocketclient.render.subscription(subs);
+            });
+        },
+
+        'subscription': function (subscription) {
+            var largest = websocketclient.lastSubId++;
+            $("#innerEdit").append(
+                '<li class="subLine" id="sub' + largest + '">' +
+                    '   <div class="row large-12 subs' + largest + '" style="border-left: solid 10px #' + subscription.color + '; background-color: #ffffff">' +
+                    '       <div class="large-12 columns subText">' +
+                    '           <div class="large-1 columns right closer">' +
+                    '              <a href="#" onclick="websocketclient.deleteSubscription(' + largest + '); return false;">x</a>' +
+                    '           </div>' +
+                    '           <div class="qos">Qos: ' + subscription.qos + '</div>' +
+                    '           <div class="topic truncate" id="topic' + largest + '" title="' + Encoder.htmlEncode(subscription.topic, 0) + '">' + Encoder.htmlEncode(subscription.topic) + '</div>' +
+                    '       </div>' +
+                    '   </div>' +
+                    '</li>');
+            return largest;
+        },
+
+        'toggleAll': function () {
+            websocketclient.render.toggle('conni');
+            websocketclient.render.toggle('publish');
+            websocketclient.render.toggle('messages');
+            websocketclient.render.toggle('sub');
+        },
+
+        'toggle': function (name) {
+            $('.' + name + 'Arrow').toggleClass("closed");
+            $('.' + name + 'Top').toggleClass("closed");
+            var elem = $('#' + name + 'Main');
+            elem.slideToggle();
+        },
+
+        'hide': function (name) {
+            $('.' + name + 'Arrow').addClass("closed");
+            $('.' + name + 'Top').addClass("closed");
+            var elem = $('#' + name + 'Main');
+            elem.slideUp();
+        },
+
+        'show': function (name) {
+            $('.' + name + 'Arrow').removeClass("closed");
+            $('.' + name + 'Top').removeClass("closed");
+            var elem = $('#' + name + 'Main');
+            elem.slideDown();
+        },
+
+        'removeSubscriptionsMessages': function (id) {
+            websocketclient.messages = _.filter(websocketclient.messages, function (item) {
+                return item.subscriptionId != id;
+            });
+            websocketclient.render.messages();
+        },
+
+        'clearMessages': function () {
+            $("#messEdit").empty();
+        },
+
+        'clearSubscriptions': function () {
+            $("#innerEdit").empty();
+        }
+    }
+};
--- a/mqtt/rootfs/app/js/arrow.gif
+++ b/mqtt/rootfs/app/js/arrow.gif
--- a/mqtt/rootfs/app/js/cross.gif
+++ b/mqtt/rootfs/app/js/cross.gif
--- a/mqtt/rootfs/app/js/encoder.js
+++ b/mqtt/rootfs/app/js/encoder.js
@ -0,0 +1,243 @@
+/**
+ * A Javascript object to encode and/or decode html characters using HTML or Numeric entities that handles double or partial encoding
+ * Author: R Reid
+ * source: http://www.strictly-software.com/htmlencode
+ * Licences: GPL, The MIT License (MIT)
+ * Copyright: (c) 2011 Robert Reid - Strictly-Software.com
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * Revision:
+ *  2011-07-14, Jacques-Yves Bleau:
+ *       - fixed conversion error with capitalized accentuated characters
+ *       + converted arr1 and arr2 to object property to remove redundancy
+ *
+ * Revision:
+ *  2011-11-10, Ce-Yi Hio:
+ *       - fixed conversion error with a number of capitalized entity characters
+ *
+ * Revision:
+ *  2011-11-10, Rob Reid:
+ *         - changed array format
+ *
+ * Revision:
+ *  2012-09-23, Alex Oss:
+ *         - replaced string concatonation in numEncode with string builder, push and join for peformance with ammendments by Rob Reid
+ */
+
+Encoder = {
+
+    // When encoding do we convert characters into html or numerical entities
+    EncodeType: "entity",  // entity OR numerical
+
+    isEmpty: function (val) {
+        if (val) {
+            return ((val === null) || val.length == 0 || /^\s+$/.test(val));
+        } else {
+            return true;
+        }
+    },
+
+    // arrays for conversion from HTML Entities to Numerical values
+    arr1: ['&nbsp;', '&iexcl;', '&cent;', '&pound;', '&curren;', '&yen;', '&brvbar;', '&sect;', '&uml;', '&copy;', '&ordf;', '&laquo;', '&not;', '&shy;', '&reg;', '&macr;', '&deg;', '&plusmn;', '&sup2;', '&sup3;', '&acute;', '&micro;', '&para;', '&middot;', '&cedil;', '&sup1;', '&ordm;', '&raquo;', '&frac14;', '&frac12;', '&frac34;', '&iquest;', '&Agrave;', '&Aacute;', '&Acirc;', '&Atilde;', '&Auml;', '&Aring;', '&AElig;', '&Ccedil;', '&Egrave;', '&Eacute;', '&Ecirc;', '&Euml;', '&Igrave;', '&Iacute;', '&Icirc;', '&Iuml;', '&ETH;', '&Ntilde;', '&Ograve;', '&Oacute;', '&Ocirc;', '&Otilde;', '&Ouml;', '&times;', '&Oslash;', '&Ugrave;', '&Uacute;', '&Ucirc;', '&Uuml;', '&Yacute;', '&THORN;', '&szlig;', '&agrave;', '&aacute;', '&acirc;', '&atilde;', '&auml;', '&aring;', '&aelig;', '&ccedil;', '&egrave;', '&eacute;', '&ecirc;', '&euml;', '&igrave;', '&iacute;', '&icirc;', '&iuml;', '&eth;', '&ntilde;', '&ograve;', '&oacute;', '&ocirc;', '&otilde;', '&ouml;', '&divide;', '&oslash;', '&ugrave;', '&uacute;', '&ucirc;', '&uuml;', '&yacute;', '&thorn;', '&yuml;', '&quot;', '&amp;', '&lt;', '&gt;', '&OElig;', '&oelig;', '&Scaron;', '&scaron;', '&Yuml;', '&circ;', '&tilde;', '&ensp;', '&emsp;', '&thinsp;', '&zwnj;', '&zwj;', '&lrm;', '&rlm;', '&ndash;', '&mdash;', '&lsquo;', '&rsquo;', '&sbquo;', '&ldquo;', '&rdquo;', '&bdquo;', '&dagger;', '&Dagger;', '&permil;', '&lsaquo;', '&rsaquo;', '&euro;', '&fnof;', '&Alpha;', '&Beta;', '&Gamma;', '&Delta;', '&Epsilon;', '&Zeta;', '&Eta;', '&Theta;', '&Iota;', '&Kappa;', '&Lambda;', '&Mu;', '&Nu;', '&Xi;', '&Omicron;', '&Pi;', '&Rho;', '&Sigma;', '&Tau;', '&Upsilon;', '&Phi;', '&Chi;', '&Psi;', '&Omega;', '&alpha;', '&beta;', '&gamma;', '&delta;', '&epsilon;', '&zeta;', '&eta;', '&theta;', '&iota;', '&kappa;', '&lambda;', '&mu;', '&nu;', '&xi;', '&omicron;', '&pi;', '&rho;', '&sigmaf;', '&sigma;', '&tau;', '&upsilon;', '&phi;', '&chi;', '&psi;', '&omega;', '&thetasym;', '&upsih;', '&piv;', '&bull;', '&hellip;', '&prime;', '&Prime;', '&oline;', '&frasl;', '&weierp;', '&image;', '&real;', '&trade;', '&alefsym;', '&larr;', '&uarr;', '&rarr;', '&darr;', '&harr;', '&crarr;', '&lArr;', '&uArr;', '&rArr;', '&dArr;', '&hArr;', '&forall;', '&part;', '&exist;', '&empty;', '&nabla;', '&isin;', '&notin;', '&ni;', '&prod;', '&sum;', '&minus;', '&lowast;', '&radic;', '&prop;', '&infin;', '&ang;', '&and;', '&or;', '&cap;', '&cup;', '&int;', '&there4;', '&sim;', '&cong;', '&asymp;', '&ne;', '&equiv;', '&le;', '&ge;', '&sub;', '&sup;', '&nsub;', '&sube;', '&supe;', '&oplus;', '&otimes;', '&perp;', '&sdot;', '&lceil;', '&rceil;', '&lfloor;', '&rfloor;', '&lang;', '&rang;', '&loz;', '&spades;', '&clubs;', '&hearts;', '&diams;'],
+    arr2: ['&#160;', '&#161;', '&#162;', '&#163;', '&#164;', '&#165;', '&#166;', '&#167;', '&#168;', '&#169;', '&#170;', '&#171;', '&#172;', '&#173;', '&#174;', '&#175;', '&#176;', '&#177;', '&#178;', '&#179;', '&#180;', '&#181;', '&#182;', '&#183;', '&#184;', '&#185;', '&#186;', '&#187;', '&#188;', '&#189;', '&#190;', '&#191;', '&#192;', '&#193;', '&#194;', '&#195;', '&#196;', '&#197;', '&#198;', '&#199;', '&#200;', '&#201;', '&#202;', '&#203;', '&#204;', '&#205;', '&#206;', '&#207;', '&#208;', '&#209;', '&#210;', '&#211;', '&#212;', '&#213;', '&#214;', '&#215;', '&#216;', '&#217;', '&#218;', '&#219;', '&#220;', '&#221;', '&#222;', '&#223;', '&#224;', '&#225;', '&#226;', '&#227;', '&#228;', '&#229;', '&#230;', '&#231;', '&#232;', '&#233;', '&#234;', '&#235;', '&#236;', '&#237;', '&#238;', '&#239;', '&#240;', '&#241;', '&#242;', '&#243;', '&#244;', '&#245;', '&#246;', '&#247;', '&#248;', '&#249;', '&#250;', '&#251;', '&#252;', '&#253;', '&#254;', '&#255;', '&#34;', '&#38;', '&#60;', '&#62;', '&#338;', '&#339;', '&#352;', '&#353;', '&#376;', '&#710;', '&#732;', '&#8194;', '&#8195;', '&#8201;', '&#8204;', '&#8205;', '&#8206;', '&#8207;', '&#8211;', '&#8212;', '&#8216;', '&#8217;', '&#8218;', '&#8220;', '&#8221;', '&#8222;', '&#8224;', '&#8225;', '&#8240;', '&#8249;', '&#8250;', '&#8364;', '&#402;', '&#913;', '&#914;', '&#915;', '&#916;', '&#917;', '&#918;', '&#919;', '&#920;', '&#921;', '&#922;', '&#923;', '&#924;', '&#925;', '&#926;', '&#927;', '&#928;', '&#929;', '&#931;', '&#932;', '&#933;', '&#934;', '&#935;', '&#936;', '&#937;', '&#945;', '&#946;', '&#947;', '&#948;', '&#949;', '&#950;', '&#951;', '&#952;', '&#953;', '&#954;', '&#955;', '&#956;', '&#957;', '&#958;', '&#959;', '&#960;', '&#961;', '&#962;', '&#963;', '&#964;', '&#965;', '&#966;', '&#967;', '&#968;', '&#969;', '&#977;', '&#978;', '&#982;', '&#8226;', '&#8230;', '&#8242;', '&#8243;', '&#8254;', '&#8260;', '&#8472;', '&#8465;', '&#8476;', '&#8482;', '&#8501;', '&#8592;', '&#8593;', '&#8594;', '&#8595;', '&#8596;', '&#8629;', '&#8656;', '&#8657;', '&#8658;', '&#8659;', '&#8660;', '&#8704;', '&#8706;', '&#8707;', '&#8709;', '&#8711;', '&#8712;', '&#8713;', '&#8715;', '&#8719;', '&#8721;', '&#8722;', '&#8727;', '&#8730;', '&#8733;', '&#8734;', '&#8736;', '&#8743;', '&#8744;', '&#8745;', '&#8746;', '&#8747;', '&#8756;', '&#8764;', '&#8773;', '&#8776;', '&#8800;', '&#8801;', '&#8804;', '&#8805;', '&#8834;', '&#8835;', '&#8836;', '&#8838;', '&#8839;', '&#8853;', '&#8855;', '&#8869;', '&#8901;', '&#8968;', '&#8969;', '&#8970;', '&#8971;', '&#9001;', '&#9002;', '&#9674;', '&#9824;', '&#9827;', '&#9829;', '&#9830;'],
+
+    // Convert HTML entities into numerical entities
+    HTML2Numerical: function (s) {
+        return this.swapArrayVals(s, this.arr1, this.arr2);
+    },
+
+    // Convert Numerical entities into HTML entities
+    NumericalToHTML: function (s) {
+        return this.swapArrayVals(s, this.arr2, this.arr1);
+    },
+
+
+    // Numerically encodes all unicode characters
+    numEncode: function (s) {
+        if (this.isEmpty(s)) return "";
+
+        var a = [],
+            l = s.length;
+
+        for (var i = 0; i < l; i++) {
+            var c = s.charAt(i);
+            if (c < " " || c > "~") {
+                a.push("&#");
+                a.push(c.charCodeAt()); //numeric value of code point
+                a.push(";");
+            } else {
+                a.push(c);
+            }
+        }
+
+        return a.join("");
+    },
+
+    // HTML Decode numerical and HTML entities back to original values
+    htmlDecode: function (s) {
+
+        var c, m, d = s;
+
+        if (this.isEmpty(d)) return "";
+
+        // convert HTML entites back to numerical entites first
+        d = this.HTML2Numerical(d);
+
+        // look for numerical entities &#34;
+        arr = d.match(/&#[0-9]{1,5};/g);
+
+        // if no matches found in string then skip
+        if (arr != null) {
+            for (var x = 0; x < arr.length; x++) {
+                m = arr[x];
+                c = m.substring(2, m.length - 1); //get numeric part which is refernce to unicode character
+                // if its a valid number we can decode
+                if (c >= -32768 && c <= 65535) {
+                    // decode every single match within string
+                    d = d.replace(m, String.fromCharCode(c));
+                } else {
+                    d = d.replace(m, ""); //invalid so replace with nada
+                }
+            }
+        }
+
+        return d;
+    },
+
+    // encode an input string into either numerical or HTML entities
+    htmlEncode: function (s, dbl) {
+
+        if (this.isEmpty(s)) return "";
+
+        // do we allow double encoding? E.g will &amp; be turned into &amp;amp;
+        dbl = dbl || false; //default to prevent double encoding
+
+        // if allowing double encoding we do ampersands first
+        if (dbl) {
+            if (this.EncodeType == "numerical") {
+                s = s.replace(/&/g, "&#38;");
+            } else {
+                s = s.replace(/&/g, "&amp;");
+            }
+        }
+
+        // convert the xss chars to numerical entities ' " < >
+        s = this.XSSEncode(s, false);
+
+        if (this.EncodeType == "numerical" || !dbl) {
+            // Now call function that will convert any HTML entities to numerical codes
+            s = this.HTML2Numerical(s);
+        }
+
+        // Now encode all chars above 127 e.g unicode
+        s = this.numEncode(s);
+
+        // now we know anything that needs to be encoded has been converted to numerical entities we
+        // can encode any ampersands & that are not part of encoded entities
+        // to handle the fact that I need to do a negative check and handle multiple ampersands &&&
+        // I am going to use a placeholder
+
+        // if we don't want double encoded entities we ignore the & in existing entities
+        if (!dbl) {
+            s = s.replace(/&#/g, "##AMPHASH##");
+
+            if (this.EncodeType == "numerical") {
+                s = s.replace(/&/g, "&#38;");
+            } else {
+                s = s.replace(/&/g, "&amp;");
+            }
+
+            s = s.replace(/##AMPHASH##/g, "&#");
+        }
+
+        // replace any malformed entities
+        s = s.replace(/&#\d*([^\d;]|$)/g, "$1");
+
+        if (!dbl) {
+            // safety check to correct any double encoded &amp;
+            s = this.correctEncoding(s);
+        }
+
+        // now do we need to convert our numerical encoded string into entities
+        if (this.EncodeType == "entity") {
+            s = this.NumericalToHTML(s);
+        }
+
+        return s;
+    },
+
+    // Encodes the basic 4 characters used to malform HTML in XSS hacks
+    XSSEncode: function (s, en) {
+        if (!this.isEmpty(s)) {
+            en = en || true;
+            // do we convert to numerical or html entity?
+            if (en) {
+                s = s.replace(/\'/g, "&#39;"); //no HTML equivalent as &apos is not cross browser supported
+                s = s.replace(/\"/g, "&quot;");
+                s = s.replace(/</g, "&lt;");
+                s = s.replace(/>/g, "&gt;");
+            } else {
+                s = s.replace(/\'/g, "&#39;"); //no HTML equivalent as &apos is not cross browser supported
+                s = s.replace(/\"/g, "&#34;");
+                s = s.replace(/</g, "&#60;");
+                s = s.replace(/>/g, "&#62;");
+            }
+            return s;
+        } else {
+            return "";
+        }
+    },
+
+    // returns true if a string contains html or numerical encoded entities
+    hasEncoded: function (s) {
+        if (/&#[0-9]{1,5};/g.test(s)) {
+            return true;
+        } else if (/&[A-Z]{2,6};/gi.test(s)) {
+            return true;
+        } else {
+            return false;
+        }
+    },
+
+    // will remove any unicode characters
+    stripUnicode: function (s) {
+        return s.replace(/[^\x20-\x7E]/g, "");
+
+    },
+
+    // corrects any double encoded &amp; entities e.g &amp;amp;
+    correctEncoding: function (s) {
+        return s.replace(/(&amp;)(amp;)+/, "$1");
+    },
+
+
+    // Function to loop through an array swaping each item with the value from another array e.g swap HTML entities with Numericals
+    swapArrayVals: function (s, arr1, arr2) {
+        if (this.isEmpty(s)) return "";
+        var re;
+        if (arr1 && arr2) {
+            //ShowDebug("in swapArrayVals arr1.length = " + arr1.length + " arr2.length = " + arr2.length)
+            // array lengths must match
+            if (arr1.length == arr2.length) {
+                for (var x = 0, i = arr1.length; x < i; x++) {
+                    re = new RegExp(arr1[x], 'g');
+                    s = s.replace(re, arr2[x]); //swap arr1 item with matching item from arr2
+                }
+            }
+        }
+        return s;
+    },
+
+    inArray: function (item, arr) {
+        for (var i = 0, x = arr.length; i < x; i++) {
+            if (arr[i] === item) {
+                return i;
+            }
+        }
+        return -1;
+    }
+
+}
--- a/mqtt/rootfs/app/js/hs.png
+++ b/mqtt/rootfs/app/js/hs.png
--- a/mqtt/rootfs/app/js/hv.png
+++ b/mqtt/rootfs/app/js/hv.png
--- a/mqtt/rootfs/app/js/jquery.minicolors.min.js
+++ b/mqtt/rootfs/app/js/jquery.minicolors.min.js
--- a/mqtt/rootfs/app/js/mqttws31.js
+++ b/mqtt/rootfs/app/js/mqttws31.js
--- a/mqtt/rootfs/etc/apk/repositories
+++ b/mqtt/rootfs/etc/apk/repositories
@ -0,0 +1,4 @@
+http://dl-cdn.alpinelinux.org/alpine/v3.7/main
+http://dl-cdn.alpinelinux.org/alpine/v3.7/community
+http://dl-cdn.alpinelinux.org/alpine/v3.8/main
+http://dl-cdn.alpinelinux.org/alpine/v3.8/community
--- a/mqtt/rootfs/etc/cont-init.d/10-requirements.sh
+++ b/mqtt/rootfs/etc/cont-init.d/10-requirements.sh
@ -0,0 +1,82 @@
+#!/usr/bin/with-contenv bash
+# ==============================================================================
+# Community Hass.io Add-ons: MQTT Broker & Web client
+# This files check if all user configuration requirements are met
+# ==============================================================================
+# shellcheck disable=SC1091
+source /usr/lib/hassio-addons/base.sh
+
+# Checks for web client
+if hass.config.true 'web.enabled'; then
+    # Require username / password
+    if ! hass.config.has_value 'web.username' \
+        && ! ( \
+            hass.config.exists 'leave_front_door_open' \
+            && hass.config.true 'leave_front_door_open' \
+        );
+    then
+        hass.die 'You need to set a username!'
+    fi
+    
+    if ! hass.config.has_value 'web.password' \
+        && ! ( \
+            hass.config.exists 'leave_front_door_open' \
+            && hass.config.true 'leave_front_door_open' \
+        );
+    then
+        hass.die 'You need to set a password!';
+    fi
+    
+    # Require a secure password
+    if hass.config.has_value 'web.password' \
+        && ! hass.config.is_safe_password 'web.password'; then
+        hass.die "Please choose a different password, this one is unsafe!"
+    fi
+fi
+
+# Checks for broker
+if hass.config.true 'broker.enabled'; then
+    # Require username / password
+    if ! hass.config.has_value 'broker.username' \
+        && ! ( \
+            hass.config.exists 'leave_front_door_open' \
+            && hass.config.true 'leave_front_door_open' \
+        );
+    then
+        hass.die 'You need to set a username!'
+    fi
+    
+    if ! hass.config.has_value 'broker.password' \
+        && ! ( \
+            hass.config.exists 'leave_front_door_open' \
+            && hass.config.true 'leave_front_door_open' \
+        );
+    then
+        hass.die 'You need to set a password!';
+    fi
+    
+    # Require a secure password
+    if hass.config.has_value 'broker.password' \
+        && ! hass.config.is_safe_password 'broker.password'; then
+        hass.die "Please choose a different password, this one is unsafe!"
+    fi
+fi
+
+# Check SSL requirements, if enabled
+if hass.config.true 'broker.ssl' || hass.config.true 'web.ssl'; then
+    if ! hass.config.has_value 'certfile'; then
+        hass.die 'SSL is enabled, but no certfile was specified'
+    fi
+
+    if ! hass.config.has_value 'keyfile'; then
+        hass.die 'SSL is enabled, but no keyfile was specified'
+    fi
+
+    if ! hass.file_exists "/ssl/$(hass.config.get 'certfile')"; then
+        hass.die 'The configured certfile is not found'
+    fi
+
+    if ! hass.file_exists "/ssl/$(hass.config.get 'keyfile')"; then
+        hass.die 'The configured keyfile is not found'
+    fi
+fi
--- a/mqtt/rootfs/etc/cont-init.d/20-mqtt_broker.sh
+++ b/mqtt/rootfs/etc/cont-init.d/20-mqtt_broker.sh
@ -0,0 +1,73 @@
+#!/usr/bin/with-contenv bash
+# ==============================================================================
+# Community Hass.io Add-ons: MQTT Broker & Web client
+# Configures Hivemq for use with MQTT Broker & Web client
+# ==============================================================================
+# shellcheck disable=SC1091
+source /usr/lib/hassio-addons/base.sh
+
+# Set config file
+CONFIG='/opt/mosquitto.conf'
+
+# Remove config file if it exist
+if hass.file_exists "$CONFIG"; then
+    rm "$CONFIG"    
+fi
+
+if hass.config.true 'broker.enabled'; then
+  hass.log.info 'Adding configuration for MQTT broker...'
+  # Create config file
+  touch "$CONFIG"
+
+  # Set default config
+  echo "log_dest stdout" >> $CONFIG
+  echo "persistence true" >> $CONFIG
+  echo "persistence_location /data/" >> $CONFIG
+  
+  # Set websocket configurtation
+  if hass.config.true 'broker.enable_ws'; then
+    hass.log.info 'Setting configuration for websockets...'
+    echo "listener 1884" >> $CONFIG
+    echo "protocol websockets" >> $CONFIG
+
+    # Set SSL configuration.
+    if hass.config.true 'broker.ssl'; then
+      echo "cafile  /ssl/$(hass.config.get 'certfile')" >> $CONFIG
+      echo "certfile   /ssl/$(hass.config.get 'certfile')" >> $CONFIG
+      echo "keyfile   /ssl/$(hass.config.get 'keyfile')" >> $CONFIG
+    fi
+  fi
+
+  # Set MQTT configurtation
+  if hass.config.true 'broker.enable_ws'; then
+    hass.log.info 'Setting configuration for mqtt...'
+    echo "listener 1883" >> $CONFIG
+    echo "protocol mqtt" >> $CONFIG
+    
+    # Set SSL configuration.
+    if hass.config.true 'broker.ssl'; then
+      echo "cafile  /ssl/$(hass.config.get 'certfile')" >> $CONFIG
+      echo "certfile   /ssl/$(hass.config.get 'certfile')" >> $CONFIG
+      echo "keyfile   /ssl/$(hass.config.get 'keyfile')" >> $CONFIG
+    fi
+  fi
+
+  # Allow anonymous auth?
+  if hass.config.true 'broker.allow_anonymous'; then
+    echo "allow_anonymous true" >> $CONFIG
+  else
+    echo "allow_anonymous false" >> $CONFIG
+  fi
+
+  # Set username and password for the broker
+  if hass.config.has_value 'broker.username' \
+      && hass.config.has_value 'broker.password'; then
+    touch /opt/pwfile
+    mosquitto_passwd -b /opt/pwfile "$(hass.config.get 'broker.username')" "$(hass.config.get 'broker.password')"
+  else
+    # Remove pefile if it should not be used
+    if hass.file_exists 'rm /opt/pwfile'; then
+        rm rm /opt/pwfile 
+    fi
+  fi
+fi
--- a/mqtt/rootfs/etc/cont-init.d/20-mqtt_web.sh
+++ b/mqtt/rootfs/etc/cont-init.d/20-mqtt_web.sh
@ -0,0 +1,28 @@
+#!/usr/bin/with-contenv bash
+# ==============================================================================
+# Community Hass.io Add-ons: MQTT Broker & Web client
+# Configures Hivemq for use with MQTT Broker & Web client
+# ==============================================================================
+# shellcheck disable=SC1091
+source /usr/lib/hassio-addons/base.sh
+
+CONFIG='/app/config.js'
+
+# Remove config file if it exist
+if hass.file_exists "$CONFIG"; then
+    rm "$CONFIG"    
+fi
+
+# Create config file
+touch "$CONFIG"
+echo "websocketserver = '""';" >> "$CONFIG" 
+
+# Set default WS port
+echo 'websocketport = 1884;' >> "$CONFIG" 
+
+# Enable SSL for broker connection if enabled for the broker
+if hass.config.true 'broker.ssl'; then
+    sed -i 's/%%SSL_VALUE%%/checked="checked"/' /app/index.html
+else
+    sed -i 's/%%SSL_VALUE%%//' /app/index.html
+fi
--- a/mqtt/rootfs/etc/cont-init.d/40-nginx.sh
+++ b/mqtt/rootfs/etc/cont-init.d/40-nginx.sh
@ -0,0 +1,32 @@
+#!/usr/bin/with-contenv bash
+# ==============================================================================
+# Community Hass.io Add-ons: MQTT Broker & Web client
+# Configures NGINX for use with MQTT Broker & Web client
+# ==============================================================================
+# shellcheck disable=SC1091
+source /usr/lib/hassio-addons/base.sh
+
+declare certfile
+declare keyfile
+
+# Enable SSL
+if hass.config.true 'web.ssl'; then
+    rm /etc/nginx/nginx.conf
+    mv /etc/nginx/nginx-ssl.conf /etc/nginx/nginx.conf
+
+    certfile=$(hass.config.get 'certfile')
+    keyfile=$(hass.config.get 'keyfile')
+
+    sed -i "s/%%certfile%%/${certfile}/g" /etc/nginx/nginx.conf
+    sed -i "s/%%keyfile%%/${keyfile}/g" /etc/nginx/nginx.conf
+fi
+
+# Handles the HTTP auth part
+if ! hass.config.has_value 'web.username'; then
+    hass.log.warning "Username/password protection is disabled!"
+    sed -i '/auth_basic.*/d' /etc/nginx/nginx.conf
+else
+    username=$(hass.config.get 'web.username')
+    password=$(hass.config.get 'web.password')
+    htpasswd -bc /etc/nginx/.htpasswd "${username}" "${password}"
+fi
--- a/mqtt/rootfs/etc/nginx/.htpasswd
+++ b/mqtt/rootfs/etc/nginx/.htpasswd
--- a/mqtt/rootfs/etc/nginx/nginx-ssl.conf
+++ b/mqtt/rootfs/etc/nginx/nginx-ssl.conf
@ -0,0 +1,32 @@
+worker_processes  1;
+pid /var/run/nginx.pid;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    include            mime.types;
+    default_type       application/octet-stream;
+    sendfile           on;
+    keepalive_timeout  65;
+
+    server {
+        server_name hassio.local;
+        listen 5713 default_server ssl;
+        root /app;
+        auth_basic "Restricted";
+        auth_basic_user_file /etc/nginx/.htpasswd;
+        ssl_certificate /ssl/%%certfile%%;
+        ssl_certificate_key /ssl/%%keyfile%%;
+        ssl_protocols TLSv1.2;
+        ssl_prefer_server_ciphers on;
+        ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:DHE-RSA-AES256-SHA;
+        ssl_ecdh_curve secp384r1;
+        ssl_session_timeout  10m;
+        ssl_session_cache shared:SSL:10m;
+        ssl_session_tickets off;
+        ssl_stapling on;
+        ssl_stapling_verify on;
+    }
+}
--- a/mqtt/rootfs/etc/nginx/nginx.conf
+++ b/mqtt/rootfs/etc/nginx/nginx.conf
@ -0,0 +1,21 @@
+worker_processes  1;
+pid /var/run/nginx.pid;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    include            mime.types;
+    default_type       application/octet-stream;
+    sendfile           on;
+    keepalive_timeout  65;
+
+    server {
+        server_name hassio.local;
+        listen 5713 default_server;
+        root /app;
+        auth_basic "Restricted";
+        auth_basic_user_file /etc/nginx/.htpasswd;
+    }
+}
--- a/mqtt/rootfs/etc/services.d/mosquitto/finish
+++ b/mqtt/rootfs/etc/services.d/mosquitto/finish
@ -0,0 +1,9 @@
+#!/usr/bin/execlineb -S0
+# ==============================================================================
+# Community Hass.io Add-ons: MQTT Broker & Web client
+# Take down the S6 supervision tree when MQTT broker
+# ==============================================================================
+if -n { s6-test $# -ne 0 }
+if -n { s6-test ${1} -eq 256 }
+
+s6-svscanctl -t /var/run/s6/services
--- a/mqtt/rootfs/etc/services.d/mosquitto/run
+++ b/mqtt/rootfs/etc/services.d/mosquitto/run
@ -0,0 +1,10 @@
+#!/usr/bin/with-contenv bash
+# ==============================================================================
+# Community Hass.io Add-ons: MQTT Broker & Web client
+# Runs the MQTT broker
+# ==============================================================================
+# shellcheck disable=SC1091
+source /usr/lib/hassio-addons/base.sh
+
+hass.log.info "Starting mosquitto MQTT broker..."
+exec mosquitto -c /opt/mosquitto.conf
--- a/mqtt/rootfs/etc/services.d/nginx/finish
+++ b/mqtt/rootfs/etc/services.d/nginx/finish
@ -0,0 +1,9 @@
+#!/usr/bin/execlineb -S0
+# ==============================================================================
+# Community Hass.io Add-ons: MQTT Broker & Web client
+# Take down the S6 supervision tree when NGINX fails
+# ==============================================================================
+if -n { s6-test $# -ne 0 }
+if -n { s6-test ${1} -eq 256 }
+
+s6-svscanctl -t /var/run/s6/services
--- a/mqtt/rootfs/etc/services.d/nginx/run
+++ b/mqtt/rootfs/etc/services.d/nginx/run
@ -0,0 +1,10 @@
+#!/usr/bin/with-contenv bash
+# ==============================================================================
+# Community Hass.io Add-ons: MQTT Broker & Web client
+# Runs the NGINX daemon
+# ==============================================================================
+# shellcheck disable=SC1091
+source /usr/lib/hassio-addons/base.sh
+
+hass.log.info "Starting NGINX for the MQTT client..."
+exec nginx -g "daemon off;"