Release3.4.1 (#502)

- Hides cancel button in phone sign-in page if only phone provider is configured.
- Reverts FirebaseUI languageCode modification on external Auth instance before sign in completion 
- Updated readme and changelog

Author: wti806

README.md

@@ -68,17 +68,17 @@ Localized versions of the widget are available through the CDN. To use a localiz
 localized JS library instead of the default library:
 
 ```html
-<script src="https://www.gstatic.com/firebasejs/ui/3.4.0/firebase-ui-auth__{LANGUAGE_CODE}.js"></script>
-<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/3.4.0/firebase-ui-auth.css" />
+<script src="https://www.gstatic.com/firebasejs/ui/3.4.1/firebase-ui-auth__{LANGUAGE_CODE}.js"></script>
+<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/3.4.1/firebase-ui-auth.css" />
 ```
 
 where `{LANGUAGE_CODE}` is replaced by the code of the language you want. For example, the French
 version of the library is available at
-`https://www.gstatic.com/firebasejs/ui/3.4.0/firebase-ui-auth__fr.js`. The list of available
+`https://www.gstatic.com/firebasejs/ui/3.4.1/firebase-ui-auth__fr.js`. The list of available
 languages and their respective language codes can be found at [LANGUAGES.md](LANGUAGES.md).
 
 Right-to-left languages also require the right-to-left version of the stylesheet, available at
-`https://www.gstatic.com/firebasejs/ui/3.4.0/firebase-ui-auth-rtl.css`, instead of the default
+`https://www.gstatic.com/firebasejs/ui/3.4.1/firebase-ui-auth-rtl.css`, instead of the default
 stylesheet. The supported right-to-left languages are Arabic (ar), Farsi (fa), and Hebrew (iw).
 
 ### Option 2: npm Module

changelog.txt

@@ -0,0 +1,2 @@
+fixed - Hides cancel button in phone sign-in page if only phone provider is configured.
+fixed - Reverts FirebaseUI languageCode modification on external Auth instance before sign in completion to not trigger race conditions when signInSuccessWithAuthResult callback modifies the Auth languageCode.

javascript/ui/page/phonesigninstart.js

@@ -32,9 +32,9 @@ goog.require('goog.dom.selection');
  * UI component for the user to enter their phone number.
  * @param {function(?)} onSubmitClick Callback to invoke when enter key (or its
  *     equivalent) is detected on submission.
- * @param {function(?)} onCancelClick Callback to invoke when cancel button
- *     is clicked.
  * @param {boolean} enableVisibleRecaptcha Whether to enable visible reCAPTCHA.
+ * @param {?function(?)=} opt_onCancelClick Callback to invoke when cancel
+ *     button is clicked.
  * @param {?function()=} opt_tosCallback Callback to invoke when the ToS link
  *     is clicked.
  * @param {?function()=} opt_privacyPolicyCallback Callback to invoke when the
@@ -52,8 +52,8 @@ goog.require('goog.dom.selection');
  */
 firebaseui.auth.ui.page.PhoneSignInStart = function(
     onSubmitClick,
-    onCancelClick,
     enableVisibleRecaptcha,
+    opt_onCancelClick,
     opt_tosCallback,
     opt_privacyPolicyCallback,
     opt_displayFullTosPpMessage,
@@ -69,6 +69,7 @@ firebaseui.auth.ui.page.PhoneSignInStart = function(
       {
         enableVisibleRecaptcha: enableVisibleRecaptcha,
         nationalNumber: nationalNumber,
+        displayCancelButton: !!opt_onCancelClick,
         displayFullTosPpMessage: !!opt_displayFullTosPpMessage
       },
       opt_domHelper,
@@ -84,7 +85,7 @@ firebaseui.auth.ui.page.PhoneSignInStart = function(
   /** @private {?function(?)} On submit click callback. */
   this.onSubmitClick_ = onSubmitClick;
   /** @private {?function(?)} On cancel click callback. */
-  this.onCancelClick_ = onCancelClick;
+  this.onCancelClick_ = opt_onCancelClick || null;
   /**
    * @private {?firebaseui.auth.data.country.LookupTree} The country
    *     lookup prefix tree to search country code with.
@@ -101,7 +102,7 @@ firebaseui.auth.ui.page.PhoneSignInStart.prototype.enterDocument = function() {
   // Handle a click on the submit button or cancel button.
   this.initFormElement(
       /** @type {function(?)} */ (this.onSubmitClick_),
-      /** @type {function(?)} */ (this.onCancelClick_));
+      this.onCancelClick_ || undefined);
   this.setupFocus_();
   firebaseui.auth.ui.page.PhoneSignInStart.base(this, 'enterDocument');
 };

javascript/ui/page/phonesigninstart_test.js

@@ -79,10 +79,10 @@ function createComponent(enableVisibleRecaptcha, opt_tosCallback,
       goog.bind(
           firebaseui.auth.ui.element.FormTestHelper.prototype.onSubmit,
           formTestHelper),
+      enableVisibleRecaptcha,
       goog.bind(
           firebaseui.auth.ui.element.FormTestHelper.prototype.onLinkClick,
           formTestHelper),
-      enableVisibleRecaptcha,
       opt_tosCallback,
       opt_privacyPolicyCallback,
       opt_displayFullTosPpMessage,
@@ -232,6 +232,26 @@ function testPhoneSignInStart_defaultCountryNotAvailable() {
 }
 
 
+function testPhoneSignInStart_noOnCancelClick() {
+  component.dispose();
+  // Initialize component with no onCancelClick callback.
+  component = new firebaseui.auth.ui.page.PhoneSignInStart(
+      goog.bind(
+          firebaseui.auth.ui.element.FormTestHelper.prototype.onSubmit,
+          formTestHelper),
+      true,
+      null);
+  component.render(root);
+  formTestHelper.setComponent(component);
+  // Reset previous state of form helper.
+  formTestHelper.resetState();
+  // Cancel button should be hidden.
+  assertNull(component.getSecondaryLinkElement());
+  // Submit button should be available.
+  assertNotNull(component.getSubmitElement());
+}
+
+
 function testPhoneSignInStart_footer() {
   component.dispose();
   component = createComponent(false, tosCallback, privacyPolicyCallback);
@@ -305,10 +325,10 @@ function testPhoneSignInStart_pageEvents() {
       goog.bind(
           firebaseui.auth.ui.element.FormTestHelper.prototype.onSubmit,
           formTestHelper),
+      true,
       goog.bind(
           firebaseui.auth.ui.element.FormTestHelper.prototype.onLinkClick,
-          formTestHelper),
-      true);
+          formTestHelper));
   // Run all page helper tests.
   pageTestHelper.runTests(component, root);
 }

