blob: 57db71db78cf7f147d8acf814c596c84d3001def [file] [log] [blame]
<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>