var data = {
    isAuthenticated: false, isValid: true, userName: "",
    login: {
        username: "",
        password: ""
    }
}

// register
Vue.component("auth-partial",
{
    template: `
        <ul class ="nav navbar-nav">
            <li class ="nav-item float-xs-right">
                <a href="#" class ="nav-link" data-toggle="modal" data-target="#loginModal" v-if="!isAuthenticated">
                    Log in
                </a>
                <a href="#" class ="nav-link" v-on:click="logout" v-if="isAuthenticated">
                    Hello {{userName}}!
                </a>
            </li>
        </ul>
    `,
    data: function() {
        return data;
    },
    ready: function () {
        this.isAuthenticated = this.checkIfAuthenticated();
        this.userName = localStorage.getItem("id_name");
    },

    methods: {
        checkIfAuthenticated: function () {
            const users = [
                {
                    id: 1,
                    name: "tom"
                },
                {
                    id: 2,
                    name: "brian"
                },
                {
                    id: 3,
                    name: "sam"
                }
            ];

            this.$set("users", users);
        }
    }
});
// create a root instance
var vue = new Vue({
    el: "#navbarResponsive"
});



// register
Vue.component("login-form",
{
    template: `
        <div class ="modal fade" id="loginModal" tabindex="-1" role="dialog" v-if="!isAuthenticated" aria-labelledby="loginModalLabel" aria-hidden="true">
        <div class ="modal-dialog modal-sm" role="document">
            <div class ="modal-content">
                <form v-on:submit.prevent="login($event)">
                    <div class ="modal-header">
                        <button type="button" class ="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times; </span>
                        </button>
                        <h4 class ="modal-title" id="loginModalLabel">Log in</h4>
                    </div>
                    <div class ="modal-body">
                        <div v-if="!isValid"
                                class ="alert alert-danger">
                            Invalid username or password.
                        </div>
                        <div class ="form-group">
                            <input class ="form-control" type="text" name="Username" v-model="login.username" placeholder="Username" id="formLoginUsername" required>
                        </div>
                        <div class ="form-group">
                            <input type="password" class ="form-control" name="Password" v-model="login.password" id="formLoginPassword" placeholder="Password" required>
                        </div>
                    </div>
                    <div class ="modal-footer">
                        <button type="button" class ="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" type="submit" class ="btn btn-primary">Sign in</button>
                    </div>
                </form>
            </div>
        </div>
    </div>`
,
    data: function () {
        return data;
    },
    ready: function () {
        this.isAuthenticated = this.checkIfAuthenticated();
        this.userName = localStorage.getItem("id_name");
    },

    methods: {
        checkIfAuthenticated: function () {
            const users = [
                {
                    id: 1,
                    name: "tom"
                },
                {
                    id: 2,
                    name: "brian"
                },
                {
                    id: 3,
                    name: "sam"
                }
            ];

            this.$set("users", users);
        },
        login: function (event) {
            const headers = { "Content-Type": "application/x-www-form-urlencoded" };

            $.ajax({
                url: "/token",
                type: "post",
                data: `username=${this.login.username}&password=${this.login.password}`,
                headers: headers,
                success: function (data) {
                    console.info(data);
                },
                error: function() {
                    this.isValid = false;
                }
            });
        }
    }
});
// create a root instance
var vue = new Vue({
    el: "#loginForm"
});