Fully implement client-side login system...

3 files changed, 58 insertions, 11 deletions

diff --git a/client/src/views/Checkout.vue b/client/src/views/Checkout.vue
index 52da138..7004b1f 100644
--- a/client/src/views/Checkout.vue
+++ b/client/src/views/Checkout.vue
@@ -16,7 +16,10 @@
         <p class="text-center my-3 fw-bold">You can buy {{ cartSize }} items for ${{ cartPrice }}.</p>
       </div>
       <div class="col-md-4 card p-2" v-if="cartSize">
-        <div ref="paypal"></div>
+        <div ref="paypal" v-if="isLoggedIn"></div>
+        <p v-else class="fw-bold text-center my-auto">
+          You need to be logged in to make a purchase.
+        </p>
       </div>
     </div>
   </div>
@@ -55,6 +58,9 @@ export default {
     },
     cartPrice() {
       return this.$store.getters.getCartPrice;
+    },
+    isLoggedIn() {
+      return this.$store.getters.isLoggedIn;
     }
   },
   methods: {
diff --git a/client/src/views/Login.vue b/client/src/views/Login.vue
index 53badcb..f0a1759 100644
--- a/client/src/views/Login.vue
+++ b/client/src/views/Login.vue
@@ -32,7 +32,7 @@
       </div>
     </div>
   </div>
-  <Modal :title="modalTitle" v-if="showModal" @close="showModal = false">
+  <Modal :title="modalTitle" v-if="showModal" @close="closeBtnAction">
     <p v-text="modalText"></p>
   </Modal>
 </template>
@@ -55,7 +55,8 @@ export default {
       passwordBlured:false,
       showModal: false,
       modalTitle: '',
-      modalText: ''
+      modalText: '',
+      closeBtnAction: null
     }
   },
   methods: {
@@ -75,15 +76,33 @@ export default {
 
     login() {
       this.validate();
-      if (this.valid) {
+
+      const successMsg = () => {
         this.modalTitle = 'Success!';
         this.modalText = 'You successfully logged in!';
         this.showModal = true;
-      }
-      else {
+        this.closeBtnAction = () => this.$router.push('/');
+      };
+
+      const failureMsg = () => {
         this.modalTitle = 'Failure!';
         this.modalText = 'You failed to login.';
         this.showModal = true;
+        this.closeBtnAction = () => this.showModal = false;
+      };
+
+      if (this.valid) {
+        const requestData = {
+          email: this.email,
+          password: this.password
+        };
+
+        this.$store.dispatch('login', requestData)
+          .then(() => successMsg())
+          .catch(() => failureMsg());
+      }
+      else {
+        failureMsg();
       }
     }
   }
diff --git a/client/src/views/Register.vue b/client/src/views/Register.vue
index e26c751..238b5df 100644
--- a/client/src/views/Register.vue
+++ b/client/src/views/Register.vue
@@ -58,7 +58,7 @@
       </div>
     </div>
   </div>
-  <Modal :title="modalTitle" v-if="showModal" @close="showModal = false">
+  <Modal :title="modalTitle" v-if="showModal" @close="closeBtnAction">
     <p v-text="modalText"></p>
   </Modal>
 </template>
@@ -87,7 +87,8 @@ export default {
       passwordConfirmBlured:false,
       showModal: false,
       modalTitle: '',
-      modalText: ''
+      modalText: '',
+      closeBtnAction: null
     }
   },
   methods: {
@@ -114,15 +115,36 @@ export default {
 
     submit() {
       this.validate();
-      if (this.valid) {
+
+      const successMsg = () => {
         this.modalTitle = 'Success!';
         this.modalText = 'You successfully registered!';
         this.showModal = true;
-      }
-      else {
+        this.closeBtnAction = () => this.$router.push('/');
+      };
+
+      const failureMsg = () => {
         this.modalTitle = 'Failure!';
         this.modalText = 'You failed to register.';
         this.showModal = true;
+        this.closeBtnAction = () => this.showModal = false;
+      };
+
+      if (this.valid) {
+        const requestData = {
+          firstname: this.firstname,
+          lastname: this.lastname,
+          email: this.email,
+          password: this.password,
+          confirmPassword: this.passwordConfirm,
+        };
+
+        this.$store.dispatch('register', requestData)
+          .then(() => successMsg())
+          .catch(() => failureMsg());
+      }
+      else {
+        failureMsg();
       }
     }
   }