haproxy-dashboard/static/js/form.js

(() => {
    'use strict';

    // Toggle health check fields based on protocol
    const protocolSelect = document.getElementById('protocol');
    const healthCheckFields = document.getElementById('health_check_fields');
    const tcpHealthCheck = document.getElementById('tcp_health_check');
    
    const onProtocolChange = () => {
        if (protocolSelect?.value === 'http') {
            document.getElementById('health_check')?.parentElement.parentElement.style.display = 'block';
            tcpHealthCheck.style.display = 'none';
        } else {
            document.getElementById('health_check')?.parentElement.parentElement.style.display = 'none';
            tcpHealthCheck.style.display = 'flex';
        }
    };
    
    protocolSelect?.addEventListener('change', onProtocolChange);
    
    // Toggle sticky session fields
    const stickyCheckbox = document.getElementById('sticky_session');
    const stickyFields = document.getElementById('sticky_fields');
    
    stickyCheckbox?.addEventListener('change', function() {
        stickyFields.classList.toggle('d-none', !this.checked);
    });
    
    // Toggle health check link field
    const healthCheckbox = document.getElementById('health_check');
    healthCheckbox?.addEventListener('change', function() {
        document.getElementById('health_check_fields')?.classList.toggle('d-none', !this.checked);
    });
    
    // Toggle header fields
    const headerCheckbox = document.getElementById('add_header');
    const headerFields = document.querySelectorAll('#header_fields');
    
    headerCheckbox?.addEventListener('change', function() {
        headerFields.forEach(field => field.classList.toggle('d-none', !this.checked));
    });

    // Helper functions
    const $ = (sel, root = document) => root.querySelector(sel);
    const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));
    const toggle = (on, el) => el.classList.toggle('d-none', !on);

    // SSL fields
    const sslCheckbox = $('#ssl_checkbox');
    const sslFields = $('#ssl_fields');
    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 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 onProtocolChangeExtended = () => {
        const isHttp = protocolSelect?.value === 'http';
        httpGroups.forEach(el => toggle(isHttp, el));

        if (!isHttp) {
            [forbiddenFields, pathFields].forEach(el => el && toggle(false, el));
            httpToggles.forEach(input => {
                if (input) input.checked = false;
            });
        }
    };

    protocolSelect?.addEventListener('change', onProtocolChangeExtended);
    onProtocolChangeExtended();

    // 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));
        if (cb && target) toggle(cb.checked, target);
    };

    bindToggle('#add_path_based', '#base_redirect_fields');
    bindToggle('#add_acl_path', '#forbidden_fields');

    // LB Method - obsługa trybu no-lb
    const lbMethodSelect = $('#lb_method');
    const backendServersContainer = $('#backend_servers_container');
    const addServerBtn = $('#add_backend_btn');

    const onLbMethodChange = () => {
        const isNoLb = lbMethodSelect?.value === 'no-lb';

        if (isNoLb) {
            // Ukryj przycisk dodawania kolejnych serwerów
            if (addServerBtn) addServerBtn.classList.add('d-none');

            // Zostaw tylko pierwszy serwer i usuń pozostałe
            const serverRows = $$('.backend-server-row', backendServersContainer);
            serverRows.forEach((row, idx) => {
                if (idx > 0) row.remove();
            });

            // Dodaj informację o trybie no-lb jeśli jeszcze nie istnieje
            if (!$('.no-lb-info')) {
                const info = document.createElement('div');
                info.className = 'alert alert-info alert-sm no-lb-info mt-2';
                info.innerHTML = '<i class="bi bi-info-circle me-2"></i><small>Tryb <strong>no-lb</strong>: frontend → backend → pojedynczy serwer. Możesz włączyć XSS, DOS, SQL injection protection itp.</small>';
                if (backendServersContainer?.parentElement) {
                    backendServersContainer.parentElement.appendChild(info);
                }
            }
        } else {
            // Pokaż przycisk dodawania serwerów
            if (addServerBtn) addServerBtn.classList.remove('d-none');

            // Usuń informację o no-lb
            const info = $('.no-lb-info');
            if (info) info.remove();
        }
    };

    lbMethodSelect?.addEventListener('change', onLbMethodChange);
    if (lbMethodSelect) onLbMethodChange();

    // 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 = `
            <div class="col-md-3">
                <input type="text" class="form-control" name="backend_server_names[]" placeholder="server${serverCount}" required>
            </div>
            <div class="col-md-4">
                <input type="text" class="form-control" name="backend_server_ips[]" placeholder="192.168.1.${serverCount}" required>
            </div>
            <div class="col-md-2">
                <input type="number" class="form-control" name="backend_server_ports[]" placeholder="80" min="1" max="65535" required>
            </div>
            <div class="col-md-2">
                <input type="number" class="form-control" name="backend_server_maxconns[]" placeholder="100">
            </div>
            <div class="col-md-1">
                <button type="button" class="btn btn-danger btn-sm w-100 remove-server">
                    <i class="bi bi-trash"></i>
                </button>
            </div>
        `;

        const removeBtn = row.querySelector('.remove-server');
        removeBtn.addEventListener('click', () => row.remove());

        return row;
    };

    addBtn?.addEventListener('click', () => {
        if (container) {
            container.appendChild(createRow());
        }
    });

    // Remove button for dynamically added rows
    container?.addEventListener('click', (e) => {
        if (e.target.closest('.remove-server')) {
            e.target.closest('.backend-server-row').remove();
        }
    });
})();