Added strings of i18n and made the pin-keyboard work for rtl lang.

BUG=622785, 623622
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2108813002
Cr-Commit-Position: refs/heads/master@{#403945}

chrome/app/generated_resources.grd

@@ -13196,6 +13196,17 @@ Please check your email at <ph name="ACCOUNT_EMAIL">$2<ex>jane.doe@gmail.com</ex
         <message name="IDS_SCREEN_LOCK_ACTIVE_USER">
           Currently signed in
         </message>
+        <if expr="chromeos">
+          <message name="IDS_PIN_KEYBOARD_HINT_TEXT_PIN" desc="Text to display in the pin field for user pod when no pin has been entered.">
+            Enter PIN
+          </message>
+          <message name="IDS_PIN_KEYBOARD_HINT_TEXT_PIN_PASSWORD" desc="Text to display in the pin field for user pod when no pin has been entered, and passwords are allowed.">
+            Enter PIN or Password
+          </message>
+          <message name="IDS_PIN_KEYBOARD_CLEAR" desc="Text to display text of button on pin keyboard which deletes last character.">
+            Clear
+          </message>
+        </if>
         <message name="IDS_LOGIN_ERROR_AUTHENTICATING" desc="Couldn't sign in because password is invalid">
           Sorry, your password could not be verified. Please try again.
         </message>

chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html

@@ -2,6 +2,7 @@
                              what i18n to use for keypad, ie, does 1 ABC make
                              sense in every scenario? -->
 
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/paper-styles.html">
@@ -11,9 +12,14 @@
   <template>
     <style>
       #root {
+        direction: ltr;
         display: flex;
       }
 
+      .input-non-pin {
+        direction: rtl;
+      }
+
       .row {
         display: flex;
       }
@@ -121,8 +127,10 @@
 
     <div id="root">
       <div id="container-constrained-width">
-        <div class="row">
-          <input id="pin-input" type="number" placeholder="Enter PIN"
+        <div class="row horizontal-center">
+          <input id="pin-input" type="[[computeInputType_(enablePassword)]]"
+                 class$="[[computeInputClass_(value)]]"
+                 placeholder="[[computeInputPlaceholder_(enablePassword)]]"
                  value="{{value::input}}"
                  on-keydown="onInputKeyDown_"></input>
           <paper-button class="digit-button first-row submit-button"
@@ -135,51 +143,52 @@
 
         <div class="row keyboard">
           <paper-button class="digit-button" on-tap="onNumberTap_" value="1">
-            <inner-text>1</inner-text>
+            <inner-text>$i18n{pinKeyboard1}</inner-text>
           </paper-button>
           <paper-button class="digit-button center-button" on-tap="onNumberTap_"
                         value="2">
-            <inner-text>2</inner-text>
+            <inner-text>$i18n{pinKeyboard2}</inner-text>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="3">
-            <inner-text>3</inner-text>
+            <inner-text>$i18n{pinKeyboard3}</inner-text>
           </paper-button>
         </div>
         <div class="row keyboard">
           <paper-button class="digit-button" on-tap="onNumberTap_" value="4">
-            <inner-text>4</inner-text>
+            <inner-text>$i18n{pinKeyboard4}</inner-text>
           </paper-button>
           <paper-button class="digit-button center-button" on-tap="onNumberTap_"
                         value="5">
-            <inner-text>5</inner-text>
+            <inner-text>$i18n{pinKeyboard5}</inner-text>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="6">
-            <inner-text>6</inner-text>
+            <inner-text>$i18n{pinKeyboard6}</inner-text>
           </paper-button>
         </div>
         <div class="row keyboard">
           <paper-button class="digit-button" on-tap="onNumberTap_" value="7">
-            <inner-text>7</inner-text>
+            <inner-text>$i18n{pinKeyboard7}</inner-text>
           </paper-button>
           <paper-button class="digit-button center-button" on-tap="onNumberTap_"
-                        value="8">
-            <inner-text>8</inner-text>
+            <inner-text>$i18n{pinKeyboard8}</inner-text>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="9">
-            <inner-text>9</inner-text>
+            <inner-text>$i18n{pinKeyboard9}</inner-text>
           </paper-button>
         </div>
         <div class="row keyboard">
           <div class="digit-button"></div>
           <paper-button class="digit-button center-button" on-tap="onNumberTap_"
                         value="0">
-            <inner-text>0</inner-text>
+            <inner-text>$i18n{pinKeyboard0}</inner-text>
           </paper-button>
           <paper-button class="digit-button clear-button" on-tap="onPinClear_">
             <div class="icon-container">
               <iron-icon class="icon" icon="icons:clear"><iron-icon>
             </div>
-            <inner-text class="icon-subheading">Clear</inner-text>
+            <inner-text class="icon-subheading">
+              $i18n{pinKeyboardClear}
+            </inner-text>
           </paper-button>
         </div>
       </div>

chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js

