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

<div class="row">
<div class="col-md-6 ml-md-auto mr-md-auto">

<h3>Регистрация</h3>
<hr />

<div class="row mt-3" v-if="error">
<div class="col text-danger" v-html="error.message"></div>
</div>

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

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

<div class="btn btn-outline-success float-right" v-on:click="register">Зарегистрироваться</div>
<a class="btn btn-outline-secondary" href="/login">Вход</a>

</div> <!-- div class="col-md-6 ml-md-auto mr-md-auto" -->
</div> <!-- div class="row" -->

{% endblock %}

{% block script %}
<script type="text/javascript">
var app = new Vue({
    el: '#app',
    data: {
        username: '',
        password: '',
        repeat: '',
        error: null
    },
    methods: {
        register: function() {
            let vm = this;
            if (vm.password!=vm.repeat) {
                vm.error = 'Пароли не совпадают';
                return;
            }
            axios.post(
                '/api',
                {
                    "jsonrpc": "2.0",
                    "method": "login.register",
                    "params": {
                        "username": vm.username,
                        "password": vm.password
                    },
                    "id": 1
                }
            ).then(
                function(response) {
                    if ('result' in response.data) {
                        window.location.href = '/login';
                    } else if ('error' in response.data) {
                        vm.error = response.data['error'];
                    }
                }
            );
        }
    }
})
</script>
{% endblock %}