{% 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>
        <div class="login">
            <div class="login-content">
                <form action="" method="post" id="form">
                    <div class="form-group">
                        <label for="name">ФИО</label>
                        <input type="name" autofocus autocomplete="name" name="name" id="name"
                            placeholder="ФИО" required class="form-control">
                            <span id="name-errtext"></span>
                    </div>
                    <div class="form-group">
                        <label for="login">Электронная почта</label>
                        <input type="email" autofocus autocomplete="username" name="login" id="login"
                            placeholder="Email" required class="form-control">
                            <span id="email-errtext"></span>
                    </div>
                    <div class="form-group">
                        <label for="password">Пароль</label>
                        <input type="password" autocomplete="new-password" name="password" id="password"
                            placeholder="Пароль" required class="form-control">
                            <span id="password-errtext"></span>
                    </div>
                    <div class="form-group">
                        <label for="confirmed_password">Повторите пароль</label>
                        <input type="password" autocomplete="new-password" name="confirmed_password"
                            id="confirmed_password" placeholder="Повторите пароль" required class="form-control">
                            <span id="confirmed_password-errtext"></span>
                        </div>
                    <div class="form-group">
                        <label for="phone">Телефон для защиты аккаунта</label>
                        <input type="phone" autofocus autocomplete="tel" name="phone" id="phone"
                            placeholder="+79998887766" class="form-control">
                            <span id="phone-errtext"></span>
                    </div>
                    <div class="form-group">
                        <label for="company">Компания</label>
                        <input type="company" autofocus autocomplete="tel" name="company" id="company"
                            placeholder="Название" class="form-control">
                            <span id="company-errtext"></span>
                    </div>
                    <div class="form-group">
                        <label>
                            <input type="checkbox" name="agreement" checked class="conditionalist">
                            <small class="conditionalist">
                                Я принимаю условия <a href="//{{ config.PROJECT_NAME }}/contract.pdf">Пользовательского
                                    соглашения</a>
                                и даю своё согласие на обработку моей персональной
                                информации на условиях, определенных
                                <a href="//{{ config.PROJECT_NAME }}/privacy-policy/">Политикой конфиденциальности</a>.
                            </small>
                        </label>
                    </div>
                    <div class="form-group">
                        <div class="buttons">
                            <input type="submit" value="Зарегистрироваться" class="register-link" />
                            <small style="display:block; text-align: right;">
                                Уже есть аккаунт?
                                <a href="signin" class="ml-auto">Войти</a>
                            </small>
                        </div>
                </form>
            </div>
        </div>
    </div>

</div>


{% endblock %}

{% block scripts %}

<script>
    const form = document.getElementById("form")
    const phoneError = document.getElementById("phone-errtext")
    const emailError = document.getElementById("email-errtext")
    const passwordError = document.getElementById("password-errtext")
    const confirmedPasswordError = document.getElementById("confirmed_password-errtext")
    const companyError = document.getElementById("company-errtext")

    function validatePhone(phone) {
        if (!phone) {
            return true
        }
        const reg = /^[+]?(\d{11,14})$/
        let phone_value = phone.replace(/[() -]/g, "")
        let errMsg = "Проверьте введенные данные, номер телефона должен содержать от 11 до 14 символов"

        if (!reg.test(String(phone_value))) {
            phoneError.append(errMsg)
            return false
        }
        return true
    }

    function validatePassword(password, confirmedPassword) {
        if (password.length < 6) {
            passwordError.append("Пароль должен содержать не менее 6 символов")
            return false
        }
        if (password.length > 20) {
            passwordError.append("Пароль должен содержать не более 20 символов")
            return false
        }

        if (password != confirmedPassword) {
            confirmedPasswordError.append("Пароли не совпадают")
            return false
        }
        return true
    }

    function validateEmail(email) {
        const re = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/
        let errMsg = "Введите валидный email"

        if (!re.test(String(email))) {
            emailError.append(errMsg)
            return false
        }
        return true
    }

    function EmailAlreadyExists() {
        let errMsg = "Такой пользователь уже зарегистрирован"
        emailError.append(errMsg)
        return 
    }

    form.addEventListener("submit", async function (event) {
        event.preventDefault()
        const loginElement = document.getElementById("login")
        const passwordElement = document.getElementById("password")
        const confirmedPasswordElement = document.getElementById("confirmed_password")
        const phoneElement = document.getElementById("phone")
        const nameElement = document.getElementById("name")
        const companyElement = document.getElementById("company")

        const validateLogin = loginElement.value
        const password = passwordElement.value
        const confirmedPassword = confirmedPasswordElement.value
        const phone = phoneElement.value
        const name = nameElement.value
        const company = companyElement.value

        emailError.innerHTML = ''
        phoneError.innerHTML = ''
        passwordError.innerHTML = ''
        confirmedPasswordError.innerHTML = ''
        companyError.innerHTML = ''

        if (!validateEmail(validateLogin)) {
            return
        }

        if (!validatePassword(password, confirmedPassword)) {
            return
        }

        if (!validatePhone(phone.replace(/[^0-9|+]+/g, ''))) {
            return
        }
        const login = encodeURIComponent(validateLogin)
        const salt = window.crypto.getRandomValues(new Uint8Array(16))
        const saltHex = await arrayBufferToHexDec(salt)

        const key = await getKey(password, salt)
        const keyHex = await keyToHex(key)

        const res = await post(window.location.href, { login, hash: keyHex, salt: saltHex, phone, name, company })

        if (!res.ok) {
            error = await res.json()
            if (error['description'] == "Попросите ваших коллег пригласить вас через ссылку") {
                companyError.append(error['description'])
            } else {
                EmailAlreadyExists()
            }
            
            console.error(await res.text())
            return
        }

        redirectNextUrl("/servicedesk/auth/signin")

        return false
    })
</script>

{% endblock %}