blob: cd5fc031214dd92cf1940eff36fb242d26b668a1 [file] [log] [blame]
<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>