mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2025-09-08 04:31:14 +00:00
v2.3 Final Commit
This commit is contained in:
Donald Cheng Hong Zou
@@ -11,11 +11,7 @@
|
||||
<input type="text" class="form-control" id="search_peer_textbox" placeholder="Search Peer..." value="" style="display: none">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="config_body">
|
||||
|
||||
</div>
|
||||
<div id="config_body"></div>
|
||||
</div>
|
||||
<div class="modal fade" id="add_modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
|
||||
aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||
@@ -44,9 +40,7 @@
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="private_key" aria-describedby="public_key">
|
||||
<div class="input-group-append">
|
||||
<button type="button" class="btn btn-danger" id="re_generate_key">
|
||||
<i class="bi bi-arrow-repeat"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger" id="re_generate_key"><i class="bi bi-arrow-repeat"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -73,13 +67,24 @@
|
||||
<input type="text" class="form-control" id="new_add_DNS" value="{{ DNS }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="new_add_endpoint_allowed_ip">Endpoint Allowed IPs <code>(Required)</code></label>
|
||||
<input type="text" class="form-control" id="new_add_endpoint_allowed_ip" value="{{ endpoint_allowed_ip }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="new_add_MTU">MTU</label>
|
||||
<input type="text" class="form-control" id="new_add_MTU" value="{{ mtu }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="new_add_keep_alive">Persistent keepalive</label>
|
||||
<input type="text" class="form-control" id="new_add_keep_alive" value="{{ keep_alive }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -132,29 +137,51 @@
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="peer_name_textbox" class="form-label">Name</label>
|
||||
<input type="text" class="form-control" id="peer_name_textbox" placeholder="">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div>
|
||||
<label for="peer_private_key_textbox" class="form-label">Private Key <code>(Required for QR Code and download)</code></label>
|
||||
<input type="password" class="form-control" id="peer_private_key_textbox" style="padding-right: 40px">
|
||||
<a class="peer_private_key_textbox_switch"><i class="bi bi-eye-fill"></i></a>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="peer_allowed_ip_textbox" class="form-label">Allowed IPs <code>(Required)</code></label>
|
||||
<input type="text" class="form-control" id="peer_allowed_ip_textbox">
|
||||
<hr>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label for="peer_name_textbox" class="form-label">Name</label>
|
||||
<input type="text" class="form-control" id="peer_name_textbox" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label for="peer_allowed_ip_textbox" class="form-label">Allowed IPs <code>(Required)</code></label>
|
||||
<input type="text" class="form-control" id="peer_allowed_ip_textbox">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label for="peer_DNS_textbox" class="form-label">DNS <code>(Required)</code></label>
|
||||
<input type="text" class="form-control" id="peer_DNS_textbox">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label for="peer_endpoint_allowed_ips" class="form-label">Endpoint Allowed IPs <code>(Required)</code></label>
|
||||
<input type="text" class="form-control" id="peer_endpoint_allowed_ips">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label for="peer_mtu" class="form-label">MTU</label>
|
||||
<input type="text" class="form-control" id="peer_mtu">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label for="peer_keep_alive" class="form-label">Persistent Keepalive</label>
|
||||
<input type="text" class="form-control" id="peer_keep_alive">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="peer_DNS_textbox" class="form-label">DNS <code>(Required)</code></label>
|
||||
<input type="text" class="form-control" id="peer_DNS_textbox">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="peer_endpoint_allowed_ips" class="form-label">Endpoint Allowed IPs <code>(Required)</code></label>
|
||||
<input type="text" class="form-control" id="peer_endpoint_allowed_ips">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
||||
@@ -223,9 +250,6 @@
|
||||
},250)
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function load_data(search){
|
||||
startProgressBar()
|
||||
$.ajax({
|
||||
@@ -237,9 +261,7 @@
|
||||
success: function (response){
|
||||
$("#config_body").html(response);
|
||||
$("#search_peer_textbox").css("display", "block")
|
||||
if (bar.css("width") !== "0%"){
|
||||
endProgressBar()
|
||||
}
|
||||
endProgressBar()
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -249,8 +271,6 @@
|
||||
load_data($('#search_peer_textbox').val());
|
||||
}, {{dashboard_refresh_interval}})
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
<script src="{{ url_for('static',filename='js/configuration.js') }}"></script>
|
||||
</html>
|
||||
@@ -1,9 +1,19 @@
|
||||
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4 mb-4">
|
||||
<div class="info mt-4">
|
||||
{% if conf_data['listen_port'] == "" and conf_data['status'] == "stopped" %}
|
||||
<div class="alert alert-warning" role="alert">
|
||||
Peer QR Code and configuration file download required a specified <strong>Listen Port</strong>.
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if conf_data['conf_address'] == "N/A" %}
|
||||
<div class="alert alert-warning" role="alert">
|
||||
Configuration <strong>Address</strong> not be specified to have peer connect to it.
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<small class="text-muted"><strong>CONFIGURATION</strong></small>
|
||||
<h1 class="mb-3">{{conf_data['name']}}</h1>
|
||||
<h1 class="mb-3"><samp>{{conf_data['name']}}</samp></h1>
|
||||
</div>
|
||||
<div class="col">
|
||||
<small class="text-muted"><strong>ACTION</strong></small><br>
|
||||
@@ -47,7 +57,14 @@
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>LISTEN PORT</strong></small>
|
||||
<h6 style="text-transform: uppercase;"><samp>{{conf_data['listen_port']}}</samp></h6>
|
||||
<h6 style="text-transform: uppercase;"><samp>
|
||||
{% if conf_data['listen_port'] == "" %}
|
||||
N/A
|
||||
{% else %}
|
||||
{{conf_data['listen_port']}}
|
||||
{% endif %}
|
||||
|
||||
</samp></h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>ADDRESS</strong></small>
|
||||
@@ -88,20 +105,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<div class="form-group">
|
||||
<label><small class="text-muted">Add</small></label><br>
|
||||
<button type="button" class="btn btn-primary add_btn" data-toggle="modal" data-target="#add_modal" style="width: 100%">
|
||||
<i class="bi bi-plus-circle-fill"></i> Add Peer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary add_btn" data-toggle="modal" data-target="#add_modal">
|
||||
<i class="bi bi-plus-circle-fill" style=""></i> Add Peer
|
||||
</button>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row peer_list">
|
||||
{% if conf_data['peer_data']|length == 0 %}
|
||||
<div class="col-12" style="text-align: center; margin-top: 1.5rem">
|
||||
<h3 class="text-muted">Oops! No peers found ‘︿’</h3>
|
||||
@@ -112,29 +124,34 @@
|
||||
{% if peer_display_mode == "list" %}
|
||||
<div class="col-12">
|
||||
{% else %}
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
{% endif %}
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="col">
|
||||
<div class="card-header-body ">
|
||||
{% if not i['name']%}
|
||||
{{ "Untitled Peer" }}
|
||||
{{ "Untitled" }}
|
||||
{% else %}
|
||||
{{i['name']}}
|
||||
{% endif %}
|
||||
<span class="dot dot-{{i['status']}}"></span>
|
||||
{# <span class="dot dot-{{i['status']}}"></span>#}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 peer_data_group">
|
||||
<p class="text-primary" style="text-transform: uppercase; display: inline-block; margin-bottom: 0; margin-right: 1rem"><i class="bi bi-arrow-down-right"></i> {{i['total_receive']}} GB</p>
|
||||
<p class="text-success" style="text-transform: uppercase; display: inline-block; margin-bottom: 0"><i class="bi bi-arrow-up-right"></i> {{i['total_sent']}} GB</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<small class="text-muted"><strong>STATUS</strong></small>
|
||||
<h6 style="text-transform: uppercase;" class="mb-2"><span class="dot dot-{{i['status']}}" style="margin-left: 0 !important;margin-top: 5px"></span></h6>
|
||||
</div>
|
||||
<div class="col-6 peer_data_group" style="text-align: right">
|
||||
<small class="text-muted"><strong>TRANSFER</strong></small>
|
||||
<p class="text-primary" style="text-transform: uppercase; margin-bottom: 0;"><small><i class="bi bi-arrow-down-right"></i> {{i['total_receive']}} GB</small></p>
|
||||
<p class="text-success" style="text-transform: uppercase; margin-bottom: 0"><small><i class="bi bi-arrow-up-right"></i> {{i['total_sent']}} GB</small></p>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted" style="display: flex">
|
||||
<strong>PEER</strong>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<html>
|
||||
{% with %}
|
||||
{% set title="Settings" %}
|
||||
{% include "header.html"%}
|
||||
{% include "header.html" %}
|
||||
{% endwith %}
|
||||
<body>
|
||||
{% include "navbar.html" %}
|
||||
@@ -14,86 +14,124 @@
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<h1 class="pb-4">Settings</h1>
|
||||
<h1 class="">Settings</h1>
|
||||
<hr>
|
||||
{% if required_auth == "true" %}
|
||||
<h3>Account</h3>
|
||||
<form action="/update_acct" method="post">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" class="form-control mb-4" id="username" name="username"
|
||||
value="{{ session['username'] }}" required>
|
||||
<button type="submit" class="btn btn-success">Update Account</button>
|
||||
</div>
|
||||
</form>
|
||||
<hr>
|
||||
<h3>New Peer Default Settings</h3>
|
||||
<form action="/update_peer_default_config" method="post">
|
||||
<div class="form-group">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<label for="username">DNS</label>
|
||||
<input type="text" class="form-control mb-4" id="peer_global_DNS" name="peer_global_DNS"
|
||||
value="{{ peer_global_DNS }}" required>
|
||||
<div class="card mb-3">
|
||||
<h6 class="card-header">Peer Default Settings</h6>
|
||||
<div class="card-body">
|
||||
<form action="/update_peer_default_config" method="post">
|
||||
<div class="form-group">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<label for="peer_global_DNS">DNS</label>
|
||||
<input type="text" class="form-control mb-4" id="peer_global_DNS"
|
||||
name="peer_global_DNS"
|
||||
value="{{ peer_global_DNS }}" required>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<label for="peer_endpoint_allowed_ip">Peer Endpoint Allowed IPs</label>
|
||||
<input type="text" class="form-control mb-4" id="peer_endpoint_allowed_ip"
|
||||
name="peer_endpoint_allowed_ip"
|
||||
value="{{ peer_endpoint_allowed_ip }}" required>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<label for="peer_mtu">MTU</label>
|
||||
<input type="text" class="form-control mb-4" id="peer_mtu"
|
||||
name="peer_mtu"
|
||||
value="{{ peer_mtu }}">
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<label for="peer_keep_alive">Persistent Keepalive</label>
|
||||
<input type="text" class="form-control mb-4" id="peer_keep_alive"
|
||||
name="peer_keep_alive"
|
||||
value="{{ peer_keepalive }}">
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<label for="peer_remote_endpoint"><strong>Peer Remote Endpoint (This will be change globally, and will be apply to all peer's QR code and configuration file.)</strong></label>
|
||||
<input type="text" class="form-control mb-4" id="peer_remote_endpoint"
|
||||
name="peer_remote_endpoint"
|
||||
value="{{ peer_remote_endpoint }}" required>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-success" type="submit">Update Peer Default Settings</button>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<label for="username">Peer Endpoint Allowed IPs</label>
|
||||
<input type="text" class="form-control mb-4" id="peer_endpoint_allowed_ip" name="peer_endpoint_allowed_ip"
|
||||
value="{{ peer_endpoint_allowed_ip }}" required>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-success" type="submit">Update Peer Default Settings</button>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
<hr>
|
||||
|
||||
|
||||
<h3>WireGuard Configuration Path</h3>
|
||||
<form action="/update_wg_conf_path" method="post" class="update_wg_conf_path">
|
||||
<div class="form-group">
|
||||
<label for="username">Path</label>
|
||||
<input type="text" class="form-control mb-4" id="wg_conf_path" name="wg_conf_path"
|
||||
value="{{ wg_conf_path }}">
|
||||
<p>Remember to remove <code>/</code> at the end of your path. e.g <code>/etc/wireguard</code>
|
||||
</p>
|
||||
<button class="btn btn-danger change_path">Update Path & Restart Dashboard</button>
|
||||
</div>
|
||||
</form>
|
||||
<hr>
|
||||
<h3>Security</h3>
|
||||
<form action="/update_pwd" , method="post">
|
||||
<div class="form-group">
|
||||
<label for="currentpass">Current Password</label>
|
||||
<input type="password" class="form-control mb-2" id="currentpass" name="currentpass">
|
||||
<label for="newpass">New Password</label>
|
||||
<input type="password" class="form-control mb-2" id="newpass" name="newpass">
|
||||
<label for="repnewpass">Repeat New Password</label>
|
||||
<input type="password" class="form-control mb-4" id="repnewpass" name="repnewpass">
|
||||
<button type="submit" class="btn btn-danger">Update Password</button>
|
||||
</div>
|
||||
</form>
|
||||
<hr>
|
||||
{% endif %}
|
||||
<h3>Dashboard Configuration</h3>
|
||||
<form action="/update_app_ip_port" method="post" class="update_app_ip_port">
|
||||
<div class="form-group">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<label for="app_ip">Dashboard IP</label>
|
||||
<input type="text" class="form-control mb-2" id="app_ip" name="app_ip" value="{{ app_ip }}">
|
||||
<p><small class="text-danger mb-4">0.0.0.0 means it can be access by anyone with your server
|
||||
IP Address.</small></p>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<label for="app_port">Dashboard Port</label>
|
||||
<input type="text" class="form-control mb-4" id="app_port" name="app_port"
|
||||
value="{{ app_port }}">
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-danger confirm_modal" data-toggle="modal"
|
||||
data-target="#confirmModal">Update Configuration & Restart
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<hr>
|
||||
<div class="card mb-3">
|
||||
<h6 class="card-header">WireGuard Configuration Path</h6>
|
||||
<div class="card-body">
|
||||
<form action="/update_wg_conf_path" method="post" class="update_wg_conf_path">
|
||||
<div class="form-group">
|
||||
<label for="wg_conf_path">Path</label>
|
||||
<input type="text" class="form-control mb-2" id="wg_conf_path" name="wg_conf_path"
|
||||
value="{{ wg_conf_path }}">
|
||||
<p class="text-muted">Remember to remove <code>/</code> at the end of your path. e.g <code>/etc/wireguard</code>
|
||||
</p>
|
||||
<button class="btn btn-danger change_path">Update Path & Restart Dashboard</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-3">
|
||||
<h6 class="card-header">Account</h6>
|
||||
<div class="card-body">
|
||||
<form action="/update_acct" method="post">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" class="form-control mb-4" id="username" name="username"
|
||||
value="{{ session['username'] }}" required>
|
||||
<button type="submit" class="btn btn-danger">Update Account</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-3">
|
||||
<h6 class="card-header">Security</h6>
|
||||
<div class="card-body">
|
||||
<form action="/update_pwd" method="post">
|
||||
<div class="form-group">
|
||||
<label for="currentpass">Current Password</label>
|
||||
<input type="password" class="form-control mb-2" id="currentpass" name="currentpass">
|
||||
<label for="newpass">New Password</label>
|
||||
<input type="password" class="form-control mb-2" id="newpass" name="newpass">
|
||||
<label for="repnewpass">Repeat New Password</label>
|
||||
<input type="password" class="form-control mb-4" id="repnewpass" name="repnewpass">
|
||||
<button type="submit" class="btn btn-danger">Update Password</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="card">
|
||||
<h6 class="card-header">Dashboard Configuration</h6>
|
||||
<div class="card-body">
|
||||
<form action="/update_app_ip_port" method="post" class="update_app_ip_port">
|
||||
<div class="form-group">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<label for="app_ip">Dashboard IP</label>
|
||||
<input type="text" class="form-control mb-2" id="app_ip" name="app_ip" value="{{ app_ip }}">
|
||||
<p><small class="text-danger mb-4">0.0.0.0 means it can be access by anyone with your server
|
||||
IP Address.</small></p>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<label for="app_port">Dashboard Port</label>
|
||||
<input type="text" class="form-control mb-4" id="app_port" name="app_port"
|
||||
value="{{ app_port }}">
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-danger confirm_modal" data-toggle="modal"
|
||||
data-target="#confirmModal">Update Configuration & Restart Dashboard
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Modal -->
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
</h6>
|
||||
<ul class="nav flex-column">
|
||||
{% for i in conf%}
|
||||
<li class="nav-item"><a class="nav-link sb-{{i['conf']}}-url" href="/configuration/{{i['conf']}}">{{i['conf']}}</a></li>
|
||||
<li class="nav-item"><a class="nav-link sb-{{i['conf']}}-url" href="/configuration/{{i['conf']}}"><samp>{{i['conf']}}</samp></a></li>
|
||||
{%endfor%}
|
||||
</ul>
|
||||
<hr>
|
||||
|
||||
@@ -36,4 +36,9 @@
|
||||
</div>
|
||||
</body>
|
||||
{% include "footer.html" %}
|
||||
<script>
|
||||
$("button").click(function(){
|
||||
$(this).html("Signing In...")
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
Reference in New Issue
Block a user