LilSchool/apps/user/templates/user/profile-settings.html

{% extends "templates/lilcity/index.html" %} {% load static %} {% block content %}
<div class="section section_gray section_menu">
  <div class="section__center center center_xs">
    <div class="menu">
      <a class="menu__link active" href="{% url 'user-edit' user.id %}">Профиль</a>
      <a class="menu__link" href="#">Уведомления</a>
      <a class="menu__link" href="#">Платежи</a>
    </div>
  </div>
</div>
{% comment %}
<!-- <div class="section section_confirm">
  <div class="section__center center center_xs">
    <div class="confirm">
      <div class="confirm__title title">Подтверждение почты</div>
      <div class="confirm__content">На электронный адрес
        <strong>sasha@lil.city</strong> отправлено письмо с кодом подтверждения. Введите код, чтобы подтвердить почту.</div>
        <div class="confirm__form">
          <div class="confirm__field field field_code">
          <div class="field__wrap">
            <input class="field__input" type="text" placeholder="Введите код подтверждения">
          </div>
        </div>
        <button class="confirm__btn btn btn_dark">ПОДТВЕРДИТЬ</button>
      </div>
      <div class="confirm__content">Если у вас нет кода или письмо где-то затерялось, вы можете получить новый код подтверждения. Отправить новый код?</div>
    </div>
  </div>
</div> -->
{% endcomment %}
{% if messages %}
<div class="section section_gray section_menu">
  <div class="section__center center center_xs">
  {% for message in messages %}
  <div class="message message_{{ message.tags }}">{{ message }}</div>
  {% endfor %}
