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.
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
Agree that a temporary green button upon update is unclear. Not sure why a simple success message wasn’t deployed. Perhaps too many functions for this block to have a particular default message?
Since it’s been advised by Softr to use this block for onboarding after a user reaches it from the sign in with code block or magic link, can you please provide a code that simply removes the “Old password” field. Users haven’t entered a new password at this point in their journey, so it’s confusing when they see an “Old password” field. All they should see is the “New password” field.
Hey folks, I have some good news. We deployed an improvement to show a success message when updating the profile or changing the password on the User Profile block
I need a lot of help, I am trying to use the user profile block, because I need to update data quickly that affects the visibility of the components, the issue is that these fields were previously sent through a zappier cath and it is very slow, I used the option to show the information in tables and be able to view them but it doesn’t look good.
I have put the indicated code and it does not work, is there another alternative.
Thank you!!
Hi folks, have an updated code for this purpose. Place it in page settings → Custom code → Head, replace the BLOCKID with your actual block name, save and preview/publish
<script>
window.addEventListener('block-loaded-BLOCKID', () => {
setTimeout(()=>{
if(document.querySelectorAll('#BLOCKID .wrapper-container>form .form-input-holder').length>2){
let inputsToRemove = [...document.querySelectorAll('#BLOCKID .wrapper-container>form .form-input-holder')].splice(0, 2);
inputsToRemove.forEach((input)=>{
input.remove();
})
}
}, 200)
});
</script>
1 Like
I have tried the above code to hide the name and email field (only want the avatar field) but its not working.
<script>
window.addEventListener('block-loaded-user-accounts1', () => {
setTimeout(()=>{
if(document.querySelectorAll('#user-accounts1 .wrapper-container>form .form-input-holder').length>2){
let inputsToRemove = [...document.querySelectorAll('#BLOCKID .wrapper-container>form .form-input-holder')].splice(0, 2);
inputsToRemove.forEach((input)=>{
input.remove();
})
}
}, 200)
});
</script>