106 lines
2.5 KiB
Vue
106 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<div class="bg-white">
|
||
|
|
<div class="flex bg-gray-50">
|
||
|
|
<div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
|
||
|
|
<div class="pt-4 pb-0">
|
||
|
|
<div class="flex">
|
||
|
|
<h2 class="flex-grow text-gray-900">
|
||
|
|
My Account
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
<ul class="flex text-gray-500">
|
||
|
|
<li>{{ user.email }}</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div class="mt-4 border-b border-gray-200 dark:border-gray-700">
|
||
|
|
<ul class="flex flex-wrap -mb-px text-sm font-medium text-center">
|
||
|
|
<li v-for="(tab, i) in tabsList" :key="i+1" class="mr-6">
|
||
|
|
<router-link :to="{ name: tab.route }"
|
||
|
|
class="hover:no-underline inline-block py-4 rounded-t-lg border-b-2 text-gray-500 hover:text-gray-600"
|
||
|
|
active-class="text-blue-600 hover:text-blue-900 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500"
|
||
|
|
>
|
||
|
|
{{ tab.name }}
|
||
|
|
</router-link>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex bg-white">
|
||
|
|
<div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
|
||
|
|
<div class="mt-8 pb-0">
|
||
|
|
<router-view v-slot="{ Component }">
|
||
|
|
<transition name="page" mode="out-in">
|
||
|
|
<component :is="Component" />
|
||
|
|
</transition>
|
||
|
|
</router-view>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { computed } from 'vue'
|
||
|
|
import { useAuthStore } from '../../stores/auth'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
middleware: 'auth',
|
||
|
|
|
||
|
|
setup () {
|
||
|
|
const authStore = useAuthStore()
|
||
|
|
return {
|
||
|
|
user: computed(() => authStore.user)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
tabsList () {
|
||
|
|
const tabs = [
|
||
|
|
{
|
||
|
|
name: 'Profile',
|
||
|
|
route: 'settings.profile'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Workspace Settings',
|
||
|
|
route: 'settings.workspaces'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Password',
|
||
|
|
route: 'settings.password'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Delete Account',
|
||
|
|
route: 'settings.account'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
if (this.user.is_subscribed) {
|
||
|
|
tabs.splice(1, 0, {
|
||
|
|
name: 'Billing',
|
||
|
|
route: 'settings.billing'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.user.admin) {
|
||
|
|
tabs.push({
|
||
|
|
name: 'Admin',
|
||
|
|
route: 'settings.admin'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
return tabs
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|