@umec/core 0.1.0-alpha.10 → 0.1.0-alpha.12

package/registry/disclosure/files/src/lib/disclosure-send.ts

@@ -0,0 +1,231 @@
+import { Resend } from 'resend';
+import { writeAuditLog, type AdminAuditEntry } from '@umec/core/db';
+import { authenticateAdmin } from './access';
+import { jsonError, jsonOk, readJsonObject, type AdminApiHandler } from './admin-api';
+import {
+  getDisclosureRequest,
+  incrementSendAttempts,
+  insertDisclosureRequest,
+  markDisclosed,
+  type DisclosureRequestRow,
+} from './disclosure-db';
+import {
+  createDisclosureRequestId,
+  EMAIL_PATTERN,
+  parseDisclosurePayload,
+  renderRequesterDisclosureMail,
+  resolveDisclosureMode,
+  type DisclosureBrandContext,
+  type DisclosureEnv,
+  type DisclosurePayload,
+} from './disclosure-request';
+import { getServerEnv } from './env';
+
+export type DisclosureSendKind = 'resend' | 'manual';
+
+export type DisclosureSendHandlerOptions = Pick<
+  DisclosureBrandContext,
+  'brandName' | 'emailFrom' | 'emailReplyTo'
+> & {
+  now?: () => number;
+  createId?: () => string;
+};
+
+function asDisclosureEnv(env: unknown): DisclosureEnv {
+  return env as DisclosureEnv;
+}
+
+async function sendDisclosureEmail(input: {
+  apiKey: string;
+  from: string;
+  to: string;
+  replyTo?: string;
+  requestId: string;
+  receivedAtMs: number;
+  brandName: string;
+  payload: DisclosurePayload;
+}): Promise<{ id: string } | { error: unknown }> {
+  const mail = renderRequesterDisclosureMail({
+    brandName: input.brandName,
+    requestId: input.requestId,
+    receivedAtMs: input.receivedAtMs,
+    payload: input.payload,
+  });
+  const resend = new Resend(input.apiKey);
+  const { data, error } = await resend.emails.send({
+    from: input.from,
+    to: input.to,
+    subject: mail.subject,
+    text: mail.text,
+    html: mail.html,
+    ...(input.replyTo ? { replyTo: input.replyTo } : {}),
+  });
+  if (error || !data?.id) {
+    return { error: error ?? new Error('Resend did not return an email id') };
+  }
+  return { id: data.id };
+}
+
+async function recordDiscloseAudit(input: {
+  db: NonNullable<DisclosureEnv['DB']>;
+  requestId: string;
+  adminEmail: string;
+  kind: DisclosureSendKind;
+  disclosureEmailId: string;
+}): Promise<void> {
+  const entry = {
+    entityType: 'disclosure',
+    entityId: input.requestId,
+    action: 'disclose',
+    adminEmail: input.adminEmail,
+    actor: 'human' as const,
+    detail: {
+      kind: input.kind,
+      disclosure_email_id: input.disclosureEmailId,
+    },
+  };
+  await writeAuditLog(input.db, entry as AdminAuditEntry);
+}
+
+async function sendAndRecord(input: {
+  env: DisclosureEnv;
+  brand: DisclosureSendHandlerOptions;
+  payload: DisclosurePayload;
+  row: DisclosureRequestRow;
+  adminEmail: string;
+  kind: DisclosureSendKind;
+  now: number;
+}): Promise<Response> {
+  const db = input.env.DB;
+  const apiKey = input.env.RESEND_API_KEY;
+  if (!db || !apiKey) return jsonError('Disclosure service unavailable', 503);
+
+  let sendResult: { id: string } | { error: unknown };
+  try {
+    sendResult = await sendDisclosureEmail({
+      apiKey,
+      from: input.brand.emailFrom,
+      to: input.row.requester_email,
+      replyTo: input.brand.emailReplyTo,
+      requestId: input.row.id,
+      receivedAtMs: input.row.received_at,
+      brandName: input.brand.brandName,
+      payload: input.payload,
+    });
+  } catch (error) {
+    sendResult = { error };
+  }
+
+  await incrementSendAttempts(db, input.row.id);
+
+  if ('error' in sendResult) {
+    console.error('[admin/disclosure-send] send failed', { id: input.row.id });
+    return jsonError('Failed to send disclosure email', 502);
+  }
+
+  if (!input.row.disclosure_email_id) {
+    await markDisclosed(db, input.row.id, {
+      disclosedAt: input.now,
+      disclosureEmailId: sendResult.id,
+    });
+  }
+
+  console.log(
+    JSON.stringify({
+      type: 'admin.audit',
+      action: 'disclose',
+      actor: input.adminEmail,
+      targetId: input.row.id,
+    }),
+  );
+
+  await recordDiscloseAudit({
+    db,
+    requestId: input.row.id,
+    adminEmail: input.adminEmail,
+    kind: input.kind,
+    disclosureEmailId: sendResult.id,
+  });
+
+  return jsonOk({ ok: true, id: input.row.id });
+}
+
+export function createDisclosureSendHandler(options: DisclosureSendHandlerOptions): AdminApiHandler {
+  return async ({ request }) => {
+    const auth = await authenticateAdmin(request);
+    if (auth instanceof Response) return auth;
+
+    const body = await readJsonObject(request);
+    if (body instanceof Response) return body;
+
+    const env = asDisclosureEnv(getServerEnv());
+    if (!env.DB) return jsonError('DB not available', 503);
+    if (!env.RESEND_API_KEY) return jsonError('Mail is not configured', 503);
+
+    const payload = parseDisclosurePayload(env.DISCLOSURE_PAYLOAD);
+    if (!payload) return jsonError('Disclosure payload is not configured', 503);
+
+    const now = options.now?.() ?? Date.now();
+    const id = typeof body.id === 'string' ? body.id.trim() : '';
+    const emailRaw = typeof body.email === 'string' ? body.email.trim().toLowerCase() : '';
+
+    if (id) {
+      const row = await getDisclosureRequest(env.DB, id);
+      if (!row) return jsonError('Request not found', 404);
+      return sendAndRecord({
+        env,
+        brand: options,
+        payload,
+        row,
+        adminEmail: auth.email,
+        kind: 'resend',
+        now,
+      });
+    }
+
+    if (emailRaw) {
+      if (resolveDisclosureMode(env.DISCLOSURE_MODE) !== 'manual') {
+        return jsonError('Manual disclosure is not enabled', 400);
+      }
+      if (!EMAIL_PATTERN.test(emailRaw)) {
+        return jsonError('Invalid email', 400);
+      }
+
+      const requestId = options.createId?.() ?? createDisclosureRequestId();
+      await insertDisclosureRequest(env.DB, {
+        id: requestId,
+        requesterEmail: emailRaw,
+        receivedAt: now,
+        ipHash: null,
+        userAgent: null,
+      });
+
+      const row = {
+        id: requestId,
+        requester_email: emailRaw,
+        status: 'received' as const,
+        received_at: now,
+        disclosed_at: null,
+        disclosure_email_id: null,
+        send_attempts: 0,
+        receipt_email_id: null,
+        operator_notified_at: null,
+        ip_hash: null,
+        user_agent: null,
+        created_at: now,
+      };
+
+      return sendAndRecord({
+        env,
+        brand: options,
+        payload,
+        row,
+        adminEmail: auth.email,
+        kind: 'manual',
+        now,
+      });
+    }
+
+    return jsonError('Invalid request body', 400);
+  };
+}

