From 15be933add30e533c4f3143f9185d7d64f019b88 Mon Sep 17 00:00:00 2001 From: "xiyuan@chromium.org" Date: Wed, 5 Feb 2014 07:10:08 +0000 Subject: [PATCH] cros: Update SAML flow. - Update password confirm UI per mock; - Show password confirm UI with an error message after 1st failed attempt; - Rename message box screen to fatal error screen; - Show fatal error screen on 2nd failed attempt; BUG=330206 Review URL: https://codereview.chromium.org/137803008 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@248893 0039d316-1c4b-4281-b951-d872f2087c98 --- chrome/app/chromeos_strings.grdp | 30 ++++----- chrome/browser/chromeos/login/oobe_display.h | 2 +- .../chromeos/login/saml/saml_browsertest.cc | 32 +++++++-- .../resources/chromeos/login/display_manager.js | 3 +- chrome/browser/resources/chromeos/login/gaia.css | 54 +++++++++++++++ .../browser/resources/chromeos/login/header_bar.js | 3 + chrome/browser/resources/chromeos/login/login.js | 2 +- .../resources/chromeos/login/login_common.js | 2 +- .../resources/chromeos/login/login_resources.html | 2 +- .../resources/chromeos/login/login_screens.html | 2 +- chrome/browser/resources/chromeos/login/oobe.js | 2 +- .../resources/chromeos/login/oobe_screens.html | 2 +- .../chromeos/login/screen_confirm_password.css | 44 ++++++++++-- .../chromeos/login/screen_confirm_password.html | 32 ++++++--- .../chromeos/login/screen_confirm_password.js | 29 +++----- .../resources/chromeos/login/screen_container.css | 4 +- .../chromeos/login/screen_fatal_error.css | 22 ++++++ .../chromeos/login/screen_fatal_error.html | 15 +++++ .../resources/chromeos/login/screen_fatal_error.js | 59 ++++++++++++++++ .../chromeos/login/screen_gaia_signin.css | 2 +- .../chromeos/login/screen_gaia_signin.html | 2 +- .../resources/chromeos/login/screen_gaia_signin.js | 32 +++++++-- .../chromeos/login/screen_message_box.css | 14 ---- .../chromeos/login/screen_message_box.html | 8 --- .../resources/chromeos/login/screen_message_box.js | 78 ---------------------- .../ui/webui/chromeos/login/gaia_screen_handler.cc | 6 +- chrome/browser/ui/webui/chromeos/login/oobe_ui.cc | 4 +- chrome/browser/ui/webui/chromeos/login/oobe_ui.h | 2 +- .../webui/chromeos/login/signin_screen_handler.cc | 6 +- 29 files changed, 313 insertions(+), 182 deletions(-) create mode 100644 chrome/browser/resources/chromeos/login/gaia.css rewrite chrome/browser/resources/chromeos/login/screen_confirm_password.html (71%) create mode 100644 chrome/browser/resources/chromeos/login/screen_fatal_error.css create mode 100644 chrome/browser/resources/chromeos/login/screen_fatal_error.html create mode 100644 chrome/browser/resources/chromeos/login/screen_fatal_error.js delete mode 100644 chrome/browser/resources/chromeos/login/screen_message_box.css delete mode 100644 chrome/browser/resources/chromeos/login/screen_message_box.html delete mode 100644 chrome/browser/resources/chromeos/login/screen_message_box.js diff --git a/chrome/app/chromeos_strings.grdp b/chrome/app/chromeos_strings.grdp index 59b4c9f1f6b5..7ebe5dfdba1d 100644 --- a/chrome/app/chromeos_strings.grdp +++ b/chrome/app/chromeos_strings.grdp @@ -1307,22 +1307,22 @@ Press any key to continue exploring. The sign-in service below is hosted by $1saml.com. Sign in to continue. - Please confirm your password. + Complete sign-in - - Type your password here to confirm. + + Please re-enter your password Confirm - - No password detected. + + Re-entering your password will allow you to sign in when you are offline. - - Password is not detected for your SAML identity provider. Please contact your administrator for more information. + + Sorry, your password could not be verified. Please try again. - - Ok + + Something went wrong with signing in.<br>Please contact your administrator or try again. Email @@ -4789,7 +4789,7 @@ All users must sign out to continue. Next - + Check your charger @@ -4823,7 +4823,7 @@ All users must sign out to continue. Ireland - + Next @@ -4855,7 +4855,7 @@ All users must sign out to continue. Please stop using the recalled charger. - If you purchased an HP Chromebook 11 before December 1, 2013, we'll mail you a free replacement charger. You will also receive a prepaid shipping package to return the original charger so that we can dispose of it properly. + If you purchased an HP Chromebook 11 before December 1, 2013, we'll mail you a free replacement charger. You will also receive a prepaid shipping package to return the original charger so that we can dispose of it properly. In the meantime, you may refer to the <a class="link" href="#">FAQs</a> and continue to use your HP Chromebook 11 with any other certified micro-USB charger, for example one provided with a tablet or smartphone. We apologize again for the inconvenience. Your safety is a top priority. @@ -4891,10 +4891,10 @@ All users must sign out to continue. HP Chromebook 11 power charger request form - With guidance and approval from the CPSC and other regulatory agencies, Google and HP are recalling the original charger for the HP Chromebook 11. + With guidance and approval from the CPSC and other regulatory agencies, Google and HP are recalling the original charger for the HP Chromebook 11. - If you purchased an HP Chromebook 11 before December 1, 2013, we'll mail you a free replacement charger. You will also receive a prepaid shipping package to return the original charger so that we can dispose of it properly. + If you purchased an HP Chromebook 11 before December 1, 2013, we'll mail you a free replacement charger. You will also receive a prepaid shipping package to return the original charger so that we can dispose of it properly. I have called the number and requested a replacement charger. @@ -4912,7 +4912,7 @@ All users must sign out to continue. We see that you've ordered a replacement charger. - You can find more info at + You can find more info at Check charger diff --git a/chrome/browser/chromeos/login/oobe_display.h b/chrome/browser/chromeos/login/oobe_display.h index 9f1e7236807d..e76af7cb0b5c 100644 --- a/chrome/browser/chromeos/login/oobe_display.h +++ b/chrome/browser/chromeos/login/oobe_display.h @@ -52,7 +52,7 @@ class OobeDisplay { SCREEN_WRONG_HWID, SCREEN_APP_LAUNCH_SPLASH, SCREEN_CONFIRM_PASSWORD, - SCREEN_MESSAGE_BOX, + SCREEN_FATAL_ERROR, SCREEN_UNKNOWN }; diff --git a/chrome/browser/chromeos/login/saml/saml_browsertest.cc b/chrome/browser/chromeos/login/saml/saml_browsertest.cc index 7cf880dd7f66..886e61352ff1 100644 --- a/chrome/browser/chromeos/login/saml/saml_browsertest.cc +++ b/chrome/browser/chromeos/login/saml/saml_browsertest.cc @@ -470,10 +470,7 @@ IN_PROC_BROWSER_TEST_F(SamlTest, ScrapedNone) { SetSignFormField("Email", "fake_user"); ExecuteJsInSigninFrame("document.getElementById('Submit').click();"); - OobeScreenWaiter(OobeDisplay::SCREEN_MESSAGE_BOX).Wait(); - JsExpect( - "$('message-box-title').textContent == " - "loadTimeData.getString('noPasswordWarningTitle')"); + OobeScreenWaiter(OobeDisplay::SCREEN_FATAL_ERROR).Wait(); } // Types |bob@example.com| into the GAIA login form but then authenticates as @@ -502,6 +499,33 @@ IN_PROC_BROWSER_TEST_F(SamlTest, UseAutenticatedUserEmailAddress) { EXPECT_EQ(kFirstSAMLUserEmail, user->email()); } +// Tests the password confirm flow: show error on the first failure and +// fatal error on the second failure. +IN_PROC_BROWSER_TEST_F(SamlTest, PasswordConfirmFlow) { + fake_saml_idp()->SetLoginHTMLTemplate("saml_login.html"); + StartSamlAndWaitForIdpPageLoad(kFirstSAMLUserEmail); + + // Fill-in the SAML IdP form and submit. + SetSignFormField("Email", "fake_user"); + SetSignFormField("Password", "fake_password"); + ExecuteJsInSigninFrame("document.getElementById('Submit').click();"); + + // Lands on confirm password screen with no error message. + OobeScreenWaiter(OobeDisplay::SCREEN_CONFIRM_PASSWORD).Wait(); + JsExpect("!$('confirm-password').classList.contains('error')"); + + // Enter an unknown password for the first time should go back to confirm + // password screen with error message. + SendConfirmPassword("wrong_password"); + OobeScreenWaiter(OobeDisplay::SCREEN_CONFIRM_PASSWORD).Wait(); + JsExpect("$('confirm-password').classList.contains('error')"); + + // Enter an unknown password 2nd time should go back to confirm password + // screen. + SendConfirmPassword("wrong_password"); + OobeScreenWaiter(OobeDisplay::SCREEN_FATAL_ERROR).Wait(); +} + class SAMLPolicyTest : public SamlTest { public: SAMLPolicyTest(); diff --git a/chrome/browser/resources/chromeos/login/display_manager.js b/chrome/browser/resources/chromeos/login/display_manager.js index a2a00ffacffb..4ebb3e97bafb 100644 --- a/chrome/browser/resources/chromeos/login/display_manager.js +++ b/chrome/browser/resources/chromeos/login/display_manager.js @@ -22,7 +22,7 @@ 'managed-user-creation'; /** @const */ var SCREEN_APP_LAUNCH_SPLASH = 'app-launch-splash'; /** @const */ var SCREEN_CONFIRM_PASSWORD = 'confirm-password'; -/** @const */ var SCREEN_MESSAGE_BOX = 'message-box'; +/** @const */ var SCREEN_FATAL_ERROR = 'fatal-error'; /* Accelerator identifiers. Must be kept in sync with webui_login_view.cc. */ /** @const */ var ACCELERATOR_CANCEL = 'cancel'; @@ -44,6 +44,7 @@ ACCOUNT_PICKER: 2, WRONG_HWID_WARNING: 3, MANAGED_USER_CREATION_FLOW: 4, + SAML_PASSWORD_CONFIRM: 5, }; /* Possible UI states of the error screen. */ diff --git a/chrome/browser/resources/chromeos/login/gaia.css b/chrome/browser/resources/chromeos/login/gaia.css new file mode 100644 index 000000000000..3a5ab17b369f --- /dev/null +++ b/chrome/browser/resources/chromeos/login/gaia.css @@ -0,0 +1,54 @@ +/* Copyright 2014 The Chromium Authors. All rights reserved. + * Use of this source code is governed by a BSD-style license that can be + * found in the LICENSE file. + */ + +.gaia-input { + border: 1px solid #d9d9d9; + border-radius: 1px; + border-top: 1px solid #c0c0c0; + font-size: 15px; + height: 32px; + margin: 0; + padding: 0 8px; + width: 100%; +} + +.gaia-input:focus { + border: 1px solid rgb(77, 144, 254); + box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); + outline: none; +} + +.blue-button { + background-color: rgb(77, 144, 254); + background-image: -webkit-linear-gradient(top, + rgb(77, 144, 254), + rgb(71, 135, 237)); + border: 1px solid rgb(48, 121, 237); + border-radius: 2px; + color: #fff; + font-size: 13px; + font-weight: bold; + height: 32px; + margin: 0 1.5em 1.2em 0; + text-shadow: 0 1px rgba(0, 0, 0, 0.1); +} + +.blue-button:hover { + background-color: rgb(53, 122, 232); + background-image: -webkit-linear-gradient(top, + rgb(77, 144, 254), + rgb(53, 122, 232)); + border: 1px solid rgb(47, 91, 183); + text-shadow: 0 1px rgba(0, 0, 0, 0.3); +} + +.blue-button:focus { + -webkit-box-shadow: inset 0 0 0 1px #fff; +} + +.blue-button:focus:hover { + -webkit-box-shadow: inset 0 0 0 1px #fff, 0 1px 1px rgba(0, 0, 0, 0.1); +} + diff --git a/chrome/browser/resources/chromeos/login/header_bar.js b/chrome/browser/resources/chromeos/login/header_bar.js index 06e7434da361..dac8d258cdd8 100644 --- a/chrome/browser/resources/chromeos/login/header_bar.js +++ b/chrome/browser/resources/chromeos/login/header_bar.js @@ -188,6 +188,8 @@ cr.define('login', function() { (this.signinUIState_ == SIGNIN_UI_STATE.MANAGED_USER_CREATION_FLOW); var wrongHWIDWarningIsActive = (this.signinUIState_ == SIGNIN_UI_STATE.WRONG_HWID_WARNING); + var isSamlPasswordConfirm = + (this.signinUIState_ == SIGNIN_UI_STATE.SAML_PASSWORD_CONFIRM); var isMultiProfilesUI = (Oobe.getInstance().displayType == DISPLAY_TYPE.USER_ADDING); @@ -200,6 +202,7 @@ cr.define('login', function() { managedUserCreationDialogIsActive || !this.showGuest_ || wrongHWIDWarningIsActive || + isSamlPasswordConfirm || isMultiProfilesUI; $('add-user-header-bar-item').hidden = $('add-user-button').hidden && $('cancel-add-user-button').hidden; diff --git a/chrome/browser/resources/chromeos/login/login.js b/chrome/browser/resources/chromeos/login/login.js index 03687ed662d9..ec7eda51e187 100644 --- a/chrome/browser/resources/chromeos/login/login.js +++ b/chrome/browser/resources/chromeos/login/login.js @@ -30,7 +30,7 @@ cr.define('cr.ui.Oobe', function() { login.TermsOfServiceScreen.register(); login.AppLaunchSplashScreen.register(); login.ConfirmPasswordScreen.register(); - login.MessageBoxScreen.register(); + login.FatalErrorScreen.register(); cr.ui.Bubble.decorate($('bubble')); login.HeaderBar.decorate($('login-header-bar')); diff --git a/chrome/browser/resources/chromeos/login/login_common.js b/chrome/browser/resources/chromeos/login/login_common.js index 7c43f01784a2..2118a84939a3 100644 --- a/chrome/browser/resources/chromeos/login/login_common.js +++ b/chrome/browser/resources/chromeos/login/login_common.js @@ -27,7 +27,7 @@ - + diff --git a/chrome/browser/resources/chromeos/login/login_resources.html b/chrome/browser/resources/chromeos/login/login_resources.html index 340f6f34f367..8cac0a1f6e18 100644 --- a/chrome/browser/resources/chromeos/login/login_resources.html +++ b/chrome/browser/resources/chromeos/login/login_resources.html @@ -30,7 +30,7 @@ - + diff --git a/chrome/browser/resources/chromeos/login/login_screens.html b/chrome/browser/resources/chromeos/login/login_screens.html index 8c441d48dc8b..ccd4b2b8d763 100644 --- a/chrome/browser/resources/chromeos/login/login_screens.html +++ b/chrome/browser/resources/chromeos/login/login_screens.html @@ -12,4 +12,4 @@ - + diff --git a/chrome/browser/resources/chromeos/login/oobe.js b/chrome/browser/resources/chromeos/login/oobe.js index d296a2487c77..a88c0f5dd297 100644 --- a/chrome/browser/resources/chromeos/login/oobe.js +++ b/chrome/browser/resources/chromeos/login/oobe.js @@ -79,7 +79,7 @@ cr.define('cr.ui.Oobe', function() { login.TermsOfServiceScreen.register(); login.AppLaunchSplashScreen.register(); login.ConfirmPasswordScreen.register(); - login.MessageBoxScreen.register(); + login.FatalErrorScreen.register(); cr.ui.Bubble.decorate($('bubble')); login.HeaderBar.decorate($('login-header-bar')); diff --git a/chrome/browser/resources/chromeos/login/oobe_screens.html b/chrome/browser/resources/chromeos/login/oobe_screens.html index 4774573396e7..d711250c762c 100644 --- a/chrome/browser/resources/chromeos/login/oobe_screens.html +++ b/chrome/browser/resources/chromeos/login/oobe_screens.html @@ -15,4 +15,4 @@ - + diff --git a/chrome/browser/resources/chromeos/login/screen_confirm_password.css b/chrome/browser/resources/chromeos/login/screen_confirm_password.css index 2ce1374dd403..9fc699f87a62 100644 --- a/chrome/browser/resources/chromeos/login/screen_confirm_password.css +++ b/chrome/browser/resources/chromeos/login/screen_confirm_password.css @@ -4,17 +4,47 @@ */ #confirm-password { - height: 200px; - padding: 70px 17px; - width: 400px; + height: 609px; /* Should be the same as #gaia-signin. */ + padding: 70px; + width: 722px; /* Should be the same as #gaia-signin. */ +} + +#confirm-password .step-contents { + -webkit-box-pack: center; + display: -webkit-box; + height: 100%; +} + +#confirm-password-main { + height: 100%; + width: 310px; } #confirm-password-title { font-weight: bold; - margin: 0; } -#confirm-password-input { - margin-top: 10px; - width: 100%; +#confirm-password-input-container { + margin-bottom: 1em; } + +#confirm-password-error { + color: rgb(221, 75, 57); + margin-top: .5em; +} + +#confirm-password:not(.error) #confirm-password-error { + display: none; +} + +#confirm-password-divider { + margin-left: 44px; + margin-right: 30px; +} + +#confirm-password-right { + -webkit-box-flex: 1; + margin-top: 1em; +} + + diff --git a/chrome/browser/resources/chromeos/login/screen_confirm_password.html b/chrome/browser/resources/chromeos/login/screen_confirm_password.html dissimilarity index 71% index bf07edd04528..3f9dcc359aa7 100644 --- a/chrome/browser/resources/chromeos/login/screen_confirm_password.html +++ b/chrome/browser/resources/chromeos/login/screen_confirm_password.html @@ -1,10 +1,22 @@ - + diff --git a/chrome/browser/resources/chromeos/login/screen_confirm_password.js b/chrome/browser/resources/chromeos/login/screen_confirm_password.js index ecc134a56866..2ca191ff2965 100644 --- a/chrome/browser/resources/chromeos/login/screen_confirm_password.js +++ b/chrome/browser/resources/chromeos/login/screen_confirm_password.js @@ -22,29 +22,20 @@ login.createScreen('ConfirmPasswordScreen', 'confirm-password', function() { decorate: function() { $('confirm-password-input').addEventListener( 'keydown', this.onPasswordFieldKeyDown_.bind(this)); - }, - - /** - * Screen controls in bottom strip. - * @type {Array.} Buttons to be put in the bottom strip. - */ - get buttons() { - var buttons = []; - - var confirmButton = this.ownerDocument.createElement('button'); - confirmButton.textContent = - loadTimeData.getString('confirmPasswordConfirmButton'); - confirmButton.addEventListener('click', - this.onConfirmPassword_.bind(this)); - buttons.push(confirmButton); - - return buttons; + $('confirm-password-confirm-button').addEventListener( + 'click', this.onConfirmPassword_.bind(this)); }, get defaultControl() { return $('confirm-password-input'); }, + /** @override */ + onBeforeShow: function(data) { + $('login-header-bar').signinUIState = + SIGNIN_UI_STATE.SAML_PASSWORD_CONFIRM; + }, + /** * Handle 'keydown' event on password input field. */ @@ -62,11 +53,13 @@ login.createScreen('ConfirmPasswordScreen', 'confirm-password', function() { /** * Shows the confirm password screen. + * @param {number} attemptCount Number of attempts tried, starting at 0. * @param {function(string)} callback The callback to be invoked when the * screen is dismissed. */ - show: function(callback) { + show: function(attemptCount, callback) { this.callback_ = callback; + this.classList.toggle('error', attemptCount > 0); $('confirm-password-input').value = ''; Oobe.showScreen({id: SCREEN_CONFIRM_PASSWORD}); diff --git a/chrome/browser/resources/chromeos/login/screen_container.css b/chrome/browser/resources/chromeos/login/screen_container.css index 0ebde84c2878..e7abf06989a2 100644 --- a/chrome/browser/resources/chromeos/login/screen_container.css +++ b/chrome/browser/resources/chromeos/login/screen_container.css @@ -42,7 +42,7 @@ #oobe.terms-of-service #inner-container, #oobe.wrong-hwid #inner-container, #oobe.confirm-password #inner-container, -#oobe.message-box #inner-container { +#oobe.fatal-error #inner-container { background: white; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 4px 23px 5px rgba(0, 0, 0, 0.2), @@ -116,7 +116,7 @@ #terms-of-service-dot, #wrong-hwid-dot, #confirm-password-dot, -#message-box-dot { +#fatal-error-dot { display: none; } diff --git a/chrome/browser/resources/chromeos/login/screen_fatal_error.css b/chrome/browser/resources/chromeos/login/screen_fatal_error.css new file mode 100644 index 000000000000..882f3dd113f1 --- /dev/null +++ b/chrome/browser/resources/chromeos/login/screen_fatal_error.css @@ -0,0 +1,22 @@ +/* Copyright 2014 The Chromium Authors. All rights reserved. + * Use of this source code is governed by a BSD-style license that can be + * found in the LICENSE file. + */ + +#fatal-error { + padding: 50px 17px 17px; + width: 722px; /* Should be the same as #gaia-signin. */ +} + +#fatal-error-message-container { + text-align: center; + width: 100%; +} + +#fatal-error-button-strip { + display: -webkit-box; +} + +#fatal-error-button-strip-space-filler { + -webkit-box-flex: 1; +} diff --git a/chrome/browser/resources/chromeos/login/screen_fatal_error.html b/chrome/browser/resources/chromeos/login/screen_fatal_error.html new file mode 100644 index 000000000000..a896d086b84f --- /dev/null +++ b/chrome/browser/resources/chromeos/login/screen_fatal_error.html @@ -0,0 +1,15 @@ + + diff --git a/chrome/browser/resources/chromeos/login/screen_fatal_error.js b/chrome/browser/resources/chromeos/login/screen_fatal_error.js new file mode 100644 index 000000000000..e7650e076f16 --- /dev/null +++ b/chrome/browser/resources/chromeos/login/screen_fatal_error.js @@ -0,0 +1,59 @@ +// Copyright 2014 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * @fileoverview A simple message box screen implementation. + */ + +login.createScreen('FatalErrorScreen', 'fatal-error', function() { return { + EXTERNAL_API: [ + 'show' + ], + + /** + * Callback to run when the screen is dismissed. + * @type {function()} + */ + callback_: null, + + /** + * Saved hidden status of 'progress-dots'. + * @type {boolean} + */ + savedProgressDotsHidden_: null, + + /** @override */ + decorate: function() { + $('fatal-error-dismiss-button').addEventListener( + 'click', this.onDismiss_.bind(this)); + }, + + get defaultControl() { + return $('fatal-error-dismiss-button'); + }, + + /** + * Invoked when user clicks on the ok button. + */ + onDismiss_: function() { + this.callback_(); + $('progress-dots').hidden = this.savedProgressDotsHidden_; + }, + + /** + * Shows the no password warning screen. + * @param {function()} callback The callback to be invoked when the + * screen is dismissed. + */ + show: function(callback) { + Oobe.getInstance().headerHidden = true; + this.callback_ = callback; + + Oobe.showScreen({id: SCREEN_FATAL_ERROR}); + + this.savedProgressDotsHidden_ = $('progress-dots').hidden; + $('progress-dots').hidden = true; + } + }; +}); diff --git a/chrome/browser/resources/chromeos/login/screen_gaia_signin.css b/chrome/browser/resources/chromeos/login/screen_gaia_signin.css index 17a480bfb435..6507e20cfaae 100644 --- a/chrome/browser/resources/chromeos/login/screen_gaia_signin.css +++ b/chrome/browser/resources/chromeos/login/screen_gaia_signin.css @@ -69,7 +69,7 @@ width: 100%; } -#gaia-signin-divider { +.signin-divider { background: -webkit-gradient( linear, left top, left bottom, color-stop(0, #e3e3e3), diff --git a/chrome/browser/resources/chromeos/login/screen_gaia_signin.html b/chrome/browser/resources/chromeos/login/screen_gaia_signin.html index e76f292c5f79..6c9be605a7f7 100644 --- a/chrome/browser/resources/chromeos/login/screen_gaia_signin.html +++ b/chrome/browser/resources/chromeos/login/screen_gaia_signin.html @@ -10,7 +10,7 @@ frameborder="0" scrolling="no"> - +