Update password UI

* revise first-time-use screen
* generate password (policy applies)
* hide/reveal password text for sta/admin settings
* changed autocomplete='...' for some inputs to avoid completion

code/html/custom.css

@@ -50,10 +50,6 @@ h2 {
     display: block;
 }
 
-.content {
-    margin: 0;
-}
-
 .page {
     margin-top: 10px;
 }
@@ -98,16 +94,12 @@ div.center {
     display: none;
 }
 
-#credentials {
-    font-size: 200%;
-    height: 100px;
-    left: 50%;
-    margin-left: -200px;
-    margin-top: -50px;
-    position: fixed;
-    text-align: center;
-    top: 50%;
-    width: 400px;
+.content #password {
+    margin: 0 auto;
+}
+
+.content #layout {
+    margin: 0;
 }
 
 div.state {
@@ -206,6 +198,10 @@ div.state {
     background: rgb(255, 128, 0); /* orange */
 }
 
+.button-generate-password {
+    background: rgb(66, 184, 221); /* blue */
+}
+
 .button-upgrade-browse,
 .button-clear-filters,
 .button-clear-messages,
@@ -448,3 +444,53 @@ table.dataTable.display tbody td {
     height: 400px;
     margin-bottom: 10px;
 }
+
+/* -----------------------------------------------------------------------------
+    Password input controls
+   -------------------------------------------------------------------------- */
+.password-reveal {
+    font-family: EmojiSymbols,Segoe UI Symbol;
+    background: rgba(0,0,0,0);
+    display: inline-block;
+    float: right;
+    z-index: 50;
+    margin-top: 6px;
+    margin-left: -30px;
+    vertical-align: middle;
+    font-size: 1.2em;
+    height: 100%;
+}
+
+.password-reveal:after {
+    content: "👁";
+}
+
+input[type="password"] + .password-reveal {
+    color: rgba(205, 205, 205, 0.3);
+}
+
+input[type="text"] + .password-reveal {
+    color: rgba(66, 184, 221, 0.8);
+}
+
+.no-select {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+input::-ms-clear,
+input::-ms-reveal {
+    display: none;
+}
+
+/* css minifier must not combine these.
+ * style will not apply otherwise */
+input::-ms-input-placeholder {
+    color: #ccd;
+}
+
+input::placeholder {
+    color: #ccc;
+}

code/html/custom.js

@@ -146,8 +146,7 @@ function loadTimeZones() {
 
 }
 
-function validateForm(form) {
-
+function validatePassword(password) {
     // http://www.the-art-of-web.com/javascript/validate-password/
     // at least one lowercase and one uppercase letter or number
     // at least eight characters (letters, numbers or special characters)
@@ -155,16 +154,26 @@ function validateForm(form) {
     // MUST be 8..63 printable ASCII characters. See:
     // https://en.wikipedia.org/wiki/Wi-Fi_Protected_Access#Target_users_(authentication_key_distribution)
     // https://github.com/xoseperez/espurna/issues/1151
+
     var re_password = /^(?=.*[A-Z\d])(?=.*[a-z])[\w~!@#$%^&*\(\)<>,.\?;:{}\[\]\\|]{8,63}$/;
+    return (
+        (password !== undefined)
+        && (typeof password === "string")
+        && (password.length > 0)
+        && re_password.test(password)
+    );
+}
+
+function validateForm(form) {
 
     // password
     var adminPass1 = $("input[name='adminPass']", form).first().val();
-    if (adminPass1.length > 0 && !re_password.test(adminPass1)) {
+    if (!validatePassword(adminPass1)) {
         alert("The password you have entered is not valid, it must be 8..63 characters and have at least 1 lowercase and 1 uppercase / number!");
         return false;
     }
 
-    var adminPass2 = $("input[name='adminPass']", form).last().val();
+    var adminPass2 = $("input[name='adminPass_confirm']", form).last().val();
     if (adminPass1 !== adminPass2) {
         alert("Passwords are different!");
         return false;
@@ -225,6 +234,12 @@ function addValue(data, name, value) {
         "node", "key", "topic"
     ];
 
+
+    // join both adminPass and ..._confirm
+    if (name.startsWith("adminPass")) {
+        name = "adminPass";
+    }
+
     if (name in data) {
         if (!Array.isArray(data[name])) {
             data[name] = [data[name]];
@@ -260,26 +275,67 @@ function getData(form) {
 
 }
 
-function randomString(length, chars) {
-    var mask = "";
-    if (chars.indexOf("a") > -1) { mask += "abcdefghijklmnopqrstuvwxyz"; }
-    if (chars.indexOf("A") > -1) { mask += "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; }
-    if (chars.indexOf("#") > -1) { mask += "0123456789"; }
-    if (chars.indexOf("@") > -1) { mask += "ABCDEF"; }
-    if (chars.indexOf("!") > -1) { mask += "~`!@#$%^&*()_+-={}[]:\";'<>?,./|\\"; }
-    var result = "";
-    for (var i = length; i > 0; --i) {
-        result += mask[Math.round(Math.random() * (mask.length - 1))];
+function randomString(length, args) {
+    if (typeof args === "undefined") {
+        args = {
+            lowercase: true,
+            uppercase: true,
+            numbers: true,
+            special: true
+        }
     }
-    return result;
+
+    var mask = "";
+    if (args.lowercase) { mask += "abcdefghijklmnopqrstuvwxyz"; }
+    if (args.uppercase) { mask += "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; }
+    if (args.numbers || args.hex) { mask += "0123456789"; }
+    if (args.hex) { mask += "ABCDEF"; }
+    if (args.special) { mask += "~`!@#$%^&*()_+-={}[]:\";'<>?,./|\\"; }
+
+    var source = new Uint32Array(length);
+    var result = new Array(length);
+
+    window.crypto.getRandomValues(source).forEach(function(value, i) {
+        result[i] = mask[value % mask.length];
+    });
+
+    return result.join("");
 }
 
 function generateAPIKey() {
-    var apikey = randomString(16, "@#");
+    var apikey = randomString(16, {hex: true});
     $("input[name='apiKey']").val(apikey);
     return false;
 }
 
+function generatePassword() {
+    var password = "";
+    do {
+        password = randomString(10);
+    } while (!validatePassword(password));
+
+    return password;
+}
+
+function toggleVisiblePassword() {
+    var elem = this.previousElementSibling;
+    if (elem.type === "password") {
+        elem.type = "text";
+    } else {
+        elem.type = "password";
+    }
+    return false;
+}
+
+function doGeneratePassword() {
+    $("input", $("#formPassword"))
+        .val(generatePassword())
+        .each(function() {
+            this.type = "text";
+        });
+    return false;
+}
+
 function getJson(str) {
     try {
         return JSON.parse(str);
@@ -753,6 +809,7 @@ function addNetwork() {
         $(this).attr("tabindex", tabindex);
         tabindex++;
     });
+    $(".password-reveal", line).on("click", toggleVisiblePassword);
     $(line).find(".button-del-network").on("click", delNetwork);
     $(line).find(".button-more-network").on("click", moreNetwork);
     line.appendTo("#networks");
@@ -1575,12 +1632,15 @@ $(function() {
     createCheckboxes();
     setInterval(function() { keepTime(); }, 1000);
 
+    $(".password-reveal").on("click", toggleVisiblePassword);
+
     $("#menuLink").on("click", toggleMenu);
     $(".pure-menu-link").on("click", showPanel);
     $("progress").attr({ value: 0, max: 100 });
 
     $(".button-update").on("click", doUpdate);
     $(".button-update-password").on("click", doUpdatePassword);
+    $(".button-generate-password").on("click", doGeneratePassword);
     $(".button-reboot").on("click", doReboot);
     $(".button-reconnect").on("click", doReconnect);
     $(".button-wifi-scan").on("click", doScan);

code/html/index.html

@@ -30,38 +30,43 @@
 
                 <form id="formPassword" class="pure-form" action="/" method="post">
 
-                    <div class="panel block">
+                    <div class="panel block" id="panel-password">
 
                         <div class="header">
                             <h1>SECURITY</h1>
-                            <h2>Before using this device you have to change the default password for the user 'admin'. This password will be used for the <strong>AP mode hotspot</strong>, the <strong>web interface</strong> (where you are now) and the <strong>over-the-air updates</strong>.</h2>
+                            <h2>Before using this device you have to change the default password for the user <strong>admin</strong>. This password will be used for the <strong>AP mode hotspot</strong>, the <strong>web interface</strong> (where you are now) and the <strong>over-the-air updates</strong>.</h2>
                         </div>
 
                         <div class="page">
 
                             <fieldset>
-
                                 <div class="pure-g">
-                                    <label class="pure-u-1 pure-u-lg-1-4">Admin password</label>
-                                    <input name="adminPass" class="pure-u-1 pure-u-lg-3-4" maxlength="63" type="password" tabindex="1" autocomplete="false" />
-                                    <div class="pure-u-0 pure-u-lg-1-4"></div>
-                                    <div class="pure-u-1 pure-u-lg-3-4 hint">
-                                        The administrator password is used to access this web interface (user 'admin'), but also to connect to the device when in AP mode or to flash a new firmware over-the-air (OTA).<br />
-                                        It must be <strong>8..63 characters</strong> (numbers and letters and any of these special characters: _,.;:~!?@#$%^&amp;*&lt;&gt;\|(){}[]) and have at least <strong>one lowercase</strong> and <strong>one uppercase</strong> or <strong>one number</strong>.</div>
+                                    <label class="pure-u-1 pure-u-lg-1-4" for="adminPass">New Password</label>
+                                    <input class="pure-u-1 pure-u-lg-3-4" name="adminPass" maxlength="63" type="password" tabindex="1" autocomplete="false" spellcheck="false" />
+                                    <span class="no-select password-reveal"></span>
                                 </div>
 
                                 <div class="pure-g">
-                                    <label class="pure-u-1 pure-u-lg-1-4">Repeat password</label>
-                                    <input name="adminPass" class="pure-u-1 pure-u-lg-3-4" type="password" tabindex="2" autocomplete="false" />
+                                    <label class="pure-u-1 pure-u-lg-1-4" for="adminPass_confirm">Repeat password</label>
+                                    <input class="pure-u-1 pure-u-lg-3-4" name="adminPass_confirm" type="password" tabindex="2" autocomplete="false" spellcheck="false" />
+                                    <span class="no-select password-reveal"></span>
                                 </div>
+                            </fieldset>
 
-                                <div class="pure-u-0 pure-u-lg-1-4 more"></div>
-                                <button class="pure-button button-update-password" type="button">Update</button>
+                            <div class="pure-g">
+                                <div class="pure-u-1 pure-u-lg-1 hint">
+                                    Password must be <strong>8..63 characters</strong> (numbers and letters and any of these special characters: _,.;:~!?@#$%^&amp;*&lt;&gt;\|(){}[]) and have at least <strong>one lowercase</strong> and <strong>one uppercase</strong> or <strong>one number</strong>.</div>
+                            </div>
+
+
+                            <div class="pure-g">
+                                <button class="pure-u-11-24 pure-u-lg-1-4 pure-button button-generate-password" type="button" title="Generate password based on password policy">Generate</button>
+                                <div class="pure-u-2-24 pure-u-lg-1-2"></div>
+                                <button class="pure-u-11-24 pure-u-lg-1-4 pure-button button-update-password" type="button" title="Save new password">Save</button>
+                            </div>
 
-                            </fieldset>
                         </div>
                     </div>
-
                 </form>
 
             </div> <!-- content -->
@@ -523,18 +528,18 @@
 
                                 <div class="pure-g">
                                     <label class="pure-u-1 pure-u-lg-1-4">Admin password</label>
-                                    <input name="adminPass" class="pure-u-1 pure-u-lg-3-4" maxlength="63" type="password" action="reboot" tabindex="11" autocomplete="false" />
+                                    <input name="adminPass" class="pure-u-1 pure-u-lg-3-4" placeholder="New password" maxlength="63" type="password" action="reboot" tabindex="11" autocomplete="false" spellcheck="false" />
+                                    <span class="no-select password-reveal"></span>
+                                    <div class="pure-u-1 pure-u-lg-1-4"></div>
+                                    <input name="adminPass_confirm" class="pure-u-1 pure-u-lg-3-4" placeholder="Repeat password" maxlength="63" type="password" action="reboot" tabindex="12" autocomplete="false" spellcheck="false" />
+                                    <span class="no-select password-reveal"></span>
+
                                     <div class="pure-u-0 pure-u-lg-1-4"></div>
                                     <div class="pure-u-1 pure-u-lg-3-4 hint">
                                         The administrator password is used to access this web interface (user 'admin'), but also to connect to the device when in AP mode or to flash a new firmware over-the-air (OTA).<br />
                                         It must be <strong>8..63 characters</strong> (numbers and letters and any of these special characters: _,.;:~!?@#$%^&amp;*&lt;&gt;\|(){}[]) and have at least <strong>one lowercase</strong> and <strong>one uppercase</strong> or <strong>one number</strong>.</div>
                                 </div>
 
-                                <div class="pure-g">
-                                    <label class="pure-u-1 pure-u-lg-1-4">Repeat password</label>
-                                    <input name="adminPass" class="pure-u-1 pure-u-lg-3-4" maxlength="63" type="password" action="reboot" tabindex="12" autocomplete="false" />
-                                </div>
-
                                 <div class="pure-g">
                                     <label class="pure-u-1 pure-u-lg-1-4">HTTP port</label>
                                     <input name="webPort" class="pure-u-1 pure-u-lg-1-4" type="text" action="reboot" tabindex="13" />
@@ -783,12 +788,13 @@
 
                                 <div class="pure-g">
                                     <label class="pure-u-1 pure-u-lg-1-4">MQTT User</label>
-                                    <input class="pure-u-1 pure-u-lg-1-4" name="mqttUser" type="text" tabindex="23" placeholder="Leave blank if no user" autocomplete="false" />
+                                    <input class="pure-u-1 pure-u-lg-1-4" name="mqttUser" type="text" tabindex="23" placeholder="Leave blank if no user" autocomplete="off" />
                                 </div>
 
                                 <div class="pure-g">
                                     <label class="pure-u-1 pure-u-lg-1-4">MQTT Password</label>
-                                    <input class="pure-u-1 pure-u-lg-1-4" name="mqttPassword" type="password" tabindex="24" placeholder="Leave blank if no pass" autocomplete="false" />
+                                    <input class="pure-u-1 pure-u-lg-1-4" name="mqttPassword" type="password" tabindex="24" placeholder="Leave blank if no pass" autocomplete="new-password" spellcheck="false" />
+                                    <span class="no-select password-reveal"></span>
                                 </div>
 
                                 <div class="pure-g">
@@ -1096,12 +1102,13 @@
 
                                 <div class="pure-g">
                                     <label class="pure-u-1 pure-u-lg-1-4">Username</label>
-                                    <input class="pure-u-1 pure-u-lg-3-4" name="idbUsername" type="text" tabindex="44" autocomplete="false" />
+                                    <input class="pure-u-1 pure-u-lg-3-4" name="idbUsername" type="text" tabindex="44" autocomplete="off" />
                                 </div>
 
                                 <div class="pure-g">
                                     <label class="pure-u-1 pure-u-lg-1-4">Password</label>
-                                    <input class="pure-u-1 pure-u-lg-3-4" name="idbPassword" type="password" tabindex="45" autocomplete="false" />
+                                    <input class="pure-u-1 pure-u-lg-3-4" name="idbPassword" type="password" tabindex="45" autocomplete="new-password" spellcheck="false" />
+                                    <span class="no-select password-reveal"></span>
                                 </div>
 
                             </fieldset>
@@ -1363,7 +1370,8 @@
                 <div class="pure-u-1-6 pure-u-lg-1-12"><button type="button" class="pure-button button-more-network pure-u-1">...</button></div>
 
                 <label class="pure-u-1 pure-u-lg-1-4 more">Password</label>
-                <input class="pure-u-1 pure-u-lg-3-4 more" name="pass" type="password" action="reconnect" value="" tabindex="0" autocomplete="false" />
+                <input class="pure-u-1 pure-u-lg-3-4 more" name="pass" type="password" action="reconnect" value="" tabindex="0" autocomplete="new-password" spellcheck="false" />
+                <span class="no-select password-reveal more"></span>
 
                 <label class="pure-u-1 pure-u-lg-1-4 more">Static IP</label>
                 <input class="pure-u-1 pure-u-lg-3-4 more" name="ip" type="text" action="reconnect" value="" maxlength="15" tabindex="0" autocomplete="false" />
@@ -1586,7 +1594,7 @@
         <!-- removeIf(!rfm69) -->
         <div id="nodeTemplate" class="template">
             <div class="pure-g">
-                <div class="pure-u-md-1-6 pure-u-1-2"><input name="node" type="text" class="pure-u-11-12" value="" size="8" tabindex="0" placeholder="Node ID"></div>
+                <div class="pure-u-md-1-6 pure-u-1-2"><input name="node" type="text" class="pure-u-11-12" value="" size="8" tabindex="0" placeholder="Node ID" autocomplete="false"></div>
                 <div class="pure-u-md-1-6 pure-u-1-2"><input name="key" type="text" class="pure-u-11-12" value="" size="8" tabindex="0" placeholder="Key"></div>
                 <div class="pure-u-md-1-2 pure-u-3-4"><input name="topic" type="text" class="pure-md-11-12 pure-u-23-24" value="" size="8" tabindex="0" placeholder="MQTT Topic"></div>
                 <div class="pure-u-md-1-6 pure-u-1-4"><button type="button" class="pure-button button-del-mapping pure-u-5-6 pure-u-md-5-6">Del</button></div>