Problem statement
The New Universal Login custom template has custom scripts in it. The script replaces the “href” attribute of the “a” element to overwrite the “Forgot password?” link. However, the script stopped working due to a change in the HTML structure on the page (login widget). How can this be prevented?
Cause
The common cause is a fragile CSS Selector. For example, the below selector can be broken with a small change in the HTML structure.
document.querySelector("form div:nth-child(4) div a")
As an example, in one past case, the element type was changed from “a” to “button”. Even if the CSS selector is resilient, it could break.
Solution
The HTML structure of the login page is considered to be “implementation details” that can be subject to change. It is not recommended that the login widget be updated with scripts.
Removing the default link with Management API and inserting a new link to the template (without using a script) would be the most stable approach. For more details, refer to the community post here.