ui/login/account_picker/screen_account_picker.js

   1 // Copyright 2014 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 Account picker screen implementation.
   7  */
   8
   9 login.createScreen('AccountPickerScreen', 'account-picker', function() {
  10   /**
  11    * Maximum number of offline login failures before online login.
  12    * @type {number}
  13    * @const
  14    */
  15   var MAX_LOGIN_ATTEMPTS_IN_POD = 3;
  16
  17   return {
  18     EXTERNAL_API: [
  19       'loadUsers',
  20       'runAppForTesting',
  21       'setApps',
  22       'setShouldShowApps',
  23       'showAppError',
  24       'updateUserImage',
  25       'setCapsLockState',
  26       'forceLockedUserPodFocus',
  27       'removeUser',
  28       'showBannerMessage',
  29       'showUserPodCustomIcon',
  30       'hideUserPodCustomIcon',
  31       'setAuthType',
  32       'setTouchViewState',
  33       'setPublicSessionDisplayName',
  34       'setPublicSessionLocales',
  35       'setPublicSessionKeyboardLayouts',
  36     ],
  37
  38     preferredWidth_: 0,
  39     preferredHeight_: 0,
  40
  41     // Whether this screen is shown for the first time.
  42     firstShown_: true,
  43
  44     // Whether this screen is currently being shown.
  45     showing_: false,
  46
  47     /** @override */
  48     decorate: function() {
  49       login.PodRow.decorate($('pod-row'));
  50     },
  51
  52     /** @override */
  53     getPreferredSize: function() {
  54       return {width: this.preferredWidth_, height: this.preferredHeight_};
  55     },
  56
  57     /** @override */
  58     onWindowResize: function() {
  59       $('pod-row').onWindowResize();
  60
  61       // Reposition the error bubble, if it is showing. Since we are just
  62       // moving the bubble, the number of login attempts tried doesn't matter.
  63       var errorBubble = $('bubble');
  64       if (errorBubble && !errorBubble.hidden)
  65         this.showErrorBubble(0, undefined  /* Reuses the existing message. */);
  66     },
  67
  68     /**
  69      * Sets preferred size for account picker screen.
  70      */
  71     setPreferredSize: function(width, height) {
  72       this.preferredWidth_ = width;
  73       this.preferredHeight_ = height;
  74     },
  75
  76     /**
  77      * When the account picker is being used to lock the screen, pressing the
  78      * exit accelerator key will sign out the active user as it would when
  79      * they are signed in.
  80      */
  81     exit: function() {
  82       // Check and disable the sign out button so that we can never have two
  83       // sign out requests generated in a row.
  84       if ($('pod-row').lockedPod && !$('sign-out-user-button').disabled) {
  85         $('sign-out-user-button').disabled = true;
  86         chrome.send('signOutUser');
  87       }
  88     },
  89
  90     /* Cancel user adding if ESC was pressed.
  91      */
  92     cancel: function() {
  93       if (Oobe.getInstance().displayType == DISPLAY_TYPE.USER_ADDING)
  94         chrome.send('cancelUserAdding');
  95     },
  96
  97     /**
  98      * Event handler that is invoked just after the frame is shown.
  99      * @param {string} data Screen init payload.
 100      */
 101     onAfterShow: function(data) {
 102       $('pod-row').handleAfterShow();
 103     },
 104
 105     /**
 106      * Event handler that is invoked just before the frame is shown.
 107      * @param {string} data Screen init payload.
 108      */
 109     onBeforeShow: function(data) {
 110       this.showing_ = true;
 111       chrome.send('loginUIStateChanged', ['account-picker', true]);
 112       $('login-header-bar').signinUIState = SIGNIN_UI_STATE.ACCOUNT_PICKER;
 113       chrome.send('hideCaptivePortal');
 114       var podRow = $('pod-row');
 115       podRow.handleBeforeShow();
 116
 117       // In case of the preselected pod onShow will be called once pod
 118       // receives focus.
 119       if (!podRow.preselectedPod)
 120         this.onShow();
 121     },
 122
 123     /**
 124      * Event handler invoked when the page is shown and ready.
 125      */
 126     onShow: function() {
 127       if (!this.showing_) {
 128         // This method may be called asynchronously when the pod row finishes
 129         // initializing. However, at that point, the screen may have been hidden
 130         // again already. If that happens, ignore the onShow() call.
 131         return;
 132       }
 133       chrome.send('getTouchViewState');
 134       if (!this.firstShown_) return;
 135       this.firstShown_ = false;
 136
 137       // Ensure that login is actually visible.
 138       window.requestAnimationFrame(function() {
 139         chrome.send('accountPickerReady');
 140         chrome.send('loginVisible', ['account-picker']);
 141       });
 142     },
 143
 144     /**
 145      * Event handler that is invoked just before the frame is hidden.
 146      */
 147     onBeforeHide: function() {
 148       this.showing_ = false;
 149       chrome.send('loginUIStateChanged', ['account-picker', false]);
 150       $('login-header-bar').signinUIState = SIGNIN_UI_STATE.HIDDEN;
 151       $('pod-row').handleHide();
 152     },
 153
 154     /**
 155      * Shows sign-in error bubble.
 156      * @param {number} loginAttempts Number of login attemps tried.
 157      * @param {HTMLElement} content Content to show in bubble.
 158      */
 159     showErrorBubble: function(loginAttempts, error) {
 160       var activatedPod = $('pod-row').activatedPod;
 161       if (!activatedPod) {
 162         $('bubble').showContentForElement($('pod-row'),
 163                                           cr.ui.Bubble.Attachment.RIGHT,
 164                                           error);
 165         return;
 166       }
 167       // Show web authentication if this is not a supervised user.
 168       if (loginAttempts > MAX_LOGIN_ATTEMPTS_IN_POD &&
 169           !activatedPod.user.supervisedUser) {
 170         activatedPod.showSigninUI();
 171       } else {
 172         // We want bubble's arrow to point to the first letter of input.
 173         /** @const */ var BUBBLE_OFFSET = 7;
 174         /** @const */ var BUBBLE_PADDING = 4;
 175         $('bubble').showContentForElement(activatedPod.mainInput,
 176                                           cr.ui.Bubble.Attachment.BOTTOM,
 177                                           error,
 178                                           BUBBLE_OFFSET, BUBBLE_PADDING);
 179         // Move error bubble up if it overlaps the shelf.
 180         var maxHeight =
 181             cr.ui.LoginUITools.getMaxHeightBeforeShelfOverlapping($('bubble'));
 182         if (maxHeight < $('bubble').offsetHeight) {
 183           $('bubble').showContentForElement(activatedPod.mainInput,
 184                                             cr.ui.Bubble.Attachment.TOP,
 185                                             error,
 186                                             BUBBLE_OFFSET, BUBBLE_PADDING);
 187         }
 188       }
 189     },
 190
 191     /**
 192      * Loads given users in pod row.
 193      * @param {array} users Array of user.
 194      * @param {boolean} showGuest Whether to show guest session button.
 195      */
 196     loadUsers: function(users, showGuest) {
 197       $('pod-row').loadPods(users);
 198       $('login-header-bar').showGuestButton = showGuest;
 199     },
 200
 201     /**
 202      * Runs app with a given id from the list of loaded apps.
 203      * @param {!string} app_id of an app to run.
 204      * @param {boolean=} opt_diagnostic_mode Whether to run the app in
 205      *     diagnostic mode.  Default is false.
 206      */
 207     runAppForTesting: function(app_id, opt_diagnostic_mode) {
 208       $('pod-row').findAndRunAppForTesting(app_id, opt_diagnostic_mode);
 209     },
 210
 211     /**
 212      * Adds given apps to the pod row.
 213      * @param {array} apps Array of apps.
 214      */
 215     setApps: function(apps) {
 216       $('pod-row').setApps(apps);
 217     },
 218
 219     /**
 220      * Sets the flag of whether app pods should be visible.
 221      * @param {boolean} shouldShowApps Whether to show app pods.
 222      */
 223     setShouldShowApps: function(shouldShowApps) {
 224       $('pod-row').setShouldShowApps(shouldShowApps);
 225     },
 226
 227     /**
 228      * Shows the given kiosk app error message.
 229      * @param {!string} message Error message to show.
 230      */
 231     showAppError: function(message) {
 232       // TODO(nkostylev): Figure out a way to show kiosk app launch error
 233       // pointing to the kiosk app pod.
 234       /** @const */ var BUBBLE_PADDING = 12;
 235       $('bubble').showTextForElement($('pod-row'),
 236                                      message,
 237                                      cr.ui.Bubble.Attachment.BOTTOM,
 238                                      $('pod-row').offsetWidth / 2,
 239                                      BUBBLE_PADDING);
 240     },
 241
 242     /**
 243      * Updates current image of a user.
 244      * @param {string} username User for which to update the image.
 245      */
 246     updateUserImage: function(username) {
 247       $('pod-row').updateUserImage(username);
 248     },
 249
 250     /**
 251      * Updates Caps Lock state (for Caps Lock hint in password input field).
 252      * @param {boolean} enabled Whether Caps Lock is on.
 253      */
 254     setCapsLockState: function(enabled) {
 255       $('pod-row').classList.toggle('capslock-on', enabled);
 256     },
 257
 258     /**
 259      * Enforces focus on user pod of locked user.
 260      */
 261     forceLockedUserPodFocus: function() {
 262       var row = $('pod-row');
 263       if (row.lockedPod)
 264         row.focusPod(row.lockedPod, true);
 265     },
 266
 267     /**
 268      * Remove given user from pod row if it is there.
 269      * @param {string} user name.
 270      */
 271     removeUser: function(username) {
 272       $('pod-row').removeUserPod(username);
 273     },
 274
 275     /**
 276      * Displays a banner containing |message|. If the banner is already present
 277      * this function updates the message in the banner. This function is used
 278      * by the chrome.screenlockPrivate.showMessage API.
 279      * @param {string} message Text to be displayed
 280      */
 281     showBannerMessage: function(message) {
 282       var banner = $('signin-banner');
 283       banner.textContent = message;
 284       banner.classList.toggle('message-set', true);
 285     },
 286
 287     /**
 288      * Shows a custom icon in the user pod of |username|. This function
 289      * is used by the chrome.screenlockPrivate API.
 290      * @param {string} username Username of pod to add button
 291      * @param {!{id: !string,
 292      *           hardlockOnClick: boolean,
 293      *           isTrialRun: boolean,
 294      *           tooltip: ({text: string, autoshow: boolean} | undefined)}} icon
 295      *     The icon parameters.
 296      */
 297     showUserPodCustomIcon: function(username, icon) {
 298       $('pod-row').showUserPodCustomIcon(username, icon);
 299     },
 300
 301     /**
 302      * Hides the custom icon in the user pod of |username| added by
 303      * showUserPodCustomIcon(). This function is used by the
 304      * chrome.screenlockPrivate API.
 305      * @param {string} username Username of pod to remove button
 306      */
 307     hideUserPodCustomIcon: function(username) {
 308       $('pod-row').hideUserPodCustomIcon(username);
 309     },
 310
 311     /**
 312      * Sets the authentication type used to authenticate the user.
 313      * @param {string} username Username of selected user
 314      * @param {number} authType Authentication type, must be a valid value in
 315      *                          the AUTH_TYPE enum in user_pod_row.js.
 316      * @param {string} value The initial value to use for authentication.
 317      */
 318     setAuthType: function(username, authType, value) {
 319       $('pod-row').setAuthType(username, authType, value);
 320     },
 321
 322     /**
 323      * Sets the state of touch view mode.
 324      * @param {boolean} isTouchViewEnabled true if the mode is on.
 325      */
 326     setTouchViewState: function(isTouchViewEnabled) {
 327       $('pod-row').setTouchViewState(isTouchViewEnabled);
 328     },
 329
 330     /**
 331      * Updates the display name shown on a public session pod.
 332      * @param {string} userID The user ID of the public session
 333      * @param {string} displayName The new display name
 334      */
 335     setPublicSessionDisplayName: function(userID, displayName) {
 336       $('pod-row').setPublicSessionDisplayName(userID, displayName);
 337     },
 338
 339     /**
 340      * Updates the list of locales available for a public session.
 341      * @param {string} userID The user ID of the public session
 342      * @param {!Object} locales The list of available locales
 343      * @param {string} defaultLocale The locale to select by default
 344      * @param {boolean} multipleRecommendedLocales Whether |locales| contains
 345      *     two or more recommended locales
 346      */
 347     setPublicSessionLocales: function(userID,
 348                                       locales,
 349                                       defaultLocale,
 350                                       multipleRecommendedLocales) {
 351       $('pod-row').setPublicSessionLocales(userID,
 352                                            locales,
 353                                            defaultLocale,
 354                                            multipleRecommendedLocales);
 355     },
 356
 357     /**
 358      * Updates the list of available keyboard layouts for a public session pod.
 359      * @param {string} userID The user ID of the public session
 360      * @param {string} locale The locale to which this list of keyboard layouts
 361      *     applies
 362      * @param {!Object} list List of available keyboard layouts
 363      */
 364     setPublicSessionKeyboardLayouts: function(userID, locale, list) {
 365       $('pod-row').setPublicSessionKeyboardLayouts(userID, locale, list);
 366     }
 367   };
 368 });