new login page

assets/static/css/color.css

@@ -113,7 +113,17 @@ section.proxy-list .proxy-info .layui-row .layui-row > div:first-child {
     color: #99a9bf;
 }
 
+.login-title,
+.login-title a {
+    color: #333 !important;
+}
+
 @media (prefers-color-scheme: dark) {
+    .login-title,
+    .login-title a {
+        color: #99a9bf !important;
+    }
+
     .layui-bg-blue {
         background-color: #395c74 !important;
     }
@@ -154,6 +164,11 @@ section.proxy-list .proxy-info .layui-row .layui-row > div:first-child {
         border-color: #5f5f60;
     }
 
+    .layui-form-danger + .layui-form-select .layui-input,
+    .layui-form-danger:focus {
+        border-color: #ff5722 !important;
+    }
+
     .layui-form-checkbox[lay-skin=primary]:hover > i {
         border-color: #5f5f60;
     }

assets/static/css/index.css

@@ -47,6 +47,19 @@ section {
     height: 100%;
     padding: 0 15px;
     box-sizing: border-box;
+    display: flex;
+}
+
+.layui-title #title {
+    flex: 1;
+    display: inline-block;
+}
+
+.layui-title #logout{
+    display: inline-block;
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
 }
 
 .layui-nav.layui-nav-tree {

assets/static/css/login.css

@@ -0,0 +1,30 @@
+html, body {
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.login-title {
+    text-align: center;
+    margin-bottom: 50px;
+}
+
+.login-title .title-text {
+    font-size: 24px;
+    text-align: center;
+    font-weight: bold;
+}
+
+.login-title .title-version {
+    font-size: 12px;
+}
+
+.login-container {
+    width: 320px;
+    margin: 0 auto;
+}

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.$)