feat: initial commit

web/src/components/HelloResult.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+defineProps<{
+  message: string | null
+  loading: boolean
+  error: string | null
+}>()
+</script>
+
+<template>
+  <p v-if="loading">Lade GraphQL-Daten...</p>
+  <p v-else-if="error" class="error">{{ error }}</p>
+  <p v-else-if="message" class="result">{{ message }}</p>
+  <p v-else>Keine Antwort von GraphQL erhalten.</p>
+</template>
+
+<style scoped>
+.result {
+  margin: 2rem 0;
+  color: #9b4d27;
+  font-family: Georgia, serif;
+  font-size: 2.5rem;
+}
+
+.error {
+  margin-top: 1.5rem;
+  color: #a32626;
+}
+</style>

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>