ui fix + reports page style + doc

*add type="button" on close button inside form to avoid default submit behavior
*remove showInvisible on ace editor
*enhance table reports style
*start updating doc plugins

docs/plugins.md

@@ -260,10 +260,39 @@ The first step is to install the plugin by putting the plugin files inside the c
 
 ## Writing a plugin
 
+### Structure
+
 !!! tip "Existing plugins"
 
     If the documentation is not enough, you can have a look at the existing source code of [official plugins](https://github.com/bunkerity/bunkerweb-plugins) and the [core plugins](https://github.com/bunkerity/bunkerweb/tree/v1.5.6/src/common/core) (already included in BunkerWeb but they are plugins, technically speaking).
 
+What a plugin structure looks like :
+```
+plugin /
+        confs / conf_type.conf
+        ui / actions.py
+             template.html
+        plugin.lua
+        plugin.json
+```
+
+- **conf_type.conf** : add a [custom NGINX configurations.](/quickstart-guide/#custom-configurations)
+
+- **actions.py** : script to execute on flask server.
+This script is running on flask context, you have access to lib and utils like `jinja2`, `requests`, etc...
+
+- **template.html** : custom plugin page you can access from ui.
+
+- **plugin.lua** : code to execute on NGINX using [NGING LUA modile.](https://github.com/openresty/lua-nginx-module)
+
+- **plugin.json** : metadata, settings and jobs for your settings.
+
+!!! info "Optional files"
+
+    Files like `confs` and `ui` ones are optional. Add them only to fit your needs.
+
+### Getting started
+
 The first step is to create a folder that will contain the plugin :
 
 ```shell

src/common/core/antibot/ui/template.html

@@ -1,5 +1,4 @@
-{% extends "base.html" %} {% block content %}
-
+{% extends "base.html" %} {% block content %} {{ plugin }}
 <div class="col-span-12 grid grid-cols-12 gap-4">
   <!-- info-->
   <div

src/ui/src/Instances.py

@@ -358,9 +358,9 @@ class Instances:
         for instance in self.get_instances():
             try:
                 resp, instance_reports = instance.reports()
-            except :
+            except:
                 continue
-            
+
             if not resp:
                 continue
             reports.extend(instance_reports[instance.name if instance.name != "local" else "127.0.0.1"].get("msg", []))

src/ui/static/js/plugins/setup.js

@@ -31,7 +31,7 @@ class SetupPlugin {
         */
     // Hidden elements that will be shown on success, like ping buttons or list rendering
     this.showOnSuccessEls = document.querySelectorAll(
-      "[data-fetch-success-show]"
+      "[data-fetch-success-show]",
     );
 
     this.init();
@@ -76,7 +76,7 @@ class SetupPlugin {
       ],
       "bg-sky-500 p-4 mb-1 md:mb-3 md:mr-3 z-[1001] flex flex-col fixed bottom-0 right-0 w-full md:w-1/2 max-w-[300px] min-h-20 rounded-lg dark:brightness-110 hover:scale-102 transition shadow-md break-words dark:bg-slate-850 dark:shadow-dark-xl bg-clip-border",
       "",
-      ""
+      "",
     );
 
     this.alertCloseEl = this.createEl(
@@ -84,7 +84,7 @@ class SetupPlugin {
       [["data-fetch-close", ""]],
       "absolute right-7 top-1.5",
       "",
-      this.alertEl
+      this.alertEl,
     );
 
     this.alertCloseIconEl = this.createEl(
@@ -95,7 +95,7 @@ class SetupPlugin {
       ],
       "cursor-pointer fill-white dark:fill-gray-300 dark:opacity-80 absolute h-5 w-5",
       "",
-      this.alertCloseEl
+      this.alertCloseEl,
     );
 
     // Close icon paths
@@ -115,7 +115,7 @@ class SetupPlugin {
       [["data-fetch-status", ""]],
       "text-lg mb-0 text-white dark:text-gray-300",
       "Fetching",
-      this.alertEl
+      this.alertEl,
     );
 
     this.alertMsgEl = this.createEl(
@@ -123,7 +123,7 @@ class SetupPlugin {
       [["data-fetch-msg", ""]],
       "text-white dark:text-gray-300 mb-0 text-sm",
       "Please wait...",
-      this.alertEl
+      this.alertEl,
     );
 
     document.body.appendChild(this.alertEl);

src/ui/static/js/utils/file.manager.js

@@ -259,13 +259,7 @@ class FolderDropdown {
 
 class FolderEditor {
   constructor() {
-    this.editor = ace.edit("editor", {
-      backwards: false,
-      wrap: false,
-      caseSensitive: false,
-      wholeWord: false,
-      regExp: false,
-    });
+    this.editor = ace.edit("editor");
     this.darkMode = document.querySelector("[data-dark-toggle]");
     this.initEditor();
     this.listenDarkToggle();
@@ -274,8 +268,6 @@ class FolderEditor {
   initEditor() {
     //editor options
     this.editor.setShowPrintMargin(false);
-    this.editor.session.setUseSoftTabs(true);
-    this.editor.setOption("showInvisibles", true);
     this.setDarkMode();
   }
 

src/ui/templates/file_manager.html

@@ -429,7 +429,7 @@ data-{{current_endpoint}}-modal
       <!-- editor-->
 
       <div class="mt-4 w-full justify-end flex">
-        <button
+        <button type="button"
         data-{{current_endpoint}}-modal-close
 
           class="close-btn text-xs mr-2"

src/ui/templates/plugins_modal.html

@@ -50,7 +50,7 @@
       </div>
       <!-- action button -->
       <div class="w-full justify-center flex mt-10">
-        <button
+        <button type="button"
           data-plugins-modal-close
           class="close-btn mb-4 mr-3 text-base"
         >

src/ui/templates/reports.html

@@ -363,7 +363,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
   <div
   class="col-span-12 overflow-y-auto overflow-x-auto"
   >  <!-- list container-->
-  <div class="min-w-[1200px] w-full grid grid-cols-12 rounded p-2">
+  <div class="min-w-[1300px] w-full grid grid-cols-12 rounded p-2">
     <!-- header-->
     <p
     class="dark:text-gray-300 flex justify-center h-8 text-sm font-bold col-span-1 m-0 pb-2 border-b border-gray-400"
@@ -420,7 +420,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
       >
       <p
 
-        class="flex justify-center dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0 my-1"
+        class="text-center flex justify-center dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0 my-1"
         data-{{current_endpoint}}-date="{{report['date']}}"
       >
         {{report['date']}}