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 |