@websline/cms-view-utils 1.10.2 → 1.15.0

package/src/forms/formTexts.js

@@ -0,0 +1,173 @@
+/**
+ * The words a form brings along itself — buttons, captions, error messages —
+ * as opposed to the labels the editor wrote, which arrive with the form. Every
+ * language here works out of the box; a project replaces single texts through
+ * `overrides` without copying the rest.
+ */
+
+const TEXTS = {
+	de: {
+		adults: "Erwachsene",
+		arrival: "Anreise",
+		back: "Zurück",
+		childAge: "Alter Kind {number}",
+		children: "Kinder",
+		choose: "Bitte wählen",
+		departure: "Abreise",
+		errorInvalid: "Bitte prüfen Sie diese Angabe.",
+		errorPastDate: "Dieses Datum liegt in der Vergangenheit.",
+		errorRequired: "Bitte füllen Sie dieses Feld aus.",
+		errorTooLong: "Dieser Text ist zu lang.",
+		next: "Weiter",
+		privacy: "Datenschutzerklärung",
+		required: "Pflichtfeld",
+		sendFailed:
+			"Das Formular konnte nicht gesendet werden. Bitte versuchen Sie es erneut.",
+		sending: "Wird gesendet …",
+		step: "Schritt {current} von {total}",
+		submit: "Absenden",
+		thanks: "Vielen Dank! Ihre Nachricht ist bei uns eingegangen.",
+		tooManyRequests:
+			"Zu viele Anfragen. Bitte versuchen Sie es in einer Minute erneut.",
+		years: "{count} Jahre",
+	},
+	en: {
+		adults: "Adults",
+		arrival: "Arrival",
+		back: "Back",
+		childAge: "Age of child {number}",
+		children: "Children",
+		choose: "Please choose",
+		departure: "Departure",
+		errorInvalid: "Please check this entry.",
+		errorPastDate: "This date is in the past.",
+		errorRequired: "Please fill in this field.",
+		errorTooLong: "This text is too long.",
+		next: "Next",
+		privacy: "Privacy policy",
+		required: "Required",
+		sendFailed: "The form could not be sent. Please try again.",
+		sending: "Sending …",
+		step: "Step {current} of {total}",
+		submit: "Send",
+		thanks: "Thank you! We have received your message.",
+		tooManyRequests: "Too many requests. Please try again in a minute.",
+		years: "{count} years",
+	},
+	it: {
+		adults: "Adulti",
+		arrival: "Arrivo",
+		back: "Indietro",
+		childAge: "Età bambino {number}",
+		children: "Bambini",
+		choose: "Si prega di scegliere",
+		departure: "Partenza",
+		errorInvalid: "Si prega di verificare questo dato.",
+		errorPastDate: "Questa data è nel passato.",
+		errorRequired: "Si prega di compilare questo campo.",
+		errorTooLong: "Questo testo è troppo lungo.",
+		next: "Avanti",
+		privacy: "Informativa sulla privacy",
+		required: "Campo obbligatorio",
+		sendFailed: "Non è stato possibile inviare il modulo. Si prega di riprovare.",
+		sending: "Invio in corso …",
+		step: "Passo {current} di {total}",
+		submit: "Invia",
+		thanks: "Grazie! Abbiamo ricevuto il suo messaggio.",
+		tooManyRequests: "Troppe richieste. Si prega di riprovare tra un minuto.",
+		years: "{count} anni",
+	},
+	fr: {
+		adults: "Adultes",
+		arrival: "Arrivée",
+		back: "Retour",
+		childAge: "Âge de l'enfant {number}",
+		children: "Enfants",
+		choose: "Veuillez choisir",
+		departure: "Départ",
+		errorInvalid: "Veuillez vérifier cette donnée.",
+		errorPastDate: "Cette date est dans le passé.",
+		errorRequired: "Veuillez remplir ce champ.",
+		errorTooLong: "Ce texte est trop long.",
+		next: "Suivant",
+		privacy: "Politique de confidentialité",
+		required: "Champ obligatoire",
+		sendFailed: "Le formulaire n'a pas pu être envoyé. Veuillez réessayer.",
+		sending: "Envoi en cours …",
+		step: "Étape {current} sur {total}",
+		submit: "Envoyer",
+		thanks: "Merci ! Nous avons bien reçu votre message.",
+		tooManyRequests: "Trop de demandes. Veuillez réessayer dans une minute.",
+		years: "{count} ans",
+	},
+	es: {
+		adults: "Adultos",
+		arrival: "Llegada",
+		back: "Atrás",
+		childAge: "Edad del niño {number}",
+		children: "Niños",
+		choose: "Por favor, elija",
+		departure: "Salida",
+		errorInvalid: "Por favor, compruebe este dato.",
+		errorPastDate: "Esta fecha está en el pasado.",
+		errorRequired: "Por favor, rellene este campo.",
+		errorTooLong: "Este texto es demasiado largo.",
+		next: "Siguiente",
+		privacy: "Política de privacidad",
+		required: "Campo obligatorio",
+		sendFailed:
+			"No se ha podido enviar el formulario. Por favor, inténtelo de nuevo.",
+		sending: "Enviando …",
+		step: "Paso {current} de {total}",
+		submit: "Enviar",
+		thanks: "¡Gracias! Hemos recibido su mensaje.",
+		tooManyRequests:
+			"Demasiadas solicitudes. Por favor, inténtelo de nuevo en un minuto.",
+		years: "{count} años",
+	},
+	nl: {
+		adults: "Volwassenen",
+		arrival: "Aankomst",
+		back: "Terug",
+		childAge: "Leeftijd kind {number}",
+		children: "Kinderen",
+		choose: "Maak een keuze",
+		departure: "Vertrek",
+		errorInvalid: "Controleer dit gegeven.",
+		errorPastDate: "Deze datum ligt in het verleden.",
+		errorRequired: "Vul dit veld in.",
+		errorTooLong: "Deze tekst is te lang.",
+		next: "Volgende",
+		privacy: "Privacybeleid",
+		required: "Verplicht veld",
+		sendFailed: "Het formulier kon niet worden verzonden. Probeer het opnieuw.",
+		sending: "Wordt verzonden …",
+		step: "Stap {current} van {total}",
+		submit: "Verzenden",
+		thanks: "Dank u! Wij hebben uw bericht ontvangen.",
+		tooManyRequests: "Te veel aanvragen. Probeer het over een minuut opnieuw.",
+		years: "{count} jaar",
+	},
+};
+
+const FALLBACK_LOCALE = "en";
+
+/**
+ * The form's texts in one language. A text is looked up in the project's
+ * overrides for that language, then in the built-in one, then in English.
+ *
+ * @param {string} locale - Language of the form, e.g. `"de"`.
+ * @param {Record<string, Record<string, string>>} [overrides] - Texts the project words differently, per language, e.g. `{ de: { next: "Fortfahren" } }`. Keep the `{placeholders}` of the original.
+ * @returns {(key: string, params?: Record<string, string | number>) => string} Unknown keys come back as the key itself.
+ */
+const createFormTexts = (locale, overrides = {}) => {
+	const sources = [overrides[locale], TEXTS[locale], TEXTS[FALLBACK_LOCALE]];
+
+	return (key, params = {}) => {
+		const template = sources.find((texts) => texts?.[key] != null)?.[key] ?? key;
+
+		return template.replace(/\{(\w+)\}/g, (_, name) => String(params[name] ?? ""));
+	};
+};
+
+export { createFormTexts, TEXTS as FORM_TEXTS };

