Update

2022-05-03 22:34:52 +03:00
parent 1663f94b0e
commit 8958be3141
54 changed files with 1569 additions and 1014 deletions
--- a/myapp/init.py
+++ b/myapp/init.py
@@ -8,6 +8,7 @@ import logging
 from flask import Flask
 from logging.handlers import RotatingFileHandler

+
 app = Flask(__name__)
 app.config.from_object(config.CONFIG)

--- a/myapp/api/init.py
+++ b/myapp/api/init.py
@@ -0,0 +1,12 @@
+__author__ = 'RemiZOffAlex'
+__copyright__ = '(c) RemiZOffAlex'
+__email__ = 'remizoffalex@mail.ru'
+
+from jsonrpc import JSONRPC
+
+
+jsonrpc = JSONRPC()
+
+from . import ( # noqa F401
+    user
+)
--- a/myapp/api/user.py
+++ b/myapp/api/user.py
@@ -0,0 +1,151 @@
+__author__ = 'RemiZOffAlex'
+__copyright__ = '(c) RemiZOffAlex'
+__email__ = 'remizoffalex@mail.ru'
+
+from . import jsonrpc
+from .. import app, lib, models
+
+
+@jsonrpc.method('user.add')
+def user_add(username: str, password: str) -> dict:
+    """Новый пользователь
+    """
+    if username is None or len(username) < 4 or len(username) > 25:
+        raise ValueError('Длина логина должна быть от 4 до 25 символов')
+    if password is None or len(password) < 4 or len(password) > 25:
+        raise ValueError('Длина пароля должна быть от 4 до 25 символов')
+    user = models.db_session.query(
+        models.User
+    ).filter(
+        models.User.name == username
+    ).first()
+    if user:
+        raise ValueError('Пользователь с таким логином уже существует')
+
+    newuser = models.User(
+        username
+    )
+    newuser.password = lib.get_hash_password(
+        password,
+        app.config['SECRET_KEY']
+    )
+    models.db_session.add(newuser)
+    models.db_session.commit()
+
+    result = newuser.as_dict()
+    return result
+
+
+@jsonrpc.method('user.enable')
+def user_enable(id: int) -> dict:
+    """Разблокировать пользователя
+    """
+    userRow = models.db_session.query(
+        models.User
+    ).filter(
+        models.User.id == id
+    ).first()
+    if userRow is None:
+        raise ValueError
+    userRow.disable = False
+    models.db_session.commit()
+    return userRow.as_dict()
+
+
+@jsonrpc.method('user.pages')
+def user_pages_list(id: int, page: int) -> list:
+    """Список статей пользователя
+    """
+    user = models.db_session.query(
+        models.User
+    ).filter(
+        models.User.id == id
+    ).first()
+    if user is None:
+        raise ValueError
+    pages = models.db_session.query(
+        models.Page
+    ).filter(
+        models.Page.user_id == id
+    ).order_by(
+        models.Page.title.asc()
+    )
+    pages = lib.getpage(
+        pages,
+        page,
+        app.config['ITEMS_ON_PAGE']
+    ).all()
+
+    result = []
+    for page in pages:
+        newRow = page.as_dict()
+        newRow['user'] = page.user.as_dict()
+        newRow['tags'] = []
+        for tagLink in page.tags:
+            newRow['tags'].append(tagLink.tag.as_dict())
+        result.append(newRow)
+    return result
+
+
+@jsonrpc.method('user.pages.count')
+def user_pages_count(id: int) -> int:
+    """Общее количество статей
+    """
+    user = models.db_session.query(
+        models.User
+    ).filter(
+        models.User.id == id
+    ).first()
+    if user is None:
+        raise ValueError
+    result = models.db_session.query(
+        models.Page
+    ).filter(
+        models.Page.user_id == id
+    ).count()
+    return result
+
+
+@jsonrpc.method('users')
+def users_list(
+    page: int = 1,
+    order_by: dict = {'field': 'name', 'order': 'asc'}
+) -> list:
+    """Показать список пользователей
+    """
+    users = models.db_session.query(
+        models.User
+    )
+
+    # Сортировка
+    if order_by['field'] not in ['name', 'created']:
+        raise ValueError
+    if order_by['order'] not in ['asc', 'desc']:
+        raise ValueError
+    field = getattr(models.User, order_by['field'])
+    order = getattr(field, order_by['order'])
+    users = users.order_by(
+        order()
+    )
+
+    users = lib.getpage(
+        users,
+        page,
+        app.config['ITEMS_ON_PAGE']
+    ).all()
+
+    result = []
+    for item in users:
+        result.append(item.as_dict())
+    return result
+
+
+@jsonrpc.method('users.count')
+def users_count() -> int:
+    """Количество список пользователей
+    """
+    result = models.db_session.query(
+        models.User
+    ).count()
+
+    return result
--- a/myapp/bin/api.py
+++ b/myapp/bin/api.py
@@ -0,0 +1,56 @@
+#!/usr/bin/env python3
+
+__author__ = 'RemiZOffAlex'
+__copyright__ = '(c) RemiZOffAlex'
+__email__ = 'remizoffalex@mail.ru'
+
+import sys
+import json
+import argparse
+import traceback
+
+from .. import app
+from ..api import jsonrpc
+
+
+def main():
+    parser = argparse.ArgumentParser(
+        description='API',
+        formatter_class=argparse.ArgumentDefaultsHelpFormatter
+    )
+    parser._optionals.title = "Необязательные аргументы"
+
+    parser.add_argument("--json-rpc", help="JSON-RPC")
+    parser.add_argument("--methods", action='store_true')
+    parser.add_argument("--example", action='store_true')
+    parser.add_argument("--verbose", action='store_true')
+    parser.add_argument("--save")
+
+    args = parser.parse_args()
+
+    if args.json_rpc:
+        request = json.loads(args.json_rpc)
+        if args.verbose:
+            app.logger.info(request)
+        result = jsonrpc(request)
+        if args.save:
+            with open(args.save, 'w') as fd:
+                fd.write(result)
+        print(result)
+
+    if args.methods:
+        print(jsonrpc.methods)
+        print('[{0}]'.format(', '.join(jsonrpc.methods)))
+
+    if args.example:
+        print(jsonrpc.example)
+
+
+if __name__ == "__main__":
+    try:
+        main()
+    except Exception as err:
+        traceback.print_exc(file=sys.stdout)
+        exit(1)
+
+    exit(0)
--- a/myapp/models/users.py
+++ b/myapp/models/users.py
@@ -7,7 +7,6 @@ from sqlalchemy import (
    Column,
    Boolean,
    Integer,
-    ForeignKey,
    String,
    DateTime
 )
--- a/myapp/ns_api/init.py
+++ b/myapp/ns_api/init.py
@@ -3,7 +3,8 @@ __copyright__ = '(c) RemiZOffAlex'
 __email__ = 'remizoffalex@mail.ru'

 from functools import wraps
-from flask_jsonrpc import JSONRPC
+from jsonrpc import JSONRPC
+from jsonrpc.backend.flask import APIView
 from flask import session

 from .. import app, models
@@ -29,7 +30,7 @@ def login_required(func):
    return decorated_function


-jsonrpc = JSONRPC(app, '/api')
+jsonrpc = JSONRPC()

 from . import ( # noqa F401
    login,
@@ -38,3 +39,16 @@ from . import ( # noqa F401
    tag,
    user
 )
+
+app.add_url_rule('/api', view_func=APIView.as_view('api', jsonrpc=jsonrpc))
+
+
+@jsonrpc.method('api.methods')
+def api_methods() -> dict:
+    """Список методов API
+    """
+
+    result = {}
+    for method in jsonrpc.methods:
+        result[method] = jsonrpc.description(method)
+    return result
--- a/myapp/ns_api/login.py
+++ b/myapp/ns_api/login.py
@@ -20,7 +20,7 @@ def login(username: str, password: str) -> bool:
            password,
            app.config['SECRET_KEY']
        ),
-        models.User.disabled == False
+        models.User.disabled == False # noqa E712
    ).first()
    if user is None:
        raise ValueError
--- a/myapp/ns_api/page.py
+++ b/myapp/ns_api/page.py
@@ -91,7 +91,10 @@ def page_update(id: int, title: str, text: str) -> dict:


@jsonrpc.method('pages')
-def pages_list(page: int, order_by: dict = {'field': 'title', 'order': 'asc'}) -> list:
+def pages_list(
+    page: int = 1,
+    order_by: dict = {'field': 'title', 'order': 'asc'}
+) -> list:
    """Список статей
    """
    pages = models.db_session.query(
--- a/myapp/ns_api/user.py
+++ b/myapp/ns_api/user.py
@@ -107,7 +107,10 @@ def user_pages_count(id: int) -> int:


@jsonrpc.method('users')
-def users_list(page: int, order_by: dict = {'field': 'name', 'order': 'asc'}) -> list:
+def users_list(
+    page: int = 1,
+    order_by: dict = {'field': 'name', 'order': 'asc'}
+) -> list:
    """Показать список пользователей
    """
    users = models.db_session.query(
--- a/myapp/ns_login/templates/login.html
+++ b/myapp/ns_login/templates/login.html
@@ -40,38 +40,35 @@

 {% 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
+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;
                }
-            ).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 %}
--- a/myapp/ns_note/templates/note.html
+++ b/myapp/ns_note/templates/note.html
@@ -1,4 +1,4 @@
-{% extends "user/skeleton.html" %}
+{% extends "private/skeleton.html" %}
 {% block content %}
 {% raw %}

@@ -59,7 +59,7 @@ var app = new Vue({
                }
            );
        },
