From ca0ebd6816644bb22be2fd91dd91598ad3fcb4ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?= Date: Sat, 1 Nov 2025 21:58:55 +0100 Subject: [PATCH] redactor --- static/js/edit.js | 10 + static/js/index.js | 106 +++++ static/js/logs.js | 1 + static/js/stats.js | 1 + templates/base.html | 52 ++- templates/edit.html | 77 ++-- templates/home.html | 75 +++- templates/index.html | 875 +++++++++----------------------------- templates/logs.html | 104 ++--- templates/statistics.html | 186 ++++---- 10 files changed, 565 insertions(+), 922 deletions(-) create mode 100644 static/js/edit.js create mode 100644 static/js/index.js create mode 100644 static/js/logs.js create mode 100644 static/js/stats.js diff --git a/static/js/edit.js b/static/js/edit.js new file mode 100644 index 0000000..7f3ee80 --- /dev/null +++ b/static/js/edit.js @@ -0,0 +1,10 @@ +// edit.js — drobne UX dla edytora +(() => { + 'use strict'; + const ta = document.getElementById('haproxy_config'); + if (!ta) return; + // Auto-grow (simple) + const auto = () => { ta.style.height = 'auto'; ta.style.height = (ta.scrollHeight + 6) + 'px'; }; + ta.addEventListener('input', auto); + auto(); +})(); diff --git a/static/js/index.js b/static/js/index.js new file mode 100644 index 0000000..5b6d09a --- /dev/null +++ b/static/js/index.js @@ -0,0 +1,106 @@ +// index.js — logika formularza FE/BE (bez jQuery) +(() => { + 'use strict'; + + const $ = (sel, root=document) => root.querySelector(sel); + const $$ = (sel, root=document) => Array.from(root.querySelectorAll(sel)); + + // SSL fields + const sslCheckbox = $('#ssl_checkbox'); + const sslFields = $('#ssl_fields'); + + const toggle = (on, el) => el.classList.toggle('d-none', !on); + + sslCheckbox?.addEventListener('change', () => toggle(sslCheckbox.checked, sslFields)); + + // DOS + const dosCheckbox = $('#add_dos'); + const dosFields = $('#dos_fields'); + dosCheckbox?.addEventListener('change', () => toggle(dosCheckbox.checked, dosFields)); + + // HTTP only groups + const protocolSelect = $('#protocol'); + const httpGroups = $$('.http-only, #forbidden_acl_container'); + const httpToggles = [ + $('#sql_injection_check'), + $('#xss_check'), + $('#remote_uploads_check'), + $('#webshells_check'), + $('#forward_for_check'), + $('#add_acl_path'), + $('#add_path_based'), + ]; + const forbiddenFields = $('#forbidden_fields'); + const pathFields = $('#base_redirect_fields'); + + const onProtocolChange = () => { + const isHttp = protocolSelect?.value === 'http'; + httpGroups.forEach(el => toggle(isHttp, el)); + if (!isHttp) { + // hide optional groups if protocol != http + [forbiddenFields, pathFields].forEach(el => el && toggle(false, el)); + httpToggles.forEach(input => { if (input) input.checked = false; }); + } + }; + protocolSelect?.addEventListener('change', onProtocolChange); + onProtocolChange(); + + // ACL + const aclCheckbox = $('#add_acl'); + const aclFields = $('#acl_fields'); + aclCheckbox?.addEventListener('change', () => toggle(aclCheckbox.checked, aclFields)); + + // toggles that reveal their fields + const bindToggle = (checkboxSel, targetSel) => { + const cb = $(checkboxSel); + const target = $(targetSel); + cb?.addEventListener('change', () => toggle(cb.checked, target)); + // initial + if (cb && target) toggle(cb.checked, target); + }; + bindToggle('#add_path_based', '#base_redirect_fields'); + bindToggle('#add_acl_path', '#forbidden_fields'); + + // Backend rows + let serverCount = 1; + const container = $('#backend_servers_container'); + const addBtn = $('#add_backend_btn'); + + const createRow = () => { + serverCount++; + const row = document.createElement('div'); + row.className = 'row g-3 backend-server-row mt-1'; + row.innerHTML = ` +
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+
`; + row.querySelector('button.btn-danger')?.addEventListener('click', () => { + const rows = $$('.backend-server-row'); + if (rows.length > 1) row.remove(); + else alert('Musi istnieć co najmniej jeden backend.'); + }); + return row; + }; + addBtn?.addEventListener('click', () => container?.appendChild(createRow())); + + // auto dismiss alerts + setTimeout(() => $$('.alert').forEach(a => { + if (typeof bootstrap !== 'undefined') new bootstrap.Alert(a).close(); + }), 5000); +})(); diff --git a/static/js/logs.js b/static/js/logs.js new file mode 100644 index 0000000..9a38d73 --- /dev/null +++ b/static/js/logs.js @@ -0,0 +1 @@ +// logs.js — na razie brak dodatkowej logiki (przykładowe miejsce na filtrowanie) diff --git a/static/js/stats.js b/static/js/stats.js new file mode 100644 index 0000000..ee18029 --- /dev/null +++ b/static/js/stats.js @@ -0,0 +1 @@ +// stats.js — (miejsce na przyszłe wykresy) diff --git a/templates/base.html b/templates/base.html index 507845d..3590081 100644 --- a/templates/base.html +++ b/templates/base.html @@ -16,18 +16,44 @@ - -
- {% with messages = get_flashed_messages() %}{% if messages %}
{% endif %}{% endwith %} - - {% block breadcrumb %}{% endblock %} -
- {% block content %}{% endblock %} - -
+
+
+ + +
+
- - - {% block scripts %}{% endblock %} - +
+ {% with messages = get_flashed_messages() %}{% if messages %}
{% endif %}{% endwith %} + {% block breadcrumb %}{% endblock %} +
+ {% block content %}{% endblock %} +
+ + + + + +{% block scripts %}{% endblock %} +{% block page_js %}{% endblock %} + diff --git a/templates/edit.html b/templates/edit.html index 03df921..c4d649e 100644 --- a/templates/edit.html +++ b/templates/edit.html @@ -1,52 +1,39 @@ {% extends "base.html" %} {% set active_page = "" %} {% block title %}HAProxy • Edit{% endblock %} -{% block head %} -{% endblock %} {% block breadcrumb %}{% endblock %} {% block content %} - - -
-

Edit HAProxy Config

-
-
- - -
-
- - -
-
- {% if check_output %} -
- {% if 'Fatal errors' in check_output %} - - {% elif 'Warnings' in check_output %} - - {% elif 'error detected while parsing an' in check_output %} - - {% else %} - - {% endif %} -
+
+
+

Edytuj konfigurację HAProxy

+
+
+ + +
+
+ + +
+
+ {% if check_output %} +
+ {% if 'Fatal errors' in check_output or 'error detected while parsing an' in check_output %} + + {% elif 'Warnings' in check_output %} + + {% else %} + + {% endif %} +
{% endif %} - - - - -
-

© 2025 HAProxy Configurator. All rights reserved.

-
+
+
+{% endblock %} +{% block page_js %} + {% endblock %} -{% block scripts %} -{% endblock %} \ No newline at end of file diff --git a/templates/home.html b/templates/home.html index 92e093e..21ff565 100644 --- a/templates/home.html +++ b/templates/home.html @@ -1,30 +1,61 @@ {% extends "base.html" %} {% set active_page = "home" %} {% block title %}HAProxy • Home{% endblock %} -{% block head %} -{% endblock %} {% block breadcrumb %}{% endblock %} {% block content %} - -
-

Welcome to Your HAProxy Configurator. Here's A Short Summary:

- -

{{ frontend_count }} frontends

-

{{ backend_count }} backends

-

{{ acl_count }} acl's

-

{{ layer7_count }} layer7(mode http) loadbalanced frontends

-

{{ layer4_count }} layer4(mode tcp)loadbalanced frontends

-
- Add New Frontend/Backend +
+
+

Witaj! Szybkie podsumowanie

+
+
+
+
+
+
Frontends
+
{{ frontend_count }}
+
+
+
+
+
+
+
Backends
+
{{ backend_count }}
+
+
+
+
+
+
+
+
ACL
+
{{ acl_count }}
+
+
+
+
+
+
+
+
L7 (HTTP)
+
{{ layer7_count }}
+
+
+
+
+
+
+
+
L4 (TCP)
+
{{ layer4_count }}
+
+
+
- - - - -
-

© 2025 HAProxy Configurator. All rights reserved.

-
+
+ Dodaj Frontend/Backend +
+
+
{% endblock %} -{% block scripts %} -{% endblock %} \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index cdc01a9..a1f6487 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,701 +1,220 @@ {% extends "base.html" %} {% set active_page = "index" %} {% block title %}HAProxy • Index{% endblock %} -{% block head %} -{% endblock %} {% block breadcrumb %}{% endblock %} {% block content %} +
+
+
+
Nowy frontend
+ {% if message %} + + {% endif %} -
-
-
- - {% if message %} -