Added log out mutation

beljp · Oct 3, 2021 · 3a05d11 · 3a05d11
1 parent 030d042
commit 3a05d11
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 41 deletions.
diff --git a/components/Cart.vue b/components/Cart.vue
@@ -4,7 +4,6 @@
 		<pre class="text-xs" v-if="cart">{{ cart }}</pre>
 		<pre class="text-xs" v-if="viewer">{{ viewer }}</pre>
 		<button @click="getUser">Get User</button>
-		<button @click="clearout">Clear out</button>
 	</section>
 </template>
 
@@ -24,23 +23,6 @@ export default {
 		this.cart = cart
 	},
 	methods: {
-		async clearout() {
-			// Override all existing headers
-			// this.$graphql.default.setHeaders({
-			// 	credentials: 'include',
-			// 	mode: 'cors'
-			// })
-			const query = gql`
-				mutation Logout {
-					logout(input: { clientMutationId: "kjnasljxnaslk" }) {
-						status
-					}
-				}
-			`
-			const { logout } = await this.$graphql.default.request(query)
-			console.log(logout.status)
-			this.$nuxt.refresh()
-		},
 		async getUser() {
 			const query = gql`
 				query {

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -5,7 +5,7 @@
 				<div>NEXT DAY DELIVERY</div>
 				<div class="flex gap-4">
 					<a href="https://woonuxt.com/soo/"> SIGN IN </a>
-					<a class="cursor-pointer" @click="logOut">LOG OUT</a>
+					<nuxt-link to="/logout" class="cursor-pointer">LOG OUT</nuxt-link>
 				</div>
 			</div>
 		</div>
@@ -33,28 +33,6 @@ export default {
 	methods: {
 		closeCart() {
 			this.$store.commit('toggleCart', false)
-		},
-		async logOut() {
-			console.log('Clear all cookies')
-			const deleteAllCookies = () => {
-				var cookies = document.cookie.split(';')
-
-				for (var i = 0; i < cookies.length; i++) {
-					var cookie = cookies[i]
-					var eqPos = cookie.indexOf('=')
-					var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie
-					document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:00 GMT'
-				}
-				window.localStorage.clear()
-			}
-			deleteAllCookies()
-			this.$graphql.default.setHeaders({
-				credentials: 'include',
-				mode: 'cors'
-			})
-			this.$graphql.default.setHeader('authorization', 'Bearer MY_TOKEN')
-
-			this.$nuxt.refresh()
 		}
 	}
 }

diff --git a/pages/logout.vue b/pages/logout.vue
@@ -0,0 +1,39 @@
+<template>
+	<div class="container flex items-center justify-center min-h-[300px] text-2xl">
+		<h2 v-if="hasLoggedOut">You have been successfully logged out.</h2>
+		<h2 v-else>Something went wrong. Please try again</h2>
+	</div>
+</template>
+
+<script>
+import { gql } from 'nuxt-graphql-request'
+
+export default {
+	data() {
+		return {
+			hasLoggedOut: false
+		}
+	},
+	methods: {
+		async logOut() {
+			const query = gql`
+				mutation Logout {
+					logout(input: { clientMutationId: "kjnasljxnaslk" }) {
+						status
+					}
+				}
+			`
+			const { logout } = await this.$graphql.default.request(query)
+			// SUCCESS
+			if (logout.status == 'SUCCESS') {
+				this.hasLoggedOut = true
+			}
+
+			console.log(logout.status)
+		}
+	},
+	mounted() {
+		this.logOut()
+	}
+}
+</script>