HTML document, ASCII text
1
{% extends "default.html" %}
2
{% block title %}
3
{% trans %}User settings{% endtrans %}
4
{% endblock %}
5
{% block breadcrumbs %}
6
<li><a href="/settings">{% trans %}Settings{% endtrans %}</a></li>
7
{% endblock %}
8
{% block content %}
9
<x-frame style="--width: 768px;">
10
<h1>{% trans %}User settings{% endtrans %}</h1>
11
<article class="card">
12
<section class="card-main">
13
<h2>{% trans %}Basic information{% endtrans %}</h2>
14
<p>{% trans username=user.username %}Username: {{ username }}{% endtrans %}</p>
15
<x-buttonbox>
16
<a class="button" href="password">{% trans %}Change password{% endtrans %}</a>
17
</x-buttonbox>
18
</section>
19
</article>
20
<article class="card">
21
<section class="card-main">
22
<h2>{% trans %}Avatar{% endtrans %}</h2>
23
<x-vbox>
24
<label for="change-avatar" id="change-avatar-label" data-change-label="{% trans %}Change{% endtrans %}">
25
<img src="/info/{{ user.username }}/avatar" alt="{{ user.username }}" class="avatar" style="width: 100%;" id="avatarPreview">
26
</label>
27
<form method="post" enctype="multipart/form-data" action="/info/{{ user.username }}/avatar">
28
<input type="file" name="avatar" accept="image/*" style="display: none;" id="change-avatar" onchange="preview();">
29
<button type="submit">{% trans %}Update{% endtrans %}</button>
30
</form>
31
</x-vbox>
32
</section>
33
<script>
34
avatarPreview=document.getElementById("avatarPreview");
35
function preview() {
37
avatarPreview.src=URL.createObjectURL(event.target.files[0]);
38
}
39
</script>
40
</article>
41
<article class="card">
42
<section class="card-main">
43
<form method="post">
44
<h2>{% trans %}Profile{% endtrans %}</h2>
45
<x-vbox>
46
<x-vbox class="nopad">
47
<label for="email">{% trans %}Email address{% endtrans %}</label>
48
<input id="email" name="email" type="email" value="{% if user.email %}{{ user.email }}{% endif %}">
49
</x-vbox>
50
<x-vbox class="nopad">
51
<label><input name="showmail" value="showmail" {% if user.show_mail %}checked{% endif %} type="checkbox">{% trans %}Show email on my profile{% endtrans %}</label>
52
</x-vbox>
53
<x-vbox class="nopad">
54
<label for="displayname">{% trans %}Friendly name{% endtrans %}</label>
55
<input id="displayname" name="displayname" value="{% if user.display_name %}{{ user.display_name }}{% endif %}" placeholder="{{ user.username }}">
56
</x-vbox>
57
<x-vbox class="nopad">
58
<label for="url">{% trans %}Link to your website{% endtrans %}</label>
59
<input id="url" name="url" value="{% if user.url %}{{ user.url }}{% endif %}" type="url">
60
</x-vbox>
61
<x-vbox class="nopad">
62
<x-hbox style="width: 100%; align-items: space-between;">
63
<x-vbox style="flex-grow: 1;" class="nopad">
64
<label for="company">{% trans %}Company or school{% endtrans %}</label>
65
<input id="company" name="company" value="{% if user.company %}{{ user.company }}{% endif %}">
66
</x-vbox>
67
<x-vbox style="flex-grow: 1;" class="nopad">
68
<label for="companyurl">{% trans %}Link to the company's website{% endtrans %}</label>
69
<input id="companyurl" name="companyurl" value="{% if user.company_url %}{{ user.company_url }}{% endif %}" type="url">
70
</x-vbox>
71
</x-hbox>
72
</x-vbox>
73
<x-vbox class="nopad">
74
<label for="location">{% trans %}Location{% endtrans %}</label>
75
<input id="location" name="location" value="{% if user.location %}{{ user.location }}{% endif %}" type="text">
76
</x-vbox>
77
<x-vbox class="nopad">
78
<label for="bio">{% trans %}Bio{% endtrans %}</label>
79
<textarea id="bio" name="bio" rows="4">{% if user.bio %}{{ user.bio }}{% endif %}</textarea>
80
</x-vbox>
81
<button type="submit">{% trans %}Update profile{% endtrans %}</button>
82
</x-vbox>
83
</form>
84
</section>
85
</article>
86
</x-frame>
87
{% endblock %}
88