83 lines
2.4 KiB
Vue
83 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<v-app>
|
||
|
|
<v-app-bar color="primary" prominent>
|
||
|
|
<v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer" />
|
||
|
|
<v-toolbar-title>Unbound Schemas</v-toolbar-title>
|
||
|
|
<v-spacer />
|
||
|
|
|
||
|
|
<template v-if="auth0?.isLoading?.value">
|
||
|
|
<v-progress-circular indeterminate size="24" width="2" />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template v-else-if="auth0?.isAuthenticated?.value">
|
||
|
|
<OrganizationSwitcher class="mr-4" />
|
||
|
|
|
||
|
|
<v-menu>
|
||
|
|
<template #activator="{ props }">
|
||
|
|
<v-btn v-bind="props" variant="text">
|
||
|
|
<v-avatar size="32" class="mr-2">
|
||
|
|
<v-img v-if="auth0?.user?.value?.picture" :src="auth0.user.value.picture" />
|
||
|
|
<v-icon v-else>mdi-account-circle</v-icon>
|
||
|
|
</v-avatar>
|
||
|
|
{{ auth0?.user?.value?.name || auth0?.user?.value?.email }}
|
||
|
|
</v-btn>
|
||
|
|
</template>
|
||
|
|
<v-list>
|
||
|
|
<v-list-item>
|
||
|
|
<v-list-item-title>{{ auth0?.user?.value?.email }}</v-list-item-title>
|
||
|
|
<v-list-item-subtitle>{{ auth0?.user?.value?.name }}</v-list-item-subtitle>
|
||
|
|
</v-list-item>
|
||
|
|
<v-divider />
|
||
|
|
<v-list-item prepend-icon="mdi-cog" title="Settings" to="/settings" />
|
||
|
|
<v-list-item prepend-icon="mdi-logout" title="Logout" @click="auth0?.logout({ logoutParams: { returnTo: window.location.origin } })" />
|
||
|
|
</v-list>
|
||
|
|
</v-menu>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template v-else>
|
||
|
|
<v-btn variant="outlined" @click="auth0?.loginWithRedirect()">
|
||
|
|
Login
|
||
|
|
</v-btn>
|
||
|
|
</template>
|
||
|
|
</v-app-bar>
|
||
|
|
|
||
|
|
<v-navigation-drawer v-model="drawer" temporary>
|
||
|
|
<v-list>
|
||
|
|
<v-list-item
|
||
|
|
prepend-icon="mdi-view-dashboard"
|
||
|
|
title="Dashboard"
|
||
|
|
to="/"
|
||
|
|
/>
|
||
|
|
<v-list-item
|
||
|
|
prepend-icon="mdi-graphql"
|
||
|
|
title="Schemas"
|
||
|
|
to="/schemas"
|
||
|
|
/>
|
||
|
|
<v-list-item
|
||
|
|
prepend-icon="mdi-source-branch"
|
||
|
|
title="Refs"
|
||
|
|
to="/refs"
|
||
|
|
/>
|
||
|
|
<v-list-item
|
||
|
|
prepend-icon="mdi-cog"
|
||
|
|
title="Settings"
|
||
|
|
to="/settings"
|
||
|
|
/>
|
||
|
|
</v-list>
|
||
|
|
</v-navigation-drawer>
|
||
|
|
|
||
|
|
<v-main>
|
||
|
|
<v-container fluid>
|
||
|
|
<NuxtPage />
|
||
|
|
</v-container>
|
||
|
|
</v-main>
|
||
|
|
</v-app>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { useAuth0 } from '@auth0/auth0-vue'
|
||
|
|
|
||
|
|
const drawer = ref(false)
|
||
|
|
const auth0 = useAuth0()
|
||
|
|
</script>
|