add advanced mode validity check

vuejs/client/input.css

@@ -914,7 +914,7 @@ body {
 /* CONTENT COMPONENT */
 
 .text-content {
-  @apply leading-normal mb-0 lowercase;
+  @apply leading-normal mb-0 ;
 }
 
 /* CONTENT DETAIL LSIT COMPONENT */
@@ -1027,6 +1027,8 @@ body {
   @apply pt-4 relative w-full flex flex-col items-center xs:flex-row justify-center xs:justify-end flex-wrap;
 }
 
+/* BTN */
+
 .btn {
   @apply tracking-wide dark:brightness-90 inline-block  font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer  leading-normal ease-in shadow-xs hover:-translate-y-px active:opacity-85 hover:shadow-md disabled:cursor-not-allowed dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400/0 dark:disabled:bg-gray-700 dark:disabled:border-gray-700/0 disabled:hover:translate-y-0 disabled:hover:bg-gray-400 disabled:hover:border-gray-400/0 dark:disabled:hover:translate-y-0 dark:disabled:hover:bg-gray-700 dark:disabled:hover:border-gray-700/0;
 }
@@ -1086,6 +1088,13 @@ body {
 .btn-svg {
   @apply w-6.5 h-6.5;
 }
+
+/* SETTINGS */
+
+.setting-error {
+  @apply font-bold error text-center mt-2 text-red-500;
+}
+
 /* FILE MANAGER */
 
 .file-manager-breadcrumb {

vuejs/client/src/components/Form/Advanced.vue

@@ -8,6 +8,7 @@ import Combobox from "@components/Forms/Field/Combobox.vue";
 import Input from "@components/Forms/Field/Input.vue";
 import Select from "@components/Forms/Field/Select.vue";
 import Button from "@components/Widget/Button.vue";
+import Text from "@components/Widget/Text.vue";
 import { v4 as uuidv4 } from "uuid";
 import { plugin_types } from "@utils/variables";
 import { useFilter } from "@utils/form.js";
@@ -71,7 +72,40 @@ const data = reactive({
   type: "all",
   context: "all",
   base: JSON.parse(JSON.stringify(props.template)),
-  filtered: computed(() => {
+  isRegErr: false,
+  isReqErr: false,
+  settingErr: "",
+  pluginErr: "",
+  // Add filtering and check validity with regex and required
+  format: computed(() => {
+    // Deep copy
+    const template = JSON.parse(JSON.stringify(data.base));
+
+    // Check validity
+    data.isReqErr = false;
+    data.isRegErr = false;
+
+    template.forEach((plugin) => {
+      for (const [key, value] of Object.entries(plugin.settings)) {
+        if (value.required && !value.value) {
+          data.isReqErr = true;
+          data.settingErr = key;
+          data.pluginErr = plugin.name;
+          break;
+        }
+        if (value.pattern && value.value) {
+          const regex = new RegExp(value.pattern);
+          if (!regex.test(value.value)) {
+            data.isRegErr = true;
+            data.settingErr = key;
+            data.pluginErr = plugin.name;
+            break;
+          }
+        }
+      }
+    });
+
+    // Add filter logic
     const filterPlugin = [
       {
         type: "select",
@@ -101,8 +135,6 @@ const data = reactive({
       },
     ];
 
-    // Deep copy
-    const template = JSON.parse(JSON.stringify(data.base));
     // Start plugin filtering
     const filterPlugins = useFilter(template, filterPlugin);
     // Filter settings
@@ -224,7 +256,6 @@ const selectContext = {
 const buttonSave = {
   id: uuidv4(),
   text: "action_save",
-  disabled: false,
   color: "success",
   size: "normal",
   type: "bouton",
@@ -313,7 +344,7 @@ onUnmounted(() => {
       <Select @inp="(v) => (data.type = v)" v-bind="selectType" />
       <Select @inp="(v) => (data.context = v)" v-bind="selectContext" />
     </Container>
-    <template v-for="plugin in data.filtered">
+    <template v-for="plugin in data.format">
       <Container
         data-advanced-form-plugin
         v-if="plugin.name === data.currPlugin"
@@ -332,6 +363,24 @@ onUnmounted(() => {
         </Container>
       </Container>
     </template>
-    <Button v-bind="buttonSave" />
+    <Button
+      v-bind="buttonSave"
+      :disabled="data.isReqErr || data.isRegErr ? true : false"
+    />
+    <Text
+      v-if="data.isRegErr || data.isReqErr"
+      :textClass="'setting-error'"
+      :text="
+        data.isReqErr
+          ? $t('inp_plugin_setting_required', {
+              plugin: data.pluginErr,
+              setting: data.settingErr,
+            })
+          : $t('inp_plugin_setting_invalid', {
+              plugin: data.pluginErr,
+              setting: data.settingErr,
+            })
+      "
+    />
   </Container>
 </template>

vuejs/client/src/components/Form/Raw.vue

@@ -149,10 +149,11 @@ const buttonSave = {
       <Editor @inp="(v) => (data.inp = v)" v-bind="editorData" />
     </Container>
     <Button :disabled="data.isValid ? false : true" v-bind="buttonSave" />
+
     <Text
       v-if="!data.isValid"
       :text="'dashboard_raw_invalid'"
-      :textClass="'text-center error'"
+      :textClass="'setting-error'"
     />
   </Container>
 </template>

vuejs/client/src/lang/en.json

@@ -84,7 +84,7 @@
   "dashboard_status_info": "status loading or waiting or unknown.",
   "dashboard_raw_mode": "raw mode",
   "dashboard_raw_mode_subtitle": "Raw mode shows settings as raw key-value pairs of settings.",
-  "dashboard_raw_invalid": "Invalid raw format. Impossible to save.",
+  "dashboard_raw_invalid": "Invalid raw format.",
   "dashboard_advanced_mode": "Advanced mode",
   "dashboard_advanced_mode_subtitle": "Advanced mode show settings by plugin in dedicated fields.",
   "dashboard_easy_mode" : "Easy mode",
@@ -113,6 +113,8 @@
   "inp_editor_desc" : "Editor input behaving like a code editor.",
   "inp_input_clipboard_copied": "copied to clipboard",
   "inp_input_clipboard_desc": "Copy to clipboard on click.",
+  "inp_plugin_setting_invalid": "{plugin} {setting} is invalid",
+  "inp_plugin_setting_required": "{plugin} {setting} is required",
   "action_send": "send {name}",
   "action_start": "start {name}",
   "action_disable": "disable {name}",

vuejs/client/src/pages/global-config/globalConfig.vue

@@ -246,6 +246,7 @@ const data = {
               tablet: 6,
               mobile: 12,
             },
+            required: true,
             disabled: false,
             value: "www.example.com",
             popovers: [
@@ -4515,7 +4516,7 @@ const data = {
               mobile: 12,
             },
             disabled: false,
-            value: "dsfrgrdgrdgrdhgd",
+            value: "yes",
             popovers: [
               {
                 iconColor: "orange",