@webround/core 0.1.8 → 0.3.0

package/dist/form.js

@@ -0,0 +1,175 @@
+import { wrLocalized } from './localized.js';
+// The rules of a Webround form, with no React and no network: what a field accepts, what is said when it does not, and what is sent.
+// The real form (core) and the simulated one (editor) read the same rules, so a test form in the editor refuses exactly what the published site refuses.
+export const WR_INPUT_TYPES = ['text', 'email', 'tel', 'number', 'textarea', 'file'];
+/** What the Webround backend (Core, `POST /form/:draftId`) accepts: the same list it checks. */
+export const WR_FORM_FILE_TYPES = [
+    'image/jpeg', 'image/png', 'image/webp', 'image/gif', 'image/svg+xml',
+    'audio/mpeg', 'audio/wav', 'audio/ogg', 'audio/mp3',
+    'application/pdf',
+];
+/** The server takes 40 MB per file; the form stops at 30, so a file that is refused is refused before it travels. */
+export const WR_FORM_FILE_MAX_BYTES = 30 * 1024 * 1024;
+export const WR_FORM_FILES_MAX = 10;
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const isEmpty = (value) => value === undefined || (typeof value === 'string' ? value.trim() === '' : value.length === 0);
+/** Whether `value` is a multiple of `step` (counted from zero), with the rounding a decimal step needs. */
+const onStep = (value, step) => {
+    const ratio = value / step;
+    return Math.abs(ratio - Math.round(ratio)) < 1e-9;
+};
+/** The first reason a value is not acceptable, or null. An empty value is fine unless the field is required. */
+export function wrValidateField(rule, value) {
+    if (isEmpty(value))
+        return rule.required ? 'required' : null;
+    if (rule.type === 'file') {
+        const files = Array.isArray(value) ? value : [];
+        if (files.length > WR_FORM_FILES_MAX)
+            return 'file-count';
+        if (files.some(file => !WR_FORM_FILE_TYPES.includes(file.type)))
+            return 'file-type';
+        if (files.some(file => file.size > WR_FORM_FILE_MAX_BYTES))
+            return 'file-size';
+        return null;
+    }
+    const text = typeof value === 'string' ? value.trim() : '';
+    if (rule.maxLength !== undefined && text.length > rule.maxLength)
+        return 'maxLength';
+    if (rule.type === 'email')
+        return EMAIL.test(text) ? null : 'email';
+    if (rule.type === 'number') {
+        const number = Number(text);
+        if (!Number.isFinite(number))
+            return 'number';
+        if (rule.min !== undefined && number < rule.min)
+            return 'min';
+        if (rule.max !== undefined && number > rule.max)
+            return 'max';
+        if (rule.step !== undefined && rule.step > 0 && !onStep(number - (rule.min ?? 0), rule.step))
+            return 'step';
+    }
+    return null;
+}
+const MESSAGES = {
+    en: {
+        required: 'This field is required.',
+        email: 'Enter a valid email address.',
+        number: 'Enter a number.',
+        min: 'The value is too low.',
+        max: 'The value is too high.',
+        step: 'The value is not allowed.',
+        maxLength: 'The text is too long.',
+        'file-count': 'Too many files (10 at most).',
+        'file-size': 'A file is too large (30 MB at most).',
+        'file-type': 'This type of file is not accepted.',
+        'submit-failed': 'The message could not be sent. Try again later.',
+        'rate-limited': 'Too many messages sent. Try again later.',
+        expired: 'This form is not accepting messages right now.',
+        'not-configured': 'This form is not connected to a site yet.',
+    },
+    it: {
+        required: 'Questo campo è obbligatorio.',
+        email: 'Inserisci un indirizzo email valido.',
+        number: 'Inserisci un numero.',
+        min: 'Il valore è troppo basso.',
+        max: 'Il valore è troppo alto.',
+        step: 'Il valore non è consentito.',
+        maxLength: 'Il testo è troppo lungo.',
+        'file-count': 'Troppi file (massimo 10).',
+        'file-size': 'Un file è troppo grande (massimo 30 MB).',
+        'file-type': 'Questo tipo di file non è accettato.',
+        'submit-failed': 'Non è stato possibile inviare il messaggio. Riprova più tardi.',
+        'rate-limited': 'Troppi messaggi inviati. Riprova più tardi.',
+        expired: 'Questo form al momento non accetta messaggi.',
+        'not-configured': 'Questo form non è ancora collegato a un sito.',
+    },
+};
+/** Every message a form can say, in the order the panel lists them. */
+export const WR_FORM_MESSAGE_CODES = Object.keys(MESSAGES.en);
+/** The page JSON of a form holds each message as `msg-<code>` (a translated text like any other field): the messages as `wrFormMessage` reads them. */
+export function wrFormMessagesOf(config) {
+    const own = {};
+    for (const code of WR_FORM_MESSAGE_CODES) {
+        const value = config?.[`msg-${code}`];
+        if (typeof value === 'string' || (typeof value === 'object' && value !== null))
+            own[code] = value;
+    }
+    return own;
+}
+/**
+ * The text for a message in the language of the page. Order: what the form says in that language; what Webround says in it (`it-IT` reads as `it`);
+ * what the form says as its `default`; English. So a form that writes only the Spanish text gets Spanish, and the languages it did not write
+ * keep reading what they read before.
+ */
+export function wrFormMessage(code, lang, own) {
+    const custom = own?.[code];
+    const inLang = typeof custom === 'object' && custom !== null ? custom[lang] : undefined;
+    if (inLang)
+        return inLang;
+    const builtIn = MESSAGES[lang.split('-')[0].toLowerCase()]?.[code];
+    if (builtIn)
+        return builtIn;
+    return (custom !== undefined ? wrLocalized(custom, 'default') : undefined) || MESSAGES.en[code];
+}
+/**
+ * The body of `POST /form/:draftId`: a multipart with `formData` (the JSON `{ key: { label, value }, …, proof }`) and the `files`.
+ * A file field reads, in the JSON, as the names of the files; the files themselves travel as `files`.
+ */
+export function wrBuildFormBody(entries, proof) {
+    const data = {};
+    const body = new FormData();
+    for (const { key, label, value } of entries) {
+        if (typeof value === 'string') {
+            data[key] = { label, value };
+            continue;
+        }
+        data[key] = { label, value: value.map(file => file.name).join(', ') };
+        for (const file of value)
+            body.append('files', file, file.name);
+    }
+    data.proof = proof;
+    body.append('formData', JSON.stringify(data));
+    return body;
+}
+/** What the backend's answer means to the visitor. */
+export function wrFormFailure(status) {
+    if (status === 429)
+        return 'rate-limited';
+    if (status === 403 || status === 404)
+        return 'expired';
+    return 'submit-failed';
+}
+/** The fields that cannot be sent as they are, by key. */
+export function wrFormProblems(fields, values) {
+    const problems = {};
+    for (const [key, rule] of Object.entries(fields)) {
+        const problem = wrValidateField(rule, values[key]);
+        if (problem)
+            problems[key] = problem;
+    }
+    return problems;
+}
+/** Whether the form may be sent now: no field problem, the proof, the consent. THE rule of the submit button. */
+export function wrFormReady(problems, gates) {
+    return Object.keys(problems).length === 0 && gates.proof && gates.privacy !== false;
+}
+export const wrChallengeUrl = (target) => target.coreApiUrl ? `${target.coreApiUrl}/altcha` : undefined;
+/** `POST /form/:draftId`. Anything that goes wrong is a message for the visitor, never an exception. */
+export async function wrSubmitForm(target, entries, proof, fetchImpl = fetch) {
+    if (!target.coreApiUrl || !target.draftId)
+        return 'not-configured';
+    try {
+        const res = await fetchImpl(`${target.coreApiUrl}/form/${encodeURIComponent(target.draftId)}`, { method: 'POST', body: wrBuildFormBody(entries, proof) });
+        return res.ok ? null : wrFormFailure(res.status);
+    }
+    catch {
+        return 'submit-failed';
+    }
+}
+/** The transport of a published site. */
+export const wrRealTransport = (target) => ({
+    mock: false,
+    challengeUrl: wrChallengeUrl(target),
+    send: (entries, proof) => wrSubmitForm(target, entries, proof),
+});
+//# sourceMappingURL=form.js.map