mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2024-11-06 16:00:28 +01:00
Add configuration and adjusted redirect functionality
This commit is contained in:
Donald Cheng Hong Zou
parent
bdd984a887
commit
cc1dd682e8
@ -674,7 +674,11 @@ def auth_req():
|
|||||||
else:
|
else:
|
||||||
session['message'] = ""
|
session['message'] = ""
|
||||||
conf.clear()
|
conf.clear()
|
||||||
return redirect("/signin?redirect=" + str(request.url))
|
|
||||||
|
redirectURL = str(request.url)
|
||||||
|
redirectURL = redirectURL.replace("http://", "")
|
||||||
|
redirectURL = redirectURL.replace("https://", "")
|
||||||
|
return redirect("/signin?redirect=" + redirectURL)
|
||||||
else:
|
else:
|
||||||
if request.endpoint in ['signin', 'signout', 'auth', 'settings', 'update_acct', 'update_pwd',
|
if request.endpoint in ['signin', 'signout', 'auth', 'settings', 'update_acct', 'update_pwd',
|
||||||
'update_app_ip_port', 'update_wg_conf_path']:
|
'update_app_ip_port', 'update_wg_conf_path']:
|
||||||
@ -1533,7 +1537,6 @@ def switch_display_mode(mode):
|
|||||||
@app.route('/api/togglePeerAccess', methods=['POST'])
|
@app.route('/api/togglePeerAccess', methods=['POST'])
|
||||||
def togglePeerAccess():
|
def togglePeerAccess():
|
||||||
data = request.get_json()
|
data = request.get_json()
|
||||||
print(data['peerID'])
|
|
||||||
returnData = {"status": True, "reason": ""}
|
returnData = {"status": True, "reason": ""}
|
||||||
required = ['peerID', 'config']
|
required = ['peerID', 'config']
|
||||||
if checkJSONAllParameter(required, data):
|
if checkJSONAllParameter(required, data):
|
||||||
@ -1572,7 +1575,26 @@ def togglePeerAccess():
|
|||||||
|
|
||||||
return jsonify(returnData)
|
return jsonify(returnData)
|
||||||
|
|
||||||
|
@app.route('/api/addConfigurationAddressCheck', methods=['POST'])
|
||||||
|
def addConfigurationAddressCheck():
|
||||||
|
data = request.get_json()
|
||||||
|
returnData = {"status": True, "reason": ""}
|
||||||
|
required = ['address']
|
||||||
|
if checkJSONAllParameter(required, data):
|
||||||
|
try:
|
||||||
|
ips = list(ipaddress.ip_network(data['address'], False).hosts())
|
||||||
|
amount = len(ips) - 1
|
||||||
|
if amount >= 1:
|
||||||
|
returnData = {"status": True, "reason":"", "data":f"Total of {amount} IPs"}
|
||||||
|
else:
|
||||||
|
returnData = {"status": True, "reason":"", "data":f"0 IP available for peers"}
|
||||||
|
|
||||||
|
except ValueError as e:
|
||||||
|
returnData = {"status": False, "reason": str(e)}
|
||||||
|
else:
|
||||||
|
returnData = {"status": False, "reason": "Please provide all required parameters."}
|
||||||
|
return jsonify(returnData)
|
||||||
|
|
||||||
|
|
||||||
"""
|
"""
|
||||||
Dashboard Tools Related
|
Dashboard Tools Related
|
||||||
@ -1789,5 +1811,4 @@ if __name__ == "__main__":
|
|||||||
app_port = config.get("Server", "app_port")
|
app_port = config.get("Server", "app_port")
|
||||||
WG_CONF_PATH = config.get("Server", "wg_conf_path")
|
WG_CONF_PATH = config.get("Server", "wg_conf_path")
|
||||||
config.clear()
|
config.clear()
|
||||||
socketio.run(app, host=app_ip, debug=False, port=int(app_port))
|
app.run(host=app_ip, debug=False, port=app_port)
|
||||||
# app.run(host=app_ip, debug=False, port=app_port)
|
|
||||||
|
|||||||
@ -3,6 +3,10 @@ body {
|
|||||||
/*font-family: 'Poppins', sans-serif;*/
|
/*font-family: 'Poppins', sans-serif;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.codeFont{
|
||||||
|
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
|
}
|
||||||
|
|
||||||
.feather {
|
.feather {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
@ -307,7 +311,7 @@ main {
|
|||||||
right: 0;
|
right: 0;
|
||||||
box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
|
box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
min-width: 200px;
|
min-width: 250px;
|
||||||
display: none;
|
display: none;
|
||||||
transform: translateY(-30px);
|
transform: translateY(-30px);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -760,4 +764,12 @@ pre.index-alert {
|
|||||||
height: 4px;
|
height: 4px;
|
||||||
background-color: #007bff;
|
background-color: #007bff;
|
||||||
border-bottom-left-radius: .25rem;
|
border-bottom-left-radius: .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.addConfigurationAvailableIPs{
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-feedback{
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
@ -4,12 +4,11 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
let peers = [];
|
||||||
(function() {
|
(function() {
|
||||||
/**
|
/**
|
||||||
* Definitions
|
* Definitions
|
||||||
*/
|
*/
|
||||||
let peers = [];
|
|
||||||
let configuration_name;
|
let configuration_name;
|
||||||
let configuration_interval;
|
let configuration_interval;
|
||||||
let configuration_timeout = window.localStorage.getItem("configurationTimeout");
|
let configuration_timeout = window.localStorage.getItem("configurationTimeout");
|
||||||
|
|||||||
118
src/static/js/index.js
Normal file
118
src/static/js/index.js
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
let numberToast = 0;
|
||||||
|
let addConfigurationModal = new bootstrap.Modal(document.getElementById('addConfigurationModal'), {
|
||||||
|
keyboard: false,
|
||||||
|
backdrop: 'static'
|
||||||
|
});
|
||||||
|
|
||||||
|
function showToast(msg){
|
||||||
|
$(".toastContainer").append(
|
||||||
|
`<div id="${numberToast}-toast" class="toast hide" role="alert" data-delay="5000">
|
||||||
|
<div class="toast-header">
|
||||||
|
<strong class="mr-auto">WGDashboard</strong>
|
||||||
|
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="toast-body">${msg}</div>
|
||||||
|
<div class="toast-progressbar"></div>
|
||||||
|
</div>` )
|
||||||
|
$(`#${numberToast}-toast`).toast('show');
|
||||||
|
$(`#${numberToast}-toast .toast-body`).html(msg);
|
||||||
|
$(`#${numberToast}-toast .toast-progressbar`).css("transition", `width ${$(`#${numberToast}-toast .toast-progressbar`).parent().data('delay')}ms cubic-bezier(0, 0, 0, 0)`);
|
||||||
|
$(`#${numberToast}-toast .toast-progressbar`).css("width", "0px");
|
||||||
|
numberToast++;
|
||||||
|
}
|
||||||
|
|
||||||
|
$(".toggle--switch").on("change", function(){
|
||||||
|
$(this).addClass("waiting").attr("disabled", "disabled");
|
||||||
|
let id = $(this).data("conf-id");
|
||||||
|
let status = $(this).prop("checked");
|
||||||
|
let ele = $(this);
|
||||||
|
let label = $(this).siblings("label");
|
||||||
|
$.ajax({
|
||||||
|
url: `/switch/${id}`
|
||||||
|
}).done(function(res){
|
||||||
|
let dot = $(`div[data-conf-id="${id}"] .dot`);
|
||||||
|
console.log();
|
||||||
|
if (res){
|
||||||
|
if (status){
|
||||||
|
dot.removeClass("dot-stopped").addClass("dot-running");
|
||||||
|
dot.siblings().text("Running");
|
||||||
|
showToast(`${id} is running.`)
|
||||||
|
}else{
|
||||||
|
dot.removeClass("dot-running").addClass("dot-stopped");
|
||||||
|
showToast(`${id} is stopped.`)
|
||||||
|
}
|
||||||
|
ele.removeClass("waiting");
|
||||||
|
ele.removeAttr("disabled");
|
||||||
|
}else{
|
||||||
|
if (status){
|
||||||
|
$(this).prop("checked", false)
|
||||||
|
}else{
|
||||||
|
$(this).prop("checked", true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.switch').on("click", function() {
|
||||||
|
$(this).siblings($(".spinner-border")).css("display", "inline-block")
|
||||||
|
$(this).remove()
|
||||||
|
location.replace("/switch/"+$(this).attr('id'))
|
||||||
|
});
|
||||||
|
$(".sb-home-url").addClass("active");
|
||||||
|
|
||||||
|
$(".card-body").on("click", function(handle){
|
||||||
|
if ($(handle.target).attr("class") !== "toggleLabel" && $(handle.target).attr("class") !== "toggle--switch") {
|
||||||
|
window.open($(this).find("a").attr("href"), "_self");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function genKeyPair(){
|
||||||
|
let keyPair = window.wireguard.generateKeypair();
|
||||||
|
$("#addConfigurationPrivateKey").val(keyPair.privateKey);
|
||||||
|
$("#addConfigurationPublicKey").attr("disabled", "disabled").val(keyPair.publicKey);
|
||||||
|
}
|
||||||
|
|
||||||
|
$("#reGeneratePrivateKey").on("click", function() {
|
||||||
|
genKeyPair();
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#toggleAddConfiguration").on("click", function(){
|
||||||
|
addConfigurationModal.toggle();
|
||||||
|
genKeyPair()
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#addConfigurationPrivateKey").on("change", function() {
|
||||||
|
let $publicKey = $("#addConfigurationPublicKey");
|
||||||
|
if ($(this).val().length === 44) {
|
||||||
|
$publicKey.attr("disabled", "disabled").val(window.wireguard.generatePublicKey($(this).val()));
|
||||||
|
} else {
|
||||||
|
$publicKey.removeAttr("disabled").val("");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#addConfigurationAddress").on("change", function(){
|
||||||
|
let address = $("#addConfigurationAddress");
|
||||||
|
let addressFeedback = $("#addConfigurationAddressFeedback");
|
||||||
|
let availableIPs = $(".addConfigurationAvailableIPs");
|
||||||
|
$.ajax({
|
||||||
|
url: "/api/addConfigurationAddressCheck",
|
||||||
|
method: "POST",
|
||||||
|
headers: {"Content-Type": "application/json"},
|
||||||
|
data: JSON.stringify({
|
||||||
|
"address": $(this).val()
|
||||||
|
})
|
||||||
|
}).done(function(res){
|
||||||
|
console.log(res)
|
||||||
|
if (res.status){
|
||||||
|
availableIPs.html(`<strong>${res.data}</strong>`);
|
||||||
|
address.removeClass("is-invalid").addClass("is-valid");
|
||||||
|
}else{
|
||||||
|
address.addClass("is-invalid");
|
||||||
|
addressFeedback.addClass("invalid-feedback").text(res.reason);
|
||||||
|
availableIPs.html(`N/A`);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
@ -142,6 +142,7 @@
|
|||||||
<button type="button" class="btn btn-primary add_btn"><i class="bi bi-plus-circle-fill" style=""></i></button>
|
<button type="button" class="btn btn-primary add_btn"><i class="bi bi-plus-circle-fill" style=""></i></button>
|
||||||
<button type="button" class="btn btn-secondary setting_btn"><i class="bi bi-three-dots"></i></button>
|
<button type="button" class="btn btn-secondary setting_btn"><i class="bi bi-three-dots"></i></button>
|
||||||
<div class="setting_btn_menu">
|
<div class="setting_btn_menu">
|
||||||
|
<a class="text-primary" id="configuration_setting"><i class="bi bi-gear-fill"></i> Configration Settings</a>
|
||||||
<a class="text-danger" id="delete_peers_by_bulk_btn"><i class="bi bi-trash-fill"></i> Delete Peers</a>
|
<a class="text-danger" id="delete_peers_by_bulk_btn"><i class="bi bi-trash-fill"></i> Delete Peers</a>
|
||||||
<a class="text-info" id="download_all_peers" data-url="/download_all/{{conf_data['name']}}"><i class="bi bi-cloud-download-fill"></i> Download All Peers</a>
|
<a class="text-info" id="download_all_peers" data-url="/download_all/{{conf_data['name']}}"><i class="bi bi-cloud-download-fill"></i> Download All Peers</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -63,81 +63,111 @@
|
|||||||
{%endfor%}
|
{%endfor%}
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
<div class="position-fixed top-0 right-0 p-3 toastContainer" style="z-index: 5; right: 0; top: 50px;">
|
<div class="position-fixed top-0 right-0 p-3 toastContainer" style="z-index: 5; right: 0; top: 50px;"></div>
|
||||||
|
<div class="btn-manage-group">
|
||||||
</div>
|
<button type="button" class="btn btn-primary add_btn" id="toggleAddConfiguration"><i class="bi bi-plus-circle-fill"></i></button>
|
||||||
{% include "tools.html" %}
|
</div>
|
||||||
</body>
|
<div class="modal fade" id="addConfigurationModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
|
||||||
{% include "footer.html" %}
|
aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||||
<script>
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||||
let numberToast = 0;
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="staticBackdropLabel">Add New Configuration</h5>
|
||||||
function showToast(msg){
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
$(".toastContainer").append(
|
|
||||||
`<div id="${numberToast}-toast" class="toast hide" role="alert" data-delay="5000">
|
|
||||||
<div class="toast-header">
|
|
||||||
<strong class="mr-auto">WGDashboard</strong>
|
|
||||||
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
|
||||||
<span aria-hidden="true">×</span>
|
<span aria-hidden="true">×</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="toast-body">${msg}</div>
|
<div class="modal-body">
|
||||||
<div class="toast-progressbar"></div>
|
<div id="addCconfigurationAlert" class="alert alert-danger alert-dismissible fade show d-none" role="alert">
|
||||||
</div>` )
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||||
$(`#${numberToast}-toast`).toast('show');
|
<span aria-hidden="true">×</span>
|
||||||
$(`#${numberToast}-toast .toast-body`).html(msg);
|
</button>
|
||||||
$(`#${numberToast}-toast .toast-progressbar`).css("transition", `width ${$(`#${numberToast}-toast .toast-progressbar`).parent().data('delay')}ms cubic-bezier(0, 0, 0, 0)`);
|
<div class="alert-body"></div>
|
||||||
$(`#${numberToast}-toast .toast-progressbar`).css("width", "0px");
|
</div>
|
||||||
numberToast++;
|
<form id="add_peer_form">
|
||||||
}
|
<div class="form-group">
|
||||||
|
<div>
|
||||||
|
<label for="addConfigurationPrivateKey">Private Key</label>
|
||||||
$(".toggle--switch").on("change", function(){
|
</div>
|
||||||
$(this).addClass("waiting").attr("disabled", "disabled");
|
<div class="input-group">
|
||||||
let id = $(this).data("conf-id");
|
<input type="text" class="form-control codeFont" id="addConfigurationPrivateKey" aria-describedby="addConfigurationPrivateKey">
|
||||||
let status = $(this).prop("checked");
|
<div class="input-group-append">
|
||||||
let ele = $(this);
|
<button type="button" class="btn btn-danger" id="reGeneratePrivateKey" data-toggle="tooltip" data-placement="top" title="Regenerate Key"><i class="bi bi-arrow-repeat"></i></button>
|
||||||
let label = $(this).siblings("label");
|
</div>
|
||||||
$.ajax({
|
</div>
|
||||||
url: `/switch/${id}`
|
</div>
|
||||||
}).done(function(res){
|
<div class="form-group">
|
||||||
let dot = $(`div[data-conf-id="${id}"] .dot`);
|
<div>
|
||||||
console.log();
|
<label for="addConfigurationPublicKey">Public Key</label>
|
||||||
if (res){
|
</div>
|
||||||
if (status){
|
<div class="input-group">
|
||||||
dot.removeClass("dot-stopped").addClass("dot-running");
|
<input type="text" class="form-control codeFont" id="addConfigurationPublicKey" aria-describedby="addConfigurationPublicKey" disabled>
|
||||||
dot.siblings().text("Running");
|
</div>
|
||||||
showToast(`${id} is running.`)
|
</div>
|
||||||
}else{
|
<div class="row">
|
||||||
dot.removeClass("dot-running").addClass("dot-stopped");
|
<div class="col-sm">
|
||||||
showToast(`${id} is stopped.`)
|
<div class="form-group">
|
||||||
}
|
<label for="addConfigurationName">Configuration Name <code>(Required)</code></label>
|
||||||
ele.removeClass("waiting");
|
<input type="text" class="form-control" id="addConfigurationName">
|
||||||
ele.removeAttr("disabled");
|
</div>
|
||||||
}else{
|
</div>
|
||||||
if (status){
|
<div class="col-sm">
|
||||||
$(this).prop("checked", false)
|
<div class="form-group">
|
||||||
}else{
|
<label for="addConfigurationListenPort">Listen Port <code>(Required)</code></label>
|
||||||
$(this).prop("checked", true)
|
<input type="number" class="form-control codeFont" id="addConfigurationListenPort">
|
||||||
}
|
</div>
|
||||||
}
|
</div>
|
||||||
|
</div>
|
||||||
})
|
<div class="row">
|
||||||
});
|
<div class="col-sm">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="addConfigurationAddress">Address <code>(Required)</code></label>
|
||||||
$('.switch').on("click", function() {
|
<input type="text" class="form-control codeFont" id="addConfigurationAddress" placeholder="Ex: 192.168.0.1/24">
|
||||||
$(this).siblings($(".spinner-border")).css("display", "inline-block")
|
<div id="addConfigurationAddressFeedback" class="input-feedback">
|
||||||
$(this).remove()
|
Please provide a valid city.
|
||||||
location.replace("/switch/"+$(this).attr('id'))
|
</div>
|
||||||
});
|
</div>
|
||||||
$(".sb-home-url").addClass("active");
|
</div>
|
||||||
|
<div class="col-sm">
|
||||||
$(".card-body").on("click", function(handle){
|
<div class="form-group">
|
||||||
if ($(handle.target).attr("class") !== "toggleLabel" && $(handle.target).attr("class") !== "toggle--switch") {
|
<label for="">Available IPs for peers</label>
|
||||||
window.open($(this).find("a").attr("href"), "_self");
|
<p class="addConfigurationAvailableIPs">N/A</p>
|
||||||
}
|
</div>
|
||||||
});
|
</div>
|
||||||
</script>
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="addConfigurationPreUp">PreUp</label>
|
||||||
|
<input type="text" class="form-control codeFont" id="addConfigurationPreUp">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="addConfigurationPreDown">PreDown</label>
|
||||||
|
<input type="text" class="form-control codeFont" id="addConfigurationPreDown">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="addConfigurationPostUp">PostUp</label>
|
||||||
|
<input type="text" class="form-control codeFont" id="addConfigurationPostUp">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="addConfigurationPostDown">PostDown</label>
|
||||||
|
<input type="text" class="form-control codeFont" id="addConfigurationPostDown">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
||||||
|
<button type="button" class="btn btn-primary" id="add_configuration">Add</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% include "tools.html" %}
|
||||||
|
</body>
|
||||||
|
{% include "footer.html" %}
|
||||||
|
<script src="{{ url_for('static',filename='js/wireguard.min.js') }}"></script>
|
||||||
|
<script src="{{ url_for('static',filename='js/index.js') }}"></script>
|
||||||
</html>
|
</html>
|
||||||
@ -67,7 +67,11 @@
|
|||||||
if (res.status === true){
|
if (res.status === true){
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
if (urlParams.get("redirect")){
|
if (urlParams.get("redirect")){
|
||||||
window.location.replace(urlParams.get("redirect"))
|
if (document.URL.substring(0, 5) == "http:"){
|
||||||
|
window.location.replace(`http://${urlParams.get("redirect")}`)
|
||||||
|
}else if (document.URL.substring(0, 5) == "https"){
|
||||||
|
window.location.replace(`https://${urlParams.get("redirect")}`)
|
||||||
|
}
|
||||||
}else{
|
}else{
|
||||||
window.location.replace("/");
|
window.location.replace("/");
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user