package/src/forms/formValues.js

@@ -0,0 +1,101 @@
+/**
+ * What a form's values look like in the browser and what of them is sent. The
+ * browser checks only type and `required` — the same patterns the CMS uses, so
+ * a value that passes here is not turned down for its format there. Whether a
+ * date has passed, an option exists or a text is too long stays with the CMS.
+ */
+
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const PHONE_PATTERN = /^\+?[0-9 ()/.-]{3,40}$/;
+const DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+
+const DEFAULT_ADULTS = 2;
+
+const isValidDate = (value) => {
+	if (typeof value !== "string" || !DATE_PATTERN.test(value)) return false;
+	const date = new Date(`${value}T00:00:00Z`);
+	return !Number.isNaN(date.getTime()) && date.toISOString().startsWith(value);
+};
+
+/** The fields of some layouts, top to bottom, without empty columns. */
+const fieldsOf = (layouts) =>
+	layouts.flatMap((layout) => layout.columns ?? []).filter(Boolean);
+
+const emptyValueOf = (field) => {
+	if (field.type === "checkbox") return field.options?.length ? [] : false;
+	if (field.type === "daterange") return { from: "", to: "" };
+	if (field.type === "persons") return { adults: DEFAULT_ADULTS, children: [] };
+	return "";
+};
+
+/** Every field's starting value: what the URL pre-filled, else an empty one of its type. */
+const initialValues = (form) =>
+	Object.fromEntries(
+		form.pages
+			.flatMap((page) => fieldsOf(page.layouts))
+			.map((field) => [field.name, field.value ?? emptyValueOf(field)]),
+	);
+
+const isEmpty = (field, value) => {
+	if (value == null || value === false || value === "") return true;
+	if (Array.isArray(value)) return value.length === 0;
+	if (field.type === "daterange") return !value.from && !value.to;
+	return typeof value === "string" && value.trim() === "";
+};
+
+const CHECKERS = {
+	email: (value) => EMAIL_PATTERN.test(value.trim()),
+	phone: (value) => PHONE_PATTERN.test(value.trim()),
+	date: isValidDate,
+	daterange: ({ from, to }) => isValidDate(from) && isValidDate(to) && to >= from,
+	persons: ({ adults, children }) =>
+		adults >= 1 && children.every((age) => Number.isInteger(age)),
+};
+
+/**
+ * The errors of some fields, as the CMS would name them.
+ *
+ * @param {object[]} fields
+ * @param {Record<string, unknown>} values - Keyed by field name.
+ * @returns {Record<string, "REQUIRED" | "INVALID">} Keyed by field name; empty when all is well.
+ */
+const validateValues = (fields, values) => {
+	const errors = {};
+
+	for (const field of fields) {
+		const value = values[field.name];
+
+		if (isEmpty(field, value)) {
+			if (field.required) errors[field.name] = "REQUIRED";
+			continue;
+		}
+
+		if (CHECKERS[field.type] && !CHECKERS[field.type](value)) {
+			errors[field.name] = "INVALID";
+		}
+	}
+
+	return errors;
+};
+
+/** The values to send: empty ones left out, as the CMS does not store them anyway. */
+const submissionValues = (fields, values) =>
+	Object.fromEntries(
+		fields
+			.filter((field) => !isEmpty(field, values[field.name]))
+			.map((field) => [field.name, values[field.name]]),
+	);
+
+/**
+ * A persons value with `count` children. Ages already chosen stay; a new child
+ * starts without one, so the guest has to pick it.
+ */
+const withChildCount = (value, count) => ({
+	...value,
+	children: Array.from(
+		{ length: count },
+		(_, index) => value.children[index] ?? null,
+	),
+});
+
+export { fieldsOf, initialValues, submissionValues, validateValues, withChildCount };

