{% extends "base.html" %}

{% block content %}
    <div class="modal fade-in" id="add-ssh-key-modal">
        <div class="modal-ux-header cyan darken-2 white-text">
            <h2>Add SSH Public Key</h2>
        </div>
        <div class="modal-content modal-ux">
            <form>
                <div class="row">
                    <div class="input-field">
                        <i class="material-icons prefix">vpn_key</i>
                        <textarea class="materialize-textarea" id="ssh-pub-key" style="height: 200px;"></textarea>
                        <label for="ssh-pub-key">SSH public key</label>
                    </div>
                </div>
                <div class="row">
                    <div class="modal-footer">
                        <button id="btn-add-ssh-key" class="btn waves-effect waves-light right modal-close" onclick="add_ssh_key()" type="button">Submit<i class="material-icons right">send</i></button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="modal fade-in" id="remove-ssh-key-modal">
        <div class="modal-ux-header cyan darken-2 white-text">
            <h2>Confirm SSH Key Removal</h2>
        </div>
        <div class="modal-content modal-ux row">
            <p>Are you sure you want to remove this ssh public key?</p>
            <div class="modal-footer">
                <button id="btn-confirm-ssh-key-remove" class="btn waves-effect waves-light red modal-close" type="button">Remove</button>
                <button id="btn-confirm-ssh-key-remove" class="btn waves-effect waves-light modal-close" type="button">Cancel</button>
            </div>
        </div>
    </div>

    <div class="modal fade-in" id="change-password-modal">
        <div class="modal-ux-header cyan darken-2 white-text">
            <h2>Change Password</h2>
        </div>
        <div class="modal-ux modal-content">
            <form>
                <div class="input-field row">
                    <i class="material-icons prefix">password</i>
                    <input id="old-password" type="password" required>
                    <label for="old-password">Password</label>
                </div>
                <div class="input-field row">
                    <i class="material-icons prefix">password</i>
                    <input id="new-password" type="password" required>
                    <label for="new-password">New Password</label>
                </div>
                <div class="input-field row">
                    <i class="material-icons prefix">password</i>
                    <input id="confirm-password" type="password" required>
                    <label for="confirm-password">Confirm Password</label>
                </div>
                <div class="modal-footer row">
                    <button class="btn waves-effect waves-light modal-close" type="button">Cancel</button>
                    <button id="btn-change-password" class="btn waves-effect waves-light" type="button" onclick="change_password()">Submit<i class="material-icons right">send</i></button>
                </div>
            </form>
        </div>
    </div>

    <div class="wrapper">
    <div id="profile-page-header" class="card">
        <div class="card-content">
            <div class="row">
                    <div class="col s12 center-align">
                        <h1 class="card-title grey-text text-darken-4"><i class="material-icons prefix">account_circle</i>{{ current_user.name }}</h1>
                    </div>
            </div>
        </div>
    </div>
    <div id="profile-page-content" class="row">
        <div class="col s12">
            <ul class="collapsible popout white" data-collapsible="accordion">
                <li>
                    <div class="collapsible-header"><i class="material-icons prefix">account_circle</i>Contact Info</div>
                    <div class="collapsible-body">
                        <ul class="collection">
                            <li class="collection-item">
                                <i class="material-icons">phone_android</i>
                                <span class="title">Phone</span>
                                <div class="input-field">
                                    <input id="mobile-phone" value="{{ current_user.phone }}" disabled>
                                </div>
                                <button id="blank" class="btn hiddendiv" type="buton"></button>
                                <button id="cancel-new-phone" class="btn hiddendiv" type="button" onclick="cancel_edit_phone()">Cancel</button>
                                <button id="save-new-phone" class="btn hiddendiv" type="button" onclick="update_phone()">Save<i class="material-icons right">send</i></button>
                                <a id="phone-edit" href="#" onclick="edit_phone()"><i class="material-icons">edit</i></a>
                            </li>
                            <li class="collection-item">
                                <i class="material-icons">email</i>
                                <span class="title">Email</span>
                                <p>{{ current_user.email }}</p>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="collapsible-header"><i class="material-icons prefix">lock</i>Credentials</div>
                    <div class="collapsible-body">
                        <ul class="collection">
                            <li class="collection-item">
                                <i class="material-icons prefix">vpn_key</i>
                                <span class="title">SSH Public Keys</span>
                                {% for pub_key in current_user.ssh_pub_keys %}
                                    <div class="row">
                                        <div class="col s11">
                                            <div class="input-field">
                                                <textarea class="materialize-textarea" id="pub-key{{ loop.index0 }}"  style="height: 150px;" disabled>{{ pub_key }}</textarea>
                                                <label for="pub-key-{{ loop.index0 }}">Public Key {{ loop.index0 + 1 }}:</label>
                                            </div>
                                        </div>
                                        <div class="col s1">
                                            <a class="right modal-trigger" href="#remove-ssh-key-modal" onclick="del_ssh_key('{{ pub_key }}')">
                                                <i class="material-icons red-text">remove</i>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="divider"></div>
                                {% endfor %}
                                <div clas="row">
                                    <p>Add public key <a class="modal-trigger right" href="#add-ssh-key-modal"><i class="material-icons">add</i></a></p>
                                </div>
                            </li>
                            <li class="collection-item">
                                <i class="material-icons">password</i>
                                <span class="title"><a class="modal-trigger" href="#change-password-modal">Change Password</a></span>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>

    </div>