@@ -25,7 +25,20 @@
 Polymer({
   is: 'pin-keyboard',
 
+  behaviors: [
+    I18nBehavior,
+  ],
+
   properties: {
+    /**
+     * Whether or not the keyboard's input element should be numerical
+     * or password.
+     */
+    enablePassword: {
+      type: Boolean,
+      value: false
+    },
+
     /** The value stored in the keyboard's input element. */
     value: {
       type: String,
@@ -92,5 +105,40 @@ Polymer({
    */
   computeSubmitClass_: function(value) {
     return value.length > 0 ? 'ready-background' : '';
+  },
+
+  /**
+   * Computes whether the input type for the pin input should be password or
+   * numerical.
+   * @private
+   */
+  computeInputType_: function(enablePassword) {
+    return enablePassword ? 'password' : 'number';
+  },
+
+  /**
+   * Computes the value of the pin input placeholder.
+   * @private
+   */
+  computeInputPlaceholder_: function(enablePassword) {
+    return enablePassword ? this.i18n('pinKeyboardPlaceholderPinPassword') :
+                            this.i18n('pinKeyboardPlaceholderPin');
+  },
+
+  /**
+   * Computes the direction of the pin input.
+   * @private
+   */
+  computeInputClass_: function(password) {
+    // +password will convert a string to a number or to NaN if that's not
+    // possible. Number.isInteger will verify the value is not a NaN and that it
+    // does not contain decimals.
+    // This heuristic will fail for inputs like '1.0'.
+    //
+    // Since we still support users entering their passwords through the PIN
+    // keyboard, we swap the input box to rtl when we think it is a password
+    // (just numbers), if the document direction is rtl.
+    var enableRtl = (document.dir == 'rtl') && !Number.isInteger(+password);
+    return enableRtl ? 'input-non-pin' : '';
   }
 });

chrome/browser/ui/webui/chromeos/login/signin_screen_handler.cc

@@ -14,6 +14,7 @@
 #include "ash/shell.h"
 #include "ash/wm/lock_state_controller.h"
 #include "base/bind.h"
+#include "base/i18n/number_formatting.h"
 #include "base/location.h"
 #include "base/logging.h"
 #include "base/macros.h"
@@ -365,7 +366,18 @@ void SigninScreenHandler::SetUserInputMethod(
 
 void SigninScreenHandler::DeclareLocalizedValues(
     ::login::LocalizedValuesBuilder* builder) {
+  // Format numbers to be used on the pin keyboard.
+  for (int j = 0; j <= 9; j++) {
+    builder->Add("pinKeyboard" + base::IntToString(j),
+                 base::FormatNumber(int64_t{j}));
+  }
+
   builder->Add("passwordHint", IDS_LOGIN_POD_EMPTY_PASSWORD_TEXT);
+  builder->Add("pinKeyboardPlaceholderPin",
+               IDS_PIN_KEYBOARD_HINT_TEXT_PIN);
+  builder->Add("pinKeyboardPlaceholderPinPassword",
+               IDS_PIN_KEYBOARD_HINT_TEXT_PIN_PASSWORD);
+  builder->Add("pinKeyboardClear", IDS_PIN_KEYBOARD_CLEAR);
   builder->Add("signingIn", IDS_LOGIN_POD_SIGNING_IN);
   builder->Add("podMenuButtonAccessibleName",
                IDS_LOGIN_POD_MENU_BUTTON_ACCESSIBLE_NAME);

chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc

@@ -7,6 +7,8 @@
 #include <string>
 
 #include "base/command_line.h"
+#include "base/i18n/number_formatting.h"
+#include "base/strings/string_number_conversions.h"
 #include "base/strings/utf_string_conversions.h"
 #include "build/build_config.h"
 #include "chrome/browser/browser_process.h"
@@ -753,6 +755,10 @@ void AddPeopleStrings(content::WebUIDataSource* html_source) {
     {"manageSupervisedUsers", IDS_SETTINGS_PEOPLE_MANAGE_SUPERVISED_USERS},
 #if defined(OS_CHROMEOS)
     {"enableScreenlock", IDS_SETTINGS_PEOPLE_ENABLE_SCREENLOCK},
+    {"pinKeyboardPlaceholderPin", IDS_PIN_KEYBOARD_HINT_TEXT_PIN},
+    {"pinKeyboardPlaceholderPinPassword",
+      IDS_PIN_KEYBOARD_HINT_TEXT_PIN_PASSWORD},
+    {"pinKeyboardClear", IDS_PIN_KEYBOARD_CLEAR},
     {"quickUnlockTitle", IDS_SETTINGS_PEOPLE_QUICK_UNLOCK_TITLE},
     {"quickUnlockConfirmLogin", IDS_SETTINGS_PEOPLE_QUICK_UNLOCK_CONFIRM_LOGIN},
     {"quickUnlockPasswordLabel",
@@ -858,6 +864,12 @@ void AddPeopleStrings(content::WebUIDataSource* html_source) {
   AddLocalizedStringsBulk(html_source, localized_strings,
                           arraysize(localized_strings));
 
+  // Format numbers to be used on the pin keyboard.
+  for (int j = 0; j <= 9; j++) {
+    html_source->AddString("pinKeyboard" + base::IntToString(j),
+                           base::FormatNumber(int64_t{j}));
+  }
+
   html_source->AddString("autofillHelpURL", autofill::kHelpURL);
   html_source->AddString("supervisedUsersUrl",
                          chrome::kLegacySupervisedUserManagementURL);

ui/login/account_picker/user_pod_template.html

@@ -11,7 +11,7 @@
     </div>
   </div>
   <div class="pin-container pin-disabled">
-    <pin-keyboard></pin-keyboard>
+    <pin-keyboard enable-password></pin-keyboard>
   </div>
   <div class="main-pane">
     <div class="name-container">