@frigear-nu/forms 0.0.6 → 0.0.8

package/dist/runtime/app/pages/admin-submission.vue

@@ -21,7 +21,7 @@ async function redeliver() {
 </script>
 
 <template>
-  <UContainer class="max-w-3xl space-y-6 py-10">
+  <AdminPage>
     <UAlert
       v-if="error || !submission"
       color="error"
@@ -30,20 +30,11 @@ async function redeliver() {
     />
 
     <template v-else>
-      <div>
-        <NuxtLink
-          :to="paths('adminSubmissions', { id })"
-          class="text-sm text-muted hover:underline"
-        >
-          ← {{ t("admin.submissionsTitle", "Submissions") }}
-        </NuxtLink>
-        <h1 class="text-3xl font-bold">
-          {{ new Date(submission.createdAt).toLocaleString() }}
-        </h1>
-        <p class="text-sm text-muted">
-          {{ submission.formSlug }} · v{{ submission.formVersion }} · {{ submission.locale }}
-        </p>
-      </div>
+      <AdminPageHeader
+        :title="new Date(submission.createdAt).toLocaleString()"
+        :description="`${submission.formSlug} \xB7 v${submission.formVersion} \xB7 ${submission.locale}`"
+        :back="{ label: t('admin.submissionsTitle', 'Submissions'), to: paths('adminSubmissions', { id }) }"
+      />
 
       <UAlert
         :color="submission.deliveryStatus === 'failed' ? 'error' : 'neutral'"
@@ -55,5 +46,5 @@ async function redeliver() {
 
       <FormSubmissionView :submission="submission" />
     </template>
-  </UContainer>
+  </AdminPage>
 </template>

package/dist/runtime/app/pages/admin-submissions.vue

@@ -5,22 +5,20 @@ const paths = useFormsPaths();
 const id = computed(() => String(route.params.id));
 const { data: submissions, error } = await useFetch(() => `/api/forms/admin/forms/${id.value}/submissions`);
 const color = { none: "neutral", pending: "warning", delivered: "success", failed: "error" };
+const columns = [
+  { accessorKey: "createdAt", header: t("admin.submittedAt", "Submitted") },
+  { id: "preview", header: t("admin.answers", "Answers") },
+  { accessorKey: "deliveryStatus", header: t("admin.delivery", "Delivery") }
+];
 const format = (iso) => new Date(iso).toLocaleString();
 </script>
 
 <template>
-  <UContainer class="space-y-6 py-10">
-    <div>
-      <NuxtLink
-        :to="paths('adminForm', { id })"
-        class="text-sm text-muted hover:underline"
-      >
-        ← {{ t("admin.edit", "Edit") }}
-      </NuxtLink>
-      <h1 class="text-3xl font-bold">
-        {{ t("admin.submissionsTitle", "Submissions") }}
-      </h1>
-    </div>
+  <AdminPage>
+    <AdminPageHeader
+      :title="t('admin.submissionsTitle', 'Submissions')"
+      :back="{ label: t('admin.edit', 'Edit'), to: paths('adminForm', { id }) }"
+    />
 
     <UAlert
       v-if="error"
@@ -28,44 +26,41 @@ const format = (iso) => new Date(iso).toLocaleString();
       variant="subtle"
       :title="t('admin.forbidden', 'You are not allowed to manage forms.')"
     />
-    <UEmpty
-      v-else-if="!submissions?.length"
-      icon="i-lucide-inbox"
-      :title="t('admin.noSubmissions', 'No submissions yet.')"
-    />
-
-    <div
+    <AdminTable
       v-else
-      class="divide-y divide-default rounded-lg border border-default"
+      :data="submissions ?? []"
+      :columns="columns"
+      @select="(_, row2) => navigateTo(paths('adminSubmission', { id, submissionId: row2.original.id }))"
     >
-      <NuxtLink
-        v-for="submission in submissions"
-        :key="submission.id"
-        :to="paths('adminSubmission', { id, submissionId: submission.id })"
-        class="flex flex-wrap items-center justify-between gap-3 p-4 hover:bg-elevated"
-      >
-        <div class="min-w-0 space-y-1">
-          <p class="text-sm text-muted">
-            {{ format(submission.createdAt) }}
-          </p>
-          <p class="truncate">
+      <template #createdAt-cell="{ row }">
+        <span class="text-muted">{{ format(row.original.createdAt) }}</span>
+      </template>
+      <template #preview-cell="{ row }">
+        <p class="max-w-md truncate">
+          <span
+            v-for="(answer, index) in row.original.preview"
+            :key="answer.label"
+          >
             <span
-              v-for="(answer, index) in submission.preview"
-              :key="answer.label"
-            >
-              <span
-                v-if="index"
-                class="text-muted"
-              > · </span>{{ answer.value }}
-            </span>
-          </p>
-        </div>
+              v-if="index"
+              class="text-muted"
+            > · </span>{{ answer.value }}
+          </span>
+        </p>
+      </template>
+      <template #deliveryStatus-cell="{ row }">
         <UBadge
-          :color="color[submission.deliveryStatus]"
+          :color="color[row.original.deliveryStatus]"
           variant="subtle"
-          :label="t(`delivery.${submission.deliveryStatus}`, submission.deliveryStatus)"
+          :label="t(`delivery.${row.original.deliveryStatus}`, row.original.deliveryStatus)"
+        />
+      </template>
+      <template #empty>
+        <AdminEmpty
+          icon="i-lucide-inbox"
+          :title="t('admin.noSubmissions', 'No submissions yet.')"
         />
-      </NuxtLink>
-    </div>
-  </UContainer>
+      </template>
+    </AdminTable>
+  </AdminPage>
 </template>

package/dist/runtime/app/pages/admin.vue

@@ -3,6 +3,7 @@ import { defineForm } from "../../utils";
 const t = useModuleT("forms");
 const paths = useFormsPaths();
 const toast = useToast();
+const link = useFormLink();
 const { data: forms, error, refresh } = await useFetch("/api/forms/admin/forms");
 const starter = defineForm({
   mode: "single",
@@ -31,6 +32,14 @@ async function create() {
     toast.add({ title: cause.statusMessage ?? t("error.generic", "Something went wrong. Please try again."), color: "error" });
   }
 }
+async function clone(form) {
+  try {
+    const copy = await $fetch(`/api/forms/admin/forms/${form.id}/clone`, { method: "POST" });
+    await navigateTo(paths("adminForm", { id: copy.id }));
+  } catch (cause) {
+    toast.add({ title: cause.statusMessage ?? t("error.generic", "Something went wrong. Please try again."), color: "error" });
+  }
+}
 async function runImport() {
   try {
     const parsed = JSON.parse(importJson.value);
@@ -46,16 +55,32 @@ async function runImport() {
     toast.add({ title: cause.statusMessage ?? t("admin.invalidJson", "The JSON is not valid."), color: "error" });
   }
 }
+const columns = [
+  { accessorKey: "name", header: t("admin.name", "Name") },
+  { accessorKey: "status", header: t("admin.status", "Status") },
+  { id: "actions", header: "" }
+];
 const statusColor = { draft: "neutral", published: "success", archived: "warning" };
+const statuses = ["published", "draft", "archived"];
+const tab = ref("published");
+const search = ref("");
+const tabs = computed(() => statuses.map((status) => ({
+  value: status,
+  label: t(`status.${status}`, status),
+  badge: (forms.value ?? []).filter((form) => form.status === status).length
+})));
+const visibleForms = computed(() => {
+  const query = search.value.trim().toLowerCase();
+  return (forms.value ?? []).filter(
+    (form) => form.status === tab.value && (!query || form.name.toLowerCase().includes(query) || form.slug.toLowerCase().includes(query))
+  );
+});
 </script>
 
 <template>
-  <UContainer class="space-y-6 py-10">
-    <div class="flex items-center justify-between gap-2">
-      <h1 class="text-3xl font-bold">
-        {{ t("admin.title", "Forms") }}
-      </h1>
-      <div class="flex gap-2">
+  <AdminPage>
+    <AdminPageHeader :title="t('admin.title', 'Forms')">
+      <template #actions>
         <UButton
           color="neutral"
           variant="outline"
@@ -68,8 +93,8 @@ const statusColor = { draft: "neutral", published: "success", archived: "warning
           :label="t('admin.new', 'New form')"
           @click="creating = true"
         />
-      </div>
-    </div>
+      </template>
+    </AdminPageHeader>
 
     <UAlert
       v-if="error"
@@ -78,61 +103,98 @@ const statusColor = { draft: "neutral", published: "success", archived: "warning
       :title="t('admin.forbidden', 'You are not allowed to manage forms.')"
     />
 
-    <UEmpty
-      v-else-if="!forms?.length"
-      icon="i-lucide-clipboard-list"
-      :title="t('admin.empty', 'No forms yet.')"
-    />
-
     <div
       v-else
-      class="divide-y divide-default rounded-lg border border-default"
+      class="flex flex-wrap items-center justify-between gap-3"
     >
-      <div
-        v-for="form in forms"
-        :key="form.id"
-        class="flex flex-wrap items-center justify-between gap-3 p-4"
-      >
-        <div class="space-y-1">
-          <NuxtLink
-            :to="paths('adminForm', { id: form.id })"
-            class="font-medium hover:underline"
-          >
-            {{ form.name }}
-          </NuxtLink>
+      <UTabs
+        v-model="tab"
+        :items="tabs"
+        :content="false"
+        class="w-auto"
+      />
+      <UInput
+        v-model="search"
+        class="w-full sm:w-72"
+        icon="i-lucide-search"
+        :placeholder="t('admin.search', 'Search forms')"
+        :aria-label="t('admin.search', 'Search forms')"
+      />
+    </div>
+
+    <AdminTable
+      v-if="!error"
+      :data="visibleForms"
+      :columns="columns"
+      @select="(_, row2) => navigateTo(paths('adminForm', { id: row2.original.id }))"
+    >
+      <template #name-cell="{ row }">
+        <div class="space-y-0.5">
+          <p class="font-medium">
+            {{ row.original.name }}
+          </p>
           <p class="text-sm text-muted">
-            /{{ form.slug }} · {{ form.mode === "stepped" ? t("admin.stepped", "Stepped") : t("admin.single", "Single page") }}
-            · v{{ form.version }}
-            <template v-if="form.storage === 'none'">
+            /{{ row.original.slug }} · {{ row.original.mode === "stepped" ? t("admin.stepped", "Stepped") : t("admin.single", "Single page") }}
+            · v{{ row.original.version }}
+            <template v-if="row.original.storage === 'none'">
               · {{ t("admin.notStored", "Not stored") }}
             </template>
           </p>
         </div>
-        <div class="flex items-center gap-3">
-          <UBadge
-            :color="statusColor[form.status]"
-            variant="subtle"
-            :label="t(`status.${form.status}`, form.status)"
-          />
+      </template>
+      <template #status-cell="{ row }">
+        <UBadge
+          :color="statusColor[row.original.status]"
+          variant="subtle"
+          :label="t(`status.${row.original.status}`, row.original.status)"
+        />
+      </template>
+      <template #actions-cell="{ row }">
+        <div class="flex items-center justify-end gap-2">
           <UButton
-            v-if="form.storage === 'db'"
+            v-if="row.original.storage === 'db' || row.original.submissionCount > 0"
             color="neutral"
             variant="outline"
             size="sm"
-            :to="paths('adminSubmissions', { id: form.id })"
-            :label="t('admin.submissions', 'Submissions ({count})', { count: form.submissionCount })"
+            :to="paths('adminSubmissions', { id: row.original.id })"
+            :label="t('admin.submissions', 'Submissions ({count})', { count: row.original.submissionCount })"
+            @click.stop
+          />
+          <UButton
+            v-if="row.original.status === 'published' && link.enabled.value"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            icon="i-lucide-link"
+            :aria-label="t('admin.copyLink', 'Copy link')"
+            @click.stop="link.copy(row.original.slug)"
+          />
+          <UButton
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            icon="i-lucide-copy"
+            :aria-label="t('admin.clone', 'Duplicate')"
+            @click="clone(form)"
           />
           <UButton
             color="neutral"
             variant="ghost"
             size="sm"
             icon="i-lucide-pencil"
-            :to="paths('adminForm', { id: form.id })"
+            :to="paths('adminForm', { id: row.original.id })"
             :aria-label="t('admin.edit', 'Edit')"
+            @click.stop
           />
         </div>
-      </div>
-    </div>
+      </template>
+      <template #empty>
+        <AdminEmpty
+          icon="i-lucide-clipboard-list"
+          :title="forms?.length ? t('admin.noMatches', 'No forms match.') : t('admin.empty', 'No forms yet.')"
+        />
+      </template>
+    </AdminTable>
 
     <UModal
       v-model:open="creating"
@@ -140,6 +202,7 @@ const statusColor = { draft: "neutral", published: "success", archived: "warning
     >
       <template #body>
         <form
+          id="admin-form-create"
           class="space-y-4"
           @submit.prevent="create"
         >
@@ -159,12 +222,23 @@ const statusColor = { draft: "neutral", published: "success", archived: "warning
               class="w-full"
             />
           </UFormField>
+        </form>
+      </template>
+      <template #footer>
+        <div class="flex w-full justify-end gap-2">
+          <UButton
+            variant="subtle"
+            color="neutral"
+            :label="t('admin.cancel', 'Cancel')"
+            @click="creating = false"
+          />
           <UButton
             type="submit"
+            form="admin-form-create"
             :label="t('admin.create', 'Create')"
             :disabled="!draft.name || !draft.slug"
           />
-        </form>
+        </div>
       </template>
     </UModal>
 
@@ -182,6 +256,16 @@ const statusColor = { draft: "neutral", published: "success", archived: "warning
             :rows="12"
             class="w-full font-mono text-xs"
           />
+        </div>
+      </template>
+      <template #footer>
+        <div class="flex w-full justify-end gap-2">
+          <UButton
+            variant="subtle"
+            color="neutral"
+            :label="t('admin.cancel', 'Cancel')"
+            @click="importing = false"
+          />
           <UButton
             :label="t('admin.import', 'Import')"
             :disabled="!importJson.trim()"
@@ -190,5 +274,5 @@ const statusColor = { draft: "neutral", published: "success", archived: "warning
         </div>
       </template>
     </UModal>
-  </UContainer>
+  </AdminPage>
 </template>

package/dist/runtime/app/pages/form.vue

@@ -1,18 +1,84 @@
 <script setup>
 const route = useRoute();
+const t = useModuleT("forms");
 const slug = computed(() => String(route.params.slug));
-const { data: form } = await useForm(slug);
-useHead({ title: computed(() => form.value?.name ?? "") });
+const { data: access } = await useFormAccess(slug);
+if (access.value && (access.value.access.availability === "api" || access.value.access.auth === "token")) {
+  throw createError({ statusCode: 404, statusMessage: "Form not found.", fatal: true });
+}
+const needsSignIn = computed(() => access.value?.access.auth === "user" && !access.value.signedIn);
+if (needsSignIn.value) {
+  const loginPath = useAuthPages().login;
+  await navigateTo({ path: loginPath, query: { redirect: route.path } });
+}
+const gated = computed(() => access.value?.access.auth === "password");
+const password = ref("");
+const unlocked = ref("");
+const checking = ref(false);
+const wrong = ref(false);
+async function unlock() {
+  checking.value = true;
+  wrong.value = false;
+  try {
+    await $fetch(`/api/forms/${slug.value}`, { headers: { [FORM_PASSWORD_HEADER]: password.value } });
+    unlocked.value = password.value;
+  } catch {
+    wrong.value = true;
+  } finally {
+    checking.value = false;
+  }
+}
+useHead({ title: computed(() => access.value?.name ?? "") });
 </script>
 
 <template>
   <UContainer class="max-w-2xl py-10">
     <h1
-      v-if="form"
+      v-if="access"
       class="mb-6 text-3xl font-bold"
     >
-      {{ form.name }}
+      {{ access.name }}
     </h1>
-    <FormRenderer :slug="slug" />
+
+    <UAlert
+      v-if="access && !access.open"
+      icon="i-lucide-calendar-x"
+      color="neutral"
+      variant="subtle"
+      :title="t('schedule.closed', 'This form is closed.')"
+      :description="access.opensAt ? t('schedule.opensAt', 'It opens again {date}.', { date: new Date(access.opensAt).toLocaleString() }) : void 0"
+    />
+
+    <UCard v-else-if="gated && !unlocked">
+      <form
+        class="space-y-4"
+        @submit.prevent="unlock"
+      >
+        <UFormField
+          :label="t('access.passwordLabel', 'Password')"
+          :description="t('access.passwordHint', 'This form is protected. Enter the password you were given.')"
+          :error="wrong ? t('access.passwordWrong', 'Wrong password.') : void 0"
+        >
+          <UInput
+            v-model="password"
+            type="password"
+            autocomplete="off"
+            class="w-full"
+          />
+        </UFormField>
+        <UButton
+          type="submit"
+          :loading="checking"
+          :disabled="!password"
+          :label="t('access.unlock', 'Continue')"
+        />
+      </form>
+    </UCard>
+
+    <FormRenderer
+      v-else-if="!needsSignIn"
+      :slug="slug"
+      :password="unlocked || void 0"
+    />
   </UContainer>
 </template>