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,
|
addDirAttribute: true,
|
||||||
addSeoAttributes: 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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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>
|
<Html :lang="head.htmlAttrs?.lang" :dir="head.htmlAttrs?.dir"></Html>
|
||||||
|
|
||||||
<div class="container mx-auto p-4">
|
<header class="py-10">
|
||||||
<slot />
|
<slot name="header">
|
||||||
</div>
|
<div class="flex flex-row flex-wrap items-center min-w-full">
|
||||||
|
<Icon name="mdi:account-circle" size="5em" class="mr-3" />
|
||||||
|
|
||||||
<footer class="container fixed bottom-10 mx-10 pr-10 text-gray-400">
|
<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>
|
||||||
|
<slot />
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="mt-auto">
|
||||||
|
<!-- class="container fixed bottom-10 mx-10 pr-10 text-gray-400" -->
|
||||||
<slot name="footer">
|
<slot name="footer">
|
||||||
<div class="flex flex-row items-end">
|
<div class="sm:flex flex-row flex-wrap items-end justify-center">
|
||||||
<!-- FIXME: wrap this in an if: connected somehow ? -->
|
<nav
|
||||||
<nav class="grow space-x-5 border-t mr-10 border-gray-500">
|
class="border-t border-gray-500 space-x-5 flex-wrap sm:mr-5 text-center sm:text-left"
|
||||||
<a>Edit my profile</a>
|
>
|
||||||
<a href="//yunohost.org/docs" target="_blank">Documentation</a>
|
<NuxtLink
|
||||||
<a href="//yunohost.org/help" target="_blank">Help</a>
|
v-for="link in footerLinks"
|
||||||
<a href="/yunohost/admin/" target="_blank">Administration</a>
|
:key="link.to"
|
||||||
|
:to="link.to"
|
||||||
|
:target="link.newWindow ? '_blank' : undefined"
|
||||||
|
class="link link-hover text-base-content inline-block"
|
||||||
|
>
|
||||||
|
{{ link.text }}
|
||||||
|
</NuxtLink>
|
||||||
</nav>
|
</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>
|
</div>
|
||||||
</slot>
|
</slot>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
@ -33,9 +98,5 @@ const head = useLocaleHead({
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
font-family: 'Source Sans 3';
|
font-family: 'Source Sans 3';
|
||||||
@apply bg-gray-700 text-gray-200;
|
|
||||||
}
|
|
||||||
.btn {
|
|
||||||
@apply py-2 px-4 rounded;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const isLoggedIn = useIsLoggedIn()
|
const userData = await useUserInfo()
|
||||||
|
|
||||||
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 me = computed(() => {
|
const me = computed(() => {
|
||||||
const appTileColors = [
|
const appTileColors = [
|
||||||
|
|
@ -24,10 +14,10 @@ const me = computed(() => {
|
||||||
'purple',
|
'purple',
|
||||||
'rose',
|
'rose',
|
||||||
]
|
]
|
||||||
if (!data.value) return
|
if (!userData.value) return
|
||||||
return {
|
return {
|
||||||
...data.value,
|
...userData.value,
|
||||||
apps: Object.entries(data.value.apps).map(([id, app]) => {
|
apps: Object.entries(userData.value.apps).map(([id, app]) => {
|
||||||
return {
|
return {
|
||||||
...app,
|
...app,
|
||||||
id,
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div v-if="me">
|
<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 id="apps" class="p-10">
|
||||||
<div v-if="!me.apps.length">
|
<div v-if="!me.apps.length">
|
||||||
<em class="text-gray-400"
|
<em class="text-gray-400"
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue