{% extends 'base.html' %}

{% block title %}Авторизация{% endblock %}
{% block header %}{% endblock %}


{% block content %}

<!-- {{ session["jwt"] }} -->

<div class="block">
    <div class="login-wrapper">
        <header>
            <div class="logotype">
                <a class="navbar-brand boost-nav-brand" href="//{{ config.PROJECT_NAME }}">
                    <span
                        style="display:block;color: #E04200;font-size: 40px;font-weight: 600;line-height: 1.2em;font-style: italic;font-family: Montserrat, Geneva, sans-serif;">EvaTeam</span>
                </a>
            </div>
        </header>
        {% if config.POLICY_BANNER %}
            <div class="policy-banner"><pre>{{ config.POLICY_BANNER }}</pre></div>
        {% endif %}
        <div class="login">
            <div class="login-content">
                <div id="info-message" style="color:#50a064;font-size:14px;"></div>
                <div id="error-message" style="color:red;font-size:14px;"></div>
                {% if "message" in request.values %}
                    <div id="redirect-message" style="color:red;font-size:14px;">{{ request.values['message'] }}</div>
                {% endif %}
                <form id="form" method="POST" action="">
                    <div class="form-group">
                        <label for="login">Электронная почта</label>
                        <input autofocus class="form-control" id="login" name="login" type="email"
                            placeholder="my-company@example.com" title="Введите электронную почту"
                            autocomplete="username" tabindex="10">
                    </div>
                    <div class="form-group">
                        <label id="password-label"><span>Пароль</span>
                            {% if config.AUTH_SERVER_URL == "https://account.evateam.ru" %}
                              <a class="forgot" href="https://{{ config.PROJECT_NAME }}/restore_password/" tabindex="5">Забыли пароль?</a>
                            {% else %}
                              <a class="forgot" href="/auth/restore_password?action=restore_password_form" tabindex="5">Забыли пароль?</a>
                            {% endif %}
                        </label>
                        <input class="form-control" id="password" name="password" type="password"
                            autocomplete="current-password" tabindex="20">
                        <div id="password-show_control" class="password-control"
                            onclick="show_hide_password(this)">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="25" height="25">
                                <g>
                                    <path
                                        d="M23.821,11.181v0C22.943,9.261,19.5,3,12,3S1.057,9.261.179,11.181a1.969,1.969,0,0,0,0,1.64C1.057,14.739,4.5,21,12,21s10.943-6.261,11.821-8.181A1.968,1.968,0,0,0,23.821,11.181ZM12,19c-6.307,0-9.25-5.366-10-6.989C2.75,10.366,5.693,5,12,5c6.292,0,9.236,5.343,10,7C21.236,13.657,18.292,19,12,19Z" />
                                    <path
                                        d="M12,7a5,5,0,1,0,5,5A5.006,5.006,0,0,0,12,7Zm0,8a3,3,0,1,1,3-3A3,3,0,0,1,12,15Z" />
                                </g>
                            </svg>
                        </div>
                    </div>
                    {% if config.POLICY_CONFIRM_TEXT %}
                        <span class="policy-confirm">
                            <input
                                    type="checkbox"
                                    onclick='{ document.getElementById("login-button").disabled = !this.checked; }'
                                    class="policy-confirm-input"
                                    tabindex="30"
                            >
                            <span>{{ config.POLICY_CONFIRM_TEXT }}</span>
                        </span>
                    {% endif %}
                    {% if config.AUTH_CHECK_CAPTCHA %}
                        <div class="form-group" id="captcha-form" style="display: none">
                            <label id="captcha-label"><span>Введите символы с картинки</span></label>
                            <input class="form-control" id="captcha-input" name="captcha" type="captcha"
                                autocomplete="" tabindex="35">
                            <img id="captcha-img" src="" />
                        </div>
                    {% endif %}
                    <div class="buttons">
                        <button type="submit" id="login-button" class="login-button" tabindex="40" {% if config.POLICY_CONFIRM_TEXT %}disabled{% endif %}>
                            Войти
                        </button>
                        {% if show_register_button %}
                            <a href="/auth/signup" class="register-link" tabindex="50">Зарегистрироваться</a>
                        {% endif %}
                    </div>
            </div>
            </form>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}

