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.
Will you please share a magic link for me to check? You can send it PM.
Thanks in advance @JeanHT
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.
Updated!
And for the record, the code to add a clear visual on successful information change and on successful password change:
<div id="customModal" class="custom-modal">
Your information was successfully updated
</div>
<div id="customModal2" class="custom-modal">
Your password was successfully changed
</div>
<style>
.custom-modal {
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(index) {
var elem = document.querySelectorAll('button[type=submit]')[index];
if (!elem) {
return;
}
window.setInterval(function () {
if (elem.querySelector('.success-icon')) {
setTimeout(() => {
const modal = document.getElementById(index === 0 ? 'customModal' : 'customModal2');
modal.style.display = 'block';
setTimeout(() => {
modal.style.display = 'none';
}, 4000);
}, 1000);
}
}, 500);
}
window.addEventListener('block-loaded-user-accounts1', () => {
handleAlert(0);
handleAlert(1);
});
</script>
1 Like
Hi @maria,
Iām currently working on configuring the user profile block to only allow users to edit their pictures and associated texts. I want to avoid them editing their names within this block. The names and emails are managed on a separate page for profile information, and we have another section for email signature configuration.
Iāve tried implementing the code you provided:
<script>
document.addEventListener("DOMContentLoaded", function () {
$('#user-accounts2 #sw-form-capture-full_name-input').removeClass('sw-display-inline-block');
$('#user-accounts2 #sw-form-capture-full_name-input').addClass('d-none');
$('#user-accounts2 #sw-form-capture-email-input').removeClass('sw-display-inline-block');
$('#user-accounts2 #sw-form-capture-email-input').addClass('d-none');
$('#user-accounts2 .hr').addClass('d-none');
});
</script>
Unfortunately, the āNameā and āEmailā fields still appear in the User Profile Block when I apply this code. Could you please assist in troubleshooting this issue?
Thank you for your help! 
Hey @lea , feel free to try this code to hide the Name, Email and avatar fields.
<script>
window.addEventListener('block-loaded-user-accounts3', () => {
var formParent = document.querySelector('form').parentNode;
var foundChangePassword = false;
var child = formParent.firstElementChild;
while (child) {
var nextSibling = child.nextElementSibling;
if (foundChangePassword) {
break;
}
if (child.tagName === 'FORM') {
foundChangePassword = true;
}
formParent.removeChild(child);
child = nextSibling;
}
var divElement = document.querySelector('div[style*="border-top: 1px solid rgb(237, 237, 237)"]');
if (divElement) {
divElement.parentNode.removeChild(divElement);
}
});
</script>
Just replace your block ID (name) in the code with yours.
Thanks @Andranik for the answer, this code works well to hide all user information (Mail, name, a photo field and a text field) but not only the first 2 lines (Mail and name), any idea to hide only the āmandatoryā fields of softr.io?
Thanks for getting back @lea Can you please DM me a magic link and the user profileās path so I can share it with the team?
Here is the code:
<script>
document.addEventListener("DOMContentLoaded", function () {
var elements = document.querySelectorAll('.form-input-component-wrapper');
for (var i = 0; i < elements.length && i < 2; i++) {
elements[i].classList.add('d-none');
}
});
</script>
Remove the placeholder and the label of Name and Email fields and it will work
2 Likes
Hey @lea Here is the code to use to hide the first two fields only (email & name).
<script>
window.addEventListener('block-loaded-user-accounts2', function () {
var elements = document.querySelectorAll('.form-input-component-wrapper');
for (var i = 0; i < elements.length && i < 2; i++) {
elements[i].classList.add('d-none');
}
});
</script>
Simply remove the placeholder and the label of Name and Email fields.
Thank you both very much for your suggestion 
(@matthieu_chateau @andranik), it works perfectly!
Now I would like to remove the password modification part at the bottom of the block, any idea?
I read all the scripts and it doesnāt seem easy to access the CSS container
#user-accounts1 form:nth-child(3) {
display: none;
}
Just change user-accounts1 by the id of your user account block
The code should inside style tags <style> </style>
1 Like
Awesome !!! thanks @matthieu_chateau