35 lines
750 B
Vue
35 lines
750 B
Vue
<script setup lang="ts">
|
|
import type { User } from 'oidc-client-ts'
|
|
|
|
defineProps<{
|
|
user: User | null
|
|
loading: boolean
|
|
authenticated: boolean
|
|
}>()
|
|
|
|
defineEmits<{
|
|
login: []
|
|
logout: []
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<p v-if="loading">Lade Anmeldung...</p>
|
|
|
|
<template v-else-if="authenticated && user">
|
|
<p class="status">Angemeldet als {{ user.profile.email ?? user.profile.sub }}</p>
|
|
<button class="secondary" type="button" @click="$emit('logout')">Abmelden</button>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<p>Zum Laden der GraphQL-Daten ist eine Anmeldung erforderlich.</p>
|
|
<button type="button" @click="$emit('login')">Mit Zitadel anmelden</button>
|
|
</template>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.status {
|
|
color: #635b51;
|
|
}
|
|
</style>
|