src/chrome/browser/resources/options/managed_user_import.js

   1 // Copyright 2013 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 cr.define('options', function() {
   6   var OptionsPage = options.OptionsPage;
   7   var ArrayDataModel = cr.ui.ArrayDataModel;
   8
   9   /**
  10    * ManagedUserImportOverlay class.
  11    * Encapsulated handling of the 'Import existing managed user' overlay page.
  12    * @constructor
  13    * @class
  14    */
  15   function ManagedUserImportOverlay() {
  16     var title = loadTimeData.getString('managedUserImportTitle');
  17     OptionsPage.call(this, 'managedUserImport',
  18                      title, 'managed-user-import');
  19   };
  20
  21   cr.addSingletonGetter(ManagedUserImportOverlay);
  22
  23   ManagedUserImportOverlay.prototype = {
  24     // Inherit from OptionsPage.
  25     __proto__: OptionsPage.prototype,
  26
  27     /** @override */
  28     canShowPage: function() {
  29       return !BrowserOptions.getCurrentProfile().isManaged;
  30     },
  31
  32     /**
  33      * Initialize the page.
  34      */
  35     initializePage: function() {
  36       // Call base class implementation to start preference initialization.
  37       OptionsPage.prototype.initializePage.call(this);
  38
  39       var managedUserList = $('managed-user-list');
  40       options.managedUserOptions.ManagedUserList.decorate(managedUserList);
  41
  42       var avatarGrid = $('select-avatar-grid');
  43       options.ProfilesIconGrid.decorate(avatarGrid);
  44       var avatarIcons = loadTimeData.getValue('avatarIcons');
  45       avatarGrid.dataModel = new ArrayDataModel(avatarIcons);
  46
  47       managedUserList.addEventListener('change', function(event) {
  48         var managedUser = managedUserList.selectedItem;
  49         if (!managedUser)
  50           return;
  51
  52         $('managed-user-import-ok').disabled =
  53             managedUserList.selectedItem.onCurrentDevice;
  54       });
  55
  56       var self = this;
  57       $('managed-user-import-cancel').onclick = function(event) {
  58         if (self.inProgress_) {
  59           self.updateImportInProgress_(false);
  60
  61           // 'cancelCreateProfile' is handled by CreateProfileHandler.
  62           chrome.send('cancelCreateProfile');
  63         }
  64         OptionsPage.closeOverlay();
  65       };
  66
  67       $('managed-user-import-ok').onclick =
  68           this.showAvatarGridOrSubmit_.bind(this);
  69       $('managed-user-select-avatar-ok').onclick =
  70           this.showAvatarGridOrSubmit_.bind(this);
  71     },
  72
  73     /**
  74      * @override
  75      */
  76     didShowPage: function() {
  77       // When the import link is clicked to open this overlay, it is hidden in
  78       // order to trigger a cursor update. We can show the import link again
  79       // now. TODO(akuegel): Remove this temporary fix when crbug/246304 is
  80       // resolved.
  81       $('import-existing-managed-user-link').hidden = false;
  82
  83       options.ManagedUserListData.requestExistingManagedUsers().then(
  84           this.receiveExistingManagedUsers_, this.onSigninError_.bind(this));
  85       options.ManagedUserListData.addObserver(this);
  86
  87       this.updateImportInProgress_(false);
  88       $('managed-user-import-error-bubble').hidden = true;
  89       $('managed-user-import-ok').disabled = true;
  90       this.showAppropriateElements_(/* isSelectAvatarMode */ false);
  91     },
  92
  93     /**
  94      * @override
  95      */
  96     didClosePage: function() {
  97       options.ManagedUserListData.removeObserver(this);
  98     },
  99
 100     /**
 101      * Shows either the managed user import dom elements or the select avatar
 102      * dom elements.
 103      * @param {boolean} isSelectAvatarMode True if the overlay should show the
 104      *     select avatar grid, and false if the overlay should show the managed
 105      *     user list.
 106      * @private
 107      */
 108     showAppropriateElements_: function(isSelectAvatarMode) {
 109       var avatarElements =
 110           this.pageDiv.querySelectorAll('.managed-user-select-avatar');
 111       for (var i = 0; i < avatarElements.length; i++)
 112         avatarElements[i].hidden = !isSelectAvatarMode;
 113       var importElements =
 114           this.pageDiv.querySelectorAll('.managed-user-import');
 115       for (var i = 0; i < importElements.length; i++)
 116         importElements[i].hidden = isSelectAvatarMode;
 117     },
 118
 119     /**
 120      * Called when the user clicks the "OK" button. In case the managed
 121      * user being imported has no avatar in sync, it shows the avatar
 122      * icon grid. In case the avatar grid is visible or the managed user
 123      * already has an avatar stored in sync, it proceeds with importing
 124      * the managed user.
 125      * @private
 126      */
 127     showAvatarGridOrSubmit_: function() {
 128       var managedUser = $('managed-user-list').selectedItem;
 129       if (!managedUser)
 130         return;
 131
 132       $('managed-user-import-error-bubble').hidden = true;
 133
 134       if ($('select-avatar-grid').hidden && managedUser.needAvatar) {
 135         this.showAvatarGridHelper_();
 136         return;
 137       }
 138
 139       var avatarUrl = managedUser.needAvatar ?
 140           $('select-avatar-grid').selectedItem : managedUser.iconURL;
 141
 142       this.updateImportInProgress_(true);
 143
 144       // 'createProfile' is handled by CreateProfileHandler.
 145       chrome.send('createProfile', [managedUser.name, avatarUrl,
 146                                     false, true, managedUser.id]);
 147     },
 148
 149     /**
 150      * Hides the 'managed user list' and shows the avatar grid instead.
 151      * It also updates the overlay text and title to instruct the user
 152      * to choose an avatar for the supervised user.
 153      * @private
 154      */
 155     showAvatarGridHelper_: function() {
 156       this.showAppropriateElements_(/* isSelectAvatarMode */ true);
 157       $('select-avatar-grid').redraw();
 158       $('select-avatar-grid').selectedItem =
 159           loadTimeData.getValue('avatarIcons')[0];
 160     },
 161
 162     /**
 163      * Updates the UI according to the importing state.
 164      * @param {boolean} inProgress True to indicate that
 165      *     importing is in progress and false otherwise.
 166      * @private
 167      */
 168     updateImportInProgress_: function(inProgress) {
 169       this.inProgress_ = inProgress;
 170       $('managed-user-import-ok').disabled = inProgress;
 171       $('managed-user-select-avatar-ok').disabled = inProgress;
 172       $('managed-user-list').disabled = inProgress;
 173       $('select-avatar-grid').disabled = inProgress;
 174       $('managed-user-import-throbber').hidden = !inProgress;
 175     },
 176
 177     /**
 178      * Sets the data model of the managed user list to |managedUsers|.
 179      * @param {Array.<Object>} managedUsers An array of managed user objects.
 180      *     Each object is of the form:
 181      *       managedUser = {
 182      *         id: "Managed User ID",
 183      *         name: "Managed User Name",
 184      *         iconURL: "chrome://path/to/icon/image",
 185      *         onCurrentDevice: true or false,
 186      *         needAvatar: true or false
 187      *       }
 188      * @private
 189      */
 190     receiveExistingManagedUsers_: function(managedUsers) {
 191       managedUsers.sort(function(a, b) {
 192         if (a.onCurrentDevice != b.onCurrentDevice)
 193           return a.onCurrentDevice ? 1 : -1;
 194         return a.name.localeCompare(b.name);
 195       });
 196
 197       $('managed-user-list').dataModel = new ArrayDataModel(managedUsers);
 198       if (managedUsers.length == 0) {
 199         this.onError_(loadTimeData.getString('noExistingManagedUsers'));
 200         $('managed-user-import-ok').disabled = true;
 201       } else {
 202         // Hide the error bubble.
 203         $('managed-user-import-error-bubble').hidden = true;
 204       }
 205     },
 206
 207     onSigninError_: function() {
 208       $('managed-user-list').dataModel = null;
 209       this.onError_(loadTimeData.getString('managedUserImportSigninError'));
 210     },
 211
 212     /**
 213      * Displays an error message if an error occurs while
 214      * importing a managed user.
 215      * Called by BrowserOptions via the BrowserOptionsHandler.
 216      * @param {string} error The error message to display.
 217      * @private
 218      */
 219     onError_: function(error) {
 220       var errorBubble = $('managed-user-import-error-bubble');
 221       errorBubble.hidden = false;
 222       errorBubble.textContent = error;
 223       this.updateImportInProgress_(false);
 224     },
 225
 226     /**
 227      * Closes the overlay if importing the managed user was successful. Also
 228      * reset the cached list of managed users in order to get an updated list
 229      * when the overlay is reopened.
 230      * @private
 231      */
 232     onSuccess_: function() {
 233       this.updateImportInProgress_(false);
 234       options.ManagedUserListData.resetPromise();
 235       OptionsPage.closeAllOverlays();
 236     },
 237   };
 238
 239   // Forward public APIs to private implementations.
 240   [
 241     'onSuccess',
 242   ].forEach(function(name) {
 243     ManagedUserImportOverlay[name] = function() {
 244       var instance = ManagedUserImportOverlay.getInstance();
 245       return instance[name + '_'].apply(instance, arguments);
 246     };
 247   });
 248
 249   // Export
 250   return {
 251     ManagedUserImportOverlay: ManagedUserImportOverlay,
 252   };
 253 });