105 lines
2.9 KiB
Vue
105 lines
2.9 KiB
Vue
<template>
|
|
<q-menu>
|
|
<div class="row no-wrap q-pa-md">
|
|
<div class="column">
|
|
<div class="text-h6 q-mb-md">{{ t('components.userPanel.settings') }}</div>
|
|
<q-toggle
|
|
:label="t(`globals.lang['${locale}']`)"
|
|
icon="public"
|
|
color="orange"
|
|
false-value="es"
|
|
true-value="en"
|
|
v-model="locale"
|
|
/>
|
|
<q-toggle
|
|
v-model="darkMode"
|
|
checked-icon="dark_mode"
|
|
color="orange"
|
|
unchecked-icon="light_mode"
|
|
/>
|
|
|
|
<q-btn color="orange" outline size="sm" label="Settings" icon="settings" />
|
|
</div>
|
|
|
|
<q-separator vertical inset class="q-mx-lg" />
|
|
|
|
<div class="column items-center" style="min-width: 150px">
|
|
<q-avatar size="80px">
|
|
<q-img
|
|
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
|
|
spinner-color="white"
|
|
/>
|
|
</q-avatar>
|
|
|
|
<div class="text-subtitle1 q-mt-md">
|
|
<strong>{{ user.nickname }}</strong>
|
|
</div>
|
|
<div class="text-subtitle3 text-grey-7 q-mb-xs">@{{ user.username }}</div>
|
|
|
|
<q-btn
|
|
color="orange"
|
|
flat
|
|
label="Log Out"
|
|
size="sm"
|
|
icon="logout"
|
|
@click="logout()"
|
|
v-close-popup
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-menu>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted, computed } from 'vue';
|
|
import { Dark, useQuasar } from 'quasar';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useRouter } from 'vue-router';
|
|
import axios from 'axios';
|
|
|
|
import { useState } from 'src/composables/useState';
|
|
import { useSession } from 'src/composables/useSession';
|
|
|
|
const quasar = useQuasar();
|
|
const state = useState();
|
|
const session = useSession();
|
|
const router = useRouter();
|
|
const { t, locale } = useI18n();
|
|
|
|
const darkMode = computed({
|
|
get(): boolean {
|
|
return Dark.isActive;
|
|
},
|
|
set(value: boolean): void {
|
|
Dark.set(value);
|
|
},
|
|
});
|
|
|
|
const user = state.getUser();
|
|
const token = session.getToken();
|
|
|
|
onMounted(() => {
|
|
axios
|
|
.get('/api/accounts/acl')
|
|
.then(({ data }) => {
|
|
state.setUser({
|
|
id: data.user.id,
|
|
username: data.user.name,
|
|
nickname: data.user.nickname,
|
|
});
|
|
})
|
|
.catch(() => {
|
|
quasar.notify({
|
|
message: t('errors.statusUnauthorized'),
|
|
type: 'negative',
|
|
});
|
|
logout();
|
|
});
|
|
});
|
|
|
|
function logout(): void {
|
|
session.destroy();
|
|
router.push('/login');
|
|
}
|
|
</script>
|