Update password set function to give feedback in the same way as updating persistence and delay

Author: SteveMicroNova

amplipi/updater/static/index.html

@@ -109,6 +109,43 @@ <h1><span class="text-white">Ampli</span><span class="text-danger">Pi</span></h1
                   }
                 }
 
+                async function set_password() {
+                  const password_box = document.getElementById("password");
+                  const password = password_box.value
+                  const confirm_password_box = document.getElementById("confirm-password");
+                  const confirm_password = confirm_password_box.value
+
+                  const button = document.getElementById('password-submit');
+                  const spinner = document.getElementById('password-spinner');
+                  const success = document.getElementById('password-success');
+                  const fail = document.getElementById('password-fail');
+                  const no_match = document.getElementById('password-no-match');
+
+                  if(password != confirm_password) {
+                    setVisibility(no_match, fail, success, spinner, button);
+                  } else {
+                    body = JSON.stringify({'password':password})
+
+                    res = await fetch('/password', {
+                      method: 'POST',
+                      body: body,
+                      headers: {
+                        "Content-Type": "application/json",
+                      }
+                    });
+
+                    if(res.ok) {
+                      setVisibility(success, spinner, button, fail, no_match);
+                    } else {
+                      setVisibility(fail, success, spinner, button, no_match);
+                    }
+                  }
+
+                  setTimeout(() => { // Reset to default after delay at the end
+                    setVisibility(button, spinner, success, fail, no_match);
+                  }, 1500);
+                }
+
                 async function getPersist() {
                   const response = await fetch("/settings/persist_logs", { method: "GET" });
                   const data = await response.json();
@@ -180,7 +217,15 @@ <h6 class="hover-label">
                     <input id="confirm-password" type="password">
                   </div>
                   <div>
-                    <a id="password" role="button" class="btn btn-primary btn-sm text-center" onClick="set_password();">Update Password</a>
+                    <a id="password-submit" role="button" class="btn btn-primary btn-sm text-center" onClick="set_password();">Update Password</a>
+                    <a id="password-success" role="button" class="btn btn-primary btn-sm text-center" style="display: none; background-color: #00AA00;">Success!</a>
+                    <a id="password-fail" role="button" class="btn btn-primary btn-sm text-center" style="display: none; background-color: #DD0000;">Failure...</a>
+                    <a id="password-no-match" role="button" class="btn btn-primary btn-sm text-center" style="display: none; background-color: #DD0000;">Passwords do not match!</a>
+                    <div id="password-spinner" style="display: none;">
+                      <i class="fa fa-circle-o-notch fa-spin" style="font-size:24px"></i>
+                    </div>
+                  </div>
+                  <div>
                   </div>
                 </div>
               </div>

amplipi/updater/static/js/update-ui.js

@@ -243,33 +243,6 @@ function populate_available_releases(releases) {
   }
 }
 
-async function set_password() {
-  password = $('#password').val()
-  confirm_password = $('#confirm-password').val()
-
-  if(password != confirm_password) {
-    alert("Passwords do not match.");
-    return;
-  }
-
-  body = JSON.stringify({'password':password})
-
-  res = await fetch('/password', {
-    method: 'POST',
-    body: body,
-    headers: {
-      "Content-Type": "application/json",
-    }
-  });
-
-  if(!res.ok) {
-    alert(`Error: ${res.statusText}`);
-    return;
-  }
-
-  alert('Password set.');
-}
-
 async function requestSupportTunnel() {
   // the below is 2 lines long intentionally, because it renders into a <pre> tag.
   $('#support-tunnel-detail').text(`Requesting a support tunnel. This may take up to 60s.