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-ref="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] -%}
        <p>
          {{ form[field_name].label }}
        </p>
        {{ form[field_name] }}
        {%- if user.is_root and form.instance[field_name] -%}
          <button class="btn btn-red" @click.prevent="window.open('{{ url('core:file_delete', file_id=form.instance[field_name].id, popup='') }}')">
            {%- trans -%}Delete{%- endtrans -%}
          </button>
        {%- endif -%}
      {%- 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,
        img: null,
        picture_form: null,

        init() {
          this.video = this.$refs.video;
          this.img = this.$refs.img;
          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;
          }
        },

        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 -%}
        },

        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.width = this.img.width;
              this.video.height = this.img.height;
              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");

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

          canvas.width = this.video.width;
          canvas.height = this.video.height;
          context.drawImage(this.video, 0, 0, this.video.width, this.video.height);
          this.picture = canvas.toDataURL("image/png");

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

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

          }, "image/jpeg");


          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 -%}