Updated FirebaseUI for Web:

- Fixes for internationalization

GitOrigin-RevId=1539e6c73a85870846b1aa84ffc5cbc214605783
Change-Id: I6fae6c918d269944df7831e2ea1ec9d845ffe829

Author: Googler

LANGUAGES.md

@@ -43,4 +43,4 @@
 | th | Thai |
 | tr | Turkish |
 | uk | Ukrainian |
-| vi | Vietnamese |
+| vi | Vietnamese |

buildtools/country_data/generate_country_data.sh

@@ -48,3 +48,6 @@ cp "$SPRITE_DIR/flags.css" "$OUT_DIR"
 
 # Generate the country data JS.
 ./filter_country_data.js > "$OUT_DIR/country_data.js"
+
+# Generate the country data Markdown.
+./make_country_list_for_readme.js > "$OUT_DIR/country_data.md"

buildtools/country_data/make_country_list_for_readme.js

@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+/*
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the
+ * License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Converts the data in full_country_data to a Markdown table.
+ *
+ * Usage:
+ * It is recommended to just run generate_country_data.sh. However, you can run
+ * this on its own with:
+ * $ ./make_country_list_for_readme.js
+ *
+ * Then, take the output and put it between the START COPIED TABLE and END
+ * COPIED TABLE markers in javascript/data/README.md.
+ */
+
+var fullCountryData = require('./full_country_data.json');
+
+// Keep track of seen country codes to eliminate duplicates.
+var seenCountryCodes = {};
+
+// Print the table header.
+console.log('| Code | Country |');
+console.log('| ---- | ------- |');
+
+for (var i = 0; i < fullCountryData.length; i++) {
+  var country = fullCountryData[i];
+
+  // Don't print duplicate entries.
+  if (seenCountryCodes[country.iso2_cc]) {
+    continue;
+  }
+  seenCountryCodes[country.iso2_cc] = true;
+
+  // Replace square brackets with parentheses, for Markdown support.
+  var normalizedName = country.name.replace(/\[/g, '(').replace(/\]/g, ')');
+
+  // Print the Markdown table row.
+  console.log('| ' + country.iso2_cc + ' | ' + normalizedName + ' |');
+}

javascript/data/README.md

@@ -3,6 +3,7 @@
 Valid country codes to pass in to `defaultCountry` for phone number
 authentication:
 
+<!-- START COPIED TABLE -->
 | Code | Country |
 | ---- | ------- |
 | AF | Afghanistan |
@@ -251,3 +252,4 @@ authentication:
 | YE | Yemen |
 | ZM | Zambia |
 | ZW | Zimbabwe |
+<!-- END COPIED TABLE -->

javascript/widgets/authui.js

