Refactor user pods to use authType property for distinct authentication modes.

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

 // Copyright (c) 2012 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 User pod row implementation.
  */
 
 cr.define('login', function() {
   /**
@@ skipping 60 matching lines @@
    * @enum {number}
    * @const
    */
   var UserPodTabOrder = {
     POD_INPUT: 1,     // Password input fields (and whole pods themselves).
     HEADER_BAR: 2,    // Buttons on the header bar (Shutdown, Add User).
     ACTION_BOX: 3,    // Action box buttons.
     PAD_MENU_ITEM: 4  // User pad menu items (Remove this user).
   };
 
+  /**
+   * Supported authentication types. Keep in sync with the enum in
+   * chrome/browser/chromeos/login/login_display.h
+   * @enum {number}
+   * @const
+   */
+  var AUTH_TYPE = {
+    OFFLINE_PASSWORD: 0,
+    ONLINE_SIGN_IN: 1,
+    NUMERIC_PIN: 2,
+    USER_CLICK: 3,
+  };
+
+  /**
+   * Names of authentication types.
+   */
+  var AUTH_TYPE_NAMES = {
+    0: 'offlinePassword',
+    1: 'onlineSignIn',
+    2: 'numericPin',
+    3: 'userClick',
+  };
+
   // Focus and tab order are organized as follows:
   //
   // (1) all user pods have tab index 1 so they are traversed first;
   // (2) when a user pod is activated, its tab index is set to -1 and its
   // main input field gets focus and tab index 1;
   // (3) buttons on the header bar have tab index 2 so they follow user pods;
   // (4) Action box buttons have tab index 3 and follow header bar buttons;
   // (5) lastly, focus jumps to the Status Area and back to user pods.
   //
   // 'Focus' event is handled by a capture handler for the whole document
@@ skipping 36 matching lines @@
    * @type {Object}
    */
   UserPod.userImageSalt_ = {};
 
   UserPod.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     /** @override */
     decorate: function() {
       this.tabIndex = UserPodTabOrder.POD_INPUT;
-      this.customButton.tabIndex = UserPodTabOrder.POD_INPUT;
+      this.customButtonElement.tabIndex = UserPodTabOrder.POD_INPUT;
       this.actionBoxAreaElement.tabIndex = UserPodTabOrder.ACTION_BOX;
 
-      this.addEventListener('click',
-          this.handleClickOnPod_.bind(this));
+      this.addEventListener('keydown', this.handlePodKeyDown_.bind(this));
+      this.addEventListener('click', this.handleClickOnPod_.bind(this));
 
       this.signinButtonElement.addEventListener('click',
           this.activate.bind(this));
 
       this.actionBoxAreaElement.addEventListener('mousedown',
                                                  stopEventPropagation);
       this.actionBoxAreaElement.addEventListener('click',
           this.handleActionAreaButtonClick_.bind(this));
       this.actionBoxAreaElement.addEventListener('keydown',
           this.handleActionAreaButtonKeyDown_.bind(this));
 
       this.actionBoxMenuRemoveElement.addEventListener('click',
           this.handleRemoveCommandClick_.bind(this));
       this.actionBoxMenuRemoveElement.addEventListener('keydown',
           this.handleRemoveCommandKeyDown_.bind(this));
       this.actionBoxMenuRemoveElement.addEventListener('blur',
           this.handleRemoveCommandBlur_.bind(this));
 
       if (this.actionBoxRemoveUserWarningButtonElement) {
         this.actionBoxRemoveUserWarningButtonElement.addEventListener(
             'click',
             this.handleRemoveUserConfirmationClick_.bind(this));
       }
 
-      this.customButton.addEventListener('click',
+      this.customButtonElement.addEventListener('click',
           this.handleCustomButtonClick_.bind(this));
     },
 
     /**
      * Initializes the pod after its properties set and added to a pod row.
      */
     initialize: function() {
       this.passwordElement.addEventListener('keydown',
           this.parentNode.handleKeyDown.bind(this.parentNode));
       this.passwordElement.addEventListener('keypress',
           this.handlePasswordKeyPress_.bind(this));
 
       this.imageElement.addEventListener('load',
           this.parentNode.handlePodImageLoad.bind(this.parentNode, this));
+
+      var initialAuthType = this.user.initialAuthType ||
+          AUTH_TYPE.OFFLINE_PASSWORD;
+      this.setAuthType(initialAuthType, null);
     },
 
     /**
      * Resets tab order for pod elements to its initial state.
      */
     resetTabOrder: function() {
+      // Note: the |mainInput| can be the pod itself.
+      this.mainInput.tabIndex = -1;
       this.tabIndex = UserPodTabOrder.POD_INPUT;
-      this.mainInput.tabIndex = -1;
     },
 
     /**
      * Handles keypress event (i.e. any textual input) on password input.
      * @param {Event} e Keypress Event object.
      * @private
      */
     handlePasswordKeyPress_: function(e) {
       // When tabbing from the system tray a tab key press is received. Suppress
       // this so as not to type a tab character into the password field.
@@ skipping 44 matching lines @@
 
     /**
      * Gets password field.
      * @type {!HTMLInputElement}
      */
     get passwordElement() {
       return this.querySelector('.password');
     },
 
     /**
+     * Gets the password label, which is used to show a message where the
+     * password field is normally.
+     * @type {!HTMLInputElement}
+     */
+    get passwordLabelElement() {
+      return this.querySelector('.password-label');
+    },
+
+    /**
      * Gets Caps Lock hint image.
      * @type {!HTMLImageElement}
      */
     get capslockHintElement() {
       return this.querySelector('.capslock-hint');
     },
 
     /**
      * Gets user sign in button.
      * @type {!HTMLButtonElement}
@@ skipping 105 matching lines @@
      */
     get lockedIndicatorElement() {
       return this.querySelector('.locked-indicator');
     },
 
     /**
      * Gets the custom button. This button is normally hidden, but can be shown
      * using the chrome.screenlockPrivate API.
      * @type {!HTMLInputElement}
      */
-    get customButton() {
+    get customButtonElement() {
       return this.querySelector('.custom-button');
     },
 
     /**
      * Updates the user pod element.
      */
     update: function() {
       this.imageElement.src = 'chrome://userimage/' + this.user.username +
           '?id=' + UserPod.userImageSalt_[this.user.username];
 
       this.nameElement.textContent = this.user_.displayName;
       this.signedInIndicatorElement.hidden = !this.user_.signedIn;
 
-      var forceOnlineSignin = this.forceOnlineSignin;
-      this.passwordElement.hidden = forceOnlineSignin;
-      this.signinButtonElement.hidden = !forceOnlineSignin;
+      this.customButtonElement.tabIndex = UserPodTabOrder.POD_INPUT;
+      if (this.isAuthTypeUserClick) {
+        this.passwordLabelElement.textContent = this.authValue;
+        this.customButtonElement.tabIndex = -1;
+      }
 
       this.updateActionBoxArea();
 
       this.passwordElement.setAttribute('aria-label', loadTimeData.getStringF(
         'passwordFieldAccessibleName', this.user_.emailAddress));
 
       this.customizeUserPodPerUserType();
     },
 
     updateActionBoxArea: function() {
@@ skipping 56 matching lines @@
     user_: undefined,
     get user() {
       return this.user_;
     },
     set user(userDict) {
       this.user_ = userDict;
       this.update();
     },
 
     /**
-     * Whether this user must authenticate against GAIA.
-     */
-    get forceOnlineSignin() {
-      return this.user.forceOnlineSignin && !this.user.signedIn;
-    },
-
-    /**
      * Gets main input element.
      * @type {(HTMLButtonElement|HTMLInputElement)}
      */
     get mainInput() {
-      if (!this.signinButtonElement.hidden)
+      if (this.isAuthTypePassword) {
+        return this.passwordElement.hidden ?
+            this.nameElement : this.passwordElement;

[Nikita (slow), 2014/02/20 15:12:18]

When you return this.nameElement, how does it work next when mainInput.focus()
is called?

[Tim Song, 2014/02/20 22:14:01]

Now that I think about it, the name element shouldn't be the main input element
at all.

+      } else if (this.isAuthTypeOnlineSignIn) {
         return this.signinButtonElement;
-      else
-        return this.passwordElement;
+      } else if (this.isAuthTypeUserClick) {
+        return this;
+      }
     },
 
     /**
      * Whether action box button is in active state.
      * @type {boolean}
      */
     get isActionBoxMenuActive() {
       return this.actionBoxAreaElement.classList.contains('active');
     },
     set isActionBoxMenuActive(active) {
@@ skipping 30 matching lines @@
       if (hovered) {
         this.actionBoxAreaElement.classList.add('hovered');
         this.classList.add('hovered');
       } else {
         this.actionBoxAreaElement.classList.remove('hovered');
         this.classList.remove('hovered');
       }
     },
 
     /**
+     * Set the authentication type for the pod.
+     * @param {number} An auth type value defined in the AUTH_TYPE enum.
+     * @param {string} authValue The initial value used for the auth type.
+     */
+    setAuthType: function(authType, authValue) {
+      this.authType_ = authType;
+      this.authValue_ = authValue;
+      this.setAttribute('auth-type', AUTH_TYPE_NAMES[this.authType_]);
+      this.update();
+      this.reset(this.parentNode.isFocused(this));
+    },
+
+    /**
+     * The auth type of the user pod. This value is one of the enum
+     * values in AUTH_TYPE.
+     * @type {number}
+     */
+    get authType() {
+      return this.authType_;
+    },
+
+    /**
+     * The initial value used for the pod's authentication type.
+     * eg. a prepopulated password input when using password authentication.
+     */
+    get authValue() {
+      return this.authValue_;
+    },
+
+    /**
+     * True if the the user pod uses a password to authenticate.
+     * @type {bool}
+     */
+    get isAuthTypePassword() {
+      return this.authType_ == AUTH_TYPE.OFFLINE_PASSWORD;
+    },
+
+    /**
+     * True if the the user pod uses a user click to authenticate.
+     * @type {bool}
+     */
+    get isAuthTypeUserClick() {
+      return this.authType_ == AUTH_TYPE.USER_CLICK;
+    },
+
+    /**
+     * True if the the user pod uses a online sign in to authenticate.
+     * @type {bool}
+     */
+    get isAuthTypeOnlineSignIn() {
+      return this.authType_ == AUTH_TYPE.ONLINE_SIGN_IN;
+    },
+
+    /**
      * Updates the image element of the user.
      */
     updateUserImage: function() {
       UserPod.userImageSalt_[this.user.username] = new Date().getTime();
       this.update();
     },
 
     /**
      * Focuses on input element.
      */
     focusInput: function() {
-      var forceOnlineSignin = this.forceOnlineSignin;
-      this.signinButtonElement.hidden = !forceOnlineSignin;
-      this.passwordElement.hidden = forceOnlineSignin;
-
       // Move tabIndex from the whole pod to the main input.
+      // Note: the |mainInput| can be the pod itself.

[Nikita (slow), 2014/02/20 15:12:18]

Not the pod itself but nameElement?

[Tim Song, 2014/02/20 22:14:01]

In the mocks, the entire pod is clickable, so I think it makes sense to consider
it as the "main input". This has some implications in terms of what gets
focused.  

       this.tabIndex = -1;
       this.mainInput.tabIndex = UserPodTabOrder.POD_INPUT;
       this.mainInput.focus();
     },
 
     /**
      * Activates the pod.
      * @param {Event} e Event object.
      * @return {boolean} True if activated successfully.
      */
     activate: function(e) {
-      if (this.forceOnlineSignin) {
+      if (this.isAuthTypeOnlineSignIn) {
         this.showSigninUI();
-      } else if (!this.passwordElement.value) {
-        return false;
-      } else {
+      } else if (this.isAuthTypeUserClick) {
+        Oobe.disableSigninUI();
+        chrome.send('authenticateUser',
+                    [this.user.username, '']);

[Nikita (slow), 2014/02/20 15:12:18]

nit: Fits on a single line?

[Tim Song, 2014/02/20 22:14:01]

Done.

+      } else if (this.isAuthTypePassword) {
+        if (!this.passwordElement.value)
+          return false;
         Oobe.disableSigninUI();
         chrome.send('authenticateUser',
                     [this.user.username, this.passwordElement.value]);
+      } else {
+        console.error('Activating user pod with invalid authentication type: ' +
+            this.authType);
       }
 
       return true;
     },
 
     showSupervisedUserSigninWarning: function() {
       // Locally managed user token has been invalidated.
       // Make sure that pod is focused i.e. "Sign in" button is seen.
       this.parentNode.focusPod(this);
 
@@ skipping 149 matching lines @@
     },
 
     /**
      * Handles click event on a user pod.
      * @param {Event} e Click event.
      */
     handleClickOnPod_: function(e) {
       if (this.parentNode.disabled)
         return;
 
-      if (this.forceOnlineSignin && !this.isActionBoxMenuActive) {
-        this.showSigninUI();
+      if (!this.isActionBoxMenuActive) {
+        if (this.isAuthTypeOnlineSignIn) {
+          this.showSigninUI();
+        } else if (this.isAuthTypeUserClick) {
+          this.parentNode.setActivatedPod(this);
+        }
+
         // Prevent default so that we don't trigger 'focus' event.
         e.preventDefault();
       }
     },
 
     /**
+     * Handles keydown event for a user pod.
+     * @param {Event} e Key event.
+     */
+    handlePodKeyDown_: function(e) {
+      if (!this.isAuthTypeUserClick || this.disabled)
+        return;
+      switch (e.keyIdentifier) {
+        case 'Enter':
+        case 'U+0020':  // Space
+          if (this.parentNode.isFocused(this))
+            this.parentNode.setActivatedPod(this);
+          break;
+      }
+    },
+
+    /**
      * Called when the custom button is clicked.
      */
     handleCustomButtonClick_: function() {
       chrome.send('customButtonClicked', [this.user.username]);
     }
   };
 
   /**
    * Creates a public account user pod.
    * @constructor
@@ skipping 47 matching lines @@
 
         // Accessibility focus indicator does not move with the focused
         // element. Sends a 'focus' event on the currently focused element
         // so that accessibility focus indicator updates its location.
         if (document.activeElement)
           document.activeElement.dispatchEvent(new Event('focus'));
       });
     },
 
     /** @override */
-    get forceOnlineSignin() {
-      return false;
-    },
-
-    /** @override */
     get mainInput() {
       if (this.expanded)
         return this.enterButtonElement;
       else
         return this.nameElement;
     },
 
     /** @override */
     decorate: function() {
       UserPod.prototype.decorate.call(this);
@@ skipping 20 matching lines @@
       learnMore = this.querySelector('.side-pane-learn-more');
       learnMore.addEventListener('click', this.handleLearnMoreEvent);
       learnMore.addEventListener('keydown', this.handleLearnMoreEvent);
 
       this.enterButtonElement.addEventListener('click', (function(e) {
         this.enterButtonElement.disabled = true;
         chrome.send('launchPublicAccount', [this.user.username]);
       }).bind(this));
     },
 
-    /**
-     * Updates the user pod element.
-     */
+    /** @override **/
     update: function() {
       UserPod.prototype.update.call(this);
       this.querySelector('.side-pane-name').textContent =
           this.user_.displayName;
       this.querySelector('.info').textContent =
           loadTimeData.getStringF('publicAccountInfoFormat',
                                   this.user_.enterpriseDomain);
     },
 
     /** @override */
@@ skipping 585 matching lines @@
      * @param {string} iconURL URL of the button icon
      */
     showUserPodButton: function(username, iconURL) {
       var pod = this.getPodWithUsername_(username);
       if (pod == null) {
         console.error('Unable to show user pod button for ' + username +
                       ': user pod not found.');
         return;
       }
 
-      pod.customButton.hidden = false;
+      pod.customButtonElement.hidden = false;
       var icon =
-          pod.customButton.querySelector('.custom-button-icon');
+          pod.customButtonElement.querySelector('.custom-button-icon');
       icon.src = iconURL;
     },
 
     /**
+     * Hides button from user pod added by showUserPodButton().
+     * @param {string} username Username of pod to remove button
+     */
+    hideUserPodButton: function(username) {
+      var pod = this.getPodWithUsername_(username);
+      if (pod == null) {
+        console.error('Unable to hide user pod button for ' + username +
+                      ': user pod not found.');
+        return;
+      }
+
+      pod.customButtonElement.hidden = true;
+    },
+
+    /**
+     * Sets the authentication type used to authenticate the user.
+     * @param {string} username Username of selected user
+     * @param {number} authType Authentication type, must be one of the
+     *                          values listed in AUTH_TYPE enum.
+     * @param {string} value The initial value to use for authentication.
+     */
+    setAuthType: function(username, authType, value) {
+      var pod = this.getPodWithUsername_(username);
+      if (pod == null) {
+        console.error('Unable to set auth type for ' + username +
+                      ': user pod not found.');
+        return;
+      }
+      pod.setAuthType(authType, value);
+    },
+
+    /**
      * Called when window was resized.
      */
     onWindowResize: function() {
       var layout = this.calculateLayout_();
       if (layout.columns != this.columns || layout.rows != this.rows)
         this.placePods_();
     },
 
     /**
      * Returns width of podrow having |columns| number of columns.
@@ skipping 267 matching lines @@
      * Updates current image of a user.
      * @param {string} username User for which to update the image.
      */
     updateUserImage: function(username) {
       var pod = this.getPodWithUsername_(username);
       if (pod)
         pod.updateUserImage();
     },
 
     /**
-     * Indicates that the given user must authenticate against GAIA during the
-     * next sign-in.
-     * @param {string} username User for whom to enforce GAIA sign-in.
-     */
-    forceOnlineSigninForUser: function(username) {
-      var pod = this.getPodWithUsername_(username);
-      if (pod) {
-        pod.user.forceOnlineSignin = true;
-        pod.update();
-      } else {
-        console.log('Failed to update GAIA state for: ' + username);
-      }
-    },
-
-    /**
      * Handler of click event.
      * @param {Event} e Click Event object.
      * @private
      */
     handleClick_: function(e) {
       if (this.disabled)
         return;
 
       // Clear all menus if the click is outside pod menu and its
       // button area.
@@ skipping 201 matching lines @@
       if (this.podsWithPendingImages_.length == 0) {
         this.classList.remove('images-loading');
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });