chrome/browser/resources/settings/people_page/setup_pin_dialog.html

<link rel="import" href="chrome://resources/cr_components/chromeos/quick_unlock/pin_keyboard.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/assert.html">
<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="../i18n_setup.html">
<link rel="import" href="lock_screen_constants.html">
<link rel="import" href="../settings_shared_css.html">

<dom-module id="settings-setup-pin-dialog">
  <template>
    <style include="settings-shared">
      .error {
        color: var(--paper-red-500);
      }

      .error > iron-icon {
        --iron-icon-fill-color: var(--paper-red-500);
      }

      .warning {
        color: var(--cr-secondary-text-color);
      }

      .warning > iron-icon {
        --iron-icon-fill-color: var(--google-grey-refresh-700);
      }

      pin-keyboard {
        --pin-keyboard-digit-button: {
          font-size: 18px;
          padding: 15px 21px;
        };
      }

      #pinKeyboardDiv {
        justify-content: center;
      }

      /* Hide this using visibility: hidden instead of hidden so that the
         dialog does not resize when there are no problems to display. */
      #problemDiv[invisible] {
        visibility: hidden;
      }

      #problemMessage {
        font-size: 10px;
      }
    </style>

    <cr-dialog id="dialog" on-close="close"
        close-text="$i18n{close}">
      <div slot="title">[[getTitleMessage_(isConfirmStep_)]]</div>
      <div slot="body">
        <!-- PIN keyboard -->
        <div id="pinKeyboardDiv" class="settings-box continuation">
          <pin-keyboard id="pinKeyboard" on-pin-change="onPinChange_"
              on-submit="onPinSubmit_" value="{{pinKeyboardValue_}}"
              has-error="[[hasError_(problemMessage_, problemClass_)]]">
            <!-- Warning/error; only shown if title is hidden. -->
            <div id="problemDiv" class$="[[problemClass_]]"
                invisible$="[[!problemMessage_]]" problem>
              <iron-icon icon="cr:error-outline"></iron-icon>
              <span id="problemMessage">[[problemMessage_]]</span>
            </div>
          </pin-keyboard>
        </div>
      </div>
      <div slot="button-container">
        <paper-button class="cancel-button" on-click="onCancelTap_">
          $i18n{cancel}
        </paper-button>
        <paper-button class="action-button" on-click="onPinSubmit_"
            disabled$="[[!enableSubmit_]]">
          <span>[[getContinueMessage_(isConfirmStep_)]]</span>
        </paper-button>
      </div>
    </cr-dialog>
  </template>

  <script src="setup_pin_dialog.js"></script>
</dom-module>