From b514d9b23d1718e460bd1ba3501310b70a2bf7ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 29 Sep 2020 15:32:11 +0200
Subject: [PATCH] Finalize forms migration to tailwindcss

---
 .../Resources/Private/Assets/scss/main.scss   |  6 +++
 .../Private/Partials/Form/Field/Field.html    |  8 ++++
 .../Private/Templates/Form/FullForm.html      | 44 +++++++++----------
 .../Private/Templates/Form/SimpleForm.html    | 12 ++---
 4 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
index 793ea328..3a529638 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
@@ -69,6 +69,12 @@
     @import "employee";
 }
 
+@layer components {
+    .has-validation-error .form-input {
+        @apply text-red-500 border-red-500;
+    }
+}
+
 @layer utilities {
     .-translate-xy-1\/2 {
         transform: translate(-50%, -50%);
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Field/Field.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Field/Field.html
index a2f03840..76038c0d 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Field/Field.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Field/Field.html
@@ -5,6 +5,14 @@
             <span class="{f:if(condition: '{validationResults.errors.0}', then: 'text-red-500', else: 'text-gray-700')}">{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if></span>
         </f:if>
         {elementContent -> f:format.raw()}
+        <f:if condition="{validationResults.flattenedErrors}">
+            <div class="text-red-500 mt-2" role="alert">
+                <f:for each="{validationResults.errors}" as="error">
+                    <f:format.htmlspecialchars>{formvh:translateElementError(element: element, error: error)}</f:format.htmlspecialchars>
+                    <br />
+                </f:for>
+            </div>
+        </f:if>
     </label>
 </f:form.validationResults>
 </html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/FullForm.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/FullForm.html
index e558ec25..f4f95bac 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/FullForm.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/FullForm.html
@@ -12,55 +12,55 @@
                             pageUid="{settings.defaultAjaxUid}"
                             additionalAttributes="{'v-show': '!success', '@submit.prevent': 'submitForm()'}">
                         <f:form.hidden property="pageUrl"/>
-                        <label class="block mb-4">
+                        <label class="block mb-4" :class="{ 'has-validation-error': formErrors.name }">
                             <span :class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span>
                             <f:form.textfield class="form-input mt-1 block w-full" property="name"/>
-                            <div class="text-red-500" v-show="formErrors.name" v-html="formErrors.name"></div>
+                            <div class="text-red-500 mt-2" v-show="formErrors.name" v-html="formErrors.name"></div>
                         </label>
-                        <label class="block mb-4">
+                        <label class="block mb-4" :class="{ 'has-validation-error': formErrors.firstName }">
                             <span :class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span>
                             <f:form.textfield class="form-input mt-1 block w-full" property="firstName"/>
-                            <div class="text-red-500" v-show="formErrors.firstName" v-html="formErrors.firstName"></div>
+                            <div class="text-red-500 mt-2" v-show="formErrors.firstName" v-html="formErrors.firstName"></div>
                         </label>
-                        <label class="block mb-4">
+                        <label class="block mb-4" :class="{ 'has-validation-error': formErrors.gender }">
                             <span :class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span>
                             <f:form.select class="form-select mt-1 block w-full" property="gender" options="{m: 'M', w: 'W', d: 'D'}"/>
-                            <div class="text-red-500" v-show="formErrors.gender" v-html="formErrors.gender"></div>
+                            <div class="text-red-500 mt-2" v-show="formErrors.gender" v-html="formErrors.gender"></div>
                         </label>
-                        <label class="block mb-4">
+                        <label class="block mb-4" :class="{ 'has-validation-error': formErrors.company }">
                             <span :class="formErrors.company ? 'text-red-500' : 'text-gray-700'">Firma/Verein*</span>
                             <f:form.textfield class="form-input mt-1 block w-full" property="company"/>
-                            <div class="text-red-500" v-show="formErrors.company" v-html="formErrors.company"></div>
+                            <div class="text-red-500 mt-2" v-show="formErrors.company" v-html="formErrors.company"></div>
                         </label>
-                        <label class="block mb-4">
+                        <label class="block mb-4" :class="{ 'has-validation-error': formErrors.email }">
                             <span :class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span>
                             <f:form.textfield class="form-input mt-1 block w-full" property="email"/>
-                            <div class="text-red-500" v-show="formErrors.email" v-html="formErrors.email"></div>
+                            <div class="text-red-500 mt-2" v-show="formErrors.email" v-html="formErrors.email"></div>
                         </label>
-                        <label class="block mb-4">
+                        <label class="block mb-4" :class="{ 'has-validation-error': formErrors.phone }">
                             <span :class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span>
                             <f:form.textfield class="form-input mt-1 block w-full" property="phone"/>
-                            <div class="text-red-500" v-show="formErrors.phone" v-html="formErrors.phone"></div>
+                            <div class="text-red-500 mt-2" v-show="formErrors.phone" v-html="formErrors.phone"></div>
                         </label>
-                        <label class="block mb-4">
+                        <label class="block mb-4" :class="{ 'has-validation-error': formErrors.period }">
                             <span :class="formErrors.period ? 'text-red-500' : 'text-gray-700'">Zeitraum</span>
                             <f:form.textfield class="form-input mt-1 block w-full" property="period" placeholder="tt.mm.jjjj - tt.mm.jjjj"/>
-                            <div class="text-red-500" v-show="formErrors.period" v-html="formErrors.period"></div>
+                            <div class="text-red-500 mt-2" v-show="formErrors.period" v-html="formErrors.period"></div>
                         </label>
-                        <label class="block mb-4">
+                        <label class="block mb-4" :class="{ 'has-validation-error': formErrors.duration }">
                             <span :class="formErrors.duration ? 'text-red-500' : 'text-gray-700'">Aufenthaltsdauer</span>
                             <f:form.textfield class="form-input mt-1 block w-full" placeholder="Tage inkl. An- & Abreisetag"/>
-                            <div class="text-red-500" v-show="formErrors.duration" v-html="formErrors.duration"></div>
+                            <div class="text-red-500 mt-2" v-show="formErrors.duration" v-html="formErrors.duration"></div>
                         </label>
-                        <label class="block mb-4">
+                        <label class="block mb-4" :class="{ 'has-validation-error': formErrors.pax }">
                             <span :class="formErrors.pax ? 'text-red-500' : 'text-gray-700'">Anzahl der Personen</span>
                             <f:form.textfield class="form-input mt-1 block w-full" placeholder="ab 25 Personen"/>
-                            <div class="text-red-500" v-show="formErrors.pax" v-html="formErrors.pax"></div>
+                            <div class="text-red-500 mt-2" v-show="formErrors.pax" v-html="formErrors.pax"></div>
                         </label>
-                        <label class="block mb-4">
+                        <label class="block mb-4" :class="{ 'has-validation-error': formErrors.age }">
                             <span :class="formErrors.age ? 'text-red-500' : 'text-gray-700'">Durchschnittsalter</span>
                             <f:form.textfield class="form-input mt-1 block w-full"/>
-                            <div class="text-red-500" v-show="formErrors.age" v-html="formErrors.age"></div>
+                            <div class="text-red-500 mt-2" v-show="formErrors.age" v-html="formErrors.age"></div>
                         </label>
                         <div class="mb-4">
                             <label class="inline-flex items-center">
@@ -68,13 +68,13 @@
                                 <span class="ml-2">Kinder (ja/nein)</span>
                             </label>
                         </div>
-                        <label class="block mb-4">
+                        <label class="block mb-4" :class="{ 'has-validation-error': formErrors.inquiry }">
                             <span :class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span>
                             <f:form.textarea class="form-textarea mt-1 block w-full"
                                              property="inquiry"
                                              placeholder="z. B. Reiseleiter, Halbpension, Bus Anreise, Programm"
                                              cols="30" rows="5"/>
-                            <div class="text-red-500" v-show="formErrors.inquiry" v-html="formErrors.inquiry"></div>
+                            <div class="text-red-500 mt-2" v-show="formErrors.inquiry" v-html="formErrors.inquiry"></div>
                         </label>
                         <div class="mb-4">
                             Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}"
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/SimpleForm.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/SimpleForm.html
index b66e9673..78248fcc 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/SimpleForm.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/SimpleForm.html
@@ -12,32 +12,32 @@
                             pageUid="{settings.defaultAjaxUid}"
                             additionalAttributes="{'v-show': '!success', '@submit.prevent': 'submitForm()'}">
                         <f:form.hidden property="pageUrl"/>
-                        <label class="block mb-4">
+                        <label class="block mb-4" :class="{ 'has-validation-error': formErrors.gender }">
                             <span :class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span>
                             <f:form.select class="form-select mt-1 block w-full" property="gender" options="{m: 'M', w: 'W', d: 'D'}"/>
                             <div class="text-red-500" v-show="formErrors.gender" v-html="formErrors.gender"></div>
                         </label>
-                        <label class="block mb-4">
+                        <label class="block mb-4" :class="{ 'has-validation-error': formErrors.name }">
                             <span :class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span>
                             <f:form.textfield class="form-input mt-1 block w-full" property="name"/>
                             <div class="text-red-500" v-show="formErrors.name" v-html="formErrors.name"></div>
                         </label>
-                        <label class="block mb-4">
+                        <label class="block mb-4" :class="{ 'has-validation-error': formErrors.firstName }">
                             <span :class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span>
                             <f:form.textfield class="form-input mt-1 block w-full" property="firstName"/>
                             <div class="text-red-500" v-show="formErrors.firstName" v-html="formErrors.firstName"></div>
                         </label>
-                        <label class="block mb-4">
+                        <label class="block mb-4" :class="{ 'has-validation-error': formErrors.email }">
                             <span :class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span>
                             <f:form.textfield class="form-input mt-1 block w-full" property="email"/>
                             <div class="text-red-500" v-show="formErrors.email" v-html="formErrors.email"></div>
                         </label>
-                        <label class="block mb-4">
+                        <label class="block mb-4" :class="{ 'has-validation-error': formErrors.phone }">
                             <span :class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span>
                             <f:form.textfield class="form-input mt-1 block w-full" property="phone"/>
                             <div class="text-red-500" v-show="formErrors.phone" v-html="formErrors.phone"></div>
                         </label>
-                        <label class="block mb-4">
+                        <label class="block mb-4" :class="{ 'has-validation-error': formErrors.inquiry }">
                             <span :class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span>
                             <f:form.textarea class="form-textarea mt-1 block w-full"
                                              property="inquiry"