feat: captcha field for form editor

2024-07-17 15:57:01 +02:00
parent 096571b605
commit 4991d972c2
8 changed files with 103 additions and 3 deletions
@@ -133,3 +133,11 @@ renderables:
        validators:
          -
            identifier: NotEmpty
+      -
+        type: Captcha
+        identifier: captcha
+        label: Captcha
+        properties:
+          fluidAdditionalAttributes:
+            required: required
+            autocomplete: 'off'
@@ -0,0 +1,29 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+	  xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers"
+	  data-namespace-typo3-fluid="true">
+
+<formvh:renderRenderable renderable="{element}">
+	<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
+		<div class="flex items-center space-x-2">
+            <f:form.textfield property="{element.identifier}"
+                              id="{element.uniqueIdentifier}"
+                              value=""
+                              class="form-field"
+                              errorClass="form-field--has-error"
+                              placeholder="Bitte die Zeichen aus der Grafik eingeben"
+                              additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"/>
+			<img src="{f:uri.page(pageType:3413)}" alt="Captcha image" loading="lazy" onload="this.parentElement.classList.remove('captcha--reloading'); return false;"/>
+			<f:if condition="{element.properties.showRefresh}">
+				<button type="button" class="captcha__reload" data-url="{f:uri.page(pageType:3413)}" onclick="const div = this.parentElement; div.classList.add('captcha--reloading', 'captcha--spin'); let captchaUrl = this.dataset.url; this.previousElementSibling.setAttribute('src', captchaUrl + (/\?/.test(captchaUrl) ? '&' : '?') + 'now=' + Date.now()); setTimeout(function(){div.classList.remove('captcha--spin')},400); return false;">
+					<svg width="31" height="28" xmlns="http://www.w3.org/2000/svg">
+						<g fill="#000" fill-rule="evenodd">
+							<path d="M10 10.7 6.3 8.5a11 11 0 0 1 20 3l2.5-.8h.4v-.3A14 14 0 0 0 3.6 7L.3 5l1.8 8.3 8-2.6ZM31 23l-1.7-8-8 2.5 3.7 2.1a10.9 10.9 0 0 1-19.8-2.3l-2 .6-1 .3a13.9 13.9 0 0 0 17 9.3 14 14 0 0 0 8.4-6.4l3.4 2Z"/>
+						</g>
+					</svg>
+				</button>
+			</f:if>
+		</div>
+	</f:render>
+</formvh:renderRenderable>
+</html>
+