feat: Adds support for custom button in idp discovery flows (#591)

- Adds custom buttons on identifier first flows for idp discovery feature. Resolves: OKTA-198129
okta · Nov 29, 2018 · d9536eb · d9536eb
1 parent 84143f4
commit d9536eb
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 9 deletions.
diff --git a/src/IDPDiscoveryController.js b/src/IDPDiscoveryController.js
@@ -17,10 +17,11 @@ define([
   'views/idp-discovery/IDPDiscoveryForm',
   'models/IDPDiscovery',
   'views/shared/Footer',
-  'util/BaseLoginController'
+  'util/BaseLoginController',
+  'views/primary-auth/CustomButtons'
 ],
 function (Okta, PrimaryAuthController, PrimaryAuthModel, IDPDiscoveryForm, IDPDiscoveryModel,
-  Footer, BaseLoginController) {
+  Footer, BaseLoginController, CustomButtons) {
 
   return PrimaryAuthController.extend({
     className: 'idp-discovery',
@@ -40,6 +41,12 @@ function (Okta, PrimaryAuthController, PrimaryAuthModel, IDPDiscoveryForm, IDPDi
 
       this.addListeners();
 
+      // If social auth is configured, 'socialAuthPositionTop' will determine
+      // the order in which the social auth and primary auth are shown on the screen.
+      if (options.settings.get('hasConfiguredButtons')) {
+        this.add(CustomButtons, {prepend: options.settings.get('socialAuthPositionTop')});
+      }
+
       this.addFooter(options);
 
       this.setUsername();

diff --git a/test/unit/spec/IDPDiscovery_spec.js b/test/unit/spec/IDPDiscovery_spec.js
@@ -134,6 +134,64 @@ function (Q, OktaAuth, LoginUtil, Okta, Util, AuthContainer, IDPDiscoveryForm, B
     return name;
   }
 
+  function setupWithCustomButtons () {
+    var settings = {
+      customButtons: [
+        {
+          title: 'test text',
+          className: 'test-class',
+          click: function (e) {
+            $(e.target).addClass('new-class');
+          },
+          dataAttr: 'test-data'
+        }
+      ]
+    };
+    return setup(settings);
+  }
+
+  function setupWithCustomButtonsWithIdp () {
+    var settings = {
+      customButtons: [
+        {
+          title: 'test text',
+          className: 'test-class',
+          click: function (e) {
+            $(e.target).addClass('new-class');
+          }
+        }
+      ],
+      idps: [
+        {
+          type: 'FACEBOOK',
+          id: '0oaidiw9udOSceD1234'
+        }
+      ]
+    };
+    return setup(settings);
+  }
+
+  function setupWithoutCustomButtonsAndWithIdp () {
+    var settings = {
+      customButtons: undefined,
+      idps: [
+        {
+          type: 'FACEBOOK',
+          id: '0oaidiw9udOSceD1234'
+        }
+      ]
+    };
+    return setup(settings);
+  }
+
+  function setupWithoutCustomButtonsWithoutIdp () {
+    var settings = {
+      customButtons: undefined,
+      idps: undefined
+    };
+    return setup(settings);
+  }
+
   var setupWithTransformUsername = _.partial(setup, {username: 'foobar', transformUsername: transformUsername});
   var setupWithTransformUsernameOnUnlock = _.partial(setup, {transformUsername: transformUsernameOnUnlock});
 
@@ -1133,6 +1191,65 @@ function (Q, OktaAuth, LoginUtil, Okta, Util, AuthContainer, IDPDiscoveryForm, B
         });
       });
     });
-
+    Expect.describe('Additional Auth Button', function () {
+      itp('does not show the divider and buttons if settings.customButtons is not set', function () {
+        return setup().then(function (test) {
+          expect(test.form.authDivider().length).toBe(0);
+          expect(test.form.additionalAuthButton().length).toBe(0);
+        });
+      });
+      itp('show the divider and buttons if settings.customButtons is not empty', function () {
+        return setupWithCustomButtons().then(function (test) {
+          expect(test.form.authDivider().length).toBe(1);
+          expect(test.form.additionalAuthButton().length).toBe(1);
+        });
+      });
+      itp('sets text with property passed', function () {
+        return setupWithCustomButtons().then(function (test){
+          expect(test.form.additionalAuthButton().text()).toEqual('test text');
+        });
+      });
+      itp('sets class with property passed', function () {
+        return setupWithCustomButtons().then(function (test){
+          expect(test.form.additionalAuthButton().hasClass('test-class')).toBe(true);
+        });
+      });
+      itp('clickHandler is called when button is clicked', function () {
+        return setupWithCustomButtons().then(function (test){
+          expect(test.form.additionalAuthButton().hasClass('new-class')).toBe(false);
+          test.form.additionalAuthButton().click();
+          expect(test.form.additionalAuthButton().hasClass('new-class')).toBe(true);
+        });
+      });
+      itp('displays social auth and custom buttons', function () {
+        return setupWithCustomButtonsWithIdp().then(function (test){
+          expect(test.form.authDivider().length).toBe(1);
+          expect(test.form.additionalAuthButton().length).toBe(1);
+          expect(test.form.facebookButton().length).toBe(1);
+          expect(test.form.forgotPasswordLinkVisible()).toBe(false);
+        });
+      });
+      itp('does not display custom buttons when it is undefined', function () {
+        return setupWithoutCustomButtonsAndWithIdp().then(function (test){
+          expect(test.form.authDivider().length).toBe(1);
+          expect(test.form.additionalAuthButton().length).toBe(0);
+          expect(test.form.facebookButton().length).toBe(1);
+        });
+      });
+      itp('does not display social auth when idps is undefined', function () {
+        return setupWithCustomButtons().then(function (test){
+          expect(test.form.authDivider().length).toBe(1);
+          expect(test.form.additionalAuthButton().length).toBe(1);
+          expect(test.form.facebookButton().length).toBe(0);
+        });
+      });
+      itp('does not display any additional buttons when social auth and customButtons are undefined', function () {
+        return setupWithoutCustomButtonsWithoutIdp().then(function (test){
+          expect(test.form.authDivider().length).toBe(0);
+          expect(test.form.additionalAuthButton().length).toBe(0);
+          expect(test.form.facebookButton().length).toBe(0);
+        });
+      });
+    });
   });
 });