-        showPanel: function(panel) {
+        panel_show: function(panel) {
            /* Показать/скрыть панель */
            panel.visible = !panel.visible;
        },
--- a/myapp/ns_note/templates/note_add.html
+++ b/myapp/ns_note/templates/note_add.html
@@ -1,4 +1,4 @@
-{% extends "user/skeleton.html" %}
+{% extends "private/skeleton.html" %}
 {% block content %}


--- a/myapp/ns_note/templates/note_edit.html
+++ b/myapp/ns_note/templates/note_edit.html
@@ -1,4 +1,4 @@
-{% extends "user/skeleton.html" %}
+{% extends "private/skeleton.html" %}
 {% block content %}

 <h3>
--- a/myapp/ns_note/templates/notes.html
+++ b/myapp/ns_note/templates/notes.html
@@ -1,11 +1,11 @@
-{% extends "user/skeleton.html" %}
+{% extends "private/skeleton.html" %}
 {% block content %}

 <h3>
 <div class="float-right">
 <a class="btn btn-outline-success" href="/note/add"><i class="fa fa-plus"></i></a>
 </div>
-<button type="button" class="btn btn-outline-secondary" v-on:click="showPanel(panels.filter)"><i class="fa fa-filter"></i></button>
+<button type="button" class="btn btn-outline-secondary" v-on:click="panel_show(panels.filter)"><i class="fa fa-filter"></i></button>

 Заметки
 </h3>
@@ -13,37 +13,13 @@

 {% include 'inc/filter.html' %}

-{% raw %}
 <pagination-component v-bind:pagination="pagination" v-bind:click-handler="getNotes"></pagination-component>

-<div class="row" v-for="(note, noteIdx) in filteredNotes">
-<div class="col py-2" :class="{'bg-light': noteIdx % 2}">
-
-<a :href="'/note/' + note.id" v-html="note.title"></a>
-
-<div class="row">
-<div class="col small text-muted">
-<span v-for="(tag, tagIdx) in note.tags">
-<i class="fa fa-tag"></i> <a class="text-monospace" :href="'/tag/' + tag.id">{{ tag.name }}</a>&nbsp;
-</span>
-</div>
-</div>
-
-<div class="row">
-<div class="col small text-muted">
-Создано: {{ note.created }}&nbsp;
-Обновлено: {{ note.updated }}
-</div>
-</div>
-
-</div>
-</div>
+{% include 'inc/notes.html' %}

 <pagination-component v-bind:pagination="pagination" v-bind:click-handler="getNotes"></pagination-component>

 <backtotop-component></backtotop-component>
-
-{% endraw %}
 {% endblock %}

 {% block script %}
@@ -52,106 +28,90 @@
 <script type="text/javascript" src="/static/components/pagination.js"></script>

 <script>
-var app = new Vue({
-    el: '#app',
-    data: {
-        filter: '',
-        notes: [],
-        pagination: {{ pagedata['pagination']|tojson|safe }},
-        panels: {
-            filter: {
-                visible: false
-            }
-        },
+Object.assign(root.data, {
+    raw_notes: [],
+    pagination: {{ pagedata['pagination']|tojson|safe }},
+});
+Object.assign(root.data.panels, {
+    order_by: {
+        visible: false,
+        field: 'title',
+        order: 'asc'
    },
-    methods: {
-        arrayRemove: function(arr, value) {
-            /* Удаление элемента из списка */
-            return arr.filter(function(ele){
-                return ele != value;
-            });
-        },
-        filterApply: function() {},
-        filterClear: function() {
-            /* Очистить фильтр */
-            let vm = this;
-            vm.filter = '';
-        },
-        filterNote: function(note) {
-            let vm = this;
-            if ( vm.filter.length<1 ) {
-                return true;
-            }
-            if ( note.title.toLowerCase().includes(vm.filter.toLowerCase()) ) {
-                return true;
-            }
-            return false;
-        },
-        getNotes: function() {
-            /* Получить список заметок */
-            let vm = this;
-            axios.post(
-                '/api',
-                {
-                    "jsonrpc": "2.0",
-                    "method": "notes",
-                    "params": {
-                        "page": vm.pagination.page
-                    },
-                    "id": 1
-                }
-            ).then(
-                function(response) {
-                    if ('result' in response.data) {
-                        vm.notes = response.data['result'];
-                    }
-                }
-            );
-        },
-        showPanel: function(panel) {
-            /* Показать/скрыть панель */
-            panel.visible = !panel.visible;
-        },
+});
+Object.assign(root.methods, {
+    filterApply: function() {},
+    filterNote: function(note) {
+        let vm = this;
+        let value = vm.panels.filter.value;
+        if ( value.length<1 ) {
+            return true;
+        }
+        if ( note.title.toLowerCase().includes(value.toLowerCase()) ) {
+            return true;
+        }
+        return false;
    },
-    created: function() {
+    getNotes: function() {
+        /* Получить список заметок */
        let vm = this;
        axios.post(
            '/api',
-            [
-                {
-                    "jsonrpc": "2.0",
-                    "method": "notes",
-                    "params": {
-                        "page": vm.pagination.page
-                    },
-                    "id": 1
+            {
+                "jsonrpc": "2.0",
+                "method": "notes",
+                "params": {
+                    "page": vm.pagination.page
                },
-                {
-                    "jsonrpc": "2.0",
-                    "method": "notes.count",
-                    "params": {},
-                    "id": 1
-                }
-            ]
+                "id": 1
+            }
        ).then(
            function(response) {
-                if ('result' in response.data[0]) {
-                    vm.notes = response.data[0]['result'];
-                }
-                if ('result' in response.data[1]) {
-                    vm.pagination.size = response.data[1]['result'];
+                if ('result' in response.data) {
+                    vm.raw_notes = response.data['result'];
                }
            }
        );
    },
-    computed: {
-        filteredNotes: function() {
-            /* Отфильтрованный список */
-            let vm = this;
-            var result = vm.notes.filter(vm.filterNote);
-            return result; 
-        },
-    }
-})
+});
+root.created = function() {
+    let vm = this;
+    axios.post(
+        '/api',
+        [
+            {
+                "jsonrpc": "2.0",
+                "method": "notes",
+                "params": {
+                    "page": vm.pagination.page
+                },
+                "id": 1
+            },
+            {
+                "jsonrpc": "2.0",
+                "method": "notes.count",
+                "params": {},
+                "id": 1
+            }
+        ]
+    ).then(
+        function(response) {
+            if ('result' in response.data[0]) {
+                vm.raw_notes = response.data[0]['result'];
+            }
+            if ('result' in response.data[1]) {
+                vm.pagination.size = response.data[1]['result'];
+            }
+        }
+    );
+};
+Object.assign(root.computed, {
+    notes: function() {
+        /* Отфильтрованный список */
+        let vm = this;
+        var result = vm.raw_notes.filter(vm.filterNote);
+        return result; 
+    },
+});
 </script>
 {% endblock %}
--- a/myapp/ns_page/templates/guest/page.html
+++ b/myapp/ns_page/templates/guest/page.html
@@ -40,13 +40,8 @@

 {% block script %}
 <script type="text/javascript">
-var app = new Vue({
-    el: '#app',
-    data: {
-        page: {{ pagedata['page']|tojson|safe }},
-    },
-    methods: {
-    },
-})
+Object.assign(root.data, {
+    page: {{ pagedata['page']|tojson|safe }},
+});
 </script>
 {% endblock %}
--- a/myapp/ns_page/templates/guest/pages.html
+++ b/myapp/ns_page/templates/guest/pages.html
@@ -4,6 +4,8 @@
 <h3>Статьи</h3>
 <hr />

+{% include '/inc/filter.html' %}
+
 <pagination-component v-bind:pagination="pagination" v-bind:click-handler="getPages"></pagination-component>

 <div class="row" v-if="firstAlpha">
@@ -12,7 +14,7 @@
 </div>
 </div>

-{% include 'inc/pages.html' %}
+{% include '/inc/pages.html' %}

 <pagination-component v-bind:pagination="pagination" v-bind:click-handler="getPages"></pagination-component>

@@ -26,110 +28,111 @@
 <script type="text/javascript" src="/static/components/pagination.js"></script>

 <script>
-var app = new Vue({
-    el: '#app',
-    data: {
-        filter: '',
-        pages: [],
-        pagination: {{ pagedata['pagination']|tojson|safe }},
+Object.assign(root.data, {
+    raw_pages: [],
+    pagination: {{ pagedata['pagination']|tojson|safe }},
+});
+Object.assign(root.data.panels, {
+    order_by: {
+        visible: false,
+        field: 'title',
+        order: 'asc'
    },
-    methods: {
-        filterApply: function() {},
-        filterClear: function() {
-            /* Очистить фильтр */
-            let vm = this;
-            vm.filter = '';
-        },
-        filterPage: function(page) {
-            let vm = this;
-            if ( vm.filter.length<1 ) {
-                return true;
-            }
-            if ( page.title.toLowerCase().includes(vm.filter.toLowerCase()) ) {
-                return true;
-            }
-            return false;
-        },
-        getPages: function() {
-            /* Получить список статей */
-            let vm = this;
-            axios.post(
-                '/api',
-                {
-                    "jsonrpc": "2.0",
-                    "method": "pages",
-                    "params": {
-                        "page": vm.pagination.page
-                    },
-                    "id": 1
-                }
-            ).then(
-                function(response) {
-                    if ('result' in response.data) {
-                        vm.pages = response.data['result'];
-                    }
-                }
-            );
-        },
+});
+Object.assign(root.methods, {
+    filterApply: function() {},
+    filterPage: function(page) {
+        let vm = this;
+        let value = vm.panels.filter.value;
+        if ( value.length<1 ) {
+            return true;
+        }
+        if ( page.title.toLowerCase().includes(value.toLowerCase()) ) {
+            return true;
+        }
+        return false;
    },
-    created: function() {
+    getPages: function() {
+        /* Получить список статей */
        let vm = this;
        axios.post(
            '/api',
-            [
-                {
-                    "jsonrpc": "2.0",
-                    "method": "pages",
-                    "params": {
-                        "page": vm.pagination.page
-                    },
-                    "id": 1
+            {
+                "jsonrpc": "2.0",
+                "method": "pages",
+                "params": {
+                    "page": vm.pagination.page,
+                    "order_by": vm.panels.order_by
                },
-                {
-                    "jsonrpc": "2.0",
-                    "method": "pages.count",
-                    "params": {},
-                    "id": 1
-                }
-            ]
+                "id": 1
+            }
        ).then(
            function(response) {
-                if ('result' in response.data[0]) {
-                    vm.pages = response.data[0]['result'];
-                }
-                if ('result' in response.data[1]) {
-                    vm.pagination.size = response.data[1]['result'];
+                if ('result' in response.data) {
+                    vm.raw_pages = response.data['result'];
                }
            }
        );
    },
-    computed: {
-        filteredPages: function() {
-            /* Отфильтрованный список */
-            let vm = this;
-            var result = vm.pages.filter(vm.filterPage);
-            return result; 
-        },
-        firstAlpha: function() {
-            /* Получить первый символ */
-            let vm = this;
-            let result = null;
-            if (vm.pages.length>0) {
-                result = vm.pages[0].title.charAt(0);
+});
+root.created = function() {
+    let vm = this;
+    axios.post(
+        '/api',
+        [
+            {
+                "jsonrpc": "2.0",
+                "method": "pages",
+                "params": {
+                    "page": vm.pagination.page,
+                    "order_by": vm.panels.order_by
+                },
+                "id": 1
+            },
+            {
+                "jsonrpc": "2.0",
+                "method": "pages.count",
+                "params": {},
+                "id": 1
            }
-            return result;
-        },
-        lastAlpha: function() {
-            /* Получить последний символ */
-            let vm = this;
-            let result = null;
-            if (vm.pages.length>0) {
-                let title = vm.pages[vm.pages.length-1].title;
-                result = title.charAt(0);
+        ]
+    ).then(
+        function(response) {
+            if ('result' in response.data[0]) {
+                vm.raw_pages = response.data[0]['result'];
            }
-            return result;
-        },
+            if ('result' in response.data[1]) {
+                vm.pagination.size = response.data[1]['result'];
+            }
+        }
+    );
+};
+Object.assign(root.computed, {
+    pages: function() {
+        /* Отфильтрованный список */
+        let vm = this;
+        var result = vm.raw_pages.filter(vm.filterPage);
+        return result; 
    },
-})
+    firstAlpha: function() {
+        /* Получить первый символ */
+        let vm = this;
+        let result = null;
+        if (vm.raw_pages.length>0) {
+            result = vm.raw_pages[0].title.charAt(0);
+        }
+        return result;
+    },
+    lastAlpha: function() {
+        /* Получить последний символ */
+        let vm = this;
+        let result = null;
+        if (vm.raw_pages.length>0) {
+            let title = vm.raw_pages[vm.raw_pages.length-1].title;
+            result = title.charAt(0);
+        }
+        return result;
+    },
+});
 </script>
 {% endblock %}
--- a/myapp/ns_page/templates/user/page.html
+++ b/myapp/ns_page/templates/user/page.html
@@ -1,4 +1,4 @@
-{% extends "user/skeleton.html" %}
+{% extends "private/skeleton.html" %}
 {% block content %}
 {% raw %}

@@ -32,59 +32,52 @@
 <script type="text/javascript" src="/static/components/tags.js"></script>

 <script type="text/javascript">
-var app = new Vue({
-    el: '#app',
-    data: {
-        page: {{ pagedata['page']|tojson|safe }},
+Object.assign(root.data, {
+    page: {{ pagedata['page']|tojson|safe }},
+});
+Object.assign(root.methods, {
+    pageDelete: function() {
+        /* Удалить статью в корзину */
+        let vm = this;
+        axios.post(
+            '/api',
+            {
+                "jsonrpc": "2.0",
+                "method": 'page.delete',
+                "params": {
+                    "id": vm.page.id
+                },
+                "id": 1
+            }
+        ).then(
+            function(response) {
+                if ('result' in response.data) {
+                    window.location.href = '/pages';
+                }
+            }
+        );
    },
-    methods: {
-        pageDelete: function() {
-            /* Удалить статью в корзину */
-            let vm = this;
-            axios.post(
-                '/api',
-                {
-                    "jsonrpc": "2.0",
-                    "method": 'page.delete',
-                    "params": {
-                        "id": vm.page.id
-                    },
-                    "id": 1
+    saveStatus: function() {
+        let vm = this;
+        axios.post(
+            '/api',
+            {
+                "jsonrpc": "2.0",
+                "method": 'page.status',
+                "params": {
+                    "id": vm.page.id,
+                    "status": vm.page.status
+                },
+                "id": 1
+            }
+        ).then(
+            function(response) {
+                if ('result' in response.data) {
+                    vm.page = response.data['result'];
                }
-            ).then(
-                function(response) {
-                    if ('result' in response.data) {
-                        window.location.href = '/pages';
-                    }
-                }
-            );
-        },
-        showPanel: function(panel) {
-            /* Показать/скрыть панель */
-            panel.visible = !panel.visible;
-        },
-        saveStatus: function() {
-            let vm = this;
-            axios.post(
-                '/api',
-                {
-                    "jsonrpc": "2.0",
-                    "method": 'page.status',
-                    "params": {
-                        "id": vm.page.id,
-                        "status": vm.page.status
-                    },
-                    "id": 1
-                }
-            ).then(
-                function(response) {
-                    if ('result' in response.data) {
-                        vm.page = response.data['result'];
-                    }
-                }
-            );
-        }
+            }
+        );
    }
-})
+});
 </script>
 {% endblock %}
--- a/myapp/ns_page/templates/user/page_add.html
+++ b/myapp/ns_page/templates/user/page_add.html
@@ -1,4 +1,4 @@
-{% extends "user/skeleton.html" %}
+{% extends "private/skeleton.html" %}
 {% block content %}


--- a/myapp/ns_page/templates/user/page_edit.html
+++ b/myapp/ns_page/templates/user/page_edit.html
@@ -1,4 +1,4 @@
-{% extends "user/skeleton.html" %}
+{% extends "private/skeleton.html" %}
 {% block content %}

 <h3>
--- a/myapp/ns_page/templates/user/pages.html
+++ b/myapp/ns_page/templates/user/pages.html
@@ -1,16 +1,38 @@
-{% extends "user/skeleton.html" %}
+{% extends "private/skeleton.html" %}
 {% block content %}

 <h3>
+<div class="btn-group">
+<button type="button" class="btn btn-outline-secondary" v-on:click="panel_show(panels.filter)"><i class="fa fa-filter"></i></button>
+<button type="button" class="btn btn-outline-secondary" v-on:click="panel_show(panels.order_by)"><i class="fa fa-sort-alpha-asc"></i></button>
+</div>
 <div class="float-right">
 <a class="btn btn-outline-success" href="/page/add"><i class="fa fa-plus"></i></a>
 </div>
-<button type="button" class="btn btn-outline-secondary" v-on:click="showPanel(panels.filter)"><i class="fa fa-filter"></i></button>

 Статьи
 </h3>
 <hr />

+<!-- Начало: Панель сортировки -->
+<div class="row" v-if="panels.order_by.visible">
+<div class="col py-2">
+
+<div class="input-group">
+<button type="button" class="btn btn-outline-secondary" v-if="panels.order_by.order==='asc'" v-on:click="panels.order_by.order = 'desc'; getBriefcases();"><i class="fa fa-sort-alpha-asc"></i></button>
+<button type="button" class="btn btn-outline-secondary" v-else v-on:click="panels.order_by.order = 'asc'; getBriefcases();"><i class="fa fa-sort-alpha-desc"></i></button>
+<select class="form-select" v-model="panels.order_by.field" v-on:change="getBriefcases();">
+<option value="id">ID</option>
+<option value="title">заголовку</option>
+<option value="created">дате создания</option>
+<option value="updated">дате обновления</option>
+</select>
+</div>
+
+</div>
+</div>
+<!-- Конец: Панель сортировки -->
+
 {% include 'inc/filter.html' %}

 <pagination-component v-bind:pagination="pagination" v-bind:click-handler="getPages"></pagination-component>
@@ -35,125 +57,109 @@
 <script type="text/javascript" src="/static/components/pagination.js"></script>

 <script>
-var app = new Vue({
-    el: '#app',
-    data: {
-        filter: '',
-        pages: [],
-        pagination: {{ pagedata['pagination']|tojson|safe }},
-        panels: {
-            filter: {
-                visible: false
-            }
-        },
+Object.assign(root.data, {
+    raw_pages: [],
+    pagination: {{ pagedata['pagination']|tojson|safe }},
+});
+Object.assign(root.data.panels, {
+    order_by: {
+        visible: false,
+        field: 'title',
+        order: 'asc'
    },
-    methods: {
-        arrayRemove: function(arr, value) {
-            /* Удаление элемента из списка */
-            return arr.filter(function(ele){
-                return ele != value;
-            });
-        },
-        filterApply: function() {},
-        filterClear: function() {
-            /* Очистить фильтр */
-            let vm = this;
-            vm.filter = '';
-        },
-        filterPage: function(page) {
-            let vm = this;
-            if ( vm.filter.length<1 ) {
-                return true;
-            }
-            if ( page.title.toLowerCase().includes(vm.filter.toLowerCase()) ) {
-                return true;
-            }
-            return false;
-        },
-        getPages: function() {
-            /* Получить список статей */
-            let vm = this;
-            axios.post(
-                '/api',
-                {
-                    "jsonrpc": "2.0",
-                    "method": "pages",
-                    "params": {
-                        "page": vm.pagination.page
-                    },
-                    "id": 1
-                }
-            ).then(
-                function(response) {
-                    if ('result' in response.data) {
-                        vm.pages = response.data['result'];
-                    }
-                }
-            );
-        },
-        showPanel: function(panel) {
-            /* Показать/скрыть панель */
-            panel.visible = !panel.visible;
-        },
+});
+Object.assign(root.methods, {
+    filterApply: function() {},
+    filterPage: function(page) {
+        let vm = this;
+        let value = vm.panels.filter.value;
+        if ( value.length<1 ) {
+            return true;
+        }
+        if ( page.title.toLowerCase().includes(value.toLowerCase()) ) {
+            return true;
+        }
+        return false;
    },
-    created: function() {
+    getPages: function() {
+        /* Получить список статей */
        let vm = this;
        axios.post(
            '/api',
-            [
-                {
-                    "jsonrpc": "2.0",
-                    "method": "pages",
-                    "params": {
-                        "page": vm.pagination.page
-                    },
-                    "id": 1
+            {
+                "jsonrpc": "2.0",
+                "method": "pages",
+                "params": {
+                    "page": vm.pagination.page
                },
-                {
-                    "jsonrpc": "2.0",
-                    "method": "pages.count",
-                    "params": {},
-                    "id": 1
-                }
-            ]
+                "id": 1
+            }
        ).then(
            function(response) {
-                if ('result' in response.data[0]) {
-                    vm.pages = response.data[0]['result'];
-                }
-                if ('result' in response.data[1]) {
-                    vm.pagination.size = response.data[1]['result'];
+                if ('result' in response.data) {
+                    vm.raw_pages = response.data['result'];
                }
            }
        );
    },
-    computed: {
-        filteredPages: function() {
-            /* Отфильтрованный список */
-            let vm = this;
-            var result = vm.pages.filter(vm.filterPage);
-            return result; 
-        },
-        firstAlpha: function() {
-            /* Получить первый символ */
-            let vm = this;
-            let result = null;
-            if (vm.pages.length>0) {
-                result = vm.pages[0].title.charAt(0);
+});
+root.created = function() {
+    let vm = this;
+    axios.post(
+        '/api',
+        [
+            {
+                "jsonrpc": "2.0",
+                "method": "pages",
+                "params": {
+                    "page": vm.pagination.page
+                },
+                "id": 1
+            },
+            {
+                "jsonrpc": "2.0",
+                "method": "pages.count",
+                "params": {},
+                "id": 1
            }
-            return result;
-        },
-        lastAlpha: function() {
-            /* Получить последний символ */
-            let vm = this;
-            let result = null;
-            if (vm.pages.length>0) {
-                let title = vm.pages[vm.pages.length-1].title;
-                result = title.charAt(0);
+        ]
+    ).then(
+        function(response) {
+            if ('result' in response.data[0]) {
+                vm.raw_pages = response.data[0]['result'];
+            }
+            if ('result' in response.data[1]) {
+                vm.pagination.size = response.data[1]['result'];
            }
-            return result;
        }
+    );
+};
+Object.assign(root.computed, {
+    pages: function() {
+        /* Отфильтрованный список */
+        let vm = this;
+        var result = vm.raw_pages.filter(vm.filterPage);
+        return result; 
+    },
+    firstAlpha: function() {
+        /* Получить первый символ */
+        let vm = this;
+        let result = null;
+        if (vm.raw_pages.length>0) {
+            result = vm.raw_pages[0].title.charAt(0);
+        }
+        return result;
+    },
+    lastAlpha: function() {
+        /* Получить последний символ */
+        let vm = this;
+        let result = null;
+        if (vm.raw_pages.length>0) {
+            let title = vm.raw_pages[vm.raw_pages.length-1].title;
+            result = title.charAt(0);
+        }
+        return result;
    }
-})
+});
 </script>
 {% endblock %}
--- a/myapp/ns_profile/templates/profile_pages.html
+++ b/myapp/ns_profile/templates/profile_pages.html
@@ -22,21 +22,13 @@
 <script type="text/javascript" src="/static/components/pagination.js"></script>

 <script type="text/javascript">
-var app = new Vue({
-    el: '#app',
-    data: {
-        filter: '',
-        menuitem: 'pages',
-        pages: [],
-        pagination: {{ pagedata['pagination']|tojson|safe }},
-    },
-    methods: {
+Object.assign(root.data, {
+    menuitem: 'pages',
+    raw_pages: [],
+    pagination: {{ pagedata['pagination']|tojson|safe }},
+});
+Object.assign(root.methods, {
        filterApply: function() {},
-        filterClear: function() {
-            /* Очистить фильтр */
-            let vm = this;
-            vm.filter = '';
-        },
        filterPage: function(page) {
            let vm = this;
            if ( vm.filter.length<1 ) {
@@ -63,7 +55,7 @@ var app = new Vue({
            ).then(
                function(response) {
                    if ('result' in response.data) {
-                        vm.pages = response.data['result'];
+                        vm.raw_pages = response.data['result'];
                    }
                }
            );
@@ -92,7 +84,7 @@ var app = new Vue({
        ).then(
            function(response) {
                if ('result' in response.data[0]) {
-                    vm.pages = response.data[0]['result'];
+                    vm.raw_pages = response.data[0]['result'];
                }
                if ('result' in response.data[1]) {
                    vm.pagination.size = response.data[1]['result'];
@@ -101,9 +93,9 @@ var app = new Vue({
        );
    },
    computed: {
-        filteredPages: function() {
+        pages: function() {
            let vm = this;
-            return vm.pages;
+            return vm.raw_pages;
        }
    },
 })
--- a/myapp/ns_tag/templates/guest/tag.html
+++ b/myapp/ns_tag/templates/guest/tag.html
@@ -10,7 +10,7 @@

 <pagination-component v-bind:pagination="pagination" v-bind:click-handler="getPages"></pagination-component>

-{% include 'inc/pages.html' %}
+{% include '/inc/pages.html' %}

 <pagination-component v-bind:pagination="pagination" v-bind:click-handler="getPages"></pagination-component>

@@ -32,75 +32,72 @@
 <script type="text/javascript" src="/static/components/pagination.js"></script>

 <script type="text/javascript">
-var app = new Vue({
-    el: '#app',
-    data: {
-        tag: {{ pagedata['tag']|tojson|safe }},
-        pages: [],
-        pagination: {{ pagedata['pagination']|tojson|safe }},
-    },
-    methods: {
-        getPages: function() {
-            /* Получить список статей */
-            let vm = this;
-            axios.post(
-                '/api',
-                {
-                    "jsonrpc": "2.0",
-                    "method": "tag.pages",
-                    "params": {
-                        "id": vm.tag.id,
-                        "page": vm.pagination.page
-                    },
-                    "id": 1
-                }
-            ).then(
-                function(response) {
-                    if ('result' in response.data) {
-                        vm.pages = response.data['result'];
-                    }
-                }
-            );
-        },
-    },
-    created: function() {
+Object.assign(root.data, {
+    tag: {{ pagedata['tag']|tojson|safe }},
+    raw_pages: [],
+    pagination: {{ pagedata['pagination']|tojson|safe }},
+});
+Object.assign(root.methods, {
+    getPages: function() {
+        /* Получить список статей */
        let vm = this;
        axios.post(
            '/api',
-            [
-                {
-                    "jsonrpc": "2.0",
-                    "method": "tag.pages",
-                    "params": {
-                        "id": vm.tag.id,
-                        "page": vm.pagination.page
-                    },
-                    "id": 1
+            {
+                "jsonrpc": "2.0",
+                "method": "tag.pages",
+                "params": {
+                    "id": vm.tag.id,
+                    "page": vm.pagination.page
                },
-                {
-                    "jsonrpc": "2.0",
-                    "method": "tag.pages.count",
-                    "params": {},
-                    "id": 1
-                }
-            ]
+                "id": 1
+            }
        ).then(
            function(response) {
-                if ('result' in response.data[0]) {
-                    vm.pages = response.data[0]['result'];
-                }
-                if ('result' in response.data[1]) {
-                    vm.pagination.size = response.data[1]['result'];
+                if ('result' in response.data) {
+                    vm.raw_pages = response.data['result'];
                }
            }
        );
    },
-    computed: {
-        filteredPages: function() {
-            let vm = this;
-            return vm.pages;
+});
+root.created = function() {
+    let vm = this;
+    axios.post(
+        '/api',
+        [
+            {
+                "jsonrpc": "2.0",
+                "method": "tag.pages",
+                "params": {
+                    "id": vm.tag.id,
+                    "page": vm.pagination.page
+                },
+                "id": 1
+            },
+            {
+                "jsonrpc": "2.0",
+                "method": "tag.pages.count",
+                "params": {},
+                "id": 1
+            }
+        ]
+    ).then(
+        function(response) {
+            if ('result' in response.data[0]) {
+                vm.raw_pages = response.data[0]['result'];
+            }
+            if ('result' in response.data[1]) {
+                vm.pagination.size = response.data[1]['result'];
+            }
        }
-    },
-})
+    );
+};
+Object.assign(root.computed, {
+    pages: function() {
+        let vm = this;
+        return vm.raw_pages;
+    }
+});
 </script>
 {% endblock %}
--- a/myapp/ns_tag/templates/guest/tags.html
+++ b/myapp/ns_tag/templates/guest/tags.html
@@ -30,32 +30,27 @@
 <link rel="stylesheet" href="/static/components/backtotop.css"></link>

 <script type="text/javascript">
-var app = new Vue({
-    el: '#app',
-    data: {
-        tags: [],
-    },
-    methods: {
-    },
-    created: function() {
-        /* Получить список тегов после загрузки страницы */
-        let vm = this;
-        axios.post(
-            '/api',
-            {
-                "jsonrpc": "2.0",
-                "method": 'tags',
-                "params": {},
-                "id": 1
+Object.assign(root.data, {
+    tags: [],
+});
+root.created = function() {
+    /* Получить список тегов после загрузки страницы */
+    let vm = this;
+    axios.post(
+        '/api',
+        {
+            "jsonrpc": "2.0",
+            "method": 'tags',
+            "params": {},
+            "id": 1
+        }
+    ).then(
+        function(response) {
+            if ('result' in response.data) {
+                vm.tags = response.data['result'];
            }
-        ).then(
-            function(response) {
-                if ('result' in response.data) {
-                    vm.tags = response.data['result'];
-                }
-            }
-        );
-    }
-})
+        }
+    );
+};
 </script>
 {% endblock %}
--- a/myapp/ns_tag/templates/user/tag.html
+++ b/myapp/ns_tag/templates/user/tag.html
@@ -1,4 +1,4 @@
-{% extends "user/skeleton.html" %}
+{% extends "private/skeleton.html" %}
 {% block content %}

 {% raw %}
@@ -7,11 +7,11 @@
 Тег {{ tag.name }}</h3>
 <hr />
 {% endraw %}
-{% include 'user/tag_menu.html' %}
+{% include '/user/tag_menu.html' %}

 <pagination-component v-bind:pagination="pagination" v-bind:click-handler="getPages"></pagination-component>

-{% include 'inc/pages.html' %}
+{% include '/inc/pages.html' %}

 <pagination-component v-bind:pagination="pagination" v-bind:click-handler="getPages"></pagination-component>

@@ -33,78 +33,75 @@
 <script type="text/javascript" src="/static/components/pagination.js"></script>

 <script type="text/javascript">
-var app = new Vue({
-    el: '#app',
-    data: {
-        menuitem: null,
-        tag: {{ pagedata['tag']|tojson|safe }},
-        pages: [],
-        pagination: {{ pagedata['pagination']|tojson|safe }},
-    },
-    methods: {
-        getPages: function() {
-            /* Получить список статей */
-            let vm = this;
-            axios.post(
-                '/api',
-                {
-                    "jsonrpc": "2.0",
-                    "method": "tag.pages",
-                    "params": {
-                        "id": vm.tag.id,
-                        "page": vm.pagination.page
-                    },
-                    "id": 1
-                }
-            ).then(
-                function(response) {
-                    if ('result' in response.data) {
-                        vm.pages = response.data['result'];
-                    }
-                }
-            );
-        },
-    },
-    created: function() {
+Object.assign(root.data, {
+    menuitem: null,
+    tag: {{ pagedata['tag']|tojson|safe }},
+    raw_pages: [],
+    pagination: {{ pagedata['pagination']|tojson|safe }},
+});
+Object.assign(root.methods, {
+    getPages: function() {
+        /* Получить список статей */
        let vm = this;
        axios.post(
            '/api',
-            [
-                {
-                    "jsonrpc": "2.0",
-                    "method": "tag.pages",
-                    "params": {
-                        "id": vm.tag.id,
-                        "page": vm.pagination.page
-                    },
-                    "id": 1
+            {
+                "jsonrpc": "2.0",
+                "method": "tag.pages",
+                "params": {
+                    "id": vm.tag.id,
+                    "page": vm.pagination.page
                },
-                {
-                    "jsonrpc": "2.0",
-                    "method": "tag.pages.count",
-                    "params": {
-                        "id": vm.tag.id
-                    },
-                    "id": 1
-                }
-            ]
+                "id": 1
+            }
        ).then(
            function(response) {
-                if ('result' in response.data[0]) {
-                    vm.pages = response.data[0]['result'];
-                }
-                if ('result' in response.data[1]) {
-                    vm.pagination.size = response.data[1]['result'];
+                if ('result' in response.data) {
+                    vm.raw_pages = response.data['result'];
                }
            }
        );
    },
-    computed: {
-        filteredPages: function() {
-            let vm = this;
-            return vm.pages;
+});
+root.created = function() {
+    let vm = this;
+    axios.post(
+        '/api',
+        [
+            {
+                "jsonrpc": "2.0",
+                "method": "tag.pages",
+                "params": {
+                    "id": vm.tag.id,
+                    "page": vm.pagination.page
+                },
+                "id": 1
+            },
+            {
+                "jsonrpc": "2.0",
+                "method": "tag.pages.count",
+                "params": {
+                    "id": vm.tag.id
+                },
+                "id": 1
+            }
+        ]
+    ).then(
+        function(response) {
+            if ('result' in response.data[0]) {
+                vm.raw_pages = response.data[0]['result'];
+            }
+            if ('result' in response.data[1]) {
+                vm.pagination.size = response.data[1]['result'];
+            }
        }
+    );
+},
+Object.assign(root.computed, {
+    pages: function() {
+        let vm = this;
+        return vm.raw_pages;
    }
-})
+});
 </script>
 {% endblock %}
--- a/myapp/ns_tag/templates/user/tag_notes.html
+++ b/myapp/ns_tag/templates/user/tag_notes.html
@@ -1,4 +1,4 @@
-{% extends "user/skeleton.html" %}
+{% extends "private/skeleton.html" %}
 {% block content %}

 {% raw %}
@@ -10,35 +10,12 @@

 {% include 'user/tag_menu.html' %}

-{% raw %}
 <pagination-component v-bind:pagination="pagination" v-bind:click-handler="getNotes"></pagination-component>

-<div class="row" v-for="(note, noteIdx) in notes">
-<div class="col py-2" :class="{'bg-light': noteIdx % 2}">
-
-<a :href="'/note/' + note.id" v-html="note.title"></a>
-
-<div class="row">
-<div class="col small text-muted">
-<span v-for="(tag, tagIdx) in note.tags">
-<i class="fa fa-tag"></i> <a class="text-monospace" :href="'/tag/' + tag.id">{{ tag.name }}</a>&nbsp;
-</span>
-</div>
-</div>
-
-<div class="row">
-<div class="col small text-muted">
-Создано: {{ note.created }}&nbsp;
-Обновлено: {{ note.updated }}
-</div>
-</div>
-
-</div>
-</div>
+{% include '/inc/notes.html' %}

 <pagination-component v-bind:pagination="pagination" v-bind:click-handler="getNotes"></pagination-component>

-{% endraw %}
 {% endblock %}

 {% block breadcrumb %}
@@ -58,76 +35,73 @@
 <script type="text/javascript" src="/static/components/pagination.js"></script>

 <script type="text/javascript">
-var app = new Vue({
-    el: '#app',
-    data: {
-        menuitem: 'notes',
-        tag: {{ pagedata['tag']|tojson|safe }},
-        notes: [],
-        pagination: {{ pagedata['pagination']|tojson|safe }},
-    },
-    methods: {
-        getNotes: function() {
-            /* Получить список статей */
-            let vm = this;
-            axios.post(
-                '/api',
-                {
-                    "jsonrpc": "2.0",
-                    "method": "tag.notes",
-                    "params": {
-                        "id": vm.tag.id,
-                        "page": vm.pagination.page
-                    },
-                    "id": 1
-                }
-            ).then(
-                function(response) {
-                    if ('result' in response.data) {
-                        vm.notes = response.data['result'];
-                    }
-                }
-            );
-        },
-    },
-    created: function() {
+Object.assign(root.data, {
+    menuitem: 'notes',
+    tag: {{ pagedata['tag']|tojson|safe }},
+    raw_notes: [],
+    pagination: {{ pagedata['pagination']|tojson|safe }},
+});
+Object.assign(root.methods, {
+    getNotes: function() {
+        /* Получить список статей */
        let vm = this;
        axios.post(
            '/api',
-            [
-                {
-                    "jsonrpc": "2.0",
-                    "method": "tag.notes",
-                    "params": {
-                        "id": vm.tag.id,
-                        "page": vm.pagination.page
-                    },
-                    "id": 1
+            {
+                "jsonrpc": "2.0",
+                "method": "tag.notes",
+                "params": {
+                    "id": vm.tag.id,
+                    "page": vm.pagination.page
                },
-                {
-                    "jsonrpc": "2.0",
-                    "method": "tag.notes.count",
-                    "params": {},
-                    "id": 1
-                }
-            ]
+                "id": 1
+            }
        ).then(
            function(response) {
-                if ('result' in response.data[0]) {
-                    vm.notes = response.data[0]['result'];
-                }
-                if ('result' in response.data[1]) {
-                    vm.pagination.size = response.data[1]['result'];
+                if ('result' in response.data) {
+                    vm.raw_notes = response.data['result'];
                }
            }
        );
    },
-    computed: {
-        filteredPages: function() {
-            let vm = this;
-            return vm.pages;
+});
+root.created = function() {
+    let vm = this;
+    axios.post(
+        '/api',
+        [
+            {
+                "jsonrpc": "2.0",
+                "method": "tag.notes",
+                "params": {
+                    "id": vm.tag.id,
+                    "page": vm.pagination.page
+                },
+                "id": 1
+            },
+            {
+                "jsonrpc": "2.0",
+                "method": "tag.notes.count",
+                "params": {},
+                "id": 1
+            }
+        ]
+    ).then(
+        function(response) {
+            if ('result' in response.data[0]) {
+                vm.raw_notes = response.data[0]['result'];
+            }
+            if ('result' in response.data[1]) {
+                vm.pagination.size = response.data[1]['result'];
+            }
        }
-    },
-})
+    );
+};
+Object.assign(root.computed, {
+    notes: function() {
+        let vm = this;
+        return vm.raw_notes;
+    }
+});
 </script>
 {% endblock %}
--- a/myapp/ns_tag/templates/user/tags.html
+++ b/myapp/ns_tag/templates/user/tags.html
@@ -1,4 +1,4 @@
-{% extends "user/skeleton.html" %}
+{% extends "private/skeleton.html" %}
 {% block content %}

 <h3>
@@ -42,88 +42,79 @@
 <link rel="stylesheet" href="/static/components/backtotop.css"></link>

 <script type="text/javascript">
-var app = new Vue({
-    el: '#app',
-    data: {
-        tags: [],
-        formNewTag: false,
-        newTag: ''
-    },
-    methods: {
-        arrayRemove: function(arr, value) {
-            /* Удаление элемента из списка */
-            return arr.filter(function(element){
-                return element != value;
-            });
-        },
-        addTag: function() {
-            /* Добавить тег */
-            let vm = this;
-            axios.post(
-                '/api',
-                {
-                    "jsonrpc": "2.0",
-                    "method": 'tag.add',
-                    "params": {
-                        "name": vm.newTag
-                    },
-                    "id": 1
-                }
-            ).then(
-                function(response) {
-                    if ('result' in response.data) {
-                        vm.tags.push(response.data['result']);
-                        vm.newTag = '';
-                    }
-                }
-            );
-        },
-        showFormNewTag: function() {
-            /* Показать/скрыть форму добавления нового тега */
-            let vm = this;
-            vm.formNewTag = !vm.formNewTag;
-        },
-        deleteTag: function(tag) {
-            /* Удалить тег */
-            let vm = this;
-            axios.post(
-                '/api',
-                {
-                    "jsonrpc": "2.0",
-                    "method": 'tag.delete',
-                    "params": {
-                        "id": tag.id
-                    },
-                    "id": 1
-                }
-            ).then(
-                function(response) {
-                    if ('result' in response.data) {
-                        vm.tags = vm.arrayRemove(vm.tags, tag);
-                    }
-                }
-            );
-        }
-    },
-    created: function() {
-        /* Получить список тегов после загрузки страницы */
+Object.assign(root.data, {
+    tags: [],
+    formNewTag: false,
+    newTag: ''
+});
+Object.assign(root.methods, {
+    addTag: function() {
+        /* Добавить тег */
        let vm = this;
        axios.post(
            '/api',
            {
                "jsonrpc": "2.0",
-                "method": 'tags',
-                "params": {},
+                "method": 'tag.add',
+                "params": {
+                    "name": vm.newTag
+                },
                "id": 1
            }
        ).then(
            function(response) {
                if ('result' in response.data) {
-                    vm.tags = response.data['result'];
+                    vm.tags.push(response.data['result']);
+                    vm.newTag = '';
+                }
+            }
+        );
+    },
+    showFormNewTag: function() {
+        /* Показать/скрыть форму добавления нового тега */
+        let vm = this;
+        vm.formNewTag = !vm.formNewTag;
+    },
+    deleteTag: function(tag) {
+        /* Удалить тег */
+        let vm = this;
+        axios.post(
+            '/api',
+            {
+                "jsonrpc": "2.0",
+                "method": 'tag.delete',
+                "params": {
+                    "id": tag.id
+                },
+                "id": 1
+            }
+        ).then(
+            function(response) {
+                if ('result' in response.data) {
+                    vm.tags = vm.arrayRemove(vm.tags, tag);
                }
            }
        );
    }
-})
+});
+root.created = function() {
+    /* Получить список тегов после загрузки страницы */
+    let vm = this;
+    axios.post(
+        '/api',
+        {
+            "jsonrpc": "2.0",
+            "method": 'tags',
+            "params": {},
+            "id": 1
+        }
+    ).then(
+        function(response) {
+            if ('result' in response.data) {
+                vm.tags = response.data['result'];
+            }
+        }
+    );
+};
 </script>
 {% endblock %}
--- a/myapp/ns_user/init.py
+++ b/myapp/ns_user/init.py
@@ -5,7 +5,7 @@ __email__ = 'remizoffalex@mail.ru'
 import os
 import jinja2

-from . import views # noqa F401
+from . import routes # noqa F401
 from .. import app


--- a/myapp/ns_user/routes.py
+++ b/myapp/ns_user/routes.py
@@ -0,0 +1,43 @@
+__author__ = 'RemiZOffAlex'
+__email__ = 'remizoffalex@mail.ru'
+__url__ = 'https://remizoffalex.ru/'
+
+from flask import abort
+
+from . import views_user, views_guest
+from .. import app, lib
+
+
+@app.route('/user/<int:id>')
+def user_id(id):
+    """Пользователь
+    """
+    if lib.get_user():
+        return views_user.user_id(id)
+    else:
+        return views_guest.user_id(id)
+
+
+@app.route('/user/<int:id>/pages', defaults={'page': 1})
+@app.route('/user/<int:id>/pages/<int:page>')
+def user_pages(id: int, page: int):
+    """Список статей пользователя
+    """
+    if lib.get_user():
+        return views_user.user_pages(id, page)
+    else:
+        return views_guest.user_pages(id, page)
+        abort(404)
+
+
+@app.route('/users', defaults={'page': 1})
+@app.route('/users/<int:page>')
+def users(page: int):
+    """
+    Список пользователей
+    """
+    if lib.get_user():
+        return views_user.users(page)
+    else:
+        return views_guest.users(page)
+        abort(404)
--- a/myapp/ns_user/templates/guest/user.html
+++ b/myapp/ns_user/templates/guest/user.html
@@ -0,0 +1,46 @@
+{% extends "skeleton.html" %}
+{% block content %}
+
+{% raw %}
+<h3>
+<a class="btn btn-outline-secondary" href="/users"><i class="fa fa-chevron-left"></i></a>
+{{ user.name }}</h3>
+<hr />
+{% endraw %}
+
+{% include 'user_menu.html' %}
+{% raw %}
+
+Зарегистрирован: {{ user.created }}
+
+{% endraw %}
+
+
+{% endblock %}
+
+{% block breadcrumb %}
+{% raw %}
+<ol class="breadcrumb mt-3">
+    <li class="breadcrumb-item"><a href="/"><i class="fa fa-home"></i></a></li>
+    <li class="breadcrumb-item"><a href="/user">Список пользователей</a></li>
+    <li class="breadcrumb-item">{{ user.name }}</li>
+</ol>
+{% endraw %}
+{% endblock %}
+
+{% block script %}
+<script type="text/javascript" src="/static/components/backtotop.js"></script>
+<link rel="stylesheet" href="/static/components/backtotop.css"></link>
+
+<script type="text/javascript">
+var app = new Vue({
+    el: '#app',
+    data: {
+        menuitem: null,
+        user: {{ pagedata['user']|tojson|safe }},
+    },
+    methods: {
+    },
+})
+</script>
+{% endblock %}
--- a/myapp/ns_user/templates/guest/user_menu.html
+++ b/myapp/ns_user/templates/guest/user_menu.html
@@ -0,0 +1,13 @@
+<div class="row">
+<div class="col">
+
+<div class="btn btn-primary mb-2" v-if="menuitem===null"><i class="fa fa-bars"></i></div>
+<a class="btn btn-outline-secondary mb-2" :href="'/user/' + user.id" v-else><i class="fa fa-bars"></i></a>
+
+
+<div class="btn btn-primary mb-2" v-if="menuitem==='pages'">Статьи</div>
+<a class="btn btn-outline-secondary mb-2" :href="'/user/' + user.id + '/pages'" v-else>Статьи</a>
+
+</div>
+</div>
+<hr />
--- a/myapp/ns_user/templates/guest/user_pages.html
+++ b/myapp/ns_user/templates/guest/user_pages.html
@@ -0,0 +1,123 @@
+{% extends "skeleton.html" %}
+{% block content %}
+
+{% raw %}
+<h3>
+<a class="btn btn-outline-secondary" href="/users"><i class="fa fa-chevron-left"></i></a>
+{{ user.name }}</h3>
+<hr />
+{% endraw %}
+
+{% include 'user_menu.html' %}
+
+<pagination-component v-bind:pagination="pagination" v-bind:click-handler="getPages"></pagination-component>
+
+{% include 'inc/pages.html' %}
+
+<pagination-component v-bind:pagination="pagination" v-bind:click-handler="getPages"></pagination-component>
+
+<backtotop-component></backtotop-component>
+
+{% endblock %}
+
+{% block breadcrumb %}
+{% raw %}
+<ol class="breadcrumb mt-3">
+    <li class="breadcrumb-item"><a href="/"><i class="fa fa-home"></i></a></li>
+    <li class="breadcrumb-item"><a href="/user">Список пользователей</a></li>
+    <li class="breadcrumb-item">{{ user.name }}</li>
+</ol>
+{% endraw %}
+{% endblock %}
+
+{% block script %}
+<script type="text/javascript" src="/static/components/backtotop.js"></script>
+<link rel="stylesheet" href="/static/components/backtotop.css"></link>
+<script type="text/javascript" src="/static/components/pagination.js"></script>
+
+<script type="text/javascript">
+Object.assign(root.data, {
+    menuitem: 'pages',
+    user: {{ pagedata['user']|tojson|safe }},
+    raw_pages: [],
+    pagination: {{ pagedata['pagination']|tojson|safe }},
+});
+Object.assign(root.methods, {
+    filterApply: function() {},
+    filterPage: function(page) {
+        let vm = this;
+        if ( vm.filter.length<1 ) {
+            return true;
+        }
+        if ( page.title.toLowerCase().includes(vm.filter.toLowerCase()) ) {
+            return true;
+        }
+        return false;
+    },
+    getPages: function() {
+        /* Получить список статей */
+        let vm = this;
+        axios.post(
+            '/api',
+            {
+                "jsonrpc": "2.0",
+                "method": "pages",
+                "params": {
+                    "page": vm.pagination.page
+                },
+                "id": 1
+            }
+        ).then(
+            function(response) {
+                if ('result' in response.data) {
+                    vm.raw_pages = response.data['result'];
+                }
+            }
+        );
+    },
+});
+root.created = function() {
+    let vm = this;
+    axios.post(
+        '/api',
+        [
+            {
+                "jsonrpc": "2.0",
+                "method": "user.pages",
+                "params": {
+                    "id": vm.user.id,
+                    "page": vm.pagination.page
+                },
+                "id": 1
+            },
+            {
+                "jsonrpc": "2.0",
+                "method": "user.pages.count",
+                "params": {
+                    "id": vm.user.id,
+                },
+                "id": 1
+            }
+        ]
+    ).then(
+        function(response) {
+            if ('result' in response.data[0]) {
+                vm.raw_pages = response.data[0]['result'];
+            }
+            if ('result' in response.data[1]) {
+                vm.pagination.size = response.data[1]['result'];
+            }
+        }
+    );
+};
+    computed: {
+        pages: function() {
+            /* Отфильтрованный список */
+            let vm = this;
+            var result = vm.raw_pages.filter(vm.filterPage);
+            return result; 
+        },
+    },
+})
+</script>
+{% endblock %}
--- a/myapp/ns_user/templates/guest/users.html
+++ b/myapp/ns_user/templates/guest/users.html
@@ -0,0 +1,96 @@
+{% extends "skeleton.html" %}
+{% block content %}
+
+<h3>Список пользователей</h3>
+<hr />
+
+{% include '/inc/filter.html' %}
+
+<pagination-component v-bind:pagination="pagination" v-bind:click-handler="getUsers"></pagination-component>
+
+{% include '/inc/users.html' %}
+
+<pagination-component v-bind:pagination="pagination" v-bind:click-handler="getUsers"></pagination-component>
+
+<backtotop-component></backtotop-component>
+
+{% endblock %}
+
+{% block breadcrumb %}
+<ol class="breadcrumb mt-3">
+    <li class="breadcrumb-item"><a href="/"><i class="fa fa-home"></i></a></li>
+    <li class="breadcrumb-item">Список пользователей</li>
+</ol>
+{% endblock %}
+
+{% block script %}
+<script type="text/javascript" src="/static/components/backtotop.js"></script>
+<link rel="stylesheet" href="/static/components/backtotop.css"></link>
+<script type="text/javascript" src="/static/components/pagination.js"></script>
+
+<script type="text/javascript">
+Object.assign(root.data, {
+    raw_users: [],
+    pagination: {{ pagedata['pagination']|tojson|safe }},
+});
+Object.assign(root.methods, {
+    getUsers: function() {
+        let vm = this;
+        axios.post(
+            '/api',
+            {
+                "jsonrpc": "2.0",
+                "method": "users",
+                "params": {
+                    "page": vm.pagination.page
+                },
+                "id": 1
+            }
+        ).then(
+            function(response) {
+                if ('result' in response.data) {
+                    vm.raw_users = response.data['result'];
+                }
+            }
+        );
+    }
+});
+Object.assign(root.computed, {
+    users: function() {
+        let vm = this;
+        return vm.raw_users;
+    }
+});
+root.created = function() {
+    let vm = this;
+    axios.post(
+        '/api',
+        [
+            {
+                "jsonrpc": "2.0",
+                "method": 'users',
+                "params": {
+                    "page": vm.pagination.page
+                },
+                "id": 1
+            },
+            {
+                "jsonrpc": "2.0",
+                "method": 'users.count',
+                "params": {},
+                "id": 1
+            }
+        ]
+    ).then(
+        function(response) {
+            if ('result' in response.data[0]) {
+                vm.raw_users = response.data[0]['result'];
+            }
+            if ('result' in response.data[1]) {
+                vm.pagination.size = response.data[1]['result'];
+            }
+        }
+    );
+};
+</script>
+{% endblock %}
--- a/myapp/ns_user/templates/user_pages.html
+++ b/myapp/ns_user/templates/user_pages.html
@@ -18,7 +18,6 @@

 <backtotop-component></backtotop-component>

-
 {% endblock %}

 {% block breadcrumb %}
@@ -37,93 +36,85 @@
 <script type="text/javascript" src="/static/components/pagination.js"></script>

 <script type="text/javascript">
-var app = new Vue({
-    el: '#app',
-    data: {
-        filter: '',
-        menuitem: 'pages',
-        user: {{ pagedata['user']|tojson|safe }},
-        pages: [],
-        pagination: {{ pagedata['pagination']|tojson|safe }},
+Object.assign(root.data, {
+    menuitem: 'pages',
+    user: {{ pagedata['user']|tojson|safe }},
+    raw_pages: [],
+    pagination: {{ pagedata['pagination']|tojson|safe }},
+});
+Object.assign(root.methods, {
+    filterApply: function() {},
+    filterPage: function(page) {
+        let vm = this;
+        if ( vm.filter.length<1 ) {
+            return true;
+        }
+        if ( page.title.toLowerCase().includes(vm.filter.toLowerCase()) ) {
+            return true;
+        }
+        return false;
    },
-    methods: {
-        filterApply: function() {},
-        filterClear: function() {
-            /* Очистить фильтр */
-            let vm = this;
-            vm.filter = '';
-        },
-        filterPage: function(page) {
-            let vm = this;
-            if ( vm.filter.length<1 ) {
-                return true;
-            }
-            if ( page.title.toLowerCase().includes(vm.filter.toLowerCase()) ) {
-                return true;
-            }
-            return false;
-        },
-        getPages: function() {
-            /* Получить список статей */
-            let vm = this;
-            axios.post(
-                '/api',
-                {
-                    "jsonrpc": "2.0",
-                    "method": "pages",
-                    "params": {
-                        "page": vm.pagination.page
-                    },
-                    "id": 1
-                }
-            ).then(
-                function(response) {
-                    if ('result' in response.data) {
-                        vm.pages = response.data['result'];
-                    }
-                }
-            );
-        },
-    },
-    created: function() {
+    getPages: function() {
+        /* Получить список статей */
        let vm = this;
        axios.post(
            '/api',
-            [
-                {
-                    "jsonrpc": "2.0",
-                    "method": "user.pages",
-                    "params": {
-                        "id": vm.user.id,
-                        "page": vm.pagination.page
-                    },
-                    "id": 1
+            {
+                "jsonrpc": "2.0",
+                "method": "pages",
+                "params": {
+                    "page": vm.pagination.page
                },
-                {
-                    "jsonrpc": "2.0",
-                    "method": "user.pages.count",
-                    "params": {
-                        "id": vm.user.id,
-                    },
-                    "id": 1
-                }
-            ]
+                "id": 1
+            }
        ).then(
            function(response) {
-                if ('result' in response.data[0]) {
-                    vm.pages = response.data[0]['result'];
-                }
-                if ('result' in response.data[1]) {
-                    vm.pagination.size = response.data[1]['result'];
+                if ('result' in response.data) {
+                    vm.raw_pages = response.data['result'];
                }
            }
        );
    },
+});
+root.created = function() {
+    let vm = this;
+    axios.post(
+        '/api',
+        [
+            {
+                "jsonrpc": "2.0",
+                "method": "user.pages",
+                "params": {
+                    "id": vm.user.id,
+                    "page": vm.pagination.page
+                },
+                "id": 1
+            },
+            {
+                "jsonrpc": "2.0",
+                "method": "user.pages.count",
+                "params": {
+                    "id": vm.user.id,
+                },
+                "id": 1
+            }
+        ]
+    ).then(
+        function(response) {
+            if ('result' in response.data[0]) {
+                vm.raw_pages = response.data[0]['result'];
+            }
+            if ('result' in response.data[1]) {
+                vm.pagination.size = response.data[1]['result'];
+            }
+        }
+    );
+};
    computed: {
-        filteredPages: function() {
+        pages: function() {
            /* Отфильтрованный список */
            let vm = this;
-            var result = vm.pages.filter(vm.filterPage);
+            var result = vm.raw_pages.filter(vm.filterPage);
            return result; 
        },
    },
--- a/myapp/ns_user/templates/users.html
+++ b/myapp/ns_user/templates/users.html
@@ -1,24 +1,14 @@
-{% extends "skeleton.html" %}
+{% extends "/private/skeleton.html" %}
 {% block content %}

 <h3>Список пользователей</h3>
 <hr />

-{% raw %}
+{% include '/inc/filter.html' %}
+
 <pagination-component v-bind:pagination="pagination" v-bind:click-handler="getUsers"></pagination-component>

-<div class="row" v-for="(user, userIdx) in users">
-<div class="col py-2">
-<a :href="'/user/' + user.id">{{ user.name }}</a>
-
-<small class="text-muted">
-<br />
-Создан: {{ user.created }}
-</small>
-
-</div>
-</div>
-{% endraw %}
+{% include '/inc/users.html' %}

 <pagination-component v-bind:pagination="pagination" v-bind:click-handler="getUsers"></pagination-component>

@@ -39,64 +29,68 @@
 <script type="text/javascript" src="/static/components/pagination.js"></script>

 <script type="text/javascript">
-var app = new Vue({
-    el: '#app',
-    data: {
-        users: [],
-        pagination: {{ pagedata['pagination']|tojson|safe }},
-    },
-    methods: {
-        getUsers: function() {
-            let vm = this;
-            axios.post(
-                '/api',
-                {
-                    "jsonrpc": "2.0",
-                    "method": 'users',
-                    "params": {
-                    },
-                    "id": 1
-                }
-            ).then(
-                function(response) {
-                    if ('result' in response.data) {
-                        vm.users = response.data['result'];
-                    }
-                }
-            );
-        }
-    },
-    created: function() {
+Object.assign(root.data, {
+    raw_users: [],
+    pagination: {{ pagedata['pagination']|tojson|safe }},
+});
+Object.assign(root.methods, {
+    getUsers: function() {
        let vm = this;
        axios.post(
            '/api',
-            [
-                {
-                    "jsonrpc": "2.0",
-                    "method": 'users',
-                    "params": {
-                        "page": vm.pagination.page
-                    },
-                    "id": 1
+            {
+                "jsonrpc": "2.0",
+                "method": "users",
+                "params": {
+                    "page": vm.pagination.page
                },
-                {
-                    "jsonrpc": "2.0",
-                    "method": 'users.count',
-                    "params": {},
-                    "id": 1
-                }
-            ]
+                "id": 1
+            }
        ).then(
            function(response) {
-                if ('result' in response.data[0]) {
-                    vm.users = response.data[0]['result'];
-                }
-                if ('result' in response.data[1]) {
-                    vm.pagination.size = response.data[1]['result'];
+                if ('result' in response.data) {
+                    vm.raw_users = response.data['result'];
                }
            }
        );
    }
-})
+});
+Object.assign(root.computed, {
+    users: function() {
+        let vm = this;
+        return vm.raw_users;
+    }
+});
+root.created = function() {
+    let vm = this;
+    axios.post(
+        '/api',
+        [
+            {
+                "jsonrpc": "2.0",
+                "method": 'users',
+                "params": {
+                    "page": vm.pagination.page
+                },
+                "id": 1
+            },
+            {
+                "jsonrpc": "2.0",
+                "method": 'users.count',
+                "params": {},
+                "id": 1
+            }
+        ]
+    ).then(
+        function(response) {
+            if ('result' in response.data[0]) {
+                vm.raw_users = response.data[0]['result'];
+            }
+            if ('result' in response.data[1]) {
+                vm.pagination.size = response.data[1]['result'];
+            }
+        }
+    );
+};
 </script>
 {% endblock %}
--- a/myapp/ns_user/views_guest.py
+++ b/myapp/ns_user/views_guest.py
@@ -0,0 +1,64 @@
+__author__ = 'RemiZOffAlex'
+__copyright__ = '(c) RemiZOffAlex'
+__email__ = 'remizoffalex@mail.ru'
+
+from flask import abort, render_template
+
+from .. import app, models
+
+
+def user_id(id):
+    """Пользователь
+    """
+    pagedata = {}
+    user = models.db_session.query(
+        models.User
+    ).filter(
+        models.User.id == id
+    ).first()
+    if user is None:
+        abort(404)
+    pagedata['user'] = user.as_dict()
+    pagedata['title'] = '{} - {}'.format(user.name, app.config['TITLE'])
+    body = render_template('/guest/user.html', pagedata=pagedata)
+    return body
+
+
+def user_pages(id):
+    """Список статей пользователя
+    """
+    pagedata = {}
+    user = models.db_session.query(
+        models.User
+    ).filter(
+        models.User.id == id
+    ).first()
+    if user is None:
+        abort(404)
+    pagedata['user'] = user.as_dict()
+    pagedata['title'] = '{} - {}'.format(user.name, app.config['TITLE'])
+
+    pagedata['pagination'] = {
+        "page": 1,
+        "per_page": app.config['ITEMS_ON_PAGE'],
+        "size": 0
+    }
+
+    body = render_template('/guest/user_pages.html', pagedata=pagedata)
+    return body
+
+
+def users(page: int):
+    """Список пользователей
+    """
+    pagedata = {}
+    pagedata['title'] = 'Список пользователей - ' + app.config['TITLE']
+
+    pagedata['pagination'] = {
+        "page": page,
+        "per_page": app.config['ITEMS_ON_PAGE'],
+        "size": 0
+    }
+
+    body = render_template('/guest/users.html', pagedata=pagedata)
+    return body
--- a/myapp/ns_user/views_user.py
+++ b/myapp/ns_user/views_user.py
@@ -7,7 +7,6 @@ from flask import abort, render_template
 from .. import app, models


-@app.route('/user/<int:id>')
 def user_id(id):
    """Пользователь
    """
@@ -25,7 +24,6 @@ def user_id(id):
    return body


-@app.route('/user/<int:id>/pages')
 def user_pages(id):
    """Список статей пользователя
    """
@@ -50,16 +48,14 @@ def user_pages(id):
    return body


-@app.route('/users')
-def users():
-    """
-    Список пользователей
+def users(page: int):
+    """Список пользователей
    """
    pagedata = {}
    pagedata['title'] = 'Список пользователей - ' + app.config['TITLE']

    pagedata['pagination'] = {
-        "page": 1,
+        "page": page,
        "per_page": app.config['ITEMS_ON_PAGE'],
        "size": 0
    }
--- a/myapp/static/components/backtotop.js
+++ b/myapp/static/components/backtotop.js
@@ -9,7 +9,7 @@ var backtotopTemplate = `
 </span>
 </div>`;

-Vue.component('backtotop-component', {
+root.components['backtotop-component'] = {
    props: {
        visibleoffset: {
            type: [String, Number],
@@ -50,4 +50,4 @@ Vue.component('backtotop-component', {
            }
        }
    }
-});
+};
--- a/myapp/static/components/pagination.js
+++ b/myapp/static/components/pagination.js
@@ -40,7 +40,7 @@ let paginationTemplate = `<div class="row">
 </div>
 </div>`;

-Vue.component('pagination-component', {
+root.components['pagination-component'] = {
    template: paginationTemplate,
    data: function() {
        return {
@@ -110,4 +110,4 @@ Vue.component('pagination-component', {
            return result;
        },
    }
-});
+};
--- a/myapp/static/components/tags.js
+++ b/myapp/static/components/tags.js
@@ -11,7 +11,7 @@ var tagsTemplate = `
 <div class="col">
 <div class="btn mb-1"><i class="fa fa-tags"></i></div>

-<div class="btn btn-outline-success mb-1" v-on:click="showPanel(panels.standart)"><i class="fa fa-plus"></i></div>
+<div class="btn btn-outline-success mb-1" v-on:click="panel_show(panels.standart)"><i class="fa fa-plus"></i></div>

 <div class="btn-group mr-2 mb-1" v-for="(tag, tagIdx) in sortedTags">
 <a class="btn btn-outline-secondary text-monospace" :href="'/tag/' + tag.id">{{ tag.name }}</a>
@@ -73,7 +73,7 @@ var tagsTemplate = `
 <!-- Конец: Теги -->
 </div>`;

-Vue.component('tags-component', {
+root.components['tags-component'] = {
    data: function() {
        return {
            newtag: '',
@@ -225,7 +225,7 @@ Vue.component('tags-component', {
                }
            );
        },
-        showPanel: function(panel) {
+        panel_show: function(panel) {
            /* Показать/скрыть панель */
            panel.visible = !panel.visible;
        },
@@ -259,4 +259,4 @@ Vue.component('tags-component', {
            return vm.tags;
        }
    }
-});
+};
--- a/myapp/static/js/vue.global.prod.js
+++ b/myapp/static/js/vue.global.prod.js
--- a/myapp/static/js/vue.min.js
+++ b/myapp/static/js/vue.min.js
--- a/myapp/templates/header.html
+++ b/myapp/templates/header.html
@@ -5,7 +5,7 @@
    <link rel="shortcut icon" href="/static/favicon.ico">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/static/css/font-awesome.min.css" />
-    <script type="text/javascript" src="/static/js/vue.min.js"></script>
+    <script type="text/javascript" src="/static/js/vue.global.prod.js"></script>
    <script type="text/javascript" src="/static/js/axios.min.js"></script>
    <title>{{ pagedata['title'] }}</title>
 </head>
--- a/myapp/templates/inc/filter.html
+++ b/myapp/templates/inc/filter.html
@@ -1,15 +1,31 @@
+<!-- Начало: Фильтр -->
 <div class="row" v-if="panels.filter.visible">
 <div class="col">
-<div class="form-group">
+<div class="mb-3">
+<form @submit.prevent="filter_apply">
 <div class="input-group">
-<div class="input-group-prepend">
-    <button class="btn btn-outline-danger" type="button" id="button-addon1" v-on:click="filterClear"><i class="fa fa-remove"></i></button>
-</div>
-<input class="form-control" id="filter" placeholder="Фильтр" v-model="filter" />
-<div class="input-group-append">
-    <button class="btn btn-outline-success" type="button" id="button-addon1" v-on:click="filterApply"><i class="fa fa-check"></i></button>
-</div>
+    <button class="btn btn-outline-danger" type="button" v-on:click="filter_clear"><i class="fa fa-remove"></i></button>
+    <input class="form-control" placeholder="Фильтр" v-model="panels.filter.value" />
+    <button class="btn btn-outline-success" type="submit"><i class="fa fa-check"></i></button>
 </div>
+</form>
 </div>
 </div>
 </div>
+
+<script type="text/javascript">
+Object.assign(root.data.panels, {
+    filter: {
+        visible: false,
+        value: ''
+    },
+});
+Object.assign(root.methods, {
+    filter_clear: function () {
+        /* Очистить фильтр */
+        let vm = this;
+        vm.panels.filter.value = '';
+    },
+});
+</script>
+<!-- Конец: Фильтр -->
--- a/myapp/templates/inc/init.html
+++ b/myapp/templates/inc/init.html
@@ -0,0 +1,23 @@
+<script type="text/javascript">
+let root = {
+    data: {
+        panels: {}
+    },
+    methods: {
+        arrayRemove: function (arr, value) {
+            /* Удаление элемента из списка */
+            return arr.filter(function (ele) {
+                return ele != value;
+            });
+        },
+        panel_show: function (panel) {
+            /* Показать/скрыть панель */
+            panel.visible = !panel.visible;
+        },
+    },
+    components: {},
+    created: function() {},
+    computed: {},
+    mounted: function() {},
+};
+</script>
--- a/myapp/templates/inc/notes.html
+++ b/myapp/templates/inc/notes.html
@@ -0,0 +1,26 @@
+{% raw %}
+<div class="row" v-for="(note, noteIdx) in notes">
+<div class="col py-2" :class="{'bg-light': noteIdx % 2}">
+
+<a :href="'/note/' + note.id" v-html="note.title"></a>
+
+<div class="row">
+<div class="col small text-muted">
+<span v-for="(tag, tagIdx) in note.tags">
+<i class="fa fa-tag"></i> <a class="text-monospace" :href="'/tag/' + tag.id">{{ tag.name }}</a>&nbsp;
+</span>
+</div>
+</div>
+
+<div class="row">
+<div class="col text-muted">
+<small>
+Создано: {{ note.created }}&nbsp;
+Обновлено: {{ note.updated }}
+</small>
+</div>
+</div>
+
+</div>
+</div>
+{% endraw %}
--- a/myapp/templates/inc/pages.html
+++ b/myapp/templates/inc/pages.html
@@ -1,5 +1,5 @@
 {% raw %}
-<div class="row" v-for="(page, pageIdx) in filteredPages">
+<div class="row" v-for="(page, pageIdx) in pages">
 <div class="col py-2" :class="{'bg-light': pageIdx % 2}">
 <a :href="'/page/' + page.id">{{ page.title }}</a>

--- a/myapp/templates/inc/run.html
+++ b/myapp/templates/inc/run.html
@@ -0,0 +1,13 @@
+<script type="text/javascript">
+const app = Vue.createApp({
+    data: function() {
+        return root.data;
+    },
+    methods: root.methods,
+    components: root.components,
+    created: root.created,
+    computed: root.computed,
+    mounted: root.mounted,
+});
+app.mount('#app');
+</script>
--- a/myapp/templates/inc/users.html
+++ b/myapp/templates/inc/users.html
@@ -0,0 +1,16 @@
+{% raw %}
+<div class="row" v-for="(user, userIdx) in users">
+<div class="col py-2">
+<a :href="'/user/' + user.id">{{ user.name }}</a>
+
+<div class="row">
+<div class="col text-muted">
+<small>
+Создан: {{ user.created }}
+</small>
+</div>
+</div>
+
+</div>
+</div>
+{% endraw %}
--- a/myapp/templates/private/navbar.html
+++ b/myapp/templates/private/navbar.html
--- a/myapp/templates/private/skeleton.html
+++ b/myapp/templates/private/skeleton.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ru">
+    {% include 'header.html' %}
+<body>
+{% include '/inc/init.html' %}
+
+<section id="app" class="container">
+{% include '/private/navbar.html' %}
+
+{% block content %}
+{% endblock content %}
+
+{% block breadcrumb %}
+{% endblock %}
+
+{% include 'footer.html' %}
+</section>
+
+{% block script %}{% endblock %}
+
+{% include '/inc/run.html' %}
+
+</body>
+</html>
--- a/myapp/templates/skeleton.html
+++ b/myapp/templates/skeleton.html
@@ -2,9 +2,8 @@
 <html lang="ru">
    {% include 'header.html' %}
 <body>
-<section id="app">
-
-<div class="container">
+{% include '/inc/init.html' %}
+<section id="app" class="container">
 {% include 'navbar.html' %}

 {% block content %}
@@ -14,20 +13,13 @@
 {% endblock %}

 {% include 'footer.html' %}
-</div>
 </section>

-{% block script %}
-<script type="text/javascript">
-var app = new Vue({
-    el: '#app',
-    data: {
-    },
-    methods: {
-    }
-})
-</script>
-{% endblock script %}
+{% block script %}{% endblock %}
+
+
+{% include '/inc/run.html' %}
+

 </body>
 </html>
--- a/myapp/templates/user/skeleton.html
+++ b/myapp/templates/user/skeleton.html
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html lang="ru">
-    {% include 'header.html' %}
-<body>
-<section id="app">
-
-<div class="container">
-{% include 'user/navbar.html' %}
-
-{% block content %}
-{% endblock content %}
-
-{% block breadcrumb %}
-{% endblock %}
-
-{% include 'footer.html' %}
-</div>
-</section>
-
-{% block script %}
-<script type="text/javascript">
-var app = new Vue({
-    el: '#app',
-    data: {
-    },
-    methods: {
-    }
-})
-</script>
-{% endblock script %}
-
-</body>
-</html>
--- a/run.py
+++ b/run.py
@@ -4,6 +4,41 @@ __author__ = 'RemiZOffAlex'
 __copyright__ = '(c) RemiZOffAlex'
 __email__ = 'remizoffalex@mail.ru'

+import sys
+import argparse
+import traceback
+
 from myapp import app as application

-application.run(debug=True, host='0.0.0.0', port=8000)
+
+def main():
+    parser = argparse.ArgumentParser(
+        description='API',
+        formatter_class=argparse.ArgumentDefaultsHelpFormatter
+    )
+    parser._optionals.title = "Необязательные аргументы"
+
+    parser.add_argument(
+        "--debug",
+        default=True,
+        action='store_true',
+        help="Отладочная информация"
+    )
+    parser.add_argument("--port", default=8000, help="Порт")
+    parser.add_argument("--config", default="devel", help="Файл конфигурации")
+
+    args = parser.parse_args()
+
+    application.config.from_object('config.{}'.format(args.config))
+
+    application.run(debug=args.debug, host='0.0.0.0', port=args.port)
+
+
+if __name__ == "__main__":
+    try:
+        main()
+    except Exception as err:
+        traceback.print_exc(file=sys.stdout)
+        sys.exit(1)
+
+    sys.exit(0)
--- a/utils/useradd.py
+++ b/utils/useradd.py
@@ -1,57 +0,0 @@
-#!/usr/bin/env python3
-
-__author__ = 'RemiZOffAlex'
-__copyright__ = '(c) RemiZOffAlex'
-__email__ = 'remizoffalex@mail.ru'
-
-import os
-import sys
-import argparse
-import traceback
-
-sys.path.insert(0, '/'.join(os.path.dirname(os.path.abspath(__file__)).split('/')[:-1]))
-
-from myapp import app, lib, models
-
-
-def main():
-    parser = argparse.ArgumentParser(
-        description='Скрипт добавления пользователя',
-        formatter_class=argparse.ArgumentDefaultsHelpFormatter
-    )
-    parser._optionals.title = "Необязательные аргументы"
-
-    parser.add_argument("--user", dest="user", required=True, help="Новый пользователь")
-    parser.add_argument("--password", dest="password", help="Новый пароль")
-
-    args = parser.parse_args()
-
-    user = models.db_session.query(
-        models.User
-    ).filter(
-        models.User.name == args.user
-    ).first()
-    if user:
-        app.logger.warning('Пользователь %s уже существует' % args.user)
-        sys.exit(1)
-    user = models.User(args.user)
-    if args.password is None:
-        args.password = lib.pwgen()
-        print('Пароль пользователя: {}'.format(args.password))
-    user.password = lib.get_hash_password(
-        args.password,
-        app.config['SECRET_KEY']
-    )
-    user.disabled = False
-    models.db_session.add(user)
-    models.db_session.commit()
-    app.logger.info('Пользователь %s успешно добавлен' % args.user)
-
-if __name__ == "__main__":
-    try:
-        main()
-    except Exception as err:
-        traceback.print_exc(file=sys.stdout)
-        exit(1)
-
-    exit(0)