From 06fb31533fd68809cfa308db6ff68303c1c9dc42 Mon Sep 17 00:00:00 2001
From: Henry Oswald <henry.oswald@sharelatex.com>
Date: Mon, 16 Apr 2018 10:26:39 +0100
Subject: [PATCH] add highlight for bad card/cvv/mmyy number in.

---
 services/web/app/views/subscriptions/new.pug          | 8 ++------
 services/web/public/stylesheets/components/forms.less | 1 +
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/services/web/app/views/subscriptions/new.pug b/services/web/app/views/subscriptions/new.pug
index 5644710723..3755f359e7 100644
--- a/services/web/app/views/subscriptions/new.pug
+++ b/services/web/app/views/subscriptions/new.pug
@@ -19,7 +19,7 @@ block content
 						.page-header
 							.row
 								.col-xs-9
-									h2 {{planName}}
+									h2 {{planName}} {{validation.errorFields}} {{validation.errorFields.number}}
 								.col-xs-3
 									div.dropdown.changePlanButton.pull-right(ng-cloak, dropdown)
 										a.btn.btn-default.dropdown-toggle(
@@ -102,13 +102,12 @@ block content
 															required
 														)
 
-											.form-group()
+											.form-group(ng-class="validation.errorFields.number ? 'has-error' : ''")
 												label(for="card-no") #{translate("credit_card_number")}
 												div#card-no(
 													type="text"
 													name="ccNumber"
 													data-recurly='number'
-													ng-focus="validation.correctCardNumber = true; validation.errorFields.number = false;"
 													ng-blur="validateCardNumber();"
 													required
 												)
@@ -120,7 +119,6 @@ block content
 														div(
 															type="number"
 															name="month"
-															ng-focus="validation.correctExpiry = true; validation.errorFields.expiry = false;"
 															ng-blur="updateExpiry(); validateExpiry()"
 															data-recurly="month"
 															required
@@ -132,7 +130,6 @@ block content
 															type="number"
 															name="year"
 															data-recurly="year"
-															ng-focus="validation.correctExpiry = true; validation.errorFields.expiry = false;"
 															ng-blur="updateExpiry(); validateExpiry()"
 															required
 														)
@@ -143,7 +140,6 @@ block content
 														div(
 															type="number"
 															ng-model="data.cvv"
-															ng-focus="validation.correctCvv = true; validation.errorFields.cvv = false;"
 															ng-blur="validateCvv()"
 															data-recurly="cvv"
 															name="cvv"
diff --git a/services/web/public/stylesheets/components/forms.less b/services/web/public/stylesheets/components/forms.less
index 4e32779d7b..8202be7c3f 100755
--- a/services/web/public/stylesheets/components/forms.less
+++ b/services/web/public/stylesheets/components/forms.less
@@ -311,6 +311,7 @@ input[type="checkbox"],
 }
 .has-error {
   .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
+  color:@red;
 }
 
 .form-control.ng-dirty.ng-invalid:not(:focus) {