update readonly UI

* disabled delete button of service when in readonly
* disable delete button of config when in readonly
* flash warning message "Database connection is in read-only mode : no modification are possible."
* fix button on configs not aligned
* show plugin upload but in disabled state
* allow download job files

src/ui/main.py

@@ -416,6 +416,9 @@ def set_csp_header(response):
         + " connect-src *;"
         + " base-uri 'self';"
     )
+    if app.config["DB"].readonly:
+        flash("Database connection is in read-only mode : no modification possible.", "error")
+
     return response
 
 

src/ui/templates/file_manager.html

@@ -177,7 +177,7 @@
                                 {% else %}
                                     <button role="tab"  value="download" data-{{ current_endpoint }}-action-dropdown-btn="{{ child['name'] }}" class="duration-300 border-gray-300 hover:brightness-90 bg-white text-white my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 w-full border-b border-l border-r hover:bg-gray-100">
                                         <span class="flex justify-start items-center">
-                                            <svg class="h-6 w-6 stroke-sky-500"
+                                            <svg class="h-5.5 w-5.5 stroke-sky-500"
                                                  xmlns="http://www.w3.org/2000/svg"
                                                  fill="none"
                                                  viewBox="0 0 24 24"

src/ui/templates/jobs.html

@@ -147,7 +147,7 @@
                                    <div class="{{ data['custom_class'] }} relative dark:text-gray-400 text-sm m-0 my-1 mr-1"
                                         data-{{attribute_name}}-files>
                                        {% if value['cache'] %}
-                                           <button {% if is_readonly%}disabled{% endif %} data-{{attribute_name}}-setting-select="{{ job_name }}"
+                                           <button  data-{{attribute_name}}-setting-select="{{ job_name }}"
                                                    class="py-1 text-sm disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-green-500 flex justify-between align-middle items-center text-left leading-6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 md:px-3 font-normal text-gray-700 transition-all placeholder:text-gray-500">
                                                <span id="jobs-{{ job_name }}"
                                                      data-name="jobs-{{ job_name }}"

src/ui/templates/plugins.html

@@ -13,24 +13,23 @@
         ] %}
     {% include "card_info.html" %}
 
-    {% if not is_readonly %}
     <!-- upload layout -->
     <div data-{{attribute_name}}-upload
          class="p-4 col-span-12 md:col-span-7 2xl:col-span-4 grid grid-cols-12 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
         <h5 class="col-span-12 mb-4 font-bold dark:text-gray-100">UPLOAD / RELOAD</h5>
         <div class="mx-2 p-0 col-span-12 grid grid-cols-12">
             <!-- dropzone -->
-            <form id="dropzone-form"
+            <form  id="dropzone-form"
                   action="#"
-                  class="hover:bg-gray-100 dark:hover:bg-slate-700/50 cursor-pointer col-span-12 border-2 rounded-lg p-2 border-dashed border-primary dark:brightness-125 drop-zone">
+                  class="{% if is_readonly %} cursor-not-allowed {% else %} cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700/50 {% endif %}    col-span-12 border-2 rounded-lg p-2 border-dashed border-primary dark:brightness-125 drop-zone">
                 <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                <input class="file-input drop-zone__input"
+                <input {% if is_readonly%}disabled{% endif %} class="file-input drop-zone__input"
                        type="file"
                        name="file"
                        multiple="multiple"
                        hidden />
                 <i class="fa-solid fa-cloud-upload-alt"></i>
-                <p class="dark:text-gray-500 text-sm text-center my-3">click or drag and drop</p>
+                <p class="dark:text-gray-500 text-sm text-center my-3">{% if is_readonly%}upload not available{% else %}click or drag and drop{% endif %}</p>
             </form>
             <div class="col-span-12 progress-area"></div>
             <div class="col-span-12 uploaded-area"></div>
@@ -50,7 +49,6 @@
         </div>
     </div>
     <!-- end upload layout -->
-    {% endif %}
 
     <!-- filter -->
     {% set filters = [

src/ui/templates/services.html

@@ -284,7 +284,7 @@
                         {% endif %}
                         {% for button in action_buttons %}
                             <button
-                             {% if button['name'] == "clone" and is_readonly%}disabled{% endif %}
+                             {% if button['name'] == "clone" and is_readonly or button['name'] == "delete" and is_readonly%}disabled{% endif %}
                             {% if button['name'] == "clone" or button['name'] == "edit"%}
                             data-settings="{{ service['settings'] }}"