<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="icon" th:href="@{/favicon16.png}" type="image/png" sizes="16x16">
    <link rel="icon" th:href="@{/favicon32.png}" type="image/png" sizes="32x32">
    <link rel="icon" th:href="@{/favicon.ico}" type="image/x-icon">
    <link rel="icon" th:href="@{/favicon.svg}" type="image/svg+xml" sizes="128x128">
    <link rel="alternate icon" th:href="@{/favicon.ico}" sizes="any">
    <link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/x-icon">
    <link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/vnd.microsoft.icon">
    <link rel="apple-touch-icon" th:href="@{/apple-touch-icon.png}" type="image/png" sizes="128x128">
    <link rel="bookmark" th:href="@{/favicon.ico}" type="image/x-icon">
    <link rel="dns-prefetch" th:href="@{/favicon32.png}" type="image/png" sizes="32x32">
    <link rel="stylesheet" href="./layui/css/layui.css" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" href="./style/login.css" th:href="@{/style/login.css}" media="all">
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="./js/html5.min.js" th:src="@{/js/html5.min.js}"></script>
    <script src="./js/respond.min.js" th:src="@{/js/respond.min.js}"></script>
    <![endif]-->
</head>
<body>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>PHOENIX</h2>
            <p>云监控平台</p>
        </div>
        <form class="layadmin-user-login-box layadmin-user-login-body layui-form" th:action="@{/doLogin}" method="post">
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-username"
                       for="LAY-user-login-username"></label>
                <input type="text" name="account" id="LAY-user-login-username" lay-verify="account" placeholder="账号"
                       class="layui-input" autocomplete="on" lay-verType="tips">
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                       for="LAY-user-login-password"></label>
                <input type="password" name="password" id="LAY-user-login-password" lay-verify="password"
                       placeholder="密码" class="layui-input" lay-verType="tips">
            </div>
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-xs7">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-vercode"
                               for="LAY-user-login-vercode"></label>
                        <input type="text" name="captcha" id="LAY-user-login-vercode" lay-verify="captcha"
                               placeholder="图形验证码" class="layui-input" lay-verType="tips">
                    </div>
                    <div class="layui-col-xs5">
                        <div style="margin-left: 10px;">
                            <img th:src="@{/captcha.png}" class="layadmin-user-login-codeimg"
                                 id="LAY-user-get-vercode">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" th:if="${param.error}">
                <label style="color: red;">
                    账号或密码错误，请重新输入！
                </label>
            </div>
            <div class="layui-form-item" th:if="${param.expire}">
                <label style="color: red;">
                    此账号已被管理员修改，您被迫下线！
                </label>
            </div>
            <div class="layui-form-item" th:if="${param.timeout}">
                <label style="color: red;">
                    登录已超时，请重新登录！
                </label>
            </div>
            <div class="layui-form-item" th:if="${param.captchaCannotBeEmpty}">
                <label style="color: red;">
                    图形验证码不能为空！
                </label>
            </div>
            <div class="layui-form-item" th:if="${param.captchaDoesNotExist}">
                <label style="color: red;">
                    图形验证码不存在！
                </label>
            </div>
            <div class="layui-form-item" th:if="${param.captchaHasExpired}">
                <label style="color: red;">
                    图形验证码已过期！
                </label>
            </div>
            <div class="layui-form-item" th:if="${param.captchaVerificationFailed}">
                <label style="color: red;">
                    图形验证码校验失败！
                </label>
            </div>
            <div class="layui-form-item" style="margin-bottom: 20px;">
                <input type="checkbox" name="remember-me" lay-skin="primary" title="记住我">
                <!--<a href="javascript:;" class="layadmin-user-jump-change layadmin-link"
                   style="margin-top: 7px;">忘记密码？</a>-->
            </div>
            <div class="layui-form-item">
                <button type="submit" class="layui-btn layui-btn-fluid" lay-submit>登 入</button>
            </div>
        </form>
    </div>
    <div class="layui-trans layadmin-user-login-footer">
        <p>Copyright 2020-2025 by PIFENG</p>
        <p>
            <span>
                <a href='https://gitee.com/monitoring-platform/phoenix' target="_blank">
                Fork me on Gitee
                </a>
            </span>
        </p>
    </div>

    <!--<div class="ladmin-user-login-theme">
      <script type="text/html" template>
        <ul>
          <li data-theme=""><img src="{{ layui.setter.base }}style/res/bg-none.jpg"></li>
          <li data-theme="#03152A" style="background-color: #03152A;"></li>
          <li data-theme="#2E241B" style="background-color: #2E241B;"></li>
          <li data-theme="#50314F" style="background-color: #50314F;"></li>
          <li data-theme="#344058" style="background-color: #344058;"></li>
          <li data-theme="#20222A" style="background-color: #20222A;"></li>
        </ul>
      </script>
    </div>-->

</div>
<script src="./layui/layui.js" th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:inline="javascript" charset="utf-8">
    var ctxPath = /*[[@{/}]]*/'';
    layui.use(['form', 'jquery'], function () {
        var form = layui.form, $ = layui.$;
        //自定义验证规则
        form.verify({
            account: function (value) {
                if (value.length === 0) {
                    return '账号不能为空！';
                }
            },
            password: function (value) {
                if (value.length === 0) {
                    return '密码不能为空！';
                }
            },
            captcha: function (value) {
                if (value.length === 0) {
                    return '图形验证码不能为空！';
                }
            }
        });
        // 点击图片刷新
        $('#LAY-user-get-vercode').click(function (_this) {
            $('#LAY-user-get-vercode').attr('src', ctxPath + 'captcha.png' + "?t=" + Math.random());
        });
    });
</script>
</body>
</html>