{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Edit Nginx Website" %} - Eenos{% endblock %}
{% block extra_css %}<style>.nginx-sticky-actions{position:sticky;bottom:0;z-index:1020;background:var(--eenos-surface);border:1px solid var(--eenos-border);border-radius:var(--eenos-radius);box-shadow:0 -8px 24px rgba(15,23,42,.08);padding:1rem}.nginx-section-toggle{color:inherit;text-decoration:none}.nginx-section-toggle svg{transition:transform .2s ease}.nginx-section-toggle[aria-expanded="false"] svg{transform:rotate(-90deg)}.nginx-setting-modified{border-color:var(--eenos-primary)!important;box-shadow:0 0 0 .15rem rgba(255,139,0,.14)!important}.nginx-modified-badge{margin-inline-start:.4rem;vertical-align:middle}.nginx-change-list{max-height:260px;overflow:auto}.nginx-change-list code{color:inherit;word-break:break-word}[data-bs-theme="dark"] .nginx-sticky-actions{box-shadow:0 -8px 24px rgba(0,0,0,.28)}</style>{% endblock %}
{% block content %}
<div class="eenos-page-header flex-wrap gap-3"><div><h1 class="eenos-page-title">{% translate "Edit Nginx Website" %}</h1><div class="eenos-page-subtitle">{% translate "Configure Nginx behavior for an individual website." %}</div></div><div class="col-12 col-sm-auto"><a href="{% url 'nginx_domains' %}" class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="arrow-left"></i><span>{% translate "Nginx Websites" %}</span></a></div></div>
<nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}"><a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "Web Servers" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "Nginx" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><a href="{% url 'nginx_domains' %}">{% translate "Nginx Websites" %}</a><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{{ domain }}</span></nav>
{% include "includes/form_alerts.html" %}
<div class="eenos-card mb-4"><div class="row g-3 align-items-center"><div class="col-12 col-lg"><div class="d-flex align-items-center gap-3"><div class="eenos-card-action-icon flex-shrink-0"><i data-lucide="globe-2"></i></div><div class="min-w-0"><div class="small text-muted">{% translate "Editing Nginx settings for" %}</div><h2 class="h5 mb-0 text-break">{{ domain }}</h2></div></div></div><div class="col-12 col-md-7 col-lg-auto"><div class="d-flex align-items-center gap-3"><div class="eenos-card-action-icon flex-shrink-0"><i data-lucide="blocks"></i></div><div class="min-w-0"><div class="small text-muted">{% translate "Current application" %}</div><div class="d-flex flex-wrap align-items-center gap-2"><span class="fw-semibold text-break">{{ current_app_info }}</span><span class="badge eenos-badge-neutral">{{ current_app }}</span></div></div></div></div><div class="col-12 col-md-5 col-lg-auto"><div class="d-flex flex-column align-items-stretch align-items-lg-end gap-2"><span class="badge {% if custom_settings %}eenos-badge-warning{% else %}eenos-badge-neutral{% endif %}">{% if custom_settings %}{% translate "Custom configuration" %}{% else %}{% translate "Using server defaults" %}{% endif %}</span><button type="button" class="btn btn-outline-secondary d-inline-flex align-items-center justify-content-center gap-2" id="openChangeNginxApp"><i data-lucide="arrow-left-right"></i>{% translate "Change Application" %}</button></div></div></div></div>
<form method="post" id="nginxDomainSettingsForm" class="eenos-form" data-parsley-validate>{% csrf_token %}<input type="hidden" name="savesettings" value="yes"><input type="hidden" name="domain" value="{{ domain }}"><div class="eenos-card mb-4"><div class="row g-3 align-items-center"><div class="col-12 col-lg"><div class="input-group"><span class="input-group-text"><i data-lucide="search"></i></span><input type="search" class="form-control" id="nginxSettingsSearch" aria-label="{% translate 'Search Nginx settings' %}" placeholder="{% translate 'Search settings, for example cache or timeout' %}" autocomplete="off"></div></div><div class="col-12 col-lg-auto d-flex flex-column flex-sm-row gap-2"><button type="button" class="btn btn-outline-secondary" id="expandNginxSections"><i data-lucide="chevrons-down"></i>{% translate "Expand All" %}</button><button type="button" class="btn btn-outline-secondary" id="collapseNginxSections"><i data-lucide="chevrons-up"></i>{% translate "Collapse All" %}</button></div></div><div class="small text-muted mt-2 d-none" id="nginxSearchEmpty">{% translate "No settings match your search." %}</div></div>{% include "includes/nginx_settings_fields.html" %}<div class="nginx-sticky-actions d-flex flex-column flex-sm-row align-items-sm-center justify-content-between gap-3 mb-4"><div class="small text-muted"><span id="nginxChangedCount">0</span> {% translate "unsaved changes" %}</div><div class="d-flex flex-column flex-sm-row gap-2"><button type="button" class="btn btn-primary" id="reviewNginxSettings"><i data-lucide="save"></i>{% translate "Save Nginx Settings" %}</button><a href="{% url 'nginx_domains' %}" class="btn btn-outline-secondary" id="discardNginxSettings"><i data-lucide="undo-2"></i>{% translate "Discard Changes" %}</a><button type="button" class="btn btn-outline-danger" id="resetNginxSettings"><i data-lucide="rotate-ccw"></i>{% translate "Reset to Defaults" %}</button></div></div></form>
<form method="post" id="nginxDomainResetForm" class="d-none">{% csrf_token %}<input type="hidden" name="reset" value="yes"><input type="hidden" name="domain" value="{{ domain }}"></form>
<form method="post" id="changeNginxAppForm" class="eenos-form" data-parsley-validate>{% csrf_token %}<input type="hidden" name="set_domain_app" value="yes"><input type="hidden" name="domain" value="{{ domain }}"><div class="modal fade" id="changeNginxAppModal" tabindex="-1" aria-labelledby="changeNginxAppTitle" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><div><h2 class="modal-title fs-5 d-flex align-items-center gap-2" id="changeNginxAppTitle"><i data-lucide="blocks"></i>{% translate "Change Website Application" %}</h2><div class="small text-muted mt-1">{% translate "Choose the application profile used by this website." %}</div></div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button></div><div class="modal-body"><div class="eenos-modal-info mb-4"><div class="eenos-modal-info-icon"><i data-lucide="globe-2"></i></div><div class="eenos-modal-info-content min-w-0"><div class="eenos-modal-info-label">{% translate "Website" %}</div><div class="eenos-modal-info-value text-break">{{ domain }}</div></div></div><div class="eenos-notice eenos-notice-info mb-4"><div class="eenos-notice-icon"><i data-lucide="blocks"></i></div><div class="eenos-notice-content"><div class="eenos-notice-title">{% translate "Current application" %}</div><div class="eenos-notice-text d-flex flex-wrap align-items-center gap-2"><span>{{ current_app_info }}</span><span class="badge eenos-badge-neutral">{{ current_app }}</span></div></div></div><label class="form-label" for="nginxDomainApp">{% translate "New Application" %}</label><select id="nginxDomainApp" class="form-select eenos-select-search" name="app" required data-parsley-required-message="{% translate 'Please select an application.' %}"><option value="">{% translate "Select an application" %}</option><option value="default"{% if current_app == "default" %} selected{% endif %}>{% translate "Default Application" %}</option>{% for app, info in apps.items %}<option value="{{ app }}"{% if current_app == app %} selected{% endif %}>{{ info.info }}</option>{% endfor %}</select><div class="form-text">{% translate "Changing the profile rebuilds this website's virtual host configuration." %}</div></div><div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i data-lucide="x"></i>{% translate "Cancel" %}</button><button type="submit" class="btn btn-primary"><i data-lucide="save"></i>{% translate "Change Application" %}</button></div></div></div></div></form>
<div class="modal fade" id="saveNginxModal" tabindex="-1" aria-labelledby="saveNginxTitle" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><div><h2 class="modal-title fs-5 d-flex align-items-center gap-2" id="saveNginxTitle"><i data-lucide="save"></i>{% translate "Save Nginx Settings" %}</h2><div class="small text-muted mt-1">{% translate "Confirm the configuration update for this website." %}</div></div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button></div><div class="modal-body"><div class="eenos-modal-info mb-4"><div class="eenos-modal-info-icon"><i data-lucide="globe-2"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Website" %}</div><div class="eenos-modal-info-value text-break">{{ domain }}</div></div></div><div class="border rounded-3 p-3 mb-4"><div class="d-flex align-items-center justify-content-between gap-3 mb-2"><div class="fw-semibold">{% translate "Settings to update" %}</div><span class="badge eenos-badge-warning" id="nginxSaveChangeCount">0</span></div><div class="list-group list-group-flush nginx-change-list" id="nginxSaveChangeList"></div></div><div class="eenos-notice eenos-notice-info mb-0"><div class="eenos-notice-icon"><i data-lucide="info"></i></div><div class="eenos-notice-content"><div class="eenos-notice-title">{% translate "Nginx configuration will be rebuilt" %}</div><div class="eenos-notice-text">{% translate "The submitted settings will replace the current domain-specific Nginx configuration." %}</div></div></div></div><div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i data-lucide="x"></i>{% translate "Cancel" %}</button><button type="button" class="btn btn-primary" id="confirmSaveNginx"><i data-lucide="save"></i>{% translate "Save Settings" %}</button></div></div></div></div>
<div class="modal fade" id="resetNginxDomainModal" tabindex="-1" aria-labelledby="resetNginxDomainTitle" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><div><h2 class="modal-title fs-5 d-flex align-items-center gap-2" id="resetNginxDomainTitle"><i data-lucide="rotate-ccw"></i>{% translate "Reset Nginx Settings" %}</h2><div class="small text-muted mt-1">{% translate "Restore the current server defaults for this website." %}</div></div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button></div><div class="modal-body"><div class="eenos-modal-info mb-4"><div class="eenos-modal-info-icon"><i data-lucide="globe-2"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Website" %}</div><div class="eenos-modal-info-value text-break">{{ domain }}</div></div></div><div class="eenos-notice eenos-notice-warning mb-0"><div class="eenos-notice-icon"><i data-lucide="triangle-alert"></i></div><div class="eenos-notice-content"><div class="eenos-notice-title">{% translate "Custom settings will be removed" %}</div><div class="eenos-notice-text">{% translate "All domain-specific Nginx settings will be replaced by the server defaults. This cannot be undone." %}</div></div></div></div><div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i data-lucide="x"></i>{% translate "Cancel" %}</button><button type="button" class="btn btn-danger" id="confirmResetNginx"><i data-lucide="rotate-ccw"></i>{% translate "Reset Settings" %}</button></div></div></div></div>
{% endblock %}
{% block extra_js %}<script>
(function($){"use strict";$(function(){
const form=$("#nginxDomainSettingsForm"),saveModal=bootstrap.Modal.getOrCreateInstance(document.getElementById("saveNginxModal")),resetModal=bootstrap.Modal.getOrCreateInstance(document.getElementById("resetNginxDomainModal")),appModal=bootstrap.Modal.getOrCreateInstance(document.getElementById("changeNginxAppModal"));let submitting=false;
form.find("[required]:not([data-parsley-required-message])").attr("data-parsley-required-message","{% translate 'Please enter a value for this setting.' %}");
const fieldHelp={client_max_body_size:"{% translate 'Maximum accepted request size. Enter whole megabytes ending with m, for example 2000m.' %}",client_body_buffer_size:"{% translate 'Memory buffer for request bodies. Enter whole kilobytes ending with k, for example 512k.' %}",keepalive_requests:"{% translate 'Maximum requests allowed on one keep-alive connection. Use a number from 1 to 20,000.' %}",keepalive_timeout:"{% translate 'How long an idle keep-alive connection remains open. Enter seconds ending with s, for example 60s.' %}",proxy_connect_timeout:"{% translate 'Maximum time to establish an upstream connection. Enter seconds ending with s.' %}",proxy_send_timeout:"{% translate 'Maximum interval while sending a request to the upstream server. Enter seconds ending with s.' %}",proxy_read_timeout:"{% translate 'Maximum interval while waiting for an upstream response. Enter seconds ending with s.' %}",proxy_buffer_size:"{% translate 'Buffer used for the first part of an upstream response. Enter kilobytes ending with k.' %}",proxy_buffers_num:"{% translate 'Number of buffers allocated for an upstream response. Use a number from 1 to 20,000.' %}",proxy_buffers_size:"{% translate 'Size of each upstream response buffer. Enter kilobytes ending with k.' %}",proxy_busy_buffers_size:"{% translate 'Maximum buffers that may be busy sending a response. Enter kilobytes ending with k.' %}",proxy_temp_file_write_size:"{% translate 'Maximum data written to a temporary file at once. Enter kilobytes ending with k.' %}",limit_connection_perip:"{% translate 'Maximum simultaneous connections allowed from one IP address.' %}",limit_connection_perdomain:"{% translate 'Maximum simultaneous connections allowed for this website.' %}",request_module_perip:"{% translate 'Maximum request rate allowed from one IP address.' %}",request_module_perdomain:"{% translate 'Maximum request rate allowed for this website.' %}",client_header_timeout:"{% translate 'Maximum time allowed to receive request headers, in seconds.' %}",client_body_timeout:"{% translate 'Maximum time allowed to receive a request body, in seconds.' %}",proxy_cache_min_uses:"{% translate 'Requests required before a response is cached. Use a number from 1 to 20,000.' %}",proxy_cache_valid:"{% translate 'How long cached proxy responses remain valid. Use minutes or hours, for example 60m or 24h.' %}",fastcgi_cache_min_use:"{% translate 'Requests required before a FastCGI response is cached. Use a number from 1 to 20,000.' %}",fastcgi_cache_valid:"{% translate 'How long cached FastCGI responses remain valid. Use minutes or hours, for example 60m or 24h.' %}"};Object.entries(fieldHelp).forEach(function([id,message]){const field=$("#"+id);if(!field.length||field.next(".nginx-field-help").length)return;const helpId=id+"Help",current=field.attr("aria-describedby");field.attr("aria-describedby",current?current+" "+helpId:helpId).after('<div class="form-text nginx-field-help" id="'+helpId+'">'+message+'</div>')});
function setCacheOptions($control,selector){const enabled=$control.prop("checked"),options=$(selector),fields=options.find("input:not([type='hidden']),select,textarea");options.toggleClass("d-none",!enabled).attr("aria-hidden",String(!enabled));fields.each(function(){const field=$(this);if(field.data("nginx-required")===undefined)field.data("nginx-required",field.prop("required"));field.prop("required",enabled&&field.data("nginx-required"));const parsleyField=field.parsley();if(parsleyField){parsleyField.refresh();if(!enabled)parsleyField.reset()}})}
function setDependentOptions($control,selectors){const enabled=$control.prop("checked");$(selectors).each(function(){const field=$(this),container=field.closest(".col-6");if(field.data("nginx-required")===undefined)field.data("nginx-required",field.prop("required"));container.toggleClass("d-none",!enabled).attr("aria-hidden",String(!enabled));field.prop("required",enabled&&field.data("nginx-required"));const parsleyField=field.parsley();if(parsleyField){parsleyField.refresh();if(!enabled)parsleyField.reset()}})}
const sections=form.find(".eenos-card").filter(function(){return $(this).children(".mb-4").children(".eenos-panel-title").length});sections.each(function(index){const card=$(this),header=card.children(".mb-4").first(),content=header.nextAll(),collapseId="nginxSection"+index;card.attr("data-nginx-section","");content.wrapAll('<div class="collapse show" id="'+collapseId+'"></div>');header.addClass("d-flex align-items-start justify-content-between gap-3").append('<button type="button" class="btn btn-sm btn-outline-secondary nginx-section-toggle" data-bs-toggle="collapse" data-bs-target="#'+collapseId+'" aria-expanded="true" aria-controls="'+collapseId+'" title="{% translate 'Expand or collapse this section' %}"><i data-lucide="chevron-down"></i></button>')});
$(".nginx-setting-switch").on("change",function(){$(this.dataset.valueTarget).val(this.checked?"on":"off")});
$("#proxycacheSwitch").on("change",function(){setCacheOptions($(this),"#proxyCacheOptions")});
$("#fcgicacheSwitch").on("change",function(){setCacheOptions($(this),"#fastcgiCacheOptions")});
$("#limitConnectionSwitch").on("change",function(){setDependentOptions($(this),"#limit_connection_perip,#limit_connection_perdomain")});$("#requestModuleSwitch").on("change",function(){setDependentOptions($(this),"#request_module_perip,#request_module_perdomain")});$("#slowlorisSwitch").on("change",function(){setDependentOptions($(this),"#client_header_timeout,#client_body_timeout")});
setCacheOptions($("#proxycacheSwitch"),"#proxyCacheOptions");setCacheOptions($("#fcgicacheSwitch"),"#fastcgiCacheOptions");form.parsley().refresh();
setDependentOptions($("#limitConnectionSwitch"),"#limit_connection_perip,#limit_connection_perdomain");setDependentOptions($("#requestModuleSwitch"),"#request_module_perip,#request_module_perdomain");setDependentOptions($("#slowlorisSwitch"),"#client_header_timeout,#client_body_timeout");
const trackedFields=form.find("input[name],select[name],textarea[name]").not("[name='csrfmiddlewaretoken'],[name='savesettings'],[name='domain']"),initialValues=new Map();trackedFields.each(function(){initialValues.set(this.name,$(this).val())});const html=value=>$("<div>").text(value==null?"":value).html();function fieldLabel(field){const visible=field.attr("type")==="hidden"?form.find('[data-value-target="#'+field.attr("id")+'"]').first():field,label=form.find('label[for="'+visible.attr("id")+'"]').first(),labelText=label.clone().find(".nginx-modified-badge").remove().end().text();return {visible:visible,label:label,text:String(labelText||"").trim()||field.attr("name").replace(/_/g," ")}}function collectChanges(){const changes=[];trackedFields.each(function(){const field=$(this),oldValue=String(initialValues.get(this.name)),newValue=String(field.val());if(oldValue!==newValue){const details=fieldLabel(field);changes.push({visible:details.visible,label:details.label,name:details.text,oldValue:oldValue,newValue:newValue})}});return changes}function updateChangedCount(){form.find(".nginx-setting-modified").removeClass("nginx-setting-modified");form.find(".nginx-modified-badge").remove();const changes=collectChanges();changes.forEach(function(change){change.visible.addClass("nginx-setting-modified");if(change.label.length)change.label.append('<span class="badge eenos-badge-warning nginx-modified-badge">{% translate "Modified" %}</span>')});$("#nginxChangedCount").text(changes.length);$("#reviewNginxSettings").prop("disabled",changes.length===0);return changes.length}form.on("input change",updateChangedCount);updateChangedCount();window.addEventListener("beforeunload",function(event){if(!submitting&&updateChangedCount()>0){event.preventDefault();event.returnValue=""}});
function sectionContainer(card){const parent=card.parent();return parent.is('[class*="col-"]')?parent:card}function setAllSections(show){sections.each(function(){const target=$(this).find(".collapse").first()[0];if(target)bootstrap.Collapse.getOrCreateInstance(target,{toggle:false})[show?"show":"hide"]()})}$("#expandNginxSections").on("click",function(){setAllSections(true)});$("#collapseNginxSections").on("click",function(){setAllSections(false)});$("#nginxSettingsSearch").on("input",function(){const query=String(this.value||"").trim().toLowerCase();let matches=0;sections.each(function(){const card=$(this),match=!query||card.text().toLowerCase().includes(query);sectionContainer(card).toggle(match);if(match){matches++;if(query){const target=card.find(".collapse").first()[0];if(target)bootstrap.Collapse.getOrCreateInstance(target,{toggle:false}).show()}}});$("#nginxSearchEmpty").toggleClass("d-none",matches>0)});
$("#reviewNginxSettings").on("click",function(){const validation=form.parsley();validation.validate();if(!validation.isValid()){const invalid=form.find(".parsley-error").first(),collapsed=invalid.closest(".collapse")[0];if(collapsed)bootstrap.Collapse.getOrCreateInstance(collapsed,{toggle:false}).show();return}const changes=collectChanges(),list=$("#nginxSaveChangeList").empty();$("#nginxSaveChangeCount").text(changes.length);changes.slice(0,10).forEach(function(change){list.append('<div class="list-group-item px-0"><div class="small fw-semibold mb-1">'+html(change.name)+'</div><div class="d-flex flex-wrap align-items-center gap-2 small"><code>'+html(change.oldValue)+'</code><i data-lucide="arrow-right"></i><code class="fw-semibold">'+html(change.newValue)+'</code></div></div>')});if(changes.length>10)list.append('<div class="small text-muted pt-2">+'+(changes.length-10)+' {% translate "more changes" %}</div>');lucide.createIcons();saveModal.show()});
$("#confirmSaveNginx").on("click",function(){submitting=true;document.getElementById("nginxDomainSettingsForm").submit()});
$("#resetNginxSettings").on("click",function(){resetModal.show()});
$("#openChangeNginxApp").on("click",function(){appModal.show()});
$("#confirmResetNginx").on("click",function(){submitting=true;document.getElementById("nginxDomainResetForm").submit()});$("#discardNginxSettings").on("click",function(){submitting=true})
})})(jQuery);
</script>{% endblock %}