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
  79     /**
  80      * Connects each input field to the inputFieldChanged_() method that enables
  81      * or disables the 'Ok' button based on whether all the fields are empty or
  82      * not.
  83      * @private
  84      */
  85     connectInputEvents_: function() {
  86       var ccNumber = $('credit-card-number');
  87       $('name-on-card').oninput = ccNumber.oninput =
  88           $('expiration-month').onchange = $('expiration-year').onchange =
  89               this.inputFieldChanged_.bind(this);
  90     },
  91
  92     /**
  93      * Checks the values of each of the input fields and disables the 'Ok'
  94      * button if all of the fields are empty.
  95      * @param {Event} opt_event Optional data for the 'input' event.
  96      * @private
  97      */
  98     inputFieldChanged_: function(opt_event) {
  99       var disabled = !$('name-on-card').value && !$('credit-card-number').value;
 100       $('autofill-edit-credit-card-apply-button').disabled = disabled;
 101     },
 102
 103     /**
 104      * Sets the default values of the options in the 'Expiration date' select
 105      * controls.
 106      * @private
 107      */
 108     setDefaultSelectOptions_: function() {
 109       // Set the 'Expiration month' default options.
 110       var expirationMonth = $('expiration-month');
 111       expirationMonth.options.length = 0;
 112       for (var i = 1; i <= 12; ++i) {
 113         var text = (i < 10 ? '0' : '') + i;
 114
 115         var option = document.createElement('option');
 116         option.text = option.value = text;
 117         expirationMonth.add(option, null);
 118       }
 119
 120       // Set the 'Expiration year' default options.
 121       var expirationYear = $('expiration-year');
 122       expirationYear.options.length = 0;
 123
 124       var date = new Date();
 125       var year = parseInt(date.getFullYear(), 10);
 126       for (var i = 0; i < 10; ++i) {
 127         var text = year + i;
 128         var option = document.createElement('option');
 129         option.text = String(text);
 130         option.value = text;
 131         expirationYear.add(option, null);
 132       }
 133     },
 134
 135     /**
 136      * Clears the value of each input field.
 137      * @private
 138      */
 139     clearInputFields_: function() {
 140       $('name-on-card').value = '';
 141       $('credit-card-number').value = '';
 142       $('expiration-month').selectedIndex = 0;
 143       $('expiration-year').selectedIndex = 0;
 144
 145       // Reset the enabled status of the 'Ok' button.
 146       this.inputFieldChanged_();
 147     },
 148
 149     /**
 150      * Sets the value of each input field according to |creditCard|
 151      * @param {CreditCardData} creditCard
 152      * @private
 153      */
 154     setInputFields_: function(creditCard) {
 155       $('name-on-card').value = creditCard.nameOnCard;
 156       $('credit-card-number').value = creditCard.creditCardNumber;
 157
 158       // The options for the year select control may be out-dated at this point,
 159       // e.g. the user opened the options page before midnight on New Year's Eve
 160       // and then loaded a credit card profile to edit in the new year, so
 161       // reload the select options just to be safe.
 162       this.setDefaultSelectOptions_();
 163
 164       var idx = parseInt(creditCard.expirationMonth, 10);
 165       $('expiration-month').selectedIndex = idx - 1;
 166
 167       var expYear = creditCard.expirationYear;
 168       var date = new Date();
 169       var year = parseInt(date.getFullYear(), 10);
 170       for (var i = 0; i < 10; ++i) {
 171         var text = year + i;
 172         if (expYear == String(text))
 173           $('expiration-year').selectedIndex = i;
 174       }
 175     },
 176
 177     /**
 178      * Called to prepare the overlay when a new card is being added.
 179      * @private
 180      */
 181     prepForNewCard_: function() {
 182       // Focus the first element.
 183       this.pageDiv.querySelector('input').focus();
 184     },
 185
 186     /**
 187      * Loads the credit card data from |creditCard|, sets the input fields based
 188      * on this data and stores the GUID of the credit card.
 189      * @param {CreditCardData} creditCard
 190      * @private
 191      */
 192     loadCreditCard_: function(creditCard) {
 193       this.setInputFields_(creditCard);
 194       this.inputFieldChanged_();
 195       this.guid_ = creditCard.guid;
 196     },
 197   };
 198
 199   AutofillEditCreditCardOverlay.prepForNewCard = function() {
 200     AutofillEditCreditCardOverlay.getInstance().prepForNewCard_();
 201   };
 202
 203   AutofillEditCreditCardOverlay.loadCreditCard = function(creditCard) {
 204     AutofillEditCreditCardOverlay.getInstance().loadCreditCard_(creditCard);
 205   };
 206
 207   AutofillEditCreditCardOverlay.setTitle = function(title) {
 208     $('autofill-credit-card-title').textContent = title;
 209   };
 210
 211   // Export
 212   return {
 213     AutofillEditCreditCardOverlay: AutofillEditCreditCardOverlay
 214   };
 215 });