feat: initial commit

web/src/components/LoginPanel.vue

@@ -0,0 +1,34 @@
+<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>