Sith/core/templates/core/user_edit.jinja

{%- extends "core/base.jinja" -%}

{%- block title -%}
  {%- trans -%}Edit user{%- endtrans -%}
{%- endblock -%}

{%- block additional_css -%}
  <link rel="stylesheet" href="{{ static('user/user_edit.scss') }}">
{%- endblock -%}

{% block additional_js %}
  <script defer src="{{ static("user/js/user_edit.js") }}"></script>
{% endblock %}

{% macro profile_picture(field_name) %}
  {% set this_picture = form.instance[field_name] %}
  <div class="profile-picture" x-data="camera_{{ field_name }}" >
    <div class="profile-picture-display" :aria-busy="loading" :class="{ 'camera-error': isCameraError }">
      <img
        x-show="!isCameraEnabled && !isCameraError"
        :src="getPicture()"
        alt="{%- trans -%}Profile{%- endtrans -%}" title="{%- trans -%}Profile{%- endtrans -%}"
        loading="lazy"
      />
      <video
        x-show="isCameraEnabled"
        x-ref="video"
      ></video>
      <i
        x-show="isCameraError"
        x-cloak
        class="fa fa-eye-slash"
      ></i>
    </div>
    <div class="profile-picture-buttons" x-show="canEditPicture">
      <button
        x-show="canEditPicture && !isCameraEnabled"
        class="btn btn-blue"
        @click.prevent="enableCamera()"
      >
        <i class="fa fa-camera"></i>
        {% trans %}Enable camera{% endtrans %}
      </button>
      <button
        x-show="isCameraEnabled"
        class="btn btn-blue"
        @click.prevent="takePicture()"
      >
        <i class="fa fa-camera"></i>
        {% trans %}Take a picture{% endtrans %}
      </button>
    </div>
    <div x-ref="form" class="profile-picture-edit">
      {%- if form[field_name] -%}
        <div>
          {{ form[field_name] }}
          <button class="btn btn-red" @click.prevent="deletePicture()"
                  {%- if not (this_picture and this_picture.is_owned_by(user)) -%}
                    :disabled="!picture"
                  {%- endif -%}
                  x-cloak
          >
            {%- trans -%}Delete{%- endtrans -%}
          </button>
        </div>
        <p>
          {{ form[field_name].label }}
        </p>
        {{ form[field_name].errors }}
      {%- else -%}
        <em>{% trans %}To edit your profile picture, ask a member of the AE{% endtrans %}</em>
      {%- endif -%}
    </div>
  </div>
  <script>
    {%- if this_picture -%}
      {% set default_picture = this_picture.get_download_url()|tojson %}
      {% set delete_url = (
        url('core:file_delete', file_id=this_picture.id, popup='')
        + "?next=" + url('core:user_edit', user_id=profile.id)
      )|tojson %}
    {%- else -%}
      {% set default_picture = static('core/img/unknown.jpg')|tojson %}
      {% set delete_url = "null" %}
    {%- endif -%}
    document.addEventListener("alpine:init", () => {
      Alpine.data(
        "camera_{{ field_name }}",
        alpineWebcamBuilder(
          {{ default_picture }},
          {{ delete_url }},
          {{ (this_picture and this_picture.is_owned_by(user))|tojson }}
        )
      );
    });
  </script>
{% endmacro %}

{%- block content -%}
  <h2 class="title">{%- trans -%}Edit user profile{%- endtrans -%}</h2>
  <form action="" method="post" enctype="multipart/form-data" id="user_edit">

    {%- csrf_token -%}
    {{ form.non_field_errors() }}

    {# User Pictures #}
    <div class="profile-pictures">

      {{ profile_picture("profile_pict") }}

      {{ profile_picture("avatar_pict") }}

      {{ profile_picture("scrub_pict") }}

    </div>


    {# All fields #}
    <div class="profile-fields">
      {%- for field in form -%}
        {%-
        if field.name in ["quote","profile_pict","avatar_pict","scrub_pict","is_subscriber_viewable","forum_signature"]
        -%}
        {%- continue -%}
      {%- endif -%}

      <div class="profile-field">
        <div class="profile-field-label">{{ field.label }}</div>
        <div class="profile-field-content">
          {{ field }}
          {%- if field.errors -%}
            <div class="field-error">{{ field.errors }}</div>
          {%- endif -%}
        </div>
      </div>
{%- endfor -%}
</div>

    {# Textareas #}
<div class="profile-fields">
  {%- for field in [form.quote, form.forum_signature] -%}
    <div class="profile-field">
      <div class="profile-field-label">{{ field.label }}</div>
      <div class="profile-field-content">
        {{ field }}
        {%- if field.errors -%}
          <div class="field-error">{{ field.errors }}</div>
        {%- endif -%}
      </div>
    </div>
  {%- endfor -%}
</div>

    {# Checkboxes #}
<div class="profile-visible">
  {{ form.is_subscriber_viewable }}
  {{ form.is_subscriber_viewable.label }}
</div>

{%- if form.instance == user -%}
  <p>
    <a href="{{ url('core:password_change') }}">{%- trans -%}Change my password{%- endtrans -%}</a>
  </p>
{%- elif user.is_root -%}
  <p>
    <a href="{{ url('core:password_root_change', user_id=form.instance.id) }}">
      {%- trans -%}Change user password{%- endtrans -%}
    </a>
  </p>
{%- endif -%}

<p>
  <input type="submit" value="{%- trans -%}Update{%- endtrans -%}" />
</p>
</form>

<p>
  <em>{%- trans -%}Username: {%- endtrans -%}&nbsp;{{ form.instance.username }}</em>
  <br />
  {%- if form.instance.customer -%}
    <em>{%- trans -%}Account number: {%- endtrans -%}&nbsp;{{ form.instance.customer.account_id }}</em>
  {%- endif -%}
</p>

{%- endblock -%}