aboutsummaryrefslogtreecommitdiff
path: root/client/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/views')
-rw-r--r--client/src/views/Checkout.vue8
-rw-r--r--client/src/views/Login.vue29
-rw-r--r--client/src/views/Register.vue32
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();
}
}
}