new login page

assets/static/js/index.js

@@ -1,26 +1,50 @@
 var http_port, https_port;
 (function ($) {
     $(function () {
-        var langLoading = layui.layer.load()
-        $.getJSON('/lang.json').done(function (lang) {
-            layui.element.on('nav(leftNav)', function (elem) {
-                var id = elem.attr('id');
-                var title = elem.text();
-                if (id === 'serverInfo') {
-                    loadServerInfo(lang, title.trim());
-                } else if (id === 'userList') {
-                    loadUserList(lang, title.trim());
-                } else if (elem.closest('.layui-nav-item').attr('id') === 'proxyList') {
-                    if (id != null && id.trim() !== '') {
-                        var suffix = elem.closest('.layui-nav-item').children('a').text().trim();
-                        loadProxyInfo(lang, title + " " + suffix, id);
-                    }
-                }
-            });
+        function init() {
+            var langLoading = layui.layer.load()
+            $.getJSON('/lang.json').done(function (lang) {
+                $.ajaxSetup({
+                    error: function (xhr,) {
+                        if (xhr.status === 401) {
+                            layui.layer.msg(lang['TokenInvalid'], function () {
+                                window.location.reload();
+                            });
+                        }
+                    },
+                })
 
-            $('#leftNav .layui-this > a').click();
-        }).always(function () {
-            layui.layer.close(langLoading);
+                layui.element.on('nav(leftNav)', function (elem) {
+                    var id = elem.attr('id');
+                    var title = elem.text();
+                    if (id === 'serverInfo') {
+                        loadServerInfo(lang, title.trim());
+                    } else if (id === 'userList') {
+                        loadUserList(lang, title.trim());
+                    } else if (elem.closest('.layui-nav-item').attr('id') === 'proxyList') {
+                        if (id != null && id.trim() !== '') {
+                            var suffix = elem.closest('.layui-nav-item').children('a').text().trim();
+                            loadProxyInfo(lang, title + " " + suffix, id);
+                        }
+                    }
+                });
+
+                $('#leftNav .layui-this > a').click();
+            }).always(function () {
+                layui.layer.close(langLoading);
+            });
+        }
+
+        function logout() {
+            $.get("/logout", function (result) {
+                window.location.reload();
+            });
+        }
+
+        $(document).on('click.logout', '#logout', function () {
+            logout();
         });
+
+        init();
     });
 })(layui.$);

assets/static/js/login.js

@@ -0,0 +1,34 @@
+(function ($) {
+    $(function () {
+        function login() {
+            if (!layui.form.validate('#loginForm')) {
+                return;
+            }
+
+            $.ajax({
+                url: "/login",
+                type: 'post',
+                data: {
+                    username: $('#username').val(),
+                    password: $('#password').val()
+                },
+                success: function (result) {
+                    if (result.success) {
+                        document.cookie = 'token=' + result.token + ';path=/'
+                        window.location.href = "/"
+                    } else {
+                        layui.layer.msg(result.message);
+                    }
+                }
+            });
+        }
+
+        $(document).on('click.login', '#login', function () {
+            login();
+        }).on('keydown', function (e) {
+            if (e.keyCode === 13) {
+                login();
+            }
+        });
+    })
+})(layui.$)