| <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)); |
| } |
| |
| #exportImportMenuButton { |
| /* This aligns options icons in the header row and in item rows. */ |
| 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-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; |
| } |
| |
| :host([is-password-view-page-enabled_]) #passwordsWrapper { |
| padding: 0; |
| --password-list-item-padding-inline-end: var(--cr-section-padding); |
| --password-list-item-padding-inline-start: var(--cr-section-indent-padding); |
| } |
| </style> |
| <div class="cr-row first cr-secondary-text" |
| hidden$="[[!isUnifiedPasswordManagerEnabled_]]"> |
| $i18n{passwordsDescription} |
| </div> |
| <settings-toggle-button id="passwordToggle" |
| class$="[[getPasswordToggleClass_(isUnifiedPasswordManagerEnabled_)]]" |
| 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> |
| <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> |
| <cr-link-row id="trustedVaultBanner" class="cr-row" |
| label="$i18n{trustedVaultBannerLabel}" sub-label="[[ |
| getTrustedVaultBannerSubLabel_(trustedVaultBannerState_)]]" |
| hidden$="[[shouldHideTrustedVaultBanner_(trustedVaultBannerState_)]]" |
| on-click="onTrustedVaultBannerClick_" external> |
| </cr-link-row> |
| <if expr="is_win"> |
| <div class="cr-row" id="managePasskeysRow" |
| on-click="onManagePasskeysClick_" actionable |
| hidden$="[[!hasPasskeys_]]"> |
| <div class="flex cr-padded-text"> |
| <div>$i18n{managePasskeysLabel}</div> |
| </div> |
| <cr-icon-button id="managePasskeysIcon" class="subpage-arrow" |
| aria-label="$i18n{managePasskeysLabel}"> |
| </cr-icon-button> |
| </div> |
| </if> |
| <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="[[showAddPasswordButton_]]"> |
| <cr-button id="addPasswordButton" class="header-aligned-button" |
| on-click="onAddPasswordTap_" aria-label="$i18n{addPasswordTitle}"> |
| $i18n{add} |
| </cr-button> |
| </template> |
| <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_ash or chromeos_lacros"> |
| token-request-manager="[[tokenRequestManager]]" |
| </if> |
| is-account-store-user="[[isAccountStoreUser]]" |
| focus-config="[[focusConfig]]" |
| saved-passwords="[[savedPasswords]]"> |
| <div slot="body"> |
| <div 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="optInForAccountStorage" id="optInToAccountStorageButton" |
| hidden$="[[isOptedInForAccountStorage]]"> |
| $i18n{optInAccountStorageLabel} |
| </cr-button> |
| <cr-button on-click="optOutFromAccountStorage" 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-labelledby="devicePasswordsLinkLabel" |
| 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> |
| <div id="passwordsWrapper" class="list-frame"> |
| <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_ash or chromeos_lacros"> |
| token-request-manager="[[tokenRequestManager]]" |
| </if> |
| > |
| </password-list-item> |
| </template> |
| </div> |
| </div> |
| <div class="list-frame"> |
| <div id="noPasswordsLabel" class="list-item" |
| hidden$="[[hasSavedPasswords_]]"> |
| $i18n{noPasswordsFound} |
| </div> |
| </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{importMenuItem} |
| </button> |
| <button id="menuExportPassword" class="dropdown-item" |
| on-click="onExportTap_" hidden="[[!hasSavedPasswords_]]"> |
| $i18n{exportMenuItem} |
| </button> |
| </cr-action-menu> |
| <template is="dom-if" if="[[showAddPasswordDialog_]]" restamp> |
| <password-edit-dialog on-close="onAddPasswordDialogClosed_" |
| id="addPasswordDialog" account-email="[[profileEmail]]" |
| saved-passwords="[[savedPasswords]]" |
| <if expr="chromeos_ash or chromeos_lacros"> |
| token-request-manager="[[tokenRequestManager]]" |
| </if> |
| is-account-store-user="[[isAccountStoreUser]]"> |
| </password-edit-dialog> |
| </template> |
| <template is="dom-if" if="[[showPasswordsExportDialog_]]" restamp> |
| <passwords-export-dialog |
| <if expr="chromeos_ash or chromeos_lacros"> |
| token-request-manager="[[tokenRequestManager]]" |
| </if> |
| on-passwords-export-dialog-close="onPasswordsExportDialogClosed_"> |
| </passwords-export-dialog> |
| </template> |
| <template is="dom-if" if="[[showPasswordsImportDialog_]]" restamp> |
| <passwords-import-dialog id="importPasswordsDialog" |
| on-close="onPasswordsImportDialogClosed_"> |
| </passwords-import-dialog> |
| </template> |
| <if expr="chromeos_ash or chromeos_lacros"> |
| <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 no-min-width"> |
| <site-favicon url="[[item.urls.link]]"></site-favicon> |
| <a id="exception" class="text-elide" 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> |
