| OLD | NEW |
| (Empty) |
| 1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. | |
| 2 // Use of this source code is governed by a BSD-style license that can be | |
| 3 // found in the LICENSE file. | |
| 4 | |
| 5 /** | |
| 6 * @fileoverview Oobe signin screen implementation. | |
| 7 */ | |
| 8 | |
| 9 cr.define('login', function() { | |
| 10 /** | |
| 11 * Creates a new sign in screen div. | |
| 12 * @constructor | |
| 13 * @extends {HTMLDivElement} | |
| 14 */ | |
| 15 var SigninScreen = cr.ui.define('div'); | |
| 16 | |
| 17 // Constants for sign in screen states | |
| 18 SigninScreen.STATE_INPUT = 0; | |
| 19 SigninScreen.STATE_AUTHENTICATING = 1; | |
| 20 | |
| 21 /** | |
| 22 * Registers with Oobe. | |
| 23 */ | |
| 24 SigninScreen.register = function() { | |
| 25 var screen = $('signin'); | |
| 26 SigninScreen.decorate(screen); | |
| 27 Oobe.getInstance().registerScreen(screen); | |
| 28 }; | |
| 29 | |
| 30 SigninScreen.prototype = { | |
| 31 __proto__: HTMLDivElement.prototype, | |
| 32 | |
| 33 /** @inheritDoc */ | |
| 34 decorate: function() { | |
| 35 $('email').addEventListener('keydown', this.handleKeyDown_.bind(this)); | |
| 36 $('email').addEventListener('blur', this.handleEmailBlur_); | |
| 37 $('password').addEventListener('keydown', this.handleKeyDown_.bind(this)); | |
| 38 }, | |
| 39 | |
| 40 /** | |
| 41 * Header text of the screen. | |
| 42 * @type {string} | |
| 43 */ | |
| 44 get header() { | |
| 45 return localStrings.getString('signinScreenTitle'); | |
| 46 }, | |
| 47 | |
| 48 /** | |
| 49 * Buttons in oobe wizard's button strip. | |
| 50 * @type {array} Array of Buttons. | |
| 51 */ | |
| 52 get buttons() { | |
| 53 var buttons = []; | |
| 54 | |
| 55 var signinButton = this.ownerDocument.createElement('button'); | |
| 56 signinButton.id = 'signin-button'; | |
| 57 signinButton.textContent = localStrings.getString('signinButton'); | |
| 58 signinButton.addEventListener('click', | |
| 59 this.handleSigninClick_.bind(this)); | |
| 60 buttons.push(signinButton); | |
| 61 | |
| 62 return buttons; | |
| 63 }, | |
| 64 | |
| 65 /** | |
| 66 * Helper function to toggle spinner and input fields. | |
| 67 * @param {boolean} enable True to enable credential input UI. | |
| 68 * @private | |
| 69 */ | |
| 70 enableInputs_: function(enable) { | |
| 71 $('login-spinner').hidden = enable; | |
| 72 $('email').hidden = !enable; | |
| 73 $('password').hidden = !enable; | |
| 74 $('signin-button').hidden = !enable; | |
| 75 }, | |
| 76 | |
| 77 /** | |
| 78 * Sets UI state. | |
| 79 */ | |
| 80 set state(newState) { | |
| 81 if (newState == SigninScreen.STATE_INPUT) { | |
| 82 this.enableInputs_(true); | |
| 83 } else if (newState == SigninScreen.STATE_AUTHENTICATING) { | |
| 84 this.enableInputs_(false); | |
| 85 } | |
| 86 }, | |
| 87 | |
| 88 /** | |
| 89 * Clears input fields and switches to input mode. | |
| 90 * @param {boolean} takeFocus True to take focus. | |
| 91 */ | |
| 92 reset: function(takeFocus) { | |
| 93 $('email').value = ''; | |
| 94 $('password').value = ''; | |
| 95 this.state = SigninScreen.STATE_INPUT; | |
| 96 | |
| 97 if (takeFocus) | |
| 98 $('email').focus(); | |
| 99 }, | |
| 100 | |
| 101 /** | |
| 102 * Validates input fields. | |
| 103 */ | |
| 104 checkInput: function() { | |
| 105 // Validate input. | |
| 106 if (!$('email').value) { | |
| 107 $('email').focus(); | |
| 108 return false; | |
| 109 } | |
| 110 | |
| 111 if (!$('password').value) { | |
| 112 $('password').focus(); | |
| 113 return false; | |
| 114 } | |
| 115 | |
| 116 return true; | |
| 117 }, | |
| 118 | |
| 119 /** | |
| 120 * Handles sign in button click. | |
| 121 * @private | |
| 122 */ | |
| 123 handleSigninClick_: function(e) { | |
| 124 if (!this.checkInput()) | |
| 125 return; | |
| 126 | |
| 127 this.state = SigninScreen.STATE_AUTHENTICATING; | |
| 128 | |
| 129 chrome.send('authenticateUser', | |
| 130 [$('email').value, $('password').value]); | |
| 131 }, | |
| 132 | |
| 133 /** | |
| 134 * Handles keyboard event. | |
| 135 * @private | |
| 136 */ | |
| 137 handleKeyDown_: function(e) { | |
| 138 // Handle 'Enter' key for 'email' and 'password' field. | |
| 139 if (e.keyIdentifier == 'Enter') { | |
| 140 if (e.target.id == 'email') { | |
| 141 if (e.target.value) | |
| 142 $('password').focus(); | |
| 143 } else if (e.target.id == 'password') { | |
| 144 this.handleSigninClick_(); | |
| 145 } | |
| 146 } | |
| 147 }, | |
| 148 | |
| 149 /** | |
| 150 * Handles blur event of email field. | |
| 151 * @private | |
| 152 */ | |
| 153 handleEmailBlur_: function(e) { | |
| 154 var emailElement = $('email'); | |
| 155 if (emailElement.value && emailElement.value.indexOf('@') == -1) | |
| 156 emailElement.value += '@gmail.com'; | |
| 157 } | |
| 158 }; | |
| 159 | |
| 160 return { | |
| 161 SigninScreen: SigninScreen | |
| 162 }; | |
| 163 }); | |
| OLD | NEW |