| <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> |