[CrOS Settings] Implement UI for confirmation code page.

Add UI for confirmation code page and installing profile using a
confirmation code.

Screenshot:
https://screenshot.googleplex.com/BECB5ziR3vFEt6a.png

Bug: 1093185
Change-Id: Iec4fcfb08f501495b640834e404f34dc69b5f9db
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2616733
Commit-Queue: Gordon Seto <gordonseto@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Azeem Arshad <azeemarshad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#841742}

chrome/app/chromeos_strings.grdp

@@ -360,6 +360,12 @@
   <message name="IDS_CELLULAR_SETUP_CLOSE_EID_POPUP_BUTTON_LABEL" desc="A11y and tooltip label for EID and QR code popup close button when viewing EID and QR code popup">
     Close EID and QR code popup
   </message>
+  <message name="IDS_CELLULAR_SETUP_ESIM_PAGE_CONFIRMATION_CODE_MESSAGE" desc="Message, prompting the user to enter the confirmation code to activate an eSIM profile.">
+    Please enter your confirmation code for <ph name="PROFILE_NAME">$1<ex>Google Fi</ex></ph>.
+  </message>
+  <message name="IDS_CELLULAR_SETUP_ESIM_PAGE_CONFIRMATION_CODE_INPUT" desc="Label for the input used to enter the confirmation code to activate an eSIM profile.">
+    Confirmation code
+  </message>
 
   <!-- Upgrade notifications -->
   <message name="IDS_RELAUNCH_REQUIRED_TITLE_DAYS" desc="The title of a dialog that tells users the device must be restarted within two or more days.">

chrome/app/chromeos_strings_grdp/IDS_CELLULAR_SETUP_ESIM_PAGE_CONFIRMATION_CODE_INPUT.png.sha1

+010932e9ce938b6970f3c0c11b363376d1168b0d
\ No newline at end of file

chrome/app/chromeos_strings_grdp/IDS_CELLULAR_SETUP_ESIM_PAGE_CONFIRMATION_CODE_MESSAGE.png.sha1

+010932e9ce938b6970f3c0c11b363376d1168b0d
\ No newline at end of file

chrome/browser/ui/webui/chromeos/cellular_setup/cellular_setup_localized_strings_provider.cc

@@ -69,7 +69,11 @@ constexpr webui::LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
     {"eidPopupTitle", IDS_CELLULAR_SETUP_EID_POPUP_TITLE},
     {"eidPopupDescription", IDS_CELLULAR_SETUP_EID_POPUP_DESCRIPTION},
     {"closeEidPopupButtonLabel",
-     IDS_CELLULAR_SETUP_CLOSE_EID_POPUP_BUTTON_LABEL}};
+     IDS_CELLULAR_SETUP_CLOSE_EID_POPUP_BUTTON_LABEL},
+    {"confirmationCodeMessage",
+     IDS_CELLULAR_SETUP_ESIM_PAGE_CONFIRMATION_CODE_MESSAGE},
+    {"confirmationCodeInput",
+     IDS_CELLULAR_SETUP_ESIM_PAGE_CONFIRMATION_CODE_INPUT}};  // namespace
 
 struct NamedBoolean {
   const char* name;

ui/webui/resources/cr_components/BUILD.gn

@@ -38,6 +38,7 @@ generate_grd("build_grdp") {
       "chromeos/cellular_setup/psim_2x.png",
       "chromeos/cellular_setup/esim_1x.png",
       "chromeos/cellular_setup/esim_2x.png",
+      "chromeos/cellular_setup/default_esim_profile.svg",
       "chromeos/network/cellular_0_with_x.svg",
       "chromeos/network/cellular_0.svg",
       "chromeos/network/cellular_1.svg",

ui/webui/resources/cr_components/chromeos/cellular_setup/confirmation_code_page.html

@@ -6,11 +6,43 @@
 <dom-module id="confirmation-code-page">
   <template>
     <style include="iron-flex">
+      [slot='page-body'] {
+        margin-top: -20px;
+      }
+
+      #details {
+        align-items: center;
+        color: var(--cr-primary-text-color);
+        display: flex;
+        margin-bottom: 40px;
+        margin-top: 60px;
+      }
+
+      #profileImage {
+        margin-inline-end: 16px;
+      }
+
+      #confirmationCode {
+        margin-inline-end: 16px;
+      }
     </style>
     <base-page>
-      <div slot="page-body" class="layout horizontal center-center">
-        <!-- TODO(crbug.com/1093185): Create UI for confirmation code page. -->
-        Please enter your confirmation code for [[getProfileName_(profileProperties_)]].
+      <div slot="page-body">
+        <!-- TODO(crbug.com/1093185): Handle activation code case where
+             we don't have profileProperties_. -->
+        <div id="description">[[getMessage_(profileProperties_)]]</div>
+        <div id="details">
+          <!-- TODO(crbug.com/1093185): Update with real profile image. -->
+          <img id="profileImage" src="default_esim_profile.svg">
+          <div>
+            [[getProfileName_(profileProperties_)]]
+          </div>
+        </div>
+        <cr-input id="confirmationCode"
+          label="[[i18n('confirmationCodeInput')]]"
+          value="{{confirmationCode}}"
+          aria-describedby="description">
+        </cr-input>
       </div>
     </base-page>
   </template>

