| <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/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(--paper-grey-700); |
| } |
| |
| .warning > iron-icon { |
| --iron-icon-fill-color: var(--paper-grey-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> |