Alerting the user when the provided date for credit card is passed, not save the card, and not clos…

chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.js

Index: chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.js
diff --git a/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.js b/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.js
index b3ff3fb37ce31ce64f546ee2322215e7d9c107d5..e6c015e0b8d35e1dfcf2a6c355cd8794c8dfef45 100644
--- a/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.js
+++ b/chrome/browser/resources/settings/passwords_and_forms_page/credit_card_edit_dialog.js
@@ -49,6 +49,15 @@ Polymer({
 
     /** @private {string|undefined} */
     expirationMonth_: String,
+
+    /** @private */
+    currentYear_: Number,
+
+    /** @private */
+    currentMonth_: Number,
+
+    /** @private */
+    dateExpired_: Boolean,

[Moe, 2016/10/27 18:31:11]

nit: cardExpired_ or something like that

[Parastoo, 2016/10/27 22:18:57]

Done.

   },
 
   behaviors: [
@@ -65,10 +74,14 @@ Polymer({
       this.creditCard.expirationMonth = '0' + this.creditCard.expirationMonth;
 
     var date = new Date();
-    var firstYear = date.getFullYear();
+    this.currentYear_ = date.getFullYear();
+    this.currentMonth_ = date.getMonth();
+
+    var firstYear = this.currentYear_;
     var lastYear = firstYear + 9;  // Show next 9 years (10 total).
     var selectedYear = parseInt(this.creditCard.expirationYear, 10);
 
+

[Mathieu, 2016/10/27 15:49:56]

nit: remove extra line

[Parastoo, 2016/10/27 16:08:40]

Done.

     // |selectedYear| must be valid and between first and last years.
     if (!selectedYear)
       selectedYear = firstYear;
@@ -108,20 +121,33 @@ Polymer({
    * @private
    */
   onSaveButtonTap_: function() {
-    this.creditCard.expirationYear = this.expirationYear_;
-    this.creditCard.expirationMonth = this.expirationMonth_;
-    this.fire('save-credit-card', this.creditCard);
-    this.close();
+    if (this.expirationYear_ <= this.currentYear_ ||

[Mathieu, 2016/10/27 15:49:56]

Add a comment above this block: 

// If the card is expired, see the appropriate property which will reflect the
error to the user. Otherwise, update the card, save and close the dialog.

[Parastoo, 2016/10/27 16:08:40]

Done.

+        (this.expirationYear_ == this.currentYear_ &&
+        this.expirationMonth_ < this.currentMonth_)) {
+      this.dateExpired_ = true;
+    } else {
+      this.creditCard.expirationYear = this.expirationYear_;
+      this.creditCard.expirationMonth = this.expirationMonth_;
+      this.fire('save-credit-card', this.creditCard);
+      this.close();
+    }
   },
 
   /** @private */
   onMonthChange_: function() {
     this.expirationMonth_ = this.monthList_[this.$.month.selectedIndex];
+    if (this.expirationMonth_ >= this.currentMonth_) {

[Mathieu, 2016/10/27 15:49:56]

if (this.dateExpired_ && this.expirationMonth_....

[Parastoo, 2016/10/27 16:08:40]

I think this is something the compiler will take care of: if it is false, do
nothing.

Done.

[Moe, 2016/10/27 18:31:11]

Wait, changing the month alone doesn't guarantee the card isn't expired. the
year could still be in the past, right? I suggest adding a private helper
function like isCardExpired_ that does the month and the year calculations and
returns a boolean.
Also, currentYear_ and currentMonth_ don't need to be declared properties.
simply call Date.prototype.getFullYear() and Date.prototype.getMonth() in your
helper function and use local variables if needed.

[Parastoo, 2016/10/27 22:18:57]

According to the year list --which doesn't show past years-- changing month
alone does so, but anyway I have already added the helper function, which checks
for both year and month.

[Parastoo, 2016/10/27 22:18:57]

Done.

+      this.dateExpired_ = false;
+    }
   },
 
   /** @private */
   onYearChange_: function() {
     this.expirationYear_ = this.yearList_[this.$.year.selectedIndex];
+    if (this.expirationYear_ > this.currentYear_) {
+      this.dateExpired_ = false;
+    }
+

[Mathieu, 2016/10/27 15:49:56]

nit: remove extra new line

[Parastoo, 2016/10/27 16:08:40]

Done.

   },
 });
 })();