{% extends "skeleton.html" %}
{% block content %}

<div class="row">
<div class="col-md-6 ml-auto mr-auto">
<h3>Вход</h3>
<hr />

<div class="alert alert-danger" v-if="error">{{ error }}</div>

<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div>
<input class="form-control" placeholder="Логин" type="text" id="username" v-model="username">
</div>
</div>

<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-lock"></i></span>
</div>
<input class="form-control" placeholder="Пароль" type="password" id="password" v-model="password">
</div>
</div>

<div class="row">
<div class="col">
<a class="btn btn-outline-secondary" href="/register">Регистрация</a>
<button class="btn btn-outline-success float-right" type="submit" v-on:click="login">Войти</button>
</div>
</div>

</div>
</div>

{% endblock %}

{% block script %}
<script type="text/javascript">
Object.assign(root.data, {
    username: '',
    password: '',
    error: null
});
Object.assign(root.methods, {
    login: function() {
        let vm = this;
        axios.post(
            '/api',
            {
                "jsonrpc": "2.0",
                "method": "login",
                "params": {
                    "username": vm.username,
                    "password": vm.password
                },
                "id": 1
            }
        ).then(
            function(response) {
                if ('result' in response.data) {
                    window.location.href = '/';
                } else if ('error' in response.data) {
                    vm.error = response.data['error'].message;
                }
            }
        );
    }
});
</script>
{% endblock %}