{% extends "admin_base.html" %}

{% block css %}
<style>
#password_management_widget {
    display:none;
}
#user2change {
    min-width:350px;
}
#password_management_widget input {
    font-size:medium;
}
#password_management_widget select {
    margin-bottom:1em;
}
#messagebox:not(:empty) {
    margin-top:1em;
    color:red;
    font-size:smaller;
    font-weight:bold;
}
#messagebox.success {
    color:green;
}
</style>
{% end %}

{% block admin_main %}
    <noscript>This page does not work without JavaScript</noscript>
    <div id="password_management_widget">
        <select name="user" id="user2change">
            {% for user in users %}<option value="{{ user }}">{{ user }}</option>{% end %}
        </select><br />
        <input type="submit" value="Add user" id="user_add" />
        <input type="submit" value="Delete user" id="user_del" />
        <input type="submit" value="Update password" id="user_upd" />
        <div id="messagebox"></div>
    </div>
{% end %}

{% block js %}
<script>
    $(document).ready(function(){
        var url = document.URL;
        function refresh_userlist() {
            var select = $("#user2change");
            var selection = select.val();
            select.prop('disabled', true).empty();
            var users = $.ajax({
                url: url,
                async: false
            });
            users.responseText.split("\n").forEach(function(user){
                select.append("<option value='"+user+"'>"+user+"</option>");
            });
            // try to restore selected value
            select.val(selection).prop('disabled', false);
        }


        $(document).ajaxComplete(function(event, jqXHR, settings){
            if (settings.type == 'GET') return;
            $("#messagebox").text(jqXHR.responseText)
                .toggleClass("success", jqXHR.status == 200);
        });

        $("#user_upd").click(function(){
            var new_password = prompt('New password:');
            $.post(url+'?user='+$("#user2change").val(), new_password);
        });

        $("#user_del").click(function(){
            var user = $("#user2change").val();
            if (!confirm("Are you sure to delete user " + user + '?')) return;
            $.ajax({
                url: url + '?user=' + $("#user2change").val(),
                type: 'DELETE',
                async: false
            });
            refresh_userlist();
        });

        $("#user_add").click(function(){
            var user = prompt('Username to create:');
            var password = prompt('Password:');
            $.ajax({
                url: url + '?user='+user,
                type: 'PUT',
                data: password,
                async: false
            });
            refresh_userlist();
        });

        $("#password_management_widget").toggle(true);
    })
</script>
{% end %}