new login page

assets/lang/en.json

@@ -90,5 +90,13 @@
   "Client Counts": "Client Counts",
   "Proxy Counts": "Proxy Counts",
   "Not Set": "Not Set",
-  "Proxy": "Proxies"
+  "Proxy": "Proxies",
+  "Username": "Username",
+  "Password": "Password",
+  "Login": "Login",
+  "Please input username": "Please input username",
+  "Please input password": "Please input password",
+  "Login success": "Login success",
+  "Username or password incorrect": "Username or password incorrect",
+  "Token invalid": "Token invalid"
 }

assets/lang/zh.json

@@ -90,5 +90,13 @@
   "Client Counts": "客户端总数",
   "Proxy Counts": "代理总数",
   "Not Set": "未配置",
-  "Proxy": "代理数量"
+  "Proxy": "代理数量",
+  "Username": "用户名",
+  "Password": "密码",
+  "Login": "登录",
+  "Please input username": "请填写用户名",
+  "Please input password": "请填写密码",
+  "Login success": "登录成功",
+  "Username or password incorrect": "用户名或密码错误",
+  "Token invalid": "登录信息无效"
 }

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

assets/templates/index.html

@@ -5,7 +5,7 @@
     <link rel="stylesheet" href="./static/lib/layui/css/layui.css">
     <link rel="stylesheet" href="./static/css/layui-theme-dark.css">
     <link rel="stylesheet" href="./static/css/index.css">
-    <link rel="stylesheet" href="./static/css/index-color.css">
+    <link rel="stylesheet" href="./static/css/color.css">
     <script src="./static/lib/layui/layui.js"></script>
     <script src="./static/lib/echarts.min.js"></script>
     <script src="./static/lib/filesize.min.js"></script>
@@ -27,7 +27,12 @@
 <div class="layui-layout layui-layout-admin">
     <div class="layui-header layui-bg-blue">
         <div class="layui-logo layui-hide-xs layui-bg-black">${ .FrpsPanel }</div>
-        <div class="layui-title" id="title"></div>
+        <div class="layui-title">
+            <span id="title"></span>
+            ${ if .showExit }
+            <span class="layui-icon layui-icon-logout" id="logout"></span>
+            ${ end }
+        </div>
     </div>
     <div class="layui-side layui-bg-black">
         <div class="layui-side-scroll">

assets/templates/login.html

@@ -4,26 +4,26 @@
     <title>Login</title>
     <link rel="stylesheet" href="./static/lib/layui/css/layui.css">
     <link rel="stylesheet" href="./static/css/layui-theme-dark.css">
-    <link rel="stylesheet" href="./static/css/index.css">
-    <link rel="stylesheet" href="./static/css/index-color.css">
+    <link rel="stylesheet" href="./static/css/color.css">
+    <link rel="stylesheet" href="./static/css/login.css">
     <script src="./static/lib/layui/layui.js"></script>
-    <script src="./static/js/index.js"></script>
-    <style>
-        .login-container {
-            width: 320px;
-            margin: 21px auto 0;
-        }
-    </style>
+    <script src="./static/js/login.js"></script>
 </head>
 <body>
-<div class="layui-form login-container">
+<div class="login-title">
+    <a href="https://github.com/yhl452493373/frps-panel" target="_blank">
+        <span class="title-text">${ .FrpsPanel }</span>
+        <span class="title-version">${ .version }</span>
+    </a>
+</div>
+<div class="layui-form login-container" id="loginForm">
     <div class="layui-form-item">
         <div class="layui-input-wrap">
             <div class="layui-input-prefix">
                 <i class="layui-icon layui-icon-username"></i>
             </div>
-            <input type="text" id="username" value="" lay-verify="required" placeholder="用户名"
-                   lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
+            <input type="text" id="username" value="" lay-verify="required" placeholder="${ .Username }"
+                   lay-reqtext="${ .PleaseInputUsername }" autocomplete="off" class="layui-input" lay-affix="clear">
         </div>
     </div>
     <div class="layui-form-item">
@@ -31,37 +31,13 @@
             <div class="layui-input-prefix">
                 <i class="layui-icon layui-icon-password"></i>
             </div>
-            <input type="password" id="password" value="" lay-verify="required" placeholder="密码"
-                   lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
+            <input type="password" id="password" value="" lay-verify="required" placeholder="${ .Password }"
+                   lay-reqtext="${ .PleaseInputPassword }" autocomplete="off" class="layui-input" lay-affix="eye">
         </div>
     </div>
     <div class="layui-form-item">
-        <button class="layui-btn layui-btn-fluid" id="login">登录</button>
+        <button class="layui-btn layui-btn-fluid" id="login">${ .Login }</button>
     </div>
 </div>
-
-<script>
-    var $ = layui.$;
-
-    $(function () {
-        $('#login').click(function () {
-            $.ajax({
-                url: "/",
-                username: $('#username').val(),
-                password: $('#password').val(),
-                success: function (result) {
-                    console.log(result);
-                    window.location.href = "/"
-                },
-                error: function (xhr, status, error) {
-                    if (xhr.status === 401) {
-                        layui.layer.msg('用户名或密码错误');
-                        return false;
-                    }
-                }
-            });
-        });
-    });
-</script>
 </body>
 </html>