2022-01-12 19:53:36 -05:00
<!-- index.html - < WGDashboard > - Copyright(C) 2021 Donald Zou [https://github.com/donaldzou] -->
< html lang = "en" >
2021-08-14 23:30:05 -04:00
{% with %}
{% set title="Home" %}
{% include "header.html"%}
{% endwith %}
2020-10-18 01:10:13 -04:00
< body >
2021-05-04 01:32:34 -04:00
{% include "navbar.html" %}
2020-10-18 01:10:13 -04:00
< div class = "container-fluid" >
2021-05-04 01:32:34 -04:00
{% include "sidebar.html" %}
2022-03-29 15:11:50 -04:00
< main role = "main" class = "col-md-9 ml-sm-auto col-lg-10 px-md-4 mb-4" style = "margin-bottom: 10rem !important;" >
2022-01-12 19:53:36 -05:00
< div style = "display: flex; flex-direction: row; align-items: center;" >
< h1 class = "pb-4 mt-4" > Home< / h1 >
< / div >
2022-03-24 02:10:52 -04:00
<!-- {% if msg != "" %}
2022-01-13 09:37:23 -05:00
< div class = "alert alert-danger" role = "alert" >
Configuration toggle failed. Please check the following error message:
< / div >
< pre class = "index-alert" > < code > {{ msg }}< / code > < / pre >
2022-03-24 02:10:52 -04:00
{% endif %} -->
< div class = "index-alert alert alert-danger d-none" role = "alert" >
Configuration toggle failed. Please check the following error message:
< / div >
< pre class = "index-alert index-alert-full d-none" > < code > < / code > < / pre >
2022-01-12 19:53:36 -05:00
2021-07-02 13:23:04 -04:00
{% if conf == [] %}
< p class = "text-muted" > You don't have any WireGuard configurations yet. Please check the configuration folder or change it in "Settings". By default the folder is "/etc/wireguard".< / p >
{% endif %}
2022-03-24 20:43:56 -04:00
2020-10-18 01:10:13 -04:00
{% for i in conf%}
2022-03-21 22:33:19 -04:00
< div class = "card mt-3 conf_card" data-conf-id = "{{i['conf']}}" >
2020-10-18 01:10:13 -04:00
< div class = "card-body" >
2020-10-18 01:52:53 -04:00
< div class = "row" >
2021-05-04 01:32:34 -04:00
< div class = "col card-col" >
2020-10-23 01:31:10 -04:00
< small class = "text-muted" > < strong > CONFIGURATION< / strong > < / small >
2021-12-29 12:17:44 -05:00
< a href = "/configuration/{{i['conf']}}" class = "conf_link" >
2022-01-12 19:53:36 -05:00
< h6 class = "card-title" style = "margin:0 !important;" > < samp > {{i['conf']}}< / samp > < / h6 >
2020-10-18 12:23:38 -04:00
< / a >
< / div >
2021-05-04 01:32:34 -04:00
< div class = "col card-col" >
2020-10-18 01:52:53 -04:00
< small class = "text-muted" > < strong > STATUS< / strong > < / small >
2022-03-21 22:33:19 -04:00
< h6 style = "text-transform: uppercase; margin:0 !important;" > < span > {{i['status']}}< / span > < span class = "dot dot-{{i['status']}}" > < / span > < / h6 >
2020-10-18 01:52:53 -04:00
< / div >
2022-03-21 22:33:19 -04:00
< div class = "col-sm card-col" >
2020-10-18 01:52:53 -04:00
< small class = "text-muted" > < strong > PUBLIC KEY< / strong > < / small >
2022-01-16 20:35:24 -05:00
< h6 style = "margin:0 !important;" > < samp > {{i['public_key']}}< / samp > < / h6 >
2021-05-04 01:32:34 -04:00
< / div >
2022-03-21 22:33:19 -04:00
< div class = "col-sm index-switch" >
< div class = "switch-test" >
< input type = "checkbox" class = "toggle--switch" id = "{{i['conf']}}-switch" { { i [ ' checked ' ] } } data-conf-id = "{{i['conf']}}" >
< label for = "{{i['conf']}}-switch" class = "toggleLabel" > < / label >
< / div >
2020-10-18 01:52:53 -04:00
< / div >
< / div >
2022-03-24 02:10:52 -04:00
< div class = "card-message" > < / div >
2020-10-18 01:10:13 -04:00
< / div >
2022-03-24 20:43:56 -04:00
2020-10-18 01:10:13 -04:00
< / div >
{%endfor%}
< / main >
< / div >
2022-03-22 16:13:57 -04:00
< 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" >
2022-03-21 22:33:19 -04:00
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
2022-03-22 16:13:57 -04:00
< 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 >
2022-03-24 02:10:52 -04:00
< pre id = "addCconfigurationAlertMessage" class = "index-alert d-none" > < / pre >
< form id = "add_configuration_form" >
2022-03-22 16:13:57 -04:00
< div class = "form-group" >
< div >
2022-03-24 02:10:52 -04:00
< label for = "addConfigurationPrivateKey" > Private Key < code > *< / code > < / label >
2022-03-22 16:13:57 -04:00
< / div >
< div class = "input-group" >
2022-03-24 02:10:52 -04:00
< input type = "text" class = "form-control codeFont" id = "addConfigurationPrivateKey" name = "addConfigurationPrivateKey" required >
2022-03-22 16:13:57 -04:00
< 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 >
2022-03-24 02:10:52 -04:00
< div id = "addConfigurationPrivateKeyFeedback" class = "input-feedback" > < / div >
2022-03-22 16:13:57 -04:00
< / div >
< / div >
< div class = "row" >
< div class = "col-sm" >
< div class = "form-group" >
2022-03-24 02:10:52 -04:00
< label for = "addConfigurationName" > Configuration Name < code > *< / code > < / label >
< input type = "text" class = "form-control" id = "addConfigurationName" name = "addConfigurationName" required >
< div id = "addConfigurationNameFeedback" class = "input-feedback" > < / div >
2022-03-22 16:13:57 -04:00
< / div >
< / div >
< div class = "col-sm" >
< div class = "form-group" >
2022-03-24 02:10:52 -04:00
< label for = "addConfigurationListenPort" > Listen Port < code > *< / code > < / label >
< input type = "number" class = "form-control codeFont" id = "addConfigurationListenPort" name = "addConfigurationListenPort" required >
< div id = "addConfigurationListenPortFeedback" class = "input-feedback" > < / div >
2022-03-22 16:13:57 -04:00
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm" >
< div class = "form-group" >
2022-03-24 02:10:52 -04:00
< label for = "addConfigurationAddress" > Address < code > *< / code >
< / label >
< input type = "text" class = "form-control codeFont" id = "addConfigurationAddress" placeholder = "Ex: 192.168.0.1/24" name = "addConfigurationAddress" required >
< div id = "addConfigurationAddressFeedback" class = "input-feedback" > < / div >
2022-03-22 16:13:57 -04:00
< / div >
< / div >
< div class = "col-sm" >
< div class = "form-group" >
2022-03-24 02:10:52 -04:00
< label for = "" > # of available IPs< / label >
2022-03-22 16:13:57 -04:00
< p class = "addConfigurationAvailableIPs" > N/A< / p >
< / div >
< / div >
< / div >
< hr >
< div class = "form-group" >
< label for = "addConfigurationPreUp" > PreUp< / label >
2022-03-24 02:10:52 -04:00
< input type = "text" class = "form-control codeFont" id = "addConfigurationPreUp" name = "addConfigurationPreUp" >
2022-03-22 16:13:57 -04:00
< / div >
< div class = "form-group" >
< label for = "addConfigurationPreDown" > PreDown< / label >
2022-03-24 02:10:52 -04:00
< input type = "text" class = "form-control codeFont" id = "addConfigurationPreDown" name = "addConfigurationPreDown" >
2022-03-22 16:13:57 -04:00
< / div >
< div class = "form-group" >
< label for = "addConfigurationPostUp" > PostUp< / label >
2022-03-24 02:10:52 -04:00
< input type = "text" class = "form-control codeFont" id = "addConfigurationPostUp" name = "addConfigurationPostUp" >
2022-03-22 16:13:57 -04:00
< / div >
< div class = "form-group" >
< label for = "addConfigurationPostDown" > PostDown< / label >
2022-03-24 02:10:52 -04:00
< input type = "text" class = "form-control codeFont" id = "addConfigurationPostDown" name = "addConfigurationPostDown" >
2022-03-22 16:13:57 -04:00
< / div >
< / form >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Cancel< / button >
2022-03-24 02:10:52 -04:00
< button type = "button" class = "btn btn-primary" id = "addConfigurationBtn" > Add< / button >
2022-03-24 20:43:56 -04:00
< div class = "text-primary addConfigurationStatus addConfigurationAddStatus d-none" >
< div class = "spinner-border spinner-border-sm" role = "status" > < span class = "sr-only" > Loading...< / span > < / div >
Add Configuration
< / div >
< div class = "text-primary addConfigurationStatus addConfigurationToggleStatus d-none waiting" >
< i class = "bi bi-circle" > < / i > Toggle Configuration
< / div >
2022-03-22 16:13:57 -04:00
< / 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 >
2022-03-24 20:43:56 -04:00
2020-10-18 01:10:13 -04:00
< / html >
