<style include="settings-shared">
/* Putting this class on an element with two children will align the first
child at left edge and the second child at the right edge.
*/
.two-elements-left-right {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
}
:host {
display: block;
}
:host > div {
width: 100%;
}
</style>
<div>
<div class="two-elements-left-right">
<div>
$i18n{lockScreenPasswordLabel}
<template
is="dom-if"
if="[[hasNoPassword_(hasGaiaPassword_, hasLocalPassword_)]]">
<div class="secondary" id="setupPasswordSecondaryLabel">
$i18n{lockScreenPasswordDescription}
</div>
</template>
<template is="dom-if"
if="[[canSwitchLocalPassword_(hasGaiaPassword_,
changePasswordFactorSetupEnabled_)]]">
<div class="secondary" id="switchLocalPasswordSecondaryLabel">
$i18n{lockScreenSwitchLocalPasswordDescription}
</div>
</template>
</div>
<template
is="dom-if"
if="[[hasNoPassword_(hasGaiaPassword_, hasLocalPassword_)]]">
<cr-button aria-describedby="setupPasswordSecondaryLabel" disabled>
$i18n{lockScreenSetupPasswordButton}
</cr-button>
</template>
<template is="dom-if"
if="[[canSwitchLocalPassword_(hasGaiaPassword_,
changePasswordFactorSetupEnabled_)]]">
<cr-button id="switchLocalPasswordButton"
aria-describedby="switchLocalPasswordSecondaryLabel"
on-click="openSetLocalPasswordDialog_">
$i18n{lockScreenSetupPasswordButton}
</cr-button>
</template>
<template is="dom-if" if="[[hasLocalPassword_]]">
<cr-button on-click="openSetLocalPasswordDialog_">
$i18n{lockScreenChangePasswordButton}
</cr-button>
</template>
</div>
<settings-set-local-password-dialog
id="setLocalPasswordDialog"
auth-token="[[authToken]]">
</settings-set-local-password-dialog>
</div>