wrbapp/frontend/pages/settings/index.vue

<template>
    <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
        <div>
            <h1 class="text-xl ml-2 font-bold">Info</h1>
            <div class="container">
                <div class="item">
                    Email: <b>{{ user.email }}</b>
                </div>
                <div class="divider" />
                <div class="item">
                    Personen: <b>{{ userPersons.map(a => a.fullName).join(', ')}}</b>
                </div>
                <div class="divider" />
                <div class="item">
                    Groepen: <b>{{ groups.join(', ') }}</b>
                </div>
                <div v-if="userPersons.map(a => a.diploma).filter(n => n !== '').join('')" class="divider" />
                <div v-if="userPersons.map(a => a.diploma).filter(n => n !== '').join('')" class="item">
                    Diploma: <b>{{ userPersons.map(a => a.diploma).filter(n => n !== '').join(', ')}}</b>
                </div>
                <div class="divider" />
                <NuxtLink to="/settings/privacypolicy" class="item-hover py-2 rounded-t flex items-center">
                    <span>Privacybeleid</span>
                    <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
                </NuxtLink>
            </div>
        </div>
        <div>
            <h1 class="text-xl ml-2 font-bold">Account</h1>
            <div class="container">
                <NuxtLink to="/settings/config/managerelatiecodes" class="item-hover py-2 rounded-t flex items-center">
                    <span>Beheer Personen</span>
                    <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
                </NuxtLink>
                <div class="divider" />
                <NuxtLink to="/settings/config/changepassword" class="item-hover py-2 flex items-center">
                    <span>Wachtwoord Wijzigen</span>
                    <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
                </NuxtLink>
                <div class="divider" />
                <NuxtLink to="/settings/config/changeemail" class="item-hover py-2 flex items-center">
                    <span>Email Wijzigen</span>
                    <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
                </NuxtLink>
                <div class="divider" />
                <div @click="logout" class="item-hover rounded-b flex items-center">
                    Uitloggen 
                </div>
            </div>
        </div>
        <div v-if="userData.admin">
            <h1 class="text-xl ml-2 font-bold">Admin</h1>
            <div class="container">
                <NuxtLink to="/settings/admin/users" class="rounded-t item-hover py-2 flex items-center">
                    <span>Beheer gebruikers</span>
                    <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
                </NuxtLink>
                <div class="divider" />
                <NuxtLink to="/settings/admin/ledenlijst" class="rounded-b item-hover py-2 flex items-center">
                    <span>Ledenlijst</span>
                    <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
                </NuxtLink>
            </div>
        </div>
        <div>
            <h2 class="text-center font-bold">Gemaakt door <u><a href="https://xeovalyte.com/">Timo Boomers</a></u></h2>
        </div>
    </div>
</template>

<script setup>
import { signOut } from "firebase/auth";

definePageMeta({
    title: 'Settings'
})

const { auth, userData, userPersons, user } = inject('firebase')

const groups = computed(() => {
    return [...new Set(userPersons.value.map(a => a.groups.join()).join().split(','))]
})

const logout = () => {
    signOut(auth.value)
        .catch((error) => {
            console.log(error)
        })
}
</script>