NIHVIVO-2864: account ftl and css changes and new js to disable save until user makes a change

webapp/web/css/account/account.css

@@ -272,4 +272,7 @@ a.disable-delete {
 }
 #passwordContainer {
     margin-top: 20px;
+}
+.disabledSubmit {
+    cursor: default ! important;
 }

webapp/web/js/account/accountListenerSetup.js

@@ -0,0 +1,39 @@
+/* $This file is distributed under the terms of the license in /doc/license.txt$ */
+  
+// Sets up event listeners so that the submit button gets enabled only if the user has changed
+// an existing value.
+//
+// Used with both the userAccounts--myAccounts.ftl and userAccounts--edit.ftl.
+    
+$(document).ready(function(){
+
+    var theForm = $('form').last();
+    var theSubmitButton = theForm.find(':submit');
+
+    theSubmitButton.addClass("disabledSubmit");
+
+    $('input').each(function() {
+        if ( $(this).attr('type') != 'submit' && $(this).attr('name') != 'querytext') {
+            $(this).change(function() {
+                theSubmitButton.removeAttr('disabled');
+                theSubmitButton.removeClass("disabledSubmit");
+            });
+            $(this).bind("propertychange", function() {
+                theSubmitButton.removeAttr('disabled');
+                theSubmitButton.removeClass("disabledSubmit");
+            });
+            $(this).bind("input", function() {
+                theSubmitButton.removeAttr('disabled');
+                theSubmitButton.removeClass("disabledSubmit");
+            });
+        }
+    });
+    $('select').each(function() {
+        $(this).change(function() {
+            theSubmitButton.removeAttr('disabled');
+            theSubmitButton.removeClass("disabledSubmit");
+        });
+    });
+
+});
+

webapp/web/templates/freemarker/body/accounts/userAccounts-edit.ftl

@@ -97,7 +97,7 @@
             </section>
         </#if>
 
-        <p><input type="submit" name="submitEdit" value="Save changes" class="submit" /> or <a class="cancel" href="${formUrls.list}">Cancel</a></p>
+        <p><input type="submit" id="submitMyAccount" name="submitEdit" value="Save changes" class="submit" disabled /> or <a class="cancel" href="${formUrls.list}">Cancel</a></p>
 
         <p class="requiredHint">* required fields</p>
     </form>
@@ -106,4 +106,7 @@
 ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/account/account.css" />')}
 ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/edit/forms/css/customForm.css" />')}
 
-${scripts.add('<script type="text/javascript" src="${urls.base}/js/account/accountExternalAuthFlag.js"></script>')}
+${scripts.add('<script type="text/javascript" src="${urls.base}/js/jquery.js"></script>',
+              '<script type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.8.9.custom.min.js"></script>',
+              '<script type="text/javascript" src="${urls.base}/js/account/accountExternalAuthFlag.js"></script>',
+              '<script type="text/javascript" src="${urls.base}/js/account/accountListenerSetup.js"></script>')}

webapp/web/templates/freemarker/body/accounts/userAccounts-myAccount.ftl

@@ -58,7 +58,7 @@
     </#if>
 
 <section id="my-account" role="region">
-    <form method="POST" action="${formUrls.myAccount}" class="customForm" role="my account">
+    <form id="main-form" method="POST" action="${formUrls.myAccount}" class="customForm" role="my account">
         <label for="email-address">Email address<span class="requiredHint"> *</span></label>
         <input type="text" name="emailAddress" value="${emailAddress}" id="email-address" role="input" />
 
@@ -80,11 +80,15 @@
             <input type="password" name="confirmPassword" value="${confirmPassword}" id="confirm-password" role="input" />
         </#if>
 
-        <p><input type="submit" name="submitMyAccount" value="Save changes" class="submit" /> or <a class="cancel" href="${urls.referringPage}">Cancel</a></p>
+        <p><input type="submit" id="submitMyAccount" name="submitMyAccount" value="Save changes" class="submit" disabled /> or <a class="cancel" href="${urls.referringPage}">Cancel</a></p>
 
         <p class="requiredHint">* required fields</p>
     </form>
 </section>
 
 ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/account/account.css" />')}
-${stylesheets.add('<link rel="stylesheet" href="${urls.base}/edit/forms/css/customForm.css" />')}
+${stylesheets.add('<link rel="stylesheet" href="${urls.base}/edit/forms/css/customForm.css" />')}
+
+${scripts.add('<script type="text/javascript" src="${urls.base}/js/jquery.js"></script>',
+              '<script type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.8.9.custom.min.js"></script>',
+              '<script type="text/javascript" src="${urls.base}/js/account/accountListenerSetup.js"></script>')}

webapp/web/themes/vitro/css/vitroTheme.css

@@ -1381,11 +1381,15 @@ a {
 .middle {
     vertical-align: middle;
 }
+
 /* EDITING DISPLAY------>  */
 .edit-individual {
     border-left: 1px dotted #47b6d0;
 }
-
+.disabledSubmit {
+    color: #ede ! important;
+    background-color: #47b6d0 ! important;
+}
 /* ------------------------------------------------->  */
 /* SITE ADMIN DASHBOARD ---------------------------->  */
 /* ------------------------------------------------->  */