asynchronous operations inside steps

vueschool · Sep 5, 2018 · f9650c0 · f9650c0
1 parent be68593
commit f9650c0
Showing 1 changed file with 64 additions and 6 deletions.
diff --git 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,14 +66,56 @@
           email
         },
         password: {
-          required
+          required,
+          correct () {
+            return !this.wrongPassword
+          }
         },
         name: {
           required
         }
       }
     },
     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: {