Commit 52a6b029 authored by xiaoyinh's avatar xiaoyinh Committed by Commit bot

Add fingerprint UI in user pod

BUG=695952
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2733953008
Cr-Commit-Position: refs/heads/master@{#456236}
parent dccc4a73
...@@ -12580,6 +12580,21 @@ Please check your email at <ph name="ACCOUNT_EMAIL">$2<ex>jane.doe@gmail.com</ex ...@@ -12580,6 +12580,21 @@ Please check your email at <ph name="ACCOUNT_EMAIL">$2<ex>jane.doe@gmail.com</ex
<message name="IDS_PIN_KEYBOARD_DELETE_ACCESSIBLE_NAME" desc="Text to be spoken when the focus is set to the delete button of the PIN keyboard."> <message name="IDS_PIN_KEYBOARD_DELETE_ACCESSIBLE_NAME" desc="Text to be spoken when the focus is set to the delete button of the PIN keyboard.">
Delete Delete
</message> </message>
<message name="IDS_FINGERPRINT_HINT_TEXT" desc="Text to display in the password field for user pod when user moves his mouse over the fingerprint icon.">
Touch to sign in
</message>
<message name="IDS_FINGERPRINT_LOGIN_TEXT" desc="Text to display in the password field for user pod when user is trying to login with fingerprint.">
Signing in...
</message>
<message name="IDS_FINGERPRINT_LOGIN_FAILED_TEXT" desc="Text to display in the password field for user pod when user failed to login with fingerprint.">
Not recognized
</message>
<message name="IDS_FINGERPRINT_ICON_MESSAGE" desc="Message to display when user moves his mouse over the fingerprint icon in the user pod.">
Place your finger on the fingerprint sensor to unlock the device.
</message>
<message name="IDS_LOGIN_ERROR_FINGERPRINT_MAX_ATTEMPT" desc="Couldn't sign in because fingerprint unlock has reached maximum attempt">
Sorry, your fingerprint is still not recognized. Please enter your password.
</message>
</if> </if>
<message name="IDS_LOGIN_ERROR_AUTHENTICATING" desc="Couldn't sign in because password is invalid"> <message name="IDS_LOGIN_ERROR_AUTHENTICATING" desc="Couldn't sign in because password is invalid">
Sorry, your password could not be verified. Please try again. Sorry, your password could not be verified. Please try again.
......
...@@ -427,6 +427,10 @@ void SigninScreenHandler::DeclareLocalizedValues( ...@@ -427,6 +427,10 @@ void SigninScreenHandler::DeclareLocalizedValues(
IDS_PIN_KEYBOARD_HINT_TEXT_PIN_PASSWORD); IDS_PIN_KEYBOARD_HINT_TEXT_PIN_PASSWORD);
builder->Add("pinKeyboardDeleteAccessibleName", builder->Add("pinKeyboardDeleteAccessibleName",
IDS_PIN_KEYBOARD_DELETE_ACCESSIBLE_NAME); IDS_PIN_KEYBOARD_DELETE_ACCESSIBLE_NAME);
builder->Add("fingerprintHint", IDS_FINGERPRINT_HINT_TEXT);
builder->Add("fingerprintIconMessage", IDS_FINGERPRINT_ICON_MESSAGE);
builder->Add("fingerprintSigningin", IDS_FINGERPRINT_LOGIN_TEXT);
builder->Add("fingerprintSigninFailed", IDS_FINGERPRINT_LOGIN_FAILED_TEXT);
builder->Add("signingIn", IDS_LOGIN_POD_SIGNING_IN); builder->Add("signingIn", IDS_LOGIN_POD_SIGNING_IN);
builder->Add("podMenuButtonAccessibleName", builder->Add("podMenuButtonAccessibleName",
IDS_LOGIN_POD_MENU_BUTTON_ACCESSIBLE_NAME); IDS_LOGIN_POD_MENU_BUTTON_ACCESSIBLE_NAME);
......
...@@ -35,6 +35,8 @@ login.createScreen('AccountPickerScreen', 'account-picker', function() { ...@@ -35,6 +35,8 @@ login.createScreen('AccountPickerScreen', 'account-picker', function() {
'showBannerMessage', 'showBannerMessage',
'showUserPodCustomIcon', 'showUserPodCustomIcon',
'hideUserPodCustomIcon', 'hideUserPodCustomIcon',
'setUserPodFingerprintIcon',
'removeUserPodFingerprintIcon',
'disablePinKeyboardForUser', 'disablePinKeyboardForUser',
'setAuthType', 'setAuthType',
'setTouchViewState', 'setTouchViewState',
...@@ -418,6 +420,23 @@ login.createScreen('AccountPickerScreen', 'account-picker', function() { ...@@ -418,6 +420,23 @@ login.createScreen('AccountPickerScreen', 'account-picker', function() {
$('pod-row').hideUserPodCustomIcon(username); $('pod-row').hideUserPodCustomIcon(username);
}, },
/**
* Set a fingerprint icon in the user pod of |username|.
* @param {string} username Username of the selected user
* @param {number} state Fingerprint unlock state
*/
setUserPodFingerprintIcon: function(username, state) {
$('pod-row').setUserPodFingerprintIcon(username, state);
},
/**
* Removes the fingerprint icon in the user pod of |username|.
* @param {string} username Username of the selected user.
*/
removeUserPodFingerprintIcon: function(username) {
$('pod-row').removeUserPodFingerprintIcon(username);
},
/** /**
* Sets the authentication type used to authenticate the user. * Sets the authentication type used to authenticate the user.
* @param {string} username Username of selected user * @param {string} username Username of selected user
......
...@@ -415,6 +415,7 @@ html[dir=rtl] .main-pane { ...@@ -415,6 +415,7 @@ html[dir=rtl] .main-pane {
display: none; display: none;
} }
.fingerprint-icon-container,
.custom-icon-container { .custom-icon-container {
display: flex; display: flex;
flex: none; flex: none;
...@@ -554,6 +555,42 @@ html[dir=rtl] .user-type-icon-area { ...@@ -554,6 +555,42 @@ html[dir=rtl] .user-type-icon-area {
background-image: url(chrome://theme/IDR_KIOSK_APP_USER_POD_ICON); background-image: url(chrome://theme/IDR_KIOSK_APP_USER_POD_ICON);
} }
.fingerprint-icon-container.hidden {
display: none;
}
.fingerprint-icon-container.default .fingerprint-icon-image {
background-image: url(../../webui/resources/images/fingerprint_default.svg);
}
.fingerprint-icon-container.default:hover .fingerprint-icon-image {
background-image: url(../../webui/resources/images/fingerprint_signin.svg);
}
.fingerprint-icon-container.signin .fingerprint-icon-image {
background-image: url(../../webui/resources/images/fingerprint_signin.svg);
}
.fingerprint-icon-container.failed .fingerprint-icon-image {
background-image: url(../../webui/resources/images/fingerprint_failed.svg);
}
.pod input[type='password'].hidden::-webkit-input-placeholder {
color: grey;
}
.pod input[type='password'].default::-webkit-input-placeholder {
color: grey;
}
.pod input[type='password'].signin::-webkit-input-placeholder {
color: var(--google-blue-500);
}
.pod input[type='password'].failed::-webkit-input-placeholder {
color: var(--google-red-500);
}
.action-box-menu { .action-box-menu {
display: none; display: none;
z-index: 6; z-index: 6;
......
This diff is collapsed.
...@@ -46,6 +46,12 @@ ...@@ -46,6 +46,12 @@
<div class="auth-container"> <div class="auth-container">
<!-- Password Authentication --> <!-- Password Authentication -->
<div class="custom-icon-container" hidden></div> <div class="custom-icon-container" hidden></div>
<if expr="chromeos">
<div class="fingerprint-icon-container" hidden
i18n-values="aria-label:fingerprintIconMessage">
<div class="custom-icon fingerprint-icon-image"></div>
</div>
</if>
<div class="password-entry-container"> <div class="password-entry-container">
<div class="password-container"> <div class="password-container">
<input type="password" class="password" <input type="password" class="password"
......
<svg width="27" height="27" viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg"><title>fingerprint_grey_1x</title><g fill="none" fill-rule="evenodd" opacity=".34"><path d="M20.036 5.03c-.09 0-.174-.024-.26-.063-2.153-1.114-4.026-1.592-6.265-1.592-2.232 0-4.336.534-6.265 1.586-.276.147-.613.052-.765-.224-.146-.275-.05-.613.225-.765 2.098-1.14 4.387-1.72 6.806-1.72 2.398 0 4.49.53 6.785 1.716.276.14.382.483.242.76-.1.19-.298.303-.5.303zM3.937 10.934c-.112 0-.224-.034-.326-.1-.252-.18-.314-.53-.134-.783C4.59 8.477 6.013 7.24 7.7 6.368c3.54-1.83 8.06-1.834 11.605-.012 1.682.867 3.1 2.093 4.22 3.656.18.254.123.602-.13.782-.254.18-.608.124-.788-.13-1.013-1.416-2.295-2.53-3.814-3.306-3.23-1.66-7.352-1.654-10.575.01-1.524.788-2.812 1.908-3.82 3.336-.112.152-.286.23-.46.23zm7.037 13.573c-.146 0-.287-.056-.4-.17-.972-.983-1.5-1.607-2.26-2.963-.777-1.384-1.187-3.077-1.187-4.888 0-3.34 2.857-6.064 6.373-6.064s6.373 2.717 6.373 6.064c0 .31-.253.562-.562.562-.31 0-.562-.254-.562-.563 0-2.723-2.35-4.94-5.248-4.94-2.89 0-5.248 2.217-5.248 4.94 0 1.62.36 3.116 1.04 4.337.726 1.293 1.21 1.85 2.076 2.722.22.22.22.58-.005.793-.102.117-.248.168-.39.168zm8.06-2.08c-1.338 0-2.513-.34-3.486-.997-1.67-1.135-2.672-2.98-2.672-4.938 0-.31.253-.562.562-.562.31 0 .563.253.563.563 0 1.58.816 3.076 2.183 4.005.793.54 1.727.804 2.852.804.27 0 .726-.028 1.176-.107.304-.056.597.152.653.456.056.304-.152.597-.456.653-.658.118-1.215.124-1.372.124zM16.77 24.75c-.05 0-.1-.006-.146-.023-1.794-.49-2.964-1.153-4.18-2.362-1.57-1.564-2.435-3.65-2.435-5.872 0-1.83 1.552-3.314 3.465-3.314 1.912 0 3.465 1.484 3.465 3.313 0 1.203 1.052 2.188 2.34 2.188 1.288 0 2.34-.978 2.34-2.188 0-4.24-3.656-7.69-8.15-7.69-3.2 0-6.12 1.78-7.437 4.535-.44.91-.658 1.974-.658 3.155 0 .878.08 2.262.748 4.056.107.293-.04.613-.332.726-.292.107-.613-.04-.726-.332-.55-1.48-.82-2.93-.82-4.45 0-1.35.258-2.576.77-3.64 1.502-3.138 4.82-5.168 8.45-5.168 5.112 0 9.274 3.954 9.274 8.814 0 1.828-1.558 3.313-3.465 3.313-1.906 0-3.464-1.484-3.464-3.312 0-1.204-1.052-2.188-2.34-2.188-1.288 0-2.34.98-2.34 2.188 0 1.918.748 3.724 2.104 5.074 1.063 1.057 2.098 1.642 3.684 2.076.298.084.478.393.394.69-.067.25-.292.412-.54.412z" fill="#000"/><path d="M0 0h27v27H0"/></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#E51C23">
<path fill="none" d="M0 0h24v24H0V0z"/>
<path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
</svg>
<svg width="27" height="27" viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg"><title>fingerprint_blue_1x</title><g fill="none" fill-rule="evenodd"><path d="M20.036 5.03c-.09 0-.174-.024-.26-.063-2.153-1.114-4.026-1.592-6.265-1.592-2.232 0-4.336.534-6.265 1.586-.276.147-.613.052-.765-.224-.146-.275-.05-.613.225-.765 2.098-1.14 4.387-1.72 6.806-1.72 2.398 0 4.49.53 6.785 1.716.276.14.382.483.242.76-.1.19-.298.303-.5.303zM3.937 10.934c-.112 0-.224-.034-.326-.1-.252-.18-.314-.53-.134-.783C4.59 8.477 6.013 7.24 7.7 6.368c3.54-1.83 8.06-1.834 11.605-.012 1.682.867 3.1 2.093 4.22 3.656.18.254.123.602-.13.782-.254.18-.608.124-.788-.13-1.013-1.416-2.295-2.53-3.814-3.306-3.23-1.66-7.352-1.654-10.575.01-1.524.788-2.812 1.908-3.82 3.336-.112.152-.286.23-.46.23zm7.037 13.573c-.146 0-.287-.056-.4-.17-.972-.983-1.5-1.607-2.26-2.963-.777-1.384-1.187-3.077-1.187-4.888 0-3.34 2.857-6.064 6.373-6.064s6.373 2.717 6.373 6.064c0 .31-.253.562-.562.562-.31 0-.562-.254-.562-.563 0-2.723-2.35-4.94-5.248-4.94-2.89 0-5.248 2.217-5.248 4.94 0 1.62.36 3.116 1.04 4.337.726 1.293 1.21 1.85 2.076 2.722.22.22.22.58-.005.793-.102.117-.248.168-.39.168zm8.06-2.08c-1.338 0-2.513-.34-3.486-.997-1.67-1.135-2.672-2.98-2.672-4.938 0-.31.253-.562.562-.562.31 0 .563.253.563.563 0 1.58.816 3.076 2.183 4.005.793.54 1.727.804 2.852.804.27 0 .726-.028 1.176-.107.304-.056.597.152.653.456.056.304-.152.597-.456.653-.658.118-1.215.124-1.372.124zM16.77 24.75c-.05 0-.1-.006-.146-.023-1.794-.49-2.964-1.153-4.18-2.362-1.57-1.564-2.435-3.65-2.435-5.872 0-1.83 1.552-3.314 3.465-3.314 1.912 0 3.465 1.484 3.465 3.313 0 1.203 1.052 2.188 2.34 2.188 1.288 0 2.34-.978 2.34-2.188 0-4.24-3.656-7.69-8.15-7.69-3.2 0-6.12 1.78-7.437 4.535-.44.91-.658 1.974-.658 3.155 0 .878.08 2.262.748 4.056.107.293-.04.613-.332.726-.292.107-.613-.04-.726-.332-.55-1.48-.82-2.93-.82-4.45 0-1.35.258-2.576.77-3.64 1.502-3.138 4.82-5.168 8.45-5.168 5.112 0 9.274 3.954 9.274 8.814 0 1.828-1.558 3.313-3.465 3.313-1.906 0-3.464-1.484-3.464-3.312 0-1.204-1.052-2.188-2.34-2.188-1.288 0-2.34.98-2.34 2.188 0 1.918.748 3.724 2.104 5.074 1.063 1.057 2.098 1.642 3.684 2.076.298.084.478.393.394.69-.067.25-.292.412-.54.412z" fill="#4285F4"/><path d="M0 0h27v27H0"/></g></svg>
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment