| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/cr_components/chromeos/quick_unlock/lock_screen_constants.html"> |
| <link rel="import" href="chrome://resources/cr_components/chromeos/quick_unlock/pin_keyboard.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html"> |
| <link rel="import" href="chrome://resources/cr_elements/icons.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"> |
| |
| <!-- |
| |
| This module is a "pin setup" keyboard + pin display element. |
| It can be integrated into some UI container to set pin unlock. |
| |
| Usage: |
| <setup-pin-keyboard |
| enable-submit="{{enableSubmit_}}" |
| is-confirm-step="{{isConfirmStep_}}" |
| on-pin-submit="onPinSubmit_" |
| on-set-pin-done="onSetPinDone_" |
| set-modes="{{setModes}}"> |
| </setup-pin-keyboard> |
| |
| Where: |
| * enable-submit - Notification property for the container to enable/disable |
| submit button in the container (if it exists). True when pin can be |
| submitted. |
| * is-confirm-step - Notification property for the container to update UI |
| when pin confirmation is requested. False when initial PIN entry step |
| is active, true when pin confirmation is active. |
| * on-pin-submit - Event handler for the user requested pin submit by pressing |
| "Enter" key on the keyboard. setup-pin-keyboard will |
| not submit pin automatically, delegating this step to outer container. |
| Container must call setup-pin-keyboard.doSubmit() when |
| pin should be submitted. |
| * on-set-pin-done - Event handler for the "set pin done" event, which should |
| normally close the pin setup UI. This object state is reset before |
| sending this event. |
| * set-modes - Reflects property set in password_prompt_dialog.js. |
| |
| --> |
| |
| <dom-module id="setup-pin-keyboard"> |
| <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> |
| <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> |
| </template> |
| <script |
| src="chrome://resources/cr_components/chromeos/quick_unlock/setup_pin_keyboard.js"> |
| </script> |
| </dom-module> |