</div>
<script>
    $(document).ready(function() {
        $('.modal').modal();
    });

    function add_ssh_key() {
        let ssh_key = $("#ssh-pub-key").val();

        console.log(ssh_key);

        $.ajax({
            url: "{{ url_for('auth.add_ssh_pub_key') }}",
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify({"pubkey": ssh_key}),
            success: function(data, status) { window.location.reload(); },
            complete: function(xhr, textStatus) {
                if (xhr.status === 400) {
                    let message = xhr.responseJSON.error;
                    if (message === "INVALID_KEY") {
                        message = "Invalid SSH key given (does not conform to openSSH format)."
                    }
                    M.toast({html: '<span>' + message + '</span><button class="toast-action btn-flat" onclick="this.parentElement.remove();">&times;</button>'});
                }
            }
        });
    }

    function del_ssh_key(key_to_del) {
        console.log(key_to_del);
        $('#btn-confirm-ssh-key-remove').click(function () {
            $.ajax({
                url: "{{ url_for('auth.add_ssh_pub_key') }}",
                type: "DELETE",
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify({"pubkey": key_to_del}),
                success: function(data, status) { window.location.reload(); }
            });
        });
    }

    function cancel_edit_phone() {
        let phone_field = $("#mobile-phone");
        let phone_save_btn = $("#save-new-phone");
        let phone_cancel_btn = $("#cancel-new-phone");
        let phone_edit_icon = $("#phone-edit");
        // Allow the field to be edited and show save the button
        phone_field.prop("disabled", true);
        phone_save_btn.addClass("hiddendiv");
        phone_cancel_btn.addClass("hiddendiv");
        phone_edit_icon.removeClass("hiddendiv");
        phone_field.value("{{ current_user.phone }}");
    }

    function update_phone() {
        let phone_field = $("#mobile-phone");
        let phone_save_btn = $("#save-new-phone");
        let phone_cancel_btn = $("#cancel-new-phone");
        let phone_edit_icon = $("#phone-edit");
        // Allow the field to be edited and show save the button
        phone_field.prop("disabled", true);
        phone_save_btn.addClass("hiddendiv");
        phone_cancel_btn.addClass("hiddendiv");
        phone_edit_icon.removeClass("hiddendiv");
        $.ajax({
            url: "{{ url_for('auth.update_phone') }}",
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify({"phone_number": phone_field.val()}),
            success: function(data, status) {
                M.toast({html: '<span>Phone number updated</span><button class="toast-action btn-flat" onclick="this.parentElement.remove();">&times;</button>'});
            },
            complete: function(xhr, textStatus) {
                if (xhr.status === 400) {
                    let message = xhr.responseJSON.error;
                    M.toast({html: '<span>' + message + '</span><button class="toast-action btn-flat" onclick="this.parentElement.remove();">&times;</button>'});
                }
            }
        })
    }

    function edit_phone() {
        let phone_field = $("#mobile-phone");
        let phone_save_btn = $("#save-new-phone");
        let phone_cancel_btn = $("#cancel-new-phone");
        let phone_edit_icon = $("#phone-edit");
        // Allow the field to be edited and show save the button
        phone_field.prop("disabled", false);
        phone_save_btn.removeClass("hiddendiv");
        phone_cancel_btn.removeClass("hiddendiv");
        phone_edit_icon.addClass("hiddendiv");

    }

    function change_password() {
        let old_pass = $("#old-password");
        let new_pass = $("#new-password");
        let confirm_pass = $("#confirm-password");

        if (new_pass.val() !== confirm_pass.val()) {
            new_pass.addClass('invalid');
            new_pass.addClass('active');
            confirm_pass.addClass('invalid');
            confirm_pass.addClass('active');
            M.toast({html: '<span>Passwords do not match</span><button class="toast-action btn-flat" onclick="this.parentElement.remove();">&times;</button>'});
        }
        else {
            $.ajax({
               url: "{{ url_for('auth.change_passwd') }}",
               type: "POST",
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify({"passwd": old_pass.val(), "new_passwd": new_pass.val()}),
                success: function(data, status) {
                   window.location.reload();
                },
                complete: function(xhr, textStatus) {
                   console.log(xhr.status);
                   if (xhr.status === 405) {
                       old_pass.addClass('invalid');
                       old_pass.addClass('invalid');
                       M.toast({html: '<span>Password is incorrect</span><button class="toast-action btn-flat" onclick="this.parentElement.remove();">&times;</button>'});
                   }
                }
            });
        }
    }
</script>
{% endblock %}