</div>
</div>
{% endif %}
{{form.errors}}
<div class="section section_gray">
  <div class="section__center center center_xs">
    <div class="form">
      <form action="" method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="form__group">
          <div class="form__title">Личные данные</div>
          <div class="form__ava ava">
            {% if user.photo %}
            <img id="photo" class="ava__pic" src="{{user.photo.url}}">
            {% else %}
            <img id="photo" class="ava__pic" src="{% static 'img/user.jpg' %}">
            {% endif %}
            <input name="photo" class="ava__input" type="file" accept='image/*' onchange='openFile(event)'>
            <div class="ava__icon">
              <svg class="icon icon-photo">
                <use xlink:href="{% static 'img/sprite.svg' %}#icon-photo"></use>
              </svg>
            </div>
          </div>
          <div class="form__fieldset">
            <div class="form__field field">
              <div class="field__label">ИМЯ</div>
              <div class="field__wrap">
                <input name='first_name' class="field__input" type="text" placeholder="Имя" value="{{ user.first_name }}">
              </div>
            </div>
            <div class="form__field field">
              <div class="field__label">ФАМИЛИЯ</div>
              <div class="field__wrap">
                <input name='last_name' class="field__input" type="text" placeholder="Фамилия" value="{{ user.last_name }}">
              </div>
            </div>
          </div>
          <div class="form__field field">
            <div class="field__label">Почта</div>
            <div class="field__wrap">
              <input name='email' class="field__input" type="email" placeholder="Почта" value="{{ user.email }}">
            </div>
          </div>
          <div class="form__fieldset">
            <div class="form__field field">
              <div class="field__label">ГОРОД</div>
              <div class="field__wrap">
                <input name='city' class="field__input" type="text" placeholder="Город" value="{% if user.city %}{{ user.city }}{% endif %}">
              </div>
            </div>
            <div class="form__field field">
              <div class="field__label">СТРАНА</div>
              <div class="field__wrap">
                <input name='country' class="field__input" type="text" placeholder="Страна" value="{% if user.country %}{{ user.country }}{% endif %}">
              </div>
            </div>
          </div>
          <div class="form__fieldset">
            <div class="form__field field">
              <div class="field__label">ДАТА РОЖДЕНИЯ</div>
              <div class="field__wrap">
                <input name='birthday' class="field__input" type="text" placeholder="dd.mm.yyyy" value="{% if user.birthday %}{{ user.birthday | date:'d.m.Y' }}{% endif %}">
              </div>
            </div>
            <div class="form__field field">
              <div class="field__label">ПОЛ</div>
              <div class="field__wrap">
                <div class="field__select select js-select{% if user.gender and user.gender != 'n' %} selected{% endif %}">
                  <div class="select__head js-select-head">
                    {% if user.gender == 'f' %}Ж{% elif user.gender == 'm' %}M{% else %}М / Ж{% endif %}
                  </div>
                  <div class="select__drop js-select-drop">
                    <div class="select__option js-select-option" data-gender-option data-gender="m">
                      <div class="select__title">М</div>
                    </div>
                    <div class="select__option js-select-option" data-gender-option data-gender="f">
                      <div class="select__title">Ж</div>
                    </div>
                  </div>
                  <input id="gender" name='gender' class="select__input" type="hidden">
                </div>
              </div>
            </div>
          </div>
          <div class="form__field field">
            <div class="field__label">О себе</div>
            <div class="field__wrap">
              <textarea name='about' class="field__textarea" placeholder="Расскажите о себе и своем опыте">{% if user.about %}{{ user.about }}{% endif %}</textarea>
            </div>
          </div>
        </div>
        <div class="form__group">
          <div class="form__title">Пароль</div>
          <div class="form__field field">
            <div class="field__label">ТЕКУЩИЙ ПАРОЛЬ</div>
            <div class="field__wrap">
              <input name='old_password' class="field__input" type="password" placeholder="Введите текущий пароль">
            </div>
          </div>
          <div class="form__field field">
            <div class="field__label">НОВЫЙ ПАРОЛЬ</div>
            <div class="field__wrap">
              <input name='new_password1' class="field__input" type="password" placeholder="Введите новый пароль">
            </div>
          </div>
          <div class="form__field field">
            <div class="field__label">ПОДТВЕРДИТЬ НОВЫЙ ПАРОЛЬ</div>
            <div class="field__wrap">
              <input name='new_password2' class="field__input" type="password" placeholder="Подтвердите новый пароль">
            </div>
          </div>
        </div>
        <div class="form__group">
          <div class="form__title">Соцсети</div>
          <div class="form__field field">
            <div class="field__label">INSTAGRAM</div>
            <div class="field__wrap">
              <input name='instagram' class="field__input" type="text" placeholder="https://instagram.com/school.lil.city" value="{{ user.instagram }}">
            </div>
          </div>
          <div class="form__field field">
            <div class="field__label">FACEBOOK</div>
            <div class="field__wrap">
              <input name='facebook' class="field__input" type="text" placeholder="https://facebook.com/lilcitycompany" value="{{ user.facebook }}">
            </div>
          </div>
          <div class="form__field field">
            <div class="field__label">TWITTER</div>
            <div class="field__wrap">
              <input name='twitter' class="field__input" type="text" placeholder="https://twitter.com/lilcitycompany" value="{{ user.twitter }}">
            </div>
          </div>
          <div class="form__field field">
            <div class="field__label">PINTEREST</div>
            <div class="field__wrap">
              <input name='pinterest' class="field__input" type="text" placeholder="https://pinterest.com/lilcitycompany" value="{{ user.pinterest }}">
            </div>
          </div>
          <div class="form__field field">
            <div class="field__label">YOUTUBE</div>
            <div class="field__wrap">
              <input name='youtube' class="field__input" type="text" placeholder="https://youtube.com/lilcitycompany" value="{{ user.youtube }}">
            </div>
          </div>
          <div class="form__field field">
            <div class="field__label">VKONTAKTE</div>
            <div class="field__wrap">
              <input name='vkontakte' class="field__input" type="text" placeholder="https://vk.com/lilcitycompany" value="{{ user.vkontakte }}">
            </div>
          </div>
        </div>
        <div class="form__foot">
          <button type="submit" class="form__btn btn btn_md">СОХРАНИТЬ</button>
        </div>
      </form>
    </div>
  </div>
</div>
<script>
var openFile = function(file) {
  var input = file.target;

  var reader = new FileReader();
  reader.onload = function(){
    var dataURL = reader.result;
    var output = document.getElementById('photo');
    output.src = dataURL;
  };
  reader.readAsDataURL(input.files[0]);
};
</script>
{% endblock content %}