mirror of
https://github.com/WGDashboard/WGDashboard.git
synced 2026-08-03 22:42:59 +00:00
Donald Zou
428 lines
23 KiB
HTML
428 lines
23 KiB
HTML
<div class="modal fade" id="peerDataUsage">
|
|
<div class="modal-dialog modal-dialog-centered modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="staticBackdropLabel">Data Usage</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
|
|
aria-hidden="true">×</span></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="chartControl peerDataUsageChartControl col-sm">
|
|
<label><small class="text-muted">Data Unit Size</small></label><br>
|
|
<div class="btn-group" role="group" style="width: 100%;">
|
|
<button class="btn btn-outline-primary btn-sm switchUnit" data-unit="GB">GB</button>
|
|
<button class="btn btn-outline-primary btn-sm switchUnit" data-unit="MB">MB</button>
|
|
<button class="btn btn-outline-primary btn-sm switchUnit" data-unit="KB">KB</button>
|
|
</div>
|
|
</div>
|
|
<div class="chartControl peerDataUsageChartControl col-sm">
|
|
<label><small class="text-muted">Time Period</small></label><br>
|
|
<div class="btn-group" role="group" style="width: 100%;">
|
|
<button class="btn btn-outline-primary btn-sm switchTimePeriod" data-time="30min">30
|
|
min</button>
|
|
<button class="btn btn-outline-primary btn-sm switchTimePeriod" data-time="1h">1hr</button>
|
|
<button class="btn btn-outline-primary btn-sm switchTimePeriod" data-time="6h">6hrs</button>
|
|
<button class="btn btn-outline-primary btn-sm switchTimePeriod"
|
|
data-time="24h">24hrs</button>
|
|
<button class="btn btn-outline-primary btn-sm switchTimePeriod" data-time="all">All</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<small class="text-muted peerDataUsageUpdateTime" style="position: absolute; right: 1rem;">2023</small>
|
|
|
|
<div class="peerDataUsageChartContainer">
|
|
<canvas id="peerDataUsageChartObj"></canvas>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="add_modal">
|
|
<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 Peer</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div>
|
|
<div class="custom-control custom-switch" style="margin-bottom: 1rem">
|
|
<input class="custom-control-input" type="checkbox" id="bulk_add">
|
|
<label class="custom-control-label" for="bulk_add"><strong>Add Peers by
|
|
bulk</strong></label>
|
|
<i class="bi bi-question-circle-fill" style="cursor: pointer" data-container="body"
|
|
data-toggle="popover" data-placement="right" data-trigger="click"
|
|
data-content="By adding peers by bulk, each peer's name will be auto generated, and Allowed IP will be assign to the next available IP."></i>
|
|
</div>
|
|
<div class="form-group" style="margin: 0">
|
|
<input type="number" class="form-control" id="new_add_amount" min="1" placeholder="Amount"
|
|
disabled>
|
|
<div id="bulk_amount_validation" class="invalid-feedback"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<hr>
|
|
<div id="add_peer_alert" 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>
|
|
<form id="add_peer_form">
|
|
<div class="form-group">
|
|
<div>
|
|
<label for="private_key">Private Key</label>
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control non-bulk" id="private_key"
|
|
aria-describedby="private_key">
|
|
<div class="input-group-append">
|
|
<button type="button" class="btn btn-danger non-bulk" id="re_generate_key"
|
|
data-toggle="tooltip" data-placement="top" title="Regenerate Key"><i
|
|
class="bi bi-arrow-repeat"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="public_key">Public Key <code>(Required)</code></label>
|
|
<input type="text" class="form-control non-bulk" id="public_key" aria-describedby="public_key"
|
|
disabled>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<div class="form-group">
|
|
<label for="new_add_name">Name</label>
|
|
<input type="text" class="form-control non-bulk" id="new_add_name">
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="form-group">
|
|
<label for="allowed_ips">Allowed IPs <code>(Required)</code></label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control non-bulk" id="allowed_ips">
|
|
<div class="input-group-append">
|
|
<button type="button" class="btn btn-primary non-bulk" id="search_available_ip"
|
|
data-toggle="tooltip" data-placement="top" title="Search Available IPs">
|
|
<i class="bi bi-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<p style="position: absolute; top: 4px; right: 1rem;" class="text-success"
|
|
id="allowed_ips_indicator"></p>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="form-group">
|
|
<label for="new_add_DNS">DNS <code>(Required)</code></label>
|
|
<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 class="col-sm">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="enable_preshare_key"
|
|
name="enable_preshare_key" value="enable_psk">
|
|
<label class="form-check-label" for="enable_preshare_key">Use Pre-shared Key</label>
|
|
</div>
|
|
</div>
|
|
</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="save_peer">Add</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="configuration_delete_modal">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="staticBackdropLabel">Are you sure to delete this configuration?</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="remove_configuration_alert" class="alert alert-danger alert-dismissible fade show d-none"
|
|
role="alert">
|
|
|
|
</div>
|
|
<p style="margin: 0">This action is not reversible. The configuration will get toggle off, and
|
|
delete from database and from the configuration folder.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
|
|
<button type="button" class="btn btn-danger" id="sure_delete_configuration">Yes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="delete_modal">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="staticBackdropLabel">Are you sure to delete this peer?</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="remove_peer_alert" 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>
|
|
<h6 style="margin: 0">This action is not reversible.</h6>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
|
|
<button type="button" class="btn btn-danger" id="delete_peer" conf_id={{conf_data['name']}}
|
|
peer_id="">Yes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="setting_modal" peer_id="">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title peer_name"></h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="setting_peer_alert" 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>
|
|
<div class="mb-3">
|
|
<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>
|
|
<label for="peer_preshared_key_textbox" class="form-label">Pre-Shared Key</label>
|
|
<input type="text" class="form-control" id="peer_preshared_key_textbox">
|
|
</div>
|
|
<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>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" id="save_peer_setting" conf_id={{conf_data['name']}}
|
|
peer_id="">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="available_ip_modal" data-backdrop="static" data-keyboard="false">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="staticBackdropLabel">Select available IP</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="selected_ip" style="padding: 1rem; border-bottom: 1px solid #dee2e6;">
|
|
<small class="text-muted"><strong>SELECTED IP (CLICK TO REMOVE)</strong></small>
|
|
<div id="selected_ip_list"></div>
|
|
</div>
|
|
<div class="modal-body" style="max-height: 400px; overflow-y: scroll;">
|
|
<div class="list-group"></div>
|
|
</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="confirm_ip">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="delete_bulk_modal" data-backdrop="static" data-keyboard="false">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="staticBackdropLabel">Select Peers to Delete</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div id="bulk_remove_peer_alert" class="alert alert-danger alert-dismissible fade show d-none" role="alert"
|
|
style="margin: 1rem">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="selected_peers" style="padding: 1rem; border-bottom: 1px solid #dee2e6;">
|
|
<small class="text-muted"><strong>SELECTED PEERS (CLICK TO REMOVE)</strong></small>
|
|
<div id="selected_peer_list"></div>
|
|
</div>
|
|
<div class="modal-body" style="max-height: 400px; overflow-y: scroll;">
|
|
<div class="list-group"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a class="text-danger" id="select_all_delete_bulk_peers"
|
|
style="cursor: pointer; margin-right: auto;"><small><strong>SELECT ALL</strong></small></a>
|
|
<button type="button" class="btn btn-danger" id="confirm_delete_bulk_peers" disabled
|
|
data-conf="{{conf_data['name']}}">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="qrcode_modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
|
|
aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">QR Code</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<img id="qrcode_img" style="width: 100%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="editConfigurationModal">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="staticBackdropLabel">Edit Configuration</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="addCconfigurationAlert" class="alert alert-danger alert-dismissible fade show d-none"
|
|
role="alert">
|
|
<div class="alert-body"></div>
|
|
</div>
|
|
<pre id="addCconfigurationAlertMessage" class="index-alert d-none"></pre>
|
|
<form id="add_configuration_form">
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="form-group">
|
|
<label for="editConfigurationName">Configuration Name</label>
|
|
<p id="editConfigurationName"></p>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm">
|
|
<div class="form-group">
|
|
<label for="editConfigurationAddress">Address</label>
|
|
<p class="codeFont" id="editConfigurationAddress"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="editConfigurationPrivateKey">Private Key</label>
|
|
<p class="codeFont" id="editConfigurationPrivateKey"></p>
|
|
</div>
|
|
<hr>
|
|
<div class="form-group">
|
|
<label for="editConfigurationListenPort">Listen Port <code>*</code></label>
|
|
<input type="number" class="form-control codeFont" id="editConfigurationListenPort"
|
|
name="editConfigurationListenPort" required>
|
|
<div id="editConfigurationListenPortFeedback" class="input-feedback"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="editConfigurationPreUp">PreUp</label>
|
|
<input type="text" class="form-control codeFont" id="editConfigurationPreUp"
|
|
name="editConfigurationPreUp">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="editConfigurationPreDown">PreDown</label>
|
|
<input type="text" class="form-control codeFont" id="editConfigurationPreDown"
|
|
name="editConfigurationPreDown">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="editConfigurationPostUp">PostUp</label>
|
|
<input type="text" class="form-control codeFont" id="editConfigurationPostUp"
|
|
name="editConfigurationPostUp">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="editConfigurationPostDown">PostDown</label>
|
|
<input type="text" class="form-control codeFont" id="editConfigurationPostDown"
|
|
name="editConfigurationPostDown">
|
|
</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="editConfigurationBtn">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |