Skip to content

Commit

Permalink
fix(nuxt3-app): fix logout (SWF-186)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdanilowicz @patzick
mdanilowicz authored and patzick committed Nov 18, 2022
1 parent f987986 commit f492a6a
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 74 deletions.
5 changes: 5 additions & 0 deletions .changeset/great-laws-fetch.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"vue-demo-store": patch
---

Fix logout
159 changes: 85 additions & 74 deletions templates/vue-demo-store/layouts/account.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ export default {
<script setup lang="ts">
// Navigation for Account page
const { loadNavigationElements } = useNavigation();
const { logout } = useUser();
const router = useRouter();
const { data } = await useAsyncData("mainNavigation", () => {
return loadNavigationElements({ depth: 2 });
});
Expand All @@ -18,89 +21,97 @@ const { loadNavigationElements: loadFooterNavigationElements } = useNavigation({
const { data: footerData } = await useAsyncData("mainFooterNavigation", () => {
return loadFooterNavigationElements({ depth: 2 });
});
async function invokeLogout() {
logout();
router.push("/");
}
provide("swNavigation-footer-navigation", footerData);
</script>

<template>
<SharedModal />
<LayoutHeader />
<LayoutNotifications />
<div>
<SharedModal />
<LayoutHeader />
<LayoutNotifications />

<div class="max-w-screen-xl mx-auto min-h-full">
<div class="m-10">
<div class="account-inner">
<div class="md:grid md:grid-cols-3 md:gap-6">
<aside
class="hidden md:block lg:w-64 md:col-span-"
aria-label="Sidebar"
>
<div
class="overflow-y-auto py-4 px-3 bg-gray-50 text-base font-normal text-gray-500 rounded"
<div class="max-w-screen-xl mx-auto min-h-full">
<div class="m-10">
<div class="account-inner">
<div class="md:grid md:grid-cols-3 md:gap-6">
<aside
class="hidden md:block lg:w-64 md:col-span-"
aria-label="Sidebar"
>
<h1
class="self-center text-xl p-2 mb-2 font-semibold whitespace-nowrap"
<div
class="overflow-y-auto py-4 px-3 bg-gray-50 text-base font-normal text-gray-500 rounded"
>
My account
</h1>
<ul class="space-y-2">
<li>
<router-link
to="/account/profile"
class="flex items-center p-2 rounded-lg hover:text-brand-primary hover:bg-gray-100 is-active"
>
<div i-carbon-user text-xl inline-block />
<span class="ml-3">My profile</span>
</router-link>
</li>
<li>
<router-link
to="/account/address"
class="flex items-center p-2 rounded-lg hover:text-brand-primary hover:bg-gray-100"
>
<div i-carbon-home text-xl inline-block />
<span class="ml-3">My address</span>
</router-link>
</li>
<li>
<router-link
to="/account/payment"
class="flex items-center p-2 rounded-lg hover:text-brand-primary hover:bg-gray-100"
>
<div i-carbon-wallet text-xl inline-block />
<span class="ml-3">Payment</span>
</router-link>
</li>
</ul>
<ul class="pt-4 mt-4 space-y-2 border-t border-gray-200">
<li>
<router-link
to="/account/order"
class="flex items-center p-2 rounded-lg hover:text-brand-primary hover:bg-gray-100"
>
<div i-carbon-order-details text-xl inline-block />
<span class="ml-3">Order history</span>
</router-link>
</li>
<li>
<router-link
to="/account/order"
class="flex items-center p-2 rounded-lg hover:text-brand-primary hover:bg-gray-100"
>
<div i-carbon-logout text-xl inline-block />
<span class="ml-3">Logout</span>
</router-link>
</li>
</ul>
</div>
</aside>
<main class="md:col-span-2">
<slot />
</main>
<h1
class="self-center text-xl p-2 mb-2 font-semibold whitespace-nowrap"
>
My account
</h1>
<ul class="space-y-2">
<li>
<router-link
to="/account/profile"
class="flex items-center p-2 rounded-lg hover:text-brand-primary hover:bg-gray-100 is-active"
>
<div i-carbon-user text-xl inline-block />
<span class="ml-3">My profile</span>
</router-link>
</li>
<li>
<router-link
to="/account/address"
class="flex items-center p-2 rounded-lg hover:text-brand-primary hover:bg-gray-100"
>
<div i-carbon-home text-xl inline-block />
<span class="ml-3">My address</span>
</router-link>
</li>
<li>
<router-link
to="/account/payment"
class="flex items-center p-2 rounded-lg hover:text-brand-primary hover:bg-gray-100"
>
<div i-carbon-wallet text-xl inline-block />
<span class="ml-3">Payment</span>
</router-link>
</li>
</ul>
<ul class="pt-4 mt-4 space-y-2 border-t border-gray-200">
<li>
<router-link
to="/account/order"
class="flex items-center p-2 rounded-lg hover:text-brand-primary hover:bg-gray-100"
>
<div i-carbon-order-details text-xl inline-block />
<span class="ml-3">Order history</span>
</router-link>
</li>
<li>
<button
@click="invokeLogout()"
class="flex items-center rounded-lg p-2 hover:text-brand-primary hover:bg-gray-100 w-full"
>
<div i-carbon-logout text-xl inline-block />
<span class="ml-3">Logout</span>
</button>
</li>
</ul>
</div>
</aside>
<main class="md:col-span-2">
<slot />
</main>
</div>
</div>
</div>
</div>
</div>

<CheckoutSideCart />
<LayoutFooter />
<CheckoutSideCart />
<LayoutFooter />
</div>
</template>

0 comments on commit f492a6a

Please sign in to comment.