mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2024-11-06 07:50:13 +01:00
Add configuration and adjusted redirect functionality
This commit is contained in:
parent
bdd984a887
commit
cc1dd682e8
@ -674,7 +674,11 @@ def auth_req():
|
||||
else:
|
||||
session['message'] = ""
|
||||
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:
|
||||
if request.endpoint in ['signin', 'signout', 'auth', 'settings', 'update_acct', 'update_pwd',
|
||||
'update_app_ip_port', 'update_wg_conf_path']:
|
||||
@ -1533,7 +1537,6 @@ def switch_display_mode(mode):
|
||||
@app.route('/api/togglePeerAccess', methods=['POST'])
|
||||
def togglePeerAccess():
|
||||
data = request.get_json()
|
||||
print(data['peerID'])
|
||||
returnData = {"status": True, "reason": ""}
|
||||
required = ['peerID', 'config']
|
||||
if checkJSONAllParameter(required, data):
|
||||
@ -1572,7 +1575,26 @@ def togglePeerAccess():
|
||||
|
||||
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
|
||||
@ -1789,5 +1811,4 @@ if __name__ == "__main__":
|
||||
app_port = config.get("Server", "app_port")
|
||||
WG_CONF_PATH = config.get("Server", "wg_conf_path")
|
||||
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;*/
|
||||
}
|
||||
|
||||
.codeFont{
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
|
||||
.feather {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
@ -307,7 +311,7 @@ main {
|
||||
right: 0;
|
||||
box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
|
||||
border-radius: 10px;
|
||||
min-width: 200px;
|
||||
min-width: 250px;
|
||||
display: none;
|
||||
transform: translateY(-30px);
|
||||
opacity: 0;
|
||||
@ -760,4 +764,12 @@ pre.index-alert {
|
||||
height: 4px;
|
||||
background-color: #007bff;
|
||||
border-bottom-left-radius: .25rem;
|
||||
}
|
||||
|
||||
.addConfigurationAvailableIPs{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.input-feedback{
|
||||
display: none;
|
||||
}
|
@ -4,12 +4,11 @@
|
||||
*/
|
||||
|
||||
|
||||
|
||||
let peers = [];
|
||||
(function() {
|
||||
/**
|
||||
* Definitions
|
||||
*/
|
||||
let peers = [];
|
||||
*/
|
||||
let configuration_name;
|
||||
let configuration_interval;
|
||||
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-secondary setting_btn"><i class="bi bi-three-dots"></i></button>
|
||||
<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-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>
|
||||
|
@ -63,81 +63,111 @@
|
||||
{%endfor%}
|
||||
</main>
|
||||
</div>
|
||||
<div class="position-fixed top-0 right-0 p-3 toastContainer" style="z-index: 5; right: 0; top: 50px;">
|
||||
|
||||
</div>
|
||||
{% include "tools.html" %}
|
||||
</body>
|
||||
{% include "footer.html" %}
|
||||
<script>
|
||||
let numberToast = 0;
|
||||
|
||||
|
||||
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">
|
||||
<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">
|
||||
<button type="button" class="btn btn-primary add_btn" id="toggleAddConfiguration"><i class="bi bi-plus-circle-fill"></i></button>
|
||||
</div>
|
||||
<div class="modal fade" id="addConfigurationModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
|
||||
aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="staticBackdropLabel">Add New Configuration</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" 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");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<div class="modal-body">
|
||||
<div id="addCconfigurationAlert" class="alert alert-danger alert-dismissible fade show d-none" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<div class="alert-body"></div>
|
||||
</div>
|
||||
<form id="add_peer_form">
|
||||
<div class="form-group">
|
||||
<div>
|
||||
<label for="addConfigurationPrivateKey">Private Key</label>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control codeFont" id="addConfigurationPrivateKey" aria-describedby="addConfigurationPrivateKey">
|
||||
<div class="input-group-append">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div>
|
||||
<label for="addConfigurationPublicKey">Public Key</label>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control codeFont" id="addConfigurationPublicKey" aria-describedby="addConfigurationPublicKey" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="form-group">
|
||||
<label for="addConfigurationName">Configuration Name <code>(Required)</code></label>
|
||||
<input type="text" class="form-control" id="addConfigurationName">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<div class="form-group">
|
||||
<label for="addConfigurationListenPort">Listen Port <code>(Required)</code></label>
|
||||
<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>
|
||||
<input type="text" class="form-control codeFont" id="addConfigurationAddress" placeholder="Ex: 192.168.0.1/24">
|
||||
<div id="addConfigurationAddressFeedback" class="input-feedback">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<div class="form-group">
|
||||
<label for="">Available IPs for peers</label>
|
||||
<p class="addConfigurationAvailableIPs">N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
@ -67,7 +67,11 @@
|
||||
if (res.status === true){
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
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{
|
||||
window.location.replace("/");
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user