{% extends 'base.html' %}

{% block title %}Профиль{% endblock %}
{% block header %}Профиль{% endblock %}


{% block content %}

{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<p style="color: green; font-weight: bold; font-size: 20px">{{ message }}</p>
{% endfor %}
{% endif %}
{% endwith %}

<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">
        {% if only_change_password != True %}
            <form method="POST">
              {% for field in g.auth.values(is_defined=True) | selectattr("visible") %}

              <div class="form-group">
                <label>
                  {% if field.input_type != "hidden" %}

                  {{ field.caption }}: <br>
                  {% endif %}
                </label>
                {# пока что все поля в профиле будут рид онли, кроме смены пароля #}
                <input style="width: 100%;" placeholder="{{ field.placeholder }}" type="{{field.input_type}}"
                  name="{{field.name}}" value="{% if field.value is not none %}{{ field.value }}{% endif %}"
                  disabled readonly class="form-control">

              </div>
              {% endfor %}
                {# Раз поля рид-онли, то и кнопка не нужна.
                    <div class="buttons"><button class="login-button">Сохранить</button></div>
                #}
            </form>
            <a style="display: block;text-align: right;" href="/">К списку продуктов</a>
            <hr>
        {% endif %}
        <h2 style="font-size: 18px;">Смена пароля</h2>

        <form
          method="POST"
          action="set_password"
          id="set-password"
        >
          <div class="form-group">
            <input
              type="hidden"
              id="login"
              name="login"
              value="{{g.auth.login}}"
            >
          </div>
          <div class="form-group">
            <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">
            <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="buttons">
            <button class="login-button">Сохранить</button>
          </div>
        </form>
        <pre></pre>
        {% if only_change_password != True %}
          <a style="display: block;text-align: right;" href="signout">Выйти из аккаунта</a>
        {% else %}
          <a style="display: block;text-align: right;" href="{{ next_url }}">Вернуться в профиль</a>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}

<script>
  const confirmedPasswordError = document.getElementById("confirmed_password-errtext")
  const passwordError = document.getElementById("password-errtext")
  function validatePassword(password, confirmedPassword) {
        if (password.length < {{g.global_settings.password_min_length}}) {
            passwordError.append("Пароль должен содержать не менее {{g.global_settings.password_min_length}} символов")
            return false
        }
        if (password.length > 20) {
            passwordError.append("Пароль должен содержать не более 20 символов")
            return false
        }

        if ("{{g.global_settings.password_min_upper_symbol}}" === "True") {
          const regex = /[A-Z]/;
          if (!regex.test(password)) {
            passwordError.append("Пароль должен содержать хотя бы одну заглавную букву")
            return false
          }
        }
        if ("{{g.global_settings.password_min_special_symbol}}" === "True") {
          const regex = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/;
          if (!regex.test(password)) {
            passwordError.append("Пароль должен содержать хотя бы один специальный символ")
            return false
          }
        }
        if ("{{g.global_settings.password_min_numbers}}" === "True") {
          const regex = /[0-9]/;
          if (!regex.test(password)) {
            passwordError.append("Пароль должен содержать хотя бы одну цифру")
            return false
          }
        }

        if (password != confirmedPassword) {
            confirmedPasswordError.append("Пароли не совпадают")
            return false
        }
        return true
  }
  
  // TODO: объединить код с регистрацией
  const form = document.getElementById("set-password")
  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 login = encodeURIComponent(loginElement.value)
    const password = passwordElement.value
    const confirmed_password = confirmedPasswordElement.value
    passwordError.innerHTML = ''
    confirmedPasswordError.innerHTML = ''
    if (!validatePassword(password, confirmed_password)) {
            return
    }

    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.pathname + "?action=set_password",
      {
        login,
        hash: keyHex,
        salt: saltHex,
      }
    )

    if (!res.ok) {
      alert("fail")
      console.error(await res.text())
      return
    } else {
      alert(await res.text())
    }

    {% if next_url %}
      redirectNextUrl("{{ next_url }}")
    {% else %}
      redirectNextUrl(window.location.href)
    {% endif %}
    return false
  })
</script>

{% endblock %}