Localize SAML security token PIN UI

Replace strings hardcoded into the HTML code with the proper i18n calls.

Bug: 964069
Change-Id: If9b4de625a52fa32f7bc9c243e376b92fcc7bc1f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1750162Reviewed-by: Denis Kuznetsov <antrim@chromium.org>
Commit-Queue: Maksim Ivanov <emaxx@chromium.org>
Cr-Commit-Position: refs/heads/master@{#692031}

chrome/app/chromeos_strings.grdp

@@ -4025,4 +4025,12 @@ You can manage this account’s settings by installing the Family Link app on yo
   <message name="IDS_CROSTINI_UNSUPPORTED_IME" desc="Text for notification message shown when a user tries to use an unsupported Input Method Editor (IME) in a Linux app.">
     <ph name="IME_NAME">$1<ex>German NEO 2 keyboard</ex></ph> doesn’t work in Linux apps yet
   </message>
+
+  <!-- Strings for the security token PIN dialog shown during SAML user sign-in. -->
+  <message name="IDS_SAML_SECURITY_TOKEN_PIN_DIALOG_TITLE" desc="Title on the security token PIN input dialog during the SAML user sign-in.">
+    Enter your PIN
+  </message>
+  <message name="IDS_SAML_SECURITY_TOKEN_PIN_DIALOG_SUBTITLE" desc="Subtitle on the security token PIN input dialog during the SAML user sign-in.">
+    Provide the PIN that’s associated with your smart card.
+  </message>
 </grit-part>

chrome/app/chromeos_strings_grdp/IDS_SAML_SECURITY_TOKEN_PIN_DIALOG_SUBTITLE.png.sha1

+598f368fe5fb7de2ac07db1d81ec37fb614979ef
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_SAML_SECURITY_TOKEN_PIN_DIALOG_TITLE.png.sha1

+598f368fe5fb7de2ac07db1d81ec37fb614979ef
\ No newline at end of file

chrome/browser/resources/chromeos/login/security_token_pin.css

@@ -30,3 +30,8 @@
   --pin-button-height: 32px;
   --cr-icon-button-margin-start: 5px;
 }
+
+#learnMore {
+  color: var(--google-blue-500);
+  text-decoration: none;
+}

chrome/browser/resources/chromeos/login/security_token_pin.html

@@ -2,8 +2,6 @@
      Use of this source code is governed by a BSD-style license that can be
      found in the LICENSE file. -->
 
-<!-- TODO(crbug.com/964069): Make string localized, once they are finalized. -->
-
 <dom-module id="security-token-pin">
   <link rel="stylesheet" href="oobe_dialog_host.css">
   <link rel="stylesheet" href="oobe_flex_layout.css">
@@ -12,9 +10,16 @@
   <template>
 
     <oobe-dialog class="gaia-dialog" has-buttons>
-      <h1 slot="title">Enter your smart card PIN</h1>
+      <h1 slot="title">
+        [[i18nDynamic(locale, 'securityTokenPinDialogTitle')]]
+      </h1>
       <div slot="subtitle">
-        <p>Provide the PIN that's associated with your smart card.</p>
+        <p>
+          [[i18nDynamic(locale, 'securityTokenPinDialogSubtitle')]]
+          <a href="#" id="learnMore">
+            [[i18nDynamic(locale, 'learnMoreButton')]]
+          </a>
+        </p>
       </div>
       <div slot="footer">
         <div id="pinKeyboardContainer">

chrome/browser/resources/chromeos/login/security_token_pin.js

@@ -10,7 +10,7 @@
 Polymer({
   is: 'security-token-pin',
 
-  behaviors: [OobeDialogHostBehavior],
+  behaviors: [OobeDialogHostBehavior, I18nBehavior],
 
   properties: {
     /**

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

@@ -626,6 +626,11 @@ void GaiaScreenHandler::DeclareLocalizedValues(
                IDS_AD_PASSWORD_CHANGE_NEW_PASSWORD_REJECTED_SHORT_ERROR);
   builder->Add("adPassChangePasswordsMismatch",
                IDS_AD_PASSWORD_CHANGE_PASSWORDS_MISMATCH_ERROR);
+
+  builder->Add("securityTokenPinDialogTitle",
+               IDS_SAML_SECURITY_TOKEN_PIN_DIALOG_TITLE);
+  builder->Add("securityTokenPinDialogSubtitle",
+               IDS_SAML_SECURITY_TOKEN_PIN_DIALOG_SUBTITLE);
 }
 
 void GaiaScreenHandler::Initialize() {