update/cancel changes

src/public/scripts/profile.js

@@ -1,3 +1,41 @@
+/**
+ * lockAccount resets inputs and disabled inputs
+ */
+function lockAccount() {
+  // Clear unsaved inputs on page load (refresh doesnt clear them)
+  document.getElementById("account-form").reset();
+
+  document.getElementById("save-account").disabled = true;
+  document.getElementById("email").disabled = true;
+  document.getElementById("name").disabled = true;
+  document.getElementById("password").disabled = true;
+  document.getElementById("repassword").disabled = true;
+  document.getElementById("save-account").classList.add("cursor-not-allowed");
+
+  document.getElementById("edit-account").innerHTML = "Edit";
+  document.getElementById("edit-account").onclick = unlockAccount;
+}
+
+/**
+ * lockPersonal resets inputs and disabled inputs
+ */
+function lockPersonal() {
+  // Clear unsaved inputs on page load (refresh doesnt clear them)
+  document.getElementById("personal-form").reset();
+
+  document.getElementById("save-personal").disabled = true;
+  document.getElementById("dob").disabled = true;
+  document.getElementById("education").disabled = true;
+  document.getElementById("ms-single").disabled = true;
+  document.getElementById("ms-married").disabled = true;
+  document.getElementById("ms-divorced").disabled = true;
+  document.getElementById("ms-widowed").disabled = true;
+  document.getElementById("save-personal").classList.add("cursor-not-allowed");
+
+  document.getElementById("edit-personal").innerHTML = "Edit";
+  document.getElementById("edit-personal").onclick = unlockPersonal;
+}
+
 /**
  * unlockAccount removes disabled from inputs and
  * allows users to edit their profile.
@@ -9,6 +47,9 @@ function unlockAccount() {
   document.getElementById("password").disabled = false;
   document.getElementById("repassword").disabled = false;
   document.getElementById("save-account").classList.remove("cursor-not-allowed");
+
+  document.getElementById("edit-account").innerHTML = "Cancel changes";
+  document.getElementById("edit-account").onclick = lockAccount;
 }
 
 /**
@@ -24,34 +65,11 @@ function unlockPersonal() {
   document.getElementById("ms-divorced").disabled = false;
   document.getElementById("ms-widowed").disabled = false;
   document.getElementById("save-personal").classList.remove("cursor-not-allowed");
+
+  document.getElementById("edit-personal").innerHTML = "Cancel changes";
+  document.getElementById("edit-personal").onclick = lockPersonal;
 }
 
-/**
+// On page load, ensure forms are locked and reset
- * lockAll makes all inputs disabled on page load
+lockAccount();
- */
+// lockPersonal();
-function lockAll() {
-  // Clear unsaved inputs on page load (refresh doesnt clear them)
-  document.getElementById("account-form").reset();
-  // document.getElementById("personal-form").reset();
-
-  // Account section
-  document.getElementById("save-account").disabled = true;
-  document.getElementById("email").disabled = true;
-  document.getElementById("name").disabled = true;
-  document.getElementById("password").disabled = true;
-  document.getElementById("repassword").disabled = true;
-  document.getElementById("save-account").classList.add("cursor-not-allowed");
-
-  // Personal info section
-  // document.getElementById("save-personal").disabled = true;
-  // document.getElementById("dob").disabled = true;
-  // document.getElementById("education").disabled = true;
-  // document.getElementById("ms-single").disabled = true;
-  // document.getElementById("ms-married").disabled = true;
-  // document.getElementById("ms-divorced").disabled = true;
-  // document.getElementById("ms-widowed").disabled = true;
-  // document.getElementById("save-personal").classList.add("cursor-not-allowed");
-
-}
-
-lockAll()

src/views/profile.ejs

@@ -11,7 +11,7 @@
     <div class="max-w-md mx-auto bg-white p-8 mb-10 rounded-lg shadow-md">
         <div class="flex flex-row justify-between">
             <h3 class="pt-2 pr-2 pb-2">Account settings</h3>
-            <button onclick="unlockAccount()" class="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Edit</button>
+            <button id="edit-account" onclick="unlockAccount()" class="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Edit</button>
         </div>
         <form action="/updateAccount" method="post" class="space-y-4 mt-4" id="account-form">