wireguard-ui/templates/status.html

{{define "title"}}
Connected Peers
{{end}}

{{define "top_css"}}
{{end}}

{{define "username"}}
{{ .username }}
{{end}}

{{define "page_title"}}
Connected Peers
{{end}}

{{define "page_content"}}
<section class="content">
    <div class="container-fluid">
        {{ if .error }}
        <div class="alert alert-warning" role="alert">{{.error}}</div>
        {{ end}}
        {{ range $dev := .devices }}
            <table class="table table-sm">
                <caption>List of connected peers for device with name {{ $dev.Name }} </caption>
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Name</th>
                  <th scope="col">Email</th>
                  <th scope="col">Public Key</th>
                  <th scope="col">ReceiveBytes</th>
                  <th scope="col">TransmitBytes</th>
                  <th scope="col">Connected (Approximation)</th>
                  <th scope="col">LastHandshakeTime</th>
                </tr>
              </thead>
              <tbody>
              {{ range $idx, $peer := $dev.Peers }}
              <tr {{ if $peer.Connected }} class="table-success" {{ end }}>
                <th scope="row">{{ $idx }}</th>
                <td>{{ $peer.Name }}</td>
                <td>{{ $peer.Email }}</td>
                <td>{{ $peer.PublicKey }}</td>
                <td>{{ $peer.ReceivedBytes }}</td>
                <td>{{ $peer.TransmitBytes }}</td>
                <td>{{ $peer.Connected }}</td>
                <td>{{ $peer.LastHandshakeTime }}</td>
               </tr>
              {{ end }}
              </tbody>
            </table>
        {{ end }}


    </div>
</section>

<div class="modal fade" id="modal_endpoint_address_suggestion">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Endpoint Address Suggestion</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Following is the list of public and local IP addresses for your consideration.</p>
                <select id="ip_suggestion" class="select2"
                    data-placeholder="Select an IP address" style="width: 100%;">
                </select>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" id="btn_use_ip" disabled>Use selected IP address</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
{{end}}

{{define "bottom_js"}}
    <script>
        function submitGlobalSettings() {
            const endpoint_address = $("#endpoint_address").val();
            const dns_servers = $("#dns_servers").val().split(",");
            const mtu = $("#mtu").val();
            const persistent_keepalive = $("#persistent_keepalive").val();
            const config_file_path = $("#config_file_path").val();
            const data = {"endpoint_address": endpoint_address, "dns_servers": dns_servers, "mtu": mtu, "persistent_keepalive": persistent_keepalive, "config_file_path": config_file_path};

            $.ajax({
                cache: false,
                method: 'POST',
                url: '/global-settings',
                dataType: 'json',
                contentType: "application/json",
                data: JSON.stringify(data),
                success: function(data) {
                    $("#modal_new_client").modal('hide');
                    toastr.success('Update global settings successfully');
                },
                error: function(jqXHR, exception) {
                    const responseJson = jQuery.parseJSON(jqXHR.responseText);
                    toastr.error(responseJson['message']);
                }
            });
        }

        function updateEndpointSuggestionIP() {
            $.getJSON("/api/machine-ips", null, function(data) {
                $("#ip_suggestion option").remove();
                $.each(data, function(index, item) {
                    $("#ip_suggestion").append(
                        $("<option></option>")
                            .text(item.ip_address + ' - ' + item.name)
                            .val(item.ip_address)
                    );
                });
                document.getElementById("btn_use_ip").disabled = false;
            });
        }
    </script>
    <script>
        // Wireguard Interface DNS server tag input
        $("#dns_servers").tagsInput({
            'width': '100%',
            'height': '75%',
            'interactive': true,
            'defaultText': 'Add More',
            'removeWithBackspace': true,
            'minChars': 0,
            'placeholderColor': '#666666'
        });

        // Load DNS server to the form
        {{range .globalSettings.DNSServers}}
        $("#dns_servers").addTag('{{.}}');
        {{end}}

        // Global setting form validation
        $(document).ready(function () {
            $.validator.setDefaults({
                submitHandler: function () {
                    submitGlobalSettings();
                }
            });
            $("#frm_global_settings").validate({
                rules: {
                    mtu: {
                        required: true,
                        digits: true,
                        range: [68, 65535]
                    },
                    persistent_keepalive: {
                        required: true,
                        digits: true
                    },
                    config_file_path: {
                        required: true
                    }
                },
                messages: {
                    mtu: {
                        required: "Please enter a MTU value",
                        digits: "MTU must be an integer",
                        range: "MTU must be in range 68..65535"
                    },
                    persistent_keepalive: {
                        required: "Please enter a Persistent Keepalive value",
                        digits: "Persistent keepalive must be an integer"
                    },
                    config_file_path: {
                        required: "Please enter WireGuard config file path"
                    }
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                }
            });
        });

        // Endpoint IP suggestion modal event
        $(document).ready(function () {
            $("#modal_endpoint_address_suggestion").on('shown.bs.modal', function (e) {
                updateEndpointSuggestionIP();
            });
        });

        // Use selected IP address from suggestion form
        $(document).ready(function () {
            $("#btn_use_ip").click(function () {
                const ip = $("#ip_suggestion").select2('val');
                $("#endpoint_address").val(ip);
                $("#modal_endpoint_address_suggestion").modal('hide');
            });
        });
    </script>
{{end}}