mirror of
https://github.com/ae-utbm/sith.git
synced 2024-11-14 02:03:22 +00:00
284 lines
8.2 KiB
Django/Jinja
284 lines
8.2 KiB
Django/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 -%} {{ form.instance.username }}</em>
|
|
<br />
|
|
{%- if form.instance.customer -%}
|
|
<em>{%- trans -%}Account number: {%- endtrans -%} {{ form.instance.customer.account_id }}</em>
|
|
{%- endif -%}
|
|
</p>
|
|
|
|
{%- endblock -%}
|