src/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;
 114         if (i < 10)
 115           text = '0' + i;
 116         else
 117           text = i;
 118
 119         var option = document.createElement('option');
 120         option.text = text;
 121         option.value = text;
 122         expirationMonth.add(option, null);
 123       }
 124
 125       // Set the 'Expiration year' default options.
 126       var expirationYear = $('expiration-year');
 127       expirationYear.options.length = 0;
 128
 129       var date = new Date();
 130       var year = parseInt(date.getFullYear());
 131       for (var i = 0; i < 10; ++i) {
 132         var text = year + i;
 133         var option = document.createElement('option');
 134         option.text = text;
 135         option.value = text;
 136         expirationYear.add(option, null);
 137       }
 138     },
 139
 140     /**
 141      * Clears the value of each input field.
 142      * @private
 143      */
 144     clearInputFields_: function() {
 145       $('name-on-card').value = '';
 146       $('credit-card-number').value = '';
 147       $('expiration-month').selectedIndex = 0;
 148       $('expiration-year').selectedIndex = 0;
 149
 150       // Reset the enabled status of the 'Ok' button.
 151       this.inputFieldChanged_();
 152     },
 153
 154     /**
 155      * Sets the value of each input field according to |creditCard|
 156      * @private
 157      */
 158     setInputFields_: function(creditCard) {
 159       $('name-on-card').value = creditCard.nameOnCard;
 160       $('credit-card-number').value = creditCard.creditCardNumber;
 161
 162       // The options for the year select control may be out-dated at this point,
 163       // e.g. the user opened the options page before midnight on New Year's Eve
 164       // and then loaded a credit card profile to edit in the new year, so
 165       // reload the select options just to be safe.
 166       this.setDefaultSelectOptions_();
 167
 168       var idx = parseInt(creditCard.expirationMonth, 10);
 169       $('expiration-month').selectedIndex = idx - 1;
 170
 171       expYear = creditCard.expirationYear;
 172       var date = new Date();
 173       var year = parseInt(date.getFullYear());
 174       for (var i = 0; i < 10; ++i) {
 175         var text = year + i;
 176         if (expYear == String(text))
 177           $('expiration-year').selectedIndex = i;
 178       }
 179     },
 180
 181     /**
 182      * Loads the credit card data from |creditCard|, sets the input fields based
 183      * on this data and stores the GUID of the credit card.
 184      * @private
 185      */
 186     loadCreditCard_: function(creditCard) {
 187       this.setInputFields_(creditCard);
 188       this.inputFieldChanged_();
 189       this.guid_ = creditCard.guid;
 190     },
 191   };
 192
 193   AutofillEditCreditCardOverlay.loadCreditCard = function(creditCard) {
 194     AutofillEditCreditCardOverlay.getInstance().loadCreditCard_(creditCard);
 195   };
 196
 197   AutofillEditCreditCardOverlay.setTitle = function(title) {
 198     $('autofill-credit-card-title').textContent = title;
 199   };
 200
 201   // Export
 202   return {
 203     AutofillEditCreditCardOverlay: AutofillEditCreditCardOverlay
 204   };
 205 });