blob: 8c16900a8050a85ca85a5c7709a6c933a1207ce2 [file] [log] [blame]
<style include="cr-shared-style settings-shared iron-flex passwords-shared">
#savedPasswordsHeaders {
/* This adds enough padding so that the labels are aligned with the
* columns. It is necessary due to the absence of the "more actions"
* button in the heading.
*/
padding-inline-end: calc(
var(--cr-icon-ripple-size) + var(--cr-icon-button-margin-start));
}
#undoLabel {
display: flex;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#exportImportMenuButtonContainer {
margin-inline-end: 0;
}
#checkPasswordsBannerContainer {
line-height: 0;
padding-top: 16px;
}
#banner {
border-radius: 4px;
width: 100%;
}
#checkPasswordsLinkRow iron-icon {
--iron-icon-fill-color: var(--google-red-600);
background: radial-gradient(circle 12px at 12px,
rgb(252, 232, 230) 100%, transparent 100%);
height: 16px;
margin-inline-end: 16px;
margin-inline-start: -4px;
padding-bottom: 4px;
padding-inline-end: 4px;
padding-inline-start: 4px;
padding-top: 4px;
width: 16px;
}
@media (prefers-color-scheme: dark) {
#checkPasswordsLinkRow iron-icon {
--iron-icon-fill-color: var(--google-red-refresh-300);
background: radial-gradient(circle 12px at 12px,
var(--google-grey-900) 100%,
transparent 100%);
}
}
</style>
<settings-toggle-button id="passwordToggle"
aria-label="$i18n{passwords}" no-extension-indicator
label="$i18n{passwordsSavePasswordsLabel}"
pref="{{prefs.credentials_enable_service}}">
</settings-toggle-button>
<template is="dom-if"
if="[[prefs.credentials_enable_service.extensionId]]">
<div class="cr-row continuation">
<extension-controlled-indicator class="flex"
id="passwordsExtensionIndicator"
extension-id="[[prefs.credentials_enable_service.extensionId]]"
extension-name="[[
prefs.credentials_enable_service.controlledByName]]"
extension-can-be-disabled="[[
prefs.credentials_enable_service.extensionCanBeDisabled]]">
</extension-controlled-indicator>
</div>
</template>
<settings-toggle-button id="autosigninCheckbox" class="hr"
pref="{{prefs.credentials_enable_autosignin}}"
label="$i18n{passwordsAutosigninLabel}"
sub-label="$i18n{passwordsAutosigninDescription}">
</settings-toggle-button>
<template is="dom-if" if="[[enablePasswordCheck_]]">
<div id="checkPasswordsBannerContainer" class="cr-row"
hidden$="[[!shouldShowBanner_]]">
<picture>
<source
srcset="chrome://settings/images/password_check_neutral_dark.svg"
media="(prefers-color-scheme: dark)">
<img id="banner" alt=""
src="chrome://settings/images/password_check_neutral.svg">
</picture>
</div>
<div id="checkPasswordsButtonRow" class="cr-row continuation"
hidden$="[[!shouldShowBanner_]]">
<div class="flex cr-padded-text">
<div>$i18n{checkPasswords}</div>
<div class="secondary">$i18n{checkPasswordsDescription}</div>
</div>
<cr-button id="checkPasswordsButton" class="action-button"
on-click="onCheckPasswordsClick_">
$i18n{checkPasswords}
</cr-button>
</div>
<div class="cr-row" id="checkPasswordsLinkRow"
on-click="onCheckPasswordsClick_" actionable
hidden$="[[shouldShowBanner_]]">
<iron-icon icon="cr:warning" id="checkPasswordWarningIcon"
hidden$="[[!hasLeakedCredentials_]]"></iron-icon>
<div class="flex cr-padded-text">
<div>
$i18n{checkPasswords}
</div>
<div class="secondary" id="checkPasswordLeakCount"
hidden$="[[!hasLeakedCredentials_]]">
[[compromisedPasswordsCount]]
</div>
<div class="secondary" id="checkPasswordLeakDescription"
hidden$="[[hasLeakedCredentials_]]">
$i18n{checkPasswordsDescription}
</div>
</div>
<cr-icon-button class="subpage-arrow"
aria-label="$i18n{checkPasswords}">
</cr-icon-button>
</div>
</template>
<div id="manageLink" class="cr-row two-line"
hidden$="[[hidePasswordsLink_]]">
<!-- This div lays out the link correctly, relative to the text. -->
<div class="cr-padded-text">$i18nRaw{managePasswordsLabel}</div>
</div>
<div hidden$="[[!eligibleForAccountStorage_]]" class="cr-row"
id="accountStorageButtonsContainer">
<cr-button on-click="onOptIn_" id="optInToAccountStorageButton"
class="flex" hidden$="[[isOptedInForAccountStorage_]]">
$i18n{optInAccountStorageLabel}
</cr-button>
<cr-button on-click="onOptOut_" id="optOutOfAccountStorageButton"
class="flex" hidden$="[[!isOptedInForAccountStorage_]]">
$i18n{optOutAccountStorageLabel}
</cr-button>
</div>
<div class="cr-row first">
<h2 id="savedPasswordsHeading" class="flex">
$i18n{savedPasswordsHeading}
</h2>
<template is="dom-if"
if="[[showImportOrExportPasswords_(
showExportPasswords_, showImportPasswords_)]]">
<cr-icon-button class="icon-more-vert header-aligned-button"
id="exportImportMenuButton"
on-click="onImportExportMenuTap_" title="$i18n{moreActions}"
focus-type="exportImportMenuButton"
aria-describedby="savedPasswordsHeading"></cr-icon-button>
</template>
</div>
<div class="list-frame">
<div id="savedPasswordsHeaders" class="list-item column-header"
hidden$="[[!hasSome_(savedPasswords, savedPasswords.splices)]]"
aria-hidden="true">
<div class="website-column">$i18n{editPasswordWebsiteLabel}</div>
<div class="username-column">
$i18n{editPasswordUsernameLabel}
</div>
<div class="password-column">
$i18n{editPasswordPasswordLabel}
</div>
</div>
<iron-list id="passwordList" preserve-focus
items="[[getFilteredMultiStorePasswords_(filter,
multiStoreSavedPasswords.splices, isOptedInForAccountStorage_)]]"
class="cr-separators list-with-header"
scroll-target="[[subpageScrollTarget]]" risk-selection>
<template>
<password-list-item item="[[item]]" tabindex$="[[tabIndex]]"
focus-row-index="[[index]]"
<if expr="chromeos">
token-request-manager="[[tokenRequestManager_]]"
</if>
first$="[[!index]]" iron-list-tab-index="[[tabIndex]]"
last-focused="{{lastFocused_}}" list-blurred="{{listBlurred_}}">
</password-list-item>
</template>
</iron-list>
<div id="noPasswordsLabel" class="list-item"
hidden$="[[hasSome_(savedPasswords, savedPasswords.splices)]]">
$i18n{noPasswordsFound}
</div>
</div>
<cr-action-menu id="menu" role-description="$i18n{menu}">
<template is="dom-if" if="[[enablePasswordCheck_]]">
<button id="menuCopyPassword" class="dropdown-item"
on-click="onMenuCopyPasswordButtonTap_"
hidden$="[[activePassword.item.entry.federationText]]">
$i18n{copyPassword}
</button>
</template>
<button id="menuEditPassword" class="dropdown-item"
on-click="onMenuEditPasswordTap_">$i18n{passwordViewDetails}</button>
<button id="menuRemovePassword" class="dropdown-item"
on-click="onMenuRemovePasswordTap_">$i18n{removePassword}</button>
</cr-action-menu>
<cr-action-menu id="exportImportMenu" role-description="$i18n{menu}">
<button id="menuImportPassword" class="dropdown-item"
on-click="onImportTap_" hidden="[[!showImportPasswords_]]">
$i18n{import}
</button>
<button id="menuExportPassword" class="dropdown-item"
on-click="onExportTap_" hidden="[[!showExportPasswords_]]">
$i18n{exportMenuItem}
</button>
</cr-action-menu>
<template is="dom-if" if="[[showPasswordsExportDialog_]]" restamp>
<passwords-export-dialog
<if expr="chromeos">
token-request-manager="[[tokenRequestManager_]]"
</if>
on-passwords-export-dialog-close="onPasswordsExportDialogClosed_">
</passwords-export-dialog>
</template>
<template is="dom-if" if="[[showPasswordEditDialog_]]" restamp>
<password-edit-dialog on-close="onPasswordEditDialogClosed_"
<if expr="chromeos">
token-request-manager="[[tokenRequestManager_]]"
</if>
item="[[activePassword.item]]">
</password-edit-dialog>
</template>
<if expr="chromeos">
<template is="dom-if" if="[[showPasswordPromptDialog_]]" restamp>
<settings-password-prompt-dialog on-token-obtained="onTokenObtained_"
on-close="onPasswordPromptClosed_">
</settings-password-prompt-dialog>
</template>
</if>
<cr-toast-manager duration="5000">
<cr-button aria-label="$i18n{undoDescription}"
on-click="onUndoButtonClick_">$i18n{undoRemovePassword}</cr-button>
</cr-toast-manager>
<div class="cr-row first">
<h2 class="flex">$i18n{passwordExceptionsHeading}</h2>
</div>
<div class="list-frame vertical-list" id="passwordExceptionsList">
<template is="dom-repeat" items="[[passwordExceptions]]"
filter="[[passwordExceptionFilter_(filter)]]">
<div class="list-item">
<div class="start website-column">
<site-favicon url="[[item.urls.link]]"></site-favicon>
<a id="exception" href="[[item.urls.link]]" target="_blank">
[[item.urls.shown]]
</a>
</div>
<cr-icon-button class="icon-clear" id="removeExceptionButton"
on-click="onRemoveExceptionButtonTap_" tabindex$="[[tabIndex]]"
title="$i18n{deletePasswordException}"></cr-icon-button>
</div>
</template>
<div id="noExceptionsLabel" class="list-item"
hidden$="[[hasSome_(passwordExceptions)]]">
$i18n{noExceptionsFound}
</div>
</div>