Load CSRF and Turnstile when required (#94)

* Update dependencies and fix typos

* Loads the turnstile widget and CSRF when the contact modal is opened and not when the page first loads; fix purgecss command

* Also preload when hovering over the button

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch": "nodemon -w src -w assets -w index.html -e css,html,js --ignore dist/ -x npm run build",
-    "build": "npx purgecss --content \"index.php\" \"dist/**/*.js\" --css \"assets/bootstrap.min.css\" --output \"dist/css/bootstrap.css\" && npx esbuild src/main.ts --bundle --minify --outfile=dist/js/script.js --keep-names"
+    "build": "npx purgecss --content \"index.html\" \"dist/**/*.js\" --css \"assets/bootstrap.min.css\" --output \"dist/css/bootstrap.css\" && npx esbuild src/main.ts --bundle --minify --outfile=dist/js/script.js --keep-names"
   },
   "repository": {
     "type": "git",

src/main.ts

@@ -7,9 +7,6 @@ import { Modal } from "sp14420-modal";
 import { Utils } from "./utils/utils";
 
 document.addEventListener("DOMContentLoaded", () => {
-  //Sets the CSRF token in the contact form input field
-  Utils.setCsrfToken();
-
   // Initialize the contact form
   const contactForm = new ContactForm(
     "api.php?action=sendMessage",
@@ -18,7 +15,7 @@ document.addEventListener("DOMContentLoaded", () => {
   );
 });
 
-// Modal test
+// Contact Modal
 const modal = new Modal("#contact");
 
 //Learn more button
@@ -36,12 +33,42 @@ if (learnmoreBtn && firstSection) {
   });
 }
 
+// Contact Us button
+const contactBtn = document.querySelector<HTMLButtonElement>(
+  `[data-showModal="#contact"]`,
+);
+
+if (contactBtn) {
+  let isPreloading = false;
+  let isLoaded = false;
+
+  // Load the CSRF token and the Turnstile widget
+  const loadCsrfAndTurnstile = async () => {
+    if (isLoaded || isPreloading) return; // Prevent redundant calls
+    isPreloading = true;
+    try {
+      await Utils.setCsrfToken(); // Async function to set CSRF token
+      Utils.updateTurnstileWidget(); // Synchronous function to update Turnstile widget
+      isLoaded = true;
+    } catch (error) {
+      console.error("CSRF and Turnstile loading failed:", error);
+    } finally {
+      isPreloading = false;
+    }
+  };
+
+  contactBtn.addEventListener("mouseenter", loadCsrfAndTurnstile);
+  contactBtn.addEventListener("touchstart", loadCsrfAndTurnstile, {
+    passive: true,
+  });
+  contactBtn.addEventListener("click", loadCsrfAndTurnstile);
+}
+
 const panelManager = new PanelManager();
 
-// Set panel positions and update Turnstile widget when the page loads or the window is resized
+// Set panel positions when the page loads or the window is resized
 window.addEventListener("load", () => {
   panelManager.setPositions();
-  Utils.updateTurnstileWidget();
 });
 
 const debouncedResize = Utils.debounce(function () {

src/utils/utils.ts

@@ -54,7 +54,7 @@ export class Utils {
     });
   }
 
-  // Gets and a CSRF token from the server
+  // Gets a CSRF token from the server
   static async getCsrfToken(): Promise<string | null> {
     const apiEndpoint = "./api.php?action=getCSRFToken";