Update login

myapp/ns_login/templates/login.html

@@ -1,28 +1,76 @@
 {% extends "skeleton.html" %}
-{% block body %}
+{% block content %}
 
+<div class="row">
 <div class="col-md-6 ml-auto mr-auto">
-<h3>Логин</h3>
+<h3>Вход</h3>
 <hr />
 
-<form class="form-horizontal" action="/login" method="post" autocomplete="on">
+<div class="alert alert-danger" v-if="error">{{ error }}</div>
 
-<div style="margin-bottom: 25px" class="input-group">
+<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>
-{{ pagedata['form'].username(class="form-control", placeholder="Логин") }}
+<input class="form-control" placeholder="Логин" type="text" id="username" v-model="username">
+</div>
 </div>
 
-<div style="margin-bottom: 25px" class="input-group">
+<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>
-{{ pagedata['form'].password(class="form-control", placeholder="Пароль") }}
+<input class="form-control" placeholder="Пароль" type="password" id="password" v-model="password">
+</div>
 </div>
-<input class="btn btn-success float-right" type="submit" value="Вход" />
 
-</form>
+<div class="row">
+<div class="col">
+<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">
+var app = new Vue({
+    el: '#app',
+    data: {
+        username: '',
+        password: '',
+        error: null
+    },
+    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 %}