From a83d4561a40a3d773ac33843065272051f77056e Mon Sep 17 00:00:00 2001
From: Konrad Mohrfeldt <konrad.mohrfeldt@farbdev.org>
Date: Fri, 3 Nov 2023 22:49:15 +0100
Subject: [PATCH] feat: integrate saoforms

---
 accounts_und_dienste.html | 47 +++++++++++++--------------------------
 contact.html              | 27 +++++++++++-----------
 2 files changed, 30 insertions(+), 44 deletions(-)

diff --git a/accounts_und_dienste.html b/accounts_und_dienste.html
index 73312d3..6d3550a 100644
--- a/accounts_und_dienste.html
+++ b/accounts_und_dienste.html
@@ -327,11 +327,7 @@
   
       
       <div class="content">
-      <span id="webform-submission-account-anfrage-form-ajax-content"></span><div id="webform-submission-account-anfrage-form-ajax" class="webform-ajax-form-wrapper" data-effect="fade" data-progress-type="throbber"><form class="webform-submission-form webform-submission-add-form webform-submission-account-anfrage-form webform-submission-account-anfrage-add-form js-webform-unsaved js-webform-submit-once js-webform-disable-autosubmit js-webform-details-toggle webform-details-toggle antibot" data-drupal-selector="webform-submission-account-anfrage-add-form" data-action="/accounts_und_dienste" action="https://systemausfall.org/antibot" method="post" id="webform-submission-account-anfrage-add-form" accept-charset="UTF-8">
   
-  <noscript>
-  <div class="antibot-no-js antibot-message antibot-message-warning">You must have JavaScript enabled to use this form.</div>
-</noscript>
 <div data-webform-key="quelle" data-drupal-selector="edit-quelle" id="edit-quelle" class="js-form-wrapper form-wrapper"><div id="edit-nutzungsvereinbarungen" class="js-form-item form-item js-form-type-webform-markup form-type-webform-markup js-form-item-nutzungsvereinbarungen form-item-nutzungsvereinbarungen form-no-label">
         Die von dir in dieses Formular eingegeben Daten werden nach dem Absenden in unser Ticketsystem &uuml;bertragen. Informationen zum Umgang mit deinen Daten findest du <a href="https://hilfe.systemausfall.org/konto/datenschutz" target="_blank">hier</a>.<br />
 <br />
@@ -340,36 +336,25 @@ Mit dem Ausf&uuml;llen dieses Formulars erkl&auml;rst du dich mit unseren Nutzun
 	<li><a href="https://hilfe.systemausfall.org/konto/nutzungsvereinbarungen">Nutzungsvereinbarungen</a></li>
 	<li>Hinweise zum <a href="https://hilfe.systemausfall.org/konto/datenschutz">Datenschutz</a></li>
 </ul>
-        </div>
-<div class="js-form-item form-item js-form-type-email form-type-email js-form-item-deine-e-mail-adresse form-item-deine-e-mail-adresse">
-      <label for="edit-deine-e-mail-adresse" class="js-form-required form-required">Deine E-Mail-Adresse</label>
-        <input data-drupal-selector="edit-deine-e-mail-adresse" aria-describedby="edit-deine-e-mail-adresse--description" type="email" id="edit-deine-e-mail-adresse" name="deine_e_mail_adresse" value="" size="60" maxlength="254" class="form-email required" required="required" aria-required="true" />
 
-            <div class="description">
-      <div id="edit-deine-e-mail-adresse--description" class="webform-element-description">Anhand deiner E-Mail-Adresse k&ouml;nnen wir ermitteln, welche Informationen wir von dir zur Bearbeitung deiner Anfrage ben&ouml;tigen.<br />
-&Uuml;ber diese Adresse werden wir mit dir auch Kontakt aufnehmen.
+
+<div style="max-width: 500px">
+<style>
+	.form-group :is(input:not([type="checkbox"]), textarea) { width: 100% }
+	.form-group.has-errors :is(label, .form-error) { color: crimson }
+</style>
+	<script async>
+		((node) => {
+			import('/forms/account-request.js').then(({register}) => register(node))
+		})(document.currentScript)
+	</script>
+	<noscript>
+		<p>Du musst JavaScript aktivieren, um das Kontoanfrageformular zu verwenden.</p>
+	</noscript>
 </div>
-
-    </div>
+        </div>
   </div>
-</div>
-<div data-drupal-selector="edit-actions" class="form-actions webform-actions js-form-wrapper form-wrapper" id="edit-actions"><input class="webform-button--next button js-form-submit form-submit" data-drupal-selector="edit-actions-wizard-next" data-disable-refocus="true" type="submit" id="edit-actions-wizard-next" name="op" value="Next Page &gt;" />
-
-</div>
-<input data-drupal-selector="edit-antibot-key" type="hidden" name="antibot_key" value="" />
-<input data-drupal-selector="edit-honeypot-time" type="hidden" name="honeypot_time" value="8AEmYmX8gOIxRTZ9Jc-AqoXIaNyU5vUNjokaVMUE78o" />
-<input autocomplete="off" data-drupal-selector="form-dvipr36ilfttqiuboujpnw-qawu7t7nylh7cxfjwiq0" type="hidden" name="form_build_id" value="form-dVIpR36ilfttqiUboUJpNW-qAWU7T7nYLh7cXFjWiq0" />
-<input data-drupal-selector="edit-webform-submission-account-anfrage-add-form" type="hidden" name="form_id" value="webform_submission_account_anfrage_add_form" />
-<div class="url-textfield js-form-wrapper form-wrapper" style="display: none !important;"><div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-url form-item-url">
-      <label for="edit-url">Leave this field blank</label>
-        <input autocomplete="off" data-drupal-selector="edit-url" type="text" id="edit-url" name="url" value="" size="20" maxlength="128" class="form-text" />
-
-        </div>
-</div>
-
-
-  
-</form>
+</div>  
 </div>
     </div>
   </div>
diff --git a/contact.html b/contact.html
index f25fa65..771d26e 100644
--- a/contact.html
+++ b/contact.html
@@ -322,20 +322,21 @@
       <div class="content">
       
             <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Du kannst uns allgemeine Nachrichten über das Kontaktformular schreiben.</p>
-        <button id="zammad-feedback-form">Kontaktformular</button>
 
-<script id="zammad_form_script" src="https://support.senselab.org/assets/form/form.js"></script>
-
-<script>
-$(function() {
-  $('#zammad-feedback-form').ZammadForm({
-    messageTitle: 'Kontakt',
-    messageSubmit: 'Übermitteln',
-    messageThankYou: 'Wir haben deine Anfrage erhalten.',
-    modal: true,
-  });
-});
-</script>
+<div style="max-width: 500px">
+<style>
+	.form-group :is(input:not([type="checkbox"]), textarea) { width: 100% }
+	.form-group.has-errors :is(label, .form-error) { color: crimson }
+</style>
+	<script async>
+		((node) => {
+			import('/forms/contact.js').then(({register}) => register(node))
+		})(document.currentScript)
+	</script>
+	<noscript>
+		<p>Du musst JavaScript aktivieren, um das Kontaktformular zu verwenden.</p>
+	</noscript>
+</div>
               
 <p>&nbsp;</p>
 <p>Alternativ kannst Du auch eine Mail an <em>info [at] systemausfall.org</em> schicken. Benutze dazu auch gern unseren <a href="contact/schluessel.html">GPG-Schlüssel</a>.</p>