From d7e5bd2403c4b5f861a98f336c58d2a546287397 Mon Sep 17 00:00:00 2001
From: Alex Kyriakidis <hootlex@icloud.com>
Date: Tue, 4 Sep 2018 15:34:57 +0200
Subject: [PATCH 01/13] communication between forms

---
 src/components/FormAddress.vue     | 12 +++++++++++-
 src/components/FormPlanPicker.vue  |  4 ++++
 src/components/FormReviewOrder.vue | 10 +++++++++-
 src/components/FormUserDetails.vue | 13 ++++++++++++-
 src/components/FormWizard.vue      | 12 ++++++++----
 5 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/src/components/FormAddress.vue b/src/components/FormAddress.vue
index de93a76..86fad3c 100644
--- a/src/components/FormAddress.vue
+++ b/src/components/FormAddress.vue
@@ -6,7 +6,7 @@
       Where should we send your freshly roasted coffee beans?
     </h2>
 
-    <form class="form">
+    <form @input="submit" class="form">
       <div class="form-group">
         <label class="form-label" for="delivery_name">Name</label>
         <input v-model="$v.form.recipient.$model" type="text" placeholder="Recipients Name" class="form-control" id="delivery_name">
@@ -42,6 +42,16 @@
           required
         }
       }
+    },
+    methods: {
+      submit () {
+        if (!this.$v.$invalid) {
+          this.$emit('update', {
+            recipient: this.form.recipient,
+            address: this.form.address
+          })
+        }
+      }
     }
   }
 </script>
diff --git a/src/components/FormPlanPicker.vue b/src/components/FormPlanPicker.vue
index 93d1658..eb0adee 100644
--- a/src/components/FormPlanPicker.vue
+++ b/src/components/FormPlanPicker.vue
@@ -72,6 +72,10 @@
     methods: {
       pickPlan (plan) {
         this.selectedPlan = plan
+
+        this.$emit('update', {
+          plan: this.selectedPlan
+        })
       }
     }
   }
diff --git a/src/components/FormReviewOrder.vue b/src/components/FormReviewOrder.vue
index f674a1b..f69f8cd 100644
--- a/src/components/FormReviewOrder.vue
+++ b/src/components/FormReviewOrder.vue
@@ -43,7 +43,7 @@
         Treat yourself by leveling up your monthly box
       </p>
 
-      <div class="options">
+      <div @change="submit" class="options">
         <div class="option">
           <input v-model="form.chocolate" type="checkbox" value="chocolate" id="chocolate">
           <label for="chocolate">4 pcs. Single Origin Chocolate (+$4/month)</label>
@@ -88,6 +88,14 @@
       totalPrice () {
         return 0
       }
+    },
+    methods: {
+      submit () {
+        this.$emit('update', {
+          chocolate: this.form.chocolate,
+          otherTreat: this.form.otherTreat
+        })
+      }
     }
   }
 </script>
diff --git a/src/components/FormUserDetails.vue b/src/components/FormUserDetails.vue
index 0843aab..1cc7f99 100644
--- a/src/components/FormUserDetails.vue
+++ b/src/components/FormUserDetails.vue
@@ -6,7 +6,7 @@
       Create an account or log in to order your liquid gold subscription
     </h2>
 
-    <form class="form">
+    <form @input="submit" class="form">
       <div class="form-group">
         <label class="form-label" for="email">Email</label>
         <input type="text" v-model="$v.form.email.$model" placeholder="your@email.com" class="form-control" id="email">
@@ -56,6 +56,17 @@
           required
         }
       }
+    },
+    methods: {
+      submit () {
+        if (!this.$v.$invalid) {
+          this.$emit('update', {
+            email: this.form.email,
+            password: this.form.password,
+            name: this.form.name
+          })
+        }
+      }
     }
   }
 </script>
diff --git a/src/components/FormWizard.vue b/src/components/FormWizard.vue
index 508111b..432f937 100644
--- a/src/components/FormWizard.vue
+++ b/src/components/FormWizard.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <FormPlanPicker v-if="currentStepNumber === 1"/>
-    <FormUserDetails v-if="currentStepNumber === 2"/>
-    <FormAddress v-if="currentStepNumber === 3"/>
-    <FormReviewOrder v-if="currentStepNumber === 4"/>
+    <FormPlanPicker v-if="currentStepNumber === 1" @update="processStep"/>
+    <FormUserDetails v-if="currentStepNumber === 2" @update="processStep"/>
+    <FormAddress v-if="currentStepNumber === 3" @update="processStep"/>
+    <FormReviewOrder v-if="currentStepNumber === 4" @update="processStep"/>
 
     <div class="progress-bar">
       <div :style="`width: ${progress}%;`"></div>
@@ -17,6 +17,7 @@
         class="btn-outlined"
       >Back
       </button>
+
       <button
         @click="goNext"
         class="btn"
@@ -62,6 +63,9 @@ export default {
     }
   },
   methods: {
+    processStep (stepData) {
+      Object.assign(this.form, stepData)
+    },
     goBack () {
       this.currentStepNumber--
     },

From 2f259e42691b16f55dc7f8bc1c275bccdb05da77 Mon Sep 17 00:00:00 2001
From: Alex Kyriakidis <hootlex@icloud.com>
Date: Tue, 4 Sep 2018 17:18:25 +0200
Subject: [PATCH 02/13] =?UTF-8?q?disable=20navigation=20until=20step?=
 =?UTF-8?q?=E2=80=99s=20data=20are=20valid?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormWizard.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/FormWizard.vue b/src/components/FormWizard.vue
index 432f937..29a0cff 100644
--- a/src/components/FormWizard.vue
+++ b/src/components/FormWizard.vue
@@ -20,11 +20,10 @@
 
       <button
         @click="goNext"
+        :disabled="!canGoNext"
         class="btn"
       >Next</button>
     </div>
-
-    <pre><code>{{form}}</code></pre>
   </div>
 </template>
 
@@ -44,6 +43,7 @@ export default {
   data () {
     return {
       currentStepNumber: 1,
+      canGoNext: false,
       length: 4,
       form: {
         plan: null,
@@ -65,12 +65,14 @@ export default {
   methods: {
     processStep (stepData) {
       Object.assign(this.form, stepData)
+      this.canGoNext = true
     },
     goBack () {
       this.currentStepNumber--
     },
     goNext () {
       this.currentStepNumber++
+      this.canGoNext = false
     }
   }
 }

From 9cecc7091aee20e6085823240471294118980839 Mon Sep 17 00:00:00 2001
From: Alex Kyriakidis <hootlex@icloud.com>
Date: Tue, 4 Sep 2018 18:01:05 +0200
Subject: [PATCH 03/13] =?UTF-8?q?pass=20down=20mama=20form=E2=80=99s=20dat?=
 =?UTF-8?q?a?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormAddress.vue     |  8 +++++++-
 src/components/FormReviewOrder.vue | 25 +++++++++++++++++++------
 src/components/FormWizard.vue      |  4 ++--
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/components/FormAddress.vue b/src/components/FormAddress.vue
index 86fad3c..4623eea 100644
--- a/src/components/FormAddress.vue
+++ b/src/components/FormAddress.vue
@@ -25,11 +25,17 @@
 <script>
   import {required} from 'vuelidate/lib/validators'
   export default {
+    props: {
+      wizardData: {
+        type: Object,
+        required: true
+      }
+    },
     data () {
       return {
         form: {
           address: null,
-          recipient: null
+          recipient: this.wizardData.name
         }
       }
     },
diff --git a/src/components/FormReviewOrder.vue b/src/components/FormReviewOrder.vue
index f69f8cd..7b6f78b 100644
--- a/src/components/FormReviewOrder.vue
+++ b/src/components/FormReviewOrder.vue
@@ -16,15 +16,15 @@
       <div class="plans">
         <div class="plan active-plan">
           <div class="weight">
-            PLAN WEIGHT
+            {{wizardData.plan.weight}}
           </div>
 
           <div class="description">
             <span class="title">
-              PLAN NAME
+              {{wizardData.plan.name}}
             </span>
             <span class="description">
-              PLAN DESC
+              {{wizardData.plan.description}}
             </span>
           </div>
 
@@ -64,9 +64,9 @@
         </div>
 
         <div class="w-1/3">
-          <h3>RECIPIENT</h3>
+          <h3>{{wizardData.recipient}}</h3>
           <p class="leading-normal">
-            ADDRESS
+            {{wizardData.address}}
           </p>
         </div>
       </div>
@@ -76,6 +76,12 @@
 
 <script>
   export default {
+    props: {
+      wizardData: {
+        type: Object,
+        required: true
+      }
+    },
     data () {
       return {
         form: {
@@ -86,7 +92,14 @@
     },
     computed: {
       totalPrice () {
-        return 0
+        let total = this.wizardData.plan.price
+        if (this.form.chocolate) {
+          total += 4
+        }
+        if (this.form.otherTreat) {
+          total += 2
+        }
+        return total
       }
     },
     methods: {
diff --git a/src/components/FormWizard.vue b/src/components/FormWizard.vue
index 29a0cff..22d5448 100644
--- a/src/components/FormWizard.vue
+++ b/src/components/FormWizard.vue
@@ -2,8 +2,8 @@
   <div>
     <FormPlanPicker v-if="currentStepNumber === 1" @update="processStep"/>
     <FormUserDetails v-if="currentStepNumber === 2" @update="processStep"/>
-    <FormAddress v-if="currentStepNumber === 3" @update="processStep"/>
-    <FormReviewOrder v-if="currentStepNumber === 4" @update="processStep"/>
+    <FormAddress v-if="currentStepNumber === 3" @update="processStep" :wizard-data="form"/>
+    <FormReviewOrder v-if="currentStepNumber === 4" @update="processStep" :wizard-data="form"/>
 
     <div class="progress-bar">
       <div :style="`width: ${progress}%;`"></div>

From fb074c4fc76cc5ec61762ff3e99b41a6d47ab68a Mon Sep 17 00:00:00 2001
From: Alex Kyriakidis <hootlex@icloud.com>
Date: Tue, 4 Sep 2018 18:31:18 +0200
Subject: [PATCH 04/13] dynamic components

---
 src/components/FormWizard.vue | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/FormWizard.vue b/src/components/FormWizard.vue
index 22d5448..2de7772 100644
--- a/src/components/FormWizard.vue
+++ b/src/components/FormWizard.vue
@@ -1,9 +1,10 @@
 <template>
   <div>
-    <FormPlanPicker v-if="currentStepNumber === 1" @update="processStep"/>
-    <FormUserDetails v-if="currentStepNumber === 2" @update="processStep"/>
-    <FormAddress v-if="currentStepNumber === 3" @update="processStep" :wizard-data="form"/>
-    <FormReviewOrder v-if="currentStepNumber === 4" @update="processStep" :wizard-data="form"/>
+    <component
+      :is="currentStep"
+      @update="processStep"
+      :wizard-data="form"
+    ></component>
 
     <div class="progress-bar">
       <div :style="`width: ${progress}%;`"></div>
@@ -44,7 +45,12 @@ export default {
     return {
       currentStepNumber: 1,
       canGoNext: false,
-      length: 4,
+      steps: [
+        'FormPlanPicker',
+        'FormUserDetails',
+        'FormAddress',
+        'FormReviewOrder'
+      ],
       form: {
         plan: null,
         email: null,
@@ -58,6 +64,12 @@ export default {
     }
   },
   computed: {
+    length () {
+      return this.steps.length
+    },
+    currentStep () {
+      return this.steps[this.currentStepNumber - 1]
+    },
     progress () {
       return this.currentStepNumber/this.length * 100
     }

From 1158a9a4ef6e3fd198c23e65a7fce481625a108b Mon Sep 17 00:00:00 2001
From: Alex Kyriakidis <hootlex@icloud.com>
Date: Wed, 5 Sep 2018 17:16:31 +0200
Subject: [PATCH 05/13] =?UTF-8?q?preserve=20component=E2=80=99s=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormAddress.vue     |  9 +++++----
 src/components/FormPlanPicker.vue  |  5 ++++-
 src/components/FormReviewOrder.vue |  7 +++++--
 src/components/FormUserDetails.vue |  9 +++++----
 src/components/FormWizard.vue      | 19 +++++++++++--------
 5 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/components/FormAddress.vue b/src/components/FormAddress.vue
index 4623eea..a9df381 100644
--- a/src/components/FormAddress.vue
+++ b/src/components/FormAddress.vue
@@ -51,12 +51,13 @@
     },
     methods: {
       submit () {
-        if (!this.$v.$invalid) {
-          this.$emit('update', {
+        this.$emit('update', {
+          data: {
             recipient: this.form.recipient,
             address: this.form.address
-          })
-        }
+          },
+          valid: !this.$v.$invalid
+        })
       }
     }
   }
diff --git a/src/components/FormPlanPicker.vue b/src/components/FormPlanPicker.vue
index eb0adee..10b3781 100644
--- a/src/components/FormPlanPicker.vue
+++ b/src/components/FormPlanPicker.vue
@@ -74,7 +74,10 @@
         this.selectedPlan = plan
 
         this.$emit('update', {
-          plan: this.selectedPlan
+          data: {
+            plan: this.selectedPlan
+          },
+          valid: !this.$v.$invalid
         })
       }
     }
diff --git a/src/components/FormReviewOrder.vue b/src/components/FormReviewOrder.vue
index 7b6f78b..9a131e1 100644
--- a/src/components/FormReviewOrder.vue
+++ b/src/components/FormReviewOrder.vue
@@ -105,8 +105,11 @@
     methods: {
       submit () {
         this.$emit('update', {
-          chocolate: this.form.chocolate,
-          otherTreat: this.form.otherTreat
+          data: {
+            chocolate: this.form.chocolate,
+            otherTreat: this.form.otherTreat
+          },
+          valid: true
         })
       }
     }
diff --git a/src/components/FormUserDetails.vue b/src/components/FormUserDetails.vue
index 1cc7f99..5c80343 100644
--- a/src/components/FormUserDetails.vue
+++ b/src/components/FormUserDetails.vue
@@ -59,13 +59,14 @@
     },
     methods: {
       submit () {
-        if (!this.$v.$invalid) {
-          this.$emit('update', {
+        this.$emit('update', {
+          data: {
             email: this.form.email,
             password: this.form.password,
             name: this.form.name
-          })
-        }
+          },
+          valid: !this.$v.$invalid
+        })
       }
     }
   }
diff --git a/src/components/FormWizard.vue b/src/components/FormWizard.vue
index 2de7772..e1db5b7 100644
--- a/src/components/FormWizard.vue
+++ b/src/components/FormWizard.vue
@@ -1,10 +1,12 @@
 <template>
   <div>
-    <component
-      :is="currentStep"
-      @update="processStep"
-      :wizard-data="form"
-    ></component>
+    <keep-alive>
+      <component
+        :is="currentStep"
+        @update="processStep"
+        :wizard-data="form"
+      ></component>
+    </keep-alive>
 
     <div class="progress-bar">
       <div :style="`width: ${progress}%;`"></div>
@@ -75,12 +77,13 @@ export default {
     }
   },
   methods: {
-    processStep (stepData) {
-      Object.assign(this.form, stepData)
-      this.canGoNext = true
+    processStep (step) {
+      Object.assign(this.form, step.data)
+      this.canGoNext = step.valid
     },
     goBack () {
       this.currentStepNumber--
+      this.canGoNext = true
     },
     goNext () {
       this.currentStepNumber++

From bd42985393f24b4a1f86069a590a0d3fc4eb342e Mon Sep 17 00:00:00 2001
From: Alex Kyriakidis <hootlex@icloud.com>
Date: Wed, 5 Sep 2018 17:40:11 +0200
Subject: [PATCH 06/13] control child component through refs

---
 src/components/FormPlanPicker.vue  | 4 +++-
 src/components/FormReviewOrder.vue | 1 +
 src/components/FormWizard.vue      | 6 +++++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/FormPlanPicker.vue b/src/components/FormPlanPicker.vue
index 10b3781..d6c671f 100644
--- a/src/components/FormPlanPicker.vue
+++ b/src/components/FormPlanPicker.vue
@@ -72,7 +72,9 @@
     methods: {
       pickPlan (plan) {
         this.selectedPlan = plan
-
+        this.submit()
+      },
+      submit () {
         this.$emit('update', {
           data: {
             plan: this.selectedPlan
diff --git a/src/components/FormReviewOrder.vue b/src/components/FormReviewOrder.vue
index 9a131e1..102612d 100644
--- a/src/components/FormReviewOrder.vue
+++ b/src/components/FormReviewOrder.vue
@@ -102,6 +102,7 @@
         return total
       }
     },
+    validations: {},
     methods: {
       submit () {
         this.$emit('update', {
diff --git a/src/components/FormWizard.vue b/src/components/FormWizard.vue
index e1db5b7..5b65909 100644
--- a/src/components/FormWizard.vue
+++ b/src/components/FormWizard.vue
@@ -2,6 +2,7 @@
   <div>
     <keep-alive>
       <component
+        ref="currentStep"
         :is="currentStep"
         @update="processStep"
         :wizard-data="form"
@@ -87,7 +88,10 @@ export default {
     },
     goNext () {
       this.currentStepNumber++
-      this.canGoNext = false
+      // this.canGoNext = false
+      this.$nextTick(() => {
+        this.canGoNext = !this.$refs.currentStep.$v.$invalid
+      })
     }
   }
 }

From 2e7e76dee097ca9c5d2670878433f4f356fb57fc Mon Sep 17 00:00:00 2001
From: Alex Kyriakidis <hootlex@icloud.com>
Date: Wed, 5 Sep 2018 17:52:52 +0200
Subject: [PATCH 07/13] handle form completion

---
 src/components/FormWizard.vue | 80 +++++++++++++++++++++++++----------
 1 file changed, 57 insertions(+), 23 deletions(-)

diff --git a/src/components/FormWizard.vue b/src/components/FormWizard.vue
index 5b65909..8eafb75 100644
--- a/src/components/FormWizard.vue
+++ b/src/components/FormWizard.vue
@@ -1,37 +1,51 @@
 <template>
   <div>
-    <keep-alive>
-      <component
-        ref="currentStep"
-        :is="currentStep"
-        @update="processStep"
-        :wizard-data="form"
-      ></component>
-    </keep-alive>
+    <div v-if="wizardInProgress">
+      <keep-alive>
+        <component
+          ref="currentStep"
+          :is="currentStep"
+          @update="processStep"
+          :wizard-data="form"
+        ></component>
+      </keep-alive>
 
-    <div class="progress-bar">
-      <div :style="`width: ${progress}%;`"></div>
+      <div class="progress-bar">
+        <div :style="`width: ${progress}%;`"></div>
+      </div>
+
+      <!-- Actions -->
+      <div class="buttons">
+        <button
+          @click="goBack"
+          v-if="currentStepNumber > 1"
+          class="btn-outlined"
+        >Back
+        </button>
+
+        <button
+          @click="nextButtonAction"
+          :disabled="!canGoNext"
+          class="btn"
+        >{{isLastStep ? 'Complete Order' : 'Next'}}</button>
+      </div>
     </div>
 
-    <!-- Actions -->
-    <div class="buttons">
-      <button
-        @click="goBack"
-        v-if="currentStepNumber > 1"
-        class="btn-outlined"
-      >Back
-      </button>
+    <div v-else>
+      <h1 class="title">Thank you!</h1>
+      <h2 class="subtitle">
+        We look forward to shipping you your first box!
+      </h2>
 
-      <button
-        @click="goNext"
-        :disabled="!canGoNext"
-        class="btn"
-      >Next</button>
+      <p class="text-center">
+        <a href="https://vueschool.io" target="_blank" class="btn">Go somewhere cool!</a>
+      </p>
     </div>
   </div>
 </template>
 
 <script>
+import {postFormToDB} from '../api'
 import FormPlanPicker from './FormPlanPicker'
 import FormUserDetails from './FormUserDetails'
 import FormAddress from './FormAddress'
@@ -67,6 +81,12 @@ export default {
     }
   },
   computed: {
+    isLastStep () {
+      return this.currentStepNumber === this.length
+    },
+    wizardInProgress () {
+      return this.currentStepNumber <= this.length
+    },
     length () {
       return this.steps.length
     },
@@ -78,6 +98,20 @@ export default {
     }
   },
   methods: {
+    submitOrder () {
+      postFormToDB(this.form)
+        .then(() => {
+          console.log('form submitted', this.form)
+          this.currentStepNumber++
+        })
+    },
+    nextButtonAction () {
+      if (this.isLastStep) {
+        this.submitOrder()
+      } else {
+        this.goNext()
+      }
+    },
     processStep (step) {
       Object.assign(this.form, step.data)
       this.canGoNext = step.valid

From be6859375eb31bfcb7ee48a3654aa424d061aed0 Mon Sep 17 00:00:00 2001
From: Alex Kyriakidis <hootlex@icloud.com>
Date: Wed, 5 Sep 2018 18:24:29 +0200
Subject: [PATCH 08/13] add asynchronous state to the form

---
 src/components/FormWizard.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/FormWizard.vue b/src/components/FormWizard.vue
index 8eafb75..0453a5a 100644
--- a/src/components/FormWizard.vue
+++ b/src/components/FormWizard.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-if="wizardInProgress">
+    <div v-if="wizardInProgress" v-show="asyncState !== 'pending'">
       <keep-alive>
         <component
           ref="currentStep"
@@ -41,6 +41,13 @@
         <a href="https://vueschool.io" target="_blank" class="btn">Go somewhere cool!</a>
       </p>
     </div>
+
+    <div class="loading-wrapper" v-if="asyncState === 'pending'">
+      <div class="loader">
+        <img src="/spinner.svg" alt="">
+        <p>Please wait, we're hitting our servers!</p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -62,6 +69,7 @@ export default {
     return {
       currentStepNumber: 1,
       canGoNext: false,
+      asyncState: null,
       steps: [
         'FormPlanPicker',
         'FormUserDetails',
@@ -99,9 +107,11 @@ export default {
   },
   methods: {
     submitOrder () {
+      this.asyncState = 'pending'
       postFormToDB(this.form)
         .then(() => {
           console.log('form submitted', this.form)
+          this.asyncState = 'success'
           this.currentStepNumber++
         })
     },

From f9650c0902ec0a22a461bdf4bb5fbf79e987fcab Mon Sep 17 00:00:00 2001
From: Alex Kyriakidis <hootlex@icloud.com>
Date: Wed, 5 Sep 2018 19:09:48 +0200
Subject: [PATCH 09/13] asynchronous operations inside steps

---
 src/components/FormUserDetails.vue | 70 +++++++++++++++++++++++++++---
 1 file changed, 64 insertions(+), 6 deletions(-)

diff --git a/src/components/FormUserDetails.vue b/src/components/FormUserDetails.vue
index 5c80343..4520d46 100644
--- a/src/components/FormUserDetails.vue
+++ b/src/components/FormUserDetails.vue
@@ -6,32 +6,40 @@
       Create an account or log in to order your liquid gold subscription
     </h2>
 
-    <form @input="submit" class="form">
+    <form v-if="!loggedIn" @input="submit" class="form">
       <div class="form-group">
         <label class="form-label" for="email">Email</label>
-        <input type="text" v-model="$v.form.email.$model" placeholder="your@email.com" class="form-control" id="email">
+        <input type="text" @input="checkIfUserExists" v-model="$v.form.email.$model" placeholder="your@email.com" class="form-control" id="email">
         <div v-if="$v.form.email.$error && !$v.form.email.required" class="error">email is required</div>
         <div v-if="$v.form.email.$error && !$v.form.email.email" class="error">email is invalid</div>
       </div>
 
 
-      <div class="form-group">
+      <div v-if="emailCheckedInDB" class="form-group">
         <label class="form-label" for="password">Password</label>
         <input v-model="$v.form.password.$model" type="password" placeholder="Super Secret Password" class="form-control" id="password">
         <div v-if="$v.form.password.$error && !$v.form.password.required" class="error">password is required</div>
+        <div v-if="$v.form.password.$error && !$v.form.password.correct" class="error">password is invalid - try again</div>
       </div>
 
+      <div v-if="existingUser" class="form-group">
+        <button @click.prevent="login" class="btn">Login</button>
+      </div>
 
-      <div class="form-group">
+      <div v-if="emailCheckedInDB && !existingUser" class="form-group">
         <label class="form-label" for="name">Name</label>
         <input v-model="$v.form.name.$model" type="text" placeholder="What should we call you?" class="form-control" id="name">
         <div v-if="$v.form.name.$error" class="error">name is required</div>
       </div>
     </form>
+    <div v-else class="text-center">
+      Successfully logged in! <a href="#" @click="reset">Not {{form.name}}?</a>
+    </div>
   </div>
 </template>
 
 <script>
+  import {authenticateUser, checkIfUserExistsInDB} from "../api";
   import {required, email} from 'vuelidate/lib/validators'
   export default {
     data () {
@@ -40,7 +48,15 @@
           email: null,
           password: null,
           name: null,
-        }
+        },
+        emailCheckedInDB: false,
+        existingUser: false,
+        wrongPassword: false
+      }
+    },
+    computed: {
+      loggedIn () {
+        return this.existingUser && this.form.name
       }
     },
     validations: {
@@ -50,7 +66,10 @@
           email
         },
         password: {
-          required
+          required,
+          correct () {
+            return !this.wrongPassword
+          }
         },
         name: {
           required
@@ -58,6 +77,45 @@
       }
     },
     methods: {
+      checkIfUserExists () {
+        if (!this.$v.form.email.$invalid) {
+          return checkIfUserExistsInDB(this.form.email)
+            .then(() => {
+              // USER EXISTS
+              this.existingUser = true
+              this.emailCheckedInDB = true
+            })
+            .catch(() => {
+              // USER DOESN'T EXIST
+              this.existingUser = false
+              this.emailCheckedInDB = true
+            })
+        }
+      },
+      login () {
+        this.wrongPassword = false
+        if (!this.$v.form.password.$invalid) {
+          return authenticateUser(this.form.email, this.form.password)
+            .then(user => {
+              // LOGGED IN
+              this.form.name = user.name
+              this.submit()
+            })
+            .catch(() => {
+              // WRONG PASSWORD?
+              this.wrongPassword = true
+            })
+        }
+      },
+      reset () {
+        this.form.email = null
+        this.form.password = null
+        this.form.name = null
+        this.emailCheckedInDB = false
+        this.wrongPassword = false
+        this.existingUser = false
+        this.$v.$reset()
+      },
       submit () {
         this.$emit('update', {
           data: {

From b2d6ae7316b06dec3210e9014288f4cb8f9001fc Mon Sep 17 00:00:00 2001
From: Alex Kyriakidis <hootlex@icloud.com>
Date: Wed, 5 Sep 2018 19:29:46 +0200
Subject: [PATCH 10/13] update recipient on activated

---
 src/components/FormAddress.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/FormAddress.vue b/src/components/FormAddress.vue
index a9df381..da48410 100644
--- a/src/components/FormAddress.vue
+++ b/src/components/FormAddress.vue
@@ -39,6 +39,9 @@
         }
       }
     },
+    activated () {
+      this.form.recipient = this.wizardData.name
+    },
     validations: {
       form: {
         address: {

From 216bd89395d6507018f56370e53cf0972152e94b Mon Sep 17 00:00:00 2001
From: Alex Kyriakidis <hootlex@icloud.com>
Date: Thu, 6 Sep 2018 15:50:28 +0200
Subject: [PATCH 11/13] =?UTF-8?q?update=20parent=E2=80=99s=20async=20state?=
 =?UTF-8?q?=20while=20running=20asynchronous=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormUserDetails.vue | 6 ++++++
 src/components/FormWizard.vue      | 4 ++++
 2 files changed, 10 insertions(+)

diff --git a/src/components/FormUserDetails.vue b/src/components/FormUserDetails.vue
index 4520d46..d09a2f4 100644
--- a/src/components/FormUserDetails.vue
+++ b/src/components/FormUserDetails.vue
@@ -79,31 +79,37 @@
     methods: {
       checkIfUserExists () {
         if (!this.$v.form.email.$invalid) {
+          this.$emit('updateAsyncState', 'pending')
           return checkIfUserExistsInDB(this.form.email)
             .then(() => {
               // USER EXISTS
               this.existingUser = true
               this.emailCheckedInDB = true
+              this.$emit('updateAsyncState', 'success')
             })
             .catch(() => {
               // USER DOESN'T EXIST
               this.existingUser = false
               this.emailCheckedInDB = true
+              this.$emit('updateAsyncState', 'success')
             })
         }
       },
       login () {
         this.wrongPassword = false
         if (!this.$v.form.password.$invalid) {
+          this.$emit('updateAsyncState', 'pending')
           return authenticateUser(this.form.email, this.form.password)
             .then(user => {
               // LOGGED IN
               this.form.name = user.name
               this.submit()
+              this.$emit('updateAsyncState', 'success')
             })
             .catch(() => {
               // WRONG PASSWORD?
               this.wrongPassword = true
+              this.$emit('updateAsyncState', 'success')
             })
         }
       },
diff --git a/src/components/FormWizard.vue b/src/components/FormWizard.vue
index 0453a5a..3d6f171 100644
--- a/src/components/FormWizard.vue
+++ b/src/components/FormWizard.vue
@@ -6,6 +6,7 @@
           ref="currentStep"
           :is="currentStep"
           @update="processStep"
+          @updateAsyncState="updateAsyncState"
           :wizard-data="form"
         ></component>
       </keep-alive>
@@ -106,6 +107,9 @@ export default {
     }
   },
   methods: {
+    updateAsyncState (state) {
+      this.asyncState = state
+    },
     submitOrder () {
       this.asyncState = 'pending'
       postFormToDB(this.form)

From aac09a74c7077f8c41756580b3397e87e24055e7 Mon Sep 17 00:00:00 2001
From: Alex Kyriakidis <hootlex@icloud.com>
Date: Thu, 6 Sep 2018 16:55:17 +0200
Subject: [PATCH 12/13] communication with Promises instead of events

---
 src/components/FormAddress.vue     | 18 +++++----
 src/components/FormPlanPicker.vue  | 15 +++++---
 src/components/FormReviewOrder.vue | 11 ++----
 src/components/FormUserDetails.vue | 60 +++++++++++++++++++++++-------
 src/components/FormWizard.vue      | 27 +++++---------
 5 files changed, 80 insertions(+), 51 deletions(-)

diff --git a/src/components/FormAddress.vue b/src/components/FormAddress.vue
index da48410..ac1785c 100644
--- a/src/components/FormAddress.vue
+++ b/src/components/FormAddress.vue
@@ -6,7 +6,7 @@
       Where should we send your freshly roasted coffee beans?
     </h2>
 
-    <form @input="submit" class="form">
+    <form class="form">
       <div class="form-group">
         <label class="form-label" for="delivery_name">Name</label>
         <input v-model="$v.form.recipient.$model" type="text" placeholder="Recipients Name" class="form-control" id="delivery_name">
@@ -54,12 +54,16 @@
     },
     methods: {
       submit () {
-        this.$emit('update', {
-          data: {
-            recipient: this.form.recipient,
-            address: this.form.address
-          },
-          valid: !this.$v.$invalid
+        this.$v.$touch()
+        return new Promise((resolve, reject) => {
+          if (!this.$v.$invalid) {
+            resolve({
+              recipient: this.form.recipient,
+              address: this.form.address
+            })
+          } else {
+            reject('invalid address')
+          }
         })
       }
     }
diff --git a/src/components/FormPlanPicker.vue b/src/components/FormPlanPicker.vue
index d6c671f..462d2fc 100644
--- a/src/components/FormPlanPicker.vue
+++ b/src/components/FormPlanPicker.vue
@@ -72,14 +72,17 @@
     methods: {
       pickPlan (plan) {
         this.selectedPlan = plan
-        this.submit()
       },
       submit () {
-        this.$emit('update', {
-          data: {
-            plan: this.selectedPlan
-          },
-          valid: !this.$v.$invalid
+        this.$v.$touch()
+        return new Promise((resolve, reject) => {
+          if (!this.$v.$invalid) {
+            resolve({
+              plan: this.selectedPlan
+            })
+          } else {
+            reject('plan not selected')
+          }
         })
       }
     }
diff --git a/src/components/FormReviewOrder.vue b/src/components/FormReviewOrder.vue
index 102612d..4fd6582 100644
--- a/src/components/FormReviewOrder.vue
+++ b/src/components/FormReviewOrder.vue
@@ -43,7 +43,7 @@
         Treat yourself by leveling up your monthly box
       </p>
 
-      <div @change="submit" class="options">
+      <div class="options">
         <div class="option">
           <input v-model="form.chocolate" type="checkbox" value="chocolate" id="chocolate">
           <label for="chocolate">4 pcs. Single Origin Chocolate (+$4/month)</label>
@@ -105,12 +105,9 @@
     validations: {},
     methods: {
       submit () {
-        this.$emit('update', {
-          data: {
-            chocolate: this.form.chocolate,
-            otherTreat: this.form.otherTreat
-          },
-          valid: true
+        return Promise.resolve({
+          chocolate: this.form.chocolate,
+          otherTreat: this.form.otherTreat
         })
       }
     }
diff --git a/src/components/FormUserDetails.vue b/src/components/FormUserDetails.vue
index d09a2f4..5740f11 100644
--- a/src/components/FormUserDetails.vue
+++ b/src/components/FormUserDetails.vue
@@ -6,10 +6,13 @@
       Create an account or log in to order your liquid gold subscription
     </h2>
 
-    <form v-if="!loggedIn" @input="submit" class="form">
+    <form v-if="!loggedIn" class="form">
       <div class="form-group">
         <label class="form-label" for="email">Email</label>
-        <input type="text" @input="checkIfUserExists" v-model="$v.form.email.$model" placeholder="your@email.com" class="form-control" id="email">
+        <input type="text" v-model="$v.form.email.$model" :disabled="emailCheckedInDB" placeholder="your@email.com" class="form-control" id="email">
+        <div v-if="emailCheckedInDB" class="error info">
+          <a href="#" @click="reset">Not you?</a>
+        </div>
         <div v-if="$v.form.email.$error && !$v.form.email.required" class="error">email is required</div>
         <div v-if="$v.form.email.$error && !$v.form.email.email" class="error">email is invalid</div>
       </div>
@@ -22,10 +25,6 @@
         <div v-if="$v.form.password.$error && !$v.form.password.correct" class="error">password is invalid - try again</div>
       </div>
 
-      <div v-if="existingUser" class="form-group">
-        <button @click.prevent="login" class="btn">Login</button>
-      </div>
-
       <div v-if="emailCheckedInDB && !existingUser" class="form-group">
         <label class="form-label" for="name">Name</label>
         <input v-model="$v.form.name.$model" type="text" placeholder="What should we call you?" class="form-control" id="name">
@@ -93,6 +92,8 @@
               this.emailCheckedInDB = true
               this.$emit('updateAsyncState', 'success')
             })
+        } else {
+          return Promise.reject('email is invalid')
         }
       },
       login () {
@@ -103,7 +104,6 @@
             .then(user => {
               // LOGGED IN
               this.form.name = user.name
-              this.submit()
               this.$emit('updateAsyncState', 'success')
             })
             .catch(() => {
@@ -111,6 +111,8 @@
               this.wrongPassword = true
               this.$emit('updateAsyncState', 'success')
             })
+        } else {
+          return Promise.reject('password is invalid')
         }
       },
       reset () {
@@ -123,14 +125,44 @@
         this.$v.$reset()
       },
       submit () {
-        this.$emit('update', {
-          data: {
-            email: this.form.email,
-            password: this.form.password,
-            name: this.form.name
-          },
-          valid: !this.$v.$invalid
+        let job
+        if (!this.emailCheckedInDB) {
+          this.$v.form.email.$touch()
+          job = this.checkIfUserExists()
+        } else {
+          if (this.existingUser && !this.loggedIn) {
+            this.$v.form.password.$touch()
+            job = this.login()
+          } else {
+            // new user is typing info manually
+            this.$v.$touch()
+            job = Promise.resolve()
+          }
+        }
+
+        return new Promise((resolve, reject) => {
+          job.then(() => {
+            if (!this.$v.$invalid) {
+              resolve({
+                email: this.form.email,
+                password: this.form.password,
+                name: this.form.name
+              })
+            } else {
+              reject('data is not valid yet')
+            }
+          })
+            .catch(error => reject(error))
         })
+
+        // this.$emit('update', {
+        //   data: {
+        //     email: this.form.email,
+        //     password: this.form.password,
+        //     name: this.form.name
+        //   },
+        //   valid: !this.$v.$invalid
+        // })
       }
     }
   }
diff --git a/src/components/FormWizard.vue b/src/components/FormWizard.vue
index 3d6f171..a953bca 100644
--- a/src/components/FormWizard.vue
+++ b/src/components/FormWizard.vue
@@ -5,7 +5,6 @@
         <component
           ref="currentStep"
           :is="currentStep"
-          @update="processStep"
           @updateAsyncState="updateAsyncState"
           :wizard-data="form"
         ></component>
@@ -26,7 +25,6 @@
 
         <button
           @click="nextButtonAction"
-          :disabled="!canGoNext"
           class="btn"
         >{{isLastStep ? 'Complete Order' : 'Next'}}</button>
       </div>
@@ -69,7 +67,6 @@ export default {
   data () {
     return {
       currentStepNumber: 1,
-      canGoNext: false,
       asyncState: null,
       steps: [
         'FormPlanPicker',
@@ -120,26 +117,22 @@ export default {
         })
     },
     nextButtonAction () {
-      if (this.isLastStep) {
-        this.submitOrder()
-      } else {
-        this.goNext()
-      }
-    },
-    processStep (step) {
-      Object.assign(this.form, step.data)
-      this.canGoNext = step.valid
+      this.$refs.currentStep.submit()
+        .then(stepData => {
+          Object.assign(this.form, stepData)
+          if (this.isLastStep) {
+            this.submitOrder()
+          } else {
+            this.goNext()
+          }
+        })
+        .catch(error => console.log(error))
     },
     goBack () {
       this.currentStepNumber--
-      this.canGoNext = true
     },
     goNext () {
       this.currentStepNumber++
-      // this.canGoNext = false
-      this.$nextTick(() => {
-        this.canGoNext = !this.$refs.currentStep.$v.$invalid
-      })
     }
   }
 }

From 4e4f770dbb8ba79f589e38d81417f9181aeaca64 Mon Sep 17 00:00:00 2001
From: Alex Kyriakidis <hootlex@icloud.com>
Date: Wed, 19 Sep 2018 12:07:11 +0200
Subject: [PATCH 13/13] add package.json

---
 package.json | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 package.json

diff --git a/package.json b/package.json
new file mode 100644
index 0000000..5230210
--- /dev/null
+++ b/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "form-wizard",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "vue": "^2.5.17",
+    "vuelidate": "^0.7.4"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.0.0",
+    "@vue/cli-plugin-eslint": "^3.0.0",
+    "@vue/cli-service": "^3.0.0",
+    "vue-template-compiler": "^2.5.17"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {
+      "no-console": 0
+    },
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}