107 lines
3.3 KiB
Vue
107 lines
3.3 KiB
Vue
<template>
|
|
<div class="q-gutter-md">
|
|
<q-btn dense flat round icon="person" :color="currentUser ? 'green' : ''">
|
|
<q-menu ref="refLoginMenu">
|
|
<q-list style="min-width: 120px">
|
|
<q-item v-if="user.user" class="text-primary">{{ currentUser?.username }}</q-item>
|
|
<q-item v-if="showLogin" clickable v-close-popup @click="openLogin">
|
|
<q-item-section class="text-primary">{{ loginText }}</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-btn flat :icon="darkMode" @click="toggleDarkMode"
|
|
><q-tooltip>{{ $t(darkMode) }}</q-tooltip></q-btn
|
|
>
|
|
</q-item>
|
|
<q-item>
|
|
<q-select
|
|
:label="$t('language')"
|
|
borderless
|
|
color="primary"
|
|
dense
|
|
v-model="langSelected"
|
|
:options="langSelection"
|
|
><q-tooltip>{{ $t('language') }}</q-tooltip></q-select
|
|
>
|
|
</q-item>
|
|
<q-item
|
|
v-if="
|
|
(autorized || user.isPermittedTo('settings', 'read')) && route.path !== '/settings'
|
|
"
|
|
>
|
|
<q-btn flat color="secondary" icon="settings" to="/settings"></q-btn>
|
|
</q-item>
|
|
<q-item
|
|
v-if="
|
|
(autorized || user.isPermittedTo('userSettings', 'read')) &&
|
|
route.path !== '/userSettings'
|
|
"
|
|
>
|
|
<q-btn flat color="secondary" icon="group" to="/userSettings"></q-btn>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
</div>
|
|
<LoginDialog ref="refLoginDialog"></LoginDialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import LoginDialog from './LoginDialog.vue';
|
|
import { computed, ref, watch } from 'vue';
|
|
import { useNotify } from '../general/useNotify';
|
|
import { lang, i18n } from 'src/boot/lang';
|
|
import { useUserStore } from './userStore';
|
|
import { useRoute } from 'vue-router';
|
|
import { Dark } from 'quasar';
|
|
import { useLogin } from './useLogin';
|
|
import { setLocalDarkMode, setLocalLanguage } from 'src/localstorage/localStorage';
|
|
|
|
const userLogin = useLogin();
|
|
const route = useRoute();
|
|
const refLoginDialog = ref();
|
|
const user = useUserStore();
|
|
const { NotifyResponse } = useNotify();
|
|
const currentUser = computed(() => user.user);
|
|
const darkMode = computed(() => {
|
|
if (Dark.mode) {
|
|
return 'light_mode';
|
|
}
|
|
return 'dark_mode';
|
|
});
|
|
const showLogin = computed(
|
|
() => (route.path !== '/' && route.path !== '/login') || currentUser.value?.username === '',
|
|
);
|
|
|
|
const autorized = computed(() => !!user.isAuthorizedAs(['admin']));
|
|
|
|
// switch between logged in or logged out text
|
|
const loginText = computed(() => {
|
|
return currentUser.value ? i18n.global.t('logout') : i18n.global.t('login');
|
|
});
|
|
|
|
//switch between dark and light mode and save it in localStorage
|
|
function toggleDarkMode() {
|
|
Dark.toggle();
|
|
setLocalDarkMode();
|
|
}
|
|
|
|
// opens login page if no user is logged in otherwise it serves as logout
|
|
function openLogin() {
|
|
if (currentUser.value) {
|
|
userLogin.logout().catch((err) => NotifyResponse(err, 'error'));
|
|
return;
|
|
}
|
|
refLoginDialog.value?.open();
|
|
}
|
|
|
|
const langSelected = ref(i18n.global.locale);
|
|
const langSelection = ref(lang);
|
|
|
|
// Watch for changes and update i18n locale
|
|
watch(langSelected, (newLang) => {
|
|
i18n.global.locale = newLang;
|
|
|
|
setLocalLanguage(newLang);
|
|
});
|
|
</script>
|