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="{{ scss('user/user_edit.scss') }}">
{%- endblock -%}

{% macro profile_picture(field_name) %}
  <div class="profile-picture" x-data="camera_{{ field_name }}" >
    <div class="profile-picture-display" :aria-busy="loading" :class="{ 'camera-error': is_camera_error }">
      <img
        x-show="!is_camera_enabled && !is_camera_error"
        :src="get_picture()"
        alt="{%- trans -%}Profile{%- endtrans -%}" title="{%- trans -%}Profile{%- endtrans -%}"
        loading="lazy"
      />
      <video
        x-show="is_camera_enabled"
        x-ref="video"
      ></video>
      <i
        x-show="is_camera_error"
        x-cloak
        class="fa fa-eye-slash"
      ></i>
    </div>
    <div class="profile-picture-buttons" x-show="can_edit_picture">
      <button
        x-show="can_edit_picture && !is_camera_enabled"
        class="btn btn-blue"
        @click.prevent="enable_camera()"
      >
        <i class="fa fa-camera"></i>
        {% trans %}Enable camera{% endtrans %}
      </button>
      <button
        x-show="is_camera_enabled"
        class="btn btn-blue"
        @click.prevent="take_picture()"
      >
        <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="delete_picture()"
                  {%- if not (user.is_root and form.instance[field_name]) -%}
                    :disabled="picture == null"
                  {%- 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>
    document.addEventListener("alpine:init", () => {
      Alpine.data("camera_{{ field_name }}", () => ({
        can_edit_picture: false,

        loading: false,
        is_camera_enabled: false,
        is_camera_error: false,
        picture: null,
        video: null,
        picture_form: null,

        init() {
          this.video = this.$refs.video;
          this.picture_form = this.$refs.form.getElementsByTagName("input");
          if (this.picture_form.length > 0){
            this.picture_form = this.picture_form[0];
            this.can_edit_picture = true;

            {# Link the displayed element to the form input  #}
            this.picture_form.onchange = (event) => {
              let files = event.srcElement.files;
              if (files.length > 0){
                this.picture = (window.URL || window.webkitURL)
                  .createObjectURL(event.srcElement.files[0]);
              } else {
                this.picture = null;
              }
            }
          }
        },

        get_picture() {
          if (this.picture != null) {
            return this.picture;
          }

          {%- if form.instance[field_name] -%}
            return "{{ form.instance[field_name].get_download_url() }}"
          {%- else -%}
            return "{{ static('core/img/unknown.jpg') }}"
          {%- endif -%}
        },

        delete_picture() {

          {# Only remove currently displayed picture #}
          if (this.picture != null){
            let list = new DataTransfer();
            this.picture_form.files = list.files;
            this.picture_form.dispatchEvent(new Event("change"));
            return;
          }

          {# Remove user picture if correct rights are available #}
          {%- if user.is_root and form.instance[field_name] -%}
            window.open(
              '{{ url(
                      'core:file_delete',
                      file_id=form.instance[field_name].id,
                      popup=''
                ) }}',
              '_self');
          {%- endif -%}
        },

        enable_camera() {
          this.picture = null;
          this.loading = true;
          this.is_camera_error = false;
          navigator.mediaDevices
            .getUserMedia({ video: true, audio: false })
            .then((stream) => {
              this.loading = false;
              this.is_camera_enabled = true;
              this.video.srcObject = stream;
              this.video.play();
            })
            .catch((err) => {
              this.is_camera_error = true;
              this.loading = false;
            });
        },

        take_picture() {
          let canvas = document.createElement("canvas")
          const context = canvas.getContext("2d");

          /* Create the image */
          let settings = this.video.srcObject.getTracks()[0].getSettings();
          canvas.width = settings.width;
          canvas.height = settings.height;
          context.drawImage(this.video, 0, 0, canvas.width, canvas.height);

          /* Stop camera */
          this.video.pause()
          this.video.srcObject.getTracks().forEach((track) => {
            if (track.readyState === 'live') {
              track.stop();
            }
          });

          canvas.toBlob((blob) => {
            let file = new File(
              [blob],
              "{% trans %}captured{% endtrans %}.webp",
              { type: "image/webp" },
            );

            let list = new DataTransfer();
            list.items.add(file);
            this.picture_form.files = list.files;

            {# No change event is triggered, we trigger it manually #}
            this.picture_form.dispatchEvent(new Event("change"));
          }, "image/webp");


          canvas.remove();
          this.is_camera_enabled = false;
        },

      }));
    });
  </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 -%}