Merge pull request #1220 from mcspr/webui-haschanged-hotfix

Fix-up style and form validation logic

code/html/custom.css

@@ -94,11 +94,11 @@ div.center {
     display: none;
 }
 
-.content #password {
+#password .content {
     margin: 0 auto;
 }
 
-.content #layout {
+#layout .content {
     margin: 0;
 }
 

code/html/custom.js

@@ -164,21 +164,35 @@ function validatePassword(password) {
     );
 }
 
-function validateForm(form) {
+function validateFormPasswords(form) {
+    var passwords = $("input[name='adminPass1'],input[name='adminPass2']", form);
+    var adminPass1 = passwords.first().val(),
+        adminPass2 = passwords.last().val();
+
+    var formValidity = passwords.first()[0].checkValidity();
+    if (formValidity && (adminPass1.length === adminPass2.length === 0)) {
+        return true;
+    }
+
+    var validPass1 = validatePassword(adminPass1),
+        validPass2 = validatePassword(adminPass2);
 
-    // password
-    var adminPass1 = $("input[name='adminPass']", form).first().val();
-    if (!validatePassword(adminPass1)) {
+    if (formValidity && validPass1 && validPass2) {
+        return true;
+    }
+
+    if (!formValidity || (adminPass1.length > 0 && !validPass1)) {
         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_confirm']", form).last().val();
     if (adminPass1 !== adminPass2) {
         alert("Passwords are different!");
-        return false;
     }
 
+    return false;
+}
+
+function validateFormHostname(form) {
     // RFCs mandate that a hostname's labels may contain only
     // the ASCII letters 'a' through 'z' (case-insensitive),
     // the digits '0' through '9', and the hyphen.
@@ -191,18 +205,21 @@ function validateForm(form) {
     var re_hostname = new RegExp('^(?!-)[A-Za-z0-9-]{0,30}[A-Za-z0-9]$');
 
     var hostname = $("input[name='hostname']", form);
-    var hasChanged = ("true" === hostname.attr("hasChanged"));
-    if (!hasChanged) {
+    if ("true" !== hostname.attr("hasChanged")) {
         return true;
     }
 
-    if (!re_hostname.test(hostname.val())) {
-        alert("Hostname cannot be empty and may only contain the ASCII letters ('A' through 'Z' and 'a' through 'z'), the digits '0' through '9', and the hyphen ('-')! They can neither start or end with an hyphen.");
-        return false;
+    if (re_hostname.test(hostname.val())) {
+        return true;
     }
 
-    return true;
+    alert("Hostname cannot be empty and may only contain the ASCII letters ('A' through 'Z' and 'a' through 'z'), the digits '0' through '9', and the hyphen ('-')! They can neither start or end with an hyphen.");
 
+    return false;
+}
+
+function validateForm(form) {
+    return validateFormPasswords(form) && validateFormHostname(form);
 }
 
 function getValue(element) {
@@ -235,7 +252,7 @@ function addValue(data, name, value) {
     ];
 
 
-    // join both adminPass and ..._confirm
+    // join both adminPass 1 and 2
     if (name.startsWith("adminPass")) {
         name = "adminPass";
     }
@@ -359,7 +376,7 @@ function sendConfig(data) {
 function setOriginalsFromValues(force) {
     var force = (true === force);
     $("input,select").each(function() {
-        var initial = (null === $(this).attr("original"));
+        var initial = (undefined === $(this).attr("original"));
         if (force || initial) {
             $(this).attr("original", $(this).val());
         }
@@ -478,7 +495,7 @@ function doUpgrade() {
 
 function doUpdatePassword() {
     var form = $("#formPassword");
-    if (validateForm(form)) {
+    if (validateFormPasswords(form)) {
         sendConfig(getData(form));
     }
     return false;

code/html/index.html

@@ -28,7 +28,7 @@
 
             <div class="content">
 
-                <form id="formPassword" class="pure-form">
+                <form id="formPassword" class="pure-form" autocomplete="off">
 
                     <div class="panel block" id="panel-password">
 
@@ -41,14 +41,14 @@
 
                             <fieldset>
                                 <div class="pure-g">
-                                    <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" />
+                                    <label class="pure-u-1 pure-u-lg-1-4" for="adminPass1">New Password</label>
+                                    <input class="pure-u-1 pure-u-lg-3-4" name="adminPass1" minlength="8" maxlength="63" type="password" tabindex="1" autocomplete="false" spellcheck="false" required />
                                     <span class="no-select password-reveal"></span>
                                 </div>
 
                                 <div class="pure-g">
-                                    <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" />
+                                    <label class="pure-u-1 pure-u-lg-1-4" for="adminPass2">Repeat password</label>
+                                    <input class="pure-u-1 pure-u-lg-3-4" name="adminPass2" minlength="8" maxlength="63" type="password" tabindex="2" autocomplete="false" spellcheck="false" required />
                                     <span class="no-select password-reveal"></span>
                                 </div>
                             </fieldset>
@@ -62,7 +62,7 @@
                             <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" title="Save new password">Save</button>
+                                <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>
 
                         </div>
@@ -533,10 +533,10 @@
 
                                 <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" placeholder="New password" maxlength="63" type="password" action="reboot" tabindex="11" autocomplete="false" spellcheck="false" />
+                                    <input name="adminPass1" class="pure-u-1 pure-u-lg-3-4" placeholder="New password" minlength="8" 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" />
+                                    <input name="adminPass2" class="pure-u-1 pure-u-lg-3-4" placeholder="Repeat password" minlength="8" 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>