chrome/browser/resources/options/autofill_options.js

   1 // Copyright (c) 2012 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  * @typedef {{
   7  *   creditCardNumber: string,
   8  *   expirationMonth: string,
   9  *   expirationYear: string,
  10  *   guid: string,
  11  *   nameOnCard: string
  12  * }}
  13  * @see chrome/browser/ui/webui/options/autofill_options_handler.cc
  14  */
  15 var CreditCardData;
  16
  17 cr.define('options', function() {
  18   var Page = cr.ui.pageManager.Page;
  19   var PageManager = cr.ui.pageManager.PageManager;
  20   var ArrayDataModel = cr.ui.ArrayDataModel;
  21
  22   /////////////////////////////////////////////////////////////////////////////
  23   // AutofillOptions class:
  24
  25   /**
  26    * Encapsulated handling of Autofill options page.
  27    * @constructor
  28    * @extends {cr.ui.pageManager.Page}
  29    */
  30   function AutofillOptions() {
  31     Page.call(this, 'autofill',
  32               loadTimeData.getString('autofillOptionsPageTabTitle'),
  33               'autofill-options');
  34   }
  35
  36   cr.addSingletonGetter(AutofillOptions);
  37
  38   AutofillOptions.prototype = {
  39     __proto__: Page.prototype,
  40
  41     /**
  42      * The address list.
  43      * @type {options.DeletableItemList}
  44      * @private
  45      */
  46     addressList_: null,
  47
  48     /**
  49      * The credit card list.
  50      * @type {options.DeletableItemList}
  51      * @private
  52      */
  53     creditCardList_: null,
  54
  55     /** @override */
  56     initializePage: function() {
  57       Page.prototype.initializePage.call(this);
  58
  59       this.createAddressList_();
  60       this.createCreditCardList_();
  61
  62       var self = this;
  63       $('autofill-add-address').onclick = function(event) {
  64         self.showAddAddressOverlay_();
  65       };
  66       $('autofill-add-creditcard').onclick = function(event) {
  67         self.showAddCreditCardOverlay_();
  68       };
  69       $('autofill-options-confirm').onclick = function(event) {
  70         PageManager.closeOverlay();
  71       };
  72 <if expr="is_macosx">
  73       $('autofill-use-mac-address-book-checkbox').onchange = function(event) {
  74         if (this.checked) {
  75           setTimeout(function() {
  76             // Prompt the user to give Chrome access to the user's Address
  77             // Book, if the user was not previously prompted. The dialog that
  78             // appears blocks the Chrome process, so wait for a small period of
  79             // time to allow the checkbox to appear filled in.
  80             chrome.send('accessAddressBook');
  81           }, 10);
  82         }
  83       };
  84 </if>
  85
  86       $('autofill-help').onclick = function(event) {
  87         chrome.send('coreOptionsUserMetricsAction',
  88                     ['Options_AutofillShowAbout']);
  89         return true;  // Always follow the href
  90       };
  91
  92       var enableWalletIntegration =
  93           loadTimeData.getBoolean('enableAutofillWalletIntegration');
  94       $('autofill-wallet-remask-cards-area').hidden = !enableWalletIntegration;
  95       $('autofill-wallet-setting-area').hidden = !enableWalletIntegration;
  96       // TODO(estade): there should probably be some indication of success.
  97       $('remask-server-cards-link').onclick = function(event) {
  98         chrome.send('remaskServerCards');
  99       };
 100
 101       // TODO(jhawkins): What happens when Autofill is disabled whilst on the
 102       // Autofill options page?
 103     },
 104
 105     /**
 106      * Creates, decorates and initializes the address list.
 107      * @private
 108      */
 109     createAddressList_: function() {
 110       var addressList = $('address-list');
 111       options.autofillOptions.AutofillAddressList.decorate(addressList);
 112       this.addressList_ = assertInstanceof(addressList,
 113                                            options.DeletableItemList);
 114       this.addressList_.autoExpands = true;
 115     },
 116
 117     /**
 118      * Creates, decorates and initializes the credit card list.
 119      * @private
 120      */
 121     createCreditCardList_: function() {
 122       var creditCardList = $('creditcard-list');
 123       options.autofillOptions.AutofillCreditCardList.decorate(creditCardList);
 124       this.creditCardList_ = assertInstanceof(creditCardList,
 125                                               options.DeletableItemList);
 126       this.creditCardList_.autoExpands = true;
 127     },
 128
 129     /**
 130      * Shows the 'Add address' overlay, specifically by loading the
 131      * 'Edit address' overlay and modifying the overlay title.
 132      * @private
 133      */
 134     showAddAddressOverlay_: function() {
 135       var title = loadTimeData.getString('addAddressTitle');
 136       AutofillEditAddressOverlay.setTitle(title);
 137       PageManager.showPageByName('autofillEditAddress');
 138       AutofillEditAddressOverlay.prepForNewAddress();
 139     },
 140
 141     /**
 142      * Shows the 'Add credit card' overlay, specifically by loading the
 143      * 'Edit credit card' overlay and modifying the overlay title.
 144      * @private
 145      */
 146     showAddCreditCardOverlay_: function() {
 147       var title = loadTimeData.getString('addCreditCardTitle');
 148       AutofillEditCreditCardOverlay.setTitle(title);
 149       PageManager.showPageByName('autofillEditCreditCard');
 150       AutofillEditCreditCardOverlay.prepForNewCard();
 151     },
 152
 153     /**
 154      * Updates the data model for the address list with the values from
 155      * |entries|.
 156      * @param {!Array} entries The list of addresses.
 157      */
 158     setAddressList_: function(entries) {
 159       this.addressList_.dataModel = new ArrayDataModel(entries);
 160     },
 161
 162     /**
 163      * Updates the data model for the credit card list with the values from
 164      * |entries|.
 165      * @param {!Array} entries The list of credit cards.
 166      */
 167     setCreditCardList_: function(entries) {
 168       this.creditCardList_.dataModel = new ArrayDataModel(entries);
 169     },
 170
 171     /**
 172      * Removes the Autofill address or credit card represented by |guid|.
 173      * @param {string} guid The GUID of the address to remove.
 174      * @param {string=} metricsAction The name of the action to log for metrics.
 175      * @private
 176      */
 177     removeData_: function(guid, metricsAction) {
 178       chrome.send('removeData', [guid]);
 179       if (metricsAction)
 180         chrome.send('coreOptionsUserMetricsAction', [metricsAction]);
 181     },
 182
 183     /**
 184      * Requests profile data for the address represented by |guid| from the
 185      * PersonalDataManager. Once the data is loaded, the AutofillOptionsHandler
 186      * calls showEditAddressOverlay().
 187      * @param {string} guid The GUID of the address to edit.
 188      * @private
 189      */
 190     loadAddressEditor_: function(guid) {
 191       chrome.send('loadAddressEditor', [guid]);
 192     },
 193
 194     /**
 195      * Requests profile data for the credit card represented by |guid| from the
 196      * PersonalDataManager. Once the data is loaded, the AutofillOptionsHandler
 197      * calls showEditCreditCardOverlay().
 198      * @param {string} guid The GUID of the credit card to edit.
 199      * @private
 200      */
 201     loadCreditCardEditor_: function(guid) {
 202       chrome.send('loadCreditCardEditor', [guid]);
 203     },
 204
 205     /**
 206      * Shows the 'Edit address' overlay, using the data in |address| to fill the
 207      * input fields. |address| is a list with one item, an associative array
 208      * that contains the address data.
 209      * @private
 210      */
 211     showEditAddressOverlay_: function(address) {
 212       var title = loadTimeData.getString('editAddressTitle');
 213       AutofillEditAddressOverlay.setTitle(title);
 214       AutofillEditAddressOverlay.loadAddress(address);
 215       PageManager.showPageByName('autofillEditAddress');
 216     },
 217
 218     /**
 219      * Shows the 'Edit credit card' overlay, using the data in |credit_card| to
 220      * fill the input fields. |creditCard| is a list with one item, an
 221      * associative array that contains the credit card data.
 222      * @param {CreditCardData} creditCard
 223      * @private
 224      */
 225     showEditCreditCardOverlay_: function(creditCard) {
 226       var title = loadTimeData.getString('editCreditCardTitle');
 227       AutofillEditCreditCardOverlay.setTitle(title);
 228       AutofillEditCreditCardOverlay.loadCreditCard(creditCard);
 229       PageManager.showPageByName('autofillEditCreditCard');
 230     },
 231   };
 232
 233   AutofillOptions.setAddressList = function(entries) {
 234     AutofillOptions.getInstance().setAddressList_(entries);
 235   };
 236
 237   AutofillOptions.setCreditCardList = function(entries) {
 238     AutofillOptions.getInstance().setCreditCardList_(entries);
 239   };
 240
 241   AutofillOptions.removeData = function(guid, metricsAction) {
 242     AutofillOptions.getInstance().removeData_(guid, metricsAction);
 243   };
 244
 245   AutofillOptions.loadAddressEditor = function(guid) {
 246     AutofillOptions.getInstance().loadAddressEditor_(guid);
 247   };
 248
 249   AutofillOptions.loadCreditCardEditor = function(guid) {
 250     AutofillOptions.getInstance().loadCreditCardEditor_(guid);
 251   };
 252
 253   AutofillOptions.editAddress = function(address) {
 254     AutofillOptions.getInstance().showEditAddressOverlay_(address);
 255   };
 256
 257   /**
 258    * @param {CreditCardData} creditCard
 259    */
 260   AutofillOptions.editCreditCard = function(creditCard) {
 261     AutofillOptions.getInstance().showEditCreditCardOverlay_(creditCard);
 262   };
 263
 264   // Export
 265   return {
 266     AutofillOptions: AutofillOptions
 267   };
 268
 269 });
 270