chore: migrate to composition API and auth0-spa
This commit is contained in:
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDarkMode } from '../../utils/localStorage'
|
||||
|
||||
export default {
|
||||
setup(props, context) {
|
||||
context.root.$vuetify.theme.dark = getDarkMode()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
+146
-105
@@ -1,129 +1,170 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<v-navigation-drawer
|
||||
v-model="left"
|
||||
<v-app :key="$i18n.locale + isAuthenticated">
|
||||
<themed>
|
||||
<v-navigation-drawer
|
||||
v-model="nav"
|
||||
temporary
|
||||
app
|
||||
>
|
||||
<v-list dense>
|
||||
<v-list-item v-if="!hasUser" @click="() => { doLogin(); }">
|
||||
>
|
||||
<v-list dense>
|
||||
<v-list-item>
|
||||
<v-list-item>Login</v-list-item>
|
||||
<v-list-item-action>
|
||||
<v-switch v-model="darkMode"/>
|
||||
</v-list-item-action>
|
||||
<v-list-item-title>{{ $t('app.darkMode') }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list-item>
|
||||
<v-list-item avatar v-if="hasUser">
|
||||
<v-list-item-avatar>
|
||||
<v-img :src="user.picture" :alt="user.name"></v-img>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-html="user.name"></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-calendar-outline</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-content>
|
||||
<nuxt-link to="/"><v-list-item-title>Evenemang</v-list-item-title></nuxt-link>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-list-item v-if="hasUser">
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-home</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-content>
|
||||
<nuxt-link to="/origins/"><v-list-item-title>Hantera startpunkter</v-list-item-title></nuxt-link>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-list-item v-if="hasUser">
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-magnify</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-content>
|
||||
<nuxt-link to="/filters/"><v-list-item-title>Hantera filter</v-list-item-title></nuxt-link>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-list-item v-if="hasUser">
|
||||
<v-list-item-action>
|
||||
<v-icon>exit_to_app</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-content>
|
||||
<nuxt-link to="/logout/"><v-list-item-title>Logga ut</v-list-item-title></nuxt-link>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
<v-app-bar app scroll-off-screen>
|
||||
<v-app-bar-nav-icon v-on:click="left = !left"></v-app-bar-nav-icon>
|
||||
<v-toolbar-title v-html="title"></v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-toolbar-items>
|
||||
<v-list-item v-if="hasUser">
|
||||
<v-list-item-avatar>
|
||||
<v-img :src="user.picture" :alt="user.name"></v-img>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-html="user.name"></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-toolbar-items>
|
||||
</v-app-bar>
|
||||
<v-content>
|
||||
<v-container fluid>
|
||||
<nuxt />
|
||||
</v-container>
|
||||
</v-content>
|
||||
<v-list-item @click="locale = 'en'">
|
||||
<v-list-item-title>In English 🇬🇧</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item @click="locale = 'sv'">
|
||||
<v-list-item-title>På Svenska 🇸🇪</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item link v-if="!user" @click="doLogin">
|
||||
<v-list-item-title>{{ $t('app.login') }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item v-if="isAuthenticated && user">
|
||||
<v-list-item-avatar>
|
||||
<v-img :src="user.picture" :alt="user.name"/>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-html="user.name"/>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-list-item link to="/">
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-calendar-outline</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-title>{{ $t('app.links.events') }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item link to="/origins/" v-if="isAuthenticated">
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-home</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-title>{{ $t('app.links.origins') }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item link to="/filters/" v-if="isAuthenticated">
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-magnify</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-title>{{ $t('app.links.filters') }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item link v-if="isAuthenticated">
|
||||
<v-list-item-action>
|
||||
<v-icon>exit_to_app</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-content @click="doLogout">
|
||||
<v-list-item-title>{{ $t('app.logout') }}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
<v-app-bar app scroll-off-screen>
|
||||
<v-app-bar-nav-icon v-on:click="nav = !nav"/>
|
||||
<v-toolbar-title v-html="title"/>
|
||||
<v-spacer/>
|
||||
<v-toolbar-items>
|
||||
<v-list-item v-if="isAuthenticated && user">
|
||||
<v-list-item-avatar>
|
||||
<v-img :src="user.picture" :alt="user.name"/>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-html="user.name"/>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-toolbar-items>
|
||||
</v-app-bar>
|
||||
<v-content>
|
||||
<v-container fluid v-if="!loading">
|
||||
<nuxt/>
|
||||
</v-container>
|
||||
</v-content>
|
||||
</themed>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
// We need this line to import all global styling
|
||||
@import "assets/scss/global.scss";
|
||||
// We need this line to import all global styling
|
||||
@import "assets/scss/global.scss";
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.layout {
|
||||
background-color: white;
|
||||
.layout {
|
||||
background-color: white;
|
||||
|
||||
.log-out {
|
||||
cursor: pointer;
|
||||
.log-out {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import auth from "~/utils/auth";
|
||||
import { useAuth } from '../plugins/auth'
|
||||
import { computed, ref } from '@vue/composition-api'
|
||||
import Themed from './components/themed'
|
||||
import { setDarkMode } from '../utils/localStorage'
|
||||
import { useRouter, useState } from '@u3u/vue-hooks'
|
||||
import dayjs from 'dayjs'
|
||||
import sv from 'dayjs/locale/sv'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
components: {
|
||||
Themed,
|
||||
},
|
||||
setup(props, context) {
|
||||
const { router } = useRouter()
|
||||
const { title } = useState(['title'])
|
||||
const onRedirectCallback = appState => {
|
||||
router.push(
|
||||
appState && appState.targetUrl
|
||||
? appState.targetUrl
|
||||
: window.location.pathname
|
||||
);
|
||||
}
|
||||
const { loading, isAuthenticated, user, loginWithRedirect, logout } = useAuth(onRedirectCallback)
|
||||
const doLogin = () => {
|
||||
loginWithRedirect.value();
|
||||
}
|
||||
const doLogout = () => {
|
||||
logout.value({
|
||||
returnTo: window.location.origin
|
||||
});
|
||||
}
|
||||
const darkMode = computed({
|
||||
get: () => context.root.$vuetify.theme.dark,
|
||||
set: val => {
|
||||
context.root.$vuetify.theme.dark = val
|
||||
setDarkMode(context.root.$vuetify.theme.dark)
|
||||
}
|
||||
})
|
||||
const locale = computed({
|
||||
get: () => context.root.$i18n.locale,
|
||||
set: locale => {
|
||||
if (locale === 'en') {
|
||||
dayjs.locale(locale)
|
||||
} else if (locale === 'sv') {
|
||||
dayjs.locale(sv)
|
||||
}
|
||||
|
||||
context.root.$i18n.setLocaleCookie(locale)
|
||||
context.root.$vuetify.lang.current = locale
|
||||
context.root.$i18n.locale = locale
|
||||
}
|
||||
})
|
||||
|
||||
const nav = ref(false)
|
||||
locale.value = context.root.$i18n.locale
|
||||
|
||||
return {
|
||||
user: undefined,
|
||||
left: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
hasUser() {
|
||||
return this.user;
|
||||
},
|
||||
title() {
|
||||
return this.$store.state.title;
|
||||
title,
|
||||
loading,
|
||||
isAuthenticated,
|
||||
user,
|
||||
doLogin,
|
||||
doLogout,
|
||||
darkMode,
|
||||
locale,
|
||||
nav
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"$route.path"() {
|
||||
this.fetchUser();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchUser();
|
||||
},
|
||||
methods: {
|
||||
fetchUser() {
|
||||
this.user = auth.getUserInfo();
|
||||
},
|
||||
doLogin() {
|
||||
auth.triggerLogin({ returnUrl: this.$route.fullPath });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user