<style include="multidevice-setup-shared">
#user-info-container {
align-items: center;
color: var(--cros-sys-on_surface_variant);
display: flex;
padding-top: 32px;
}
#profile-photo {
border-radius: 50%;
height: 20px;
margin-inline-end: 8px;
width: 20px;
}
#passwordInput {
height: 32px;
margin-top: 48px;
width: 100%;
}
:host-context([orientation=horizontal]) #passwordInput {
width: min(calc(var(--multidevice-setup-dialog-width) -
2 * var(--multidevice-setup-dialog-content-padding)), 640px);
}
:host-context([orientation=vertical]) #passwordInput {
width: min(calc(var(--multidevice-setup-dialog-width) -
2 * var(--multidevice-setup-dialog-content-padding)), 480px);
}
:host-context([orientation=vertical]) #content-container {
align-items: center;
display: flex;
flex-direction: column;
}
:host-context([orientation=horizontal]) #user-info-container {
padding-top: 0;
}
</style>
<ui-page header-text="[[i18nDynamic(locale, 'passwordPageHeader')]]"
icon-name="google-g">
<div id="content-container" slot="message">
<div id="user-info-container">
<img id="profile-photo" src="[[profilePhotoUrl_]]" aria-hidden="true"></img>
<span id="email">[[email_]]</span>
</div>
<cr-input id="passwordInput" type="password"
placeholder="[[i18nDynamic(locale, 'enterPassword')]]"
invalid="[[passwordInvalid_]]"
error-message="[[i18nDynamic(locale, 'wrongPassword')]]"
value="{{inputValue_}}"
aria-disabled="false"
on-keypress="onInputKeypress_">
</cr-input>
</div>
</ui-page>