[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;

chrome/test/data/webui/cr_components/chromeos/cellular_setup/esim_flow_ui_test.js

@@ -10,7 +10,7 @@
 // #import {setESimManagerRemoteForTesting} from 'chrome://resources/cr_components/chromeos/cellular_setup/mojo_interface_provider.m.js';
 // #import {ButtonState} from 'chrome://resources/cr_components/chromeos/cellular_setup/cellular_types.m.js';
 // #import {ESimPageName} from 'chrome://resources/cr_components/chromeos/cellular_setup/esim_flow_ui.m.js';
-// #import {assertTrue} from '../../../chai_assert.js';
+// #import {assertEquals, assertTrue} from '../../../chai_assert.js';
 // #import {FakeESimManagerRemote} from './fake_esim_manager_remote.m.js';
 // #import {FakeCellularSetupDelegate} from './fake_cellular_setup_delegate.m.js';
 // clang-format on
@@ -18,6 +18,12 @@
 suite('CrComponentsEsimFlowUiTest', function() {
   let eSimPage;
   let eSimManagerRemote;
+  let ironPages;
+  let profileLoadingPage;
+  let profileDiscoveryPage;
+  let activationCodePage;
+  let confirmationCodePage;
+  let finalPage;
 
   async function flushAsync() {
     Polymer.dom.flush();
@@ -34,11 +40,24 @@ suite('CrComponentsEsimFlowUiTest', function() {
     eSimPage.initSubflow();
     document.body.appendChild(eSimPage);
     Polymer.dom.flush();
+
+    ironPages = eSimPage.$$('iron-pages');
+    profileLoadingPage = eSimPage.$$('#profileLoadingPage');
+    profileDiscoveryPage = eSimPage.$$('#profileDiscoveryPage');
+    activationCodePage = eSimPage.$$('#activationCodePage');
+    confirmationCodePage = eSimPage.$$('#confirmationCodePage');
+    finalPage = eSimPage.$$('#finalPage');
+
+    assertTrue(!!profileLoadingPage);
+    assertTrue(!!profileDiscoveryPage);
+    assertTrue(!!activationCodePage);
+    assertTrue(!!confirmationCodePage);
+    assertTrue(!!finalPage);
   });
 
   function assertSelectedPage(pageName, page) {
-    assertTrue(eSimPage.selectedESimPageName_ === pageName);
-    assertTrue(eSimPage.selectedESimPageName_ === page.id);
+    assertEquals(ironPages.selected, pageName);
+    assertEquals(ironPages.selected, page.id);
   }
 
   test('No eSIM profile flow invalid activation code', async function() {
@@ -48,14 +67,6 @@ suite('CrComponentsEsimFlowUiTest', function() {
         chromeos.cellularSetup.mojom.ProfileInstallResult
             .kErrorInvalidActivationCode);
 
-    const profileLoadingPage = eSimPage.$$('#profileLoadingPage');
-    const activationCodePage = eSimPage.$$('#activationCodePage');
-    const finalPage = eSimPage.$$('#finalPage');
-
-    assertTrue(!!profileLoadingPage);
-    assertTrue(!!activationCodePage);
-    assertTrue(!!finalPage);
-
     // Loading page should be showing.
     assertSelectedPage(
         cellular_setup.ESimPageName.PROFILE_LOADING, profileLoadingPage);
@@ -87,14 +98,6 @@ suite('CrComponentsEsimFlowUiTest', function() {
   test('No eSIM profile flow valid activation code', async function() {
     eSimManagerRemote.addEuiccForTest(0);
 
-    const profileLoadingPage = eSimPage.$$('#profileLoadingPage');
-    const activationCodePage = eSimPage.$$('#activationCodePage');
-    const finalPage = eSimPage.$$('#finalPage');
-
-    assertTrue(!!profileLoadingPage);
-    assertTrue(!!activationCodePage);
-    assertTrue(!!finalPage);
-
     // Loading page should be showing.
     assertSelectedPage(
         cellular_setup.ESimPageName.PROFILE_LOADING, profileLoadingPage);
@@ -120,14 +123,61 @@ suite('CrComponentsEsimFlowUiTest', function() {
     assertSelectedPage(cellular_setup.ESimPageName.FINAL, finalPage);
   });
 
-  test('Single eSIM profile flow successful install', async function() {
-    eSimManagerRemote.addEuiccForTest(1);
+  test(
+      'No eSIM profile flow valid activation code confirmation code required successful install',
+      async function() {
+        eSimManagerRemote.addEuiccForTest(0);
+        const availableEuiccs = await eSimManagerRemote.getAvailableEuiccs();
+        availableEuiccs.euiccs[0].setProfileInstallResultForTest(
+            chromeos.cellularSetup.mojom.ProfileInstallResult
+                .kErrorNeedsConfirmationCode);
 
-    const profileLoadingPage = eSimPage.$$('#profileLoadingPage');
-    const finalPage = eSimPage.$$('#finalPage');
+        // Loading page should be showing.
+        assertSelectedPage(
+            cellular_setup.ESimPageName.PROFILE_LOADING, profileLoadingPage);
 
-    assertTrue(!!profileLoadingPage);
-    assertTrue(!!finalPage);
+        await flushAsync();
+
+        // Should now be at the activation code page.
+        assertSelectedPage(
+            cellular_setup.ESimPageName.ACTIVATION_CODE, activationCodePage);
+        // Insert an activation code.
+        activationCodePage.$$('#activationCode').value = 'ACTIVATION_CODE';
+
+        // Next button should now be enabled.
+        assertTrue(
+            eSimPage.buttonState.next ===
+            cellularSetup.ButtonState.SHOWN_AND_ENABLED);
+
+        eSimPage.navigateForward();
+
+        await flushAsync();
+
+        // Confirmation code page should be showing.
+        assertSelectedPage(
+            cellular_setup.ESimPageName.CONFIRMATION_CODE,
+            confirmationCodePage);
+
+        availableEuiccs.euiccs[0].setProfileInstallResultForTest(
+            chromeos.cellularSetup.mojom.ProfileInstallResult.kSuccess);
+        confirmationCodePage.$$('#confirmationCode').value =
+            'CONFIRMATION_CODE';
+
+        // Next button should now be enabled.
+        assertTrue(
+            eSimPage.buttonState.next ===
+            cellularSetup.ButtonState.SHOWN_AND_ENABLED);
+
+        eSimPage.navigateForward();
+
+        await flushAsync();
+
+        // Should go to final page.
+        assertSelectedPage(cellular_setup.ESimPageName.FINAL, finalPage);
+      });
+
+  test('Single eSIM profile flow successful install', async function() {
+    eSimManagerRemote.addEuiccForTest(1);
 
     // Loading page should be showing.
     assertSelectedPage(
@@ -147,12 +197,6 @@ suite('CrComponentsEsimFlowUiTest', function() {
     profileList.profiles[0].setProfileInstallResultForTest(
         chromeos.cellularSetup.mojom.ProfileInstallResult.kFailure);
 
-    const profileLoadingPage = eSimPage.$$('#profileLoadingPage');
-    const finalPage = eSimPage.$$('#finalPage');
-
-    assertTrue(!!profileLoadingPage);
-    assertTrue(!!finalPage);
-
     // Loading page should be showing.
     assertSelectedPage(
         cellular_setup.ESimPageName.PROFILE_LOADING, profileLoadingPage);
@@ -164,43 +208,47 @@ suite('CrComponentsEsimFlowUiTest', function() {
     assertTrue(!!finalPage.$$('.error'));
   });
 
-  test('Single eSIM profile flow confirmation code required', async function() {
-    eSimManagerRemote.addEuiccForTest(1);
-    const availableEuiccs = await eSimManagerRemote.getAvailableEuiccs();
-    const profileList = await availableEuiccs.euiccs[0].getProfileList();
-    profileList.profiles[0].setProfileInstallResultForTest(
-        chromeos.cellularSetup.mojom.ProfileInstallResult
-            .kErrorNeedsConfirmationCode);
+  test(
+      'Single eSIM profile flow confirmation code required successful install',
+      async function() {
+        eSimManagerRemote.addEuiccForTest(1);
+        const availableEuiccs = await eSimManagerRemote.getAvailableEuiccs();
+        const profileList = await availableEuiccs.euiccs[0].getProfileList();
+        profileList.profiles[0].setProfileInstallResultForTest(
+            chromeos.cellularSetup.mojom.ProfileInstallResult
+                .kErrorNeedsConfirmationCode);
 
-    const profileLoadingPage = eSimPage.$$('#profileLoadingPage');
-    const confirmationCodePage = eSimPage.$$('#confirmationCodePage');
+        // Loading page should be showing.
+        assertSelectedPage(
+            cellular_setup.ESimPageName.PROFILE_LOADING, profileLoadingPage);
 
-    assertTrue(!!profileLoadingPage);
-    assertTrue(!!confirmationCodePage);
+        await flushAsync();
 
-    // Loading page should be showing.
-    assertSelectedPage(
-        cellular_setup.ESimPageName.PROFILE_LOADING, profileLoadingPage);
+        // Confirmation code page should be showing.
+        assertSelectedPage(
+            cellular_setup.ESimPageName.CONFIRMATION_CODE,
+            confirmationCodePage);
 
-    await flushAsync();
+        profileList.profiles[0].setProfileInstallResultForTest(
+            chromeos.cellularSetup.mojom.ProfileInstallResult.kSuccess);
+        confirmationCodePage.$$('#confirmationCode').value =
+            'CONFIRMATION_CODE';
 
-    // Confirmation code page should be showing.
-    assertSelectedPage(
-        cellular_setup.ESimPageName.CONFIRMATION_CODE, confirmationCodePage);
-  });
+        // Next button should now be enabled.
+        assertTrue(
+            eSimPage.buttonState.next ===
+            cellularSetup.ButtonState.SHOWN_AND_ENABLED);
 
-  test('Multiple eSIM profiles skip discovery flow', async function() {
-    eSimManagerRemote.addEuiccForTest(2);
+        eSimPage.navigateForward();
 
-    const profileLoadingPage = eSimPage.$$('#profileLoadingPage');
-    const profileDiscoveryPage = eSimPage.$$('#profileDiscoveryPage');
-    const activationCodePage = eSimPage.$$('#activationCodePage');
-    const finalPage = eSimPage.$$('#finalPage');
+        await flushAsync();
 
-    assertTrue(!!profileLoadingPage);
-    assertTrue(!!profileDiscoveryPage);
-    assertTrue(!!activationCodePage);
-    assertTrue(!!finalPage);
+        // Should go to final page.
+        assertSelectedPage(cellular_setup.ESimPageName.FINAL, finalPage);
+      });
+
+  test('Multiple eSIM profiles skip discovery flow', async function() {
+    eSimManagerRemote.addEuiccForTest(2);
 
     // Loading page should be showing.
     assertSelectedPage(
@@ -240,16 +288,6 @@ suite('CrComponentsEsimFlowUiTest', function() {
   test('Multiple eSIM profiles select flow', async function() {
     eSimManagerRemote.addEuiccForTest(2);
 
-    const profileLoadingPage = eSimPage.$$('#profileLoadingPage');
-    const profileDiscoveryPage = eSimPage.$$('#profileDiscoveryPage');
-    const activationCodePage = eSimPage.$$('#activationCodePage');
-    const finalPage = eSimPage.$$('#finalPage');
-
-    assertTrue(!!profileLoadingPage);
-    assertTrue(!!profileDiscoveryPage);
-    assertTrue(!!activationCodePage);
-    assertTrue(!!finalPage);
-
     // Loading page should be showing.
     assertSelectedPage(
         cellular_setup.ESimPageName.PROFILE_LOADING, profileLoadingPage);
@@ -292,14 +330,6 @@ suite('CrComponentsEsimFlowUiTest', function() {
             chromeos.cellularSetup.mojom.ProfileInstallResult
                 .kErrorNeedsConfirmationCode);
 
-        const profileLoadingPage = eSimPage.$$('#profileLoadingPage');
-        const profileDiscoveryPage = eSimPage.$$('#profileDiscoveryPage');
-        const confirmationCodePage = eSimPage.$$('#confirmationCodePage');
-
-        assertTrue(!!profileLoadingPage);
-        assertTrue(!!profileDiscoveryPage);
-        assertTrue(!!confirmationCodePage);
-
         // Loading page should be showing.
         assertSelectedPage(
             cellular_setup.ESimPageName.PROFILE_LOADING, profileLoadingPage);

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