<style include="settings-shared">
div[slot='body'] {
/* Make the secondary 'Add' button in the body to align with the
primary 'Done' button in the body-container. */
padding-inline-end: 16px;
}
#header {
display: flex;
}
#header .header-label {
flex: auto;
}
h3 {
font-size: inherit;
font-weight: 500;
margin: 0;
padding-bottom: 12px;
padding-top: 32px;
}
iron-icon {
padding-inline-end: 12px;
}
.list-item .name {
word-break: break-word;
}
.name {
flex: 3;
}
#container {
padding-inline-start: var(--cr-section-padding);
}
@media (prefers-color-scheme: dark) {
#lightIcon {
display: none;
}
}
@media (prefers-color-scheme: light) {
#darkIcon {
display: none;
}
}
</style>
<cr-dialog id="dialog" close-text="$i18n{cancel}" ignore-popstate
on-close="onDialogClosed_">
<div slot="title">[[dialogTitle_(dialogPage_)]]</div>
<div slot="body">
<cr-page-selector attr-for-selected="id" selected="[[dialogPage_]]"
on-iron-select="onIronSelect_">
<div id="initial">
<p>$i18n{securityKeysTouchToContinue}</p>
<paper-spinner-lite style="padding-bottom: 16px;" active>
</paper-spinner-lite>
</div>
<div id="pinPrompt">
<settings-security-keys-pin-field id="pin"
min-pin-length="[[minPinLength_]]">
</settings-security-keys-pin-field>
</div>
<div id="enrollments">
<div id="header" class="list-item column-header">
<h3 class="header-label">[[enrollmentsHeader_(enrollments_)]]</h3>
<cr-button id="addButton" on-click="addButtonClick_"
class="secondary-button header-aligned-button">
$i18n{add}
</cr-button>
</div>
<div id="container">
<iron-list id="enrollmentList" items="[[enrollments_]]"
class="cr-separators" role="list">
<template>
<div class="list-item" first$="[[!index]]" role="listitem">
<iron-icon id="darkIcon"
icon="fingerprint-icon:fingerprint-scanned-dark">
</iron-icon>
<iron-icon id="lightIcon"
icon="fingerprint-icon:fingerprint-scanned-light">
</iron-icon>
<div class="name">
[[item.name]]
</div>
<cr-icon-button class="icon-clear"
aria-label="$i18n{securityKeysBioEnrollmentDelete}"
on-click="deleteEnrollment_"
disabled="[[deleteInProgress_]]">
</cr-icon-button>
</div>
</template>
</iron-list>
</div>
</div>
<div id="enroll">
<p>[[progressArcLabel_]]</p>
<fingerprint-progress-arc id="arc" autoplay>
</fingerprint-progress-arc>
</div>
<div id="chooseName">
<p>$i18n{securityKeysBioEnrollmentChooseName}</p>
<cr-input type="text" id="enrollmentName"
max-length="[[enrollmentNameMaxUtf8Length_]]"
value="{{recentEnrollmentName_}}"
label="$i18n{securityKeysBioEnrollmentNameLabel}"
on-input="onEnrollmentNameInput_"
error-message="[[enrollmentNameError_]]"
invalid="[[!isNullOrEmpty_(enrollmentNameError_)]]"
spellcheck="false">
</cr-input>
</div>
<div id="error">[[errorMsg_]]</div>
</cr-page-selector>
</div>
<div slot="button-container">
<cr-button id="cancelButton" class="cancel-button" on-click="cancel_"
hidden="[[!cancelButtonVisible_]]"
disabled="[[cancelButtonDisabled_]]">
$i18n{cancel}
</cr-button>
<cr-button id="confirmButton" class="action-button"
hidden="[[!confirmButtonVisible_]]"
disabled="[[confirmButtonDisabled_]]"
on-click="confirmButtonClick_">
[[confirmButtonLabel_]]
</cr-button>
<cr-button id="doneButton" class="action-button"
on-click="done_" hidden="[[!doneButtonVisible_]]">
$i18n{done}
</cr-button>
</div>
</cr-dialog>