Submit button added to 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 739 matching lines @@
     /**
      * 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.passwordElement.addEventListener('input',
           this.handleInputChanged_.bind(this));
+      this.submitButton.addEventListener('click',
+          this.handleSubmitButtonClick_.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);
 
       this.userClickAuthAllowed_ = false;
+
+      // Lazy load the assets needed for the polymer submit button.
+      if (!cr.ui.login.ResourceLoader.alreadyLoadedAssets(
+          'custom-elements-user-pod')) {
+        cr.ui.login.ResourceLoader.registerAssets({
+            id: 'custom-elements-user-pod',
+            html: [{ url: 'chrome://oobe/custom_elements_user_pod.html' }]
+         });
+        cr.ui.login.ResourceLoader.loadAssetsOnIdle('custom-elements-user-pod');
+      }
     },
 
     /**
      * 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;
     },
 
     /**
      * 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.
       if (e.keyCode == 9) {
         e.preventDefault();
         return;
       }
       this.customIconElement.cancelDelayedTooltipShow();
     },
 
     /**
+     * Handles a click event on submit button.
+     * @param {Event} e Click event.
+     */
+    handleSubmitButtonClick_: function(e) {
+      this.parentNode.setActivatedPod(this, e);
+    },
+
+    /**
      * Top edge margin number of pixels.
      * @type {?number}
      */
     set top(top) {
       this.style.top = cr.ui.toCssPx(top);
     },
 
     /**
      * Top edge margin number of pixels.
      */
@@ skipping 57 matching lines @@
 
     /**
      * Gets password field.
      * @type {!HTMLInputElement}
      */
     get passwordElement() {
       return this.querySelector('.password');
     },
 
     /**
+     * Gets submit button.
+     * @type {!HTMLInputElement}
+     */
+    get submitButton() {
+      return this.querySelector('.submit-button');
+    },
+
+    /**
      * 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');
     },
 
     get pinContainer() {
       return this.querySelector('.pin-container');
@@ skipping 213 matching lines @@
           this.querySelector('.mp-policy-not-allowed-msg').hidden = false;
       } else if (this.user_.isApp) {
         this.setUserPodIconType('app');
       }
     },
 
     isPinReady: function() {
       return this.pinKeyboard && this.pinKeyboard.offsetHeight > 0;
     },
 
+    setErrorDisplay: function(visible) {

[jdufault, 2016/08/30 21:02:27]

toggleDisplayError?
toggleErrorShown?
setErrorShown?

What about using a set function, ie,

  this.showError = false
  this.showError = true

[sammiequon, 2016/08/30 22:28:27]

Done.

+      this.submitButton.classList.toggle('error-shown', visible);
+    },
+
     toggleTransitions: function(enable) {
       this.classList.toggle('flying-pin-pod', enable);
     },
 
     updatePinClass_: function(element, enable) {
       element.classList.toggle('pin-enabled', enable);
       element.classList.toggle('pin-disabled', !enable);
     },
 
     setPinVisibility: function(visible) {
@@ skipping 707 matching lines @@
         this.parentNode.setActivatedPod(this);
     },
 
     handlePinChanged_: function(e) {
       this.passwordElement.value = e.detail.pin;
     },
 
     handleInputChanged_: function(e) {
       if (this.pinKeyboard)
         this.pinKeyboard.value = this.passwordElement.value;
+      this.submitButton.disabled = this.passwordElement.value.length <= 0;
+      this.setErrorDisplay(false);
     },
 
     /**
      * Handles click event on a user pod.
      * @param {Event} e Click event.
      */
     handleClickOnPod_: function(e) {
       if (this.parentNode.disabled)
         return;
 
@@ skipping 754 matching lines @@
     /**
      * Add an existing user pod to this pod row.
      * @param {!Object} user User info dictionary.
      */
     addUserPod: function(user) {
       var userPod = this.createUserPod(user);
       this.appendChild(userPod);
       userPod.initialize();
     },
 
+    /**
+     * Enables or disables transitions on the user pod.
+     * @param {boolean} enable
+     */
     togglePinTransitions: function(enable) {
       for (var i = 0; i < this.pods.length; ++i)
         this.pods[i].toggleTransitions(enable);
     },
 
+    /**
+     * Performs visual changes on the user pod if there is an error.
+     * @param {boolean} visible Whether to show or hide the display.
+     */
+    setFocusedPodErrorDisplay: function(visible) {
+      if (this.focusedPod_)
+        this.focusedPod_.setErrorDisplay(visible);
+    },
+
+    /**
+     * Shows or hides the pin keyboard for the current focused pod.
+     * @param {boolean} visible
+     */
     setFocusedPodPinVisibility: function(visible) {
       if (this.focusedPod_ && this.focusedPod_.user.showPin)
         this.focusedPod_.setPinVisibility(visible);
     },
 
     /**
      * Runs app with a given id from the list of loaded apps.
      * @param {!string} app_id of an app to run.
      * @param {boolean=} opt_diagnosticMode Whether to run the app in
      *     diagnostic mode. Default is false.
@@ skipping 346 matching lines @@
     /**
      * Called when window was resized.
      */
     onWindowResize: function() {
       var layout = this.calculateLayout_();
       if (layout.columns != this.columns || layout.rows != this.rows)
         this.placePods_();
 
       // Wrap this in a set timeout so the function is called after the pod is
       // finished transitioning so that we work with the final pod dimensions.
-      setTimeout(function(podrow) {
-        podrow.scrollFocusedPodIntoView();
-      }, 200, this);
+      setTimeout(function() {
+        this.scrollFocusedPodIntoView();
+      }.bind(this), 200);

[jdufault, 2016/08/30 21:02:26]

Where does 200 come from?

[sammiequon, 2016/08/30 22:28:27]

Done.

     },
 
     /**
      * Returns width of podrow having |columns| number of columns.
      * @private
      */
     columnsToWidth_: function(columns) {
       var isDesktopUserManager = Oobe.getInstance().displayType ==
           DISPLAY_TYPE.DESKTOP_USER_MANAGER;
       var margin = isDesktopUserManager ? DESKTOP_MARGIN_BY_COLUMNS[columns] :
@@ skipping 582 matching lines @@
        if (pod && pod.multiProfilesPolicyApplied) {
          pod.userTypeBubbleElement.classList.remove('bubble-shown');
        }
      }
   };
 
   return {
     PodRow: PodRow
   };
 });