From 5a64431b7162159fb61e2455df556202f1870d42 Mon Sep 17 00:00:00 2001
From: tworrall <tworrall@440791e1-c2bf-4c1e-ad7c-caf3f8b0ebe8>
Date: Fri, 16 Sep 2011 15:21:24 +0000
Subject: [PATCH] NIHVIVO-2864: account ftl and css changes and new js to
 disable save until user makes a change

---
 webapp/web/css/account/account.css            |  3 ++
 webapp/web/js/account/accountListenerSetup.js | 39 +++++++++++++++++++
 .../body/accounts/userAccounts-edit.ftl       |  7 +++-
 .../body/accounts/userAccounts-myAccount.ftl  | 10 +++--
 webapp/web/themes/vitro/css/vitroTheme.css    |  6 ++-
 5 files changed, 59 insertions(+), 6 deletions(-)
 create mode 100644 webapp/web/js/account/accountListenerSetup.js

diff --git a/webapp/web/css/account/account.css b/webapp/web/css/account/account.css
index e883917d6..d5cca34d8 100644
--- a/webapp/web/css/account/account.css
+++ b/webapp/web/css/account/account.css
@@ -272,4 +272,7 @@ a.disable-delete {
 }
 #passwordContainer {
     margin-top: 20px;
+}
+.disabledSubmit {
+    cursor: default ! important;
 }
\ No newline at end of file
diff --git a/webapp/web/js/account/accountListenerSetup.js b/webapp/web/js/account/accountListenerSetup.js
new file mode 100644
index 000000000..d811f2410
--- /dev/null
+++ b/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");
+        });
+    });
+
+});
+
diff --git a/webapp/web/templates/freemarker/body/accounts/userAccounts-edit.ftl b/webapp/web/templates/freemarker/body/accounts/userAccounts-edit.ftl
index 2b1ada680..99c95c124 100644
--- a/webapp/web/templates/freemarker/body/accounts/userAccounts-edit.ftl
+++ b/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>')}
diff --git a/webapp/web/templates/freemarker/body/accounts/userAccounts-myAccount.ftl b/webapp/web/templates/freemarker/body/accounts/userAccounts-myAccount.ftl
index 5ffcf2f58..c9c777511 100644
--- a/webapp/web/templates/freemarker/body/accounts/userAccounts-myAccount.ftl
+++ b/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" />')}
\ No newline at end of file
+${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>')}
\ No newline at end of file
diff --git a/webapp/web/themes/vitro/css/vitroTheme.css b/webapp/web/themes/vitro/css/vitroTheme.css
index 56999db45..1aa609a2c 100644
--- a/webapp/web/themes/vitro/css/vitroTheme.css
+++ b/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 ---------------------------->  */
 /* ------------------------------------------------->  */