<!--
  ~ Copyright 2020-2030 码匠君<herodotus@aliyun.com>
  ~
  ~ Dante Engine licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  ~ Dante Engine 是 Dante Cloud 系统核心组件库，采用 APACHE LICENSE 2.0 开源协议，您在使用过程中，需要注意以下几点：
  ~
  ~ 1. 请不要删除和修改根目录下的LICENSE文件。
  ~ 2. 请不要删除和修改 Dante Engine 源码头部的版权声明。
  ~ 3. 请保留源码和相关描述文件的项目出处，作者声明等。
  ~ 4. 分发源码时候，请注明软件出处 <https://gitee.com/dromara/dante-cloud>
  ~ 5. 在修改包名，模块名称，项目代码等时，请注明软件出处 <https://gitee.com/dromara/dante-cloud>
  ~ 6. 若您的项目无法满足以上几点，可申请商业授权
  -->

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <title>统一认证登录</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>

    <link rel="stylesheet" type="text/css" href="/webjars/bootstrap/dist/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/dist/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" href="/webjars/tabler__core/dist/css/tabler.min.css" th:href="@{/webjars/tabler__core/dist/css/tabler.min.css}">
    <link rel="stylesheet" type="text/css" href="/webjars/inter-ui/inter.css" th:href="@{/webjars/inter-ui/inter.css}">
    <link rel="stylesheet" type="text/css" href="/webjars/sweetalert2/dist/sweetalert2.min.css" th:href="@{/webjars/sweetalert2/dist/sweetalert2.min.css}">
</head>
<body class="d-flex flex-column">
<div class="row g-0 flex-fill">
    <div class="col-12 col-lg-6 col-xl-4 border-top-wide border-primary d-flex flex-column justify-content-center">
        <div class="container container-tight px-lg-5">
            <div class="text-center mb-4">
                <a href="https://www.herodotus.cn" class="navbar-brand navbar-brand-autodark"><img th:src="@{/herodotus/images/herodotus-cloud.png}" height="220" alt=""></a>
            </div>
            <div class="card card-md">
                <div class="card-body">
                    <h2 class="h3 text-center mb-4">
                        登录到您的帐户
                    </h2>
                    <div th:if="${message} != null" class="alert alert-danger" role="alert">
                        [[${message}]]
                    </div>
                    <form id="login-form" role="form" th:action="@{/login}" method="POST" autocomplete="off">
                        <div class="mb-3">
                            <label for="tank" class="form-label required">用户名</label>
                            <input id="tank" type="text" class="form-control" placeholder="请输入用户名" autocomplete="off" required>
                        </div>
                        <div class="mb-3">
                            <label for="fighter" class="form-label required">
                                密码
                                <span th:if="${show_forgot_password_url} == true" class="form-label-description"><a th:href="${forgot_password_url}">忘记密码</a></span>
                            </label>
                            <div class="input-group input-group-flat">
                                <input id="fighter" type="password" class="form-control" placeholder="请输入密码" autocomplete="off" required>
                            </div>
                        </div>
                        <div th:if="${show_verification_code} == true" class="row">
                            <div class="col-md-7">
                                <div class="mb-3">
                                    <label for="missile" class="form-label required">验证码</label>
                                    <input id="missile" type="text" class="form-control" placeholder="请输入验证码" autocomplete="off" required>
                                </div>
                            </div>
                            <div class="col-md-5">
                                <div class="mb-3">
                                    <label for="vrifyCodeImg" class="form-label">&nbsp;</label>
                                    <img id="vrifyCodeImg" class="form-control" src="" onclick="refresh()" alt="验证码" title="点击刷新" style="height: 39px; padding: 0"/>
                                </div>
                            </div>
                        </div>
                        <div class="mb-2">
                            <label class="form-check">
                                <input id="machine" type="checkbox" class="form-check-input"/>
                                <span class="form-check-label">下次自动登录</span>
                            </label>
                        </div>
                        <input type="hidden" id="symmetric" th:value="${soup_spoon}" disabled>
                        <input type="hidden" id="verification_category" name="verification_category" th:value="${verification_category}">
                        <input type="hidden" th:name="${vulgar_tycoon}" th:id="${vulgar_tycoon}">
                        <input type="hidden" th:name="${beast}" th:id="${beast}">
                        <input type="hidden" th:name="${graphic}" th:id="${graphic}">
                        <input type="hidden" th:name="${anubis}" th:id="${anubis}">
                        <div class="form-footer">
                            <button id="disco" type="submit" class="btn btn-primary w-100">登录</button>
                        </div>
                    </form>
                </div>

                <div class="hr-text">or</div>

                <div class="card-body">
                    <div class="row">
                        <div class="col">

                        </div>
                        <div class="col">

                        </div>
                    </div>
                </div>
            </div>

            <div th:if="${show_registration_url} == true" class="text-center text-secondary mt-3">
                还没有系统账号? <a th:href="${registration_ur}" tabindex="-1">注册</a>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-6 col-xl-8 d-none d-lg-block">
        <!-- Photo -->
        <div class="bg-cover h-100 min-vh-100" th:style="|background-image: url(@{/herodotus/images/login-cover.jpg})|"></div>
    </div>
