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>{{ userStore.user.email }}</b>
        </div>
        <div class="divider" />
        <div class="item">
          Personen: <b>{{ userStore.userPersons.map(a => a.fullName).join(', ')}}</b>
        </div>
        <div class="divider" />
        <div class="item">
          Groepen: <b>{{ groups.join(', ') }}</b>
        </div>
        <div v-if="userStore.userPersons.map(a => a.diploma).filter(n => n !== '').join('')" class="divider" />
        <div v-if="userStore.userPersons.map(a => a.diploma).filter(n => n !== '').join('')" class="item">
          Diploma: <b>{{ userStore.userPersons.map(a => a.diploma).filter(n => n !== '').join(', ')}}</b>
        </div>
        <div class="divider" />
        <NuxtLink to="/settings/moreinfo" class="item-hover py-2 rounded-t flex items-center">
          <span>Meer Informatie</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" />
        <div @click="logout" class="item-hover rounded-b flex items-center">
          Uitloggen 
        </div>
      </div>
    </div>
    <div v-if="userStore.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 userStore = useUserStore()

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

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