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