Please, log out and log in again. There won’t be any block update.
Update: it works by following your last tip => log in => then log out => then log in
Though there is still a problem when updating the password => no tip that something happened
That is a separate case. We have a task open for that. Will either make the button green or show success message. Will post here when deployed.
Great, Thanks
WOO confirmed it worked as mattieu described, THANK YOU so much Maria & Artur <3
re: the “no tip” ticket: would it be possible/faster to address this with a short term workaround using the event listeners being discussed in this thread? Action Buttons - Update Records event listeners - #12 by danyalamriben
If I was able to add that code in, that would completely resolve this workflow for my needs! Just figured it’s worth asking… regardless, I understand you are all hard at work on an undoubtably overflowing backlog so I understand things take time. This would make quite a big difference for my new users, at least 
Thanks again!
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';">×</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 
.
.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
dang I keep trying it with the different variations and it isn’t working 
if you are willing to share, how do you typically discern the selector from inspecting code? mine has two different css selectors when i look but both look pretty different from yours! maybe I can get better at self troubleshooting!
Before everything : put the whole code in the header code of the page.
Then, only one thing to adapt, this line =>
const elementUpdatePasswordButton = document.querySelector(".css-efso38");
Then, here is the right selector:
1 Like
I found a more “generic” selector:
const elementUpdatePasswordButton = document.querySelector("#user-accounts1 form:nth-child(3) .MuiButtonBase-root");
Just change user-accounts1 by the id of your user profile block
Folks! the improvement of showing success when changing the password on User Profile block is deployed already 
Thank you!
1 Like
I’m confused, mine still isnt doing it? I have no “refresh block” update for my profile block, but even after a change and publish still just does nothing
1 Like
How do we get this update? Our User Profile block doesn’t show anything when changing a password except for briefly turning the button green (totally inadequate).
Hey @JeanHT,
Will you please let me know whether you see an available update when you press on block in your Studio?
I don’t.
I’m told by support that the new behavior is that the button briefly turns green to indicate success for changing the password. I’ve explained to support that a color change is not sufficient, particularly for the less sophisticated user. Every Web site I can recall using shows a message for success/failure. The color change is transient and not clear.
Hi,
Meanwhile, if you want a clear indicator that the password is changed successfully, here is a custom code to copy paste in the page settings where is the user account block => then click custom code then just paste the whole code in the “header” part:
Just change user-accounts1 by your user account block id/name in the line window.addEventListener('block-loaded-user-accounts1', () =>
<div id="customModal">
Your password has been successfully changed
</div>
<style>
#customModal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
border: 2px solid green;
border-radius: 3px;
background-color: #ffffff;
color: green;
font-weight: 700;
z-index: 9999;
max-width: 400px;
text-align: center;
font-size: 18px;
}
</style>
<script>
function handleAlert() {
var elem = document.querySelectorAll('button[type=submit]')[1];
if (!elem) {
return;
}
window.setInterval(function () {
if (elem.querySelector('.success-icon')) {
setTimeout(() => {
const modal = document.getElementById('customModal');
modal.style.display = 'block';
setTimeout(() => {
modal.style.display = 'none';
}, 4000);
}, 1000);
}
}, 500);
}
window.addEventListener('block-loaded-user-accounts1', () => {
handleAlert();
});
</script>
Note that the look can be customized, same for the display duration so feel free to ask here.
Also, I would be able to replicate it for the first button if needed (the one to change information like name, avatar picture etc.)
1 Like
Thanks a lot @matthieu_chateau For the workaround, This was already recommended, however in the code you provided it is better to use window.addEventListener('block-loaded-block-id', () => instead of the current event listener, as there could be some inconsistencies showing the success message and after lots of testing it appeared that this worked better.