Adds support for html in custom login text

[mabashian]

SUMMARY

link #7603

I couldn't come up with a way to do this without breaking up the component and discontinuing use of the LoginPage PF component. This is because LoginPage expects the textContent component (what we use to display the custom login text) to be a string. By using the underlying LoginPage components I reconstructed the login page and got more control over that prop.

The custom message in the old UI supported both strings and HTML:

So we need to support rendering HTML but we need to do it in a safe way. Our solution to that was https://docs.angularjs.org/api/ngSanitize. React doesn't seem to have anything like this built in so I went looking for outside help. html-entities is already included in our project but as best as I can tell that lib is mainly focused on swapping special characters out for html entities. I wanted something that was going to strip the HTML of bits that could be exploited by a malicious actor.

I settled on https://www.npmjs.com/package/sanitize-html because it was a) small and b) actively maintained. The API was simple and let me sanitize the HTML before setting it using dangerouslySetInnerHTML. If we need to tweak the configuration away from the default values then we can certainly do that.

ISSUE TYPE

• Feature Pull Request

COMPONENT NAME

• UI

[mabashian]

@jakemcdermott curious to see what you think of this approach. You had mentioned html-entities in the original issue and I want to make sure I'm not missing a possible solution that involves just that library.

[softwarefactory-project-zuul]

Build succeeded.

• awx-api-lint : SUCCESS in 7m 45s
• awx-api : SUCCESS in 11m 39s
• awx-ui : SUCCESS in 10m 36s
• awx-swagger : SUCCESS in 8m 36s
• awx-detect-schema-change : SUCCESS in 13m 18s (non-voting)
• awx-ansible-modules : SUCCESS in 10m 35s

[softwarefactory-project-zuul]

Build succeeded.

• awx-api-lint : SUCCESS in 2m 10s
• awx-api : SUCCESS in 6m 51s
• awx-ui : SUCCESS in 11m 36s
• awx-swagger : SUCCESS in 8m 28s
• awx-detect-schema-change : SUCCESS in 8m 05s (non-voting)
• awx-ansible-modules : SUCCESS in 4m 46s

[one-t]

just adding here, allowable tags (according to defaults for sanitizeHTML are

allowedTags: [
  "address", "article", "aside", "footer", "header", "h1", "h2", "h3", "h4",
  "h5", "h6", "hgroup", "main", "nav", "section", "blockquote", "dd", "div",
  "dl", "dt", "figcaption", "figure", "hr", "li", "main", "ol", "p", "pre",
  "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn",
  "em", "i", "kbd", "mark", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp",
  "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "caption",
  "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr"
],

[one-t]

Hey, @mabashian - can we add ouia-ids to the logo and footer elements?

[softwarefactory-project-zuul]

Build succeeded.

• awx-api-lint : SUCCESS in 1m 54s
• awx-api : SUCCESS in 6m 51s
• awx-ui : SUCCESS in 10m 37s
• awx-swagger : SUCCESS in 7m 51s
• awx-detect-schema-change : SUCCESS in 7m 28s (non-voting)
• awx-ansible-modules : SUCCESS in 4m 26s

[softwarefactory-project-zuul]

Build failed.

• awx-api-lint : SUCCESS in 1m 51s
• awx-api : SUCCESS in 6m 58s
• awx-ui : FAILURE in 3m 51s
• awx-swagger : SUCCESS in 8m 26s
• awx-detect-schema-change : SUCCESS in 7m 53s (non-voting)
• awx-ansible-modules : SUCCESS in 4m 39s

[softwarefactory-project-zuul]

Build succeeded.

• awx-api-lint : SUCCESS in 1m 52s
• awx-api : SUCCESS in 7m 15s
• awx-ui : SUCCESS in 11m 56s
• awx-swagger : SUCCESS in 11m 07s
• awx-detect-schema-change : SUCCESS in 7m 57s (non-voting)
• awx-ansible-modules : SUCCESS in 4m 38s

[softwarefactory-project-zuul]

Build succeeded.

• awx-api-lint : SUCCESS in 2m 00s
• awx-api : SUCCESS in 9m 05s
• awx-ui : SUCCESS in 13m 01s
• awx-swagger : SUCCESS in 8m 01s
• awx-detect-schema-change : SUCCESS in 10m 45s (non-voting)
• awx-ansible-modules : SUCCESS in 7m 31s

[softwarefactory-project-zuul]

Build succeeded (gate pipeline).

• awx-api-lint : SUCCESS in 3m 06s
• awx-api : SUCCESS in 7m 54s
• awx-ui : SUCCESS in 14m 36s
• awx-swagger : SUCCESS in 7m 48s
• awx-detect-schema-change : SUCCESS in 7m 40s (non-voting)
• awx-ansible-modules : SUCCESS in 4m 41s
• awx-push-new-schema : SUCCESS in 7m 46s (non-voting)