package/src/forms/spamChallenge.js

@@ -0,0 +1,61 @@
+import { solveChallenge } from "altcha-lib";
+import { deriveKey } from "altcha-lib/algorithms/web/pbkdf2";
+import { fetchFormChallenge } from "../client/fetchFormChallenge.js";
+
+/**
+ * The form's ALTCHA proof of work, solved in the background. WebCrypto derives
+ * the keys off the main thread and the solver yields regularly, so the page
+ * stays responsive without a worker a website would have to bundle.
+ */
+
+/** A challenge this close to its end is replaced before it is sent. */
+const EXPIRY_MARGIN_S = 30;
+const solve = async (uuid) => {
+	const challenge = await fetchFormChallenge({ uuid });
+	const solution = await solveChallenge({ challenge, deriveKey });
+
+	if (!solution) throw new Error("Challenge not solved");
+
+	return { challenge, solution };
+};
+
+/**
+ * @param {string} uuid - The form's UUID.
+ * @param {() => number} [now] - Milliseconds; for tests.
+ */
+const createSpamChallenge = (uuid, now = () => Date.now()) => {
+	let pending = null;
+
+	const isFresh = (payload) =>
+		payload.challenge.parameters.expiresAt - EXPIRY_MARGIN_S > now() / 1_000;
+
+	const restart = () => {
+		const attempt = solve(uuid);
+		pending = attempt;
+		// A failed attempt is retried at the next call instead of failing forever.
+		attempt.catch(() => {
+			if (pending === attempt) pending = null;
+		});
+		return attempt;
+	};
+
+	return {
+		/** Starts solving, once; later calls change nothing. */
+		start() {
+			if (!pending) restart();
+		},
+
+		/** A solved, unexpired payload, solving or replacing one as needed. */
+		async payload() {
+			const payload = await (pending ?? restart());
+			return isFresh(payload) ? payload : restart();
+		},
+
+		/** Throws the current one away, after the CMS refused it. */
+		renew() {
+			return restart();
+		},
+	};
+};
+
+export { createSpamChallenge };

