fix payment validation

src/account/NewNetworkPage.vue

@@ -6,13 +6,14 @@
             <div class="form-group">
                 <label for="name">{{messages.field_label_network_name}}</label>
                 <input type="text" v-model="network.name" v-validate="'required'" name="name" class="form-control" :class="{ 'is-invalid': submitted && errors.has('name') }" />
+                <div v-if="submitted && errors.has('name')" class="invalid-feedback">{{ errors.first('name') }}</div>
             </div>
 
             <!-- domain -->
             <div v-if="customize.domain === true" class="form-group">
                 <label for="domain">{{messages.field_label_network_domain}}</label>
                 <v-select v-validate="'required'" v-if="domains" :options="domains" label="name" type="text" v-model="network.domain" name="domain" class="form-control" :class="{ 'is-invalid': submitted && errors.has('domain') }"></v-select>
-                <div v-if="submitted && errors.has('name')" class="invalid-feedback">{{ errors.first('name') }}</div>
+                <div v-if="submitted && errors.has('domain')" class="invalid-feedback">{{ errors.first('domain') }}</div>
                 <button @click="customize.domain = false">{{messages.button_label_use_default}}</button>
             </div>
             <div v-if="customize.domain === false">
@@ -91,11 +92,6 @@
 
             <div class="form-group">
                 <label htmlFor="paymentMethod">{{messages.field_label_paymentMethod}}</label>
-                <div v-if="submitted && errors.has('paymentMethod')" class="invalid-feedback">{{ errors.first('paymentMethod') }}</div>
-                <div v-if="submitted && errors.has('paymentMethodInfo')" class="invalid-feedback">{{ errors.first('paymentMethodInfo') }}</div>
-                <div v-if="submitted && errors.has('paymentMethodType')" class="invalid-feedback">{{ errors.first('paymentMethodType') }}</div>
-                <div v-if="submitted && errors.has('paymentMethodService')" class="invalid-feedback">{{ errors.first('paymentMethodService') }}</div>
-                <div v-if="submitted && errors.has('paymentInfo')" class="invalid-feedback">{{ errors.first('paymentInfo') }}</div>
                 <span v-for="pm in paymentMethods">
                     <button class="btn btn-primary" :disabled="status.creating" @click="setPaymentMethod(pm)">{{messages['payment_description_'+pm.paymentMethodType]}}</button>
                 </span>
