Hide Name and Email fields from User Profile block

Custom Coding
37

Try this one:

<div id="alertbox1" class="alertbox">
  <div class="alertbox-header">Success</div>
  <div class="alertbox-message">One small step for man, one giant leap for mankind... You just have updated your password!</div>
  <button class="alertbox-close" onclick="document.getElementById('alertbox1').style.display='none';">&times;</button>
</div>

<style>
.alertbox {
  display: none;
  position: fixed;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  border: 1px solid #ebebeb;
  border-radius: 10px;
  background-color: #FFFFFF;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  padding: 15px;
  text-align: center;
}

.alertbox-header {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: green;
}

.alertbox-message {
  font-size: 16px;
  margin-bottom: 20px;
  color: #182939;
}

.alertbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  font-weight: bold;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.alertbox.error {
  background-color: #FFFFFF;
}

.alertbox.error .alertbox-header {
  color: red;
}
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const alertbox = document.getElementById("alertbox1");
    const elementUpdatePasswordButton = document.querySelector(".css-efso38");

    function showSuccessAlert() {
      alertbox.style.display = "block";
      setTimeout(function () {
        alertbox.style.display = "none";
      }, 6000); 
    }

    function checkToastContainer() {
      setTimeout(function () {
        const toastContainer = document.querySelector("#toast-container");
        if (!toastContainer || getComputedStyle(toastContainer).display === "none") {
          showSuccessAlert();
          const observer = new MutationObserver(function (mutationsList) {
            for (const mutation of mutationsList) {
              const toastContainer = document.querySelector("#toast-container");
              if (toastContainer && getComputedStyle(toastContainer).display !== "none") {
                observer.disconnect();
                break;
              }
            }
          });
          observer.observe(document.body, { childList: true, subtree: true });
        }
      }, 2000); 
    }

    if (elementUpdatePasswordButton) {
      elementUpdatePasswordButton.addEventListener("click", checkToastContainer);
    }
  });
</script>

So for the alert box I just took what I already did in this post: Add a fully customizable alert box on form submit or update or delete action (Failure & Success Scenarios)

Now the script is different => >When there is something wrong with the password chnage there is a toaster appearing. So I just thought that if the toaster doesn’t appear… everything fine and the alert box should appear to show a success.
So I use a mutation observer, triggered two seconds after the udpate password button is clicked.

May be not the most… straightforward method but hey :man_shrugging:.

.css-efso38 being the selector for the update password button. I think something like #user-accounts1.MuiButtonBase-root:nth-child(2) would work (not sure) without being dependent on those .cssxxxx (user-accounts1 being the ID of my profile block) but ok.

1 Like