implement custom conf on simple mode

src/ui/static/js/services.js

@@ -30,6 +30,8 @@ class ServiceModal {
     this.submitBtn = document.querySelector(
       "button[data-services-modal-submit]",
     );
+    this.darkMode = document.querySelector("[data-dark-toggle]");
+    this.isDarkMode = this.darkMode.checked;
     // simple el
     this.simpleForm = this.modal.querySelector(
       "[data-simple][data-services-modal-form]",
@@ -46,6 +48,9 @@ class ServiceModal {
     this.submitBtns = this.modal.querySelectorAll(
       "button[data-services-modal-submit]",
     );
+    // add editor for configs in simple mode
+    this.simpleEditorEls = [];
+    this.initSimpleEditors();
     //container
     this.container = document.querySelector("main");
     this.currAction = "";
@@ -92,6 +97,11 @@ class ServiceModal {
       });
     });
 
+    this.darkMode.addEventListener("click", (e) => {
+      this.isDarkMode = e.target.checked;
+      this.updateEditorMode();
+    });
+
     this.modal.addEventListener("click", (e) => {
       // update draft mode
       try {
@@ -278,6 +288,55 @@ class ServiceModal {
     this.updateSecuLevel();
   }
 
+  initSimpleEditors() {
+    const simpleEditors = this.modal.querySelectorAll("[data-simple-editor]");
+    simpleEditors.forEach((editorEl) => {
+      const editor = ace.edit(editorEl.getAttribute("id"));
+      // Handle
+      if (this.isDarkMode) {
+        editor.setTheme("ace/theme/dracula");
+      } else {
+        editor.setTheme("ace/theme/dawn");
+      }
+      //editor options
+      editor.setShowPrintMargin(false);
+      this.simpleEditorEls.push(editor);
+    });
+
+    this.updateSecuLevelEditorContent();
+  }
+
+  updateEditorMode() {
+    this.simpleEditorEls.forEach((editor) => {
+      if (this.isDarkMode) {
+        editor.setTheme("ace/theme/dracula");
+      } else {
+        editor.setTheme("ace/theme/dawn");
+      }
+    });
+  }
+
+  updateSecuLevelEditorContent() {
+    const secuLevelValue = this.simpleForm
+      .querySelector('[data-setting-select-text="security-level"]')
+      .textContent.toLowerCase()
+      .trim();
+
+    this.simpleEditorEls.forEach((editorEl) => {
+      const editorContent = this.modal
+        .querySelector(
+          `textarea#${editorEl.container
+            .getAttribute("id")
+            .replace(
+              "-editor",
+              "-content",
+            )}[data-simple-default-editor-content]`,
+        )
+        .getAttribute(`data-content-${secuLevelValue}`);
+      editorEl.setValue(editorContent);
+    });
+  }
+
   updateSecuLevel() {
     // Add timeout to let dropdown update attribute values
     // This avoid using previous value
@@ -287,11 +346,15 @@ class ServiceModal {
         .textContent.toLowerCase()
         .trim();
 
+      // Update settings by security level
       this.setSettingsByAtt(
         this.simpleForm,
         "data-default-method",
         `data-security-level-${secuLevelValue}`,
       );
+
+      // Update configs
+      this.updateSecuLevelEditorContent();
     }, 30);
   }
 

src/ui/templates/services_modal_settings_simple.html

@@ -1,25 +1,23 @@
+{% set security_levels = ['standard', 'advanced', 'high'] %}
 {% set steps = [
 {
     "name" : "STEP 1 - STARTING UP",
     "description" : "we  need some information to get started.",
     "settings" : [
                     {"plugin_id" : "general", "setting_id": "SERVER_NAME", "title" : "DEFINE HOST", "subtitle" : "We need this to connect BunkerWeb to your application. You need to set your domain name.", "levels" : {} },
-                    {"plugin_id" : "security-level", "setting_id": "SECURITY_LEVEL", "title" : "DEFINE SECURITY LEVEL", "subtitle" : "This will determine default settings value for the next steps. You'll be allow to modify settings to match your case if needed.", "levels" : {}, "setting" : {'context': 'global', 'default': 'standard', 'help': 'Determine the default settings value. You can override them.', 'id': 'security-level', 'label': 'Security level', 'regex': '^(standard|advanced|bunker)$', 'type': 'select', 'select': ['standard', 'elevated', 'lockdown']} }
+                    {"plugin_id" : "security-level", "setting_id": "SECURITY_LEVEL", "title" : "DEFINE SECURITY LEVEL", "subtitle" : "This will determine default settings value for the next steps. You'll be allow to modify settings to match your case if needed.", "levels" : {}, "setting" : {'context': 'global', 'default': 'standard', 'help': 'Determine the default settings value. You can override them.', 'id': 'security-level', 'label': 'Security level', 'regex': '^(security_levels[0]|security_levels[1]|security_levels[2])$', 'type': 'select', 'select': [security_levels[0], security_levels[1], security_levels[2]]} }
                     ],
-    "configs": [
-        {"name": "my_config_1", "type": "modsec", "data": "..."},
-        {"name": "my_config_2", "type": "server-http", "data": "..."}
-    ]
+                    "configs": []
 },
 {
     "name" : "STEP 2 - ANTIBOT",
     "description" : "Avoid spammer and bot to access your website.",
     "settings" : [
-                  {"plugin_id" : "antibot", "setting_id": "USE_ANTIBOT", "title" : "Define the type of your antibot", "subtitle" : "Javascript, Captcha or Cookie don't need additionnal settings to be fill. Recaptcha, Hcaptcha and Turnstile need secret key and site key delivered from providers.",  "levels" : {"standard" : "no", "elevated" : "javascript", "lockdown" : "javascript"} },
+                  {"plugin_id" : "antibot", "setting_id": "USE_ANTIBOT", "title" : "Define the type of your antibot", "subtitle" : "Javascript, Captcha or Cookie don't need additionnal settings to be fill. Recaptcha, Hcaptcha and Turnstile need secret key and site key delivered from providers.",  "levels" : {security_levels[0] : "no", security_levels[1] : "javascript", security_levels[2] : "javascript"} },
                  ],
     "configs": [
-        {"name": "my_config_1", "type": "modsec", "data": "..."},
-        {"name": "my_config_2", "type": "server-http", "data": "..."}
+        {"name": "my_config_1", "type": "modsec", "subtitle" : "This will determine the modsecurity rules to apply to this service.", "levels" : {security_levels[0] : "no", security_levels[1] : "javascript", security_levels[2] : "javascript"} },
+        {"name": "my_config_2", "type": "server-http", "subtitle" : "This will determine the server http...", "levels" : {security_levels[0] : "no", security_levels[1] : "javascript", security_levels[2] : "javascript"} }
     ]
 },
 ]
@@ -58,8 +56,8 @@
             <hr class="separator" />
         </div>
             {% set plugin_simple = step.get('settings') %}
+            {% set configs = step.get('configs') %}
             {% include "settings_simple.html" %}
-
         </div>
     {% endfor %}
 

src/ui/templates/settings_simple.html

@@ -73,5 +73,27 @@
         {% endif %}
         </div>
 {% endfor %}
-<!-- end plugin item -->
+
+<!-- custom configs -->
+{% for config in configs %}
+<div data-simple id="{{ config['type'] }}-simple"
+     class="w-full h-full px-1 mb-2 col-span-12 grid grid-cols-12 h-full items-end">
+    <!-- title and desc -->
+    <div class="col-span-12" data-setting-header>
+        <div class="flex flex-col justify-start items-start">
+            <h5 class="sm:pl-3 sm:pr-2 mt-2 transition duration-300 ease-in-out font-bold text-base uppercase dark:text-white/90 mb-0">
+                Custom config for {{ config['type'] }}
+            </h5>
+            <p class="max-w-[550px] sm:pl-3 sm:pr-2 text-sm dark:text-gray-300 mb-0">{{ config['subtitle'] }}</p>
+        </div>
+    </div>
+    <div class="w-full col-span-12 px-4">
+        <textarea {% for level_name, value in config['levels'].items() %} data-content-{{level_name}}="{{ value}}" {% endfor %} data-simple-default-editor-content class="hidden" id="{{config['name']}}-content" name="{{config['name']}}-content"></textarea>
+        <!-- editor-->
+        <div data-simple-editor id="{{config['name']}}-editor" class="text-base w-full h-50 overflow-hidden overflow-y-auto my-2 border border-gray-300 dark:border-slate-800">
+        </div>
+        <!-- editor-->
+    </div>
+</div>
+{% endfor %}
 </div>