{# Регистрация — то же стеклянное окно, что и вход (решение владельца, 19.08):
   марка, две пилюли, стрелка. Слова только по делу: строка про демо, тариф с
   лендинга и текст ошибки — ошибок тут больше одной («почта занята», «пароль
   короткий»), молчаливой красной рамки входа мало.

   Названия компании и имени на форме НЕТ намеренно: сервис шире бизнеса, а
   тенант заводится сам — имя из почты, переименование в «Настройки →
   Компания». Поля company/name сервер по-прежнему принимает. #}
{% extends "auth_glass.html" %}
{% block title %}{{ tr('Создать учётку') }} — Puntavia{% endblock %}
{% block hidden %}{% if plan_row %}<input type="hidden" name="plan" value="{{ plan_row.id }}">{% endif %}{% endblock %}
{% block above %}
<div class="s-note">{{ tr('Демо на {n} дня. Карта понадобится только для продолжения.').format(n=trial_days or 3) }}{% if plan_row %}<br><b>{{ tr('Тариф: до {n} машин, €{eur} в месяц после демо.').format(n=plan_row.seats, eur=plan_row.eur) }}</b>{% endif %}</div>
{# «для компании / для себя» — как принято у всех (владелец, 20.08); личному
   тенанту название не нужно, компании — пилюля с названием ниже #}
<div class="s-seg" role="radiogroup" aria-label="{{ tr('Для кого учётка') }}">
  <button type="button" class="s-seg-b on" data-kind="company">{{ tr('Для компании') }}</button>
  <button type="button" class="s-seg-b" data-kind="personal">{{ tr('Для себя') }}</button>
</div>
<input type="hidden" name="kind" id="kindInp" value="company">
<div class="s-inp" id="wrapCo" style="margin-bottom:10px">
  <span class="s-lock" aria-hidden="true">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 21V5.5A1.5 1.5 0 0 1 5.5 4h7A1.5 1.5 0 0 1 14 5.5V21"/><path d="M14 9h4.5A1.5 1.5 0 0 1 20 10.5V21"/><path d="M2.5 21h19"/><path d="M7.5 8h3M7.5 12h3M7.5 16h3M17 13v.01M17 17v.01"/></svg>
  </span>
  <input id="coname" type="text" name="company" maxlength="120" spellcheck="false"
         autocomplete="organization" aria-label="{{ tr('Название компании') }}"
         placeholder="{{ tr('Название компании') }}"
         value="{{ request.form.get('company', '') }}">
</div>
{% endblock %}
{% block pwauto %}new-password{% endblock %}
{% block pwextra %}minlength="8" maxlength="72"{% endblock %}
{% block submit_label %}{{ tr('Создать') }}{% endblock %}
{% block below %}
{# Панель требований — один в один с golova.io (Sso.vue, .s-req): открывается
   по ФОКУСУ пароля, прячется по блюру, когда пароль пуст или уже годен;
   бар «Надёжность» появляется с первым знаком. Пятое правило «латиница» —
   наше: серверные правила требуют ASCII, панель не должна врать. #}
{% set _check %}<svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"><path d="M5 13l4 4L19 7"/></svg>{% endset %}
<div class="s-req" id="pwreq">
  <div class="s-req-inner">
    <div class="s-strength" id="pwstrength" style="display:none">
      <div class="s-strength-bar">
        <div class="s-strength-seg"></div><div class="s-strength-seg"></div>
        <div class="s-strength-seg"></div><div class="s-strength-seg"></div>
      </div>
      <div class="s-strength-row">
        <span class="lbl">{{ tr('Надёжность') }}</span>
        <span class="val" id="pwval">—</span>
      </div>
    </div>
    <div class="s-req-title">{{ tr('Требования') }}</div>
    <div class="s-req-items">
      <div class="s-req-item" data-rule="len"><span class="dot">{{ _check }}</span><span>{{ tr('8–72 символа') }}</span></div>
      <div class="s-req-item" data-rule="digit"><span class="dot">{{ _check }}</span><span>{{ tr('Цифра (0–9)') }}</span></div>
      <div class="s-req-item" data-rule="upper"><span class="dot">{{ _check }}</span><span>{{ tr('Заглавная (A–Z)') }}</span></div>
      <div class="s-req-item" data-rule="lower"><span class="dot">{{ _check }}</span><span>{{ tr('Строчная (a–z)') }}</span></div>
      <div class="s-req-item" data-rule="ascii"><span class="dot">{{ _check }}</span><span>{{ tr('Только латиница') }}</span></div>
    </div>
  </div>
</div>
{% endblock %}
{% block errtext %}
{% if error %}<div class="s-msg">{{ error }}</div>{% endif %}
{# текст для живой заметки «почта занята» — тем же ключом, что и серверная
   ошибка; JS вставляет её между пилюлями по ответу /register/check #}
<span id="mailtakenText" hidden>{{ tr('Такая почта уже есть. Введите её пароль — заведём компанию на неё.') }}</span>
{% endblock %}
{% block links %}
<a href="/login">{{ tr('Уже есть учётка') }}</a>
<a href="/forgot">{{ tr('Забыли пароль?') }}</a>
{% endblock %}
{% block extra_js %}
<script>
/* Панель требований и «Надёжность» — перенос из golova.io (Sso.vue:
   checkPwRules, pwStrength, обработчики focus/blur). Форму намеренно не
   запираем: существующая учётка входит здесь СВОИМ, возможно старым,
   паролем — для неё правила не действуют, решает сервер. */
(function(){
  var pw = document.getElementById('pw');
  var req = document.getElementById('pwreq');
  var meter = document.getElementById('pwstrength');
  var val = document.getElementById('pwval');
  var LABELS = {1: '{{ tr("Слабый") }}', 2: '{{ tr("Средний") }}',
                3: '{{ tr("Хороший") }}', 4: '{{ tr("Надёжный") }}'};
  function rules(v){
    return {len: v.length >= 8 && v.length <= 72,
            digit: /\d/.test(v), upper: /[A-Z]/.test(v), lower: /[a-z]/.test(v),
            ascii: v.length > 0 && /^[\x21-\x7E]+$/.test(v)};
  }
  function valid(v){
    var r = rules(v);
    return r.len && r.digit && r.upper && r.lower && r.ascii;
  }
  function strength(v){
    if(!v) return 0; var s = 0;
    if(v.length >= 8) s++; if(v.length >= 12) s++;
    if(/[A-Z]/.test(v) && /[a-z]/.test(v)) s++;
    if(/[0-9]/.test(v)) s++;
    if(/[^A-Za-z0-9]/.test(v)) s++;
    if(/^(12345|123456|qwerty|password|пароль|admin|qwerty123|1q2w3e)/i.test(v)) s = Math.min(s, 1);
    if(/^(.)\1+$/.test(v)) s = 1;
    return Math.max(1, Math.min(s, 4));
  }
  function upd(){
    var v = pw.value, r = rules(v);
    Object.keys(r).forEach(function(k){
      req.querySelector('[data-rule="' + k + '"]').classList.toggle('met', r[k]);
    });
    meter.classList.remove('lvl1', 'lvl2', 'lvl3', 'lvl4');
    if(!v.length){ meter.style.display = 'none'; }
    else {
      meter.style.display = '';
      var l = strength(v);
      meter.classList.add('lvl' + l);
      val.textContent = LABELS[l];
    }
  }
  pw.addEventListener('focus', function(){ req.classList.add('show'); });
  pw.addEventListener('blur', function(){
    if(valid(pw.value) || pw.value.length === 0) req.classList.remove('show');
  });
  pw.addEventListener('input', upd); upd();
})();

/* «Для компании / для себя»: личному тенанту поле названия не показываем */
(function(){
  var seg = document.querySelectorAll('.s-seg-b');
  var kind = document.getElementById('kindInp');
  var co = document.getElementById('wrapCo');
  seg.forEach(function(b){
    b.addEventListener('click', function(){
      seg.forEach(function(x){ x.classList.toggle('on', x === b); });
      kind.value = b.getAttribute('data-kind');
      co.style.display = kind.value === 'company' ? '' : 'none';
    });
  });
})();

/* Занятая почта видна сразу, по уходу с поля, — а не вспышкой после
   отправки. Ответ сервера остаётся источником правды: заметка — подсказка,
   форма отправляется как обычно. */
(function(){
  var mail = document.getElementById('mail');
  var wrapMail = document.getElementById('wrapMail');
  var note = null, last = '';
  mail.addEventListener('blur', function(){
    var v = mail.value.trim().toLowerCase();
    if(!v || v.indexOf('@') < 0 || v === last) return;
    last = v;
    fetch('/register/check?email=' + encodeURIComponent(v))
      .then(function(r){ return r.ok ? r.json() : {exists: false}; })
      .then(function(d){
        if(d.exists){
          if(!note){
            note = document.createElement('div');
            note.className = 's-mailnote';
            note.textContent = document.getElementById('mailtakenText').textContent;
            wrapMail.insertAdjacentElement('afterend', note);
          }
          note.hidden = false;
        } else if(note){ note.hidden = true; }
      }).catch(function(){});
  });
  mail.addEventListener('input', function(){ if(note) note.hidden = true; last = ''; });
})();
</script>
{% endblock %}