280 lines
13 KiB
HTML
280 lines
13 KiB
HTML
{{define "title"}}
|
||
全局设置
|
||
{{end}}
|
||
|
||
{{define "top_css"}}
|
||
{{end}}
|
||
|
||
{{define "username"}}
|
||
{{ .username }}
|
||
{{end}}
|
||
|
||
{{define "page_title"}}
|
||
全局设置
|
||
{{end}}
|
||
|
||
{{define "page_content"}}
|
||
<section class="content">
|
||
<div class="container-fluid">
|
||
<!-- <h5 class="mt-4 mb-2">Global Settings</h5> -->
|
||
<div class="row">
|
||
<!-- left column -->
|
||
<div class="col-md-6">
|
||
<div class="card card-success">
|
||
<div class="card-header">
|
||
<h3 class="card-title">WireGuard 全局设置</h3>
|
||
} </div>
|
||
<!-- /.card-header -->
|
||
<!-- form start -->
|
||
<form role="form" id="frm_global_settings" name="frm_global_settings">
|
||
<div class="card-body">
|
||
<div class="form-group">
|
||
<label for="endpoint_address">端点地址</label>
|
||
} <div class="input-group input-group">
|
||
<input type="text" class="form-control" id="endpoint_address" name="endpoint_address" placeholder="端点地址"
|
||
} value="{{ .globalSettings.EndpointAddress }}">
|
||
<span class="input-group-append">
|
||
<button type="button" class="btn btn-success btn-flat" data-toggle="modal"
|
||
data-target="#modal_endpoint_address_suggestion"><i
|
||
class="nav-icon fas fa-magic"></i> 建议</button>
|
||
} </span>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="dns_servers" class="control-label">DNS 服务器</label>
|
||
} <input type="text" data-role="tagsinput" class="form-control" id="dns_servers" value="">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="mtu">MTU（最大传输单元）</label>
|
||
} <input type="text" class="form-control" id="mtu" name="mtu" placeholder="MTU"
|
||
value="{{if .globalSettings.MTU}}{{ .globalSettings.MTU }}{{end}}">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="persistent_keepalive">持久 Keepalive</label>
|
||
} <input type="text" class="form-control" id="persistent_keepalive"
|
||
name="persistent_keepalive" placeholder="Persistent Keepalive"
|
||
value="{{if .globalSettings.PersistentKeepalive }}{{ .globalSettings.PersistentKeepalive }}{{end}}">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="firewall_mark">防火墙标记</label>
|
||
} <input type="text" class="form-control" id="firewall_mark"
|
||
name="firewall_mark" placeholder="Firewall Mark"
|
||
value="{{ .globalSettings.FirewallMark }}">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="Table">路由表（Table）</label>
|
||
} <input type="text" class="form-control" id="table"
|
||
name="table" placeholder="auto"
|
||
value="{{ .globalSettings.Table }}">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="config_file_path">WireGuard 配置文件路径</label>
|
||
} <input type="text" class="form-control" id="config_file_path"
|
||
name="config_file_path" placeholder="例如 /etc/wireguard/wg0.conf"
|
||
}
|
||
value="{{ .globalSettings.ConfigFilePath }}">
|
||
</div>
|
||
</div>
|
||
<!-- /.card-body -->
|
||
|
||
<div class="card-footer">
|
||
<button type="submit" class="btn btn-success">保存</button>
|
||
} </div>
|
||
</form>
|
||
</div>
|
||
<!-- /.card -->
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="card card-success">
|
||
<div class="card-header">
|
||
<h3 class="card-title">使用说明</h3>
|
||
} </div>
|
||
<!-- /.card-header -->
|
||
<div class="card-body">
|
||
<dl>
|
||
<dt>1. 端点地址</dt>
|
||
} <dd>客户端将连接到的 WireGuard 服务器公网 IP。点击 <strong>建议</strong> 按钮可自动检测服务器公网地址。</dd>
|
||
} <dt>2. DNS 服务器</dt>
|
||
} <dd>这些 DNS 服务器将写入客户端配置。</dd>
|
||
} <dt>3. MTU</dt>
|
||
<dd>MTU 会应用到服务器和客户端配置，默认值为 <code>1450</code>。若连接（例如 PPPoE、3G、卫星网络等）MTU 较小，可在此调整。</dd>
|
||
<dd>留空则在配置中忽略此设置。</dd>
|
||
} <dt>4. 持久 Keepalive</dt>
|
||
} <dd>默认情况下，当 WireGuard 节点无需通信时会保持静默，如果节点位于 NAT 或防火墙之后，可能无法被其他节点主动访问，除非先发起请求。设置 <code>PersistentKeepalive</code> 可确保连接保持畅通。</dd>
|
||
<dd>留空则在客户端配置中忽略此项。</dd>
|
||
} <dt>5. 防火墙标记</dt>
|
||
<dd>为 WireGuard 非默认路由通道发出的所有数据包添加匹配的 <code>fwmark</code>。默认值：<code>0xca6c</code></dd>
|
||
} <dt>6. 路由表（Table）</dt>
|
||
<dd>wg 配置文件中 <code>Table</code> 选项的值。默认值：<code>auto</code></dd>
|
||
<dt>7. WireGuard 配置文件路径</dt>
|
||
<dd>WireGuard 服务器配置文件路径，请确保父目录存在且可写。</dd>
|
||
} </dl>
|
||
</div>
|
||
</div>
|
||
<!-- /.card -->
|
||
</div>
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
</section>
|
||
|
||
<div class="modal fade" id="modal_endpoint_address_suggestion">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h4 class="modal-title">端点地址建议</h4>
|
||
} <button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>以下列出可供选择的公网与本地 IP 地址。</p>
|
||
} <select id="ip_suggestion" class="select2"
|
||
data-placeholder="请选择 IP 地址" style="width: 100%;">
|
||
} </select>
|
||
</div>
|
||
<div class="modal-footer justify-content-between">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||
} <button type="button" class="btn btn-success" id="btn_use_ip" disabled>使用所选 IP 地址</button>
|
||
} </div>
|
||
</div>
|
||
<!-- /.modal-content -->
|
||
</div>
|
||
<!-- /.modal-dialog -->
|
||
</div>
|
||
<!-- /.modal -->
|
||
{{end}}
|
||
|
||
{{define "bottom_js"}}
|
||
<script>
|
||
function submitGlobalSettings() {
|
||
const endpoint_address = $("#endpoint_address").val();
|
||
const dns_servers = $("#dns_servers").val().split(",");
|
||
const mtu = $("#mtu").val();
|
||
const persistent_keepalive = $("#persistent_keepalive").val();
|
||
const firewall_mark = $("#firewall_mark").val();
|
||
const table = $("#table").val();
|
||
const config_file_path = $("#config_file_path").val();
|
||
const data = {"endpoint_address": endpoint_address, "dns_servers": dns_servers, "mtu": mtu, "persistent_keepalive": persistent_keepalive, "firewall_mark": firewall_mark, "table": table, "config_file_path": config_file_path};
|
||
|
||
$.ajax({
|
||
cache: false,
|
||
method: 'POST',
|
||
url: '{{.basePath}}/global-settings',
|
||
dataType: 'json',
|
||
contentType: "application/json",
|
||
data: JSON.stringify(data),
|
||
success: function(data) {
|
||
$("#modal_new_client").modal('hide');
|
||
toastr.success('Update global settings successfully');
|
||
},
|
||
error: function(jqXHR, exception) {
|
||
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
||
toastr.error(responseJson['message']);
|
||
}
|
||
});
|
||
}
|
||
|
||
function updateEndpointSuggestionIP() {
|
||
$.getJSON("{{.basePath}}/api/machine-ips", null, function(data) {
|
||
$("#ip_suggestion option").remove();
|
||
$.each(data, function(index, item) {
|
||
$("#ip_suggestion").append(
|
||
$("<option></option>")
|
||
.text(item.ip_address + ' - ' + item.name)
|
||
.val(item.ip_address)
|
||
);
|
||
});
|
||
document.getElementById("btn_use_ip").disabled = false;
|
||
});
|
||
}
|
||
</script>
|
||
<script>
|
||
// Wireguard Interface DNS server tag input
|
||
$("#dns_servers").tagsInput({
|
||
'width': '100%',
|
||
'height': '75%',
|
||
'interactive': true,
|
||
'defaultText': 'Add More',
|
||
'removeWithBackspace': true,
|
||
'minChars': 0,
|
||
'minInputWidth': '100%',
|
||
'placeholderColor': '#666666'
|
||
});
|
||
|
||
// Load DNS server to the form
|
||
{{range .globalSettings.DNSServers}}
|
||
$("#dns_servers").removeTag('{{.}}');
|
||
$("#dns_servers").addTag('{{.}}');
|
||
{{end}}
|
||
|
||
// Global setting form validation
|
||
$(document).ready(function () {
|
||
$.validator.setDefaults({
|
||
submitHandler: function () {
|
||
submitGlobalSettings();
|
||
}
|
||
});
|
||
$("#frm_global_settings").validate({
|
||
rules: {
|
||
mtu: {
|
||
digits: true,
|
||
range: [68, 65535]
|
||
},
|
||
persistent_keepalive: {
|
||
digits: true
|
||
},
|
||
config_file_path: {
|
||
required: true
|
||
},
|
||
firewall_mark: {
|
||
required: false
|
||
},
|
||
table: {
|
||
required: false
|
||
}
|
||
},
|
||
messages: {
|
||
mtu: {
|
||
digits: "MTU must be an integer",
|
||
range: "MTU must be in range 68..65535"
|
||
},
|
||
persistent_keepalive: {
|
||
digits: "Persistent keepalive must be an integer"
|
||
},
|
||
config_file_path: {
|
||
required: "Please enter WireGuard config file path"
|
||
}
|
||
},
|
||
errorElement: 'span',
|
||
errorPlacement: function (error, element) {
|
||
error.addClass('invalid-feedback');
|
||
element.closest('.form-group').append(error);
|
||
},
|
||
highlight: function (element, errorClass, validClass) {
|
||
$(element).addClass('is-invalid');
|
||
},
|
||
unhighlight: function (element, errorClass, validClass) {
|
||
$(element).removeClass('is-invalid');
|
||
}
|
||
});
|
||
});
|
||
|
||
// Endpoint IP suggestion modal event
|
||
$(document).ready(function () {
|
||
$("#modal_endpoint_address_suggestion").on('shown.bs.modal', function (e) {
|
||
updateEndpointSuggestionIP();
|
||
});
|
||
});
|
||
|
||
// Use selected IP address from suggestion form
|
||
$(document).ready(function () {
|
||
$("#btn_use_ip").click(function () {
|
||
const ip = $("#ip_suggestion").select2('val');
|
||
$("#endpoint_address").val(ip);
|
||
$("#modal_endpoint_address_suggestion").modal('hide');
|
||
});
|
||
});
|
||
</script>
|
||
{{end}}
|