blob: ec0f318002da46dc05fb36b26e1f69d8d82d5c22 [file] [log] [blame]
<style include="cr-shared-style settings-shared iron-flex">
#iconContainer {
height: 24px;
line-height: 100%;
margin-inline-end: 20px;
padding: 4px;
width: 24px;
}
#iconContainer.warning-halo {
background: radial-gradient(circle 16px at 16px,
#FCE8E6 100%,
transparent 100%);
}
iron-icon,
#progressSpinner {
--paper-spinner-stroke-width: 2px;
height: 22px;
line-height: 100%;
padding: 0 1px 2px;
width: 22px;
}
iron-icon.has-security-issues {
--iron-icon-fill-color: var(--google-red-600);
}
@media (prefers-color-scheme: dark) {
iron-icon.has-security-issues {
--iron-icon-fill-color: var(--google-red-refresh-300);
}
#iconContainer.warning-halo {
background: radial-gradient(circle 16px at 16px,
var(--google-grey-900) 100%,
transparent 100%);
}
}
iron-icon.no-security-issues {
--iron-icon-fill-color: var(--google-blue-600);
background-size: 16px 16px;
}
iron-icon.hidden {
display: none;
}
#securityCheckHeader {
border-bottom: var(--cr-separator-line);
}
#bannerImage {
width: 100%;
}
</style>
<!-- The banner is visible if no insecure password was found (yet) and user
is signed in. -->
<template is="dom-if"
if="[[shouldShowBanner_(status, leakedPasswords, weakPasswords)]]">
<picture>
<source srcset="[[bannerImageSrc_(1, status)]]"
media="(prefers-color-scheme: dark)">
<img id="bannerImage" src="[[bannerImageSrc_(0, status)]]" alt="">
</picture>
</template>
<!-- The header showing progress or result of the check-->
<div class="cr-row first two-line" id="securityCheckHeader">
<!-- If the password check concluded, show only a status Icon. -->
<div id="iconContainer" class$="[[iconHaloClass_]]">
<template is="dom-if" if="[[!isCheckInProgress_(status)]]">
<iron-icon class$="[[getStatusIconClass_(status, isSignedOut_,
leakedPasswords, weakPasswords)]]"
icon="[[getStatusIcon_(status, isSignedOut_,
leakedPasswords, weakPasswords)]]">
</iron-icon>
</template>
<!-- Show a loader instead of an icon while checking passwords. -->
<template is="dom-if" if="[[isCheckInProgress_(status)]]">
<paper-spinner-lite id="progressSpinner" active>
</paper-spinner-lite>
</template>
</div>
<div class="flex cr-padded-text">
<div id="titleRow">
<span id="title" inner-h-t-m-l="[[title_]]"></span>
<span class="secondary inline" id="lastCompletedCheck"
hidden$="[[!showsTimestamp_(status)]]">
&bull; [[status.elapsedTimeSinceLastCheck]]
</span>
</div>
<div class="secondary" id="subtitle"
hidden$="[[!showsPasswordsCount_(status, leakedPasswords, weakPasswords)]]">
[[getPasswordsCount_(status, insecurePasswordsCount,
compromisedPasswordsCount, weakPasswordsCount)]]
</div>
</div>
<cr-button id="controlPasswordCheckButton"
on-click="onPasswordCheckButtonClick_"
class$="[[getButtonTypeClass_(status)]] cr-button-gap"
hidden$="[[isButtonHidden_]]">
[[getButtonText_(status)]]
</cr-button>
</div>
<div id="noCompromisedCredentials"
class="cr-row first"
hidden$="[[!showNoCompromisedPasswordsLabel_]]">
<div class="cr-padded-text secondary">
$i18n{noCompromisedCredentials}
</div>
</div>
<div id="compromisedCredentialsBody"
hidden$="[[!showCompromisedCredentialsBody_]]">
<div class="cr-row first">
<h2>$i18n{compromisedPasswords}</h2>
</div>
<div class="list-frame vertical-list">
<div class="cr-padded-text secondary"
id="compromisedPasswordsDescription"
hidden$="[[!hasLeakedCredentials_(leakedPasswords)]]">
$i18n{compromisedPasswordsDescription}
</div>
</div>
<div id="leakedPasswordList" class="list-frame first">
<template is="dom-repeat" items="[[leakedPasswords]]">
<password-check-list-item item="[[item]]"
on-more-actions-click="onMoreActionsClick_"
clicked-change-password=
"[[clickedChangePassword_(item, clickedChangePasswordIds_.size)]]"
on-change-password-clicked="onChangePasswordClick_"
<if expr="chromeos">
token-request-manager="[[tokenRequestManager_]]"
</if>
on-already-changed-password-click="onAlreadyChangedClick_">
</password-check-list-item>
</template>
</div>
<div class="list-frame vertical-list">
<div class="list-item secondary" hidden$="[[!isSignedOut_]]"
id="signedOutUserLabel">
<div inner-h-t-m-l="[[getSignedOutUserLabel_(leakedPasswords)]]"></div>
</div>
</div>
</div>
<!-- TODO(crbug.com/1119752): |weakCredentialsBody| is almost a copy-paste
of |compromisedCredentialsBody|. Clean it up by creating a polymer element
for this. -->
<div id="weakCredentialsBody" hidden$="[[!hasWeakCredentials_(weakPasswords)]]">
<div class="cr-row first">
<h2>$i18n{weakPasswords}</h2>
</div>
<div class="list-frame vertical-list">
<div class="cr-padded-text secondary" id="weakPasswordsDescription"
inner-h-t-m-l="[[getWeakPasswordsHelpText_(isSyncingPasswords_)]]">
</div>
</div>
<div id="weakPasswordList" class="list-frame first">
<template is="dom-repeat" items="[[weakPasswords]]">
<password-check-list-item item="[[item]]"
on-more-actions-click="onMoreActionsClick_"
clicked-change-password=
"[[clickedChangePassword_(item, clickedChangePasswordIds_.size)]]"
on-change-password-clicked="onChangePasswordClick_"
<if expr="chromeos">
token-request-manager="[[tokenRequestManager_]]"
</if>
on-already-changed-password-click="onAlreadyChangedClick_">
</password-check-list-item>
</template>
</div>
</div>
<cr-action-menu id="moreActionsMenu" role-description="$i18n{menu}">
<button id="menuShowPassword" class="dropdown-item"
on-click="onMenuShowPasswordClick_">
[[showHideMenuTitle_]]
</button>
<button id="menuEditPassword" class="dropdown-item"
on-click="onEditPasswordClick_">
$i18n{editPassword}
</button>
<button id="menuRemovePassword" class="dropdown-item"
on-click="onMenuRemovePasswordClick_">
$i18n{removeCompromisedPassword}
</button>
</cr-action-menu>
<template is="dom-if" if="[[showPasswordEditDialog_]]" restamp>
<settings-password-check-edit-dialog
on-close="onPasswordEditDialogClosed_" item="[[activePassword_]]">
</setiings-password-check-edit-dialog>
</template>
<template is="dom-if" if="[[showPasswordRemoveDialog_]]" restamp>
<settings-password-remove-confirmation-dialog
on-close="onPasswordRemoveDialogClosed_" item="[[activePassword_]]">
</settings-password-remove-confirmation-dialog>
</template>
<template is="dom-if" if="[[showPasswordEditDisclaimer_]]" restamp>
<settings-password-edit-disclaimer-dialog
on-edit-password-click="onEditPasswordClick_"
origin="[[activePassword_.formattedOrigin]]"
on-close="onEditDisclaimerClosed_">
</settings-password-edit-disclaimer-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>