blob: ecb3915822c395ad3d507d4ef527750fce309e47 [file] [log] [blame]
<style include="cr-shared-style settings-shared iron-flex passwords-shared">
settings-avatar-icon {
flex-shrink: 0;
height: 40px;
margin-inline-end: 16px;
width: 40px;
}
#manageAccountPasswordsBanner {
border: 1px solid var(--google-grey-refresh-300);
border-radius: 10px;
cursor: pointer;
margin: 10px 20px;
padding: 0 10px;
}
@media (prefers-color-scheme: dark) {
#manageAccountPasswordsBanner {
border: 1px solid var(--google-grey-700);
}
}
#googleGIcon {
margin-inline-end: 16px;
}
</style>
<div id="moveMultiplePasswordsBanner" on-click="onMoveMultiplePasswordsTap_"
class="cr-row two-line"
hidden$="[[!shouldShowMoveMultiplePasswordsBanner_]]">
<img id="googleGIcon" alt=""
src="chrome://settings/images/googleg_standard_clr_32px.svg">
<div class="flex cr-padded-text">
<div>[[devicePasswordsLabel_]]</div>
<div class="secondary">$i18n{passwordMovePasswordsToAccount}</div>
</div>
<cr-button id="moveMultiplePasswordsButton"
class="action-button cr-button-gap">
$i18n{passwordOpenMoveMultiplePasswordsToAccountDialogButtonText}
</cr-button>
</div>
<div class="cr-row first">
<h2 class="flex">
$i18n{savedPasswordsHeading}
</h2>
</div>
<passwords-list-handler id="passwordsListHandler" allow-move-to-account-option
should-show-storage-details saved-passwords="[[savedPasswords]]">
<div slot="body" class="list-frame">
<div class="list-item column-header" aria-hidden="true">
$i18n{deviceOnlyPasswordsHeading}
</div>
<iron-list id="deviceOnlyPasswordList" preserve-focus
items="[[getFilteredPasswords_(deviceOnlyPasswords_,filter)]]"
class="cr-separators list-with-header"
scroll-target="[[subpageScrollTarget]]" risk-selection>
<template>
<password-list-item entry="[[item]]"
tabindex$="[[tabIndex]]" focus-row-index="[[index]]"
first$="[[!index]]" iron-list-tab-index="[[tabIndex]]"
last-focused="{{lastFocused_}}" list-blurred="{{listBlurred_}}">
</password-list-item>
</template>
</iron-list>
<div id="noDeviceOnlyPasswordsLabel" class="list-item"
hidden$="[[isNonEmpty_(deviceOnlyPasswords_)]]">
$i18n{noPasswordsFound}
</div>
<div class="list-item column-header" aria-hidden="true">
$i18n{deviceAndAccountPasswordsHeading}
</div>
<iron-list id="deviceAndAccountPasswordList" preserve-focus
items="[[getFilteredPasswords_(deviceAndAccountPasswords_,filter)]]"
class="cr-separators list-with-header"
scroll-target="[[subpageScrollTarget]]" risk-selection>
<template>
<password-list-item entry="[[item]]"
tabindex$="[[tabIndex]]" focus-row-index="[[index]]"
first$="[[!index]]" iron-list-tab-index="[[tabIndex]]"
last-focused="{{lastFocused_}}" list-blurred="{{listBlurred_}}">
</password-list-item>
</template>
</iron-list>
<div id="noDeviceAndAccountPasswordsLabel" class="list-item"
hidden$="[[isNonEmpty_(deviceAndAccountPasswords_)]]">
$i18n{noPasswordsFound}
</div>
</div>
</passwords-list-handler>
<div id="manageAccountPasswordsBanner" class="cr-row two-line list-item"
on-click="onManageAccountPasswordsClicked_">
<settings-avatar-icon></settings-avatar-icon>
<div class="flex cr-padded-text">
<div>$i18nRaw{managePasswordsPlaintext}</div>
<div class="secondary">[[accountEmail_]]</div>
</div>
<cr-icon-button iron-icon="cr:open-in-new"></cr-icon-button>
</div>
<cr-toast id="toast" duration="5000">
<div>$i18nRaw{devicePasswordsMoved}</div>
</cr-toast>
<template is="dom-if" if="[[showMoveMultiplePasswordsDialog_]]" restamp>
<password-move-multiple-passwords-to-account-dialog
passwords-to-move="[[allDevicePasswords_]]"
account-email="[[accountEmail_]]"
on-close="onMoveMultiplePasswordsDialogClose_">
</password-move-multiple-passwords-to-account-dialog>
</template>