136 lines
4.8 KiB
Vue
136 lines
4.8 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-[radial-gradient(circle_at_top,_rgba(var(--ui-primary-rgb),0.12),_transparent_35%),linear-gradient(180deg,var(--ui-bg)_0%,color-mix(in_oklab,var(--ui-bg)_92%,white)_100%)] px-4 py-10">
|
|
<div class="mx-auto flex min-h-[calc(100vh-5rem)] w-full max-w-5xl items-center justify-center">
|
|
|
|
<div v-if="status === 'loading'" class="space-y-4 text-center">
|
|
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-3xl bg-primary/10 text-primary ring-1 ring-primary/15">
|
|
<UIcon name="i-heroicons-arrow-path" class="h-8 w-8 animate-spin" />
|
|
</div>
|
|
<div>
|
|
<p class="text-base font-medium text-highlighted">Lade Formular...</p>
|
|
<p class="text-sm text-muted">Der Workflow wird vorbereitet.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<UCard v-else-if="status === 'error'" class="w-full max-w-md border-error/20 shadow-xl">
|
|
<div class="space-y-3 text-center text-error">
|
|
<div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-error/10 ring-1 ring-error/15">
|
|
<UIcon name="i-heroicons-exclamation-circle" class="h-8 w-8" />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold">Fehler</h3>
|
|
<p class="text-sm text-toned">{{ errorMsg }}</p>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<UCard v-else-if="status === 'pin_required'" class="w-full max-w-sm shadow-xl ring-1 ring-black/5">
|
|
<div class="mb-6 text-center">
|
|
<div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary ring-1 ring-primary/15">
|
|
<UIcon name="i-heroicons-lock-closed" class="h-6 w-6" />
|
|
</div>
|
|
<h2 class="text-xl font-semibold text-highlighted">Geschützter Bereich</h2>
|
|
<p class="text-sm text-muted">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"
|
|
class="w-full"
|
|
size="lg"
|
|
/>
|
|
<div v-if="errorMsg" class="text-center text-xs font-medium text-error">{{ errorMsg }}</div>
|
|
<UButton type="submit" block label="Entsperren" size="lg" />
|
|
</form>
|
|
</UCard>
|
|
|
|
<UCard v-else-if="status === 'success'" class="w-full max-w-md py-10 text-center shadow-xl ring-1 ring-black/5">
|
|
<div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-3xl bg-success/10 text-success ring-1 ring-success/15">
|
|
<UIcon name="i-heroicons-check" class="h-8 w-8" />
|
|
</div>
|
|
<h2 class="mb-2 text-2xl font-semibold text-highlighted">Gespeichert!</h2>
|
|
<p class="mb-6 text-sm text-muted">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-xl">
|
|
<PublicDynamicForm
|
|
v-if="context && token"
|
|
:key="formKey"
|
|
:context="context"
|
|
:token="token"
|
|
:pin="pin"
|
|
@success="handleFormSuccess"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|