You've already forked snikket-web-portal
359e6b4ce2
This allows us to have two levels of emphasis for the actual form buttons and is also in line with the global "Log out" navigational button.
56 lines
2.1 KiB
HTML
56 lines
2.1 KiB
HTML
{% extends "app.html" %}
|
|
{% from "library.j2" import standard_button, form_button, render_errors, avatar with context %}
|
|
{% block content %}
|
|
<h1>{% trans %}Update your profile{% endtrans %}</h1>
|
|
<div class="form layout-expanded"><form method="POST" enctype="multipart/form-data">
|
|
<h2 class="form-title">{% trans %}Profile{% endtrans %}</h2>
|
|
{{ form.csrf_token }}
|
|
{% call render_errors(form) %}{% endcall %}
|
|
<div class="f-ebox">
|
|
{{ form.nickname.label }}
|
|
{{ form.nickname(placeholder=user_info.username) }}
|
|
</div>
|
|
<div class="f-ebox">
|
|
{{ form.avatar.label }}
|
|
<div class="avatar-wrap">
|
|
{%- call avatar(user_info.address, user_info.avatar_hash ) %}{% endcall -%}
|
|
{{ form.avatar(accept="image/png",
|
|
data_maxsize=max_avatar_size,
|
|
data_warning_header=avatar_too_big_warning_header,
|
|
data_maxsize_warning=avatar_too_big_warning) }}
|
|
</div>
|
|
</div>
|
|
<h3 class="form-title">{% trans %}Visibility{% endtrans %}</h3>
|
|
<p class="form-descr weak">{% trans %}This section allows you to control who can see your profile information, like avatar and nickname.{% endtrans %}</p>
|
|
<div class="f-ebox">
|
|
<fieldset>{#- -#}
|
|
<legend>{{ form.profile_access_model.label.text }}</legend>
|
|
{{- form.profile_access_model -}}
|
|
</fieldset>
|
|
</div>
|
|
<div class="f-bbox">
|
|
{%- call standard_button("back", url_for('.index'), class="tertiary") %}{% trans %}Back{% endtrans %}{% endcall -%}
|
|
{%- call form_button("done", form.action_save, class="primary") %}{% endcall -%}
|
|
</div>
|
|
<script type="text/javascript">
|
|
document.getElementById("{{ form.avatar.id }}").onchange = function() {
|
|
var maxsize_s = this.dataset.maxsize;
|
|
var maxsize = parseInt(maxsize_s);
|
|
var existing_alert = document.getElementById("avatar-alert");
|
|
if (existing_alert) {
|
|
existing_alert.parentNode.removeChild(existing_alert);
|
|
}
|
|
if (this.files[0].size > maxsize) {
|
|
var warning_header = this.dataset.warningHeader;
|
|
var warning_text = this.dataset.maxsizeWarning;
|
|
this.setCustomValidity(warning_text);
|
|
this.reportValidity();
|
|
this.value = null;
|
|
} else {
|
|
this.setCustomValidity("");
|
|
}
|
|
};
|
|
</script>
|
|
</form></div>
|
|
{% endblock %}
|