@frigear-nu/forms 0.1.1 → 0.1.3

package/dist/runtime/app/components/FormBuilderAccess.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { resolveAccess, setAccess } from "../../utils";
+import { formsApi, resolveAccess, setAccess } from "../../utils";
 const definition = defineModel({ type: Object, ...{ required: true } });
 const props = defineProps({
   formId: { type: String, required: true },
@@ -10,7 +10,6 @@ const toast = useToast();
 const showError = useErrorToast();
 const { copy: copyText } = useCopyToClipboard();
 const format = useFormat();
-const base = computed(() => `/api/forms/admin/forms/${props.formId}`);
 const access = computed(() => resolveAccess(definition.value));
 const availabilities = computed(() => [
   { value: "web", label: t("access.availabilityWeb", "Web page and API") },
@@ -50,14 +49,14 @@ function patchMoment(side, patch) {
   if (schedule.value.type === "yearly") setSchedule({ ...schedule.value, [side]: { ...schedule.value[side], ...patch } });
 }
 const fail = (cause) => showError(cause, t("error.generic", "Something went wrong. Please try again."));
-const { data: tokens, refresh: refreshTokens } = await useFetch(() => `${base.value}/tokens`, { default: () => [] });
+const { data: tokens, refresh: refreshTokens } = await useFetch(() => formsApi.admin.tokens(props.formId), { default: () => [] });
 const tokenName = ref("");
 const creating = ref(false);
 const revealed = ref();
 async function createToken() {
   creating.value = true;
   try {
-    revealed.value = await $fetch(`${base.value}/tokens`, { method: "POST", body: { name: tokenName.value } });
+    revealed.value = await $fetch(formsApi.admin.tokens(props.formId), { method: "POST", body: { name: tokenName.value } });
     tokenName.value = "";
     await refreshTokens();
   } catch (cause) {
@@ -68,20 +67,24 @@ async function createToken() {
 }
 async function revoke(token) {
   try {
-    await $fetch(`${base.value}/tokens/${token.id}`, { method: "DELETE" });
+    await $fetch(formsApi.admin.token(props.formId, token.id), { method: "DELETE" });
     await refreshTokens();
   } catch (cause) {
     fail(cause);
   }
 }
 const copy = (text) => copyText(text, t("preview.copied", "Copied to clipboard."));
-const { data: passwordStatus, refresh: refreshPassword } = await useFetch(() => `${base.value}/password`, { default: () => ({ set: false }) });
+const { data: passwordStatus, refresh: refreshPassword } = await useFetch(() => formsApi.admin.password(props.formId), { default: () => ({ set: false }) });
 const password = ref("");
 const savingPassword = ref(false);
+const passwordHint = computed(() => [
+  access.value.auth === "password" && !passwordStatus.value?.set ? "" : passwordStatus.value?.set ? t("access.passwordIsSet", "A password is set.") : t("access.passwordIsNotSet", "No password is set."),
+  access.value.auth !== "password" ? t("access.passwordInactive", "It is only checked when authentication is set to Shared password.") : ""
+].filter(Boolean).join(" ") || void 0);
 async function savePassword() {
   savingPassword.value = true;
   try {
-    await $fetch(`${base.value}/password`, { method: "PUT", body: { password: password.value } });
+    await $fetch(formsApi.admin.password(props.formId), { method: "PUT", body: { password: password.value } });
     password.value = "";
     await refreshPassword();
     toast.add({ title: t("access.passwordSaved", "Password saved."), color: "success" });
@@ -93,14 +96,14 @@ async function savePassword() {
 }
 async function clearPassword() {
   try {
-    await $fetch(`${base.value}/password`, { method: "DELETE" });
+    await $fetch(formsApi.admin.password(props.formId), { method: "DELETE" });
     await refreshPassword();
   } catch (cause) {
     fail(cause);
   }
 }
 const origin = useRequestURL().origin;
-const submitUrl = computed(() => `${origin}/api/forms/${props.slug}/submit`);
+const submitUrl = computed(() => `${origin}${formsApi.submit(props.slug)}`);
 const snippet = computed(() => {
   const headers = {
     token: "  -H 'Authorization: Bearer TOKEN' \\\n",
@@ -115,283 +118,273 @@ ${headers}  -H 'content-type: application/json' \\
 </script>
 
 <template>
-  <div class="max-w-2xl space-y-8">
-    <section class="space-y-4">
-      <h2 class="font-semibold">
-        {{ t("access.title", "Who can use this form") }}
-      </h2>
-      <UFormField
-        :label="t('access.availability', 'Availability')"
-        :description="access.availability === 'api' ? t('access.availabilityApiHint', 'No public page: the form can only be read and submitted through the API.') : t('access.availabilityWebHint', 'The public page and the API are both available.')"
-      >
-        <USelect
-          :model-value="access.availability"
-          :items="availabilities"
-          :disabled="access.auth === 'token'"
-          class="w-full"
-          @update:model-value="definition = setAccess(definition, { availability: $event })"
-        />
-      </UFormField>
-
-      <UFormField
-        :label="t('access.auth', 'Authentication')"
-        :description="access.auth === 'token' ? t('access.authTokenHint', 'Token forms are API only: a token cannot be typed into a page.') : void 0"
-      >
-        <USelect
-          :model-value="access.auth"
-          :items="authModes"
-          class="w-full"
-          @update:model-value="definition = setAccess(definition, { auth: $event })"
-        />
-      </UFormField>
-      <UFormField
-        :label="t('schedule.title', 'Open period')"
-        :description="t('schedule.hint', 'Outside the period the form shows a closed notice and rejects submissions. A season whose end is before its start wraps over new year.')"
-      >
-        <USelect
-          :model-value="schedule.type"
-          :items="scheduleTypes"
-          class="w-full"
-          @update:model-value="changeScheduleType($event)"
-        />
-      </UFormField>
+  <div class="flex flex-col gap-4">
+    <SectionCard :title="t('access.title', 'Who can use this form')">
+      <div class="flex flex-col divide-y divide-default">
+        <FormRow
+          :label="t('access.availability', 'Availability')"
+          :description="access.availability === 'api' ? t('access.availabilityApiHint', 'No public page: the form can only be read and submitted through the API.') : t('access.availabilityWebHint', 'The public page and the API are both available.')"
+        >
+          <USelect
+            :model-value="access.availability"
+            :items="availabilities"
+            :disabled="access.auth === 'token'"
+            class="w-full sm:max-w-sm"
+            @update:model-value="definition = setAccess(definition, { availability: $event })"
+          />
+        </FormRow>
 
-      <div
-        v-if="schedule.type === 'range'"
-        class="grid gap-4 sm:grid-cols-2"
-      >
-        <UFormField :label="t('schedule.opens', 'Opens')">
-          <UInput
-            type="datetime-local"
-            class="w-full"
-            :model-value="toLocalInput(schedule.from)"
-            @update:model-value="setSchedule({ ...schedule, from: fromLocalInput($event) })"
+        <FormRow
+          :label="t('access.auth', 'Authentication')"
+          :description="access.auth === 'token' ? t('access.authTokenHint', 'Token forms are API only: a token cannot be typed into a page.') : void 0"
+        >
+          <USelect
+            :model-value="access.auth"
+            :items="authModes"
+            class="w-full sm:max-w-sm"
+            @update:model-value="definition = setAccess(definition, { auth: $event })"
           />
-        </UFormField>
-        <UFormField :label="t('schedule.closes', 'Closes')">
-          <UInput
-            type="datetime-local"
-            class="w-full"
-            :model-value="toLocalInput(schedule.to)"
-            @update:model-value="setSchedule({ ...schedule, to: fromLocalInput($event) })"
+        </FormRow>
+        <FormRow
+          :label="t('schedule.title', 'Open period')"
+          :description="t('schedule.hint', 'Outside the period the form shows a closed notice and rejects submissions. A season whose end is before its start wraps over new year.')"
+        >
+          <USelect
+            :model-value="schedule.type"
+            :items="scheduleTypes"
+            class="w-full sm:max-w-sm"
+            @update:model-value="changeScheduleType($event)"
           />
-        </UFormField>
-      </div>
+        </FormRow>
 
-      <div
-        v-else-if="schedule.type === 'yearly'"
-        class="space-y-4"
-      >
-        <div
-          v-for="side in ['from', 'to']"
-          :key="side"
-          class="grid gap-4 sm:grid-cols-3"
-        >
-          <UFormField :label="side === 'from' ? t('schedule.opens', 'Opens') : t('schedule.closes', 'Closes')">
-            <USelect
-              :model-value="schedule[side].month"
-              :items="months"
-              class="w-full"
-              @update:model-value="patchMoment(side, { month: Number($event) })"
+        <template v-if="schedule.type === 'range'">
+          <FormRow :label="t('schedule.opens', 'Opens')">
+            <UInput
+              type="datetime-local"
+              class="w-full sm:max-w-sm"
+              :model-value="toLocalInput(schedule.from)"
+              @update:model-value="setSchedule({ ...schedule, from: fromLocalInput($event) })"
             />
-          </UFormField>
-          <UFormField :label="t('schedule.day', 'Day')">
+          </FormRow>
+          <FormRow :label="t('schedule.closes', 'Closes')">
             <UInput
-              type="number"
-              min="1"
-              max="31"
-              class="w-full"
-              :model-value="schedule[side].day"
-              @update:model-value="patchMoment(side, { day: Number($event) })"
+              type="datetime-local"
+              class="w-full sm:max-w-sm"
+              :model-value="toLocalInput(schedule.to)"
+              @update:model-value="setSchedule({ ...schedule, to: fromLocalInput($event) })"
             />
-          </UFormField>
-          <UFormField :label="t('schedule.time', 'Time')">
+          </FormRow>
+        </template>
+
+        <template v-else-if="schedule.type === 'yearly'">
+          <FormRow
+            v-for="side in ['from', 'to']"
+            :key="side"
+            :label="side === 'from' ? t('schedule.opens', 'Opens') : t('schedule.closes', 'Closes')"
+          >
+            <div class="grid grid-cols-3 gap-2 sm:max-w-sm">
+              <UFormField :label="t('schedule.month', 'Month')">
+                <USelect
+                  :model-value="schedule[side].month"
+                  :items="months"
+                  class="w-full"
+                  @update:model-value="patchMoment(side, { month: Number($event) })"
+                />
+              </UFormField>
+              <UFormField :label="t('schedule.day', 'Day')">
+                <UInput
+                  type="number"
+                  min="1"
+                  max="31"
+                  class="w-full"
+                  :model-value="schedule[side].day"
+                  @update:model-value="patchMoment(side, { day: Number($event) })"
+                />
+              </UFormField>
+              <UFormField :label="t('schedule.time', 'Time')">
+                <UInput
+                  type="time"
+                  class="w-full"
+                  :model-value="schedule[side].time"
+                  @update:model-value="patchMoment(side, { time: String($event) })"
+                />
+              </UFormField>
+            </div>
+          </FormRow>
+          <FormRow :label="t('schedule.timezone', 'Timezone')">
             <UInput
-              type="time"
-              class="w-full"
-              :model-value="schedule[side].time"
-              @update:model-value="patchMoment(side, { time: String($event) })"
+              class="w-full sm:max-w-sm"
+              :model-value="schedule.timezone"
+              @update:model-value="setSchedule({ ...schedule, timezone: String($event) })"
             />
-          </UFormField>
-        </div>
-        <UFormField :label="t('schedule.timezone', 'Timezone')">
-          <UInput
-            class="w-full"
-            :model-value="schedule.timezone"
-            @update:model-value="setSchedule({ ...schedule, timezone: String($event) })"
-          />
-        </UFormField>
+          </FormRow>
+        </template>
+
+        <p class="pt-4 text-sm text-muted">
+          {{ t("access.saveHint", "Availability and authentication are saved with the form. Tokens and the password take effect immediately.") }}
+        </p>
       </div>
+    </SectionCard>
 
-      <p class="text-sm text-muted">
-        {{ t("access.saveHint", "Availability and authentication are saved with the form. Tokens and the password take effect immediately.") }}
-      </p>
-    </section>
+    <SectionCard :title="t('access.tokensTitle', 'API tokens')">
+      <div class="flex flex-col gap-4">
+        <p class="text-sm text-muted">
+          {{ t("access.tokensHint", "Send a token as Authorization: Bearer TOKEN or in the x-form-token header. It is shown only once.") }}
+        </p>
+        <UAlert
+          v-if="access.auth !== 'token'"
+          color="neutral"
+          variant="subtle"
+          :title="t('access.tokensInactive', 'Tokens are only checked when authentication is set to API token.')"
+        />
 
-    <section class="space-y-4">
-      <h2 class="font-semibold">
-        {{ t("access.tokensTitle", "API tokens") }}
-      </h2>
-      <p class="text-sm text-muted">
-        {{ t("access.tokensHint", "Send a token as Authorization: Bearer TOKEN or in the x-form-token header. It is shown only once.") }}
-      </p>
-      <UAlert
-        v-if="access.auth !== 'token'"
-        color="neutral"
-        variant="subtle"
-        :title="t('access.tokensInactive', 'Tokens are only checked when authentication is set to API token.')"
-      />
+        <form
+          class="flex gap-2"
+          @submit.prevent="createToken"
+        >
+          <UInput
+            v-model="tokenName"
+            :placeholder="t('access.tokenName', 'Token name, e.g. Mobile app')"
+            class="flex-1 sm:max-w-sm"
+          />
+          <UButton
+            type="submit"
+            :loading="creating"
+            :disabled="!tokenName.trim()"
+            :label="t('access.createToken', 'Create token')"
+          />
+        </form>
 
-      <form
-        class="flex gap-2"
-        @submit.prevent="createToken"
-      >
-        <UInput
-          v-model="tokenName"
-          :placeholder="t('access.tokenName', 'Token name, e.g. Mobile app')"
-          class="flex-1"
-        />
-        <UButton
-          type="submit"
-          :loading="creating"
-          :disabled="!tokenName.trim()"
-          :label="t('access.createToken', 'Create token')"
-        />
-      </form>
+        <UAlert
+          v-if="revealed"
+          color="success"
+          variant="subtle"
+          :title="t('access.tokenCreated', 'Copy this token now. You will not see it again.')"
+          :close="true"
+          @update:open="revealed = void 0"
+        >
+          <template #description>
+            <div class="mt-2 flex items-center gap-2">
+              <code
+                data-testid="revealed-token"
+                class="break-all rounded bg-elevated px-2 py-1 text-xs"
+              >{{ revealed.token }}</code>
+              <UButton
+                color="neutral"
+                variant="outline"
+                size="xs"
+                icon="i-lucide-copy"
+                :label="t('preview.copy', 'Copy')"
+                @click="copy(revealed.token)"
+              />
+            </div>
+          </template>
+        </UAlert>
 
-      <UAlert
-        v-if="revealed"
-        color="success"
-        variant="subtle"
-        :title="t('access.tokenCreated', 'Copy this token now. You will not see it again.')"
-        :close="true"
-        @update:open="revealed = void 0"
-      >
-        <template #description>
-          <div class="mt-2 flex items-center gap-2">
-            <code
-              data-testid="revealed-token"
-              class="break-all rounded bg-elevated px-2 py-1 text-xs"
-            >{{ revealed.token }}</code>
+        <ul
+          v-if="tokens?.length"
+          class="divide-y divide-default rounded-md border border-default"
+        >
+          <li
+            v-for="token in tokens"
+            :key="token.id"
+            class="flex items-center justify-between gap-3 p-3"
+          >
+            <div class="min-w-0">
+              <p class="truncate font-medium">
+                {{ token.name }}
+                <StatusBadge
+                  v-if="token.revokedAt"
+                  status="revoked"
+                  size="sm"
+                  :label="t('access.revoked', 'Revoked')"
+                  :colors="{ revoked: 'error' }"
+                />
+              </p>
+              <p class="text-xs text-muted">
+                <code>{{ token.prefix }}…</code>
+                ·
+                {{ token.lastUsedAt ? t("access.lastUsed", "Last used {date}", { date: format.dateTime(token.lastUsedAt) }) : t("access.neverUsed", "Never used") }}
+              </p>
+            </div>
             <UButton
-              color="neutral"
+              v-if="!token.revokedAt"
+              color="error"
               variant="outline"
               size="xs"
-              icon="i-lucide-copy"
-              :label="t('preview.copy', 'Copy')"
-              @click="copy(revealed.token)"
+              :label="t('access.revoke', 'Revoke')"
+              @click="revoke(token)"
             />
-          </div>
-        </template>
-      </UAlert>
+          </li>
+        </ul>
+        <p
+          v-else
+          class="text-sm text-muted"
+        >
+          {{ t("access.noTokens", "No tokens yet.") }}
+        </p>
+      </div>
+    </SectionCard>
 
-      <ul
-        v-if="tokens?.length"
-        class="divide-y divide-default rounded-md border border-default"
-      >
-        <li
-          v-for="token in tokens"
-          :key="token.id"
-          class="flex items-center justify-between gap-3 p-3"
+    <SectionCard :title="t('access.passwordTitle', 'Shared password')">
+      <div class="flex flex-col gap-4">
+        <UAlert
+          v-if="access.auth === 'password' && !passwordStatus?.set"
+          color="warning"
+          variant="subtle"
+          :title="t('access.passwordMissing', 'No password is set, so nobody can open this form yet.')"
+        />
+        <FormRow
+          :label="t('access.passwordLabel', 'Password')"
+          :description="passwordHint"
         >
-          <div class="min-w-0">
-            <p class="truncate font-medium">
-              {{ token.name }}
-              <UBadge
-                v-if="token.revokedAt"
-                color="error"
-                variant="subtle"
-                size="sm"
-                :label="t('access.revoked', 'Revoked')"
-              />
-            </p>
-            <p class="text-xs text-muted">
-              <code>{{ token.prefix }}…</code>
-              ·
-              {{ token.lastUsedAt ? t("access.lastUsed", "Last used {date}", { date: format.dateTime(token.lastUsedAt) }) : t("access.neverUsed", "Never used") }}
-            </p>
-          </div>
+          <form
+            class="flex flex-wrap gap-2"
+            @submit.prevent="savePassword"
+          >
+            <UInput
+              v-model="password"
+              type="password"
+              autocomplete="new-password"
+              :placeholder="passwordStatus?.set ? t('access.newPassword', 'New password') : t('access.setPassword', 'Password (min. 6 characters)')"
+              class="min-w-0 flex-1 sm:max-w-sm"
+            />
+            <UButton
+              type="submit"
+              :loading="savingPassword"
+              :disabled="password.length < 6"
+              :label="passwordStatus?.set ? t('access.changePassword', 'Change') : t('access.savePassword', 'Set password')"
+            />
+            <UButton
+              v-if="passwordStatus?.set"
+              type="button"
+              color="error"
+              variant="outline"
+              :label="t('access.clearPassword', 'Clear')"
+              @click="clearPassword"
+            />
+          </form>
+        </FormRow>
+      </div>
+    </SectionCard>
+
+    <SectionCard :title="t('access.apiTitle', 'API')">
+      <div class="flex flex-col gap-4">
+        <p class="text-sm text-muted">
+          {{ t("access.apiHint", "Submit with POST (JSON, or multipart with file:KEY parts). The definition is available with GET on /api/forms/{slug}.", { slug: props.slug }) }}
+        </p>
+        <div class="flex items-start gap-2">
+          <pre class="flex-1 overflow-x-auto rounded-md bg-elevated p-3 text-xs">{{ snippet }}</pre>
           <UButton
-            v-if="!token.revokedAt"
-            color="error"
+            color="neutral"
             variant="outline"
             size="xs"
-            :label="t('access.revoke', 'Revoke')"
-            @click="revoke(token)"
+            icon="i-lucide-copy"
+            :label="t('preview.copy', 'Copy')"
+            @click="copy(snippet)"
           />
-        </li>
-      </ul>
-      <p
-        v-else
-        class="text-sm text-muted"
-      >
-        {{ t("access.noTokens", "No tokens yet.") }}
-      </p>
-    </section>
-
-    <section class="space-y-4">
-      <h2 class="font-semibold">
-        {{ t("access.passwordTitle", "Shared password") }}
-      </h2>
-      <UAlert
-        v-if="access.auth === 'password' && !passwordStatus?.set"
-        color="warning"
-        variant="subtle"
-        :title="t('access.passwordMissing', 'No password is set, so nobody can open this form yet.')"
-      />
-      <p
-        v-else
-        class="text-sm text-muted"
-      >
-        {{ passwordStatus?.set ? t("access.passwordIsSet", "A password is set.") : t("access.passwordIsNotSet", "No password is set.") }}
-        {{ access.auth !== "password" ? t("access.passwordInactive", "It is only checked when authentication is set to Shared password.") : "" }}
-      </p>
-      <form
-        class="flex gap-2"
-        @submit.prevent="savePassword"
-      >
-        <UInput
-          v-model="password"
-          type="password"
-          autocomplete="new-password"
-          :placeholder="passwordStatus?.set ? t('access.newPassword', 'New password') : t('access.setPassword', 'Password (min. 6 characters)')"
-          class="flex-1"
-        />
-        <UButton
-          type="submit"
-          :loading="savingPassword"
-          :disabled="password.length < 6"
-          :label="passwordStatus?.set ? t('access.changePassword', 'Change') : t('access.savePassword', 'Set password')"
-        />
-        <UButton
-          v-if="passwordStatus?.set"
-          type="button"
-          color="error"
-          variant="outline"
-          :label="t('access.clearPassword', 'Clear')"
-          @click="clearPassword"
-        />
-      </form>
-    </section>
-
-    <section class="space-y-3">
-      <h2 class="font-semibold">
-        {{ t("access.apiTitle", "API") }}
-      </h2>
-      <p class="text-sm text-muted">
-        {{ t("access.apiHint", "Submit with POST (JSON, or multipart with file:KEY parts). The definition is available with GET on /api/forms/{slug}.", { slug: props.slug }) }}
-      </p>
-      <div class="flex items-start gap-2">
-        <pre class="flex-1 overflow-x-auto rounded-md bg-elevated p-3 text-xs">{{ snippet }}</pre>
-        <UButton
-          color="neutral"
-          variant="outline"
-          size="xs"
-          icon="i-lucide-copy"
-          :label="t('preview.copy', 'Copy')"
-          @click="copy(snippet)"
-        />
+        </div>
       </div>
-    </section>
+    </SectionCard>
   </div>
 </template>

package/dist/runtime/app/components/FormBuilderCaptchaSettings.vue

@@ -60,7 +60,14 @@ const keyMissing = computed(() => !captchaSiteKey(props.field));
         data-testid="captcha-secret-status"
       >
         <span class="text-muted">{{ t("captcha.secretStatus", "Secret key") }}:</span>
-        <span :class="secrets.source === 'unset' ? 'text-warning' : 'text-success'">{{ secrets.statusLabel }}</span>
+        <USkeleton
+          v-if="secrets.loading"
+          class="h-5 w-32"
+        />
+        <span
+          v-else
+          :class="secrets.source === 'unset' ? 'text-warning' : 'text-success'"
+        >{{ secrets.statusLabel }}</span>
       </p>
       <UAlert
         v-if="secrets.secrets?.unreadable"