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.