Form hooks

.gitignore

@@ -1 +1,11 @@
-target/
+target/
+demo/lib
+demo/logs
+demo/modules
+demo/hosts/demo/modules_data
+demo/cms.pid
+demo/*.jar
+demo/LICENSE
+demo/log4j2.xml
+demo/README.md
+demo/server.yaml

demo/hosts/demo/assets/form-1.css

@@ -0,0 +1,3 @@
+span#reloadCaptcha:hover {
+    cursor: pointer;
+}

demo/hosts/demo/assets/form-1.js

@@ -0,0 +1,105 @@
+// form.js
+const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+const generateString = (length) => {
+    let result = ''
+    const charactersLength = characters.length
+    for (let i = 0; i < length; i++) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength))
+    }
+
+    return result;
+}
+
+const validateCaptcha = async (event) => {
+    event.preventDefault();
+    let request = {
+        code: document.getElementById("inputCaptcha").value,
+        key: document.getElementById("captchaKey").value
+    }
+
+    const response = await fetch('/module/forms-module/captcha/validate', {
+        method: 'POST',
+        body: JSON.stringify(request)
+    })
+
+    const validationResponse = await response.json()
+
+    if (!validationResponse.valid) {
+        alert("captcha code is not valid")
+        event.preventDefault()
+        return false
+    } else {
+        console.log(event.target)
+        event.target.submit()
+        return true
+    }
+}
+
+const ajaxValidateCaptcha = async () => {
+    let request = {
+        code: document.getElementById("inputCaptcha").value,
+        key: document.getElementById("captchaKey").value
+    }
+
+    const response = await fetch('/module/forms-module/captcha/validate', {
+        method: 'POST',
+        body: JSON.stringify(request)
+    })
+
+    const validationResponse = await response.json()
+
+    if (!validationResponse.valid) {
+        return false
+    } else {
+        return true
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    if (document.getElementById("reloadCaptcha")) {
+        document.getElementById("reloadCaptcha").addEventListener("click", () => {
+            let href = new URL(document.getElementById("captchaImg").src)
+            let key = generateString(8)
+            href.searchParams.set('key', key)
+
+            document.getElementById("captchaKey").value = key
+            document.getElementById("captchaImg").src = href.toString()
+        })
+    }
+
+    if (document.getElementById("ajaxForm")) {
+            document.getElementById("ajaxForm").addEventListener("submit", (event) => {
+                event.preventDefault()
+                console.log("send form via ajax")
+                if (!ajaxValidateCaptcha()) {
+                    alert("invalid captcha provided");
+                    return false
+                }
+                var form = event.target;
+                var formData = new FormData(form);
+                fetch(form.action, {
+                    method: "post",
+                    body: formData
+                }).then(res => res.json()).then(console.log);
+
+                return false
+            })
+        document.getElementById("submit-btn-test").addEventListener("click", (event) => {
+            event.preventDefault()
+
+            if (ajaxValidateCaptcha()) {
+                alert("invalid captcha provided");
+                return false
+            }
+
+            var form = document.getElementById("ajaxForm")
+            var formData = new FormData(form);
+            fetch(form.action, {
+                method: "post",
+                body: formData
+            }).then(res => res.json()).then(console.log);
+            return false;
+        })
+    }
+
+})

demo/hosts/demo/config/forms.yaml

@@ -0,0 +1,19 @@
+mail:
+  smtp:
+    hostname: 127.0.0.1
+    port: 3025
+    username: test@example.test
+    password: password
+forms:
+  - name: contact
+    to: contact@example.com
+    subject: Ich suche Kontakt!
+    fields: [message]
+    redirects:
+      success: /forms/contact/success
+  - name: test-form
+    fields: [message]
+    redirects:
+      success: /forms/contact/success
+redirects:
+  error: /forms/error

demo/hosts/demo/content/.technical/404.md

@@ -0,0 +1,5 @@
+---
+title: Leider nichts gefunden
+template: error.html
+---
+Da haben wir leider nichts gefunden!

demo/hosts/demo/content/ajax.md

@@ -0,0 +1,8 @@
+---
+title: Startseite
+template: ajax.html
+search:
+    index: false
+---
+
+# Demo Project

demo/hosts/demo/content/contact.md

@@ -0,0 +1,8 @@
+---
+title: Startseite
+template: contact.html
+search:
+    index: false
+---
+
+# Demo Project

demo/hosts/demo/content/forms/contact/success.md

@@ -0,0 +1,8 @@
+---
+title: Form submitted
+template: form-submitted.html
+menu: 
+    visible: false
+---
+
+## Your request was successfully submitted

demo/hosts/demo/content/forms/error.md

@@ -0,0 +1,8 @@
+---
+title: Error sending form
+template: form-submitted.html
+menu: 
+    visible: false
+---
+
+## Error submitting your request!

demo/hosts/demo/content/index.md

@@ -0,0 +1,8 @@
+---
+title: Startseite
+template: page.html
+search:
+    index: false
+---
+
+# Demo Project

demo/hosts/demo/content/robots.txt

@@ -0,0 +1,3 @@
+User-agent: *
+Disallow: /about/impressum
+Allow: /

demo/hosts/demo/extensions/test.extension.js

@@ -0,0 +1,6 @@
+import { $hooks } from 'system/hooks.mjs';
+
+$hooks.registerAction("forms/test-form/submit", (context) => {
+	console.log("test-form submitted", context);
+	return null;
+})

demo/hosts/demo/site.yaml

@@ -0,0 +1,28 @@
+id: demo-site
+hostname: 
+  - localhost
+baseurl: "http://localhost:1010"
+language: en
+template:
+  engine: thymeleaf
+modules:
+  active:
+    - thymeleaf-module
+    - forms-module
+media:
+  formats:
+    - name: small
+      width: 256
+      height: 256
+      format: webp
+      compression: true
+    - name: big
+      width: 512
+      height: 512
+      format: webp
+      compression: true
+    - name: test2
+      width: 72
+      height: 72
+      format: webp
+      compression: true

demo/hosts/demo/templates/ajax.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
+
+<head>
+	<th:block th:replace="libs/fragments.html :: header">
+	</th:block>
+
+</head>
+
+<body class="centered">
+
+	<div id="content">
+		<div class="container" th:utext="${content}"></div>
+	</div>
+
+	<div class="container" th:with="captchaKey=${forms.captcha.generateKey()}">
+		<h3>Test Formular</h3>
+		<form class="row g-3" method="post" 
+			action="/module/forms-module/form/submit/ajax" 
+			enctype="multipart/form-data"
+			onsubmit="return false;"
+			id="ajaxForm"
+			>
+			<input type="hidden" name="form" value="test-form" >
+			<div class="col-md-12">
+				<label for="inputEmail4" class="form-label">Your mail</label>
+				<input type="email" name="from" class="form-control" id="inputEmail4" />
+			</div>
+			<div class="col-md-12">
+				<label for="inputMessage" class="form-label">Message</label>
+				<textarea type="text" class="form-control" name="message" id="inputMessage" ></textarea>
+			</div>
+			<div class="col-3">
+				<img id="captchaImg" th:src="@{~/module/forms-module/captcha/generate(width=200,height=50,key=${captchaKey})}" />
+				<input type="hidden" id="captchaKey" name="key" th:value="${captchaKey}" >
+				<span class="reload" id="reloadCaptcha">reload</span>
+			</div>
+			<div class="col-9">
+				<label for="inputCaptcha" class="form-label">Captcha</label>
+				<input type="text" class="form-control" id="inputCaptcha" name="code" placeholder="captcha code here" />
+			</div>
+			<div class="col-12">
+				<button type="submit" id="submit-btn" class="btn btn-primary">Send request</button>
+			</div>
+		</form>
+	</div>
+
+
+</body>
+
+
+</html>

demo/hosts/demo/templates/contact.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
+
+<head>
+	<th:block th:replace="libs/fragments.html :: header">
+	</th:block>
+
+</head>
+
+<body class="centered">
+
+	<div id="content">
+		<div class="container" th:utext="${content}"></div>
+	</div>
+
+	<div class="container" th:with="captchaKey=${forms.captcha.generateKey()}"></div>
+		<h3>Contact form</h3>
+		<form class="row g-3" method="post" 
+			action="/module/forms-module/form/submit" 
+			enctype="multipart/form-data"
+			onsubmit="return validateCaptcha(event)"
+			>
+			<input type="hidden" name="form" value="contact" >
+			<div class="col-md-12">
+				<label for="inputEmail4" class="form-label">Your mail</label>
+				<input type="email" name="from" class="form-control" id="inputEmail4" />
+			</div>
+			<div class="col-md-12">
+				<label for="inputMessage" class="form-label">Message</label>
+				<textarea type="text" class="form-control" name="message" id="inputMessage" ></textarea>
+			</div>
+			<div class="col-3">
+				<img id="captchaImg" th:src="@{~/module/forms-module/captcha/generate(width=200,height=50,key=${captchaKey})}" />
+				<input type="hidden" id="captchaKey" name="key" th:value="${captchaKey}" >
+				<span class="reload" id="reloadCaptcha">reload</span>
+			</div>
+			<div class="col-9">
+				<label for="inputCaptcha" class="form-label">Captcha</label>
+				<input type="text" class="form-control" id="inputCaptcha" name="code" placeholder="captcha code here" />
+			</div>
+			<div class="col-12">
+				<button type="submit" class="btn btn-primary" th:text="${theme.getMessages().getLabel('labels','contact.form.button.submit')}">Send request</button>
+			</div>
+		</form>
+	</div>
+
+</body>
+
+
+</html>

demo/hosts/demo/templates/form-submitted.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
+
+<head>
+	<th:block th:replace="libs/fragments.html :: header">
+	</th:block>
+
+</head>
+
+<body class="centered">
+
+	<div id="content">
+		<div class="container" th:utext="${content}"></div>
+	</div>
+
+</body>
+
+
+</html>

demo/hosts/demo/templates/libs/fragments.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
+
+<th:block th:fragment="header">
+	<title th:text="${meta.title}"></title>
+	<link rel="canonical" th:href="${site.get('baseurl')} + ${requestContext.uri}" />
+	<link rel="shortcut icon" href="/favicon.ico" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<script th:inline="javascript">
+		/*<![CDATA[*/
+		const CONTEXT_PATH = /*[[${site.contextPath}]]*/ '/';
+		/*]]>*/
+	</script>
+
+	<link rel="stylesheet" th:href="${links.createUrl('/assets/form-1.css')}" defer />
+	<script th:src="${links.createUrl('/assets/form-1.js')}" defer></script>
+
+</th:block>
+
+</html>