Various changes

Refactor the email handler and bring it into the src directory so it can be compiled;

Removed not needed files

-Change the npm run build command to run purgecss via a config file, otherwise too much is removed for some reason.

assets/js/email-handler.php

@@ -1,15 +1,14 @@
 <?php
 if (isset($_POST["email"]) && isset($_POST["message"])) {
-    //Send email to [email protected]
     $name = $_POST["name"];
     $email = $_POST["email"];
-    $headers = "From: [email protected]\r\nReply-To: $email";
+    $headers = "From: admin@nm.capanda.ca\r\nReply-To: $email";
     $message = "From: {$name} ({$email})\n\nMessage:\n" . wordwrap($_POST["message"], 70);
 
-    mail("info@capanda.ca", "Message from {$name} via capanda.ca", $message, $headers);
+    mail("admin@capanda.ca", "Message from {$name} via capanda.ca", $message, $headers);
 
     //Send confirmation email to sender
-    $headers = "From: info@capanda.ca";
+    $headers = "From: admin@nm.capanda.ca";
     $message = "Dear {$name} ({$email}),\n\nYour message (shown below) has been recieved. We will get back to you as soon as possible.\n\nSincerely,\nCAPANDA\n\nPlease note: This message was sent referencing your email address - If this was not you, please be aware of the use of your email address.\n\nYour message:\n" . wordwrap($_POST["message"], 70);
 
     mail($email, "Your message to CAPANDA has been recieved", $message, $headers);

index.html

@@ -14,7 +14,6 @@
         rel="stylesheet">
     <script src="assets/bootstrap.bundle.min.js"></script>
     <script type="module" src="script.js"></script>
-    <script defer src="assets/js/email-handler.js"></script>
 
 </head>
 

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 assets/slimmed-bootstrap.css --ignore script.js -x npm run build",
-    "build": "npx purgecss --css assets/bootstrap.min.css --content index.html 'src/**/*.js' 'assets/**/*.js' --output assets/slimmed-bootstrap.css && npx esbuild src/main.js --bundle --minify --outfile=script.js"
+    "build": "npx purgecss --config purgecss.config.js && npx esbuild src/main.js --bundle --minify --outfile=script.js"
   },
   "repository": {
     "type": "git",

purgecss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  content: ["index.html", "src/**/*.js", "assets/**/*.js"],
+  css: ["assets/bootstrap.min.css"],
+  output: "assets/slimmed-bootstrap.css",
+};

src/classes/ContactForm.js

@@ -0,0 +1,72 @@
+export class ContactForm {
+  constructor(serverScript) {
+    this.serverScript = serverScript;
+    this.successModal = new bootstrap.Modal(document.querySelector("#success"));
+    this.messageAlert = document.querySelector("#message-alert");
+    this.initializeEventListeners();
+  }
+
+  initializeEventListeners() {
+    document
+      .querySelector("#sendmessage")
+      .addEventListener("click", () => this.handleSubmit());
+  }
+
+  isEmail(email) {
+    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailPattern.test(email);
+  }
+
+  messageSuccess() {
+    ["#name", "#email", "#message"].forEach((element) => {
+      document.querySelector(element).value = "";
+    });
+    document.querySelector("#contactCancel").click();
+    this.successModal.show();
+  }
+
+  async sendMessage(data) {
+    const formData = new FormData();
+    Object.entries(data).forEach(([key, value]) => formData.append(key, value));
+
+    try {
+      const response = await fetch(this.serverScript, {
+        method: "POST",
+        body: formData,
+      });
+      if (response.ok) {
+        this.messageSuccess();
+      }
+    } catch (error) {
+      console.error("Error sending message", error);
+    }
+  }
+
+  handleSubmit() {
+    const email = document.querySelector("#email").value;
+    const message = document.querySelector("#message").value;
+
+    if (!email || !this.isEmail(email)) {
+      this.displayAlert("Please enter a valid email address");
+      return;
+    }
+
+    if (!message) {
+      this.displayAlert("Please enter a message");
+      return;
+    }
+
+    const data = {
+      name: document.querySelector("#name").value,
+      email,
+      message,
+    };
+
+    this.sendMessage(data);
+  }
+
+  displayAlert(message) {
+    this.messageAlert.innerHTML = message;
+    this.messageAlert.style.display = "block";
+  }
+}

src/main.js

@@ -1,8 +1,13 @@
 import { CONFIG } from "./constants/config.js";
+import { ContactForm } from "./classes/ContactForm.js";
 import { derivedValues } from "./constants/derivedValues.js";
 import { PanelManager } from "./classes/PanelManager.js";
 import { UIManager } from "./classes/UIManager.js";
 
+document.addEventListener("DOMContentLoaded", () => {
+  new ContactForm("assets/js/email-handler.php");
+});
+
 const panelManager = new PanelManager();
 
 //Set panel positions when the page loads or the window is resized