@@ -218,25 +218,7 @@ firebaseui.auth.AuthUI.prototype.isPending = function() {
  */
 firebaseui.auth.AuthUI.prototype.start = function(element, config) {
   var self = this;
-  var onReady = function() {
-    var resetWarning = 'UI Widget is already rendered on the page and is pen' +
-        'ding some user interaction. Only one widget instance can be rendere' +
-        'd per page. The previous instance has been automatically reset.';
-    // Only one auth instance can be rendered per page. This is because
-    // accountchooser.com callbacks are set once to the AuthUI instance that
-    // first calls them.
-    if (firebaseui.auth.AuthUI.widgetAuthUi_) {
-      // Already rendered, automatically reset.
-      // First check if there is a pending operation on that widget, if so,
-      // log a reset warning to the console.
-      if (firebaseui.auth.AuthUI.widgetAuthUi_.isPending()) {
-        firebaseui.auth.log.warning(resetWarning);
-      }
-      firebaseui.auth.AuthUI.widgetAuthUi_.reset();
-    }
-    // Set widget AuthUI as current instance.
-    firebaseui.auth.AuthUI.widgetAuthUi_ = self;
-  };
+
   // There is a problem when config in second call modifies accountchooser.com
   // related config. eg. acUiConfig
   // These changes will be ignored as only the first accountchooser.com related
@@ -247,31 +229,61 @@ firebaseui.auth.AuthUI.prototype.start = function(element, config) {
   // Wrap it in a onload callback to wait for the DOM element is rendered.
   // If document already loaded, render immediately.
   if (doc.readyState == 'complete') {
-    // Confirm element exists.
-    var container = firebaseui.auth.util.getElement(
-        element, firebaseui.auth.AuthUI.ELEMENT_NOT_FOUND_);
-    onReady();
-    self.widgetElement_ = container;
-    // Initialize widget page change listener.
-    self.initPageChangeListener_(container);
-    // Document already loaded, render on demand.
-    firebaseui.auth.widget.dispatcher.dispatchOperation(self, element);
+    this.initElement_(element);
   } else {
     // Document not ready, wait for load before rendering.
     goog.events.listenOnce(window, goog.events.EventType.LOAD, function() {
-      // Confirm element exists.
-      var container = firebaseui.auth.util.getElement(
-          element, firebaseui.auth.AuthUI.ELEMENT_NOT_FOUND_);
-      onReady();
-      self.widgetElement_ = container;
-      // Initialize widget page change listener.
-      self.initPageChangeListener_(container);
-      firebaseui.auth.widget.dispatcher.dispatchOperation(self, element);
+      self.initElement_(element);
     });
   }
 };
 
 
+/**
+ * Initializes the FirebaseUI element.
+ * @param {string|!Element} element The container element or the query selector.
+ * @private
+ */
+firebaseui.auth.AuthUI.prototype.initElement_ = function(element) {
+  // Confirm element exists.
+  var container = firebaseui.auth.util.getElement(
+      element, firebaseui.auth.AuthUI.ELEMENT_NOT_FOUND_);
+
+  // Set the "lang" attribute; without this, there are subtle rendering errors
+  // like vowel capitalization in Turkish.
+
+  // Make sure the locale uses hyphens instead of strings.
+  var locale = goog.LOCALE.replace(/_/g, '-');
+  container.setAttribute('lang', locale);
+
+  // Only one auth instance can be rendered per page. This is because
+  // accountchooser.com callbacks are set once to the AuthUI instance that
+  // first calls them.
+  if (firebaseui.auth.AuthUI.widgetAuthUi_) {
+    // Already rendered, automatically reset.
+    // First check if there is a pending operation on that widget, if so,
+    // log a reset warning to the console.
+    if (firebaseui.auth.AuthUI.widgetAuthUi_.isPending()) {
+      var resetWarning = 'UI Widget is already rendered on the page and is ' +
+          'pending some user interaction. Only one widget instance can be ' +
+          'rendered per page. The previous instance has been automatically ' +
+          'reset.';
+      firebaseui.auth.log.warning(resetWarning);
+    }
+    firebaseui.auth.AuthUI.widgetAuthUi_.reset();
+  }
+
+  // Set widget AuthUI as current instance.
+  firebaseui.auth.AuthUI.widgetAuthUi_ = this;
+
+  this.widgetElement_ = container;
+  // Initialize widget page change listener.
+  this.initPageChangeListener_(container);
+  // Document already loaded, render on demand.
+  firebaseui.auth.widget.dispatcher.dispatchOperation(this, element);
+};
+
+
 /**
  * Registers a pending promise or reset function.
  * @param {?goog.Promise|?firebase.Promise|?function()} p The pending promise.
@@ -304,6 +316,11 @@ firebaseui.auth.AuthUI.prototype.getAuthUiGetter = function() {
 
 /** Reset rendered widget and removes it from display. */
 firebaseui.auth.AuthUI.prototype.reset = function() {
+  // Remove the "lang" attribute that we set in start().
+  if (this.widgetElement_) {
+    this.widgetElement_.removeAttribute('lang');
+  }
+
   // After reset, if the sign-in widget callback is called again, it should not
   // resolve with the previous redirect result.
   this.getRedirectResult_ =

javascript/widgets/authui_test.js

@@ -394,6 +394,28 @@ function testStart() {
 }
 
 
+function testSetLang() {
+  testStubs.replace(goog, 'LOCALE', 'de');
+  app1.start(container1, config1);
+  assertEquals('de', container1.getAttribute('lang'));
+  app1.reset();
+  assertFalse(container1.hasAttribute('lang'));
+
+  testStubs.replace(goog, 'LOCALE', 'zh-CN');
+  app1.start(container1, config1);
+  assertEquals('zh-CN', container1.getAttribute('lang'));
+  app1.reset();
+  assertFalse(container1.hasAttribute('lang'));
+
+  testStubs.replace(goog, 'LOCALE', 'zh_CN');
+  app1.start(container1, config1);
+  // The lang should have a dash instead of an underscore.
+  assertEquals('zh-CN', container1.getAttribute('lang'));
+  app1.reset();
+  assertFalse(container1.hasAttribute('lang'));
+}
+
+
 function testStart_elementNotFound() {
   // Test widget start method with missing element.
   // Test correct error message thrown when widget element not found.

javascript/widgets/handler/common.js

@@ -39,7 +39,9 @@ goog.require('firebaseui.auth.widget.handler');
 goog.require('goog.Promise');
 
 goog.require('goog.array');
+goog.require('goog.html.TrustedResourceUrl');
 goog.require('goog.net.jsloader');
+goog.require('goog.string.Const');
 
 goog.forwardDeclare('firebaseui.auth.AuthUI');
 
@@ -97,8 +99,10 @@ firebaseui.auth.widget.handler.common.loadAccountchooserJs = function(
     if (typeof accountchooser == 'undefined' &&
         firebaseui.auth.sni.isSupported()) {
       // Not yet loaded but supported.
+      var src = goog.html.TrustedResourceUrl.fromConstant(
+          goog.string.Const.from(ACCOUNTCHOOSER_SRC));
       firebaseui.auth.widget.handler.common.acLoader_ = goog.Promise.resolve(
-          goog.net.jsloader.load(ACCOUNTCHOOSER_SRC)).thenCatch(function() {});
+          goog.net.jsloader.safeLoad(src)).thenCatch(function() {});
     } else {
       // Either not supported by the browser or externally loaded.
       firebaseui.auth.widget.handler.common.acLoader_ = goog.Promise.resolve();

protractor_spec.js

@@ -60,7 +60,7 @@ describe('Run all Closure unit tests', function() {
        * Runs the test routines for a given test path and retries up to a
        * certain number of times on timeout.
        * @param {number} tries The number of times to retry on timeout.
-       * @param {function} done The function to run on completion.
+       * @param {function()} done The function to run on completion.
        */
       var runRoutine = function(tries, done) {
         browser.navigate()

soy/pages.soy

@@ -60,10 +60,12 @@
         {call firebaseui.auth.soy2.element.password /}
       </div>
       <div class="firebaseui-card-actions">
+        <div class="firebaseui-form-links">
+          {call firebaseui.auth.soy2.element.passwordRecoveryButton /}
+        </div>
         <div class="firebaseui-form-actions">
           {call firebaseui.auth.soy2.element.signInButton /}
         </div>
-        {call firebaseui.auth.soy2.element.passwordRecoveryButton /}
       </div>
     </form>
   </div>
@@ -228,7 +230,9 @@
         {call firebaseui.auth.soy2.element.password /}
       </div>
       <div class="firebaseui-card-actions">
-        {call firebaseui.auth.soy2.element.passwordRecoveryButton /}
+        <div class="firebaseui-form-links">
+          {call firebaseui.auth.soy2.element.passwordRecoveryButton /}
+        </div>
         <div class="firebaseui-form-actions">
           {call firebaseui.auth.soy2.element.signInButton /}
         </div>

stylesheet/firebase-ui.css

@@ -46,17 +46,24 @@
 }
 
 .firebaseui-card-actions {
+  display: table;
   font-size: 14px;
-  line-height: 36px;
   padding: 8px 24px 24px 24px;
   text-align: left;
+  width: 100%;
 }
 
-/* Clearfix */
-.firebaseui-card-actions::after {
-  clear: both;
-  content: "";
-  display: table;
+.firebaseui-form-links {
+  display: table-cell;
+  vertical-align: middle;
+  width: 100%;
+}
+
+.firebaseui-form-actions {
+  display: table-cell;
+  text-align: right;
+  white-space: nowrap;
+  width: 100%;
 }
 
 .firebaseui-title,
@@ -197,11 +204,6 @@ input.firebaseui-input-invalid{
   text-decoration: underline;
 }
 
-.firebaseui-form-actions {
-  direction: ltr;
-  float: right;
-}
-
 .firebaseui-indent {
   margin-left: 1em;
 }