Allow to display a flash message on lock.show (#639)

src/core/actions.js

@@ -70,6 +70,15 @@ export function openLock(id, opts) {
     return false;
   }
 
+  if (opts.flashMessage) {
+    if (!opts.flashMessage.type || ['error', 'success'].indexOf(opts.flashMessage.type) === -1) {
+      return l.emitUnrecoverableErrorEvent(m, "'flashMessage' must provide a valid type ['error','success']")
+    }
+    if (!opts.flashMessage.text) {
+      return l.emitUnrecoverableErrorEvent(m, "'flashMessage' must provide a text") 
+    }
+  }
+
   l.emitEvent(m, "show");
 
   swap(updateEntity, "lock", id, m => {

src/core/index.js

@@ -410,6 +410,10 @@ export function emitAuthorizationErrorEvent(m, error) {
   emitEvent(m, "authorization_error", error);
 }
 
+export function emitUnrecoverableErrorEvent(m, error) {
+  emitEvent(m, "unrecoverable_error", error)
+}
+
 export function showBadge(m) {
   return hasFreeSubscription(m) || false;
 }
@@ -421,6 +425,11 @@ export function overrideOptions(m, opts) {
     m = tset(m, "allowedConnections", Immutable.fromJS(opts.allowedConnections));
   }
 
+  if (opts.flashMessage) {
+    const key = "success" === opts.flashMessage.type ? "globalSuccess" : "globalError";
+    m = tset(m, key, opts.flashMessage.text);
+  }
+
   if (opts.auth && opts.auth.params) {
     m = tset(m, "authParams", Immutable.fromJS(opts.auth.params));
   }

support/index.html

@@ -12,12 +12,18 @@
   <div id="container"></div>
   <script src="/lock.js"></script>
   <script>
-    const cid = "yKJO1ckwuY1X8gPEhTRfhJXyObfiLxih";
-    const domain = "mdocs.auth0.com";
+    const cid = "ixeOHFhD7NSPxEQK6CFcswjUsa5YkcXS";
+    const domain = "auth0-tests-lock.auth0.com";
+    const options = {};
 
-    const lock = new Auth0Lock(cid, domain);
+    const lock = new Auth0Lock(cid, domain, options);
+
+    lock.on("authenticated", function(authResult) {
+      console.log(authResult);
+    });
 
     lock.show();
+
   </script>
 </body>
 </html>

test/helper/ui.js

@@ -49,7 +49,7 @@ export const wasLoginAttemptedWith = params => {
 
 // rendering
 
-export const displayLock = (name, opts = {}, done = () => {}) => {
+export const displayLock = (name, opts = {}, done = () => {}, show_ops = {}) => {
   switch(name) {
   case "enterprise and corporate":
     opts.allowedConnections = ["auth0.com", "rolodato.com"];
@@ -78,7 +78,7 @@ export const displayLock = (name, opts = {}, done = () => {}) => {
   }
 
   const lock = new Auth0Lock("cid", "domain", opts);
-  setTimeout(() => lock.show(), 175);
+  setTimeout(() => lock.show(show_ops), 175);
   setTimeout(done, 200);
   return lock;
 };
@@ -132,6 +132,29 @@ export const hasLoginSignUpTabs = hasViewFn(".auth0-lock-tabs");
 export const hasNoQuickAuthButton = lock => {
   return !qView(lock, ".auth0-lock-socia-button");
 };
+
+const hasFlashMessage = (query, lock, message) => {
+  const message_ele = q(lock, query);
+
+  if (! message_ele) {
+    return false;
+  }
+
+  const span = message_ele.querySelector('span');
+
+  if (! span) {
+    return false;
+  }
+
+  return span.innerText.toLowerCase() === message.toLowerCase();
+}
+export const hasErrorMessage = (lock, message) => {
+  return hasFlashMessage(".auth0-global-message-error", lock, message);
+};
+export const hasSuccessMessage = (lock, message) => {
+  return hasFlashMessage(".auth0-global-message-success", lock, message);
+};
+
 export const hasOneSocialButton = hasOneViewFn(".auth0-lock-social-button");
 export const hasOneSocialBigButton = hasOneViewFn(".auth0-lock-social-button.auth0-lock-social-big-button");
 export const hasPasswordInput = hasInputFn("password");

test/show_with_flash_message.test.js

@@ -0,0 +1,104 @@
+import expect from 'expect.js';
+import Auth0Lock from '../src/index';
+import * as h from './helper/ui';
+
+describe("show lock with flash message", function() {
+  before(h.stubWebApis);
+  after(h.restoreWebApis);
+
+  describe("with invalid options", function() {
+    beforeEach(function(done) {
+      this.lock = new Auth0Lock("cid", "domain");
+      done();
+    });
+
+    afterEach(function() {
+      this.lock.hide()
+    });
+
+    it("should fail if type is not provided", function(done) {
+
+      this.lock.on('unrecoverable_error', function(err) {
+        done();
+      })
+
+      this.lock.show({
+        flashMessage:{
+          text: 'error'
+        }
+      });
+
+    });
+
+    it("should fail if type value is not valid", function(done) {
+
+      this.lock.on('unrecoverable_error', function(err) {
+        done();
+      })
+
+      this.lock.show({
+        flashMessage:{
+          type: 'not-valid',
+          text: 'error'
+        }
+      });
+
+
+    });
+
+    it("should fail if text is not provided", function(done) {
+
+      this.lock.on('unrecoverable_error', function(err) {
+        done();
+      })
+
+      this.lock.show({
+        flashMessage:{
+          type: 'error'
+        }
+      });
+
+    });
+  });
+
+  describe("with valid options", function() {
+    it("should show an error flash message", function(done) {
+      const lock = new Auth0Lock("cid", "domain");
+
+      lock.on('show', () => {
+        var hasErrorMessage = h.hasErrorMessage(lock, 'error message');
+        expect(hasErrorMessage).to.be.ok();
+        lock.hide()
+        done();
+      })
+
+      lock.show({
+        flashMessage:{
+          type: 'error',
+          text: 'error message'
+        }
+      });
+
+    });
+
+    it("should show a success flash message", function(done) {
+      const lock = new Auth0Lock("cid", "domain");
+
+      lock.on('show', () => {
+        var hasSuccessMessage = h.hasSuccessMessage(lock, 'success message');
+        expect(hasSuccessMessage).to.be.ok();
+        lock.hide()
+        done();
+      })
+
+      lock.show({
+        flashMessage:{
+          type: 'success',
+          text: 'success message'
+        }
+      });
+
+    });
+  });
+
+});

test/sign_up_terms_agreement.ui.test.js

@@ -38,7 +38,7 @@ describe("sign up terms agreement", function() {
     });
 
     afterEach(function() {
-      // this.lock.hide();
+      this.lock.hide();
     });