chrome/browser/resources/options/autofill_edit_creditcard_overlay.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 cr.define('options', function() {
   6   /** @const */ var Page = cr.ui.pageManager.Page;
   7   /** @const */ var PageManager = cr.ui.pageManager.PageManager;
   8
   9   /**
  10    * AutofillEditCreditCardOverlay class
  11    * Encapsulated handling of the 'Add Page' overlay page.
  12    * @class
  13    */
  14   function AutofillEditCreditCardOverlay() {
  15     Page.call(this, 'autofillEditCreditCard',
  16               loadTimeData.getString('autofillEditCreditCardTitle'),
  17               'autofill-edit-credit-card-overlay');
  18   }
  19
  20   cr.addSingletonGetter(AutofillEditCreditCardOverlay);
  21
  22   AutofillEditCreditCardOverlay.prototype = {
  23     __proto__: Page.prototype,
  24
  25     /** @override */
  26     initializePage: function() {
  27       Page.prototype.initializePage.call(this);
  28
  29       var self = this;
  30       $('autofill-edit-credit-card-cancel-button').onclick = function(event) {
  31         self.dismissOverlay_();
  32       };
  33       $('autofill-edit-credit-card-apply-button').onclick = function(event) {
  34         self.saveCreditCard_();
  35         self.dismissOverlay_();
  36       };
  37
  38       self.guid_ = '';
  39       self.clearInputFields_();
  40       self.connectInputEvents_();
  41       self.setDefaultSelectOptions_();
  42     },
  43
  44     /**
  45     * Specifically catch the situations in which the overlay is cancelled
  46     * externally (e.g. by pressing <Esc>), so that the input fields and
  47     * GUID can be properly cleared.
  48     * @override
  49     */
  50     handleCancel: function() {
  51       this.dismissOverlay_();
  52     },
  53
  54     /**
  55      * Clears any uncommitted input, and dismisses the overlay.
  56      * @private
  57      */
  58     dismissOverlay_: function() {
  59       this.clearInputFields_();
  60       this.guid_ = '';
  61       PageManager.closeOverlay();
  62     },
  63
  64     /**
  65      * Aggregates the values in the input fields into an array and sends the
  66      * array to the Autofill handler.
  67      * @private
  68      */
  69     saveCreditCard_: function() {
  70       var creditCard = new Array(5);
  71       creditCard[0] = this.guid_;
  72       creditCard[1] = $('name-on-card').value;
  73       creditCard[2] = $('credit-card-number').value;
  74       creditCard[3] = $('expiration-month').value;
  75       creditCard[4] = $('expiration-year').value;
  76       chrome.send('setCreditCard', creditCard);
  77
  78       // If the GUID is empty, this form is being used to add a new card,
  79       // rather than edit an existing one.
  80       if (!this.guid_.length) {
  81         chrome.send('coreOptionsUserMetricsAction',
  82                     ['Options_AutofillCreditCardAdded']);
  83       }
  84     },
  85
  86     /**
  87      * Connects each input field to the inputFieldChanged_() method that enables
  88      * or disables the 'Ok' button based on whether all the fields are empty or
  89      * not.
  90      * @private
  91      */
  92     connectInputEvents_: function() {
  93       var ccNumber = $('credit-card-number');
  94       $('name-on-card').oninput = ccNumber.oninput =
  95           $('expiration-month').onchange = $('expiration-year').onchange =
  96               this.inputFieldChanged_.bind(this);
  97     },
  98
  99     /**
 100      * Checks the values of each of the input fields and disables the 'Ok'
 101      * button if all of the fields are empty.
 102      * @param {Event} opt_event Optional data for the 'input' event.
 103      * @private
 104      */
 105     inputFieldChanged_: function(opt_event) {
 106       var disabled = !$('name-on-card').value.trim() &&
 107               !$('credit-card-number').value.trim();
 108       $('autofill-edit-credit-card-apply-button').disabled = disabled;
 109     },
 110
 111     /**
 112      * Sets the default values of the options in the 'Expiration date' select
 113      * controls.
 114      * @private
 115      */
 116     setDefaultSelectOptions_: function() {
 117       // Set the 'Expiration month' default options.
 118       var expirationMonth = $('expiration-month');
 119       expirationMonth.options.length = 0;
 120       for (var i = 1; i <= 12; ++i) {
 121         var text = (i < 10 ? '0' : '') + i;
 122
 123         var option = document.createElement('option');
 124         option.text = option.value = text;
 125         expirationMonth.add(option, null);
 126       }
 127
 128       // Set the 'Expiration year' default options.
 129       var expirationYear = $('expiration-year');
 130       expirationYear.options.length = 0;
 131
 132       var date = new Date();
 133       var year = parseInt(date.getFullYear(), 10);
 134       for (var i = 0; i < 10; ++i) {
 135         var text = year + i;
 136         var option = document.createElement('option');
 137         option.text = String(text);
 138         option.value = text;
 139         expirationYear.add(option, null);
 140       }
 141     },
 142
 143     /**
 144      * Clears the value of each input field.
 145      * @private
 146      */
 147     clearInputFields_: function() {
 148       $('name-on-card').value = '';
 149       $('credit-card-number').value = '';
 150       $('expiration-month').selectedIndex = 0;
 151       $('expiration-year').selectedIndex = 0;
 152
 153       // Reset the enabled status of the 'Ok' button.
 154       this.inputFieldChanged_();
 155     },
 156
 157     /**
 158      * Sets the value of each input field according to |creditCard|
 159      * @param {CreditCardData} creditCard
 160      * @private
 161      */
 162     setInputFields_: function(creditCard) {
 163       $('name-on-card').value = creditCard.nameOnCard;
 164       $('credit-card-number').value = creditCard.creditCardNumber;
 165
 166       // The options for the year select control may be out-dated at this point,
 167       // e.g. the user opened the options page before midnight on New Year's Eve
 168       // and then loaded a credit card profile to edit in the new year, so
 169       // reload the select options just to be safe.
 170       this.setDefaultSelectOptions_();
 171
 172       var idx = parseInt(creditCard.expirationMonth, 10);
 173       $('expiration-month').selectedIndex = idx - 1;
 174
 175       var expYear = creditCard.expirationYear;
 176       var date = new Date();
 177       var year = parseInt(date.getFullYear(), 10);
 178       for (var i = 0; i < 10; ++i) {
 179         var text = year + i;
 180         if (expYear == String(text))
 181           $('expiration-year').selectedIndex = i;
 182       }
 183     },
 184
 185     /**
 186      * Called to prepare the overlay when a new card is being added.
 187      * @private
 188      */
 189     prepForNewCard_: function() {
 190       // Focus the first element.
 191       this.pageDiv.querySelector('input').focus();
 192     },
 193
 194     /**
 195      * Loads the credit card data from |creditCard|, sets the input fields based
 196      * on this data and stores the GUID of the credit card.
 197      * @param {CreditCardData} creditCard
 198      * @private
 199      */
 200     loadCreditCard_: function(creditCard) {
 201       this.setInputFields_(creditCard);
 202       this.inputFieldChanged_();
 203       this.guid_ = creditCard.guid;
 204     },
 205   };
 206
 207   AutofillEditCreditCardOverlay.prepForNewCard = function() {
 208     AutofillEditCreditCardOverlay.getInstance().prepForNewCard_();
 209   };
 210
 211   AutofillEditCreditCardOverlay.loadCreditCard = function(creditCard) {
 212     AutofillEditCreditCardOverlay.getInstance().loadCreditCard_(creditCard);
 213   };
 214
 215   AutofillEditCreditCardOverlay.setTitle = function(title) {
 216     $('autofill-credit-card-title').textContent = title;
 217   };
 218
 219   // Export
 220   return {
 221     AutofillEditCreditCardOverlay: AutofillEditCreditCardOverlay
 222   };
 223 });