Error and success fields for user settings page

src/main/resources/static/js/userSettings.js

@@ -49,10 +49,11 @@ function saveNameEmailProfileChanges() {
                         var response = xhttp.responseText
                         // If the text is "success"
                         if (response == "success"){
-                            // Alert the user that the change was successful
-                            alert("Details Change Success")
+                            document.getElementById("profileDetailsChangeFailure").style.display = "none";
+                            document.getElementById("profileDetailsChangeSuccess").style.display = "block";
                         }else{
-                        }
+                            document.getElementById("profileDetailsChangeSuccess").style.display = "none";
+                            document.getElementById("profileDetailsChangeFailure").style.display = "block";                        }
                         // Otherwise
                     } else {
                         console.error(xhttp.statusText);
@@ -82,14 +83,18 @@ function saveNameEmailProfileChanges() {
         // Logic for different responses
         xhttp.onload = function() {
             // If the status is ok (request succeeded
-            if (xhttp.readyState === 4 && xhttp.status === 200) {
-                // Get the response text
-                var response = xhttp.responseText
-                // If the text is "success"
-                if (response == "success"){
-                    // Alert the user that the change was successful
-                    alert("Details Change Success")
-                }else{
+            if (xhttp.readyState === 4) {
+                if (xhttp.status === 200) {
+                    // Get the response text
+                    var response = xhttp.responseText
+                    // If the text is "success"
+                    if (response == "success"){
+                        document.getElementById("profileDetailsChangeFailure").style.display = "none";
+                        document.getElementById("profileDetailsChangeSuccess").style.display = "block";
+                    }
+                } else {
+                    document.getElementById("profileDetailsChangeSuccess").style.display = "none";
+                    document.getElementById("profileDetailsChangeFailure").style.display = "block";
                 }
                 // Otherwise
             } else {
@@ -126,12 +131,17 @@ function savePasswordChanges() {
     // Logic for different responses
     xhttp.onload = function() {
         // If the status is ok (request succeeded
-        if (xhttp.readyState === 4 && xhttp.status === 200) {
-            // Get the response text
-            var response = xhttp.responseText
-            if (response == "success"){
-                alert("Password Change Success")
-            }else{
+        if (xhttp.readyState === 4) {
+            if (xhttp.status === 200) {
+                // Get the response text
+                var response = xhttp.responseText
+                if (response == "success"){
+                    document.getElementById("passwordChangeFailure").style.display = "none";
+                    document.getElementById("passwordChangeSuccess").style.display = "block";
+                }
+            } else {
+                document.getElementById("passwordChangeSuccess").style.display = "none";
+                document.getElementById("passwordChangeFailure").style.display = "block";
             }
         } else {
             console.error(xhttp.statusText);

src/main/resources/templates/fragments/user_settings.html

@@ -57,6 +57,10 @@
 
                     <button class="button is-link signIn-Button mt-4" onclick="saveNameEmailProfileChanges()">Save Changes</button>
                 </div>
+
+                <h2 class="help is-success" style="display:none;" id="profileDetailsChangeSuccess">Details Change Successful</h2>
+                <h2 class="help is-danger" style="display:none;" id="profileDetailsChangeFailure">Details Change Failed</h2>
+
             </div>
 
             <hr style="color:black; height:3px; opacity:100%">
@@ -89,6 +93,9 @@
 
                     <button onclick="savePasswordChanges()" class="button is-link signIn-Button mt-4" id="passwordSubmitButton">Save Changes</button>
                 </div>
+
+                <h2 class="help is-success" style="display:none;" id="passwordChangeSuccess">Password Change Success</h2>
+                <h2 class="help is-danger" style="display:none;" id="passwordChangeFailure">Password Change Failure</h2>
             </div>
         </div>
     </body>