ui/webui/resources/cr_components/chromeos/cellular_setup/confirmation_code_page.js

@@ -21,6 +21,11 @@ Polymer({
       observer: 'onProfileChanged_',
     },
 
+    confirmationCode: {
+      type: String,
+      notify: true,
+    },
+
     /**
      * @type {?chromeos.cellularSetup.mojom.ESimProfileProperties}
      * @private
@@ -42,6 +47,18 @@ Polymer({
     });
   },
 
+  /**
+   * @return {string}
+   * @private
+   */
+  getMessage_() {
+    const profileName = this.getProfileName_();
+    if (!profileName) {
+      return '';
+    }
+    return this.i18n('confirmationCodeMessage', profileName);
+  },
+
   /**
    * @return {string}
    * @private

ui/webui/resources/cr_components/chromeos/cellular_setup/default_esim_profile.svg

+<svg width="31" height="20" viewBox="0 0 31 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h23a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4zm7.704 10.915h-3.55V6.18h-1.36V14h4.91v-1.085zm4.254-5.64h2.438V6.18h-6.203v1.095h2.417V14h1.348V7.275zm4.823 3.234h3.212V9.435h-3.212v-2.16h3.717V6.18h-5.076V14h5.114v-1.085H20.78v-2.406z" fill="#5F6368"/></svg>
\ No newline at end of file

ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.html

@@ -39,6 +39,7 @@
           show-error="{{showError_}}">
       </activation-code-page>
       <confirmation-code-page id="confirmationCodePage"
+          confirmation-code="{{confirmationCode_}}"
           profile="[[selectedProfile_]]">
       </confirmation-code-page>
       <final-page

ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.js

@@ -88,6 +88,13 @@ cr.define('cellular_setup', function() {
         type: String,
         value: '',
       },
+
+      /** @private */
+      confirmationCode_: {
+        type: String,
+        value: '',
+        observer: 'onConfirmationCodeUpdated_',
+      },
     },
 
     /**
@@ -162,6 +169,7 @@ cr.define('cellular_setup', function() {
      *     response
      */
     handleProfileInstallResponse_(response) {
+      // TODO(crbug.com/1093185) Handle error during confirmation code page.
       this.showError_ = response.result !==
           chromeos.cellularSetup.mojom.ProfileInstallResult.kSuccess;
       if (response.result ===
@@ -224,11 +232,11 @@ cr.define('cellular_setup', function() {
             cancel: this.delegate.shouldShowCancelButton() ?
                 cellularSetup.ButtonState.SHOWN_AND_ENABLED :
                 cellularSetup.ButtonState.HIDDEN,
-            done: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
-            next: cellularSetup.ButtonState.HIDDEN,
+            done: cellularSetup.ButtonState.HIDDEN,
+            // TODO(crbug.com/1093185) Add a "Confirm" button state.
+            next: cellularSetup.ButtonState.SHOWN_BUT_DISABLED,
             tryAgain: cellularSetup.ButtonState.HIDDEN,
             skipDiscovery: cellularSetup.ButtonState.HIDDEN,
-            // TODO(crbug.com/1093185) Add a "Confirm" button state.
           };
           break;
         case ESimUiState.PROFILE_SELECTION:
@@ -285,6 +293,20 @@ cr.define('cellular_setup', function() {
       }
     },
 
+    /** @private */
+    onConfirmationCodeUpdated_() {
+      // TODO(crbug.com/1093185) Change this to updating a "Confirm" button's
+      // state.
+      if (this.confirmationCode_) {
+        this.set(
+            'buttonState.next', cellularSetup.ButtonState.SHOWN_AND_ENABLED);
+      } else {
+        this.set(
+            'buttonState.next', cellularSetup.ButtonState.SHOWN_BUT_DISABLED);
+      }
+    },
+
+    /** SubflowBehavior override */
     navigateForward() {
       switch (this.state_) {
         case ESimUiState.ACTIVATION_CODE_ENTRY:
@@ -297,12 +319,25 @@ cr.define('cellular_setup', function() {
           break;
         case ESimUiState.PROFILE_SELECTION:
           if (this.selectedProfile_) {
+            // Assume installing the profile doesn't require a confirmation
+            // code, send an empty string.
             this.selectedProfile_.installProfile('').then(
                 this.handleProfileInstallResponse_.bind(this));
           } else {
             this.state_ = ESimUiState.ACTIVATION_CODE_ENTRY;
           }
           break;
+        case ESimUiState.CONFIRMATION_CODE_ENTRY:
+          if (this.selectedProfile_) {
+            this.selectedProfile_.installProfile(this.confirmationCode_)
+                .then(this.handleProfileInstallResponse_.bind(this));
+          } else {
+            this.euicc_
+                .installProfileFromActivationCode(
+                    this.activationCode_, this.confirmationCode_)
+                .then(this.handleProfileInstallResponse_.bind(this));
+          }
+          break;
         default:
           assertNotReached();
           break;
@@ -311,6 +346,7 @@ cr.define('cellular_setup', function() {
 
     /**
      * @returns {boolean} true if backward navigation was handled
+     * SubflowBehavior override
      */
     attemptBackwardNavigation() {
       // TODO(crbug.com/1093185): Handle state when camera is used