mirror of
https://github.com/YunoHost/yunohost-portal.git
synced 2024-09-03 20:06:23 +02:00
default layout: update with user info and logout
This commit is contained in:
axolotle
parent
9b37078d79
commit
cf4b85465e
2 changed files with 82 additions and 64 deletions
|
|
@ -3,27 +3,92 @@ 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>
|
||||
|
||||
<template>
|
||||
<div class="p-10 min-h-screen">
|
||||
<div class="container mx-auto p-5 min-h-screen flex flex-col">
|
||||
<Html :lang="head.htmlAttrs?.lang" :dir="head.htmlAttrs?.dir"></Html>
|
||||
|
||||
<div class="container mx-auto p-4">
|
||||
<slot />
|
||||
<header class="py-10">
|
||||
<slot name="header">
|
||||
<div class="flex flex-row flex-wrap items-center min-w-full">
|
||||
<Icon name="mdi:account-circle" size="5em" class="mr-3" />
|
||||
|
||||
<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>
|
||||
|
||||
<footer class="container fixed bottom-10 mx-10 pr-10 text-gray-400">
|
||||
<YButton
|
||||
variant="neutral"
|
||||
icon="mdi:logout"
|
||||
:text="t('logout')"
|
||||
class="ml-auto"
|
||||
@click.prevent="logout"
|
||||
/>
|
||||
</div>
|
||||
</slot>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<footer class="mt-auto">
|
||||
<!-- class="container fixed bottom-10 mx-10 pr-10 text-gray-400" -->
|
||||
<slot name="footer">
|
||||
<div class="flex flex-row items-end">
|
||||
<!-- FIXME: wrap this in an if: connected somehow ? -->
|
||||
<nav class="grow space-x-5 border-t mr-10 border-gray-500">
|
||||
<a>Edit my profile</a>
|
||||
<a href="//yunohost.org/docs" target="_blank">Documentation</a>
|
||||
<a href="//yunohost.org/help" target="_blank">Help</a>
|
||||
<a href="/yunohost/admin/" target="_blank">Administration</a>
|
||||
<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>
|
||||
</nav>
|
||||
<img class="flex-none mr-10" src="/assets/img/logo-white.svg" />
|
||||
|
||||
<img
|
||||
src="/assets/img/logo-white.svg"
|
||||
class="mt-8 sm:mt-0 mx-auto sm:ml-auto sm:mr-0"
|
||||
/>
|
||||
</div>
|
||||
</slot>
|
||||
</footer>
|
||||
|
|
@ -33,9 +98,5 @@ const head = useLocaleHead({
|
|||
<style>
|
||||
body {
|
||||
font-family: 'Source Sans 3';
|
||||
@apply bg-gray-700 text-gray-200;
|
||||
}
|
||||
.btn {
|
||||
@apply py-2 px-4 rounded;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
const isLoggedIn = useIsLoggedIn()
|
||||
|
||||
const { data } = await useApi<{
|
||||
username: string
|
||||
fullname: string
|
||||
mail: string
|
||||
'mail-aliases': string[]
|
||||
'mail-forward': string[]
|
||||
groups: string[]
|
||||
apps: Record<string, { label: string; url: string }>
|
||||
}>('/me')
|
||||
const userData = await useUserInfo()
|
||||
|
||||
const me = computed(() => {
|
||||
const appTileColors = [
|
||||
|
|
@ -24,10 +14,10 @@ const me = computed(() => {
|
|||
'purple',
|
||||
'rose',
|
||||
]
|
||||
if (!data.value) return
|
||||
if (!userData.value) return
|
||||
return {
|
||||
...data.value,
|
||||
apps: Object.entries(data.value.apps).map(([id, app]) => {
|
||||
...userData.value,
|
||||
apps: Object.entries(userData.value.apps).map(([id, app]) => {
|
||||
return {
|
||||
...app,
|
||||
id,
|
||||
|
|
@ -36,43 +26,10 @@ const me = computed(() => {
|
|||
}),
|
||||
}
|
||||
})
|
||||
|
||||
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>
|
||||
|
||||
<template>
|
||||
<div v-if="me">
|
||||
<div class="flex flex-row items-center min-w-full">
|
||||
<span class="flex-none pr-5">
|
||||
<Icon name="mdi:account-circle" size="5em" class="text-gray-500" />
|
||||
</span>
|
||||
|
||||
<div class="grow">
|
||||
<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>
|
||||
|
||||
<div class="flex-none">
|
||||
<button class="btn bg-gray-800" @click.prevent="logout">
|
||||
<Icon name="mdi:logout" class="text-gray-500" />
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="apps" class="p-10">
|
||||
<div v-if="!me.apps.length">
|
||||
<em class="text-gray-400"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue