tenant button config (#737)

* release updates on accountchooser.com warnings & fix some issues

Author: xil222

CHANGELOG.md

@@ -0,0 +1 @@
+* Allow `fullLabel` customization for tenant selection buttons in FirebaseUI for IAP.

README.md

@@ -1509,7 +1509,7 @@ ui.start('#firebaseui-auth-container', {
 For [GCIP](https://cloud.google.com/identity-platform) customers, you can build a
 tenant-specific sign-in page with FirebaseUI. Make sure you've enabled
 multi-tenancy for your project and configured your tenants. See the
-[Multi-tenancy quickstart](https://cloud.google.com/identity-platform/docs/quickstart-multi-tenancy)
+[Multi-tenancy quickstart](https://cloud.google.com/identity-platform/docs/multi-tenancy-quickstart)
 to learn how.
 
 This feature requires [firebase](https://www.npmjs.com/package/firebase) version 6.6.0 or higher.

externs/firebaseui-externs.js

@@ -609,6 +609,13 @@ firebaseui.auth.Config.prototype.widgetUrl;
  */
 firebaseui.auth.TenantConfig = function() {};
 
+/**
+ * The tenant full label of the tenant selection button for the option first
+ * flow.
+ *
+ * @type {string|undefined}
+ */
+firebaseui.auth.TenantConfig.prototype.fullLabel;
 
 /**
  * The tenant display name of the tenant selection button for the option first

firebaseuihandler/README.md

@@ -116,6 +116,8 @@ const configs = {
     tenants: {
       // Tenant configuration for tenant ID tenantId1.
       tenantId1: {
+        // To customize the full tenant selection button label:
+        // fullLabel: 'ACME Portal',
         // Display name, button color and icon URL of the
         // tenant selection button.
         displayName: 'ACME',
@@ -147,6 +149,8 @@ const configs = {
       },
       // Tenant configuration for tenant ID tenantId2.
       tenantId2: {
+        // To customize the full tenant selection button label:
+        // fullLabel: 'OCP Portal',
         displayName: 'OCP',
         buttonColor: '#2F2F2F',
         iconUrl: '<icon-url-of-sign-in-button>',
@@ -215,6 +219,8 @@ The following is an example of a tenant configured to use options mode:
 
 ```javascript
 tenantId1: {
+  // To customize the full tenant selection button label:
+  // fullLabel: 'ACME Portal',
   displayName: 'ACME',
   buttonColor: '#2F2F2F',
   iconUrl: '<icon-url-of-sign-in-button>',
@@ -382,6 +388,10 @@ interface Callbacks {
 
 // Interface that represents the tenant-level configurations.
 interface TenantConfig {
+  // The full label for the tenant in the tenant selection buttion. Only needed
+  // if you are using the option first mode.
+  // When not provided, the "Sign in to $displayName" label is used.
+  fullLabel?: string;
   // The display name for tenant in the tenant selection button. Only needed if
   // you are using the option first mode.
   displayName?: string;

javascript/ui/page/emaillinksigninlinking.js

@@ -30,7 +30,7 @@ firebaseui.auth.ui.page.EmailLinkSignInLinking =
     class extends firebaseui.auth.ui.page.Base {
   /**
    * @param {string} email The user's email.
-   * @param {?Object} providerConfig The provider config of the IdP we should
+   * @param {?} providerConfig The provider config of the IdP we should
    *     use for sign in.
    * @param {function()} onSubmitClick Callback to invoke when the submit button
    *     is clicked.

javascript/ui/page/emaillinksigninlinkingdifferentdevice.js

@@ -30,7 +30,7 @@ goog.require('firebaseui.auth.ui.page.Base');
 firebaseui.auth.ui.page.EmailLinkSignInLinkingDifferentDevice =
     class extends firebaseui.auth.ui.page.Base {
   /**
-   * @param {?Object} providerConfig The provider config of the IdP we should
+   * @param {?} providerConfig The provider config of the IdP we should
    *     use for sign in.
    * @param {function()} onContinueClick Callback to invoke when the continue
    *     button is clicked.

javascript/ui/page/federatedlinking.js

@@ -31,7 +31,7 @@ firebaseui.auth.ui.page.FederatedLinking =
     class extends firebaseui.auth.ui.page.Base {
   /**
    * @param {string} email The user's email.
-   * @param {?Object} providerConfig The provider config of the IdP we should
+   * @param {?} providerConfig The provider config of the IdP we should
    *     use for sign in.
    * @param {function()} onSubmitClick Callback to invoke when the submit button
    *     is clicked.

javascript/widgets/firebaseuihandler_test.js

@@ -87,6 +87,25 @@ function assertBlankPageVisible(container) {
   assertNotNull(dom.getElementByClass('firebaseui-id-page-blank', container));
 }
 
+/**
+ * Asserts the IdP or tenant button has correct labels.
+ * @param {!Element} button The IdP or tenant button.
+ * @param {string} expectedShortLabel The expected short label of the button.
+ * @param {string} expectedLongLabel The expected long label of the button.
+ */
+function assertIdpButtonLabels(button, expectedShortLabel, expectedLongLabel) {
+  const idpTextLong = dom.getElementsByClass(
+    'firebaseui-idp-text-long', button);
+  const idpTextShort = dom.getElementsByClass(
+    'firebaseui-idp-text-short', button);
+
+  assertEquals(
+      expectedLongLabel,
+      dom.getTextContent(idpTextLong[0]));
+  assertEquals(
+      expectedShortLabel,
+      dom.getTextContent(idpTextShort[0]));
+}
 
 /**
  * Asserts the busy indicator is after a short delay.
@@ -374,6 +393,7 @@ testSuite({
         'tenants': {
           // The top-level project UI configuration.
           '_': {
+            'fullLabel': 'ACME Login',
             'displayName': 'ACME',
             'buttonColor': '#FFB6C1',
             'iconUrl': '<icon-url-of-sign-in-button>',
@@ -393,6 +413,7 @@ testSuite({
             'privacyPolicyUrl': 'http://localhost/privacy_policy',
           },
           'tenant1': {
+            'fullLabel': 'Contractor A Portal',
             'displayName': 'Contractor A',
             'buttonColor': '#ADF7B2',
             'iconUrl': '<icon-url-of-sign-in-button>',
@@ -420,6 +441,7 @@ testSuite({
             'privacyPolicyUrl': 'http://localhost/privacy_policy',
           },
           'tenant2': {
+            'fullLabel': 'Contractor B Portal',
             'displayName': 'Contractor B',
             'buttonColor': '#EAC9A1',
             'iconUrl': '<icon-url-of-sign-in-button>',
@@ -490,10 +512,20 @@ testSuite({
         'firebaseui-id-tenant-selection-button', container);
     // Two tenants should be available to be selected from.
     const expectedTenants = ['tenant1', 'tenant2'];
+    // Two expected labels on buttons.
+    const expectedLongLabels = [
+      'Contractor A Portal',
+      'Sign in to Contractor B'
+    ];
+    const expectedShortLabels = ['Contractor A', 'Contractor B'];
+
     assertEquals(expectedTenants.length, buttons.length);
     for (let i = 0; i < buttons.length; i++) {
-      assertEquals(expectedTenants[i],
-                   dataset.get(buttons[i], 'tenantId'));
+      assertEquals(expectedTenants[i], dataset.get(buttons[i], 'tenantId'));
+      assertIdpButtonLabels(
+          buttons[i],
+          expectedShortLabels[i],
+          expectedLongLabels[i]);
     }
 
     // Click the tenant1's button.
@@ -587,10 +619,19 @@ testSuite({
         'firebaseui-id-tenant-selection-button', container);
     // Only two tenants should be available to be selected from.
     const expectedTenants = ['tenant1', 'tenant2'];
+    const expectedLongLabels = [
+      'Contractor A Portal',
+      'Sign in to Contractor B'
+    ];
+    const expectedShortLabels = ['Contractor A', 'Contractor B'];
     assertEquals(expectedTenants.length, buttons.length);
     for (let i = 0; i < buttons.length; i++) {
       assertEquals(expectedTenants[i],
-                   dataset.get(buttons[i], 'tenantId'));
+          dataset.get(buttons[i], 'tenantId'));
+      assertIdpButtonLabels(
+          buttons[i],
+          expectedShortLabels[i],
+          expectedLongLabels[i]);
     }
 
     testingEvents.fireClickSequence(buttons[1]);

javascript/widgets/uihandlerconfig.js

@@ -332,6 +332,7 @@ class UiHandlerConfig {
     return {
       tenantId: tenantId !== UiHandlerConfig.ConfigKeys.TOP_LEVEL_CONFIG_KEY ?
           tenantId : null,
+      fullLabel: tenantConfig['fullLabel'] || null,
       displayName: tenantConfig['displayName'],
       iconUrl: tenantConfig['iconUrl'],
       buttonColor: tenantConfig['buttonColor'],

javascript/widgets/uihandlerconfig_test.js

@@ -39,6 +39,7 @@ testSuite({
       displayMode: 'optionsFirst',
       tenants: {
         tenantId1: {
+          fullLabel: 'Contractor A Portal',
           displayName: 'Contractor A',
           buttonColor: '#FFB6C1',
           iconUrl: '<icon-url-of-sign-in-button>',
@@ -86,7 +87,7 @@ testSuite({
           credentialHelper: 'none',
         },
         _: {
-          displayName: 'ACME',
+          displayName: 'ACME.COM',
           buttonColor: '#53B2BF',
           iconUrl: '<icon-url-of-sign-in-button>',
           signInOptions: [
@@ -589,6 +590,7 @@ testSuite({
     assertObjectEquals(
         {
           tenantId: 'tenantId1',
+          fullLabel: 'Contractor A Portal',
           displayName: 'Contractor A',
           buttonColor: '#FFB6C1',
           iconUrl: '<icon-url-of-sign-in-button>',
@@ -604,7 +606,7 @@ testSuite({
     assertObjectEquals(
         {
           tenantId: null,
-          displayName: 'ACME',
+          displayName: 'ACME.COM',
           buttonColor: '#53B2BF',
           iconUrl: '<icon-url-of-sign-in-button>',
         },
@@ -615,6 +617,7 @@ testSuite({
     // Test that the default option first tenant selection related configs are
     // returned for arbitrary tenant if default configuration is provided.
     configObject['tenants']['*'] = {
+      fullLabel: 'Dealership Login',
       displayName: 'DEALER',
       buttonColor: '#37D2AC',
       iconUrl: '<icon-url-of-sign-in-button>',
@@ -629,6 +632,7 @@ testSuite({
     assertObjectEquals(
         {
           tenantId: 'arbitrary_tenant_id',
+          fullLabel: 'Dealership Login',
           displayName: 'DEALER',
           buttonColor: '#37D2AC',
           iconUrl: '<icon-url-of-sign-in-button>',
@@ -641,6 +645,7 @@ testSuite({
     // returned for top level project if default configuration is provided.
     delete configObject['tenants']['_'];
     configObject['tenants']['*'] = {
+      fullLabel: 'Dealership Login',
       displayName: 'DEALER',
       buttonColor: '#37D2AC',
       iconUrl: '<icon-url-of-sign-in-button>',
@@ -654,6 +659,7 @@ testSuite({
     assertObjectEquals(
         {
           tenantId: null,
+          fullLabel: 'Dealership Login',
           displayName: 'DEALER',
           buttonColor: '#37D2AC',
           iconUrl: '<icon-url-of-sign-in-button>',