From 5cb493481e06f6e57614528d0ad3e5f67ccbaba0 Mon Sep 17 00:00:00 2001
From: Ingo Fischer <github@fischer-ka.de>
Date: Tue, 22 Mar 2022 22:57:40 +0100
Subject: [PATCH] * IMPORTANT: You need to re-enter the password once after
 installing this version! * rework index_m

---
 README.md          |   1 +
 admin/index.html   |  76 -------------------
 admin/index_m.html | 185 +++++++++++++++++++++++++++------------------
 io-package.json    |  15 +++-
 4 files changed, 124 insertions(+), 153 deletions(-)
 delete mode 100644 admin/index.html
diff --git a/README.md b/README.md
index 06691c8..0abf0db 100644
--- a/README.md
+++ b/README.md
@@ -32,6 +32,7 @@ Please check it https://www.smarthomejetzt.de/mit-iobroker-auf-eine-home-assista
 ## Changelog
 
 ### __WORK IN PROGRESS__
+* IMPORTANT: You need to re-enter the password once after installing this version!
 * (Apollon77) Implement Service triggers to use any value to trigger or stringified JSON to call with fields
 * (Apollon77) Optimize unload handling
 * (Apollon7) Add Sentry for crash reporting
diff --git a/admin/index.html b/admin/index.html
deleted file mode 100644
index 5ae4d6b..0000000
--- a/admin/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<html>
-<head>
-    <link rel="stylesheet" type="text/css" href="../../lib/css/themes/jquery-ui/redmond/jquery-ui.min.css"/>
-    <link rel="stylesheet" type="text/css" href="../../css/adapter.css"/>
-
-    <script type="text/javascript" src="../../lib/js/jquery-1.11.1.min.js"></script>
-    <script type="text/javascript" src="../../socket.io/socket.io.js"></script>
-    <script type="text/javascript" src="../../lib/js/jquery-ui-1.10.3.full.min.js"></script>
-    <script type="text/javascript" src="../../js/translate.js"></script>
-    <script type="text/javascript" src="../../js/adapter-settings.js"></script>
-    <script type="text/javascript" src="words.js"></script>
-
-    <script type="text/javascript">
-
-        function load(settings, onChange) {
-            if (!settings) return;
-
-            if (settings.password === undefined) settings.password = '';
-            if (settings.prompt === undefined)   settings.prompt = 'hass>';
-
-            $('.value').each(function () {
-                var key = $(this).attr('id');
-                var $value = $('#' + key + '.value');
-                if ($value.attr('type') === 'checkbox') {
-                    $value.prop('checked', settings[key]).change(function() {
-                        onChange();
-                    });
-                } else {
-                    $value.val(settings[key]).change(function() {
-                        onChange();
-                    }).keyup(function() {
-                        onChange();
-                    });
-                }
-            });
-            // Signal to admin, that no changes yet
-            onChange(false);
-        }
-
-        function save(callback) {
-            var obj = {};
-
-            if ($('#password').val() !== $('#passwordRepeat').val()) {
-                showMessage(_('Passwords missmatch!'), _('Warning'), 'alert');
-                return;
-            }
-
-            $('.value').each(function () {
-                var $this = $(this);
-                if ($this.attr('type') === 'checkbox') {
-                    obj[$this.attr('id')] = $this.prop('checked');
-                } else {
-                    obj[$this.attr('id')] = $this.val();
-                }
-            });
-            callback(obj);
-        }
-    </script>
-
-</head>
-<body>
-    <div id="adapter-container">
-        <table><tr>
-            <td><img src="hass.png"/></td>
-            <td><h3 class="translate">FHEM adapter settings</h3></td>
-        </tr></table>
-        <table>
-            <tr><td><label class="translate" for="host">Home assistant IP:</label></td><td class="admin-icon"></td><td><input class="value" id="host" /></td></tr>
-            <tr><td><label class="translate" for="port">Home assistant WS Port:</label></td><td class="admin-icon"></td><td><input class="value" id="port" size="5" maxlength="5"/></td></tr>
-            <tr><td><label class="translate" for="password">Password:</label></td><td class="admin-icon"></td><td><input class="value" id="password" type="password"/></td></tr>
-            <tr><td><label class="translate" for="passwordRepeat">Password repeat:</label></td><td class="admin-icon"></td><td><input type="password" id="passwordRepeat"/></td></tr>
-            <tr><td><label class="translate" for="secure">Secure:</label></td><td class="admin-icon"></td><td><input class="value" id="secure" type="checkbox"/></td></tr>
-        </table>
-    </div>
-</body>
-</html>
diff --git a/admin/index_m.html b/admin/index_m.html
index 251fc25..3b516b2 100644
--- a/admin/index_m.html
+++ b/admin/index_m.html
@@ -1,75 +1,110 @@
-<html>
-<head>
-    <link rel="stylesheet" type="text/css" href="../../lib/css/themes/jquery-ui/redmond/jquery-ui.min.css"/>
-    <link rel="stylesheet" type="text/css" href="../../css/adapter.css"/>
-
-    <script type="text/javascript" src="../../lib/js/jquery-1.11.1.min.js"></script>
-    <script type="text/javascript" src="../../socket.io/socket.io.js"></script>
-    <script type="text/javascript" src="../../lib/js/jquery-ui-1.10.3.full.min.js"></script>
-    <script type="text/javascript" src="../../js/translate.js"></script>
-    <script type="text/javascript" src="../../js/adapter-settings.js"></script>
-    <script type="text/javascript" src="words.js"></script>
-
-    <script type="text/javascript">
-
-        function load(settings, onChange) {
-            if (!settings) return;
-
-            if (settings.password === undefined) settings.password = '';
-            if (settings.prompt === undefined)   settings.prompt = 'hass>';
-
-            $('.value').each(function () {
-                var key = $(this).attr('id');
-                var $value = $('#' + key + '.value');
-                if ($value.attr('type') === 'checkbox') {
-                    $value.prop('checked', settings[key]).change(function() {
-                        onChange();
-                    });
-                } else {
-                    $value.val(settings[key]).change(function() {
-                        onChange();
-                    }).keyup(function() {
-                        onChange();
-                    });
-                }
-            });
-            // Signal to admin, that no changes yet
-            onChange(false);
-        }
-
-        function save(callback) {
-            var obj = {};
-
-            if ($('#password').val() !== $('#passwordRepeat').val()) {
-                showMessage(_('Passwords missmatch!'), _('Warning'), 'alert');
-                return;
-            }
-
-            $('.value').each(function () {
-                var $this = $(this);
-                if ($this.attr('type') === 'checkbox') {
-                    obj[$this.attr('id')] = $this.prop('checked');
-                } else {
-                    obj[$this.attr('id')] = $this.val();
-                }
-            });
-            callback(obj);
-        }
-    </script>
-</head>
-<body>
-    <div id="adapter-container">
-        <table><tr>
-            <td><img src="hass.png" alt="logo"/></td>
-            <td><h3 class="translate">Home assistant adapter settings</h3></td>
-        </tr></table>
-        <table>
-            <tr><td><label class="translate" for="host">Home assistant IP:</label></td><td class="admin-icon"></td><td><input class="value" id="host" /></td></tr>
-            <tr><td><label class="translate" for="port">Home assistant WS Port:</label></td><td class="admin-icon"></td><td><input class="value" id="port" size="5" maxlength="5"/></td></tr>
-            <tr><td><label class="translate" for="password">Password:</label></td><td class="admin-icon"></td><td><input class="value" id="password" type="password"/></td></tr>
-            <tr><td><label class="translate" for="passwordRepeat">Password repeat:</label></td><td class="admin-icon"></td><td><input type="password" id="passwordRepeat"/></td></tr>
-            <tr><td><label class="translate" for="secure">Secure:</label></td><td class="admin-icon"></td><td><input class="value" id="secure" type="checkbox"/></td></tr>
-        </table>
-    </div>
-</body>
-</html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <!-- Materialze style -->
+    <link rel="stylesheet" type="text/css" href="../../css/adapter.css"/>
+    <link rel="stylesheet" type="text/css" href="../../lib/css/materialize.css">
+
+    <script type="text/javascript" src="../../lib/js/jquery-3.2.1.min.js"></script>
+    <script type="text/javascript" src="../../socket.io/socket.io.js"></script>
+
+    <script type="text/javascript" src="../../js/translate.js"></script>
+    <script type="text/javascript" src="../../lib/js/materialize.js"></script>
+    <script type="text/javascript" src="../../js/adapter-settings.js"></script>
+    <script type="text/javascript" src="words.js"></script>
+
+    <script type="text/javascript">
+
+        function load(settings, onChange) {
+            if (!settings) return;
+
+            if (settings.password === undefined) settings.password = '';
+            if (settings.prompt === undefined)   settings.prompt = 'hass>';
+            settings.passwordRepeat = settings.password;
+
+            $('.value').each(function () {
+                var key = $(this).attr('id');
+                var $value = $('#' + key + '.value');
+                if ($value.attr('type') === 'checkbox') {
+                    $value.prop('checked', settings[key]).change(function() {
+                        onChange();
+                    });
+                } else {
+                    $value.val(settings[key]).change(function() {
+                        onChange();
+                    }).keyup(function() {
+                        onChange();
+                    });
+                }
+            });
+            // Signal to admin, that no changes yet
+            onChange(false);
+        }
+
+        function save(callback) {
+            var obj = {};
+
+            if ($('#password').val() !== $('#passwordRepeat').val()) {
+                showMessage(_('Passwords missmatch!'), _('Warning'), 'alert');
+                return;
+            }
+
+            $('.value').each(function () {
+                var $this = $(this);
+                if ($this.attr('type') === 'checkbox') {
+                    obj[$this.attr('id')] = $this.prop('checked');
+                } else {
+                    obj[$this.attr('id')] = $this.val();
+                }
+            });
+            delete obj.passwordRepeat;
+
+            callback(obj);
+        }
+    </script>
+</head>
+<body>
+    <div id="m adapter-container">
+        <div class="row">
+            <div class="col s12 m4 l2">
+                <img src="hass.png" class="logo">
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col s6 m4 input-field">
+                <input type="text" class="value" id="host" />
+                <label for="host" class="translate">Home assistant IP:</label>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col s6 m4 input-field">
+                <input type="text" class="value" id="port" size="5" maxlength="5"/>
+                <label for="port" class="translate">Home assistant WS Port:</label>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col s6 m4 input-field">
+                <input type="text" class="value" id="password" />
+                <label for="password" class="translate">Password:</label>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col s6 m4 input-field">
+                <input type="text" class="value" id="passwordRepeat" />
+                <label for="passwordRepeat" class="translate">Password repeat:</label>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col s6 m4 input-field">
+                <input id="secure" type="checkbox" class="value" />
+                <span for="secure" class="translate">Secure:</span>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/io-package.json b/io-package.json
index b63f716..bf6dbfa 100644
--- a/io-package.json
+++ b/io-package.json
@@ -87,7 +87,12 @@
         ],
         "dependencies": [
             {
-                "js-controller": ">=2.0.0"
+                "js-controller": ">=3.0.0"
+            }
+        ],
+        "globalDependencies": [
+            {
+                "admin": ">=4.0.19"
             }
         ],
         "plugins": {
@@ -105,6 +110,12 @@
         "password": "",
         "secure": false
     },
+    "protectedNative": [
+        "password"
+    ],
+    "encryptedNative": [
+        "password"
+    ],
     "objects": [],
     "instanceObjects": [
         {
@@ -137,4 +148,4 @@
             "native": {}
         }
     ]
-}
\ No newline at end of file
+}

Home assistant IP:
Home assistant WS Port:
Password:
Password repeat:
Secure: