Conditional text on universal reset password prompt?

Help
,
1

I’m following the guide to invite users to the application via password change ticket.

I’ve got custom domains set up, and now I’m trying to configure the reset-password prompt.

Using your Auth0 cli, I was able to load up the storybook editor tool to modify the reset-password template.

How can I conditionally render the text? I couldn’t figure it out and ended up doing this, which I don’t think is a good solution because I’m manually updating the text in the widget:

<!DOCTYPE html>
<html lang="{{locale}}">

<head>
    {%- auth0:head -%}
    <title>Welcome to {{ application.name }} </title>
</head>

<body class="_widget-auto-layout">
    {%- auth0:widget -%}
</body>

<script>
    function getQueryParameter(name) {
        const url = window.location.href;
        const params = new URLSearchParams(url.substring(url.indexOf('#') + 1));
        return params.get(name);
      }
 
      const isInvite = getQueryParameter('type') === 'invite';

      if (isInvite) { 
        document.title = 'Set Your Password';
        const header = document.querySelector('h1');
        if (header) {
          header.textContent = 'Set Your Password';
        }
        const description = document.querySelector('p');
        if (description) {
          description.textContent = 'Please set your password to activate your account.';
        }
      }
</script>

</html>

Is there some way to have the auth0:widget use the values I have based on the param type?

2

I also face this issue. Please help me.

4

Hi @kdm,

I recommend referring to our https://auth0.com/docs/customize/login-pages/universal-login/customize-templates#login-box-image-layout for an example on how to include conditionals in your Universal Login page templates.

Let me know if you have any questions.

Thanks,
Rueben

5

Thanks, I know that, but it isn’t what I am asking about. Actually, I’m asking about the auth0_widget itself.

What you linked me does not make any changes into the auth0_widget, it just adjusts some styles. Here’s the example from docs:

 {% if prompt.name == "login" or prompt.name == "signup" %} 
        <div class="prompt-wrapper">
        {%- auth0:widget -%}
        </div>
    {% else %}
        {%- auth0:widget -%}
    {% endif %}

If I want to change the auth0 widget’s title text (“Reset. your password”) to (“Set your password”) based on a condition, how can I do that?

In my original code that I shared above, I updated these elements using querySelector because I couldn’t find an example of this in the docs.

Sorry for the confusion, please let me know if there is a way to do this.

6

Hi @kdm,

Thanks for the update and clarification.

To change the text for the specific Universal Login pages, you can follow our Customize Universal Login Text Elements documentation.

Specifically, you will want to change the reset-password prompt for each screen.

Note that you won’t be able to change the text dynamically. It will be static changes.

Thanks,
Rueben