<!-- TODO(b/259386106): reduce duplication with login screen code -->
<style>
:host {
--lock-screen-reauth-dialog-buttons-horizontal-padding: 40px;
--lock-screen-reauth-dialog-buttons-vertical-padding: 25px;
--lock-screen-reauth-dialog-content-padding: 40px;
--lock-screen-reauth-dialog-icon-size: 32px;
--lock-screen-reauth-dialog-text-line-height: 18px;
--lock-screen-reauth-dialog-title-top-padding: 40px;
--lock-screen-reauth-back-button-height: calc(
var(--lock-screen-reauth-dialog-buttons-vertical-padding) +
var(--cr-button-height));
--lock-screen-reauth-dialog-header-top-padding: calc(
var(--lock-screen-reauth-dialog-content-padding) +
var(--lock-screen-reauth-back-button-height));
height: 100%;
left: 0;
margin: 0;
padding: 0;
position: fixed;
top: 0;
width: 100%;
}
:host-context([orientation=horizontal]) {
--button-alignment: flex-end;
--lock-screen-reauth-dialog-content-direction: row;
--lock-screen-reauth-dialog-item-alignment: unset;
--lock-screen-reauth-dialog-title-top-padding: 40px;
--lock-screen-reauth-text-alignment: start;
--lock-screen-reauth-dialog-content-top-padding: calc(
var(--lock-screen-reauth-dialog-header-top-padding) +
var(--lock-screen-reauth-dialog-title-top-padding) +
var(--lock-screen-reauth-dialog-icon-size));
/* Header takes 40% of the width remaining after applying padding */
--lock-screen-reauth-dialog-header-width: clamp(302px,
calc(0.4 * (var(--lock-screen-reauth-dialog-width) -
4 * var(--lock-screen-reauth-dialog-content-padding))), 346px);
--lock-screen-reauth-dialog-content-width: calc(
var(--lock-screen-reauth-dialog-width) -
4 * var(--lock-screen-reauth-dialog-content-padding) -
var(--lock-screen-reauth-dialog-header-width));
}
:host-context([orientation=vertical]) {
--button-alignment: center;
--lock-screen-reauth-dialog-content-direction: column;
--lock-screen-reauth-dialog-content-top-padding:
var(--lock-screen-reauth-dialog-buttons-vertical-padding);
--lock-screen-reauth-dialog-item-alignment: center;
--lock-screen-reauth-dialog-title-top-padding: 15px;
--lock-screen-reauth-text-alignment: center;
--lock-screen-reauth-dialog-content-width: calc(
var(--lock-screen-reauth-dialog-width) -
2 * var(--lock-screen-reauth-dialog-content-padding));
/* Header takes 70% of the width remaining after applying padding */
--lock-screen-reauth-dialog-header-width: clamp(346px,
calc(0.7 * (var(--lock-screen-reauth-dialog-width) -
2 * var(--lock-screen-reauth-dialog-content-padding))), 520px);
}
.content-wrapper {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.main-container {
align-items: var(--lock-screen-reauth-dialog-item-alignment);
display: flex;
flex: 1;
flex-direction: var(--lock-screen-reauth-dialog-content-direction);
}
#body {
align-self: stretch;
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
width: 100%;
}
#samlContainer {
/* #FFFFFF */
background: rgb(255, 255, 255);
/* #000000 */
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.17);
display: flex;
}
#samlHeader {
display: flex;
flex-grow: 1;
height: 44px;
justify-content: flex-end;
text-align: center;
}
#samlHeader[saml-notice-message] {
/* #FFFFFF */
background: white;
}
#samlNoticeMessage {
/* #6a6a6a */
color: rgb(106, 106, 106);
flex: 1;
font-size: 13px;
padding-top: 15px;
}
#saml-footer-container {
align-items: center;
background: white;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.17);
/* #6a6a6a */
color: rgb(106, 106, 106);
display: flex;
height: 58px;
justify-content: flex-end;
min-height: 0;
}
#saml-close-button {
--cr-icon-button-margin-end: 0;
--cr-icon-button-margin-start: 0;
}
#signin-frame {
flex: 1;
height: 100%;
width: 100%;
}
#change-account {
margin: 0 4px;
padding-inline-end: 8px;
padding-inline-start: 8px;
}
#policyCertIndicator {
color: rgb(106, 106, 106);
display: flex;
padding-inline-start: 15px;
}
#policyCertIcon {
height: 20px;
padding-top: 8px;
width: 20px;
}
.title-icon {
/* #1a73e8 */
--iron-icon-fill-color: rgb(26, 115, 232);
--iron-icon-height: 32px;
--iron-icon-width: 32px;
align-self: var(--lock-screen-reauth-dialog-item-alignment);
}
.header {
display: flex;
flex-direction: column;
padding-bottom: var(--lock-screen-reauth-dialog-content-padding);
padding-inline-end: var(--lock-screen-reauth-dialog-content-padding);
padding-inline-start:
var(--lock-screen-reauth-dialog-content-padding);
padding-top: var(--lock-screen-reauth-dialog-header-top-padding);
width: var(--lock-screen-reauth-dialog-header-width);
}
.title {
color: var(--cros-text-color-primary);
font-size: 28px;
font-weight: 400;
margin: 0;
padding-top: var(--lock-screen-reauth-dialog-title-top-padding);
text-align: var(--lock-screen-reauth-text-alignment);
}
.subtitle {
color: var(--cros-text-color-secondary);
font-size: 13px;
font-weight: 400;
line-height: var(--lock-screen-reauth-dialog-text-line-height);
margin: 0;
overflow-wrap: break-word;
padding-top: 15px;
text-align: var(--lock-screen-reauth-text-alignment);
}
.illustration-container {
align-items: center;
display: flex;
justify-content: center;
padding-bottom: 0;
padding-inline-end: var(--lock-screen-reauth-dialog-content-padding);
padding-inline-start:
var(--lock-screen-reauth-dialog-content-padding);
width: var(--lock-screen-reauth-dialog-content-width);
}
.illustration {
height: 100%;
max-width: 500px;
object-fit: contain;
width: 100%;
}
.button-container {
display: flex;
flex-shrink: 0;
justify-content: var(--button-alignment);
min-height: var(--cr-button-height);
padding-bottom:
var(--lock-screen-reauth-dialog-buttons-vertical-padding);
padding-inline-end:
var(--lock-screen-reauth-dialog-buttons-horizontal-padding);
padding-inline-start:
var(--lock-screen-reauth-dialog-buttons-horizontal-padding);
padding-top:
var(--lock-screen-reauth-dialog-buttons-vertical-padding);
z-index: 1;
}
[hidden] {
display: none !important;
}
.input-container {
border: 0;
flex: 2;
padding-bottom: 0;
padding-inline-end: var(--lock-screen-reauth-dialog-content-padding);
padding-inline-start:
var(--lock-screen-reauth-dialog-content-padding);
padding-top: var(--lock-screen-reauth-dialog-content-top-padding);
width: var(--lock-screen-reauth-dialog-content-width);
}
cr-input {
--cr-input-border-radius: 4px 4px 0 0;
--cr-input-min-height: 32px;
max-width: 560px;
padding-bottom: 8px;
}
cr-button {
border-radius: 16px;
}
:host-context([dir=rtl]) #arrowForward {
transform: rotate(180deg);
}
</style>
<div class="content-wrapper" hidden="[[!isErrorDisplayed]]" role="dialog"
aria-modal="true" id="errorScreen"
aria-label="$i18n{loginWelcomeMessageWithError}">
<div class="main-container">
<div class="header">
<iron-icon class="title-icon" icon="oobe-32:warning"></iron-icon>
<div class="title">
$i18n{loginWelcomeMessageWithError}
</div>
<div class="subtitle">
<div>$i18n{lockScreenReauthSubtitile1WithError}</div>
<div>$i18n{lockScreenReauthSubtitile2WithError}</div>
</div>
</div>
<div class="illustration-container">
<iron-icon icon="oobe-illos:error-illo" class="illustration">
</iron-icon>
</div>
</div>
<div class="flex layout horizontal button-container">
<cr-button id="cancelButtonErrorScreen" class="cancel-button"
on-click="onCloseClick">
$i18n{lockScreenCancelButton}
</cr-button>
<cr-button id="nextButton" class="action-button" on-click="onVerify">
$i18n{lockScreenVerifyAgainButton}
</cr-button>
</div>
</div>
<div id="body" hidden="[[!isSigninFrameDisplayed]]">
<div id="samlContainer">
<div id="policyCertIndicator"
hidden="[[!policyProvidedTrustedAnchorsUsed()]]">
<cr-tooltip-icon id="policyCertIcon" icon-class="cr:domain"
tooltip-text="[[i18nDynamic(locale,
'policyProvidedCaCertsTooltipMessage', authDomain)]]"
icon-aria-label="[[i18nDynamic(locale,
'policyProvidedCaCertsTooltipMessage', authDomain)]]"
tooltip-position="bottom">
</cr-tooltip-icon>
</div>
<div id="samlHeader" saml-notice-message$="[[isSaml]]">
<span id="samlNoticeMessage" hidden="[[!isSaml]]">
[[i18n('samlNotice', authDomain)]]
</span>
<cr-icon-button id="saml-close-button" iron-icon="cr:close"
on-click="onCloseClick" aria-label="$i18n{lockScreenCloseButton}">
</cr-icon-button>
</div>
</div>
<webview id="signin-frame" name="signin-frame" class="flex">
</webview>
<div id="saml-footer-container" hidden="[[!isDefaultSsoProvider]]"
class="layout horizontal">
<div>[[i18nDynamic(locale, 'samlChangeProviderMessage')]]</div>
<oobe-text-button id="change-account"
text-key="samlChangeProviderButton"
on-click="onChangeSigninProviderClicked">
</oobe-text-button>
</div>
<div id="buttons-container" class="flex layout horizontal button-container"
hidden="[[isSaml]]">
<div class="action-buttons">
<gaia-action-buttons id="gaia-buttons"
authenticator="[[authenticator]]"
rounded-button="True"
on-set-focus-to-webview="setFocusToWebview">
</gaia-action-buttons>
</div>
</div>
</div>
<div id="samlConfirmPasswordScreen" class="content-wrapper"
hidden="[[!isConfirmPassword]]">
<div class="main-container">
<div class="header">
<iron-icon class="title-icon" icon="oobe-32:lock"></iron-icon>
<div class="title">
[[email]]
</div>
<div class="subtitle" hidden="[[isManualInput]]">
$i18n{confirmPasswordSubtitle}
</div>
<div class="subtitle" hidden="[[!isManualInput]]">
$i18n{manualPasswordSubtitle}
</div>
</div>
<div class="input-container">
<cr-input type="password" id="passwordInput" required
placeholder="[[passwordPlaceholder(locale, isManualInput)]]"
error-message="[[passwordErrorText(locale, isManualInput)]]">
</cr-input>
<cr-input type="password" id="confirmPasswordInput" required
placeholder="$i18n{confirmPasswordLabel}"
error-message="$i18n{manualPasswordMismatch}"
hidden="[[!isManualInput]]">
</cr-input>
</div>
</div>
<div class="flex layout horizontal button-container">
<cr-button id="cancelButton" class="cancel-button" on-click="onCloseClick">
$i18n{lockScreenCancelButton}
</cr-button>
<cr-button id="nextButtonSamlConfirmPassword" class="action-button"
on-click="onConfirm">
$i18n{lockScreenNextButton}
<iron-icon id="arrowForward" icon="oobe-20:button-arrow-forward">
</iron-icon>
</cr-button>
</div>
</div>
<div class="content-wrapper" hidden="[[!isPasswordChanged]]">
<div class="main-container">
<div class="header">
<iron-icon class="title-icon" icon="oobe-32:lock"></iron-icon>
<div class="title">
$i18n{passwordChangedTitle}
</div>
<div class="subtitle">
$i18n{passwordChangedSubtitle}
</div>
</div>
<div class="input-container">
<cr-input type="password" id="oldPasswordInput" required
placeholder="$i18n{passwordChangedOldPasswordHint}"
error-message="$i18n{passwordChangedIncorrectOldPassword}">
</div>
</div>
<div class="flex layout horizontal button-container">
<cr-button id="cancelButton" class="cancel-button" on-click="onCloseClick">
$i18n{lockScreenCancelButton}
</cr-button>
<cr-button id="nextButton" class="action-button" on-click="onNext">
$i18n{lockScreenNextButton}
<iron-icon icon="oobe-20:button-arrow-forward"></iron-icon>
</cr-button>
</div>
</div>
Codebase Browser
chromium