package/src/index.js

@@ -1,4 +1,7 @@
 export { isValid } from "./editor/blockValidation.js";
+export { assertHydrationWired, resolveBlockProps } from "./blocks/registry.js";
+export { editorProps } from "./editor/editorProps.js";
+export { createEditorContent } from "./editor/editorContent.svelte.js";
 export { fetchSimilarRooms } from "./client/fetchSimilarRooms.js";
 export { fetchSimilarPackages } from "./client/fetchSimilarPackages.js";
 export { fetchFaqs } from "./client/fetchFaqs.js";
@@ -10,12 +13,21 @@ export { fetchRatings } from "./client/fetchRatings.js";
 export { fetchAds } from "./client/fetchAds.js";
 
 export { recordAdEvent } from "./client/recordAdEvent.js";
+export { submitForm } from "./client/submitForm.js";
+export { fetchFormChallenge } from "./client/fetchFormChallenge.js";
 
 export { createAdRunner } from "./ads/createAdRunner.js";
 export { slotOf } from "./ads/slots.js";
 export { toAdPath } from "./ads/adPath.js";
 
+export { createFormController } from "./forms/createFormController.js";
+export { createFormTexts } from "./forms/formTexts.js";
+export { FORM_CONTROLS } from "./forms/formControls.js";
+
 export { default as AddBlockPlaceholder } from "./components/AddBlockPlaceholder.svelte";
+export { default as BlockEditList } from "./components/BlockEditList.svelte";
+export { default as BlockEditSlot } from "./components/BlockEditSlot.svelte";
+export { default as BlockSlot } from "./components/BlockSlot.astro";
 export { default as BlockWrapper } from "./components/BlockWrapper.svelte";
 export { default as EditableBlock } from "./components/EditableBlock.svelte";
 export { default as PageContent } from "./components/PageContent.svelte";

package/src/routes/cmsProxy.js

@@ -2,14 +2,17 @@ import { createCmsProxyHandler } from "../cms/proxyToCms.js";
 
 export const prerender = false;
 
-/** The only write a browser has any business making through this proxy. */
-const AD_EVENT_PATH = /^api\/public\/ads\/[^/]+\/events$/;
+/** The only writes a browser has any business making through this proxy. */
+const WRITE_PATHS = [
+	/^api\/public\/ads\/[^/]+\/events$/,
+	/^api\/public\/forms\/[^/]+\/submissions$/,
+];
 
 export const GET = createCmsProxyHandler();
 
-// Ad events are reported from the browser, which can only reach the CMS through
-// this proxy. Narrowed to that one path on purpose: the forwarded token may hold
-// management scopes, and an open POST would hand them to every visitor.
+// Ad events and form entries come from the browser, which can only reach the CMS
+// through this proxy. Narrowed to those paths on purpose: the forwarded token may
+// hold management scopes, and an open POST would hand them to every visitor.
 export const POST = createCmsProxyHandler({
-	allow: (path) => AD_EVENT_PATH.test(path),
+	allow: (path) => WRITE_PATHS.some((pattern) => pattern.test(path)),
 });