@paroicms/contact-form-plugin 0.22.0 → 0.23.0

package/backend/dist/plugin.js

@@ -4,12 +4,13 @@ import { readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { sendContactFormMail } from "./contact-form-mail.js";
 import { formatSendMailInput } from "./data-format.js";
+const SLUG = "contact-form";
 const projectDir = resolveModuleDirectory(import.meta.url, { parent: true });
 const packageDir = dirname(projectDir);
 const version = strVal(JSON.parse(readFileSync(join(packageDir, "package.json"), "utf-8")).version);
 const plugin = {
     version,
-    slug: "contact-form",
+    slug: SLUG,
     async siteInit(service) {
         const simpleI18n = await loadSimpleTranslatorFromDirectory({
             l10nDir: join(projectDir, "locales"),
@@ -17,7 +18,13 @@ const plugin = {
             logger: service.logger,
         });
         service.setPublicAssetsDirectory(join(packageDir, "public-front", "dist"));
-        service.addHeadTag(`<link rel="stylesheet" href="${escapeHtml(`${service.pluginAssetsUrl}/public-front-plugin.css`)}">`, `<script type="module" src="${escapeHtml(`${service.pluginAssetsUrl}/public-front-plugin.mjs`)}"></script>`);
+        const scriptAttr = [
+            ["type", "module"],
+            ["src", `${service.pluginAssetsUrl}/public-front-plugin.mjs`],
+            ["class", `js-script-${SLUG}`],
+            ["data-google-recaptcha-key", service.configuration.googleRecaptchaKey],
+        ];
+        service.addHeadTag(`<link rel="stylesheet" href="${escapeHtml(`${service.pluginAssetsUrl}/public-front-plugin.css`)}">`, `<script ${scriptAttr.map(([key, val]) => `${key}="${escapeHtml(val)}"`).join(" ")}></script>`);
         service.setPublicApiHandler(async (service, httpContext, relativePath) => {
             const { req, res } = httpContext;
             if (relativePath !== "") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paroicms/contact-form-plugin",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "Contact form plugin for ParoiCMS",
   "keywords": [
     "paroicms",
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@paroicms/public-anywhere-lib": "0.20.0",
-    "@paroicms/public-server-lib": "0.29.0",
+    "@paroicms/public-server-lib": "0.30.0",
     "@solid-primitives/i18n": "~2.2.0",
     "@types/node": "~22.13.10",
     "rimraf": "~6.0.1",

package/public-front/dist/public-front-plugin.mjs

@@ -1 +1 @@
-import{template as $,insert as c,setAttribute as f,createComponent as _,effect as P,render as ee}from"https://esm.sh/solid-js@1.9.5/web";import{createMemo as te,createSignal as d,Show as N,onMount as se,onCleanup as ne}from"https://esm.sh/solid-js@1.9.5";function ae(e){return e.varName?` for '${e.varName}'`:""}function re(e,t={}){if(e==null||e===""&&!t.allowEmpty)throw new Error(`Missing string value${ae(t)}`);return typeof e=="string"?e:e.toString()}const U=e=>e!=null&&(e=Object.getPrototypeOf(e),e===Array.prototype||e===Object.prototype);function q(e,t,a){for(const[n,r]of Object.entries(t)){const m=`${a}.${n}`;e[m]=r,U(r)&&q(e,r,m)}}function oe(e){const t={...e};for(const[a,n]of Object.entries(e))U(n)&&q(t,n,a);return t}const ce=(e,t)=>{if(t)for(const[a,n]of Object.entries(t))e=e.replace(new RegExp(`{{\\s*${a}\\s*}}`,"g"),n);return e},le=e=>e;function ie(e,t=le){return(a,...n)=>{a[0]==="."&&(a=a.slice(1));const r=e()?.[a];switch(typeof r){case"function":return r(...n);case"string":return t(r,n[0]);default:return r}}}const de="Name",ue="Email",me="Subject",pe="Message",ge="Send",fe="johndoe@gmail.com",he="John Doe",be="The subject of your message",ve="Enter your message here…",Pe="Unexpected error, the message could not be sent.",$e="Return Home",we="Your message has been sent. If there is a response, it will be sent to the address:",ye={name:de,email:ue,subject:me,message:pe,send:ge,emailPlaceholder:fe,namePlaceholder:he,subjectPlaceholder:be,messagePlaceholder:ve,unexpectedErrorMessage:Pe,returnHome:$e,successMessage:we},Ee="Nom",Fe="Courriel",Se="Sujet",xe="Message",_e="Envoyer",Re="johndoe@gmail.com",Me="John Doe",je="Le sujet de votre message",Ce="Saisissez votre message…",Le="Erreur inattendue, le message n'a pas pu être envoyé.",Oe="Retourner à l'accueil",He="Votre message a été envoyé. S'il y a une réponse, elle sera envoyée à l'adresse :",Te={name:Ee,email:Fe,subject:Se,message:xe,send:_e,emailPlaceholder:Re,namePlaceholder:Me,subjectPlaceholder:je,messagePlaceholder:Ce,unexpectedErrorMessage:Le,returnHome:Oe,successMessage:He},A={en:ye,fr:Te};function ke(e){const t=te((()=>{const n=e in A?e:"en";return oe(A[n])}));return{t:ie(t,ce)}}async function De(e,t,a){a(!0);try{const n=await Ie(e);return t.reset(),n}finally{a(!1)}}async function Ie(e){const t=await fetch("/api/plugin/contact-form",{headers:{"Content-Type":"application/json"},body:JSON.stringify(e),method:"POST"});if(t.status!==200){const n=await t.text();throw new Error(`Unexpected error: ${n}`)}return await t.json()}var Ne=$("<div class=PaForm-error>"),Ae=$('<div class=PaForm-ended><div class=PaForm-message><p> <i></i></p></div><div class=PaForm-action><a class="PaForm-button PaButton">'),Ue=$('<form class=PaForm><div class=PaForm-fields><label class=PaField><span class=PaField-label></span><input class=PaField-input type=text name=name required></label><label class=PaField><span class=PaField-label></span><input class=PaField-input type=email name=email required></label><label class=PaField><span class=PaField-label></span><textarea class=PaField-input rows=5 name=message required></textarea></label></div><div class=PaForm-action><button class="PaForm-button PaButton"type=submit>'),qe=$("<div class=PaForm-captcha><div class=g-recaptcha data-callback=onRecaptchaSubmitted data-expired-callback=onRecaptchaExpired>");function Je({recaptchaKey:e,language:t,homeUrl:a}){const[n,r]=d(""),[m,J]=d(""),[R,B]=d(""),[V,z]=d(),[M,j]=d(!e),[C,w]=d(),[G,L]=d(""),[Y,Q]=d(!1),{t:o}=ke(t),W=async l=>{try{if(l.preventDefault(),!M()||!h)throw new Error("Recaptcha error");const i=await De({language:t,name:n(),message:R(),email:m(),gRecaptchaResponse:V()},h,Q);i.success?w(!0):(w(!1),L(i.message??o("unexpectedErrorMessage")))}catch{w(!1),L(o("unexpectedErrorMessage"))}},h=(()=>{var l=Ue(),i=l.firstChild,O=i.firstChild,H=O.firstChild,y=H.nextSibling,T=O.nextSibling,k=T.firstChild,E=k.nextSibling,K=T.nextSibling,D=K.firstChild,F=D.nextSibling,S=i.nextSibling,x=S.firstChild;return l.addEventListener("submit",W),c(H,(()=>o("name"))),y.addEventListener("change",(s=>r(s.currentTarget.value))),c(k,(()=>o("email"))),E.addEventListener("change",(s=>{J(s.currentTarget.value)})),c(D,(()=>o("message"))),F.addEventListener("change",(s=>B(s.currentTarget.value))),c(l,e&&(()=>{var s=qe(),u=s.firstChild;return f(u,"data-sitekey",e),s})(),S),c(l,_(N,{get when(){return C()===!1},get children(){var s=Ne();return c(s,G),s}}),S),c(x,(()=>o("send"))),c(l,_(N,{get when(){return C()===!0},get children(){var s=Ae(),u=s.firstChild,p=u.firstChild,g=p.firstChild,b=g.nextSibling,v=u.nextSibling,I=v.firstChild;return c(p,(()=>o("successMessage")),g),c(b,m),f(I,"href",a),c(I,(()=>o("returnHome"))),s}}),null),P((s=>{var u=o("namePlaceholder"),p=o("emailPlaceholder"),g=o("messagePlaceholder"),b=!!Y(),v=!M();return u!==s.e&&f(y,"placeholder",s.e=u),p!==s.t&&f(E,"placeholder",s.t=p),g!==s.a&&f(F,"placeholder",s.a=g),b!==s.o&&x.classList.toggle("inProgress",s.o=b),v!==s.i&&(x.disabled=s.i=v),s}),{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0}),P((()=>y.value=n())),P((()=>E.value=m())),P((()=>F.value=R())),l})();return se((()=>{e&&(window.onRecaptchaSubmitted=X,window.onRecaptchaExpired=Z)})),ne((()=>{e&&(window.onRecaptchaSubmitted=void 0,window.onRecaptchaExpired=void 0)})),h;function X(l){if(!l)return;j(!0);const i=h?.elements.namedItem("g-recaptcha-response");z(i.value)}function Z(){j(!1)}}function Be(e,{language:t}){if(!t)throw new Error("Missing language");const a=e.dataset.recaptchaKey,n=re(e.dataset.homeUrl),r=document.createElement("script");r.setAttribute("src","https://www.google.com/recaptcha/api.js"),document.head.appendChild(r),ee((()=>_(Je,{recaptchaKey:a,language:t,homeUrl:n})),e)}document.addEventListener("DOMContentLoaded",(()=>{const e=document.documentElement.lang,t=document.querySelector("[data-effect='paContactForm']");t&&Be(t,{language:e})}));
+import{template as $,insert as o,setAttribute as g,createComponent as M,effect as P,render as ne}from"https://esm.sh/solid-js@1.9.5/web";import{createMemo as ae,createSignal as d,Show as A,onMount as re,onCleanup as oe}from"https://esm.sh/solid-js@1.9.5";function ce(e){return e.varName?` for '${e.varName}'`:""}function q(e,t={}){if(e==null||e===""&&!t.allowEmpty)throw new Error(`Missing string value${ce(t)}`);return typeof e=="string"?e:e.toString()}const B=e=>e!=null&&(e=Object.getPrototypeOf(e),e===Array.prototype||e===Object.prototype);function J(e,t,a){for(const[n,c]of Object.entries(t)){const m=`${a}.${n}`;e[m]=c,B(c)&&J(e,c,m)}}function le(e){const t={...e};for(const[a,n]of Object.entries(e))B(n)&&J(t,n,a);return t}const ie=(e,t)=>{if(t)for(const[a,n]of Object.entries(t))e=e.replace(new RegExp(`{{\\s*${a}\\s*}}`,"g"),n);return e},de=e=>e;function ue(e,t=de){return(a,...n)=>{a[0]==="."&&(a=a.slice(1));const c=e()?.[a];switch(typeof c){case"function":return c(...n);case"string":return t(c,n[0]);default:return c}}}const me="Name",pe="Email",fe="Subject",ge="Message",he="Send",be="johndoe@gmail.com",ve="John Doe",Pe="The subject of your message",$e="Enter your message here…",ye="Unexpected error, the message could not be sent.",Ee="Return Home",we="Your message has been sent. If there is a response, it will be sent to the address:",Se={name:me,email:pe,subject:fe,message:ge,send:he,emailPlaceholder:be,namePlaceholder:ve,subjectPlaceholder:Pe,messagePlaceholder:$e,unexpectedErrorMessage:ye,returnHome:Ee,successMessage:we},Fe="Nom",xe="Courriel",_e="Sujet",Me="Message",je="Envoyer",Ce="johndoe@gmail.com",Re="John Doe",Le="Le sujet de votre message",ke="Saisissez votre message…",He="Erreur inattendue, le message n'a pas pu être envoyé.",Oe="Retourner à l'accueil",Te="Votre message a été envoyé. S'il y a une réponse, elle sera envoyée à l'adresse :",Ne={name:Fe,email:xe,subject:_e,message:Me,send:je,emailPlaceholder:Ce,namePlaceholder:Re,subjectPlaceholder:Le,messagePlaceholder:ke,unexpectedErrorMessage:He,returnHome:Oe,successMessage:Te},U={en:Se,fr:Ne};function De(e){const t=ae((()=>{const n=e in U?e:"en";return le(U[n])}));return{t:ue(t,ie)}}async function Ie(e,t,a){a(!0);try{const n=await Ae(e);return t.reset(),n}finally{a(!1)}}async function Ae(e){const t=await fetch("/api/plugin/contact-form",{headers:{"Content-Type":"application/json"},body:JSON.stringify(e),method:"POST"});if(t.status!==200){const n=await t.text();throw new Error(`Unexpected error: ${n}`)}return await t.json()}var Ue=$("<div class=PaForm-error>"),qe=$('<div class=PaForm-ended><div class=PaForm-message><p> <i></i></p></div><div class=PaForm-action><a class="PaForm-button PaButton">'),Be=$('<form class=PaForm><div class=PaForm-fields><label class=PaField><span class=PaField-label></span><input class=PaField-input type=text name=name required></label><label class=PaField><span class=PaField-label></span><input class=PaField-input type=email name=email required></label><label class=PaField><span class=PaField-label></span><textarea class=PaField-input rows=5 name=message required></textarea></label></div><div class=PaForm-action><button class="PaForm-button PaButton"type=submit>'),Je=$("<div class=PaForm-captcha><div class=g-recaptcha data-callback=onRecaptchaSubmitted data-expired-callback=onRecaptchaExpired>");function Ve({googleRecaptchaKey:e,language:t,homeUrl:a}){const[n,c]=d(""),[m,z]=d(""),[j,G]=d(""),[Y,Q]=d(),[C,R]=d(!e),[L,y]=d(),[W,k]=d(""),[X,Z]=d(!1),{t:r}=De(t),K=async l=>{try{if(l.preventDefault(),!C()||!h)throw new Error("Recaptcha error");const i=await Ie({language:t,name:n(),message:j(),email:m(),gRecaptchaResponse:Y()},h,Z);i.success?y(!0):(y(!1),k(i.message??r("unexpectedErrorMessage")))}catch{y(!1),k(r("unexpectedErrorMessage"))}},h=(()=>{var l=Be(),i=l.firstChild,H=i.firstChild,O=H.firstChild,E=O.nextSibling,T=H.nextSibling,N=T.firstChild,w=N.nextSibling,se=T.nextSibling,D=se.firstChild,S=D.nextSibling,F=i.nextSibling,x=F.firstChild;return l.addEventListener("submit",K),o(O,(()=>r("name"))),E.addEventListener("change",(s=>c(s.currentTarget.value))),o(N,(()=>r("email"))),w.addEventListener("change",(s=>{z(s.currentTarget.value)})),o(D,(()=>r("message"))),S.addEventListener("change",(s=>G(s.currentTarget.value))),o(l,e&&(()=>{var s=Je(),u=s.firstChild;return g(u,"data-sitekey",e),s})(),F),o(l,M(A,{get when(){return L()===!1},get children(){var s=Ue();return o(s,W),s}}),F),o(x,(()=>r("send"))),o(l,M(A,{get when(){return L()===!0},get children(){var s=qe(),u=s.firstChild,p=u.firstChild,f=p.firstChild,b=f.nextSibling,v=u.nextSibling,I=v.firstChild;return o(p,(()=>r("successMessage")),f),o(b,m),g(I,"href",a),o(I,(()=>r("returnHome"))),s}}),null),P((s=>{var u=r("namePlaceholder"),p=r("emailPlaceholder"),f=r("messagePlaceholder"),b=!!X(),v=!C();return u!==s.e&&g(E,"placeholder",s.e=u),p!==s.t&&g(w,"placeholder",s.t=p),f!==s.a&&g(S,"placeholder",s.a=f),b!==s.o&&x.classList.toggle("inProgress",s.o=b),v!==s.i&&(x.disabled=s.i=v),s}),{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0}),P((()=>E.value=n())),P((()=>w.value=m())),P((()=>S.value=j())),l})();return re((()=>{e&&(window.onRecaptchaSubmitted=ee,window.onRecaptchaExpired=te)})),oe((()=>{e&&(window.onRecaptchaSubmitted=void 0,window.onRecaptchaExpired=void 0)})),h;function ee(l){if(!l)return;R(!0);const i=h?.elements.namedItem("g-recaptcha-response");Q(i.value)}function te(){R(!1)}}let V;const[_]=document.getElementsByClassName("js-script-contact-form");_&&_ instanceof HTMLScriptElement&&(V=q(_.dataset.googleRecaptchaKey,{varName:"data-google-recaptcha-key"}));function ze(e,{language:t}){if(!t)throw new Error("Missing language");e.dataset.recaptchaKey&&console.warn('Remove "data-recaptcha-key" attribute, it is not needed anymore.');const a=q(e.dataset.homeUrl),n=document.createElement("script");n.setAttribute("src","https://www.google.com/recaptcha/api.js"),document.head.appendChild(n),ne((()=>M(Ve,{googleRecaptchaKey:V,language:t,homeUrl:a})),e)}document.addEventListener("DOMContentLoaded",(()=>{const e=document.documentElement.lang,t=document.querySelector("[data-effect='paContactForm']");t&&ze(t,{language:e})}));