Add an option to force the login popup into a window.

Changed loginPopup to an object

Documentation.md

@@ -140,7 +140,12 @@ everything set up correctly and that you are able to listen for events.
         // initialize the ccp
         connect.core.initCCP(containerDiv, {
           ccpUrl: instanceURL,            // REQUIRED
-          loginPopup: true,               // optional, defaults to `true`
+          loginPopup:             {       // optional, default TRUE
+            autoClose:            ture,   // optional, default FALSE
+            forceWindow:          true,   // optional, default FALSE
+            height:               600,    // optional
+            width:                400,    // optional
+          },
           region: "eu-central-1",         // REQUIRED for `CHAT`, optional otherwise
           softphone: {                    // optional
             allowFramedSoftphone: true,   // optional
@@ -161,12 +166,22 @@ and made available to your JS client code.
   in order to use the CCP in a standalone page, it is different for each
   instance.
 * `region`: Amazon connect instance region. ex: `us-west-2`. only required for chat channel.
-* `loginPopup`: Optional, defaults to `true`. Set to `false` to disable the login
-  popup which is shown when the user's authentication expires.
-* `loginPopupAutoClose`: Optional, defaults to `false`. Set to `true` in conjunction with the `loginPopup` parameter
-  to automatically close the login Popup window once the authentication step has completed.
-  If the login page opened in a new tab, this parameter will also auto-close that tab.
-* `loginUrl`: Optional. Allows custom URL to be used to initiate the ccp, as in
+* `loginPopup`: Optional.  Set to `false` to disable the login popup which is 
+   shown when the user's authentication expires. Provide an object with the 
+   following options to provide settings for this window:
+   * `autoClose`: Optional, defaults to `false`. Set to `true` to automatically
+      close the login popup after the user logs in.
+   * `forceWindow`: Optional, defaults to `false`. Set to `true` to force the 
+      login popup to open in a centered pop-up window. When `false`, the popup 
+      will behave according to the user's browser settings, which often defaults 
+      to opening in a new tab.
+   * `height`: Optional, only valid when `forceWindow` is set to `true`. This 
+      allows you to define the height of the login pop-up window if you do not 
+      like the default.
+   * `width`: Optional, only valid when `forceWindow` is set to `true`. This 
+      allows you to define the width of the login pop-up window if you do not 
+      like the default.
+* `loginUrl`: Optional.  Allows custom URL to be used to initiate the ccp, as in
   the case of SAML authentication.
 * `softphone`: This object is optional and allows you to specify some settings
   surrounding the softphone feature of Connect.

src/core.js

@@ -524,8 +524,8 @@
           if (params.loginUrl) {
              connect.core.getPopupManager().clear(connect.MasterTopics.LOGIN_POPUP);
           }
-          connect.core.loginWindow = connect.core.getPopupManager().open(loginUrl, connect.MasterTopics.LOGIN_POPUP);
-
+          var options = params.loginPopup && params.loginPopup.forceWindow ? params.loginPopup : {}
+          connect.core.loginWindow = connect.core.getPopupManager().open(loginUrl, connect.MasterTopics.LOGIN_POPUP, options);
         } catch (e) {
           connect.getLog().error("ACK_TIMEOUT occurred but we are unable to open the login popup.").withException(e);
         }
@@ -541,7 +541,7 @@
           global.clearInterval(connect.core.iframeRefreshInterval);
           connect.core.iframeRefreshInterval = null;
           connect.core.getPopupManager().clear(connect.MasterTopics.LOGIN_POPUP);
-          if (params.loginPopupAutoClose && connect.core.loginWindow) {
+          if (params.loginPopup && params.loginPopup.autoClose && connect.core.loginWindow) {
             connect.core.loginWindow.close();
             connect.core.loginWindow = null;
           }

src/index.d.ts

@@ -156,6 +156,25 @@ declare namespace connect {
     readonly ringtoneUrl?: string;
   }
 
+  interface LoginOptions {
+    /*
+    * Whether to auto close the login prompt.
+    */
+    autoClose?: boolean,
+    /*
+    * Whether to force to login prompt into a new window.
+    */
+    forceWindow?: boolean,
+    /* 
+    * The height of the login prompt window.
+    */
+    height?: number,
+    /* 
+    * The width of the login prompt window.
+    */
+    width?: number,
+  }
+
   interface InitCCPOptions {
     /**
      * The URL of the CCP.
@@ -173,14 +192,7 @@ declare namespace connect {
      * Set to `false` to disable the login popup which is shown when the user's authentication expires.
      * @default true
      */
-    readonly loginPopup?: boolean;
-
-    /**
-     * Set to `true` in conjunction with the `loginPopup` parameter to automatically close the login Popup window once the authentication step has completed.
-     * If the login page opened in a new tab, this parameter will also auto-close that tab.
-     * @default false
-     */
-    readonly loginPopupAutoClose?: boolean;
+    loginPopup?: boolean | LoginOptions;
 
     /** Allows custom URL to be used to initiate the ccp, as in the case of SAML authentication. */
     readonly loginUrl?: string;

src/util.js

@@ -406,19 +406,32 @@
    */
   connect.PopupManager = function () { };
 
-  connect.PopupManager.prototype.open = function(url, name) {
+  connect.PopupManager.prototype.open = function (url, name, options) {
     var then = this._getLastOpenedTimestamp(name);
     var now = new Date().getTime();
-    var win = null;      
+    var win = null;
     if (now - then > ONE_DAY_MILLIS) {
-       win = window.open('', name);
-       if (win.location !== url) {
+      if (options && options.forceWindow === true) {
+        // default values below are chosen to provide a minimum height without scrolling
+        // and a unform margin based on the css of the ccp login page
+        var height = options.height ? options.height : 578;
+        var width = options.width ? options.width : 433;
+        var y = window.top.outerHeight / 2 + window.top.screenY - (height / 2);
+        var x = window.top.outerWidth / 2 + window.top.screenX - (width / 2);
+        win = window.open('', name, "width="+width+", height="+height+", top="+y+", left="+x);
+        if (win.location !== url) {
+          win = window.open(url, name, "width="+width+", height="+height+", top="+y+", left="+x);
+        }
+      } else {
+        win = window.open('', name);
+        if (win.location !== url) {
           win = window.open(url, name);
-       }
-       this._setLastOpenedTimestamp(name, now);
+        }
+      }
+      this._setLastOpenedTimestamp(name, now);
     }
     return win;
- };
+  };
 
   connect.PopupManager.prototype.clear = function (name) {
     var key = this._getLocalStorageKey(name);