LilSchool/project/templates/blocks/popup_auth.html

{% load static %}
<div class="popup js-popup-auth">
  <div class="popup__wrap js-popup-wrap">
    <button class="popup__close js-popup-close">
      <svg class="icon icon-close">
        <use xlink:href="{% static 'img/sprite.svg' %}#icon-close"></use>
      </svg>
    </button>
    <div class="popup__body">
      <div class="auth js-auth">
        <div class="auth__login js-auth-login">
          <div class="auth__nav">
            <a class="auth__type js-auth-type_login js-auth-type" href="#">Войти</a>
            <a class="auth__type js-auth-type_registration js-auth-type" href="#">РЕГИСТРАЦИЯ</a>
          </div>
          <div class="auth__body">
            <form id="learner-auth-form" method="post" action="{% url 'lilcity:login' %}">
              {% csrf_token %}
              <div class="auth__tab js-auth-tab js-auth-tab_login">
                <div class="auth__enter js-auth-enter">
                  <div id="learner-auth-field__username" class="auth__field field learner-auth-form__field">
                    <div class="field__label">ПОЧТА</div>
                    <div class="field__wrap">
                      <input id="learner-auth-form__email" class="field__input" type="email" name="username" placeholder="name@website.com"
                        tabindex="1">
                    </div>
                    <div id="learner-auth-field-error__username" class="field__error learner-auth-form__field-error"></div>
                  </div>
                  <div id="learner-auth-field__password" class="auth__field field learner-auth-form__field">
                    <div class="field__label">ПАРОЛЬ
                      <a class="field__link js-auth-go-pass" href="#" tabindex="4">Забыли пароль?
                      </a>
                    </div>
                    <div class="field__wrap">
                      <input id="learner-auth-form__password" class="field__input field__input--password" name="password" type="password" placeholder="Минимум 5 символов"
                        tabindex="2">
                      <div class="field__password-show">
                        <button class="password-toggle" type="button">
                          <svg class="icon icon-password-eye">
                            <use xlink:href="{% static 'img/sprite.svg' %}#icon-password-eye"></use>
                          </svg>
                          <svg class="icon icon-password-hidden-eye">
                            <use xlink:href="{% static 'img/sprite.svg' %}#icon-password-hidden-eye"></use>
                          </svg>
                        </button>
                      </div>
                    </div>
                    <div id="learner-auth-field-error__password" class="field__error learner-auth-form__field-error"></div>
                    <div id="learner-auth-field-error__all" class="auth-register__common-error form__common-error learner-auth-form__field-error"></div>
                  </div>
                  <div class="auth__foot">
                    <button id="learner-auth__button" class="auth__btn btn btn_light" tabindex="3">ВОЙТИ</button>
                    <div class="auth__or">или</div>
                    <button type="button" class="auth__btn btn btn_fb">
                      <svg class="icon icon-facebook">
                        <use xlink:href="{% static 'img/sprite.svg' %}#icon-facebook"></use>
                      </svg>
                      <span class="btn__title">ЧЕРЕЗ FACEBOOK</span>
                    </button>
                  </div>
                </div>
              </div>
            </form>
            <form id="learner-registration-form" method="post" action="{% url 'lilcity:registration-learner' %}">
              {% csrf_token %}
              <div class="auth__tab js-auth-tab js-auth-tab_registration">
                {% if referrer %}
                  <input type="hidden" name="referrer" value="{{ referrer.id }}">
                  <div class="auth__text">
                    Спасибо за&nbsp;то, что&nbsp;вы&nbsp;с&nbsp;нами! Вас&nbsp;пригласил ваш&nbsp;друг {{ referrer.get_full_name }}.
                    При&nbsp;первой покупке {{ config.REFERRAL_BONUS }}% от&nbsp;суммы услуги будут зачислены на&nbsp;ваш бонусный счет.
                    Приятного обучения!
                  </div>
                {% endif %}
                <div class="auth__fieldset">
                  <div id="learner-registration-field__first-name" class="auth__field field learner-registration-form__field">
                    <div class="field__label">ИМЯ</div>
                    <div class="field__wrap">
                      <input id="learner-registration-form__first-name" class="field__input" type="text" name="first_name"
                        placeholder="">
                    </div>
                    <div id="learner-registration-field-error__first-name" class="field__error learner-registration-form__field-error"></div>
                  </div>
                  <div id="learner-registration-field__last-name" class="auth__field field learner-registration-form__field">
                    <div class="field__label">ФАМИЛИЯ</div>
                    <div class="field__wrap">
                      <input id="learner-registration-form__last-name" class="field__input" type="text" name="last_name" placeholder="">
                    </div>
                    <div id="learner-registration-field-error__last-name" class="field__error learner-registration-form__field-error"></div>
                  </div>
                </div>
                <div id="learner-registration-field__email" class="auth__field field learner-registration-form__field">
                  <div class="field__label">ПОЧТА</div>
                  <div class="field__wrap">
                    <input id="learner-registration-form__email" class="field__input" type="email" name="email" placeholder="name@website.com">
                  </div>
                  <div id="learner-registration-field-error__email" class="field__error learner-registration-form__field-error"></div>
                </div>
                <div id="learner-registration-field__password" class="auth__field field learner-registration-form__field">
                  <div class="field__label">ПАРОЛЬ</div>
                  <div class="field__wrap">
                    <input id="learner-registration-form__password" class="field__input field__input--password" type="password" name="password"
                      placeholder="Минимум 5 символов">
                    <div class="field__password-show">
                      <button class="password-toggle" type="button">
                        <svg class="icon icon-password-eye">
                          <use xlink:href="{% static 'img/sprite.svg' %}#icon-password-eye"></use>
                        </svg>
                        <svg class="icon icon-password-hidden-eye">
                          <use xlink:href="{% static 'img/sprite.svg' %}#icon-password-hidden-eye"></use>
                        </svg>
                      </button>
                    </div>
                  </div>
                  <div id="learner-registration-field-error__password" class="field__error learner-registration-form__field-error"></div>

                  <div id="learner-registration-field-error__all" class="auth-register__common-error form__common-error learner-registration-form__field-error"></div>
                </div>
                <div class="auth__text">
                  Согласен с <a target="_blank" href="{% url 'privacy' %}">условиями обработки данных</a> и&nbsp;<a target="_blank" href="{% url 'refund_policy' %}">возвратом услуги</a>.
                </div>
                <label class="auth__label switch">
                  <input class="switch__input" name="newsletter" value="true" type="checkbox" checked>
                  <span class="switch__content">Согласен на важную рассылку: новости школы и курсов</span>
                </label>
                <div class="auth__foot">
                  <button id="learner-registration-form__submit-button" class="auth__btn btn btn_light">
                    ЗАРЕГИСТРИРОВАТЬСЯ
                  </button>
                  <div class="auth__or">или</div>
                  <button type="button" class="auth__btn btn btn_fb">
                    <svg class="icon icon-facebook">
                      <use xlink:href="{% static 'img/sprite.svg' %}#icon-facebook"></use>
                    </svg>
                    <span class="btn__title">ЧЕРЕЗ FACEBOOK</span>
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
        <div class="auth__pass js-auth-pass">
          <div class="auth__nav">
            <div class="auth__type active">ВОССТАНОВЛЕНИЕ ПАРОЛЯ</div>
          </div>
          <div class="auth__body">
            <div id="password-reset__form-wrapper">
              <form id="password-reset-form" method="post" action="{% url 'lilcity:password_reset' %}">
                {% csrf_token %}
                <div class="auth__enter js-auth-enter">
                  <div id="password-reset__email-field" class="auth__field field">
                    <div class="field__label">ПОЧТА
                      <a class="field__link js-auth-go-enter" href="#">Войти</a>
                    </div>
                    <div class="field__wrap">
                      <input id="password-reset__email" class="field__input" type="email" name="email" placeholder="name@website.com">
                    </div>
                    <div id="password-reset-field-error__email" class="field__error password-reset-form__field-error"></div>
                    <div id="password-reset-field-error__all" class="form__common-error password-reset-form__field-error"></div>
                  </div>
                  <div class="auth__foot">
                    <button id="password-reset__button" class="auth__btn btn btn_light">ОТПРАВИТЬ</button>
                  </div>
                </div>
              </form>
            </div>
            <div id="password-reset__sent" style="display: none;">
              <p>На ваш email отправлены инструкции по восстановлению пароля</p>
              <div class="auth__foot">
                <button id="password-reset__success-hide" class="auth__btn btn btn_light js-auth-go-enter" type="button">Хорошо</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>