blob: d863d6cc99b3c3ff944e711d24ab99a1e4feaa32 [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_elements/cr_radio_button/cr_radio_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_group/cr_radio_group.html">
<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="../controls/settings_toggle_button.html">
<link rel="import" href="easy_unlock_browser_proxy.html">
<link rel="import" href="fingerprint_browser_proxy.html">
<link rel="import" href="lock_state_behavior.html">
<link rel="import" href="lock_screen_password_prompt_dialog.html">
<link rel="import" href="setup_pin_dialog.html">
<link rel="import" href="../i18n_setup.html">
<link rel="import" href="../prefs/prefs_behavior.html">
<link rel="import" href="../prefs/prefs.html">
<link rel="import" href="../route.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="../settings_vars_css.html">
<dom-module id="settings-lock-screen">
<template>
<style include="settings-shared">
cr-policy-indicator {
margin-inline-start: auto;
/* Align the indicator with the h2 that it is associated with. */
padding-bottom: 12px;
padding-top: 24px;
}
#easyUnlock .start {
/* When the easy unlock toggle is shown, the easy unlock section's
* content becomes squashed to the top and bottom edges. Use padding to
* ensure the easy unlock content looks correct.
*/
padding: 11px 0;
}
#lockOptionsDiv {
display: block;
}
cr-radio-button {
--cr-radio-button-label: {
display: flex;
line-height: 154%; /* Apply 20px line-height to paper radio button
text to match rest of settings line-heights. */
width: 100%;
};
}
#pinPasswordDiv,
#pinPasswordSecondaryActionDiv {
margin: auto;
}
#easyUnlockSettingsCollapsible {
@apply --settings-list-frame-padding;
}
.no-padding {
padding: 0;
}
.underbar {
border-bottom: var(--settings-separator-line);
}
#unlockType[disabled] {
opacity: var(--settings-disabled-opacity);
pointer-events: none;
}
</style>
<div>
<settings-toggle-button id="enableLockScreen" class="first"
pref="{{prefs.settings.enable_screen_lock}}"
on-settings-boolean-control-change="onScreenLockChange_" no-set-pref
label="$i18n{enableScreenlock}">
</settings-toggle-button>
<template is="dom-if" if="[[quickUnlockEnabled_]]">
<div id="lockOptionsDiv">
<div class="settings-box">
<h2>[[selectLockScreenOptionsString(hasPinLogin)]]</h2>
<template is="dom-if" if="[[quickUnlockDisabledByPolicy_]]">
<cr-policy-indicator indicator-type="userPolicy">
</cr-policy-indicator>
</template>
</div>
<div class="list-frame" >
<cr-radio-group id="unlockType"
disabled$="[[quickUnlockDisabledByPolicy_]]"
selected="{{selectedUnlockType}}">
<cr-radio-button name="password" class="list-item underbar">
<div class="start">
$i18n{lockScreenPasswordOnly}
</div>
</cr-radio-button>
<cr-radio-button name="pin+password" class="list-item">
<div id="pinPasswordDiv" class="start">
$i18n{lockScreenPinOrPassword}
</div>
<template is="dom-if"
if="[[showConfigurePinButton_(selectedUnlockType)]]">
<div class="separator"></div>
<div id="pinPasswordSecondaryActionDiv"
class="secondary-action">
<!-- Use stop-keyboard-event-propagation to prevent
triggering this when focused after closing the
dialog. -->
<paper-button id="setupPinButton" class="secondary-button"
on-click="onConfigurePin_"
stop-keyboard-event-propagation>
[[getSetupPinText_(hasPin)]]
</paper-button>
</div>
</template>
</cr-radio-button>
</cr-radio-group>
</div>
</div>
</template>
<template is="dom-if" if="[[lockScreenNotificationsEnabled_]]">
<h2 class="settings-box">
$i18n{lockScreenNotificationTitle}
</h2>
<div class="list-frame">
<settings-radio-group
pref="{{prefs.ash.message_center.lock_screen_mode}}">
<template is="dom-if"
if="[[lockScreenHideSensitiveNotificationSupported_]]">
<cr-radio-button name="hideSensitive" class="list-item underbar"
pref="[[prefs.ash.message_center.lock_screen_mode]]"
label="$i18n{lockScreenNotificationHideSensitive}">
</cr-radio-button>
</template>
<cr-radio-button name="show" class="list-item underbar"
pref="[[prefs.ash.message_center.lock_screen_mode]]"
label="$i18n{lockScreenNotificationShow}">
</cr-radio-button>
<cr-radio-button name="hide" class="list-item"
pref="[[prefs.ash.message_center.lock_screen_mode]]"
label="$i18n{lockScreenNotificationHide}">
</cr-radio-button>
</settings-radio-group>
</div>
</template>
<template is="dom-if" if="[[fingerprintUnlockEnabled_]]">
<div id="fingerprintDiv" class="settings-box two-line">
<div class="start">
$i18n{lockScreenEditFingerprints}
<div class="secondary" id="lockScreenEditFingerprintsSecondary">
[[getDescriptionText_(numFingerprints_)]]
</div>
</div>
<div class="separator"></div>
<div class="secondary-action">
<paper-button class="secondary-button"
on-click="onEditFingerprints_"
aria-label="$i18n{lockScreenEditFingerprints}"
aria-descibedby="lockScreenEditFingerprintsSecondary">
$i18n{lockScreenSetupFingerprintButton}
</paper-button>
</div>
</div>
</template>
<template is="dom-if" if="[[easyUnlockAvailable_(
multideviceSettingsEnabled_, easyUnlockAllowed_,
easyUnlockInLegacyHostMode_)]]">
<div id="easyUnlock" class="settings-box two-line">
<div class="start">
<div>$i18n{easyUnlockSectionTitle}</div>
<div class="secondary">
[[getEasyUnlockDescription_(easyUnlockEnabled_,
'$i18nPolymer{easyUnlockDescription}',
'$i18nPolymer{easyUnlockSetupIntro}')]]
<a target="_blank" href="$i18n{easyUnlockLearnMoreURL}">
$i18n{learnMore}
</a>
</div>
</div>
</div>
<iron-collapse opened="[[easyUnlockEnabled_]]"
id="easyUnlockSettingsCollapsible">
<settings-toggle-button
class="continuation no-padding underbar"
pref="{{prefs.proximity_auth.is_chromeos_login_enabled}}"
label="$i18n{easyUnlockAllowSignInLabel}">
</settings-toggle-button>
<div class="settings-box continuation no-padding">
<div class="start">
$i18n{easyUnlockProximityThresholdLabel}
</div>
<settings-dropdown-menu
pref="{{prefs.easy_unlock.proximity_threshold}}"
menu-options="[[easyUnlockProximityThresholdMapping_]]">
</settings-dropdown-menu>
</div>
</iron-collapse>
</template>
<template is="dom-if" if="[[showPasswordPromptDialog_]]" restamp>
<settings-lock-screen-password-prompt-dialog
id="lockScreenPasswordPrompt"
on-close="onPasswordPromptDialogClose_" set-modes="{{setModes_}}"
auth-token="{{authToken_}}">
</settings-lock-screen-password-prompt-dialog>
</template>
<template is="dom-if" if="[[showSetupPinDialog_]]" restamp>
<settings-setup-pin-dialog id="setupPin" set-modes="[[setModes_]]"
on-close="onSetupPinDialogClose_">
</settings-setup-pin-dialog>
</template>
</div>
</template>
<script src="lock_screen.js"></script>
</dom-module>