{% load i18n %}
{% load bootstrap3 %}
{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="shortcut icon" href="{{ FAVICON_URL }}" type="image/x-icon">
    <title>
        {{ JMS_TITLE }}
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% include '_head_css_js.html' %}
    <!-- Stylesheets -->
    <link href="{% static 'css/login-style.css' %}" rel="stylesheet">
    <link href="{% static 'css/jumpserver.css' %}" rel="stylesheet">
    <script src="{% static "js/jumpserver.js" %}"></script>

    <style>
        .login-content {
            box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.15), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
        }

        .help-block {
            margin: 0;
            text-align: left;
        }

        form label {
            color: #737373;
            font-size: 13px;
            font-weight: normal;
        }

        .hr-line-dashed {
            border-top: 1px dashed #e7eaec;
            color: #ffffff;
            background-color: #ffffff;
            height: 1px;
            margin: 20px 0;
        }

        .login-content {
            height: 490px;
            width: 1066px;
            margin-right: auto;
            margin-left: auto;
            margin-top: calc((100vh - 470px) / 3);
        }

        body {
            background-color: #f2f2f2;
            height: calc(100vh - (100vh - 470px) / 3);
        }

        .captcha {
            float: right;
        }

        .right-image-box {
            height: 100%;
            width: 50%;
            float: right;
        }

        .left-form-box {
            text-align: center;
            background-color: white;
            height: 100%;
            width: 50%;
        }

        .red-fonts {
            color: red;
        }

        .form-group.has-error {
            margin-bottom: 0;
        }

        .captch-field .has-error .help-block {
            margin-top: -8px !important;
        }

        .no-captcha-challenge .form-group {
            margin-bottom: 20px;
        }

        .jms-title {
            padding: 40px 10px 10px;
        }

        .no-captcha-challenge .jms-title {
            padding: 60px 10px 10px;
        }

        .no-captcha-challenge .welcome-message {
            padding-top: 10px;
        }

        .more-login-item {
            border-right: 1px dashed #dedede;
            padding-left: 5px;
            padding-right: 5px;
        }

        .more-login-item:last-child {
            border: none;
        }

        .select-con {
            width: 22%;
        }

        .mfa-div {
            width: 100%;
        }
    </style>
</head>

<body>
<div class="login-content">
    <div class="right-image-box">
        <a href="{% if not XPACK_ENABLED %}https://github.com/jumpserver/jumpserver{% endif %}">
            <img src="{{ LOGIN_IMAGE_URL }}" style="height: 100%; width: 100%"/>
        </a>
    </div>
    <div class="left-form-box {% if not form.challenge and not form.captcha %} no-captcha-challenge {% endif %}">
        <div style="background-color: white">
            <div class="jms-title">
                <span style="font-size: 21px;font-weight:400;color: #151515;letter-spacing: 0;">{{ JMS_TITLE }}</span>
            </div>
            <div class="contact-form col-md-10 col-md-offset-1">
                <form id="login-form" action="" method="post" role="form" novalidate="novalidate">
                    {% csrf_token %}
                    <div style="line-height: 17px;margin-bottom: 20px;color: #999999;">
                    {% if form.non_field_errors %}
                        <p class="help-block red-fonts">
                            {{ form.non_field_errors.as_text }}
                        </p>
                    {% else %}
                        <p class="welcome-message">
                            {% trans 'Welcome back, please enter username and password to login' %}
                        </p>
                    {% endif %}
                    </div>

                    {% bootstrap_field form.username show_label=False %}

                    <div class="form-group {% if form.password.errors %} has-error {% endif %}">
                        <input type="password" class="form-control" id="password" placeholder="{% trans 'Password' %}" required>
                        <input id="password-hidden" type="text" style="display:none" name="{{ form.password.html_name }}">
                        {% if form.password.errors %}
                        <p class="help-block" style="text-align: left">
                            {{ form.password.errors.as_text }}
                        </p>
                        {% endif %}
                    </div>
                    {% if form.challenge %}
                        {% bootstrap_field form.challenge show_label=False %}
                    {% elif form.mfa_type %}
                        <div class="form-group" style="display: flex">
                        {% include '_mfa_otp_login.html' %}
                        </div>
                    {% elif form.captcha %}
                        <div class="captch-field">
                            {% bootstrap_field form.captcha show_label=False %}
                        </div>
                    {% endif %}
                    <div class="form-group" style="padding-top: 5px; margin-bottom: 10px">
                        <div class="row">
                            <div class="col-md-6" style="text-align: left">
                                {% if form.auto_login %}
                                    {% bootstrap_field form.auto_login form_group_class='' %}
                                {% endif %}
                            </div>
                            <div class="col-md-6">
                                <a id="forgot_password" href="{{ forgot_password_url }}" style="float: right">
                                    <small>{% trans 'Forgot password' %}?</small>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="form-group" style="">
                        <button type="submit" class="btn btn-transparent" onclick="doLogin();return false;">{% trans 'Login' %}</button>
                    </div>

                    <div>
                        {% if auth_methods %}
                            <div class="hr-line-dashed"></div>
                            <div style="display: inline-block; float: left">
                            <b class="text-muted text-left" >{% trans "More login options" %}</b>
                            {% for method in auth_methods %}
                                <a href="{{ method.url }}" class="more-login-item">
                                    <i class="fa"><img src="{{ method.logo }}" height="13" width="13"></i> {{ method.name }}
                                </a>
                            {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-center" style="display: inline-block;">
                        {% endif %}
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/static/js/plugins/jsencrypt/jsencrypt.min.js"></script>
<script>
    function encryptLoginPassword(password, rsaPublicKey) {
        if (!password) {
            return ''
        }
        var jsencrypt = new JSEncrypt(); //加密对象
        jsencrypt.setPublicKey(rsaPublicKey); // 设置密钥
        return jsencrypt.encrypt(password); //加密
    }

    function doLogin() {
        //公钥加密
        var rsaPublicKey = "{{ rsa_public_key }}"
        var password = $('#password').val(); //明文密码
        var passwordEncrypted = encryptLoginPassword(password, rsaPublicKey)
        $('#password-hidden').val(passwordEncrypted); //返回给密码输入input
        $('#login-form').submit(); //post提交
    }

    $(document).ready(function () {
    })
</script>
</html>