@@ -170,7 +166,7 @@
                 error: state => state.error
             }),
             isComplete() {
-                return (this.name !== '')
+                return (this.network.name !== '')
                     && (this.customize.domain === false || this.network.domain !== '')
                     && (this.customize.locale === false || this.network.locale !== '')
                     && (this.customize.timezone === false || this.network.timezone !== '')

src/account/payment/InviteCodePayment.vue

@@ -1,17 +1,20 @@
 <template>
-    <div>
-        <form @submit.prevent="setInviteCode">
-            <div class="form-group">
-                <label for="invite_code">{{messages.field_payment_invite_code}}</label>
-                <input type="text" v-model="invite_code" v-validate="'required'" name="invite_code" class="form-control" :class="{ 'is-invalid': submitted && errors.has('purchase') }" :disabled="paymentStatus.addingPaymentMethod || paymentStatus.addedPaymentMethod" />
-                <div v-if="submitted && errors.has('purchase')" class="invalid-feedback">{{ errors.first('purchase') }}</div>
-            </div>
-            <div class="form-group">
-                <button v-if="paymentStatus.addingPaymentMethod || !paymentStatus.addedPaymentMethod" class="btn btn-primary" :disabled="paymentStatus.addingPaymentMethod">{{messages.button_label_submit_invite_code}}</button>
-                <span v-if="paymentStatus.addedPaymentMethod">{{messages.message_verified_invite_code}}</span>
-            </div>
-        </form>
-    </div>
+    <form @submit.prevent="setInviteCode">
+        <div class="form-group">
+            <label for="invite_code">{{messages.field_payment_invite_code}}</label>
+            <input type="text" v-model="invite_code" v-validate="'required'" name="invite_code" class="form-control" :class="{ 'is-invalid': submitted && errors.has('purchase') }" :disabled="paymentStatus.addingPaymentMethod || paymentStatus.addedPaymentMethod" />
+            <div v-if="submitted && errors.has('purchase')" class="invalid-feedback d-block">{{ errors.first('purchase') }}</div>
+            <div v-if="submitted && errors.has('paymentMethod')" class="invalid-feedback d-block">{{ errors.first('paymentMethod') }}</div>
+            <div v-if="submitted && errors.has('paymentMethodInfo')" class="invalid-feedback d-block">{{ errors.first('paymentMethodInfo') }}</div>
+            <div v-if="submitted && errors.has('paymentMethodType')" class="invalid-feedback d-block">{{ errors.first('paymentMethodType') }}</div>
+            <div v-if="submitted && errors.has('paymentMethodService')" class="invalid-feedback d-block">{{ errors.first('paymentMethodService') }}</div>
+            <div v-if="submitted && errors.has('paymentInfo')" class="invalid-feedback d-block">{{ errors.first('paymentInfo') }}</div>
+        </div>
+        <div class="form-group">
+            <button v-if="paymentStatus.addingPaymentMethod || !paymentStatus.addedPaymentMethod" class="btn btn-primary" :disabled="paymentStatus.addingPaymentMethod">{{messages.button_label_submit_invite_code}}</button>
+            <span v-if="paymentStatus.addedPaymentMethod">{{messages.message_verified_invite_code}}</span>
+        </div>
+    </form>
 </template>
 
 <script>

src/account/payment/StripePayment.vue

@@ -1,7 +1,14 @@
 <template>
-    <div>
-        <div ref="card"></div>
-        <button v-on:click="authorizeCard">{{messages.button_label_submit_card}}</button>
+    <div class="form-group">
+        <div class="form-control" ref="card"></div>
+        <div v-if="submitted && errors.has('purchase')" class="invalid-feedback d-block">{{ errors.first('purchase') }}</div>
+        <div v-if="submitted && errors.has('paymentMethod')" class="invalid-feedback d-block">{{ errors.first('paymentMethod') }}</div>
+        <div v-if="submitted && errors.has('paymentMethodInfo')" class="invalid-feedback d-block">{{ errors.first('paymentMethodInfo') }}</div>
+        <div v-if="submitted && errors.has('paymentMethodType')" class="invalid-feedback d-block">{{ errors.first('paymentMethodType') }}</div>
+        <div v-if="submitted && errors.has('paymentMethodService')" class="invalid-feedback d-block">{{ errors.first('paymentMethodService') }}</div>
+        <div v-if="submitted && errors.has('paymentInfo')" class="invalid-feedback d-block">{{ errors.first('paymentInfo') }}</div>
+        <button v-if="paymentStatus.addingPaymentMethod || !paymentStatus.addedPaymentMethod" @click="authorizeCard" class="btn btn-primary" :disabled="paymentStatus.addingPaymentMethod">{{messages.button_label_submit_card}}</button>
+        <span v-if="paymentStatus.addedPaymentMethod">{{messages.message_verified_card}}</span>
     </div>
 </template>
 
@@ -13,11 +20,12 @@
         data() {
             return {
                 elements: null,
-                card: null
+                card: null,
+                submitted: false
             }
         },
         computed: {
-            ...mapState('paymentMethods', ['paymentMethod']),
+            ...mapState('paymentMethods', ['paymentMethod', 'paymentStatus', 'paymentInfo']),
             ...mapState('system', ['messages']),
         },
         created () {
@@ -30,8 +38,10 @@
             this.card.mount(this.$refs.card);
         },
         methods: {
-            ...mapActions('paymentMethods', ['setPaymentInfo']),
+            ...mapActions('paymentMethods', ['addAccountPaymentMethod']),
             authorizeCard(e) {
+                const comp = this;
+                console.log('this.errors='+JSON.stringify(this.errors));
                 window.stripe.createToken(this.card).then(function(result) {
                     console.log('authorizedCard: created token='+JSON.stringify(result.token));
                     if (result.error) {
@@ -39,6 +49,16 @@
                         self.hasCardErrors = true;
                         self.$forceUpdate(); // Forcing the DOM to update so the Stripe Element can update.
                         return;
+                    } else {
+                        comp.submitted = true;
+                        comp.addAccountPaymentMethod({
+                            paymentMethod: {
+                                paymentMethodType: 'credit',
+                                paymentInfo: result.token.id
+                            },
+                            messages: comp.messages,
+                            errors: comp.errors
+                        });
                     }
                 });
             }