package/registry/disclosure/files/src/pages/admin/disclosure.astro

@@ -0,0 +1,269 @@
+---
+import config from '../../../umec.config';
+import { requireAdminAuth } from '../../lib/access';
+import { listDisclosureRequests, listUndisclosed, type DisclosureRequestRow } from '../../lib/disclosure-db';
+import {
+  DEFAULT_RETRY_MAX,
+  parsePositiveInt,
+  resolveDisclosureMode,
+  type DisclosureEnv,
+} from '../../lib/disclosure-request';
+import { getServerEnv } from '../../lib/env';
+import '../../styles/global.css';
+
+export const prerender = false;
+
+const denied = await requireAdminAuth(Astro.request);
+if (denied) return denied;
+
+Astro.response.headers.set('Cache-Control', 'no-store');
+
+const brandName = config.brand.name;
+const env = getServerEnv() as DisclosureEnv;
+const { DB: db } = env;
+const retryMax = parsePositiveInt(env.DISCLOSURE_RETRY_MAX, DEFAULT_RETRY_MAX);
+const disclosureMode = resolveDisclosureMode(env.DISCLOSURE_MODE);
+const isManualMode = disclosureMode === 'manual';
+
+let requests: DisclosureRequestRow[] = [];
+let undisclosed: DisclosureRequestRow[] = [];
+let dbNotice = '';
+
+if (db) {
+  try {
+    requests = await listDisclosureRequests(db, { limit: 100 });
+    undisclosed = await listUndisclosed(db);
+  } catch (error) {
+    console.error('[admin/disclosure] query failed:', error);
+    dbNotice = 'Disclosure requests could not be loaded.';
+  }
+} else {
+  dbNotice = 'DB binding is not available.';
+}
+
+function formatDate(value: number | string | null) {
+  if (value == null || value === '' || value === 0) return '-';
+  const timestamp = typeof value === 'string' ? Number(value) : value;
+  if (!Number.isFinite(timestamp)) return '-';
+
+  return new Intl.DateTimeFormat('ja-JP', {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+    timeZone: 'Asia/Tokyo',
+  }).format(new Date(timestamp));
+}
+
+function isUndisclosed(row: DisclosureRequestRow) {
+  return row.disclosure_email_id == null;
+}
+
+function isRetryExhausted(row: DisclosureRequestRow) {
+  return isUndisclosed(row) && row.send_attempts >= retryMax;
+}
+
+function sendStatusLabel(row: DisclosureRequestRow) {
+  if (!isUndisclosed(row)) return '送信済み';
+  if (row.send_attempts >= retryMax) return 'リトライ上限超え';
+  if (row.send_attempts > 0) return `リトライ中 (${row.send_attempts}/${retryMax})`;
+  return '未送信';
+}
+
+const exhaustedCount = undisclosed.filter((row) => row.send_attempts >= retryMax).length;
+---
+
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex, nofollow" />
+    <title>開示請求 | {brandName} admin</title>
+  </head>
+  <body class="min-h-screen bg-bg text-text">
+    <main class="mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
+      <header class="flex flex-col gap-3 border-b border-border pb-6 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <p class="font-serif text-2xl leading-none">{brandName}</p>
+          <h1 class="mt-3 text-xl font-medium tracking-normal">開示請求</h1>
+          <p class="mt-2 text-sm text-muted">
+            モード: {isManualMode ? '手動開示' : '即時自動'}
+          </p>
+        </div>
+        <div class="flex flex-wrap items-center gap-4">
+          <a href="/admin/orders" class="text-sm underline decoration-border underline-offset-4 hover:text-accent">注文一覧</a>
+          <a href="/admin/inventory" class="text-sm underline decoration-border underline-offset-4 hover:text-accent">在庫管理</a>
+          <a href="/admin/products" class="text-sm underline decoration-border underline-offset-4 hover:text-accent">商品管理</a>
+        </div>
+      </header>
+
+      {dbNotice && (
+        <p class="border border-border bg-bg px-4 py-3 text-sm text-muted">{dbNotice}</p>
+      )}
+
+      {undisclosed.length > 0 && (
+        <p
+          class="border border-accent bg-[color-mix(in_srgb,var(--color-accent)_12%,transparent)] px-4 py-3 text-sm"
+          data-undisclosed-warning
+        >
+          未開示の請求が {undisclosed.length} 件あります。
+          {exhaustedCount > 0 ? `うちリトライ上限超えは ${exhaustedCount} 件です。` : ''}
+        </p>
+      )}
+
+      {isManualMode && (
+        <section class="border border-border bg-bg p-4">
+          <h2 class="mb-4 text-sm font-medium">手動開示</h2>
+          <p class="mb-4 text-sm text-muted">
+            請求フォームからの受付は即時送信しません。メールアドレスを指定して開示メールを送れます。
+          </p>
+          <form class="flex max-w-xl flex-col gap-3 sm:flex-row sm:items-end" data-manual-disclose>
+            <label class="flex-1 text-sm">メールアドレス
+              <input
+                name="email"
+                type="email"
+                required
+                autocomplete="off"
+                class="mt-1 w-full border border-border bg-bg px-3 py-2"
+                placeholder="email@example.com"
+              />
+            </label>
+            <button
+              type="submit"
+              class="border border-accent px-4 py-2 text-sm text-accent transition hover:bg-accent hover:text-bg disabled:cursor-not-allowed disabled:border-muted disabled:text-muted disabled:hover:bg-transparent"
+            >
+              開示メールを送信
+            </button>
+          </form>
+        </section>
+      )}
+
+      <section class="overflow-x-auto border border-border bg-bg">
+        <table class="min-w-full border-collapse text-left text-sm">
+          <thead class="text-xs font-medium text-muted">
+            <tr>
+              <th class="whitespace-nowrap border-b border-border px-4 py-3">請求番号</th>
+              <th class="whitespace-nowrap border-b border-border px-4 py-3">請求者メール</th>
+              <th class="whitespace-nowrap border-b border-border px-4 py-3">受付日時</th>
+              <th class="whitespace-nowrap border-b border-border px-4 py-3">開示日時</th>
+              <th class="whitespace-nowrap border-b border-border px-4 py-3">送信状態</th>
+              <th class="whitespace-nowrap border-b border-border px-4 py-3">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            {requests.length === 0 ? (
+              <tr>
+                <td colspan="6" class="px-4 py-10 text-center text-muted">
+                  開示請求はまだありません。
+                </td>
+              </tr>
+            ) : (
+              requests.map((row) => (
+                <tr
+                  class:list={[
+                    'align-top',
+                    isUndisclosed(row) && 'bg-[color-mix(in_srgb,var(--color-accent)_12%,transparent)]',
+                  ]}
+                  data-request-row={row.id}
+                  data-undisclosed={isUndisclosed(row) ? 'true' : 'false'}
+                  data-retry-exhausted={isRetryExhausted(row) ? 'true' : 'false'}
+                >
+                  <td class="whitespace-nowrap border-b border-border px-4 py-4 font-mono text-xs">{row.id}</td>
+                  <td class="min-w-56 border-b border-border px-4 py-4">
+                    <a
+                      class="underline decoration-border underline-offset-4 hover:text-accent"
+                      href={`mailto:${row.requester_email}`}
+                    >
+                      {row.requester_email}
+                    </a>
+                  </td>
+                  <td class="whitespace-nowrap border-b border-border px-4 py-4 text-muted">
+                    {formatDate(row.received_at)}
+                  </td>
+                  <td class="whitespace-nowrap border-b border-border px-4 py-4 text-muted">
+                    {formatDate(row.disclosed_at)}
+                  </td>
+                  <td class="min-w-40 border-b border-border px-4 py-4">
+                    <div data-send-status>{sendStatusLabel(row)}</div>
+                    {isRetryExhausted(row) && (
+                      <div class="mt-1 text-xs text-accent">要手動対応</div>
+                    )}
+                    {isUndisclosed(row) && !isRetryExhausted(row) && (
+                      <div class="mt-1 text-xs text-accent">未開示</div>
+                    )}
+                  </td>
+                  <td class="whitespace-nowrap border-b border-border px-4 py-4">
+                    <button
+                      type="button"
+                      class="border border-accent px-3 py-2 text-xs font-medium text-accent transition hover:bg-accent hover:text-bg disabled:cursor-not-allowed disabled:border-muted disabled:text-muted disabled:hover:bg-transparent"
+                      data-disclosure-send
+                      data-request-id={row.id}
+                    >
+                      {isUndisclosed(row) ? '開示メールを送信' : '再送'}
+                    </button>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </section>
+    </main>
+
+    <script>
+      document.addEventListener('click', async (event) => {
+        const button = event.target instanceof Element ? event.target.closest('[data-disclosure-send]') : null;
+        if (!(button instanceof HTMLButtonElement)) return;
+        const id = button.dataset.requestId;
+        if (!id) return;
+
+        button.disabled = true;
+        const originalText = button.textContent;
+        button.textContent = '送信中';
+
+        try {
+          const response = await fetch('/api/admin/disclosure-send', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id }),
+          });
+          const payload = await response.json().catch(() => ({}));
+          if (!response.ok) throw new Error(payload.error || '送信に失敗しました');
+          window.location.reload();
+        } catch (error) {
+          button.disabled = false;
+          button.textContent = originalText;
+          alert(error instanceof Error ? error.message : '送信に失敗しました');
+        }
+      });
+
+      document.querySelector('[data-manual-disclose]')?.addEventListener('submit', async (event) => {
+        event.preventDefault();
+        const form = event.currentTarget;
+        if (!(form instanceof HTMLFormElement)) return;
+        const emailInput = form.querySelector('input[name="email"]');
+        const button = form.querySelector('button[type="submit"]');
+        if (!(emailInput instanceof HTMLInputElement)) return;
+        const email = emailInput.value.trim();
+        if (!email) {
+          alert('メールアドレスを入力してください。');
+          return;
+        }
+
+        if (button instanceof HTMLButtonElement) button.disabled = true;
+        try {
+          const response = await fetch('/api/admin/disclosure-send', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ email }),
+          });
+          const payload = await response.json().catch(() => ({}));
+          if (!response.ok) throw new Error(payload.error || '送信に失敗しました');
+          window.location.reload();
+        } catch (error) {
+          if (button instanceof HTMLButtonElement) button.disabled = false;
+          alert(error instanceof Error ? error.message : '送信に失敗しました');
+        }
+      });
+    </script>
+  </body>
+</html>

