Enabled HTML formatting for flashMessages (#1017)

Enabled HTML formatting for flashMessages

src/__tests__/ui/box/__snapshots__/global_message.test.jsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GlobalMessage renders correctly given a success type 1`] = `
+<div
+  className="auth0-global-message auth0-global-message-success"
+>
+  <span
+    className="animated fadeInUp"
+  >
+    Success!
+  </span>
+</div>
+`;
+
+exports[`GlobalMessage renders correctly given an error type 1`] = `
+<div
+  className="auth0-global-message auth0-global-message-error"
+>
+  <span
+    className="animated fadeInUp"
+  >
+    An error occurred.
+  </span>
+</div>
+`;

src/__tests__/ui/box/global_message.test.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import { expectComponent } from '../../testUtils';
+
+import GlobalMessage from 'ui/box/global_message';
+
+describe('GlobalMessage', () => {
+  it('renders correctly given a success type', () => {
+    expectComponent(<GlobalMessage type="success" message="Success!" />).toMatchSnapshot();
+  });
+  it('renders correctly given an error type', () => {
+    expectComponent(<GlobalMessage type="error" message="An error occurred." />).toMatchSnapshot();
+  });
+  it('should NOT strip out HTML tags if given a React node', () => {
+    const message = React.createElement('span', {
+      dangerouslySetInnerHTML: { __html: '<b>Success!</b>' }
+    });
+    const wrapper = mount(<GlobalMessage type="success" message={message} />);
+    expect(wrapper.html()).toBe(
+      '<div class="auth0-global-message auth0-global-message-success"><span class="animated fadeInUp">' +
+        '<span><b>Success!</b></span></span></div>'
+    );
+  });
+  it('should strip out HTML tags if given a string', () => {
+    const wrapper = mount(<GlobalMessage type="success" message="<b>Success!</b>" />);
+    expect(wrapper.html()).toBe(
+      '<div class="auth0-global-message auth0-global-message-success"><span class="animated fadeInUp">' +
+        '&lt;b&gt;Success!&lt;/b&gt;</span></div>'
+    );
+  });
+});

src/ui/box/chrome.jsx

@@ -210,11 +210,17 @@ export default class Chrome extends React.Component {
         ref="submit"
       />;
 
+    function wrapGlobalMessage(message) {
+      return typeof message === 'string'
+        ? React.createElement('span', { dangerouslySetInnerHTML: { __html: message } })
+        : message;
+    }
+
     const globalError = error
-      ? <GlobalMessage key="global-error" message={error} type="error" />
+      ? <GlobalMessage key="global-error" message={wrapGlobalMessage(error)} type="error" />
       : null;
     const globalSuccess = success
-      ? <GlobalMessage key="global-success" message={success} type="success" />
+      ? <GlobalMessage key="global-success" message={wrapGlobalMessage(success)} type="success" />
       : null;
 
     const Content = contentComponent;

src/ui/box/global_message.jsx

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import ReactDOM from 'react-dom';
 
 export default class GlobalMessage extends React.Component {
   render() {