yunohost-portal/layouts/default.vue

106 lines
2.7 KiB
Vue
Raw Normal View History

<script setup lang="ts">
const head = useLocaleHead({
addDirAttribute: true,
addSeoAttributes: true,
})
const { t } = useI18n()
const isLoggedIn = useIsLoggedIn()
const me = await useUserInfo()
const footerLinks = [
{ text: t('footerlink_edit'), to: '/edit' },
{
text: t('footerlink_documentation'),
to: '//yunohost.org/docs',
newWindow: true,
},
{ text: t('footerlink_support'), to: '//yunohost.org/help', newWindow: true },
{
text: t('footerlink_administration'),
to: '/yunohost/admin/',
newWindow: true,
},
]
async function logout() {
const { error } = await useApi('/logout')
if (!error.value) {
// FIXME : meh, turns out the cookie is still valid after successfully calling the route for some reason ... !?
isLoggedIn.value = false
await navigateTo('/login')
} else {
// FIXME : display an error or something
}
}
</script>
2023-07-12 04:52:58 +02:00
<template>
2023-07-26 01:25:42 +02:00
<div class="container mx-auto p-10 min-h-screen flex flex-col">
<Html :lang="head.htmlAttrs?.lang" :dir="head.htmlAttrs?.dir"></Html>
<header class="py-10">
<slot name="header">
<div class="flex flex-row flex-wrap items-center min-w-full">
2023-07-26 01:25:42 +02:00
<NuxtLink to="/">
<span class="sr-only">{{ t('back_to_apps') }}</span>
<Icon name="mdi:account-circle" size="5em" class="mr-3" />
</NuxtLink>
<div>
<h2 class="text-2xl font-extrabold leading-none tracking-tight">
{{ me.username }}
</h2>
<h3>{{ me.fullname }}</h3>
<h4 class="opacity-50">{{ me.mail }}</h4>
</div>
<YButton
variant="neutral"
icon="mdi:logout"
:text="t('logout')"
class="ml-auto"
@click.prevent="logout"
/>
</div>
</slot>
</header>
<main>
2023-07-19 18:42:05 +02:00
<slot />
</main>
2023-07-19 18:42:05 +02:00
<footer class="mt-auto">
<!-- class="container fixed bottom-10 mx-10 pr-10 text-gray-400" -->
2023-07-19 18:42:05 +02:00
<slot name="footer">
<div class="sm:flex flex-row flex-wrap items-end justify-center">
<nav
class="border-t border-gray-500 space-x-5 flex-wrap sm:mr-5 text-center sm:text-left"
>
<NuxtLink
v-for="link in footerLinks"
:key="link.to"
:to="link.to"
:target="link.newWindow ? '_blank' : undefined"
class="link link-hover text-base-content inline-block"
>
{{ link.text }}
</NuxtLink>
2023-07-19 18:42:05 +02:00
</nav>
<img
src="/assets/img/logo-white.svg"
class="mt-8 sm:mt-0 mx-auto sm:ml-auto sm:mr-0"
/>
2023-07-12 04:52:58 +02:00
</div>
2023-07-19 18:42:05 +02:00
</slot>
</footer>
</div>
2023-07-12 04:52:58 +02:00
</template>
<style>
2023-07-19 18:42:05 +02:00
body {
font-family: 'Source Sans 3';
}
2023-07-12 04:52:58 +02:00
</style>