package/registry/disclosure/files/src/pages/api/admin/disclosure-send.ts

@@ -0,0 +1,11 @@
+import { formatEmailFrom } from '@umec/core/config';
+import config from '../../../../umec.config';
+import { createDisclosureSendHandler } from '../../../lib/disclosure-send';
+
+export const prerender = false;
+
+export const POST = createDisclosureSendHandler({
+  brandName: config.brand.name,
+  emailFrom: formatEmailFrom(config.email),
+  emailReplyTo: config.email.replyTo,
+});

package/registry/disclosure/files/src/pages/api/disclosure-request.ts

@@ -0,0 +1,16 @@
+import type { APIRoute } from 'astro';
+import { formatEmailFrom } from '@umec/core/config';
+import config from '../../../umec.config';
+import { createDisclosureRequestHandler } from '../../lib/disclosure-request';
+
+export const prerender = false;
+
+export const POST: APIRoute = (context) =>
+  createDisclosureRequestHandler({
+    isProduction: import.meta.env.PROD,
+    brandName: config.brand.name,
+    brandUrl: String(config.brand.url),
+    emailFrom: formatEmailFrom(config.email),
+    emailReplyTo: config.email.replyTo,
+    notifyFallback: config.email.bcc,
+  })({ request: context.request, clientAddress: context.clientAddress });

