<style include="settings-shared passwords-shared action-link"> | |
#change-password-link-icon { | |
height: 16px; | |
margin-inline-start: 10px; | |
width: 16px; | |
--iron-icon-fill-color: var(--text-color-action); | |
} | |
#insecurePassword { | |
background-color: transparent; | |
border: none; | |
font-size: inherit; | |
margin-inline-start: 4px; | |
} | |
#insecure-item { | |
margin-bottom: 12px; | |
margin-top: 12px; | |
} | |
#insecure-info { | |
display: flex; | |
flex: 2; | |
width: 0; | |
} | |
#insecureUsername { | |
align-items: baseline; | |
display: flex; | |
flex: 1; | |
} | |
#changePasswordInApp { | |
display: flex; | |
flex: 2; | |
flex-direction: row-reverse; | |
text-align: end; | |
} | |
#changePasswordUrl { | |
align-items: flex-end; | |
display: flex; | |
flex: 1.5; | |
flex-direction: column; | |
} | |
#changePasswordButton { | |
white-space: nowrap; | |
} | |
#alreadyChanged { | |
margin-top: 8px; | |
text-align: end; | |
} | |
#info-column { | |
display: flex; | |
flex: 1; | |
flex-direction: column; | |
} | |
#insecureOrigin { | |
direction: rtl; | |
display: flex; | |
justify-content: flex-end; | |
} | |
.icon-weak-cta { | |
fill: var(--google-blue-600); | |
} | |
/* dark mode */ | |
@media (prefers-color-scheme: dark) { | |
.icon-weak-cta { | |
fill: var(--google-blue-refresh-300); | |
} | |
} | |
:host-context([dir='rtl']) #insecureOrigin { | |
justify-content: flex-start; | |
} | |
:host-context([dir='rtl']) #change-password-link-icon { | |
transform: scaleX(-1); | |
} | |
</style> | |
<div class="list-item" id="insecure-item" focus-row-container> | |
<site-favicon url="[[item.changePasswordUrl]]"></site-favicon> | |
<div id="insecure-info"> | |
<div id="info-column" class="no-min-width"> | |
<div id="insecureOrigin" class="no-min-width"> | |
<span class="text-elide"> | |
<!-- This bdo tag is necessary to fix the display of domains | |
starting with numbers. --> | |
<bdo dir="ltr">[[item.formattedOrigin]]</bdo> | |
</span> | |
</div> | |
<div class="no-min-width" id="insecureUsername" > | |
<span class="no-min-width text-elide secondary"> | |
[[item.username]] | |
</span> | |
<input class="no-min-width secondary text-elide" | |
id="insecurePassword" focus-row-control | |
focus-type="passwordField" readonly | |
type="[[getInputType_(isPasswordVisible_)]]" | |
value="[[password_]]" on-click="onReadonlyInputTap_" | |
disabled$="[[!isPasswordVisible_]]"> | |
</div> | |
<template is="dom-if" if="[[isCompromisedItem_(item)]]"> | |
<div class="secondary" id="leakType"> | |
[[getCompromiseType_(item)]] | |
</div> | |
<div class="secondary" id="elapsedTime"> | |
[[item.compromisedInfo.elapsedTimeSinceCompromise]] | |
</div> | |
</template> | |
</div> | |
</div> | |
<template is="dom-if" if="[[item.changePasswordUrl]]"> | |
<div class="button-container" id="changePasswordUrl"> | |
<cr-button id="changePasswordButton" class$="[[buttonClass_]]" | |
on-click="onChangePasswordClick_"> | |
$i18n{changePasswordButton} | |
<iron-icon icon="cr:open-in-new" id="change-password-link-icon" | |
class$="[[iconClass_]]"> | |
</iron-icon> | |
</cr-button> | |
<a id="alreadyChanged" hidden="[[!clickedChangePassword]]" | |
is="action-link" on-click="onAlreadyChangedClick_"> | |
$i18n{alreadyChangedPasswordLink} | |
</a> | |
</div> | |
</template> | |
<template is="dom-if" if="[[!item.changePasswordUrl]]"> | |
<span id="changePasswordInApp">$i18n{changePasswordInApp}</span> | |
</template> | |
<cr-icon-button class="icon-more-vert" id="more" | |
title="$i18n{moreActions}" on-click="onMoreClick_"> | |
</cr-icon-button> | |
</div> |