Change error message on login

Ask the community
1

Hi,
Is there a way to change the error message for sign-in?

image
image774×261 3.25 KB

2

There is no feature in Softr to change the error message. However, it could be changed with some custom code that detected the error being displayed and modified its text. Let me mess around and see if I can whip up a script for you.

3

Here’s a script you can test out to see if it does what you need. It goes in the Code Inside Footer for either a specific page or for your whole site, depending on your needs.

You will need to edit the script to add in the text that you want to display for the title and message of the error message.

You can also add more substitutions to the script, hopefully it is clear how to do that, but let me know.

You should see results similar to this:

image
image826×164 10.7 KB 

<script>

const substitutions = {
    'Only registered users can sign in with code': {
        'toast-title': "Change this to the title you want",
        'toast-message': "Change this to the message you want"
    },
    'Invalid sign in code': {
        'toast-title': "Sorry about all this",
        'toast-message': "Only cats can sign in with code"
    },
};

const observer = new MutationObserver(function(mutations_list) {
  mutations_list.forEach(function(mutation) {
    mutation.addedNodes.forEach(function(added_node) {
      const k = Object.keys(substitutions);
      var i = 0;
      while (i < k.length) {
          const matchMessage = k[i++];
          const newTitle = substitutions[matchMessage]['toast-title'];
          const newMessage = substitutions[matchMessage]['toast-message'];
          if ((typeof added_node.querySelector) === 'function') {
             const toastMessageNode = added_node.querySelector('.toast-message');
             if (toastMessageNode && (toastMessageNode.textContent === matchMessage)) {
               added_node.querySelector('.toast-title').textContent = newTitle;
               toastMessageNode.textContent = newMessage;
             }
          }
      }
    });
  });
});
  
observer.observe(document.querySelector("html"), { subtree: true, childList: true });

</script>
3 Likes
4

That’s amazing. I can’t thank you enough!!