Added Frontend

frontend/pages/workflows/[token].vue

@@ -0,0 +1,121 @@
+<script setup>
+definePageMeta({
+  layout: 'blank', // Kein Menü, keine Sidebar
+  middleware: [], // Keine Auth-Checks durch Nuxt
+  auth: false     // Falls du das nuxt-auth Modul nutzt
+})
+
+const route = useRoute()
+const token = route.params.token
+const { $api } = useNuxtApp() // Dein Fetch-Wrapper
+const toast = useToast()
+
+// States
+const status = ref('loading') // loading, pin_required, ready, error, success
+const pin = ref('')
+const context = ref(null)
+const errorMsg = ref('')
+
+// Daten laden
+const loadContext = async () => {
+  status.value = 'loading'
+  errorMsg.value = ''
+
+  try {
+    const headers = {}
+    if (pin.value) headers['x-public-pin'] = pin.value
+
+    // Abruf an dein Fastify Backend
+    // Pfad evtl. anpassen, wenn du Proxy nutzt
+    const res = await $fetch(`http://localhost:3100/workflows/context/${token}`, { headers })
+
+    context.value = res
+    status.value = 'ready'
+  } catch (err) {
+    if (err.statusCode === 401) {
+      status.value = 'pin_required' // PIN nötig (aber noch keine eingegeben)
+    } else if (err.statusCode === 403) {
+      status.value = 'pin_required'
+      errorMsg.value = 'Falsche PIN'
+      pin.value = ''
+    } else {
+      status.value = 'error'
+      errorMsg.value = 'Link ungültig oder abgelaufen.'
+    }
+  }
+}
+
+// Initialer Aufruf
+onMounted(() => {
+  loadContext()
+})
+
+const handlePinSubmit = () => {
+  if (pin.value.length >= 4) loadContext()
+}
+
+const handleFormSuccess = () => {
+  status.value = 'success'
+}
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-50 flex items-center justify-center p-4 font-sans">
+
+    <div v-if="status === 'loading'" class="text-center">
+      <UIcon name="i-heroicons-arrow-path" class="w-10 h-10 animate-spin text-primary-500 mx-auto" />
+      <p class="mt-4 text-gray-500">Lade Formular...</p>
+    </div>
+
+    <UCard v-else-if="status === 'error'" class="w-full max-w-md border-red-200">
+      <div class="text-center text-red-600 space-y-2">
+        <UIcon name="i-heroicons-exclamation-circle" class="w-12 h-12 mx-auto" />
+        <h3 class="font-bold text-lg">Fehler</h3>
+        <p>{{ errorMsg }}</p>
+      </div>
+    </UCard>
+
+    <UCard v-else-if="status === 'pin_required'" class="w-full max-w-sm shadow-xl">
+      <div class="text-center mb-6">
+        <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-3">
+          <UIcon name="i-heroicons-lock-closed" class="w-6 h-6 text-primary-600" />
+        </div>
+        <h2 class="text-xl font-bold text-gray-900">Geschützter Bereich</h2>
+        <p class="text-sm text-gray-500">Bitte PIN eingeben</p>
+      </div>
+
+      <form @submit.prevent="handlePinSubmit" class="space-y-4">
+        <UInput
+            v-model="pin"
+            type="password"
+            placeholder="PIN"
+            input-class="text-center text-lg tracking-widest"
+            autofocus
+            icon="i-heroicons-key"
+        />
+        <div v-if="errorMsg" class="text-red-500 text-xs text-center font-medium">{{ errorMsg }}</div>
+        <UButton type="submit" block label="Entsperren" size="lg" />
+      </form>
+    </UCard>
+
+    <UCard v-else-if="status === 'success'" class="w-full max-w-md text-center py-10">
+      <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+        <UIcon name="i-heroicons-check" class="w-8 h-8 text-green-600" />
+      </div>
+      <h2 class="text-2xl font-bold text-gray-900 mb-2">Gespeichert!</h2>
+      <p class="text-gray-500 mb-6">Die Daten wurden erfolgreich übertragen.</p>
+      <UButton variant="outline" @click="() => window.location.reload()">Neuen Eintrag erfassen</UButton>
+    </UCard>
+
+    <div v-else-if="status === 'ready'" class="w-full max-w-lg">
+      <PublicDynamicForm
+          v-if="context && token"
+          :context="context"
+          :token="token"
+          :pin="pin"
+          @success="handleFormSuccess"
+      />
+    </div>
+
+  </div>
+</template>