[ChromeOS] WebUI OOBE/Login refactoring.

chrome/browser/resources/chromeos/login/screen_signin.js

 // Copyright (c) 2011 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 Oobe signin screen implementation.
  */
 
 cr.define('login', function() {
   /**
@@ skipping 14 matching lines @@
     var screen = $('signin');
     SigninScreen.decorate(screen);
     Oobe.getInstance().registerScreen(screen);
   };
 
   SigninScreen.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     /** @inheritDoc */
     decorate: function() {
+      $('email').addEventListener('keydown', this.handleKeyDown_.bind(this));
+      $('password').addEventListener('keydown', this.handleKeyDown_.bind(this));
     },
 
     /**
      * Header text of the screen.
      * @type {string}
      */
     get header() {
       return localStrings.getString('signinScreenTitle');
     },
 
@@ skipping 41 matching lines @@
      * Clears input fields and switches to input mode.
      */
     reset: function() {
       $('email').value = '';
       $('password').value = '';
       $('email').focus();
       this.state = SigninScreen.STATE_INPUT;
     },
 
     /**
+     * Validates input fields.
+     */
+    checkInput: function() {
+      // Validate input.
+      if (! $('email').value) {

[Nikita (slow), 2011/07/15 18:52:07]

nit: nuke space between ! and $

[xiyuan, 2011/07/15 20:38:29]

Done.

+         $('email').focus();
+        return false;
+      }
+
+      if (!$('password').value) {
+        $('password').focus();
+        return false;
+      }
+
+      return true;
+    },
+
+    /**
      * Handles sign in button click.
      * @private
      */
     handleSigninClick_: function(e) {
+      if (!this.checkInput())
+        return;
+
       this.state = SigninScreen.STATE_AUTHENTICATING;
 
       chrome.send('authenticateUser',
           [$('email').value, $('password').value]);
+    },
+
+    /**
+     * Handles keyboard event.
+     * @private
+     */
+    handleKeyDown_: function(e) {
+      // Handle 'Enter' key for 'email' and 'password' field.
+      if (e.keyIdentifier == 'Enter') {
+        if (e.target.id == 'email' && e.target.value)

[Nikita (slow), 2011/07/15 18:52:07]

nit: might be rewritten as

if (.. 'email') {
  if (e.target.value)
    ..
} else if (... 'password') {
}

to avoid extra comparisons.

[xiyuan, 2011/07/15 20:38:29]

I think javascript uses shortcut boolean operation.
e.g "false && some_func()", some_func will not be called.

[Nikita (slow), 2011/07/18 07:50:50]

What I've meant was that you need to compare string only once. In current code
if (e.target.id == 'password') is executed each time.

[xiyuan, 2011/07/18 18:32:09]

I see what you mean. Changed as suggested.

+          $('password').focus();
+
+        if (e.target.id == 'password')

[Fady Samuel, 2011/07/15 20:11:34]

Does this mean one doesn't need a password to login? Should we have
e.target.value as well?

[xiyuan, 2011/07/15 20:38:29]

The part to check empty password is in checkInput and called from
handleSigninClick_.

+          this.handleSigninClick_();
+      }
     }
   };
 
   /**
    * Expose 'reset' method that resets sign-in screen.
    * @public
    */
   SigninScreen.reset = function() {
     $('signin').reset();
   };
 
   return {
     SigninScreen: SigninScreen
   };
 });