Ausloggen jetzt möglich, Neuer Loading Spinner in 'Dark-Mode'

Beim ausloggen wird nun der localstorage geleert und ein delete an /auth/delete/<token> gesendet.
This commit is contained in:
Tim Gröger 2020-10-28 12:55:20 +01:00
parent 27d44b350f
commit 789cf89603
4 changed files with 77 additions and 48 deletions

View File

@ -0,0 +1,23 @@
<template>
<q-circular-progress
indeterminate
show-value
font-size="10px"
class="q-ma-md"
size="80px"
:thickness="0.15"
color="primary"
track-color="grey-3"
>
<q-avatar size="60px">
<img src="logo.svg" />
</q-avatar>
</q-circular-progress>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
name: 'DarkCircularProgress'
});
</script>

View File

@ -1,9 +1,6 @@
<template>
<q-layout view="hHh lpr lFf">
<q-header
elevated
class="bg-primary text-white"
>
<q-header elevated class="bg-primary text-white">
<q-toolbar>
<!-- Button um Navigationsleiset ein und auszublenden. Nötig bei Desktop? -->
<q-btn
@ -33,13 +30,7 @@
:icon="shortcut.icon"
/>
</div>
<q-btn
flat
round
dense
icon="mdi-exit-to-app"
@click="$router.push({ name: 'login' })"
/>
<q-btn flat round dense icon="mdi-exit-to-app" @click="logout()" />
</q-toolbar>
</q-header>
@ -75,10 +66,7 @@
/>
</q-list>
<div
class="q-mini-drawer-hide absolute"
style="top: 15px; right: -11px"
>
<div class="q-mini-drawer-hide absolute" style="top: 15px; right: -11px">
<q-btn
size="sm"
dense
@ -119,23 +107,23 @@ const links = [
name: 'about',
title: 'Über Flaschengeist',
link: 'about',
icon: 'mdi-information',
},
icon: 'mdi-information'
}
];
const shortcuts = [
{
link: 'about',
icon: 'mdi-information',
icon: 'mdi-information'
},
{
link: 'user',
icon: 'mdi-account',
icon: 'mdi-account'
},
{
link: 'user-plugin1',
icon: 'mdi-account-plus',
},
icon: 'mdi-account-plus'
}
];
declare module 'vue/types/vue' {
@ -153,7 +141,7 @@ export default defineComponent({
const leftDrawerOpen = ref(
computed({
get: () => (leftDrawer.value || Screen.gt.sm ? true : false),
set: (val: boolean) => (leftDrawer.value = val),
set: (val: boolean) => (leftDrawer.value = val)
})
);
const leftDrawerMini = ref(false);
@ -181,6 +169,15 @@ export default defineComponent({
}
});
function logout() {
console.log('vor dem logout');
ctx.root.$store.dispatch(
'user/logout',
ctx.root.$store.getters['user/session'].token
);
console.log('nach dem logout');
}
return {
leftDrawerOpen,
leftDrawerMini,
@ -188,7 +185,8 @@ export default defineComponent({
links,
pluginChildLinks,
shortcuts,
logout
};
},
}
});
</script>

View File

@ -5,18 +5,12 @@
class="fit row justify-center content-center items-center"
v-if="checkMain"
>
<q-card
class="col-4"
height=""
>
<q-card class="col-4" height="">
<q-card-section>
Name: {{ userObj.firstname }} {{ userObj.lastname }}<br />
E-Mail: {{ userObj.mail }}<br />
Roles:
<ul
v-for="role in userObj.roles"
v-bind:key="role"
>
<ul v-for="(role, index) in userObj.roles" :key="'role' + index">
<li>{{ role }}</li>
</ul>
<br />

View File

@ -52,7 +52,12 @@ const mutations: MutationTree<UserStateInterface> = {
const actions: ActionTree<UserStateInterface, StateInterface> = {
login({ commit }, data: LoginData) {
commit('setLoginLoading', true);
Loading.show({ message: 'Du wirst eingeloggt' });
Loading.setDefaults({
spinner: () => import('src/components/loading/DarkCircularProgress.vue')
});
Loading.show({
message: 'Du wirst eingeloggt'
});
void axios
.post('/auth', data)
.then((response: AxiosResponse<LoginResponse>) => {
@ -74,7 +79,10 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
});
},
logout({ commit }, token) {
void axios.delete(`/auth/${token}`).then(() => {
Loading.show({ message: 'Du wirst ausgeloggt' });
void axios
.delete(`/auth/${token}`)
.then(() => {
commit('setUser', {
display_name: '',
firstname: '',
@ -90,6 +98,12 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
platform: '',
token: ''
});
})
.finally(() => {
LocalStorage.remove('user');
LocalStorage.remove('session');
void Router.push({ name: 'login' });
Loading.hide();
});
},
updateUser({ commit, getters }, data) {