package/registry/disclosure/files/src/pages/legal/disclosure.astro

@@ -0,0 +1,135 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import Footer from '../../components/Footer.astro';
+
+export const prerender = true;
+
+const turnstileSiteKey = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY;
+const hasTurnstile = typeof turnstileSiteKey === 'string' && turnstileSiteKey.length > 0;
+---
+
+<Layout title="特定商取引法に基づく表示事項の開示請求">
+  <main class="px-6 py-24 md:px-16">
+    <div class="mx-auto max-w-4xl">
+      <p class="mb-8 text-xs uppercase tracking-[0.28em] text-[var(--color-muted)]">legal</p>
+      <h1 class="mb-8 font-serif text-3xl leading-relaxed md:text-5xl">
+        表示事項の開示請求
+      </h1>
+
+      <div class="space-y-8 text-sm leading-relaxed text-[var(--color-muted)]">
+        <p>
+          送信いただいたメールアドレス宛に、販売事業者名・運営責任者名・所在地・電話番号・メールアドレスを<strong class="text-[var(--color-text)]">直ちに</strong>お送りします。
+        </p>
+        <p>
+          ご入力いただいたメールアドレスは、特定商取引法に基づく表示事項の提供、到達確認、および濫用防止の記録のみに利用し、マーケティング等の目的には利用しません。
+        </p>
+      </div>
+
+      <form id="disclosure-form" class="mt-12 flex max-w-xl flex-col gap-6">
+        <label class="flex flex-col gap-2 text-sm">
+          <span class="text-[var(--color-muted)]">メールアドレス</span>
+          <input
+            id="disclosure-email"
+            type="email"
+            name="email"
+            required
+            autocomplete="email"
+            class="min-h-12 border border-[var(--color-border)] bg-[var(--color-bg)] px-4 text-sm outline-none focus:border-[var(--color-text)]"
+            placeholder="email@example.com"
+          />
+        </label>
+
+        {hasTurnstile && (
+          <div
+            class="cf-turnstile"
+            data-sitekey={turnstileSiteKey}
+            data-theme="light"
+            data-language="ja"
+          ></div>
+        )}
+
+        <button
+          id="disclosure-submit"
+          type="submit"
+          class="border border-[var(--color-text)] px-8 py-3 text-sm tracking-widest transition-colors hover:bg-[var(--color-text)] hover:text-[var(--color-bg)] disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          開示を請求する
+        </button>
+      </form>
+
+      <p id="disclosure-success" class="mt-10 hidden max-w-xl text-sm leading-relaxed text-[var(--color-muted)]">
+        入力いただいたメールアドレス宛に開示事項を送信しました。メールが届かない場合は、迷惑メールフォルダをご確認のうえ、時間をおいて再度ご請求ください。
+      </p>
+      <p id="disclosure-error" class="mt-6 hidden max-w-xl text-sm leading-relaxed text-[var(--color-muted)]" role="alert">
+        送信できませんでした。入力内容をご確認のうえ、時間をおいて再度お試しください。
+      </p>
+
+      <p class="mt-16 text-xs text-[var(--color-muted)]">
+        <a href="/legal/tokushoho" class="underline underline-offset-4 transition-colors hover:text-[var(--color-text)]">
+          特定商取引法に基づく表記へ戻る
+        </a>
+      </p>
+    </div>
+  </main>
+  <Footer />
+
+  {hasTurnstile && (
+    <script is:inline src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+  )}
+
+  <script>
+    const form = document.getElementById('disclosure-form');
+    const submitButton = document.getElementById('disclosure-submit');
+    const success = document.getElementById('disclosure-success');
+    const errorMessage = document.getElementById('disclosure-error');
+
+    const readTurnstileToken = () => {
+      const input = form?.querySelector(
+        'input[name="cf-turnstile-response"], textarea[name="cf-turnstile-response"]',
+      );
+      if (input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement) {
+        return input.value;
+      }
+      return '';
+    };
+
+    const resetTurnstile = () => {
+      const turnstile = (
+        window as Window & { turnstile?: { reset: () => void } }
+      ).turnstile;
+      turnstile?.reset();
+    };
+
+    form?.addEventListener('submit', async (event) => {
+      event.preventDefault();
+      if (!(form instanceof HTMLFormElement) || !(submitButton instanceof HTMLButtonElement)) return;
+
+      errorMessage?.classList.add('hidden');
+      submitButton.disabled = true;
+
+      const formData = new FormData(form);
+      const email = String(formData.get('email') || '');
+      const turnstileToken = readTurnstileToken();
+
+      try {
+        const response = await fetch('/api/disclosure-request', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email, turnstileToken }),
+        });
+
+        if (!response.ok) {
+          throw new Error(`disclosure-request failed: ${response.status}`);
+        }
+
+        form.classList.add('hidden');
+        success?.classList.remove('hidden');
+      } catch (error) {
+        console.error('[disclosure] request error:', error);
+        errorMessage?.classList.remove('hidden');
+        resetTurnstile();
+        submitButton.disabled = false;
+      }
+    });
+  </script>
+</Layout>