123 lines
3.9 KiB
Vue
123 lines
3.9 KiB
Vue
<script setup>
|
|
definePageMeta({
|
|
layout: 'blank',
|
|
middleware: [],
|
|
auth: false
|
|
})
|
|
|
|
const config = useRuntimeConfig()
|
|
const route = useRoute()
|
|
const token = route.params.token
|
|
const status = ref('loading') // loading, pin_required, ready, error, success
|
|
const pin = ref('')
|
|
const context = ref(null)
|
|
const errorMsg = ref('')
|
|
|
|
// Hilfs-Key um die Form-Komponente bei Reset komplett neu zu initialisieren
|
|
const formKey = ref(0)
|
|
|
|
const loadContext = async () => {
|
|
status.value = 'loading'
|
|
errorMsg.value = ''
|
|
|
|
try {
|
|
const headers = {}
|
|
if (pin.value) headers['x-public-pin'] = pin.value
|
|
|
|
const res = await $fetch(`${config.public.apiBase}/workflows/context/${token}`, { headers })
|
|
context.value = res
|
|
status.value = 'ready'
|
|
} catch (err) {
|
|
if (err.statusCode === 401 || err.statusCode === 403) {
|
|
status.value = 'pin_required'
|
|
if (err.statusCode === 403) {
|
|
errorMsg.value = 'Falsche PIN'
|
|
pin.value = ''
|
|
}
|
|
} else {
|
|
status.value = 'error'
|
|
errorMsg.value = 'Link ungültig oder abgelaufen.'
|
|
}
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadContext()
|
|
})
|
|
|
|
const handlePinSubmit = () => {
|
|
if (pin.value.length >= 4) loadContext()
|
|
}
|
|
|
|
const handleFormSuccess = () => {
|
|
status.value = 'success'
|
|
}
|
|
|
|
const resetForm = () => {
|
|
// PIN wird NICHT geleert
|
|
errorMsg.value = ''
|
|
formKey.value++ // Erzwingt Neu-Initialisierung der Kind-Komponente
|
|
loadContext() // Lädt Daten neu (Status geht auf loading -> ready)
|
|
}
|
|
</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="resetForm">Neuen Eintrag erfassen</UButton>
|
|
</UCard>
|
|
|
|
<div v-else-if="status === 'ready'" class="w-full max-w-lg">
|
|
<PublicDynamicForm
|
|
v-if="context && token"
|
|
:key="formKey"
|
|
:context="context"
|
|
:token="token"
|
|
:pin="pin"
|
|
@success="handleFormSuccess"
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
</template> |