POC-Java-www/pocwww/templates/register.jinja2

{% extends "layout.jinja2" %}

{% block content %}

    {% if request.authenticated_userid %}

        <h1>User Management</h1>
        <hr />
        <h2>New User</h2>
        <form class="form-inline">
            <div class="form-group">
                <input type="text" name="username" class="form-control" id="username" placeholder="Username">
            </div>
            <div class="form-group">
                <input type="password" name="password" class="form-control" id="password" placeholder="Password">
            </div>
            <div class="form-group">
                <button id="submitNewUser" class="btn btn-primary">Create User</button>
            </div>
        </form>

        <br />
        <div class="alert alert-success alert-dismissable hidden" id="add-user-success">
            <span>
                <p>User successfully added!</p>
            </span>
        </div>
        <div class="alert alert-danger alert-dismissable hidden" id="add-user-failed">
            <span>
                <p><span id="error-message"></span></p>
            </span>
        </div>

        <hr />
        <h2>Change Password</h2>
        <form class="form-inline">
            <div class="form-group">
                <label for="newPassword">New Password</label>
                <input type="password" name="newPassword" class="form-control" id="newPassword" placeholder="Password">
            </div>
            <div class="form-group">
                <button id="submitNewPassword" class="btn btn-primary">Update Password</button>
            </div>
        </form>
        <br />
        <div class="alert alert-success alert-dismissable hidden" id="update-password-success">
            <span>
                <p>Password successfully updated!</p>
            </span>
        </div>
        <div class="alert alert-danger alert-dismissable hidden" id="update-password-failed">
            <span>
                <p><span id="error-message"></span></p>
            </span>
        </div>

        <hr />



        <h2>All Users</h2>
        <div class="table-reponsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>Username</th>
                        <th></th>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>

        <script>

        function addedUser(data){
            if (data.status == "OK"){
                $('#add-user-success').removeClass('hidden');
            } else {
                $('#add-user-failed').removeClass('hidden');
                $('#error-message').text(data.info);

            }
            getAllUsers();
        };

        function updatedUserPassword(data){
            if (data.status == "OK"){
                $('#update-password-success').removeClass('hidden');
            } else {
                $('#update-password-failed').removeClass('hidden');
                $('#error-message').text(data.info);

            }
        };


        function sendNewUser(){
            var newUser = {
                username: $("#username").val(),
                password: $("#password").val()
            };
            $.ajax({
                type: "POST",
                dataType: 'json',
                data: JSON.stringify(newUser),
                contentType: "application/json; charset=utf-8",
                url: "/json/users",
                success: addedUser
            });
        };

        function sendUpdateUser(){
            var newUser = {
                username: '{{request.authenticated_userid}}',
                password: $("#newPassword").val()
            };
            $.ajax({
                type: "PUT",
                dataType: 'json',
                data: JSON.stringify(newUser),
                contentType: "application/json; charset=utf-8",
                url: "/json/users",
                success: updatedUserPassword
            });
        };

        $("#submitNewUser").click(function(event){
            event.preventDefault();
            $('#add-user-success').addClass('hidden');
            $('#add-user-failed').addClass('hidden');
            sendNewUser();
        });

        $("#submitNewPassword").click(function(event){
            event.preventDefault();
            $('#update-password-success').addClass('hidden');
            $('#update-password-failed').addClass('hidden');
            sendUpdateUser();
        });

        function showAllUsers(data){
            $('tbody').empty();
            for(var i = 0; i < data.users.length; i++){
                if (data.users[i] == "admin"){
                    $('tbody').append("<tr><td>" + data.users[i] + '</td><td><button type="button" class="btn btn-disabled" title="What are you doing?" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="right" data-content="You cannot delete the admin user">Delete</button></td></tr>');
                } else if (data.users[i] == '{{request.authenticated_userid}}'){
                    $('tbody').append("<tr><td>" + data.users[i] + '</td><td><button type="button" class="btn btn-disabled" title="What are you doing?" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="right" data-content="You cannot delete yourself. It doesn\'t work like that... ">Delete</button></td></tr>');
                } else {
                    $('tbody').append("<tr><td>" + data.users[i] + '</td><td><button class="btn btn-danger" onclick="deleteUser(\'' + data.users[i] + '\')">Delete</button></td></tr>');
                }
                $(function () {
                    $('[data-toggle="popover"]').popover({html: true})
                })
            }

        }
        '<button type="button" class="btn btn-default" title="What are you doing?" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="right" data-content="You cannot delete the admin user">Delete</button>'

        function getAllUsers(){
            $.ajax({
                dataType: 'json',
                url:"/json/users",
                success: showAllUsers
            });
        }
        getAllUsers();

        function deleteUser(username){
            $.ajax({
                type:'DELETE',
                dataType: 'json',
                data: JSON.stringify({"username": username}),
                contentType: "application/json; charset=utf-8",
                url: "/json/users",
                success: getAllUsers
            })
        }

        $(function () {
            $('[data-toggle="popover"]').popover({html: true})
        })

        </script>
    {% endif %}
{% endblock content %}