Release updates on accountchooser.com warnings & fix RTL spinner (#724)

* release updates on accountchooser.com warnings & fix RTL spinner.

Author: xil222

CHANGELOG.md

@@ -0,0 +1,2 @@
+* Fixes FirebaseUI-web spinner for RTL languages.
+* Log warning on accountchooser.com being deprecated and switching to universal opt-out mode starting in July 31st, 2020.

README.md

@@ -139,12 +139,10 @@ FirebaseUI includes the following flows:
 *"One account per email address"* setting is enabled in the
 [Firebase console](https://console.firebase.google.com). This setting is enabled
 by default.)
-6. [Account Chooser](https://www.accountchooser.com/learnmore.html?lang=en) for
-remembering emails
-7. Integration with
+6. Integration with
 [one-tap sign-up](https://developers.google.com/identity/one-tap/web/)
-8. Ability to upgrade anonymous users through sign-in/sign-up.
-9. Sign-in as a guest
+7. Ability to upgrade anonymous users through sign-in/sign-up.
+8. Sign-in as a guest
 
 ### Configuring sign-in providers
 
@@ -364,8 +362,11 @@ FirebaseUI supports the following configuration parameters.
   The Credential Helper to use.
   See <a href="#credential-helper">Credential Helper</a>.
   <br/>
-  <em>Default:</em>
+  <em>Default (before July 31st, 2020):</em>
   <code>firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM</code>
+  <br/>
+  <em>Default (after July 31st, 2020):</em>
+  <code>firebaseui.auth.CredentialHelper.NONE</code>
 </td>
 </tr>
 <tr>
@@ -458,6 +459,9 @@ FirebaseUI supports the following credential helpers:
 - [accountchooser.com](https://www.accountchooser.com/learnmore.html)
 
 #### accountchooser.com
+(`accountchooser.com` will be operating in "universal opt-out" mode
+starting July 31st, 2020, it should no longer be used as a `CredentialHelper`.
+Learn more at https://accountchooser.net/developers.)
 
 When [accountchooser.com](https://www.accountchooser.com/learnmore.html) is
 enabled (enabled by default), upon signing in or
@@ -526,11 +530,11 @@ being rendered after the user signs out.
 To see FirebaseUI in action with one-tap sign-up, check out the FirebaseUI
 [demo app](https://fir-ui-demo-84a6c.firebaseapp.com/).
 
-|Credential Helper |Value                                                 |
-|------------------|------------------------------------------------------|
-|accountchooser.com|`firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM`|
-|One-tap sign-up   |`firebaseui.auth.CredentialHelper.GOOGLE_YOLO`        |
-|None (disable)    |`firebaseui.auth.CredentialHelper.NONE`               |
+|Credential Helper                 |Value                                                 |
+|----------------------------------|------------------------------------------------------|
+|accountchooser.com (deprecated)   |`firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM`|
+|One-tap sign-up                   |`firebaseui.auth.CredentialHelper.GOOGLE_YOLO`        |
+|None (disable)                    |`firebaseui.auth.CredentialHelper.NONE`               |
 
 ### Available providers
 
@@ -1274,7 +1278,7 @@ FirebaseUI is displayed.
             document.getElementById('loader').style.display = 'none';
           }
         },
-        credentialHelper: firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM,
+        credentialHelper: firebaseui.auth.CredentialHelper.NONE,
         // Query parameter name for mode.
         queryParameterForWidgetMode: 'mode',
         // Query parameter name for sign in success url.

demo/public/app.js

@@ -83,7 +83,7 @@ function getUiConfig() {
     'privacyPolicyUrl': 'https://www.google.com',
     'credentialHelper': CLIENT_ID && CLIENT_ID != 'YOUR_OAUTH_CLIENT_ID' ?
         firebaseui.auth.CredentialHelper.GOOGLE_YOLO :
-        firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM
+        firebaseui.auth.CredentialHelper.NONE
   };
 }
 

demo/public/widget.html

@@ -65,7 +65,7 @@
         'tosUrl': 'https://www.google.com',
         'credentialHelper': CLIENT_ID && CLIENT_ID != 'YOUR_OAUTH_CLIENT_ID' ?
             firebaseui.auth.CredentialHelper.GOOGLE_YOLO :
-            firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM
+            firebaseui.auth.CredentialHelper.NONE
       };
 
       // Initialize the FirebaseUI Widget using Firebase.

javascript/testing/auth.js

@@ -115,7 +115,7 @@ class FakeAuthClient extends MockHelper {
    */
   onAuthStateChanged(nextOrObserver, opt_error, opt_completed) {
     // Simplified version of the observer for testing purpose only.
-    var observer = (goog.isFunction(nextOrObserver) && nextOrObserver) ||
+    var observer = (typeof nextOrObserver === 'function' && nextOrObserver) ||
         nextOrObserver['next'];
     if (!observer) {
       throw 'onAuthStateChanged must be called with an Observer or up to three ' +
@@ -154,7 +154,7 @@ class FakeAuthClient extends MockHelper {
    */
   onIdTokenChanged(nextOrObserver, opt_error, opt_completed) {
     // Simplified version of the observer for testing purpose only.
-    var observer = (goog.isFunction(nextOrObserver) && nextOrObserver) ||
+    var observer = (typeof nextOrObserver === 'function' && nextOrObserver) ||
         nextOrObserver['next'];
     if (!observer) {
       throw 'onIdTokenChanged must be called with an Observer or up to three ' +

javascript/testing/mockhelper.js

@@ -196,13 +196,13 @@ class MockHelper extends Disposable {
         // Resolve API promise if not already resolved.
         resolveAssert();
         if (error) {
-          if (goog.isFunction(error)) {
+          if (typeof error === 'function') {
             req['reject'](error());
           } else {
             req['reject'](error);
           }
         } else {
-          if (goog.isFunction(resp)) {
+          if (typeof resp === 'function') {
             req['resolve'](resp());
           } else {
             req['resolve'](resp);

javascript/utils/acclient.js

@@ -231,7 +231,7 @@ firebaseui.auth.acClient.DummyApi = class {
    * Triggers the onEmpty callback.
    */
   fireOnEmpty() {
-    if (goog.isFunction(this.config_['callbacks']['empty'])) {
+    if (typeof this.config_['callbacks']['empty'] === 'function') {
       this.config_['callbacks']['empty']();
     }
   }
@@ -245,7 +245,7 @@ firebaseui.auth.acClient.DummyApi = class {
    * @param {Object=} opt_config The optional client configuration.
    */
   store(accounts, opt_config) {
-    if (goog.isFunction(this.config_['callbacks']['store'])) {
+    if (typeof this.config_['callbacks']['store'] === 'function') {
       this.config_['callbacks']['store'](
           undefined, firebaseui.auth.acClient.DummyApi.UNAVAILABLE_ERROR_);
     }
@@ -260,7 +260,7 @@ firebaseui.auth.acClient.DummyApi = class {
    * @param {Object=} opt_config The optional client configuration.
    */
   select(accounts, opt_config) {
-    if (goog.isFunction(this.config_['callbacks']['select'])) {
+    if (typeof this.config_['callbacks']['select'] === 'function') {
       this.config_['callbacks']['select'](
           undefined, firebaseui.auth.acClient.DummyApi.UNAVAILABLE_ERROR_);
     }
@@ -275,7 +275,7 @@ firebaseui.auth.acClient.DummyApi = class {
    * @param {Object=} opt_config The optional client configuration.
    */
   update(account, opt_config) {
-    if (goog.isFunction(this.config_['callbacks']['update'])) {
+    if (typeof this.config_['callbacks']['update'] === 'function') {
       this.config_['callbacks']['update'](
           undefined, firebaseui.auth.acClient.DummyApi.UNAVAILABLE_ERROR_);
     }

javascript/widgets/config.js

@@ -528,7 +528,7 @@ class Config {
           'Privacy Policy URL is missing, the link will not be displayed.');
     }
     if (tosUrl && privacyPolicyUrl) {
-      if (goog.isFunction(tosUrl)) {
+      if (typeof tosUrl === 'function') {
         return /** @type {function()} */ (tosUrl);
       } else if (typeof tosUrl === 'string') {
         return () => {
@@ -554,7 +554,7 @@ class Config {
           'Term of Service URL is missing, the link will not be displayed.');
     }
     if (tosUrl && privacyPolicyUrl) {
-      if (goog.isFunction(privacyPolicyUrl)) {
+      if (typeof privacyPolicyUrl === 'function') {
           return /** @type {function()} */ (privacyPolicyUrl);
       } else if (typeof privacyPolicyUrl === 'string') {
         return () => {
@@ -769,10 +769,7 @@ class Config {
   }
 
   /**
-   * TODO: for now, only accountchooser.com is available and all logic related
-   * to credential helper relies on it, so this method is provided for ease of
-   * use. It should be removed in the future when FirebaseUI supports several
-   * credential helpers.
+   * TODO: Remove during accountchooser.com opt-out period.
    * @return {boolean} Whether accountchooser.com is enabled.
    */
   isAccountChooserEnabled() {
@@ -792,10 +789,16 @@ class Config {
       return Config.CredentialHelper.NONE;
     }
     const credentialHelper = this.config_.get('credentialHelper');
+    if (credentialHelper === Config.CredentialHelper.ACCOUNT_CHOOSER_COM) {
+      log.warning(
+          'AccountChooser.com will be operating in "universal opt-out" mode '  +
+          'starting July 31st, 2020, ' +
+          'it should no longer be used as a CredentialHelper.' +
+          ' Learn more at https://accountchooser.net/developers');
+    }
     // Make sure the credential helper is valid.
     for (let key in Config.CredentialHelper) {
-      if (Config.CredentialHelper[key] ==
-          credentialHelper) {
+      if (Config.CredentialHelper[key] === credentialHelper) {
         // Return valid flow.
         return Config.CredentialHelper[key];
       }

javascript/widgets/config_test.js

@@ -1488,6 +1488,34 @@ testSuite({
     assertArrayEquals([], warningLogMessages);
   },
 
+  testAccountChooserWarningMessage() {
+    const expectedWarningMessage = 'AccountChooser.com will be operating ' +
+        'in "universal opt-out" mode starting July 31st, 2020, ' +
+        'it should no longer be used as a CredentialHelper. ' +
+        'Learn more at https://accountchooser.net/developers';
+    config.update(
+        'credentialHelper', Config.CredentialHelper.ACCOUNT_CHOOSER_COM);
+    assertEquals(
+        Config.CredentialHelper.ACCOUNT_CHOOSER_COM,
+        config.getCredentialHelper());
+    assertArrayEquals([expectedWarningMessage], warningLogMessages);
+
+    // Reset warnings.
+    warningLogMessages = [];
+    config.update(
+        'credentialHelper', Config.CredentialHelper.GOOGLE_YOLO);
+    assertEquals(
+        Config.CredentialHelper.GOOGLE_YOLO,
+        config.getCredentialHelper());
+    assertArrayEquals([], warningLogMessages);
+
+    // Reset warnings.
+    warningLogMessages = [];
+    config.update('credentialHelper', Config.CredentialHelper.NONE);
+    assertEquals(Config.CredentialHelper.NONE, config.getCredentialHelper());
+    assertArrayEquals([], warningLogMessages);
+  },
+
   testGetCredentialHelper_httpOrHttps() {
     // Test credential helper configuration setting, as well as the
     // accountchooser.com enabled helper method, in a HTTP or HTTPS environment.

javascript/widgets/firebaseuihandler.js

@@ -544,7 +544,7 @@ class FirebaseUiHandler {
     const message = getLocalizedErrorMessage(error['code']) || error['message'];
     this.disposeCurrentComponent_();
     let onRetryClick;
-    if (error['retry'] && goog.isFunction(error['retry'])) {
+    if (error['retry'] && typeof error['retry'] === 'function') {
       onRetryClick = () => {
         this.reset();
         error['retry']();

javascript/widgets/handler/common.js

@@ -77,6 +77,14 @@ firebaseui.auth.widget.handler.common.acForceUiShown_ = false;
  */
 firebaseui.auth.widget.handler.common.acLoader_ = null;
 
+/**
+ * Resets accountchooser.com loader and removes global accountchooser namespace.
+ * This is useful for testing.
+ */
+firebaseui.auth.widget.handler.common.resetAcLoader = function() {
+  firebaseui.auth.widget.handler.common.acLoader_ = null;
+  goog.global['accountchooser'] = undefined;
+};
 
 /**
  * Loads the accountchooser.com client library if it is not loaded before and

javascript/widgets/handler/common_test.js

@@ -48,6 +48,7 @@ goog.require('firebaseui.auth.widget.handler.handleSignIn');
 goog.require('firebaseui.auth.widget.handler.testHelper');
 goog.require('goog.Promise');
 goog.require('goog.dom.forms');
+goog.require('goog.net.jsloader');
 goog.require('goog.testing.AsyncTestCase');
 goog.require('goog.testing.recordFunction');
 
@@ -1893,6 +1894,61 @@ function testHandleSignInWithEmail_acNotEnabled() {
 }
 
 
+function testHandleSignInWithEmail_accountChooserNotFound() {
+  // This tests when accountchooser.com JS dependency fails to load
+  // that the flow continues to work as expected. This test is needed
+  // to confirm that after accountchooser.com is shutdown, the library
+  // continues to work.
+
+  // This is the actual error that gets thrown when jsloader fails to load.
+  const expectedError = new Error(
+      'Jsloader error (code #0): Error while loading script ' +
+      '//www.gstatic.com/accountchooser/client.js');
+  // Uninstall mock acClient. It is better to test the real thing to ensure
+  // that when the dependency fails to load, the flow will continue to work.
+  testAc.uninstall();
+  firebaseui.auth.widget.handler.common.resetAcLoader();
+  // Track that loading error is triggered.
+  let errorTriggered = false;
+  // Simulate accountchooser.com dependency not found and jsloader failing.
+  testStubs.reset();
+  // Assume widget already rendered and AuthUI global reference set.
+  testStubs.replace(firebaseui.auth.AuthUI, 'getAuthUi', function() {
+    return app;
+  });
+  testStubs.set(firebaseui.auth.util, 'supportsCors', function() {
+    return true;
+  });
+  // Simulate the loading error.
+  testStubs.replace(
+      goog.net.jsloader, 'safeLoad', function() {
+        errorTriggered = true;
+        return goog.Promise.reject(expectedError);
+      });
+
+  // Start sign-in with email handler.
+  // signIn page should be rendered despite accountchooser.com JS dependencies
+  // failing to load.
+  app.setConfig({
+    'credentialHelper':
+        firebaseui.auth.widget.Config.CredentialHelper.ACCOUNT_CHOOSER_COM,
+  });
+  firebaseui.auth.widget.handler.common.handleSignInWithEmail(app, container);
+  asyncTestCase.waitForSignals(1);
+
+  // Wait 2 cycles to give enough time for logic to run.
+  return goog.Promise.resolve().then(() => {
+    return goog.Promise.resolve();
+  }).then(() => {
+    // Confirm error triggered.
+    assertTrue(errorTriggered);
+    // signIn page should be rendered.
+    assertSignInPage();
+    asyncTestCase.signal();
+  });
+}
+
+
 function testHandleSignInWithEmail_prefillEmail() {
   const prefilledEmail = 'user@example';
   testStubs.replace(

javascript/widgets/handler/testhelper.js

@@ -889,15 +889,15 @@ function assertTosPpLinkClicked_(tosUrl, privacyPolicyUrl) {
     'firebaseui-tos-link', container);
   var ppLinkElement = goog.dom.getElementByClass(
     'firebaseui-pp-link', container);
-  if (goog.isFunction(tosUrl)) {
+  if (typeof tosUrl === 'function') {
     assertEquals(0, tosUrl.getCallCount());
     goog.testing.events.fireClickSequence(tosLinkElement);
     assertEquals(1, tosUrl.getCallCount());
   } else {
     goog.testing.events.fireClickSequence(tosLinkElement);
     testUtil.assertOpen(tosUrl, '_blank');
   }
-  if (goog.isFunction(privacyPolicyUrl)) {
+  if (typeof privacyPolicyUrl === 'function') {
     assertEquals(0, privacyPolicyUrl.getCallCount());
     goog.testing.events.fireClickSequence(ppLinkElement);
     assertEquals(1, privacyPolicyUrl.getCallCount());

package-lock.json

@@ -499,6 +499,7 @@ input.firebaseui-input-invalid{
 }
 
 .mdl-spinner.firebaseui-busy-indicator {
+  direction: initial;
   height: 56px;
   left: 0px;
   margin: auto;