user-settings.html
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> 34avatarPreview=document.getElementById("avatarPreview"); 35 36function preview() { 37avatarPreview.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