258 lines
11 KiB
HTML
258 lines
11 KiB
HTML
{{define "title"}}
|
|
WireGuard 服务器
|
|
{{end}}
|
|
|
|
{{define "top_css"}}
|
|
{{end}}
|
|
|
|
{{define "username"}}
|
|
{{ .username }}
|
|
{{end}}
|
|
|
|
{{define "page_title"}}
|
|
WireGuard 服务器设置
|
|
{{end}}
|
|
|
|
{{define "page_content"}}
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
<!-- <h5 class="mt-4 mb-2">Wireguard Server</h5> -->
|
|
<div class="row">
|
|
<!-- left column -->
|
|
<div class="col-md-6">
|
|
<div class="card card-success">
|
|
<div class="card-header">
|
|
<h3 class="card-title">接口</h3>
|
|
} </div>
|
|
<!-- /.card-header -->
|
|
<!-- form start -->
|
|
<form role="form" id="frm_server_interface" name="frm_server_interface">
|
|
<div class="card-body">
|
|
<div class="form-group">
|
|
<label for="addresses" class="control-label">服务器接口地址</label>
|
|
<input type="text" data-role="tagsinput" class="form-control" id="addresses" value="">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="listen_port">监听端口</label>
|
|
} <input type="text" class="form-control" id="listen_port" name="listen_port"
|
|
placeholder="监听端口" value="{{ .serverInterface.ListenPort }}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="post_up">Post Up 脚本</label>
|
|
} <input type="text" class="form-control" id="post_up" name="post_up"
|
|
placeholder="Post Up Script" value="{{ .serverInterface.PostUp }}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="pre_down">Pre Down 脚本</label>
|
|
<input type="text" class="form-control" id="pre_down" name="pre_down"
|
|
placeholder="Pre Down 脚本" value="{{ .serverInterface.PreDown }}">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="post_down">Post Down 脚本</label>
|
|
<input type="text" class="form-control" id="post_down" name="post_down"
|
|
placeholder="Post Down 脚本" value="{{ .serverInterface.PostDown }}">
|
|
</div>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
|
|
<div class="card-footer">
|
|
<button type="submit" class="btn btn-success">保存</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- right column -->
|
|
<div class="col-md-6">
|
|
<div class="card card-danger">
|
|
<div class="card-header">
|
|
<h3 class="card-title">密钥对</h3>
|
|
} </div>
|
|
<!-- /.card-header -->
|
|
<!-- form start -->
|
|
<form role="form">
|
|
<div class="card-body">
|
|
<div class="form-group">
|
|
<label for="private_key">私钥</label>
|
|
<div class="input-group input-group">
|
|
<input type="password" class="form-control" id="private_key" placeholder="私钥"
|
|
value="{{ .serverKeyPair.PrivateKey }}" disabled>
|
|
|
|
<span class="input-group-append">
|
|
<button type="button" class="btn btn-danger btn-flat"
|
|
id="btn_show_private_key">显示</button>
|
|
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="public_key">公钥</label>
|
|
<input type="text" class="form-control" id="public_key" placeholder="公钥"
|
|
value="{{ .serverKeyPair.PublicKey }}" disabled>
|
|
</div>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
|
|
<div class="card-footer">
|
|
<button type="button" class="btn btn-danger" data-toggle="modal"
|
|
data-target="#modal_keypair_confirmation">生成</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
</section>
|
|
|
|
<div class="modal fade" id="modal_keypair_confirmation">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-warning">
|
|
<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>确定要为 WireGuard 服务器生成新的密钥对吗？<br/>
|
|
现有客户端对应的公钥需要更新才能保持连接正常。</p>
|
|
</div>
|
|
<div class="modal-footer justify-content-between">
|
|
<button type="button" class="btn btn-outline-dark" data-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-outline-dark" id="btn_generate_confirm">生成</button>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- /.modal -->
|
|
{{end}}
|
|
|
|
{{define "bottom_js"}}
|
|
<script>
|
|
function submitServerInterfaceSetting() {
|
|
const addresses = $("#addresses").val().split(",");
|
|
const listen_port = $("#listen_port").val();
|
|
const post_up = $("#post_up").val();
|
|
const pre_down = $("#pre_down").val();
|
|
const post_down = $("#post_down").val();
|
|
const data = {"addresses": addresses, "listen_port": listen_port, "post_up": post_up, "pre_down": pre_down, "post_down": post_down};
|
|
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'POST',
|
|
url: '{{.basePath}}/wg-server/interfaces',
|
|
dataType: 'json',
|
|
contentType: "application/json",
|
|
data: JSON.stringify(data),
|
|
success: function(data) {
|
|
$("#modal_new_client").modal('hide');
|
|
toastr.success('已成功更新 WireGuard 服务器接口地址');
|
|
},
|
|
error: function(jqXHR, exception) {
|
|
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message']);
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
<script>
|
|
// Wireguard Interface Addresses tag input
|
|
$("#addresses").tagsInput({
|
|
'width': '100%',
|
|
// 'height': '75%',
|
|
'interactive': true,
|
|
'defaultText': '添加更多',
|
|
} 'removeWithBackspace': true,
|
|
'minChars': 0,
|
|
'minInputWidth': '100%',
|
|
'placeholderColor': '#666666'
|
|
});
|
|
|
|
// Load server addresses to the form
|
|
{{range .serverInterface.Addresses}}
|
|
$("#addresses").removeTag('{{.}}');
|
|
$("#addresses").addTag('{{.}}');
|
|
{{end}}
|
|
|
|
// Wireguard Interface Addresses form validation
|
|
$(document).ready(function () {
|
|
$.validator.setDefaults({
|
|
submitHandler: function () {
|
|
submitServerInterfaceSetting();
|
|
}
|
|
});
|
|
$("#frm_server_interface").validate({
|
|
rules: {
|
|
listen_port: {
|
|
required: true,
|
|
digits: true,
|
|
range: [1, 65535]
|
|
}
|
|
},
|
|
messages: {
|
|
listen_port: {
|
|
required: "请输入端口",
|
|
digits: "端口必须是整数",
|
|
range: "端口范围需在 1..65535 之间"
|
|
}
|
|
},
|
|
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');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Wireguard Key Pair generation confirmation button
|
|
$(document).ready(function () {
|
|
$("#btn_generate_confirm").click(function () {
|
|
$.ajax({
|
|
cache: false,
|
|
method: 'POST',
|
|
url: '{{.basePath}}/wg-server/keypair',
|
|
dataType: 'json',
|
|
contentType: "application/json",
|
|
success: function(data) {
|
|
$("#modal_keypair_confirmation").modal('hide');
|
|
toastr.success('已成功生成新的密钥对');
|
|
} // update the UI
|
|
$("#private_key").val(data['private_key']);
|
|
$("#public_key").val(data['public_key']);
|
|
},
|
|
error: function(jqXHR, exception) {
|
|
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
|
toastr.error(responseJson['message']);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// Show private key button event
|
|
$(document).ready(function () {
|
|
$("#btn_show_private_key").click(function () {
|
|
const privateElement = document.getElementById("private_key");
|
|
const btnElement = document.getElementById("btn_show_private_key");
|
|
if (privateElement.type === 'password') {
|
|
privateElement.type = 'text';
|
|
btnElement.innerText = 'Hide';
|
|
} else {
|
|
privateElement.type = 'password';
|
|
btnElement.innerText = 'Show';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{{end}}
|