hi there, so, as you might have seen, the sign-in block is a bit rigid to customization, even more when we talk about system pop up messages, as i’m not coding expert, with the help of ChatGPT I was able to insert a custom code to the page which allowed me to translate some Labels that originally Softr wouldn’t allow plus the system error displayed when entering a wrong password, I left the code here so it can help other’s too.
<script>
window.addEventListener('block-loaded-user-accounts3', () => {
setTimeout(()=>{
// Translate form labels
[...document.querySelectorAll('#user-accounts3 .form-input-label')].forEach((label)=>{
if(label.innerText == "Email"){
label.innerText = "Correo electrónico"
}
if(label.innerText == "Password"){
label.innerText = "Contraseña"
}
});
// Translate system error messages
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.addedNodes.length > 0) {
mutation.addedNodes.forEach((node) => {
// Find the error toast and modify its text
if (node.querySelector && node.querySelector('.sonner-toast')) {
const errorTitle = node.querySelector('[data-title]');
const errorDescription = node.querySelector('[data-description]');
if (errorTitle && errorTitle.innerText.includes("Something went wrong")) {
errorTitle.innerText = "Algo salió mal";
}
if (errorDescription && errorDescription.innerText.includes("Please ensure your email and password are correct.")) {
errorDescription.innerText = "Por favor, asegúrese de que su correo electrónico y contraseña sean correctos.";
}
}
});
}
});
});
// Observe changes in the document for when the error message pops up
observer.observe(document.body, { childList: true, subtree: true });
}, 100);
});
</script>
Before:
After:
