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"
+  ]
+}
diff --git a/src/components/FormAddress.vue b/src/components/FormAddress.vue
index de93a76..ac1785c 100644
--- a/src/components/FormAddress.vue
+++ b/src/components/FormAddress.vue
@@ -25,14 +25,23 @@
 <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
         }
       }
     },
+    activated () {
+      this.form.recipient = this.wizardData.name
+    },
     validations: {
       form: {
         address: {
@@ -42,6 +51,21 @@
           required
         }
       }
+    },
+    methods: {
+      submit () {
+        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')
+          }
+        })
+      }
     }
   }
 </script>
diff --git a/src/components/FormPlanPicker.vue b/src/components/FormPlanPicker.vue
index 93d1658..462d2fc 100644
--- a/src/components/FormPlanPicker.vue
+++ b/src/components/FormPlanPicker.vue
@@ -72,6 +72,18 @@
     methods: {
       pickPlan (plan) {
         this.selectedPlan = plan
+      },
+      submit () {
+        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 f674a1b..4fd6582 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,23 @@
     },
     computed: {
       totalPrice () {
-        return 0
+        let total = this.wizardData.plan.price
+        if (this.form.chocolate) {
+          total += 4
+        }
+        if (this.form.otherTreat) {
+          total += 2
+        }
+        return total
+      }
+    },
+    validations: {},
+    methods: {
+      submit () {
+        return Promise.resolve({
+          chocolate: this.form.chocolate,
+          otherTreat: this.form.otherTreat
+        })
       }
     }
   }
diff --git a/src/components/FormUserDetails.vue b/src/components/FormUserDetails.vue
index 0843aab..5740f11 100644
--- a/src/components/FormUserDetails.vue
+++ b/src/components/FormUserDetails.vue
@@ -6,32 +6,39 @@
       Create an account or log in to order your liquid gold subscription
     </h2>
 
-    <form class="form">
+    <form v-if="!loggedIn" 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" 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>
 
 
-      <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 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 +47,15 @@
           email: null,
           password: null,
           name: null,
-        }
+        },
+        emailCheckedInDB: false,
+        existingUser: false,
+        wrongPassword: false
+      }
+    },
+    computed: {
+      loggedIn () {
+        return this.existingUser && this.form.name
       }
     },
     validations: {
@@ -50,12 +65,105 @@
           email
         },
         password: {
-          required
+          required,
+          correct () {
+            return !this.wrongPassword
+          }
         },
         name: {
           required
         }
       }
+    },
+    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')
+            })
+        } else {
+          return Promise.reject('email is invalid')
+        }
+      },
+      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.$emit('updateAsyncState', 'success')
+            })
+            .catch(() => {
+              // WRONG PASSWORD?
+              this.wrongPassword = true
+              this.$emit('updateAsyncState', 'success')
+            })
+        } else {
+          return Promise.reject('password is invalid')
+        }
+      },
+      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 () {
+        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
+        // })
+      }
     }
   }
 </script>
diff --git a/src/components/FormWizard.vue b/src/components/FormWizard.vue
index 508111b..a953bca 100644
--- a/src/components/FormWizard.vue
+++ b/src/components/FormWizard.vue
@@ -1,33 +1,57 @@
 <template>
   <div>
-    <FormPlanPicker v-if="currentStepNumber === 1"/>
-    <FormUserDetails v-if="currentStepNumber === 2"/>
-    <FormAddress v-if="currentStepNumber === 3"/>
-    <FormReviewOrder v-if="currentStepNumber === 4"/>
+    <div v-if="wizardInProgress" v-show="asyncState !== 'pending'">
+      <keep-alive>
+        <component
+          ref="currentStep"
+          :is="currentStep"
+          @updateAsyncState="updateAsyncState"
+          :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"
+          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>
-      <button
-        @click="goNext"
-        class="btn"
-      >Next</button>
+    <div v-else>
+      <h1 class="title">Thank you!</h1>
+      <h2 class="subtitle">
+        We look forward to shipping you your first box!
+      </h2>
+
+      <p class="text-center">
+        <a href="https://vueschool.io" target="_blank" class="btn">Go somewhere cool!</a>
+      </p>
     </div>
 
-    <pre><code>{{form}}</code></pre>
+    <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>
 
 <script>
+import {postFormToDB} from '../api'
 import FormPlanPicker from './FormPlanPicker'
 import FormUserDetails from './FormUserDetails'
 import FormAddress from './FormAddress'
@@ -43,7 +67,13 @@ export default {
   data () {
     return {
       currentStepNumber: 1,
-      length: 4,
+      asyncState: null,
+      steps: [
+        'FormPlanPicker',
+        'FormUserDetails',
+        'FormAddress',
+        'FormReviewOrder'
+      ],
       form: {
         plan: null,
         email: null,
@@ -57,11 +87,47 @@ export default {
     }
   },
   computed: {
+    isLastStep () {
+      return this.currentStepNumber === this.length
+    },
+    wizardInProgress () {
+      return this.currentStepNumber <= this.length
+    },
+    length () {
+      return this.steps.length
+    },
+    currentStep () {
+      return this.steps[this.currentStepNumber - 1]
+    },
     progress () {
       return this.currentStepNumber/this.length * 100
     }
   },
   methods: {
+    updateAsyncState (state) {
+      this.asyncState = state
+    },
+    submitOrder () {
+      this.asyncState = 'pending'
+      postFormToDB(this.form)
+        .then(() => {
+          console.log('form submitted', this.form)
+          this.asyncState = 'success'
+          this.currentStepNumber++
+        })
+    },
+    nextButtonAction () {
+      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--
     },