Fix Worklow Form
This commit is contained in:
@@ -62,62 +62,74 @@ const resetForm = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-50 flex items-center justify-center p-4 font-sans">
|
||||
<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="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 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>
|
||||
<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"
|
||||
|
||||
<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 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>
|
||||
Reference in New Issue
Block a user