comand-component-library 4.1.53 → 4.1.55

package/src/components/CmdBasicForm.vue

@@ -7,6 +7,7 @@
         <!-- begin CmdForm -->
         <CmdForm
             @submit="onSubmit"
+            :class="{'send-success': sendSuccessfully}"
             novalidate="novalidate"
             v-bind="cmdForm"
             :legend="legend"
@@ -25,7 +26,6 @@
                     :replaceInputType="configuration.salutation?.replaceInputType"
                     v-model="formData.salutation.value"
                     :i18n="i18n"
-                    @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
 
@@ -39,7 +39,6 @@
                     :replaceInputType="configuration.salutation?.replaceInputType"
                     v-model="formData.salutation.value"
                     :i18n="i18n"
-                    @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
             </div>
@@ -62,7 +61,7 @@
                     v-model="formData.lastName.value"
                     :status="formData.lastName.error ? 'error' : ''"
                     :i18n="i18n"
-                    @validate="onValidate"
+                    :showStatusIcon="false"
                 />
                 <!-- end cmd-form-element -->
 
@@ -79,7 +78,6 @@
                     v-model="formData.firstName.value"
                     :status="formData.firstName.error ? 'error' : ''"
                     :i18n="i18n"
-                    @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
             </div>
@@ -97,7 +95,7 @@
                     v-model="formData.email.value"
                     :status="formData.email.error ? 'error' : ''"
                     :i18n="i18n"
-                    @validate="onValidate"
+                    :showStatusIcon="false"
                 />
                 <!-- end cmd-form-element -->
 
@@ -114,7 +112,6 @@
                     :name="configuration.phone?.name"
                     :status="formData.phone.error ? 'error' : ''"
                     :i18n="i18n"
-                    @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
             </div>
@@ -131,7 +128,6 @@
                     v-model="formData.country.value"
                     :status="formData.country.error ? 'error' : ''"
                     :i18n="i18n"
-                    @validate="onValidate"
                     @update:modelValue="onCountrySelect"
                 />
                 <!-- end cmd-form-element -->
@@ -148,7 +144,6 @@
                     v-model="formData.streetNo.value"
                     :status="formData.streetNo.error ? 'error' : ''"
                     :i18n="i18n"
-                    @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
 
@@ -164,7 +159,6 @@
                     v-model="formData.pobox.value"
                     :status="formData.pobox.error ? 'error' : ''"
                     :i18n="i18n"
-                    @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
 
@@ -182,7 +176,6 @@
                         v-model="formData.zip.value"
                         :status="formData.zip.error ? 'error' : ''"
                         :i18n="i18n"
-                        @validate="onValidate"
                     />
                     <!-- end cmd-form-element -->
 
@@ -198,7 +191,6 @@
                         v-model="formData.city.value"
                         :status="formData.city.error ? 'error' : ''"
                         :i18n="i18n"
-                        @validate="onValidate"
                     />
                     <!-- end cmd-form-element -->
                 </div>
@@ -215,7 +207,6 @@
                     v-model="formData.additionalAddressInfo.value"
                     :status="formData.additionalAddressInfo.error ? 'error' : ''"
                     :i18n="i18n"
-                    @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
             </div>
@@ -233,7 +224,7 @@
                 v-model="formData.userMessage.value"
                 :status="formData.userMessage.error ? 'error' : ''"
                 :i18n="i18n"
-                @validate="onValidate"
+                :showStatusIcon="false"
             />
             <!-- end cmd-form-element -->
 
@@ -252,12 +243,14 @@
                 v-model="formData.acceptPrivacy.value"
                 :status="formData.acceptPrivacy.error ? 'error' : ''"
                 :i18n="i18n"
-                @validate="onValidate">
+                >
                 <template v-slot:labeltext>
                     <span ref="dataPrivacy" v-html="getMessage('basic_form.labeltext.data_privacy')"></span>
                 </template>
             </CmdFormElement>
             <!-- end cmd-form-element -->
+
+            <button class="button" type="button" @click="onSuccess">On Success</button>
         </CmdForm>
         <!-- end CmdForm -->
     </div>
