Add fingerprint UI in user pod

ui/login/account_picker/user_pod_row.js

 // 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 User pod row implementation.
  */
 
 cr.define('login', function() {
   /**
@@ skipping 107 matching lines @@
    */
   var AUTH_TYPE_NAMES = {
     0: 'offlinePassword',
     1: 'onlineSignIn',
     2: 'numericPin',
     3: 'userClick',
     4: 'expandThenUserClick',
     5: 'forceOfflinePassword'
   };
 
+  /**
+   * Supported fingerprint unlock states.
+   * @enum {number}
+   * @const
+   */
+  var FINGERPRINT_STATES = {
+    DEFAULT: 0,
+    FINGERPRINT_SIGNIN: 1,
+    FINGERPRINT_FAILED: 2,
+  };
+
+  /**
+   * The fingerprint states to classes mapping.
+   * {@code state} properties indicate current fingerprint unlock state.
+   * {@code class} properties are CSS classes used to set the icons' background
+   * and password placeholder color.
+   * @const {Array<{type: !number, class: !string}>}
+   */
+  var FINGERPRINT_STATES_MAPPING = [
+    {state: 0, class: 'default'},

[jdufault, 2017/03/08 23:21:28]

fingerprintDefault? Or remove fingerprint prefix from other class names?

[xiaoyinh(OOO Sep 11-29), 2017/03/09 20:59:12]

Done.

+    {state: 1, class: 'fingerprintSignin'},
+    {state: 2, class: 'fingerprintFailed'}
+  ];
+
   // 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) if user pod custom icon is interactive, it has tab index 2 so it
   // follows the input.
   // (4) buttons on the header bar have tab index 3 so they follow the custom
   // icon, or user pod if custom icon is not interactive;
   // (5) Action box buttons have tab index 4 and follow header bar buttons;
@@ skipping 566 matching lines @@
 
     /**
      * Whether click on the pod can issue a user click auth attempt. The
      * attempt can be issued iff the pod was focused when the click
      * started (i.e. on mouse down event).
      * @type {boolean}
      * @private
      */
     userClickAuthAllowed_: false,
 
+    /**
+     * Whether the user has recently authencated with fingerprint.

[jdufault, 2017/03/08 23:21:27]

nit: authencated -> authenticated

[xiaoyinh(OOO Sep 11-29), 2017/03/09 20:59:12]

Done.

+     * @type {boolean}
+     * @private
+     */
+    fingerprintAuthenticated_: false,
+
     /** @override */
     decorate: function() {
       this.tabIndex = UserPodTabOrder.POD_INPUT;
       this.actionBoxAreaElement.tabIndex = UserPodTabOrder.POD_INPUT;
 
       this.addEventListener('keydown', this.handlePodKeyDown_.bind(this));
       this.addEventListener('click', this.handleClickOnPod_.bind(this));
       this.addEventListener('mousedown', this.handlePodMouseDown_.bind(this));
 
       if (this.pinKeyboard) {
@@ skipping 19 matching lines @@
           this.handleRemoveCommandClick_.bind(this));
       this.actionBoxMenuRemoveElement.addEventListener('keydown',
           this.handleRemoveCommandKeyDown_.bind(this));
       this.actionBoxMenuRemoveElement.addEventListener('blur',
           this.handleRemoveCommandBlur_.bind(this));
       this.actionBoxRemoveUserWarningButtonElement.addEventListener('click',
           this.handleRemoveUserConfirmationClick_.bind(this));
       this.actionBoxRemoveUserWarningButtonElement.addEventListener('keydown',
           this.handleRemoveUserConfirmationKeyDown_.bind(this));
 
+      if (this.fingerprintIconElement) {
+        this.fingerprintIconElement.addEventListener(
+            'mouseover', this.handleFingerprintIconMouseOver_.bind(this));
+        this.fingerprintIconElement.addEventListener(
+            'mouseout', this.handleFingerprintIconMouseOut_.bind(this));
+        this.fingerprintIconElement.addEventListener(
+            'mousedown', stopEventPropagation);
+        this.fingerprintIconElement.tabIndex = UserPodTabOrder.POD_CUSTOM_ICON;

[jdufault, 2017/03/08 23:21:27]

Does tabbing work properly when easy unlock and PIN are both shown?

[xiaoyinh(OOO Sep 11-29), 2017/03/09 20:59:12]

easy unlock seems to set the tabIndex only when the icon is interactive.
e.g. Click on the icon will hard lock the user pod.
Removing this line for fingerprint icon since we don't perform actions when
click on the icon.

+      }
+
       var customIcon = this.customIconElement;
       customIcon.parentNode.replaceChild(new UserPodCustomIcon(), customIcon);
     },
 
     /**
      * 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));
@@ skipping 326 matching lines @@
           'Passwords':
               this.querySelector('.action-box-remove-user-warning-passwords'),
           'Bookmarks':
               this.querySelector('.action-box-remove-user-warning-bookmarks'),
           'Settings':
               this.querySelector('.action-box-remove-user-warning-settings')
       }
     },
 
     /**
+     * Gets the fingerprint icon area.
+     * @type {!HTMLDivElement}
+     */
+    get fingerprintIconElement() {
+      return this.querySelector('.fingerprint-icon-container');
+    },
+
+    /**
      * 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.reauthNameHintElement.textContent = this.user_.displayName;
       this.classList.toggle('signed-in', this.user_.signedIn);
 
@@ skipping 100 matching lines @@
 
     isPinShown: function() {
       return this.classList.contains('pin-enabled');
     },
 
     setUserPodIconType: function(userTypeClass) {
       this.userTypeIconAreaElement.classList.add(userTypeClass);
       this.userTypeIconAreaElement.hidden = false;
     },
 
+    isFingerprintIconShown: function() {
+      return this.fingerprintIconElement && !this.fingerprintIconElement.hidden;
+    },
+
     /**
      * The user that this pod represents.
      * @type {!Object}
      */
     user_: undefined,
     get user() {
       return this.user_;
     },
     set user(userDict) {
       this.user_ = userDict;
@@ skipping 176 matching lines @@
      * @return {boolean} True if activated successfully.
      */
     activate: function(e) {
       if (this.isAuthTypeOnlineSignIn) {
         this.showSigninUI();
       } else if (this.isAuthTypeUserClick) {
         Oobe.disableSigninUI();
         this.classList.toggle('signing-in', true);
         chrome.send('attemptUnlock', [this.user.username]);
       } else if (this.isAuthTypePassword) {
+        if (this.fingerprintAuthenticated_) {
+          this.fingerprintAuthenticated_ = false;
+          return true;
+        }
         var pinValue = this.pinKeyboard ? this.pinKeyboard.value : '';
         var password = this.passwordElement.value || pinValue;
         if (!password)
           return false;
         Oobe.disableSigninUI();
         chrome.send('authenticateUser', [this.user.username, password,
                                          this.isPinShown()]);
       } else {
         console.error('Activating user pod with invalid authentication type: ' +
             this.authType);
@@ skipping 390 matching lines @@
      */
     handleRemoveUserConfirmationClick_: function(e) {
       if (this.isActionBoxMenuActive) {
         this.isActionBoxMenuActive = false;
         this.removeUser(this.user);
         e.stopPropagation();
       }
     },
 
     /**
+     * Handles mouseover event on fingerprint icon.
+     * @param {Event} e MouseOver event.
+     */
+    handleFingerprintIconMouseOver_: function(e) {
+      var bubbleContent = document.createElement('div');
+      bubbleContent.textContent =
+          loadTimeData.getString('fingerprintIconMessage');
+      this.passwordElement.placeholder =
+          loadTimeData.getString('fingerprintHint');
+
+      /** @const */ var BUBBLE_OFFSET = 25;
+      /** @const */ var BUBBLE_PADDING = -8;
+      var attachment = this.isPinShown() ? cr.ui.Bubble.Attachment.RIGHT :
+                                           cr.ui.Bubble.Attachment.BOTTOM;
+      var bubbleAnchor = this;
+      if (this.isPinShown())
+        bubbleAnchor = (this.getElementsByClassName('auth-container'))[0];
+      $('bubble').showContentForElement(
+          bubbleAnchor, attachment, bubbleContent, BUBBLE_OFFSET,
+          BUBBLE_PADDING, true);
+    },
+
+    /**
+     * Handles mouseout event on fingerprint icon.
+     * @param {Event} e MouseOut event.
+     */
+    handleFingerprintIconMouseOut_: function(e) {
+      if(this.isPinShown()) {
+        $('bubble').hideForElement(
+            (this.getElementsByClassName('auth-container'))[0]);
+      } else {
+        $('bubble').hideForElement(this);
+      }
+      this.passwordElement.placeholder = loadTimeData.getString(
+          this.isPinShown() ? 'pinKeyboardPlaceholderPinPassword' :
+                              'passwordHint');
+    },
+
+    /**
      * Handles a keydown event on remove user confirmation button.
      * @param {Event} e KeyDown event.
      */
     handleRemoveUserConfirmationKeyDown_: function(e) {
       if (!this.isActionBoxMenuActive)
         return;
 
       // Only handle pressing 'Enter' or 'Space', and let all other events
       // bubble to the action box menu.
       if (e.key == 'Enter' || e.key == ' ') {
@@ skipping 57 matching lines @@
      */
     handlePodMouseDown_: function(e) {
       this.userClickAuthAllowed_ = this.parentNode.isFocused(this);
     },
 
     /**
      * Called when the input of the password element changes. Updates the submit
      * button color and state and hides the error popup bubble.
      */
     updateInput_: function() {
-      if (this.submitButton)
+      if (this.submitButton) {
         this.submitButton.disabled = this.passwordElement.value.length <= 0;

[jdufault, 2017/03/08 23:21:27]

Since you're here, can you change these <= to just ==?

[xiaoyinh(OOO Sep 11-29), 2017/03/09 20:59:12]

Done.

+        if (this.isFingerprintIconShown()) {
+          this.submitButton.hidden = this.passwordElement.value.length <= 0;
+        } else {
+          this.submitButton.hidden = false;
+        }
+      }
       this.showError = false;
       $('bubble').hide();
     },
 
     /**
      * Handles input event on the password element.
      * @param {Event} e Input event.
      */
     handleInputChanged_: function(e) {
       this.updateInput_();
@@ skipping 1080 matching lines @@
         pod.customIconElement.setAriaLabel(ariaLabel);
       else
         console.warn('No ARIA label for user pod custom icon.');
 
       pod.customIconElement.show();
 
       // This has to be called after |show| in case the tooltip should be shown
       // immediatelly.
       pod.customIconElement.setTooltip(
           icon.tooltip || {text: '', autoshow: false});
+
+      // Hide fingerprint icon when custom icon is shown.
+      this.setUserPodFingerprintIcon(false, username);

[jdufault, 2017/03/08 23:21:27]

Looks like you're missing the third 'state' parameter here.

[jdufault, 2017/03/08 23:21:28]

Please annotate the false parameter, ie, false /*visible*/

[xiaoyinh(OOO Sep 11-29), 2017/03/09 20:59:12]

Done.

[xiaoyinh(OOO Sep 11-29), 2017/03/09 20:59:12]

I've consolidate 'visible' with 'state'.

     },
 
     /**
      * Hard-locks user pod for the user. If user pod is hard-locked, it can be
      * only unlocked using password, and the authentication type cannot be
      * changed.
      * @param {!string} username The user's username.
      * @private
      */
     hardlockUserPod_: function(username) {
@@ skipping 16 matching lines @@
      */
     hideUserPodCustomIcon: function(username) {
       var pod = this.getPodWithUsername_(username);
       if (pod == null) {
         console.error('Unable to hide user pod button: user pod not found.');
         return;
       }
 
       // TODO(tengs): Allow option for a fading transition.
       pod.customIconElement.hide();
+
+      // Show fingerprint icon if applicable.
+      this.setUserPodFingerprintIcon(
+          true, username, FINGERPRINT_STATES.DEFAULT);

[jdufault, 2017/03/08 23:21:27]

Please annotate true parameter, ie, true /*visible*/

[xiaoyinh(OOO Sep 11-29), 2017/03/09 20:59:12]

Done.

     },
 
     /**
+     * Set a fingerprint icon in the user pod of |username|.
+     * @param {boolean} visible Set visiblity of the fingerprint icon
+     * @param {string} username Username of the selected user
+     * @param {number} state Fingerprint unlock state
+     */
+    setUserPodFingerprintIcon: function(visible, username, state) {

[jdufault, 2017/03/08 23:21:27]

Instead of having |visible| and |state| be separate, there could be a HIDDEN
state. Though that might mess up some of the state mapping logic you have. Up to
you.

[xiaoyinh(OOO Sep 11-29), 2017/03/09 20:59:12]

Thanks. I added a hidden class to map with hidden state, let me know if this
makes sense.

+      var pod = this.getPodWithUsername_(username);
+      if (pod == null) {
+        console.error(
+            'Unable to set user pod fingerprint icon: user pod not found.');
+        return;
+      }
+      pod.fingerprintAuthenticated_ = false;
+      if (!pod.fingerprintIconElement)
+        return;
+      if (!pod.user.allowFingerprint || !visible ||
+          !pod.customIconElement.hidden) {
+        pod.fingerprintIconElement.hidden = true;
+        pod.submitButton.hidden = false;
+        return;
+      }
+
+      FINGERPRINT_STATES_MAPPING.forEach(function(icon) {
+          pod.fingerprintIconElement.classList.toggle(
+              icon.class, state == icon.state);
+      });
+      pod.fingerprintIconElement.setAttribute(
+          'aria-label', loadTimeData.getString('fingerprintIconMessage'));
+      pod.fingerprintIconElement.hidden = false;
+      pod.submitButton.hidden = pod.passwordElement.value.length <= 0;
+      this.updatePasswordField_(pod, state);
+      if (state == FINGERPRINT_STATES.DEFAULT)
+        return;
+
+      pod.fingerprintAuthenticated_ = true;
+      this.setActivatedPod(pod);
+      if (state == FINGERPRINT_STATES.FINGERPRINT_FAILED) {
+        /** @const */ var RESET_ICON_TIMEOUT_MS = 500;
+        setTimeout(
+            this.resetIconAndPasswordField_.bind(this, pod),
+            RESET_ICON_TIMEOUT_MS);
+      }
+    },
+
+    /**
+     * Reset the fingerprint icon and password field.
+     * @param {UserPod} pod Pod to reset.
+     */
+    resetIconAndPasswordField_:function(pod) {
+      if (!pod.fingerprintIconElement)
+        return;
+      this.setUserPodFingerprintIcon(
+          true, pod.user.username, FINGERPRINT_STATES.DEFAULT);
+    },
+
+    /**
+     * Remove the fingerprint icon in the user pod.
+     * @param {string} username Username of the selected user
+     */
+    removeUserPodFingerprintIcon: function(username) {
+      var pod = this.getPodWithUsername_(username);
+      if (pod == null) {
+        console.error(
+            'Unable to remove user pod fingerprint icon: user pod not found.');
+        return;
+      }
+      this.resetIconAndPasswordField_(pod);
+      if (pod.fingerprintIconElement)

[jdufault, 2017/03/08 23:21:27]

nit: {}

[xiaoyinh(OOO Sep 11-29), 2017/03/09 20:59:11]

Done.

+        pod.fingerprintIconElement.parentNode.removeChild(
+            pod.fingerprintIconElement);
+      pod.submitButton.hidden = false;
+    },
+
+    /**
+     * Updates the password field in the user pod.
+     * @param {UserPod} pod Pod to update.
+     * @param {number} state Fingerprint unlock state
+     */
+    updatePasswordField_: function(pod, state) {
+      FINGERPRINT_STATES_MAPPING.forEach(function(item) {
+        pod.passwordElement.classList.toggle(item.class, state == item.state);
+      });
+      var placeholderStr = loadTimeData.getString(
+          pod.isPinShown() ? 'pinKeyboardPlaceholderPinPassword' :
+                             'passwordHint');
+      if (state == FINGERPRINT_STATES.FINGERPRINT_SIGNIN) {

[jdufault, 2017/03/08 23:21:27]

There are only two ifs here so it is probably not worth doing, but you could
create a mapping from state -> string id, then do

  mapping = {
      FINGERPRINT_STATES.FINGERPRINT_FAILED: 'fingerprintSigninFailed',
      ...
    };
  placeholderStr = loadTimeData.getString(mapping[state]);

[xiaoyinh(OOO Sep 11-29), 2017/03/09 20:59:12]

Thanks for the suggestion. I will create the mapping when there's more states.
Mind if I leave it like this for now?

[jdufault, 2017/03/09 21:11:25]

Yep, as-is is good - with only two elements it's not worth the overhead.

+        placeholderStr = loadTimeData.getString('fingerprintSigningin');
+      } else if (state == FINGERPRINT_STATES.FINGERPRINT_FAILED) {
+        placeholderStr = loadTimeData.getString('fingerprintSigninFailed');
+      }
+      pod.passwordElement.placeholder = placeholderStr;
+    },
+
+    /**
      * 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: user pod not found.');
@@ skipping 248 matching lines @@
       this.insideFocusPod_ = true;
 
       for (var i = 0, pod; pod = this.pods[i]; ++i) {
         if (!this.alwaysFocusSinglePod) {
           pod.isActionBoxMenuActive = false;
         }
         if (pod != podToFocus) {
           pod.isActionBoxMenuHovered = false;
           pod.classList.remove('focused');
           pod.setPinVisibility(false);
+          this.setUserPodFingerprintIcon(false, pod.user.username);

[jdufault, 2017/03/08 23:21:27]

Annotate false parameter

[xiaoyinh(OOO Sep 11-29), 2017/03/09 20:59:12]

Done.

           // On Desktop, the faded style is not set correctly, so we should
           // manually fade out non-focused pods if there is a focused pod.
           if (pod.user.isDesktopUser && podToFocus)
             pod.classList.add('faded');
           else
             pod.classList.remove('faded');
           pod.reset(false);
         }
       }
 
@@ skipping 19 matching lines @@
           // is false, it doesn't focus on the password input box by default.
           podToFocus.focus();
         }
 
         // focusPod() automatically loads wallpaper
         if (!podToFocus.user.isApp)
           chrome.send('focusPod', [podToFocus.user.username]);
         this.firstShown_ = false;
         this.lastFocusedPod_ = podToFocus;
         this.scrollFocusedPodIntoView();
+        this.setUserPodFingerprintIcon(
+            true, podToFocus.user.username, FINGERPRINT_STATES.DEFAULT);

[jdufault, 2017/03/08 23:21:27]

Annotate true parameter

[xiaoyinh(OOO Sep 11-29), 2017/03/09 20:59:12]

Done.

       } else {
         chrome.send('noPodFocused');
       }
       this.insideFocusPod_ = false;
     },
 
     /**
      * Resets wallpaper to the last active user's wallpaper, if any.
      */
     loadLastWallpaper: function() {
@@ skipping 371 matching lines @@
        if (pod && pod.multiProfilesPolicyApplied) {
          pod.userTypeBubbleElement.classList.remove('bubble-shown');
        }
      }
   };
 
   return {
     PodRow: PodRow
   };
 });