Add support for success and error messages to be in HTML

auth0 · Mar 20, 2017 · e0590c7 · e0590c7
1 parent 388ff1b
commit e0590c7
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 18 deletions.
diff --git a/src/connection/database/actions.js b/src/connection/database/actions.js
@@ -142,8 +142,8 @@ function signUpError(id, error) {
     && invalidPasswordKeys[error.name])
     || error.code;
 
-  const errorMessage = i18n.str(m, ["error", "signUp", errorKey])
-    || i18n.str(m, ["error", "signUp", "lock.fallback"]);
+  const errorMessage = i18n.html(m, ["error", "signUp", errorKey])
+    || i18n.html(m, ["error", "signUp", "lock.fallback"]);
 
   swap(updateEntity, "lock", id, l.setSubmitting, false, errorMessage);
 }
@@ -186,7 +186,7 @@ function resetPasswordSuccess(id) {
 
     // TODO: should be handled by box
     setTimeout(() => {
-      const successMessage = i18n.str(m, ["success", "forgotPassword"]);
+      const successMessage = i18n.html(m, ["success", "forgotPassword"]);
       swap(updateEntity, "lock", id, l.setGlobalSuccess, successMessage);
     }, 500);
   } else {
@@ -203,8 +203,8 @@ function resetPasswordSuccess(id) {
 function resetPasswordError(id, error) {
   const m = read(getEntity, "lock", id);
 
-  const errorMessage = i18n.str(m, ["error", "forgotPassword", error.code])
-    || i18n.str(m, ["error", "forgotPassword", "lock.fallback"]);
+  const errorMessage = i18n.html(m, ["error", "forgotPassword", error.code])
+    || i18n.html(m, ["error", "forgotPassword", "lock.fallback"]);
 
   swap(updateEntity, "lock", id, l.setSubmitting, false, errorMessage);
 }

diff --git a/src/connection/passwordless/actions.js b/src/connection/passwordless/actions.js
@@ -40,8 +40,8 @@ function startPasswordlessErrorMessage(m, error, medium) {
     key = "bad.phone_number";
   }
 
-  return i18n.str(m, ["error", "passwordless", key])
-    || i18n.str(m, ["error", "passwordless", "lock.fallback"]);
+  return i18n.html(m, ["error", "passwordless", key])
+    || i18n.html(m, ["error", "passwordless", "lock.fallback"]);
 }
 
 export function requestPasswordlessEmailError(id, error) {

diff --git a/src/core/index.js b/src/core/index.js
@@ -480,13 +480,13 @@ export function loginErrorMessage(m, error, type) {
   // explicitly. We should figure out if there was a reason for that.
 
   if (error.status === 0) {
-    return i18n.str(m, ["error", "login", "lock.network"]);
+    return i18n.html(m, ["error", "login", "lock.network"]);
   }
 
   // Custom rule error (except blocked_user)
   if (error.code === "rule_error") {
     return error.description
-      || i18n.str(m, ["error", "login", "lock.fallback"]);
+      || i18n.html(m, ["error", "login", "lock.fallback"]);
   }
 
   const INVALID_MAP = {
@@ -508,8 +508,8 @@ export function loginErrorMessage(m, error, type) {
     code = "lock.mfa_invalid_code";
   }
 
-  return i18n.str(m, ["error", "login", code])
-    || i18n.str(m, ["error", "login", "lock.fallback"]);
+  return i18n.html(m, ["error", "login", code])
+    || i18n.html(m, ["error", "login", "lock.fallback"]);
 }
 
 // TODO: rename to something less generic that is easier to grep

diff --git a/src/field/email.js b/src/field/email.js
@@ -21,7 +21,7 @@ export function setEmail(m, str) {
 
     return {
       valid: validateEmail(str) && validHRDEMail,
-      hint: !validHRDEMail ? i18n.str(m, ["error", "login", "hrd.not_matching_email"]) : undefined
+      hint: !validHRDEMail ? i18n.html(m, ["error", "login", "hrd.not_matching_email"]) : undefined
     };
   });
 }

diff --git a/src/ui/box/chrome.jsx b/src/ui/box/chrome.jsx
@@ -303,13 +303,13 @@ Chrome.propTypes = {
   contentComponent: React.PropTypes.func.isRequired, // TODO: it also can be a class component
   contentProps: React.PropTypes.object.isRequired,
   disableSubmitButton: React.PropTypes.bool.isRequired,
-  error: React.PropTypes.string,
+  error: React.PropTypes.node,
   isSubmitting: React.PropTypes.bool.isRequired,
   logo: React.PropTypes.string.isRequired,
   primaryColor: React.PropTypes.string.isRequired,
   showSubmitButton: React.PropTypes.bool.isRequired,
   submitButtonLabel: React.PropTypes.string,
-  success: React.PropTypes.string,
+  success: React.PropTypes.node,
   terms: React.PropTypes.element,
   title: React.PropTypes.string,
   transitionName: React.PropTypes.string.isRequired

diff --git a/src/ui/box/container.jsx b/src/ui/box/container.jsx
@@ -221,7 +221,7 @@ Container.propTypes = {
   contentComponent: React.PropTypes.func.isRequired, // TODO: it also can be a class component
   contentProps: React.PropTypes.object.isRequired,
   disableSubmitButton: React.PropTypes.bool.isRequired,
-  error: React.PropTypes.string,
+  error: React.PropTypes.node,
   isMobile: React.PropTypes.bool.isRequired,
   isModal: React.PropTypes.bool.isRequired,
   isSubmitting: React.PropTypes.bool.isRequired,
@@ -230,7 +230,7 @@ Container.propTypes = {
   screenName: React.PropTypes.string.isRequired,
   showBadge: React.PropTypes.bool.isRequired,
   submitButtonLabel: React.PropTypes.string,
-  success: React.PropTypes.string,
+  success: React.PropTypes.node,
   tabs: React.PropTypes.bool,
   terms: React.PropTypes.element,
   title: React.PropTypes.string,

diff --git a/src/ui/box/global_message.jsx b/src/ui/box/global_message.jsx
@@ -6,7 +6,6 @@ export default class GlobalMessage extends React.Component {
   render() {
     const { message, type } = this.props;
     const className = `auth0-global-message auth0-global-message-${type}`
-
     return (
       <div className={className}>
         <span className="animated fadeInUp">{message}</span>
@@ -17,6 +16,6 @@ export default class GlobalMessage extends React.Component {
 }
 
 GlobalMessage.propTypes = {
-  message: React.PropTypes.string.isRequired,
+  message: React.PropTypes.node.isRequired,
   type: React.PropTypes.oneOf(['error', 'success']).isRequired
 }