237 lines
7.8 KiB
HTML
237 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html class="theme_{{theme}}">
|
|
<head>
|
|
{% import "header.html" as header %}
|
|
{% import "cards.html" as cards %}
|
|
<title class="dynamic_user_display_name">{{user.display_name}}</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<link rel="icon" href="/favicon.png" type="image/png"/>
|
|
<link rel="stylesheet" href="/static/css/common.css">
|
|
<link rel="stylesheet" href="/static/css/etiquette.css">
|
|
<link rel="stylesheet" href="/static/css/cards.css">
|
|
<script src="/static/js/common.js"></script>
|
|
<script src="/static/js/api.js"></script>
|
|
<script src="/static/js/cards.js"></script>
|
|
<script src="/static/js/editor.js"></script>
|
|
<script src="/static/js/http.js"></script>
|
|
<script src="/static/js/spinners.js"></script>
|
|
|
|
<style>
|
|
#content_body
|
|
{
|
|
grid-row-gap: 8px;
|
|
grid-auto-rows: max-content;
|
|
}
|
|
#hierarchy_photos:not(:has(.photo_card)),
|
|
#hierarchy_albums:not(:has(.album_card)),
|
|
#hierarchy_tags:not(:has(.tag_card)),
|
|
#hierarchy_bookmarks:not(:has(.bookmark_card))
|
|
{
|
|
display: none;
|
|
}
|
|
#tags_list .tag_card
|
|
{
|
|
margin: 4px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
{{header.make_header(request=request)}}
|
|
<div id="content_body">
|
|
<div id="hierarchy_self" class="panel">
|
|
<h1 id="display_name" class="dynamic_user_display_name">{{user.display_name}}</h1>
|
|
{% if user.display_name != user.username %}
|
|
<p>Username: {{user.username}}</p>
|
|
{% endif %}
|
|
<p>ID: <a href="/userid/{{user.id}}"><code>{{user.id}}</code></a></p>
|
|
<p>User since <span title="{{user.created|timestamp_to_8601}}">{{user.created|timestamp_to_naturaldate}}.</span></p>
|
|
</div>
|
|
|
|
<div id="hierarchy_photos" class="panel">
|
|
<h2><a href="/search?author={{user.id}}">Photos by <span class="dynamic_user_display_name">{{user.display_name}}</span></a></h2>
|
|
<div id="photos_list">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="hierarchy_tags" class="panel">
|
|
<h2>Tags by <span class="dynamic_user_display_name">{{user.display_name}}</span></h2>
|
|
<div id="tags_list">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="hierarchy_albums" class="panel">
|
|
<h2>Albums by <span class="dynamic_user_display_name">{{user.display_name}}</span></h2>
|
|
<div id="albums_list">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="hierarchy_bookmarks" class="panel">
|
|
<h2>Bookmarks by <span class="dynamic_user_display_name">{{user.display_name}}</span></h2>
|
|
<div id="bookmarks_list">
|
|
</div>
|
|
</div>
|
|
|
|
{% if user.id == request.session.user.id %}
|
|
<div id="hierarchy_settings" class="panel">
|
|
<h2>Settings</h2>
|
|
<div>
|
|
<input type="text" id="set_display_name_input" value="{{user.display_name}}" placeholder="display name"/>
|
|
<button id="set_display_name_button" onclick="return set_display_name_form(event);">Set display name</button>
|
|
</div>
|
|
|
|
<div>
|
|
<input type="password" id="current_password_input" placeholder="current password"/>
|
|
<input type="password" id="password_1_input" placeholder="new password"/>
|
|
<input type="password" id="password_2_input" placeholder="new password again"/>
|
|
<button id="set_password_button" onclick="return set_password_form(event);">Set password</button>
|
|
</div>
|
|
|
|
<div id="message_area">
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if request.is_localhost %}
|
|
<div id="hierarchy_permissions" class="panel">
|
|
<h2>Permissions</h2>
|
|
<ul>
|
|
{% for permission in constants_all_permissions|sort %}
|
|
<li><label><input type="checkbox" name="{{permission}}" onchange="return permission_checkbox_onchange(event);" {% if permission in user_permissions %}checked{%endif%}/>{{permission}}</label></li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</body>
|
|
|
|
<script type="text/javascript">
|
|
const USER_ID = "{{user.id}}";
|
|
const USERNAME = "{{user.username}}";
|
|
|
|
const PHOTOS = [
|
|
{% for photo in user.get_photos(direction='desc')|islice(0, 15) %}
|
|
{{photo.jsonify(include_albums=False)|tojson|safe}},
|
|
{% endfor %}
|
|
];
|
|
|
|
const ALBUMS = [
|
|
{% for album in user.get_albums()|islice(0, 20) %}
|
|
{{album.jsonify(include_photos=False, include_children=False, include_parents=False, count_children=True, count_photos=True)|tojson|safe}},
|
|
{% endfor %}
|
|
];
|
|
|
|
const TAGS = [
|
|
{% for tag in user.get_tags(direction='desc')|islice(0, 100) %}
|
|
{{tag.jsonify()|tojson|safe}},
|
|
{% endfor %}
|
|
];
|
|
|
|
const BOOKMARKS = [
|
|
{% for bookmark in user.get_bookmarks()|islice(0, 50) %}
|
|
{{bookmark.jsonify()|tojson|safe}},
|
|
{% endfor %}
|
|
];
|
|
|
|
function permission_checkbox_onchange(event)
|
|
{
|
|
function callback(response)
|
|
{
|
|
}
|
|
api.users.set_permission(USERNAME, event.target.name, event.target.checked, callback);
|
|
}
|
|
|
|
function on_pageload()
|
|
{
|
|
for (const photo of PHOTOS)
|
|
{
|
|
const photo_card = cards.photos.create({photo: photo});
|
|
document.getElementById("photos_list").append(photo_card);
|
|
}
|
|
for (const album of ALBUMS)
|
|
{
|
|
const album_card = cards.albums.create({album: album});
|
|
document.getElementById("albums_list").append(album_card);
|
|
}
|
|
for (const tag of TAGS)
|
|
{
|
|
const tag_card = cards.tags.create({tag: tag});
|
|
document.getElementById("tags_list").append(tag_card);
|
|
}
|
|
for (const bookmark of BOOKMARKS)
|
|
{
|
|
const bookmark_card = cards.bookmarks.create({
|
|
bookmark: bookmark,
|
|
add_author: false,
|
|
add_delete_button: false,
|
|
add_url_element: false,
|
|
});
|
|
document.getElementById("bookmarks_list").append(bookmark_card);
|
|
}
|
|
}
|
|
document.addEventListener("DOMContentLoaded", on_pageload);
|
|
|
|
{% if user.id == request.session.user.id %}
|
|
function set_display_name_form(event)
|
|
{
|
|
const input = document.getElementById("set_display_name_input");
|
|
function callback(response)
|
|
{
|
|
console.log("HI");
|
|
if (! response.meta.json_ok)
|
|
{
|
|
alert(JSON.stringify(response));
|
|
return;
|
|
}
|
|
if ("error_type" in response.data)
|
|
{
|
|
common.create_message_button(message_area, "message_negative", response.data.error_message);
|
|
return;
|
|
}
|
|
|
|
// The data that comes back from the server will have been normalized.
|
|
const new_display_name = response.data.display_name;
|
|
common.update_dynamic_elements("dynamic_user_display_name", new_display_name);
|
|
|
|
input.value = new_display_name;
|
|
}
|
|
|
|
api.users.edit(USERNAME, input.value, callback);
|
|
}
|
|
|
|
function set_password_form(event)
|
|
{
|
|
const current_password = document.getElementById("current_password_input");
|
|
const password_1 = document.getElementById("password_1_input");
|
|
const password_2 = document.getElementById("password_2_input");
|
|
const message_area = document.getElementById("message_area");
|
|
|
|
function callback(response)
|
|
{
|
|
if (! response.meta.json_ok)
|
|
{
|
|
alert(JSON.stringify(response));
|
|
return;
|
|
}
|
|
if ("error_type" in response.data)
|
|
{
|
|
common.create_message_bubble(message_area, "message_negative", response.data.error_message);
|
|
return;
|
|
}
|
|
common.create_message_bubble(message_area, "message_positive", "Password has been changed.");
|
|
current_password.value = "";
|
|
password_1.value = "";
|
|
password_2.value = "";
|
|
}
|
|
api.users.set_password(
|
|
USERNAME,
|
|
current_password.value,
|
|
password_1.value,
|
|
password_2.value,
|
|
callback,
|
|
);
|
|
}
|
|
{% endif %}
|
|
</script>
|
|
</html>
|