voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add UI for editing user's display name.

Browse source
This commit is contained in:
voussoir 2021-01-01 19:46:31 -08:00
parent 84a5e2b4e1
commit e303b934f7
3 changed files with 85 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontends/etiquette_flask/backend/endpoints/user_endpoints.py
View file

@ -35,6 +35,23 @@ def get_user_id_redirect(user_id):
url = request.url.replace(url_from, url_to)
return flask.redirect(url)
@site.route('/user/<username>/edit', methods=['POST'])
def post_user_edit(username):
session = session_manager.get(request)
if not session:
return jsonify.make_json_response({}, status=403)
user = common.P_user(username, response_type='json')
if session.user != user:
return jsonify.make_json_response({}, status=403)
display_name = request.form.get('display_name')
if display_name is not None:
user.set_display_name(display_name)
common.P.commit()
return jsonify.make_json_response(user.jsonify())
# Login and logout #################################################################################
@site.route('/login', methods=['GET'])

9
frontends/etiquette_flask/static/js/api.js
View file

@ -387,6 +387,15 @@ function callback_go_to_tags(response)
/**************************************************************************************************/
api.users = {};
api.users.edit =
function edit(username, display_name, callback)
{
const url = `/user/${username}/edit`;
const data = new FormData();
data.append("display_name", display_name);
common.post(url, data, callback);
}
api.users.login =
function login(username, password, callback)
{

60
frontends/etiquette_flask/templates/user.html
View file

@ -10,6 +10,8 @@
{% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
<script src="/static/js/common.js"></script>
<script src="/static/js/api.js"></script>
<script src="/static/js/editor.js"></script>
<script src="/static/js/spinner.js"></script>
<style>
#content_body
@ -23,13 +25,69 @@
<body>
{{header.make_header(session=session)}}
<div id="content_body">
<h2>{{user.display_name}}</h2>
<div class="panel">
<h2 id="display_name">{{user.display_name}}</h2>
<p>ID: <a href="/userid/{{user.id}}">{{user.id}}</a></p>
<p>User since <span title="{{user.created|int|timestamp_to_8601}}">{{user.created|timestamp_to_naturaldate}}.</span></p>
<p><a href="/search?author={{user.username}}">Photos by {{user.display_name}}</a></p>
</div>
</div>
</body>
<script type="text/javascript">
{% if user.id == session.user.id %}
const USERNAME = "{{user.username}}";
profile_ed_on_open = undefined;
function profile_ed_on_save(ed)
{
function callback(response)
{
ed.hide_spinner();
if (! response.meta.json_ok)
{
alert(JSON.stringify(response));
return;
}
if ("error_type" in response.data)
{
ed.show_error(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;
document.title = new_display_name;
ed.elements["display_name"].edit.value = new_display_name;
ed.save();
}
ed.show_spinner();
api.users.edit(USERNAME, ed.elements["display_name"].edit.value, callback);
}
profile_ed_on_cancel = undefined;
const profile_ed_elements = [
{
"id": "display_name",
"element": document.getElementById("display_name"),
"placeholder": "Display name",
"empty_text": USERNAME,
"autofocus": true,
},
];
const profile_ed = new editor.Editor(
profile_ed_elements,
profile_ed_on_open,
profile_ed_on_save,
profile_ed_on_cancel,
);
{% endif %}
</script>
</html>