Chrome OS: Support dynamic language change in PIN setup.

Bug: 896645
Change-Id: Id12e434ba7b284829d10b3c489e05278beebbb02
Reviewed-on: https://chromium-review.googlesource.com/c/1290200Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Commit-Queue: Alexander Alekseev <alemate@chromium.org>
Cr-Commit-Position: refs/heads/master@{#601274}

chrome/browser/resources/chromeos/login/discover/modules/discover_module_pin_setup.js

@@ -132,6 +132,18 @@ Polymer({
      */
     autoSkipTimer_: undefined,
 
+    /**
+     * This is called when locale is changed.
+     * @override
+     */
+    updateLocalizedContent: function() {
+      this.behaviors.forEach((behavior) => {
+        if (behavior.updateLocalizedContent)
+          behavior.updateLocalizedContent.call(this);
+      });
+      this.$.pinKeyboard.i18nUpdateLocale();
+    },
+
     /**
      * Starts automatic skip timer.
      * @private

ui/webui/resources/cr_components/chromeos/quick_unlock/setup_pin_keyboard.html

@@ -81,14 +81,17 @@ Where:
     </style>
     <pin-keyboard id="pinKeyboard" on-pin-change="onPinChange_"
         on-submit="onPinSubmit_" value="{{pinKeyboardValue_}}"
-        has-error="[[hasError_(problemMessage_, problemClass_)]]"
+        has-error="[[hasError_(problemMessageId_, problemClass_)]]"
         enable-placeholder="[[enablePlaceholder]]">
       <!-- Warning/error; only shown if title is hidden. -->
       <div id="problemDiv" class$="[[problemClass_]]"
-          invisible$="[[!problemMessage_]]" problem>
+          invisible$="[[!problemMessageId_]]" problem>
         <div>
           <iron-icon icon="cr:error-outline"></iron-icon>
-          <span id="problemMessage">[[problemMessage_]]</span>
+          <span id="problemMessage">
+            [[formatProblemMessage_(locale, problemMessageId_,
+                  problemMessageParameters_)]]
+          </span>
         </div>
       </div>
     </pin-keyboard>

ui/webui/resources/cr_components/chromeos/quick_unlock/setup_pin_keyboard.js

@@ -58,10 +58,22 @@ Polymer({
     initialPin_: String,
 
     /**
-     * The actual problem message to display.
+     * The message ID of actual problem message to display.
      * @private
      */
-    problemMessage_: String,
+    problemMessageId_: {
+      type: String,
+      value: '',
+    },
+
+    /**
+     * The additional parameters to format for the problem message string.
+     * @private
+     */
+    problemMessageParameters_: {
+      type: String,
+      value: '',
+    },
 
     /**
      * The type of problem class to show (warning or error).
@@ -163,7 +175,8 @@ Polymer({
   },
 
   /**
-   * Handles writing the appropriate message to |problemMessage_|.
+   * Handles writing the appropriate message to |problemMessageId_| &&
+   * |problemMessageParameters_|.
    * @private
    * @param {string} messageId
    * @param {chrome.quickUnlockPrivate.CredentialRequirements} requirements
@@ -185,7 +198,8 @@ Polymer({
         assertNotReached();
         break;
     }
-    this.problemMessage_ = this.i18n(messageId, additionalInformation);
+    this.problemMessageId_ = messageId;
+    this.problemMessageParameters_ = additionalInformation;
   },
 
   /**
@@ -206,7 +220,7 @@ Polymer({
 
   /** @private */
   hideProblem_: function() {
-    this.problemMessage_ = '';
+    this.problemMessageId_ = '';
     this.problemClass_ = '';
   },
 
@@ -334,12 +348,25 @@ Polymer({
 
   /**
    * @private
-   * @param {string} problemMessage
+   * @param {string} problemMessageId
    * @param {string} problemClass
    * @return {boolean}
    */
-  hasError_: function(problemMessage, problemClass) {
-    return !!problemMessage && problemClass == ProblemType.ERROR;
+  hasError_: function(problemMessageId, problemClass) {
+    return !!problemMessageId && problemClass == ProblemType.ERROR;
+  },
+
+  /**
+   * Formar problem message
+   * @private
+   * @param {string} locale  i18n locale data
+   * @param {string} messageId
+   * @param {string} messageParameters
+   * @return {string}
+   */
+  formatProblemMessage_: function(locale, messageId, messageParameters) {
+    return messageId ? this.i18nDynamic(locale, messageId, messageParameters) :
+                       '';
   },
 });