diff --git a/test/unit/spec/PrimaryAuth_spec.js b/test/unit/spec/PrimaryAuth_spec.js
@@ -164,7 +164,7 @@ function (Q, OktaAuth, LoginUtil, Okta, Util, AuthContainer, PrimaryAuthForm, Be
     }, settings));
   }
 
-  function setupAdditionalAuthButton () {
+  function setupWithCustomButtons () {
     var settings = {
       customButtons: [
         {
@@ -2350,23 +2350,23 @@ function (Q, OktaAuth, LoginUtil, Okta, Util, AuthContainer, PrimaryAuthForm, Be
       });
     });
     itp('show the divider and buttons if settings.customButtons is not empty', function () {
-      return setupAdditionalAuthButton().then(function (test) {
+      return setupWithCustomButtons().then(function (test) {
         expect(test.form.authDivider().length).toBe(1);
         expect(test.form.additionalAuthButton().length).toBe(1);
       });
     });
     itp('sets text with property passed', function () {
-      return setupAdditionalAuthButton().then(function (test){
+      return setupWithCustomButtons().then(function (test){
         expect(test.form.additionalAuthButton().text()).toEqual('test text');
       });
     });
     itp('sets class with property passed', function () {
-      return setupAdditionalAuthButton().then(function (test){
+      return setupWithCustomButtons().then(function (test){
         expect(test.form.additionalAuthButton().hasClass('test-class')).toBe(true);
       });
     });
     itp('clickHandler is called when button is clicked', function () {
-      return setupAdditionalAuthButton().then(function (test){
+      return setupWithCustomButtons().then(function (test){
         expect(test.form.additionalAuthButton().hasClass('new-class')).toBe(false);
         test.form.additionalAuthButton().click();
         expect(test.form.additionalAuthButton().hasClass('new-class')).toBe(true);
@@ -2396,7 +2396,7 @@ function (Q, OktaAuth, LoginUtil, Okta, Util, AuthContainer, PrimaryAuthForm, Be
         expect(test.form.facebookButton().length).toBe(1);
       });
     });
-    itp('does not display custom auth when it is undefined', function () {
+    itp('does not display custom buttons when it is undefined', function () {
       var settings = {
         customButtons: undefined,
         idps: [