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