@@ -284,6 +277,7 @@ export default {
     },
     data() {
         return {
+            sendSuccessfully: false,
             validator: new ContactFormValidator(label => label),
             formData: {
                 salutation: {value: this.configuration.salutation.default},
@@ -481,9 +475,35 @@ export default {
         }
     },
     methods: {
+        onSuccess() {
+            this.sendSuccessfully = true
+            try {
+                // reset global validation-status
+                this.formData.error = false
+
+                for (let key in this.formData) {
+                    // reset field-validation-status
+                    if(this.formData[key].error) {
+                        this.formData[key].error = false
+                    }
+
+                    // reset field-values
+                    if(typeof this.formData[key].value === "string") {
+                        if(key === "salutation") {
+                            this.formData[key].value = this.configuration.salutation.default
+                        } else {
+                            this.formData[key].value = ""
+                        }
+                    } else if(key === "acceptPrivacy") {
+                        this.formData[key].value = false
+                    }
+                }
+            } catch (error) {
+                console.error(error)
+            }
+        },
         onSubmit(event) {
             this.onValidate()
-
             this.formData = Object.assign({}, this.validator.validatePrivacy(this.formData));
 
             if (this.formData.error || this.useNativeSubmit) {
@@ -497,11 +517,8 @@ export default {
             // prevent original levent form CmdForm (to avoid submit and reload)
             event.originalEvent.preventDefault()
 
-            console.log("recaptcha available", window.grecaptcha)
             if(this.reCaptchaWebsiteKey && window.grecaptcha) {
-                console.log("recaptcha")
                 grecaptcha.ready(() => {
-                    console.log("recaptcha ready")
                     grecaptcha.execute(this.reCaptchaWebsiteKey, {action: "submit"}).then(token => this.submitForm(token)).catch(error => console.log("recaptcha error", error))
                 })
             } else {
@@ -509,7 +526,6 @@ export default {
             }
         },
         submitForm(token) {
-            console.log("submitForm", token);
             // custom submit of form-data
             const customSubmitFormData = new FormData()
 
@@ -527,17 +543,34 @@ export default {
 
             fetch(this.formAction, {method: this.cmdForm?.formMethod || "POST", body: customSubmitFormData}).then((response) => {
                 if(response.ok) {
+                    this.sendSuccessfully = true
                     this.$refs.form.showMessage("success", this.getMessage("basic_form.system_message.success.message_sent_successfully"))
-                    for (let key in this.formData) {
-                        if(key === "salutation") {
-                            this.formData[key].value = this.configuration.salutation.default
-                        } else if(key === "acceptPrivacy") {
-                            this.formData[key].value = false
-                        } else {
-                            this.formData[key].value = ""
+                    try {
+                        // reset global validation-status
+                        this.formData.error = false
+
+                        for (let key in this.formData) {
+                            // reset field-validation-status
+                            if(this.formData[key].error) {
+                                this.formData[key].error = false
+                            }
+
+                            // reset field-values
+                            if(typeof this.formData[key].value === "string") {
+                                if(key === "salutation") {
+                                    this.formData[key].value = this.configuration.salutation.default
+                                } else {
+                                    this.formData[key].value = ""
+                                }
+                            } else if(key === "acceptPrivacy") {
+                                this.formData[key].value = false
+                            }
                         }
+                    } catch (error) {
+                        console.error(error)
                     }
                 } else {
+                    this.sendSuccessfully = false
                     this.$refs.form.showMessage("error", this.getMessage("basic_form.system_message.error.message_could_not_be_sent"))
                 }
             }).catch((error) => {

package/src/components/CmdForm.vue

@@ -7,7 +7,7 @@
                         legend.text
                     }}
                 </legend>
-                <CmdSystemMessage v-if="systemMessage.show && systemMessage.message" :validationStatus="systemMessage.validationStatus" :system-message="systemMessage.message"/>
+                <CmdSystemMessage v-if="systemMessage.show && systemMessage.message" :validationStatus="systemMessage.validationStatus" :systemMessage="systemMessage.message"/>
                 <!-- begin default-slot-content -->
                 <slot v-if="useSlot"></slot>
                 <!-- end default-slot-content -->
@@ -257,6 +257,20 @@ export default {
         }
     }
 
+    /* must be refactored */
+    &.send-success {
+        fieldset {
+            :is(label, .label):is(.error, .success):has(:user-invalid) :is(.label-text :is(span, a[class*="icon-"], a:has([class*="icon-"])), .place-inside[class*="icon-"], input, select, textarea) {
+                --status-color: var(--default-text-color) !important;
+                border-color: var(--default-border-color) !important;
+            }
+
+            sup {
+                --status-color: var(--primary-color) !important;
+            }
+        }
+    }
+
     legend.align-left {
         left: 0;
         right: auto;

package/src/utils/ContactFormValidation.js

@@ -11,12 +11,16 @@ class ContactFormValidator {
     }
 
     validate(formData) {
-        [formData.lastName.error, formData.lastName.errorMessage] = this.validateRequired(
-            formData.lastName.value, ContactFormValidator.PATTERN_SURNAME, this.label('form_error_invalid_surname'))
-            [formData.email.error, formData.email.errorMessage] = this.validateRequired(
-            formData.email.value, ContactFormValidator.PATTERN_EMAIL, this.label('form_error_invalid_email'))
-            [formData.userMessage.error, formData.userMessage.errorMessage] = this.validateRequired(
-            formData.userMessage.value, ContactFormValidator.PATTERN_MESSAGE, this.label('form_error_invalid_message'))
+        const lastNameValidationResult = this.validateRequired(formData.lastName.value, ContactFormValidator.PATTERN_SURNAME, this.label('form_error_invalid_surname'))
+        const emailValidationResult = this.validateRequired(formData.email.value, ContactFormValidator.PATTERN_EMAIL, this.label('form_error_invalid_email'))
+        const userMessageValidationResult = this.validateRequired(formData.userMessage.value, ContactFormValidator.PATTERN_MESSAGE, this.label('form_error_invalid_message'))
+        formData.lastName.error = lastNameValidationResult[0]
+        formData.lastName.errorMessage = lastNameValidationResult[1]
+        formData.email.error = emailValidationResult[0]
+        formData.email.errorMessage = emailValidationResult[1]
+        formData.userMessage.error = userMessageValidationResult[0]
+        formData.userMessage.errorMessage = userMessageValidationResult[1]
+        console.log("validate", formData.email)
         formData.acceptPrivacy.error = false
         formData.error = formData.lastName.error
             || formData.email.error