wireguard-ui/templates/clients.html

{{define "title"}}
Wireguard Clients
{{end}}

{{define "top_css"}}
<style>
    .paused-client {
        transition: transform .2s;
        cursor: pointer;
    }
    i[class^="paused-client"]:hover { transform: scale(1.5); }
</style>
{{end}}

{{define "username"}}
Admin
{{end}}

{{define "page_title"}}
Wireguard Clients
{{end}}

{{define "page_content"}}
<section class="content">
    <div class="container-fluid">
        <!-- <h5 class="mt-4 mb-2">Wireguard Clients</h5> -->
        <div class="row">
            {{range .clientDataList}}
            <div class="col-sm-6" id="client_{{.Client.ID}}">
                <div class="info-box">
                    <div class="overlay" id="paused_{{.Client.ID}}"
                        {{if eq .Client.Enabled true}}style="visibility: hidden;" {{end}}>
                        <i class="paused-client fas fa-3x fa-play" onclick="resumeClient('{{.Client.ID}}')"></i>
                    </div>
                    <img
                        src="{{ .QRCode }}" />
                    <div class="info-box-content">
                        <div class="btn-group">
                            <button type="button" class="btn btn-outline-success btn-sm">Download</button>
                            <button type="button" class="btn btn-outline-primary btn-sm">Edit</button>
                            <button type="button" class="btn btn-outline-warning btn-sm" data-toggle="modal"
                                data-target="#modal_pause_client" data-clientid="{{ .Client.ID }}"
                                data-clientname="{{ .Client.Name }}">Disable</button>
                            <button type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal"
                                data-target="#modal_remove_client" data-clientid="{{ .Client.ID }}"
                                data-clientname="{{ .Client.Name }}">Remove</button>
                        </div>
                        <hr>
                        <span class="info-box-text"><i class="fas fa-user"></i> {{ .Client.Name }}</span>
                        <span class="info-box-text"><i class="fas fa-envelope"></i> {{ .Client.Email }}</span>
                        <span class="info-box-text"><i class="fas fa-clock"></i>
                            {{ .Client.CreatedAt.Format "2 Jan 2006 15:04" }}</span>
                        <span class="info-box-text"><i class="fas fa-history"></i>
                            {{ .Client.UpdatedAt.Format "2 Jan 2006 15:04" }}</span>
                        <span class="info-box-text"><strong>IP Allocation</strong></span>
                        {{range .Client.AllocatedIPs}}
                        <small class="badge badge-secondary"></i>{{.}}</small>
                        {{end}}
                        <span class="info-box-text"><strong>Allowed IPs</strong></span>
                        {{range .Client.AllowedIPs}}
                        <small class="badge badge-secondary"></i>{{.}}</small>
                        {{end}}
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
            {{end}}
        </div>
        <!-- /.row -->
    </div>
</section>

<div class="modal fade" id="modal_pause_client">
    <div class="modal-dialog">
        <div class="modal-content bg-warning">
            <div class="modal-header">
                <h4 class="modal-title">Disable</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-outline-dark" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-outline-dark" id="pause_client_confirm">Apply</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<div class="modal fade" id="modal_remove_client">
    <div class="modal-dialog">
        <div class="modal-content bg-danger">
            <div class="modal-header">
                <h4 class="modal-title">Remove</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-outline-dark" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-outline-dark" id="remove_client_confirm">Apply</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
{{end}}

{{define "bottom_js"}}
    <script>
        function setClientStatus(clientID, status) {
            var data = {"id": clientID, "status": status}
            $.ajax({
                cache: false,
                method: 'POST',
                url: '/client/set-status',
                dataType: 'json',
                contentType: "application/json",
                data: JSON.stringify(data),
                success: function (data) {
                    console.log("Set client " + clientID + " status to " + status)
                },
                error: function (jqXHR, exception) {
                    var responseJson = jQuery.parseJSON(jqXHR.responseText);
                    toastr.error(responseJson['message']);
                }
            });
        }

        function resumeClient(clientID) {
            setClientStatus(clientID, true);
            var divElement = document.getElementById("paused_" + clientID);
            divElement.style.visibility = "hidden";
        }

        function pauseClient(clientID) {
            setClientStatus(clientID, false);
            var divElement = document.getElementById("paused_" + clientID);
            divElement.style.visibility = "visible";
        }
    </script>
    <script>
        // modal_pause_client modal event
        $('#modal_pause_client').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var client_id = button.data('clientid');
            var client_name = button.data('clientname');
            var modal = $(this);
            modal.find('.modal-body').text("You are about to disable client " + client_name);
            modal.find('#pause_client_confirm').val(client_id);
        })

        // pause_client_confirm button event
        $(document).ready(function () {
            $('#pause_client_confirm').click(function () {
                var client_id = $(this).val();
                pauseClient(client_id);
                $('#modal_pause_client').modal('hide');
            });
        });

        // modal_remove_client modal event
        $('#modal_remove_client').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var client_id = button.data('clientid');
            var client_name = button.data('clientname');
            var modal = $(this);
            modal.find('.modal-body').text("You are about to remove client " + client_name);
            modal.find('#remove_client_confirm').val(client_id);
        })

        // remove_client_confirm button event
        $(document).ready(function () {
            $('#remove_client_confirm').click(function () {
                var client_id = $(this).val();
                var data = {"id": client_id};
                $.ajax({
                    cache: false,
                    method: 'POST',
                    url: '/remove-client',
                    dataType: 'json',
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    success: function(data) {
                        $('#modal_remove_client').modal('hide');
                        toastr.success('Removed client successfully');
                        var divElement = document.getElementById('client_' + client_id);
                        divElement.style.display = "none";
                    },
                    error: function(jqXHR, exception) {
                        var responseJson = jQuery.parseJSON(jqXHR.responseText);
                        toastr.error(responseJson['message']);
                    }
                });
            });
        });
    </script>
{{end}}