Override text in Okta Sign-On widget that contains HTML tags

Questions
1

Hello,

Is it possible to include HTML tags in the text when overriding language in the Okta sign-on widget? In our tests, HTML tags are rendered as regular text. The login.properties has language keys that contain HTML, like for instance this key:

enroll.totp.downloadApp = Download {1} from the {2} onto your mobile device.

In other words, is it possible to override this text and also include an anchor HTML tag in the overridden text?

References:


Thank you,
Nils

1 Like
2

Hi Nils,

Were you able to find a solution, want to include privacy links in the config

Pombird

1 Like
3

I have resolved this issue by applying workaround. Hope it will help others.
Issue: The html tags defined in i18N is not rendering and shows as raw html on screen.

config.i18n.en["account.unlock.unlocked.desc"] =
  `You can log in using your existing username and password.<br>
  <p>You can reset your password online by navigating to customer login page and selecting
  <a href="${config.baseUrl}/signin/forgot-password" target="_self" class="link"><span style="color:#C01F3F;">Reset your password</span></a>
  from the 'Need help signing in?' menu.</p>`;

Workaround:
Insert new html element after existing i18N element using JavaScript.
After that we need to call this script on afterRender event of signin widget okta-login-container

Javascript:

oktaSignIn.on('afterRender', function (context) {
    if ((context.controller === 'account-unlocked') && config.features.selfServiceUnlock) {
        var referenceNode = document.querySelector("div.account-unlocked > form[data-se='account-unlocked'] > div > p");
        InsertUnlockAccountCustomSubTitleAfter(referenceNode);
    }
});

function InsertUnlockAccountCustomSubTitleAfter(referenceNode) {
    if ((referenceNode === undefined) ||
        (document.querySelector("#custom-unlock-account-form-subtitle") !== null)){
        return;
    }

    var anchorSpanTag = document.createElement("span");
    anchorSpanTag.setAttribute("style", "color:#C01F3F;");
    anchorSpanTag.innerHTML = "Reset your password";

    var anchorTag = document.createElement('a');
    anchorTag.setAttribute("title", "Reset your password");
    anchorTag.setAttribute("href", `${config.baseUrl}/signin/forgot-password`);
    anchorTag.setAttribute("target", "_self");
    anchorTag.setAttribute("class", "link");
    anchorTag.appendChild(anchorSpanTag);

    var spanTag = document.createElement('span');
    var spanTagBeforeText = document.createTextNode("You can reset your password online by navigating to customer login page and selecting ");
    var spanTagAfterText = document.createTextNode(" from the 'Need help signing in?' menu.");
    spanTag.append(spanTagBeforeText);
    spanTag.appendChild(anchorTag);
    spanTag.append(spanTagAfterText);

    var paraTag = document.createElement('p');
    paraTag.setAttribute("id", "custom-unlock-account-form-subtitle");
    paraTag.setAttribute("class", "okta-form-subtitle o-form-explain");
    paraTag.setAttribute("data-se", "o-form-explain");
    paraTag.appendChild(spanTag);

    referenceNode.parentNode.insertBefore(paraTag, referenceNode.nextSibling);
}

Output:

account-unlocked

Output Html Page Source:

<div class="account-unlocked">
    <form data-se="account-unlocked" method="POST" action="/signin/account-unlocked" slot="content" id="form63" class="o-form o-form-edit-mode">
        <div data-se="o-form-content" class="o-form-content o-form-theme clearfix">
            <h2 data-se="o-form-head" class="okta-form-title o-form-head">Account successfully unlocked</h2>
            <p class="okta-form-subtitle o-form-explain" data-se="o-form-explain">You can log in using your existing username and password.</p>
            <!--Start: Dynamically adding para tag here with link-->
            <p id="custom-unlock-account-form-subtitle" class="okta-form-subtitle o-form-explain" data-se="o-form-explain">
                <span>
                    You can reset your password online by navigating to customer login page and selecting
                    <a href="https://<config.BaseUrl>/signin/forgot-password" target="_self" class="link">
                        <span style="color:#C01F3F;">Reset your password</span>
                    </a>
                    from the 'Need help signing in?' menu.                  
                </span>
            </p>
           <!--End: Dynamically adding para tag here with link-->
            <div class="o-form-error-container" data-se="o-form-error-container"/>
            <div class="o-form-fieldset-container" data-se="o-form-fieldset-container">
                <a data-se="back-button" class="button button-primary button-wide link-button" href="#">Back to sign in</a>
            </div>
        </div>
    </form>
</div>
1 Like
4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.