</div>
<!-- Libs JS -->
<script type="text/javascript" src="/webjars/jquery/dist/jquery.min.js" th:src="@{/webjars/jquery/dist/jquery.min.js}"></script>
<script type="text/javascript" src="/webjars/bootstrap/dist/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/dist/js/bootstrap.min.js}"></script>
<script type="text/javascript" src="/webjars/sweetalert2/dist/sweetalert2.all.min.js" th:src="@{/webjars/sweetalert2/dist/sweetalert2.all.min.js}"></script>
<script type="text/javascript" src="/webjars/sm-crypto-v2/dist/index.umd.js" th:src="@{/webjars/sm-crypto-v2/dist/index.umd.js}"></script>
<!-- Tabler Core -->
<script type="text/javascript" src="/webjars/tabler__core/dist/js/tabler.min.js" th:src="@{/webjars/tabler__core/dist/js/tabler.min.js}"></script>
<!-- CUSTOM SCRIPT -->
<script type="text/javascript" th:src="@{/herodotus/js/common.js}"></script>
<script type="text/javascript" th:src="@{/herodotus/js/crypto.js}"></script>

<script type="text/javascript">

    let verification_category = '[[${verification_category}]]';
    let key = '';

    window.onload = function() {
        loadCaptcha();
        exchange();
    };

    function loadCaptcha() {
        let url = '[[${contextPath}]]/open/captcha'
        let sessionId = '[[${sessionId}]]';
        $.security.captcha(url, sessionId, verification_category)
            .then(result => {
                $('#vrifyCodeImg').attr('src', result);
            });
    }

    function exchange() {
        let url = '[[${contextPath}]]/open/identity/exchange'
        let sessionId = '[[${sessionId}]]';
        let symmetric = $('#symmetric').val();
        $.security.exchange(url, sessionId, symmetric)
            .then(result => {
                key = result;
            });
    }

    function refresh() {
        loadCaptcha();
    }

    $('#disco').click(function () {
        $("#login-form").submit(function (e) {
            let tank = $('#tank').val();
            let fighter = $('#fighter').val();
            let missile = $('#missile').val();
            let machine = $('#machine').is(':checked');

            let data =  $.security.encryptSignInFormData(tank, fighter, missile, key)

            let vulgarTycoon = '#' + '[[${vulgar_tycoon}]]';
            let beast = '#' + '[[${beast}]]';
            let graphic = '#' + '[[${graphic}]]';
            let anubis = '#' + '[[${anubis}]]';

            $(vulgarTycoon).val(data.encryptTank);
            $(beast).val(data.encryptFighter);
            $(graphic).val(data.encryptMissile);
            $(anubis).val(machine ? 'on' : 'off');
        });
    });

    jQuery(document).keydown(function (event) {
        if (event.keyCode === 13) {
            $('#disco').click();
        }
    });
</script>
</body>
</html>