hr-design-system-handlebars 1.108.0 → 1.108.1

package/.storybook/main.js

@@ -13,6 +13,7 @@ const config = {
     addons: [
         '@storybook/addon-themes',
         '@storybook/addon-links',
+        'storybook-addon-mock',
         {
             name: '@storybook/addon-essentials',
             options: {

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.108.1 (Fri Oct 11 2024)
+
+#### 🐛 Bug Fix
+
+- Dpe 3384 server errors [#1100](https://github.com/mumprod/hr-design-system-handlebars/pull/1100) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.108.0 (Fri Oct 11 2024)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -3516,7 +3516,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1728647115212;
+  counter-reset: cnt1728647677353;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -3920,7 +3920,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1728647115212 1;
+  counter-increment: cnt1728647677353 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3936,7 +3936,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1728647115212);
+  content: counter(cnt1728647677353);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/alpine.js

@@ -53,7 +53,8 @@ Alpine.store('sharingBottomPos', {
     current: '0'
 })
 Alpine.store('forms', {
-    submissionAttempted: []
+    submissionAttempted: [],
+    serverErrorFields: []
 })
 // Initialization of data handlers
 Alpine.data('mainNavigationHandler', mainNavigationHandler)

package/dist/assets/js/components/forms/contactForm.alpine.js

@@ -1,36 +1,199 @@
-export default function contactForm(formId) {
+export default function contactForm(formId, jsonURL, errorMessages, multipart, trackingInformations, jsonp = false) {
     return {
+        isPosting: false,
+        isWebview:false,
+        ajaxTimeout: 60 * 1000,
+        form: this.$refs[formId],
+        formWrapper: this.$refs[formId].closest("#formWrapper"),
+        actionUrl: this.form && this.form.getAttribute('action'),
+        checkForJsonURL () {
+            if (jsonURL) {
+                this.actionUrl = jsonURL
+            }
+        },
         formInit(){
-            this.$store.forms.submissionAttempted[formId] = false;
-            console.log("this.$store.forms.submissionAttempted",this.$store.forms.submissionAttempted[formId]);
+            this.checkForJsonURL()
+            console.log("%cformId:", 'color: green' ,formId);
+            console.log("%cform:", 'color: green' ,this.form);
+            console.log("%cformWrapper:", 'color: green' ,this.formWrapper);
+            console.log("%cactionUrl:", 'color: green' ,this.actionUrl);
+            console.log("%cjsonURL:", 'color: green', jsonURL);
+            console.log("%cerrorMessages:", 'color: green', errorMessages);
+            console.log("%cmultipart:", 'color: green', multipart);
+            console.log("%ctrackingInformations:", 'color: green', trackingInformations);
+            
+            this.$store.forms.submissionAttempted[formId] = false; 
         },
-        clickHandler() {
-            console.log('check for Error:',formId);
-            const form = this.$refs[formId];
-            console.log('form',form);
-            const formData = new FormData(form);
-            const fields = Array.from(form.elements); // Array of all form fields
-
-            // Loop through each field, focus it, blur it, and serialize the data
-        
-            if(form.reportValidity()){
-                this.submitData();
+        clickHandler(event) {
+            console.log("event:",event);
+            console.log('check for Error:',formId); 
+            console.log('form:',this.form);
+     
+            if(this.form.reportValidity()){
+               // this.logData(event,form);
+                this.handleSubmit(event,this.form)
             } else {
                 this.$store.forms.submissionAttempted[formId] = true;
             }
         },
-        submitData() {
-            const formData = new FormData(this.$refs[formId]);
+        logData(event,form) {
+            // TODO - FOR DEBUGGIN CN BE REMOVED AT THE END
+            const formData = new FormData(form);
+            const fields = Array.from(form.elements);
+            // Log the serialized form data
+            console.log(fields);
+
             // Convert the FormData to a serialized string
             const serializedData = Array.from(formData.entries())
                 .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
                 .join('&');
 
             // Log the serialized form data
-            console.log('DATA: ' + serializedData);
+            console.log('serialized DATA: ' + serializedData);
+            console.log('DATA:', new URLSearchParams(new FormData(form)).toString());
+            
+        },
+        // TODO - Validation error handler (adapt to your case)
+        handleValidationErrors(errors) {
+            console.log('Validation Errors:', errors);
+            this.$store.forms.serverErrorFields[formId] = errors;
+            console.log('Validation Errors in Store:', this.$store.forms.serverErrorFields);
+        },
+        resetValidationErrors() {    
+            this.$store.forms.serverErrorFields[formId] = {}
+        },
+        
+        handleSubmit(event, form ) {
+            event.preventDefault();
+        
+            if (!this.isWebview) {
+                //uxAction(trackingInformations); // Assuming this is a tracking library
+            }
+        
+            if (this.isPosting) return;
+            this.isPosting = true;
+            
+            // TODO mit alpine umsetzen
+            //const preloadIcon = formWrapper.querySelector('.js-preloadIcon');
+            //const loadingIcon = formWrapper.querySelector('.js-loadingIcon');
+        
+            // Show loading indicator
+            //preloadIcon.classList.add('-isHidden');
+            //loadingIcon.classList.remove('-isHidden');
+        
+            console.log('DATA:', new URLSearchParams(new FormData(form)).toString());
+        
+            // Define ajaxOptions based on form type (without jQuery $.ajax)
+            let ajaxOptions = {
+                method: jsonp ? 'GET' : 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+                },
+                timeout: this.ajaxTimeout,
+                body: new URLSearchParams(new FormData(form)),
+            };
+        
+            if (jsonp) {
+                ajaxOptions.url = this.actionUrl;
+                ajaxOptions.headers['Content-Type'] = 'application/json; charset=utf-8';
+                ajaxOptions.body = new URLSearchParams(new FormData(form)).toString(); // For JSONP case
+            } else if (multipart) {
+                ajaxOptions = {
+                    method: 'POST',
+                    url: this.actionUrl,
+                    timeout: 600 * 1000,
+                    body: new FormData(form), // No URLSearchParams, we use FormData for multipart
+                    processData: false,
+                    headers: {}
+                };
+            } else {
+                ajaxOptions.url = `${this.actionUrl}?${responseFormatParam}`;
+            }
+        
+            // Using fetch API instead of $.ajax
+            fetch(ajaxOptions.url, ajaxOptions)
+                .then(async (response) => {
+                    const data = await response.text(); // Assuming the rponse is text or JSON
+                    if (response.ok) {
+                        console.log('Done');
+                        console.log(data);
+                        if (jsonURL) {
+                            const responseData = JSON.parse(data);
+                            switch (responseData.status) {
+                                case 'VALIDATION_ERROR':
+                                    this.resetValidationErrors();
+                                    this.handleValidationErrors(responseData.errors);
+                                    break;
+                                case 'OK':
+                                    console.log("OK");
+                                    this.replaceAnimated(
+                                        this.formWrapper,
+                                        this.form.querySelector('#successMessage').innerHTML,
+                                        true
+                                    ); 
+                                    break;
+                                default:
+                                    console.log("default");
+                                    replaceAnimated(
+                                        this.formWrapper,
+                                        this.form.querySelector('#errorMessage').innerHTML,
+                                        true
+                                    ); 
+                                    break;
+                            }
+                        } else {
+                            replaceAnimated(this.formWrapper, data, true);
+                        }
+/*         
+                        if (eventOnSuccess) {
+                            fireEvent(eventOnSuccess, true);
+                        } */
+        
+/*                         if (rootElement.id) {
+                            window.location.hash = rootElement.id;
+                        } */
+                    } else {
+                        throw new Error('Network response was not ok.');
+                    }
+                })
+                .catch((error) => {
+                    console.error('Fail:', error);
+                    replaceAnimated(
+                        this.formWrapper,
+                        '<div class="c-form success">Das hat leider nicht funktioniert!</div>',
+                        true
+                    );
+                })
+                .finally(() => {
+                    console.log('Always');
+                    // TODO MIT ALPINE UMSETZEN
+                    //preloadIcon.classList.remove('-isHidden');
+                    //loadingIcon.classList.add('-isHidden');
+                    this.isPosting = false;
+                });
+        },
+        // Helper function to replace content with animation (replacing hrQuery's replaceAnimated)
+        replaceAnimated(wrapper, newContent, withFade = true)  {
+            if (withFade) {
+                wrapper.style.opacity = 0;
+                setTimeout(() => {
+                    wrapper.innerHTML = newContent;
+                    wrapper.style.opacity = 1;
+                }, 300);
+            } else {
+                wrapper.innerHTML = newContent;
+            }
+        },
+        // Fire event utility (could be Alpine.js specific or custom)
+        fireEvent(eventName, success){
+            const event = new CustomEvent(eventName, { detail: success });
+            document.dispatchEvent(event);
         },
         getSubmissionAttempted() {
             return this.$store.forms.submissionAttempted[formId]
         }
+        
     }
-}
+}
+
+

package/dist/assets/js/components/forms/inputHandler.alpine.js

@@ -1,6 +1,7 @@
 export default function inputHandler(element, formId, errorMandatory, type, errorEmail, prefilledText = '') {
     return { 
         [element]: prefilledText,
+        name: document.getElementById(element).getAttribute("name"),
         valid: false, 
         wasFocused: false, 
         isFocused: false,
@@ -13,19 +14,23 @@ export default function inputHandler(element, formId, errorMandatory, type, erro
                 return this.valueMissing ? errorMandatory : errorEmail
             } 
             else {
-                return errorMandatory
+                if(this.hasServerError()){
+                    return this.getServerError()
+                } else {
+                    return errorMandatory
+                }
             }
         },
         hideDescription() {
             switch (type) {
                 case "email":
-                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (this.typeMismatch && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (this.typeMismatch && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
                 case "checkbox":
-                    return Boolean(!this.valid && this.wasFocused && !this.isFocused && !this.isChecked || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
+                    return Boolean(!this.valid && this.wasFocused && !this.isFocused && !this.isChecked || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
                 case "select":
-                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]))
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ))
                 default:
-                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
             }
         },
         hideError() { 
@@ -36,6 +41,48 @@ export default function inputHandler(element, formId, errorMandatory, type, erro
             this.typeMismatch = field.validity.typeMismatch;
             this.valueMissing  = field.validity.valueMissing;
             this.valid = field.checkValidity()
+        },
+        hasServerError() {
+            return Boolean(this.$store.forms.serverErrorFields[formId][this.name])
+        },
+        getServerError() {
+            let serverError = "Server Error: "
+            switch (this.$store.forms.serverErrorFields[formId][this.name]) {
+
+                case 'form_error_required':
+                    serverError += "Pflichtfeld"
+                    break
+                case 'form_error_max':
+                    serverError += "Zu viele Zeichen"
+                    break
+                case 'form_error_validurl':
+                    serverError += "Ungültige URL"
+                    break
+                case 'form_error_empty':
+                    serverError += "Darf nicht ausgefüllt werden"
+                    break
+                case 'form_error_constants_or_null':
+                    serverError += "Ungültiger Wert"
+                    break
+                case 'form_error_constants':
+                    serverError += "Ungültiger Wert"
+                    break
+                case 'form_error_max_multivalue':
+                    serverError += "Die maximale Anzahl an Antwortmöglichkeiten wurde überschritten"
+                    break
+                case 'vote_error_identity_already_used':
+                    serverError += "Unter dieser E-Mail-Adresse wurde bereits abgestimmt. Eine weitere Abstimmung ist nicht möglich."
+                    break
+                case 'vote_error_token_request_count_exceeded':
+                    serverError += "Die maximale Anzahl an Bestätigungs-E-Mails wurde bereits verschickt."   
+                    break               
+                case 'form_error_email':
+                    serverError += "Ungültige E-Mail-Adresse"   
+                    break 
+                default:
+                    return false     
+            }
+            return serverError
         }
     };
 }

package/dist/views/components/forms/controls.hbs

@@ -2,8 +2,9 @@
     <div class="text-xs text-gray-500 font-headingSerif">Pflichtfeld*</div>
     <div class="flex items-center">
         <label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">     
-            {{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}
-            <input type="submit" class="pl-2 cursor-pointer" value="Absenden" @click.prevent="clickHandler"/>
+            <span class="hidden" :class="{'hidden': !isPosting}">{{> components/base/image/icon _icon="reload" _addClass="w-5 h-5 fill-white dark:fill-text-dark animate-spin"}}</span>
+            <span class="" :class="{'hidden': isPosting}">{{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}</span>
+            <input type="submit" class="pl-2 cursor-pointer" value="Absenden" @click.prevent="clickHandler($event)"/>
         </label>
 
         {{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}} 

package/dist/views/components/forms/input.hbs

@@ -77,6 +77,7 @@
          DEBUG
       </div>
       <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
+         <div>name:<span x-text="name" class="font-bold" ></span></div>
          <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
          <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
          <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
@@ -88,6 +89,9 @@
          <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
          <div>valueMissing:<span x-text="valueMissing" class="font-bold" ></span></div>
          <div>typeMismatch:<span x-text="typeMismatch" class="font-bold" ></span></div>
+         <div>serverErrorFields[form{{getRandom}}][name]:<span x-text="getServerErrorFields('{{_name}}')" class="font-bold" ></span></div>
+         <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
+                    
       </div> 
    </div>
 </div>

package/dist/views/components/forms/webform.hbs

@@ -5,38 +5,46 @@
         <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12">
             {{this.title}}
         </h3>
-        
-        <form
-            x-ref="form{{nextRandom}}"
-            ax-load
-            x-data="contactForm('form{{getRandom}}')"
-            x-init="formInit()"
-            x-ignore
+        <div id="formWrapper">
+            <form
+                x-ref="form{{nextRandom}}"
+                ax-load
+                x-data="contactForm('form{{getRandom}}','{{this.jsonURL}}','{{this.errorMessages}}','{{this.isMultipart}}','{{this.trackingInformations}}')"
+                x-init="formInit()"
+                x-ignore
 
-            @submit.prevent="submitData"
-            id="form{{getRandom}}"     
-            class="relative flex flex-col justify-center overflow-hidden group" 
-            action="{{this.url}}" 
-            method="post" 
-            enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" 
-            accept-charset="utf-8"
-            
-            >
-           
-            <div class="">
-                <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
-                    DEBUG
+                @submit.prevent="submitData"
+                id="form{{getRandom}}"     
+                class="relative flex flex-col justify-center overflow-hidden group" 
+                action="{{this.url}}" 
+                method="post" 
+                enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" 
+                accept-charset="utf-8"
+                
+                >
+        
+                <div class="">
+                    <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
+                        DEBUG
+                    </div>
+                    <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
+                        <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
+                        <div>isPosting:<span x-text="isPosting" class="font-bold" :class="isPosting ? 'text-green-800' : 'text-red-700'"></span></div>
+                    
+                    </div> 
                 </div>
-                <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
-                    <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
-                </div> 
-            </div>
-            {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }} 
+                {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }} 
 
-            {{> components/forms/controls }}
-
-        </form>
-        
+                {{> components/forms/controls }}
+                <template id="successMessage">
+                    <h2>SUPER DAS HAT ALLES FUNKTIONIERT</h2>
+                </template>
+                <template id="errorMessage">
+                    <h2>DAS HAT LEIDER NICHT FUNKTIONIERT</h2>
+                </template>
+                
+            </form>
+        </div>   
     {{/components/forms/backgroundBox }}
 {{~else~}}
     {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}

package/dist/views_static/components/forms/controls.hbs

@@ -2,8 +2,9 @@
     <div class="text-xs text-gray-500 font-headingSerif">Pflichtfeld*</div>
     <div class="flex items-center">
         <label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">     
-            {{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}
-            <input type="submit" class="pl-2 cursor-pointer" value="Absenden" @click.prevent="clickHandler"/>
+            <span class="hidden" :class="{'hidden': !isPosting}">{{> components/base/image/icon _icon="reload" _addClass="w-5 h-5 fill-white dark:fill-text-dark animate-spin"}}</span>
+            <span class="" :class="{'hidden': isPosting}">{{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}</span>
+            <input type="submit" class="pl-2 cursor-pointer" value="Absenden" @click.prevent="clickHandler($event)"/>
         </label>
 
         {{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}} 

package/dist/views_static/components/forms/input.hbs

@@ -77,6 +77,7 @@
          DEBUG
       </div>
       <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
+         <div>name:<span x-text="name" class="font-bold" ></span></div>
          <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
          <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
          <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
@@ -88,6 +89,9 @@
          <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
          <div>valueMissing:<span x-text="valueMissing" class="font-bold" ></span></div>
          <div>typeMismatch:<span x-text="typeMismatch" class="font-bold" ></span></div>
+         <div>serverErrorFields[form{{getRandom}}][name]:<span x-text="getServerErrorFields('{{_name}}')" class="font-bold" ></span></div>
+         <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
+                    
       </div> 
    </div>
 </div>

package/dist/views_static/components/forms/webform.hbs

@@ -5,38 +5,46 @@
         <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12">
             {{this.title}}
         </h3>
-        
-        <form
-            x-ref="form{{nextRandom}}"
-            ax-load
-            x-data="contactForm('form{{getRandom}}')"
-            x-init="formInit()"
-            x-ignore
+        <div id="formWrapper">
+            <form
+                x-ref="form{{nextRandom}}"
+                ax-load
+                x-data="contactForm('form{{getRandom}}','{{this.jsonURL}}','{{this.errorMessages}}','{{this.isMultipart}}','{{this.trackingInformations}}')"
+                x-init="formInit()"
+                x-ignore
 
-            @submit.prevent="submitData"
-            id="form{{getRandom}}"     
-            class="relative flex flex-col justify-center overflow-hidden group" 
-            action="{{this.url}}" 
-            method="post" 
-            enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" 
-            accept-charset="utf-8"
-            
-            >
-           
-            <div class="">
-                <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
-                    DEBUG
+                @submit.prevent="submitData"
+                id="form{{getRandom}}"     
+                class="relative flex flex-col justify-center overflow-hidden group" 
+                action="{{this.url}}" 
+                method="post" 
+                enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" 
+                accept-charset="utf-8"
+                
+                >
+        
+                <div class="">
+                    <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
+                        DEBUG
+                    </div>
+                    <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
+                        <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
+                        <div>isPosting:<span x-text="isPosting" class="font-bold" :class="isPosting ? 'text-green-800' : 'text-red-700'"></span></div>
+                    
+                    </div> 
                 </div>
-                <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
-                    <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
-                </div> 
-            </div>
-            {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }} 
+                {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }} 
 
-            {{> components/forms/controls }}
-
-        </form>
-        
+                {{> components/forms/controls }}
+                <template id="successMessage">
+                    <h2>SUPER DAS HAT ALLES FUNKTIONIERT</h2>
+                </template>
+                <template id="errorMessage">
+                    <h2>DAS HAT LEIDER NICHT FUNKTIONIERT</h2>
+                </template>
+                
+            </form>
+        </div>   
     {{/components/forms/backgroundBox }}
 {{~else~}}
     {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.108.0",
+  "version": "1.108.1",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",
@@ -102,6 +102,7 @@
     "remark-gfm": "^4.0.0",
     "rimraf": "^3.0.2",
     "storybook": "^8.2.6",
+    "storybook-addon-mock": "^5.0.0",
     "storybook-conditional-toolbar-selector": "^1.0.3",
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.0.23",

package/src/assets/fixtures/content/copytext/copytext_webform.json

@@ -9,6 +9,10 @@
                 "isWebForm": true,
                 "hasNewWebForm": true,
                 "title": "Kontaktformular",
+                "jsonURL": "https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de",
+                "errorMessages": "errorMessages",
+                "isMultipart": "isMultipart",
+                "trackingInformations": "trackingInformations",
                 "fields":[
                     {
                         "@->jsoninclude": "forms/form_fields.inc.json",
@@ -30,65 +34,8 @@
                     }
                 ]
                 
-            }
-        },
-        {
-            "isHeadline": true,
-            "text": "Noch ein Formular"
-        },
-        {
-            "paragraphBoxItem": {
-                "isWebForm": true,
-                "hasNewWebForm": true,
-                "title": "Kontaktformular",
-                "fields":[
-                    {
-                        "@->jsoninclude": "forms/form_fields.inc.json",
-                        "@->contentpath": "input-text-vorname"
-                    },
-                    {
-                        "@->jsoninclude": "forms/form_fields.inc.json",
-                        "@->contentpath": "input-text-vorname-required"
-                    },
-                    {
-                        "@->jsoninclude": "forms/form_fields.inc.json",
-                        "@->contentpath": "input-text-nachname-required"
-                    },
-                    {
-                        "@->jsoninclude": "forms/form_fields.inc.json",
-                        "@->contentpath": "select"
-                    },
-                    {
-                        "@->jsoninclude": "forms/form_fields.inc.json",
-                        "@->contentpath": "input-email",
-                        "@->overrides": [
-                            {
-                                "@->contentpath": "isRequired",
-                                "@->value": false
-                            }
-                        ]
-                    },
-                    {
-                        "@->jsoninclude": "forms/form_fields.inc.json",
-                        "@->contentpath": "input-email"
-                    },
-                    {
-                        "@->jsoninclude": "forms/form_fields.inc.json",
-                        "@->contentpath": "textarea"
-                    },
-                    {
-                      "@->jsoninclude": "forms/form_fields.inc.json",
-                      "@->contentpath": "checkbox",
-                      "@->overrides": [
-                         {
-                            "@->contentpath": "label",
-                            "@->value": "Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de."
-                         }
-                      ]
-                    }
-                ]
-                
             }
         }
+        
     ]
 }

package/src/assets/js/alpine.js

@@ -53,7 +53,8 @@ Alpine.store('sharingBottomPos', {
     current: '0'
 })
 Alpine.store('forms', {
-    submissionAttempted: []
+    submissionAttempted: [],
+    serverErrorFields: []
 })
 // Initialization of data handlers
 Alpine.data('mainNavigationHandler', mainNavigationHandler)

package/src/stories/views/components/content/copytext/copytext-form.stories.js

@@ -0,0 +1,41 @@
+import copytext from './copytext.hbs'
+
+import copytext_webform_json from './fixtures/copytext_webform.json'
+
+const Template = ({ ...args }) => {
+    return copytext({ ...args })
+}
+
+export default {
+    title: 'Komponenten/Content/Copytext',
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-page">
+                        <div class="grid bg-white grid-article">
+                            ${Story()} 
+                        </div>
+                    </div>`
+        },
+    ],
+    parameters: { 
+        mockData: [
+            {
+                url: 'https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de',
+                method: 'POST',
+                status: 200,
+                response: {
+                    "status":"VALIDATION_ERROR","errors":{"vorname":"form_error_required"},
+                },
+            },
+        ],
+        layout: 'fullscreen',
+        chromatic: { disableSnapshot: true }
+    }
+}
+
+export const WithWebform = {
+    render: Template.bind({}),
+    name: 'Formular',
+    args: copytext_webform_json,
+}
+

package/src/stories/views/components/content/copytext/copytext.stories.js

@@ -17,7 +17,6 @@ import copytext_video_json from './fixtures/copytext_video.json'
 import copytext_audio_json from './fixtures/copytext_audio.json'
 import copytext_audio_event_stream_json from './fixtures/copytext_audio_livestream.json'
 import copytext_livestream_json from './fixtures/copytext_livestream.json'
-import copytext_webform_json from './fixtures/copytext_webform.json'
 
 const Template = ({ ...args }) => {
     return copytext({ ...args })
@@ -67,12 +66,6 @@ export const WithFiledownload = {
     args: copytext_filedownload_json,
 }
 
-export const WithWebform = {
-    render: Template.bind({}),
-    name: 'Formular',
-    args: copytext_webform_json,
-}
-
 export const WithImage = {
     render: Template.bind({}),
     name: 'Image',

package/src/stories/views/components/content/copytext/fixtures/copytext_webform.json

@@ -1 +1 @@
-{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}},{"isHeadline":true,"text":"Noch ein Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext von Vorname","defaultValue":"","isHidden":false,"isRequired":false},{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isSelect":true,"asString":"select"},"name":"Select Name","label":"Wen möchten Sie erreichen?","description":"Das ist der Beschreibungstext von Select","defaultValue":"","isHidden":false,"isRequired":true,"options":[{"id":"option1","value":"option1","selected":false,"label":"Option 1"},{"id":"option2","value":"option2","selected":false,"label":"Option 2"},{"id":"option3","value":"option3","selected":false,"label":"Option 3"},{"id":"option4","value":"option4","selected":false,"label":"Option 4"}]},{"type":{"isText":true,"isEmail":true,"asString":"email"},"name":"email","label":"Email","description":"Das ist der Beschreibungstext von Email","defaultValue":"","isHidden":false,"isRequired":false,"maxLength":"140"},{"type":{"isText":true,"isEmail":true,"asString":"email"},"name":"email","label":"Email","description":"Das ist der Beschreibungstext von Email","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isTextarea":true,"asString":"textarea"},"name":"textarea","label":"Textarea","description":"Das ist der Beschreibungstext von Textarea","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"300","columns":"30","rows":"10","counter":true},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}}]}
+{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","jsonURL":"https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de","errorMessages":"errorMessages","isMultipart":"isMultipart","trackingInformations":"trackingInformations","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}}]}

package/src/stories/views/components/forms/contactForm.alpine.js

@@ -1,36 +1,199 @@
-export default function contactForm(formId) {
+export default function contactForm(formId, jsonURL, errorMessages, multipart, trackingInformations, jsonp = false) {
     return {
+        isPosting: false,
+        isWebview:false,
+        ajaxTimeout: 60 * 1000,
+        form: this.$refs[formId],
+        formWrapper: this.$refs[formId].closest("#formWrapper"),
+        actionUrl: this.form && this.form.getAttribute('action'),
+        checkForJsonURL () {
+            if (jsonURL) {
+                this.actionUrl = jsonURL
+            }
+        },
         formInit(){
-            this.$store.forms.submissionAttempted[formId] = false;
-            console.log("this.$store.forms.submissionAttempted",this.$store.forms.submissionAttempted[formId]);
+            this.checkForJsonURL()
+            console.log("%cformId:", 'color: green' ,formId);
+            console.log("%cform:", 'color: green' ,this.form);
+            console.log("%cformWrapper:", 'color: green' ,this.formWrapper);
+            console.log("%cactionUrl:", 'color: green' ,this.actionUrl);
+            console.log("%cjsonURL:", 'color: green', jsonURL);
+            console.log("%cerrorMessages:", 'color: green', errorMessages);
+            console.log("%cmultipart:", 'color: green', multipart);
+            console.log("%ctrackingInformations:", 'color: green', trackingInformations);
+            
+            this.$store.forms.submissionAttempted[formId] = false; 
         },
-        clickHandler() {
-            console.log('check for Error:',formId);
-            const form = this.$refs[formId];
-            console.log('form',form);
-            const formData = new FormData(form);
-            const fields = Array.from(form.elements); // Array of all form fields
-
-            // Loop through each field, focus it, blur it, and serialize the data
-        
-            if(form.reportValidity()){
-                this.submitData();
+        clickHandler(event) {
+            console.log("event:",event);
+            console.log('check for Error:',formId); 
+            console.log('form:',this.form);
+     
+            if(this.form.reportValidity()){
+               // this.logData(event,form);
+                this.handleSubmit(event,this.form)
             } else {
                 this.$store.forms.submissionAttempted[formId] = true;
             }
         },
-        submitData() {
-            const formData = new FormData(this.$refs[formId]);
+        logData(event,form) {
+            // TODO - FOR DEBUGGIN CN BE REMOVED AT THE END
+            const formData = new FormData(form);
+            const fields = Array.from(form.elements);
+            // Log the serialized form data
+            console.log(fields);
+
             // Convert the FormData to a serialized string
             const serializedData = Array.from(formData.entries())
                 .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
                 .join('&');
 
             // Log the serialized form data
-            console.log('DATA: ' + serializedData);
+            console.log('serialized DATA: ' + serializedData);
+            console.log('DATA:', new URLSearchParams(new FormData(form)).toString());
+            
+        },
+        // TODO - Validation error handler (adapt to your case)
+        handleValidationErrors(errors) {
+            console.log('Validation Errors:', errors);
+            this.$store.forms.serverErrorFields[formId] = errors;
+            console.log('Validation Errors in Store:', this.$store.forms.serverErrorFields);
+        },
+        resetValidationErrors() {    
+            this.$store.forms.serverErrorFields[formId] = {}
+        },
+        
+        handleSubmit(event, form ) {
+            event.preventDefault();
+        
+            if (!this.isWebview) {
+                //uxAction(trackingInformations); // Assuming this is a tracking library
+            }
+        
+            if (this.isPosting) return;
+            this.isPosting = true;
+            
+            // TODO mit alpine umsetzen
+            //const preloadIcon = formWrapper.querySelector('.js-preloadIcon');
+            //const loadingIcon = formWrapper.querySelector('.js-loadingIcon');
+        
+            // Show loading indicator
+            //preloadIcon.classList.add('-isHidden');
+            //loadingIcon.classList.remove('-isHidden');
+        
+            console.log('DATA:', new URLSearchParams(new FormData(form)).toString());
+        
+            // Define ajaxOptions based on form type (without jQuery $.ajax)
+            let ajaxOptions = {
+                method: jsonp ? 'GET' : 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+                },
+                timeout: this.ajaxTimeout,
+                body: new URLSearchParams(new FormData(form)),
+            };
+        
+            if (jsonp) {
+                ajaxOptions.url = this.actionUrl;
+                ajaxOptions.headers['Content-Type'] = 'application/json; charset=utf-8';
+                ajaxOptions.body = new URLSearchParams(new FormData(form)).toString(); // For JSONP case
+            } else if (multipart) {
+                ajaxOptions = {
+                    method: 'POST',
+                    url: this.actionUrl,
+                    timeout: 600 * 1000,
+                    body: new FormData(form), // No URLSearchParams, we use FormData for multipart
+                    processData: false,
+                    headers: {}
+                };
+            } else {
+                ajaxOptions.url = `${this.actionUrl}?${responseFormatParam}`;
+            }
+        
+            // Using fetch API instead of $.ajax
+            fetch(ajaxOptions.url, ajaxOptions)
+                .then(async (response) => {
+                    const data = await response.text(); // Assuming the rponse is text or JSON
+                    if (response.ok) {
+                        console.log('Done');
+                        console.log(data);
+                        if (jsonURL) {
+                            const responseData = JSON.parse(data);
+                            switch (responseData.status) {
+                                case 'VALIDATION_ERROR':
+                                    this.resetValidationErrors();
+                                    this.handleValidationErrors(responseData.errors);
+                                    break;
+                                case 'OK':
+                                    console.log("OK");
+                                    this.replaceAnimated(
+                                        this.formWrapper,
+                                        this.form.querySelector('#successMessage').innerHTML,
+                                        true
+                                    ); 
+                                    break;
+                                default:
+                                    console.log("default");
+                                    replaceAnimated(
+                                        this.formWrapper,
+                                        this.form.querySelector('#errorMessage').innerHTML,
+                                        true
+                                    ); 
+                                    break;
+                            }
+                        } else {
+                            replaceAnimated(this.formWrapper, data, true);
+                        }
+/*         
+                        if (eventOnSuccess) {
+                            fireEvent(eventOnSuccess, true);
+                        } */
+        
+/*                         if (rootElement.id) {
+                            window.location.hash = rootElement.id;
+                        } */
+                    } else {
+                        throw new Error('Network response was not ok.');
+                    }
+                })
+                .catch((error) => {
+                    console.error('Fail:', error);
+                    replaceAnimated(
+                        this.formWrapper,
+                        '<div class="c-form success">Das hat leider nicht funktioniert!</div>',
+                        true
+                    );
+                })
+                .finally(() => {
+                    console.log('Always');
+                    // TODO MIT ALPINE UMSETZEN
+                    //preloadIcon.classList.remove('-isHidden');
+                    //loadingIcon.classList.add('-isHidden');
+                    this.isPosting = false;
+                });
+        },
+        // Helper function to replace content with animation (replacing hrQuery's replaceAnimated)
+        replaceAnimated(wrapper, newContent, withFade = true)  {
+            if (withFade) {
+                wrapper.style.opacity = 0;
+                setTimeout(() => {
+                    wrapper.innerHTML = newContent;
+                    wrapper.style.opacity = 1;
+                }, 300);
+            } else {
+                wrapper.innerHTML = newContent;
+            }
+        },
+        // Fire event utility (could be Alpine.js specific or custom)
+        fireEvent(eventName, success){
+            const event = new CustomEvent(eventName, { detail: success });
+            document.dispatchEvent(event);
         },
         getSubmissionAttempted() {
             return this.$store.forms.submissionAttempted[formId]
         }
+        
     }
-}
+}
+
+

package/src/stories/views/components/forms/controls.hbs

@@ -2,8 +2,9 @@
     <div class="text-xs text-gray-500 font-headingSerif">Pflichtfeld*</div>
     <div class="flex items-center">
         <label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">     
-            {{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}
-            <input type="submit" class="pl-2 cursor-pointer" value="Absenden" @click.prevent="clickHandler"/>
+            <span class="hidden" :class="{'hidden': !isPosting}">{{> components/base/image/icon _icon="reload" _addClass="w-5 h-5 fill-white dark:fill-text-dark animate-spin"}}</span>
+            <span class="" :class="{'hidden': isPosting}">{{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}</span>
+            <input type="submit" class="pl-2 cursor-pointer" value="Absenden" @click.prevent="clickHandler($event)"/>
         </label>
 
         {{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}} 

package/src/stories/views/components/forms/input.hbs

@@ -77,6 +77,7 @@
          DEBUG
       </div>
       <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
+         <div>name:<span x-text="name" class="font-bold" ></span></div>
          <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
          <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
          <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
@@ -88,6 +89,9 @@
          <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
          <div>valueMissing:<span x-text="valueMissing" class="font-bold" ></span></div>
          <div>typeMismatch:<span x-text="typeMismatch" class="font-bold" ></span></div>
+         <div>serverErrorFields[form{{getRandom}}][name]:<span x-text="getServerErrorFields('{{_name}}')" class="font-bold" ></span></div>
+         <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
+                    
       </div> 
    </div>
 </div>

package/src/stories/views/components/forms/inputHandler.alpine.js

@@ -1,6 +1,7 @@
 export default function inputHandler(element, formId, errorMandatory, type, errorEmail, prefilledText = '') {
     return { 
         [element]: prefilledText,
+        name: document.getElementById(element).getAttribute("name"),
         valid: false, 
         wasFocused: false, 
         isFocused: false,
@@ -13,19 +14,23 @@ export default function inputHandler(element, formId, errorMandatory, type, erro
                 return this.valueMissing ? errorMandatory : errorEmail
             } 
             else {
-                return errorMandatory
+                if(this.hasServerError()){
+                    return this.getServerError()
+                } else {
+                    return errorMandatory
+                }
             }
         },
         hideDescription() {
             switch (type) {
                 case "email":
-                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (this.typeMismatch && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (this.typeMismatch && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
                 case "checkbox":
-                    return Boolean(!this.valid && this.wasFocused && !this.isFocused && !this.isChecked || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
+                    return Boolean(!this.valid && this.wasFocused && !this.isFocused && !this.isChecked || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
                 case "select":
-                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]))
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ))
                 default:
-                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]));
+                    return Boolean((!this.valid && this.wasFocused && !this.isFocused) || (!this.valid && !this.isFocused && this.$store.forms.submissionAttempted[formId]) || (this.hasServerError() && !this.isFocused ));
             }
         },
         hideError() { 
@@ -36,6 +41,48 @@ export default function inputHandler(element, formId, errorMandatory, type, erro
             this.typeMismatch = field.validity.typeMismatch;
             this.valueMissing  = field.validity.valueMissing;
             this.valid = field.checkValidity()
+        },
+        hasServerError() {
+            return Boolean(this.$store.forms.serverErrorFields[formId][this.name])
+        },
+        getServerError() {
+            let serverError = "Server Error: "
+            switch (this.$store.forms.serverErrorFields[formId][this.name]) {
+
+                case 'form_error_required':
+                    serverError += "Pflichtfeld"
+                    break
+                case 'form_error_max':
+                    serverError += "Zu viele Zeichen"
+                    break
+                case 'form_error_validurl':
+                    serverError += "Ungültige URL"
+                    break
+                case 'form_error_empty':
+                    serverError += "Darf nicht ausgefüllt werden"
+                    break
+                case 'form_error_constants_or_null':
+                    serverError += "Ungültiger Wert"
+                    break
+                case 'form_error_constants':
+                    serverError += "Ungültiger Wert"
+                    break
+                case 'form_error_max_multivalue':
+                    serverError += "Die maximale Anzahl an Antwortmöglichkeiten wurde überschritten"
+                    break
+                case 'vote_error_identity_already_used':
+                    serverError += "Unter dieser E-Mail-Adresse wurde bereits abgestimmt. Eine weitere Abstimmung ist nicht möglich."
+                    break
+                case 'vote_error_token_request_count_exceeded':
+                    serverError += "Die maximale Anzahl an Bestätigungs-E-Mails wurde bereits verschickt."   
+                    break               
+                case 'form_error_email':
+                    serverError += "Ungültige E-Mail-Adresse"   
+                    break 
+                default:
+                    return false     
+            }
+            return serverError
         }
     };
 }

package/src/stories/views/components/forms/webform.hbs

@@ -5,38 +5,46 @@
         <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12">
             {{this.title}}
         </h3>
-        
-        <form
-            x-ref="form{{nextRandom}}"
-            ax-load
-            x-data="contactForm('form{{getRandom}}')"
-            x-init="formInit()"
-            x-ignore
+        <div id="formWrapper">
+            <form
+                x-ref="form{{nextRandom}}"
+                ax-load
+                x-data="contactForm('form{{getRandom}}','{{this.jsonURL}}','{{this.errorMessages}}','{{this.isMultipart}}','{{this.trackingInformations}}')"
+                x-init="formInit()"
+                x-ignore
 
-            @submit.prevent="submitData"
-            id="form{{getRandom}}"     
-            class="relative flex flex-col justify-center overflow-hidden group" 
-            action="{{this.url}}" 
-            method="post" 
-            enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" 
-            accept-charset="utf-8"
-            
-            >
-           
-            <div class="">
-                <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
-                    DEBUG
+                @submit.prevent="submitData"
+                id="form{{getRandom}}"     
+                class="relative flex flex-col justify-center overflow-hidden group" 
+                action="{{this.url}}" 
+                method="post" 
+                enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" 
+                accept-charset="utf-8"
+                
+                >
+        
+                <div class="">
+                    <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
+                        DEBUG
+                    </div>
+                    <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
+                        <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
+                        <div>isPosting:<span x-text="isPosting" class="font-bold" :class="isPosting ? 'text-green-800' : 'text-red-700'"></span></div>
+                    
+                    </div> 
                 </div>
-                <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
-                    <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
-                </div> 
-            </div>
-            {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }} 
+                {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }} 
 
-            {{> components/forms/controls }}
-
-        </form>
-        
+                {{> components/forms/controls }}
+                <template id="successMessage">
+                    <h2>SUPER DAS HAT ALLES FUNKTIONIERT</h2>
+                </template>
+                <template id="errorMessage">
+                    <h2>DAS HAT LEIDER NICHT FUNKTIONIERT</h2>
+                </template>
+                
+            </form>
+        </div>   
     {{/components/forms/backgroundBox }}
 {{~else~}}
     {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}