<script>
    const form = document.getElementById("form")
    const urlParams = new URLSearchParams(window.location.search)
    const restoreResult = urlParams.get("restore")
    const inviteResult = urlParams.get("invite")
    const infoElement = document.getElementById("info-message")
    const errorElement = document.getElementById("error-message")
    const restorePasswordPath = "/auth/restore_password?action=restore_password_form"

    if (restoreResult === "ok") {
        infoElement.innerHTML = "<p>На вашу почту отправлено письмо с новым паролем.</p>"
    } else if (restoreResult === "expired") {
        errorElement.innerHTML = "<p>Ссылка на сброс пароля устарела, пожалуйста <a href='https://www.{{ config.PROJECT_NAME }}/restore_password/'>повторите попытку</a>.</p>"
    } else if (restoreResult === "fail") {
        errorElement.innerHTML = "<p>Возникла ошибка при сбросе пароля. <a href='https://www.{{ config.PROJECT_NAME }}/support/'>Свяжитесь с технической поддержкой</a>.</p>"
    } else if (restoreResult === "wrong") {
        errorElement.innerHTML = "<p>Ссылка на сброс пароля устарела, пожалуйста <a href='https://www.{{ config.PROJECT_NAME }}/restore_password/'>повторите попытку</a>.</p>"
    }

    if (inviteResult === "ok") {
        infoElement.innerHTML = "<p>Вы успешно получили приглашение в EvaTeam.</p>"
    } else if (inviteResult === "expired") {
        errorElement.innerHTML = "<p>К сожалению ссылка с приглашением устарела. Попросите пригласившего отправить новую.</a></p>"
    } else if (inviteResult === "fail") {
        errorElement.innerHTML = "<p>Возникла ошибка при обработке приглашения. <a href='https://www.{{ config.PROJECT_NAME }}/support/'>Свяжитесь с технической поддержкой</a>.</p>"
    }


    function show_hide_password(target) {
        let input = document.getElementById('password');
        let showIcon = document.getElementById('password-show_control');

        if (input.getAttribute('type') == 'password') {
            target.classList.add('view');
            input.setAttribute('type', 'text');
            showIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="25" height="25"><g><path d="M23.821,11.181v0a15.736,15.736,0,0,0-4.145-5.44l3.032-3.032L21.293,1.293,18,4.583A11.783,11.783,0,0,0,12,3C4.5,3,1.057,9.261.179,11.181a1.969,1.969,0,0,0,0,1.64,15.736,15.736,0,0,0,4.145,5.44L1.293,21.293l1.414,1.414L6,19.417A11.783,11.783,0,0,0,12,21c7.5,0,10.943-6.261,11.821-8.181A1.968,1.968,0,0,0,23.821,11.181ZM2,12.011C2.75,10.366,5.693,5,12,5a9.847,9.847,0,0,1,4.518,1.068L14.753,7.833a4.992,4.992,0,0,0-6.92,6.92L5.754,16.832A13.647,13.647,0,0,1,2,12.011ZM15,12a3,3,0,0,1-3,3,2.951,2.951,0,0,1-1.285-.3L14.7,10.715A2.951,2.951,0,0,1,15,12ZM9,12a3,3,0,0,1,3-3,2.951,2.951,0,0,1,1.285.3L9.3,13.285A2.951,2.951,0,0,1,9,12Zm3,7a9.847,9.847,0,0,1-4.518-1.068l1.765-1.765a4.992,4.992,0,0,0,6.92-6.92l2.078-2.078A13.584,13.584,0,0,1,22,12C21.236,13.657,18.292,19,12,19Z"/></g></svg>';
        } else {
            target.classList.remove('view');
            input.setAttribute('type', 'password');
            showIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="25" height="25"><g><path d="M23.821,11.181v0C22.943,9.261,19.5,3,12,3S1.057,9.261.179,11.181a1.969,1.969,0,0,0,0,1.64C1.057,14.739,4.5,21,12,21s10.943-6.261,11.821-8.181A1.968,1.968,0,0,0,23.821,11.181ZM12,19c-6.307,0-9.25-5.366-10-6.989C2.75,10.366,5.693,5,12,5c6.292,0,9.236,5.343,10,7C21.236,13.657,18.292,19,12,19Z"/><path d="M12,7a5,5,0,1,0,5,5A5.006,5.006,0,0,0,12,7Zm0,8a3,3,0,1,1,3-3A3,3,0,0,1,12,15Z"/></g></svg>';
        }
        return false;
    }

    form.addEventListener("submit", async function (event) {
        event.preventDefault()
        const loginElement = document.getElementById("login")
        const passwordElement = document.getElementById("password")


        const login = encodeURIComponent(loginElement.value)
        const password = passwordElement.value

        {% if config.AUTH_CHECK_CAPTCHA %}
            const captchaElement = document.getElementById("captcha-input")
            const captcha = captchaElement.value
            captchaElement.value = ""
        {% endif %}


        const serverChallengeResponse = await fetch("{{config.AUTH_SERVER_URL}}/auth/signin?action=get_server_challenge&login=" + login)
        if (serverChallengeResponse.status >= 500) {
            errorElement.textContent = 'Ошибка авторизации. Обратитесь в техподдержку.';
            console.error(await serverChallengeResponse.text())
            return;
        } else if (serverChallengeResponse.status >= 400) {
            errorElement.innerHTML = `Неверный логин или пароль. <a style='color: #0099dc;' href=${restorePasswordPath}>Забыли пароль?</a>`;
            console.error(await serverChallengeResponse.text())
            return;
        }
        const serverChallenge = await serverChallengeResponse.text()
        // Не шифруем для внешних систем
        let payload = password;
        if (serverChallenge) {
            const randomLength = 32

            const serverRandom = serverChallenge.slice(0, randomLength * 2)
            const serverTimestamp = serverChallenge.slice(randomLength * 2, randomLength * 2 + 10)
            const serverSalt = hexToArrayBuffer(serverChallenge.slice(randomLength * 2 + 10))

            const clientTimestamp = parseInt(new Date().getTime() / 1000)

            if (clientTimestamp - serverTimestamp > 3600 * 24) {
                alert("Время истекло")
                return
            }

            let clientRandom = window.crypto.getRandomValues(new Uint8Array(randomLength));
            clientRandom = arrayBufferToHexDec(clientRandom)

            let secret = serverRandom + clientRandom + serverTimestamp + login
            // secret = "test1234test123"
            // padding делается автоматом по алгоритму 'pkcs7'

            key = await getKey(password, serverSalt)

            const keyHex = await keyToHex(key)

            const iv = window.crypto.getRandomValues(new Uint8Array(16));

            // const iv = new Uint8Array([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0])

            let encryptedMessage = await crypto.subtle.encrypt(
                {
                    name: "AES-CBC",
                    iv
                },
                key,
                encode(secret)
            );
            payload = arrayBufferToHexDec(concatTypedArrays(iv, new Uint8Array(encryptedMessage)))
        }

        // Показываем пользователю, что нужно подождать
        document.getElementById("login-button").disabled = true;
        let res = await post(window.location.href, {
            login,
            challenge_resp: payload,
            {% if config.AUTH_CHECK_CAPTCHA %}
                captcha: captcha,
            {% endif %}
        });
        document.getElementById("login-button").disabled = false;


        if (res.status >= 500) {
            errorElement.textContent = 'Ошибка авторизации. Обратитесь в техподдержку.';
            console.error(await res.text())
            return;
        } else if (res.status == 401) {
            const captchaImgElement = document.getElementById("captcha-img")
            // Чтобы не попадать в кеш
            var seconds = new Date().getTime() / 1000;
            captchaImgElement.src = "/auth/signin?action=captcha_img&login=" + encodeURI(login) + "&p=" + seconds;

            const captchaFormElement = document.getElementById("captcha-form")
            captchaFormElement.style.display = "";

            errorElement.textContent = 'Необходимо ввести символы с картинки.';
            console.error(await res.text())
            return;
        } else if (res.status >= 400) {
            errorElement.innerHTML = `Неверный логин или пароль. <a style='color: #0099dc;' href='${restorePasswordPath}'>Забыли пароль?</a>`;
            console.error(await res.text())
            return;
        }

        redirectNextUrl("/")

        return false
    })
</script>

{% endblock %}