blob: 021f8c832b933c3795671eaa8a3497f3d1fd1473 [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));
}
#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%);
}
}
#profileIcon {
flex-shrink: 0;
height: 40px;
margin-inline-end: 16px;
width: 40px;
}
#accountStorageOptInButtonsContainer {
padding-bottom: 16px;
}
#devicePasswordsLink {
cursor: pointer;
padding-top: 16px;
}
#devicePasswordsLinkIcon {
border-color: var(--google-grey-200);
border-radius: 20px;
border-style: solid;
border-width: 1px;
height: 17px;
margin-inline-end: 16px;
padding-bottom: 10px;
padding-inline-end: 8px;
padding-inline-start: 8px;
padding-top: 11px;
width: 22px;
}
#devicePasswordsLinkLabel {
flex-grow: 1;
}
</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>
<cr-link-row external on-click="onTrustedVaultOptInClick_"
hidden$="[[!shouldOfferTrustedVaultOptIn_]]"
label="$i18n{trustedVaultOptInLabel}"
sub-label="$i18n{trustedVaultOptInSubLabel}">
</cr-link-row>
<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 cr-button-gap"
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 id="icon" class="subpage-arrow"
aria-label="$i18n{checkPasswords}">
</cr-icon-button>
</div>
<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 class="cr-row first">
<h2 id="savedPasswordsHeading" class="flex">
$i18n{savedPasswordsHeading}
</h2>
<template is="dom-if"
if="[[showImportOrExportPasswords_(
hasSavedPasswords_, 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>
<passwords-list-handler id="passwordsListHandler"
<if expr="chromeos">
token-request-manager="[[tokenRequestManager_]]"
</if>
should-show-storage-details="[[shouldShowStorageDetails_]]"
saved-passwords="[[savedPasswords]]">
<div slot="body" class="list-frame">
<div hidden$="[[!eligibleForAccountStorage_]]"
id="accountStorageButtonsContainer">
<div class="cr-row first two-line list-item"
id="accountStorageOptInButtonsContainer">
<settings-avatar-icon id="profileIcon"></settings-avatar-icon>
<div class="flex cr-padded-text">
<div id="accountStorageOptInBody"
hidden$="[[isOptedInForAccountStorage_]]">
$i18nRaw{optInAccountStorageBody}
</div>
<div id="accountStorageOptOutBody"
hidden$="[[!isOptedInForAccountStorage_]]">
$i18nRaw{optOutAccountStorageBody}
</div>
<div id="accountEmail" class="secondary">[[profileEmail_]]</div>
</div>
<cr-button on-click="onOptIn_" id="optInToAccountStorageButton"
hidden$="[[isOptedInForAccountStorage_]]">
$i18n{optInAccountStorageLabel}
</cr-button>
<cr-button on-click="onOptOut_" id="optOutOfAccountStorageButton"
hidden$="[[!isOptedInForAccountStorage_]]">
$i18n{optOutAccountStorageLabel}
</cr-button>
</div>
<div id="devicePasswordsLink" class="cr-row two-line list-item"
hidden$="[[!shouldShowDevicePasswordsLink_]]"
on-click="onDevicePasswordsLinkClicked_">
<iron-icon id="devicePasswordsLinkIcon" icon="cr:computer">
</iron-icon>
<div id="devicePasswordsLinkLabel">
$i18n{devicePasswordsLinkLabel}
</div>
<cr-icon-button iron-icon="cr:arrow-right"
aria-roledescription="$i18n{subpageArrowRoleDescription}">
</cr-icon-button>
</div>
</div>
<div id="savedPasswordsHeaders" class="list-item column-header"
hidden$="[[!hasSavedPasswords_]]" 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>
<div class="cr-separators list-with-header">
<template id="passwordList" is="dom-repeat" items="[[savedPasswords]]"
filter="[[passwordFilter_(filter)]]"
rendered-item-count="{{shownPasswordsCount_::dom-change}}">
<password-list-item entry="[[item]]"
<if expr="chromeos">
token-request-manager="[[tokenRequestManager_]]"
</if>
>
</password-list-item>
</template>
</div>
<div id="noPasswordsLabel" class="list-item"
hidden$="[[hasSavedPasswords_]]">
$i18n{noPasswordsFound}
</div>
</div>
</passwords-list-handler>
<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="[[!hasSavedPasswords_]]">
$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>
<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>
<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)]]"
rendered-item-count="{{shownExceptionsCount_::dom-change}}">
<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$="[[hasPasswordExceptions_]]">
$i18n{noExceptionsFound}
</div>
</div>