javascript/widgets/authui.js

@@ -91,6 +91,8 @@ firebaseui.auth.AuthUI = function(auth, opt_appId) {
   this.auth_ = auth;
   /** @private {?string} The original Auth language code. */
   this.originalAuthLanguageCode_ = null;
+  /** @private {boolean} Whether language code requires reverting. */
+  this.languageCodePendingRevert_ = false;
   // Log FirebaseUI on external Auth instance.
   firebaseui.auth.AuthUI.logFirebaseUI_(this.auth_);
   var tempApp = firebase.initializeApp({
@@ -441,6 +443,8 @@ firebaseui.auth.AuthUI.prototype.start = function(element, config) {
   // Sync the language code of Auth instance with widget.
   this.auth_.languageCode = unicodeLocale;
   this.tempAuth_.languageCode = unicodeLocale;
+  // At end of flow or on reset, revert is needed.
+  this.languageCodePendingRevert_ = true;
 
   // There is a problem when config in second call modifies accountchooser.com
   // related config. eg. acUiConfig
@@ -655,6 +659,23 @@ firebaseui.auth.AuthUI.prototype.getAuthUiGetter = function() {
 };
 
 
+/**
+ * Reverts the external Auth instance language code to original setting.
+ * This should be called right before the widget operation completes.
+ * However, it should be called before the developer callbacks, in case the
+ * developer tries to set the language within the callback.
+ */
+firebaseui.auth.AuthUI.prototype.revertLanguageCode = function() {
+  // Change back the languageCode of external Auth instance if revert is
+  // required.
+  if (typeof this.auth_.languageCode !== 'undefined' &&
+      this.languageCodePendingRevert_) {
+    this.languageCodePendingRevert_ = false;
+    this.auth_.languageCode = this.originalAuthLanguageCode_;
+  }
+};
+
+
 /** Reset rendered widget and removes it from display. */
 firebaseui.auth.AuthUI.prototype.reset = function() {
   // Check if instance is already destroyed.
@@ -668,10 +689,7 @@ firebaseui.auth.AuthUI.prototype.reset = function() {
   if (this.widgetEventDispatcher_) {
     this.widgetEventDispatcher_.unregister();
   }
-  // Change back the languageCode of external Auth instance.
-  if (typeof this.auth_.languageCode !== 'undefined') {
-    this.auth_.languageCode = this.originalAuthLanguageCode_;
-  }
+  this.revertLanguageCode();
   // Removes pending status of previous redirect operations including redirect
   // back from accountchooser.com and federated sign in.
   firebaseui.auth.storage.removePendingRedirectStatus(this.getAppId());

javascript/widgets/authui_test.js

@@ -705,6 +705,32 @@ function testStart_overrideLanguageCode() {
   assertEquals('de', testAuth.languageCode);
 }
 
+function testStart_revertLanguageCode() {
+  // Test with explicit call to revertLanguageCode.
+  // Set the language code of widget to zh-CN.
+  testStubs.replace(goog, 'LOCALE', 'zh-CN');
+  createAndInstallTestInstances();
+  testAuth.install();
+  app = new firebaseui.auth.AuthUI(testAuth, 'id0');
+  app.getAuth().assertSetPersistence(['session'], null);
+  // Set the language code of auth to de.
+  testAuth.languageCode = 'de';
+  app.start(container1, config1);
+  app.getExternalAuth().runAuthChangeHandler();
+  // External Auth should use UI languageCode.
+  assertEquals('zh-CN', app.getExternalAuth().languageCode);
+  assertEquals('zh-CN', testAuth.languageCode);
+  // Revert languageCode changes.
+  app.revertLanguageCode();
+  assertEquals('de', testAuth.languageCode);
+  // Change languageCode to French.
+  testAuth.languageCode = 'fr';
+  app.getAuth().assertSignOut([]);
+  app.reset();
+  // Reset should not modify the language after revertLanguageCode.
+  assertEquals('fr', app.getExternalAuth().languageCode);
+}
+
 
 function testStart_elementNotFound() {
   // Test widget start method with missing element.

javascript/widgets/handler/common.js

@@ -420,6 +420,9 @@ firebaseui.auth.widget.handler.common.selectFromAccountChooser = function(
  */
 firebaseui.auth.widget.handler.common.setLoggedIn =
     function(app, component, credential, opt_user, opt_alreadySignedIn) {
+  // Revert language code at this point to ensure languageCode changes are
+  // reverted before callbacks are triggered.
+  app.revertLanguageCode();
   if (!!opt_alreadySignedIn) {
     // Already signed in on external auth instance.
     firebaseui.auth.widget.handler.common.setUserLoggedInExternal_(
@@ -540,6 +543,9 @@ firebaseui.auth.widget.handler.common.setLoggedIn =
  */
 firebaseui.auth.widget.handler.common.setLoggedInWithAuthResult =
     function(app, component, authResult, opt_alreadySignedIn) {
+  // Revert language code at this point to ensure languageCode changes are
+  // reverted before callbacks are triggered.
+  app.revertLanguageCode();
   if (!!opt_alreadySignedIn) {
     firebaseui.auth.widget.handler.common
         .setUserLoggedInExternalWithAuthResult_(

javascript/widgets/handler/common_test.js

@@ -281,7 +281,10 @@ function testSetLoggedIn() {
   var cred = firebase.auth.EmailAuthProvider.credential(
       passwordUser['email'], 'password');
   testAuth.setUser(passwordUser);
+  // Confirm revertLanguageCode called on setLoggedIn.
+  assertNoRevertLanguageCode();
   firebaseui.auth.widget.handler.common.setLoggedIn(app, testComponent, cred);
+  assertRevertLanguageCode(app);
   // Sign out from internal instance and then sign in with passed credential to
   // external instance.
   return testAuth.process().then(function() {
@@ -1202,8 +1205,11 @@ function testSetLoggedInWithAuthResult() {
     'operationType': 'signIn',
     'additionalUserInfo':  {'providerId': 'password', 'isNewUser': true}
   };
+  // Confirm revertLanguageCode called on setLoggedInWithAuthResult.
+  assertNoRevertLanguageCode();
   firebaseui.auth.widget.handler.common.setLoggedInWithAuthResult(
       app, testComponent, internalAuthResult);
+  assertRevertLanguageCode(app);
   // Sign out from internal instance and then sign in with passed credential to
   // external instance.
   return testAuth.process().then(function() {

javascript/widgets/handler/phonesigninstart.js

@@ -94,15 +94,15 @@ firebaseui.auth.widget.handler.handlePhoneSignInStart = function(
             // Whether the submission was triggered by a key code.
             !!(e && e.keyCode));
       },
+      firebaseui.auth.widget.handler.enableVisibleRecaptcha_,
       // On cancel.
-      function(e) {
+      isPhoneProviderOnly ? null : function(e) {
         // Go back to start sign in handler.
         recaptchaVerifier.clear();
         component.dispose();
         firebaseui.auth.widget.handler.common.handleSignInStart(
             app, container);
       },
-      firebaseui.auth.widget.handler.enableVisibleRecaptcha_,
       app.getConfig().getTosUrl(),
       app.getConfig().getPrivacyPolicyUrl(),
       isPhoneProviderOnly,

javascript/widgets/handler/phonesigninstart_test.js

@@ -307,6 +307,8 @@ function testHandlePhoneSignInStart_anonymousUpgrade_credInUseError() {
   // Only phone provider is configured, phoneSignInStart is the first page, full
   // message should be displayed.
   assertPhoneFullMessage(tosCallback, 'http://localhost/privacy_policy');
+  // Only phone provider is configured, cancel button should be hidden.
+  assertNull(getCancelButton());
   // Confirm reCAPTCHA initialized with expected parameters.
   recaptchaVerifierInstance.assertInitializedWithParameters(
       getRecaptchaElement(),
@@ -399,6 +401,8 @@ function testHandlePhoneSignInStart_anonymousUpgrade_signInError() {
   // Confirm expected page rendered.
   assertPhoneSignInStartPage();
   assertPhoneFullMessage(null, null);
+  // Only phone provider is configured, cancel button should be hidden.
+  assertNull(getCancelButton());
   // Confirm reCAPTCHA initialized with expected parameters.
   recaptchaVerifierInstance.assertInitializedWithParameters(
       getRecaptchaElement(),

javascript/widgets/handler/signin.js

@@ -61,7 +61,7 @@ firebaseui.auth.widget.handler.handleSignIn = function(
             app, container, opt_email);
       },
       opt_email,
-       app.getConfig().getTosUrl(),
+      app.getConfig().getTosUrl(),
       app.getConfig().getPrivacyPolicyUrl(),
       isPasswordProviderOnly);
   component.render(container);

javascript/widgets/handler/testhelper.js

@@ -155,6 +155,8 @@ var firebase = {};
 var getApp;
 var testComponent;
 
+var lastRevertLanguageCodeCall;
+
 
 function setUp() {
   // Used to initialize internal auth instance.
@@ -322,6 +324,14 @@ function setUp() {
       firebaseui.auth.AuthUI.prototype,
       'cancelOneTapSignIn',
       goog.testing.recordFunction());
+  // Record calls to revertLanguageCode.
+  lastRevertLanguageCodeCall = null;
+  testStubs.replace(
+      firebaseui.auth.AuthUI.prototype,
+      'revertLanguageCode',
+      function() {
+        lastRevertLanguageCodeCall = this;
+      });
 }
 
 
@@ -1201,3 +1211,24 @@ function assertSignInFailure(expectedError) {
   // Sign in success should not be called.
   assertUndefined(signInCallbackUser);
 }
+
+
+
+/**
+ * Asserts the last revertLanguageCode call was called on the specified
+ * AuthUI instance. After assertion, the internal state counter is reset.
+ * @param {!firebaseui.auth.AuthUI} app The AuthUI instance to check for
+ *     revertLanguageCode calls.
+ */
+function assertRevertLanguageCode(app) {
+  assertEquals(app, lastRevertLanguageCodeCall);
+  lastRevertLanguageCodeCall = null;
+}
+
+
+/**
+ * Asserts no revertLanguageCode call was called.
+ */
+function assertNoRevertLanguageCode() {
+  assertNull(lastRevertLanguageCodeCall);
+}

soy/pages.soy

@@ -666,6 +666,7 @@
 {template .phoneSignInStart}
   {@param? nationalNumber: string} /** The phone number to prefill. */
   {@param? enableVisibleRecaptcha: bool} /** Whether to enable the visible reCAPTCHA. */
+  {@param? displayCancelButton: bool} /** Whether to display the cancel button. */
   {@param? displayFullTosPpMessage: bool} /** Whether to display the full message of ToS and PP. */
   <div class="mdl-card mdl-shadow--2dp{sp}
       firebaseui-container firebaseui-id-page-phone-sign-in-start">
@@ -685,7 +686,9 @@
       </div>
       <div class="firebaseui-card-actions">
         <div class="firebaseui-form-actions">
-          {call firebaseui.auth.soy2.element.cancelButton /}
+          {if $displayCancelButton}
+            {call firebaseui.auth.soy2.element.cancelButton /}
+          {/if}
           {call firebaseui.auth.soy2.element.submitButton}
             {param label kind="text"}
               {msg desc="The button that initiates the verification of the phone number provided