Add UI for editing user's display name.
This commit is contained in:
parent
84a5e2b4e1
commit
e303b934f7
3 changed files with 85 additions and 1 deletions
|
|
@ -35,6 +35,23 @@ def get_user_id_redirect(user_id):
|
||||||
url = request.url.replace(url_from, url_to)
|
url = request.url.replace(url_from, url_to)
|
||||||
return flask.redirect(url)
|
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 #################################################################################
|
# Login and logout #################################################################################
|
||||||
|
|
||||||
@site.route('/login', methods=['GET'])
|
@site.route('/login', methods=['GET'])
|
||||||
|
|
|
||||||
|
|
@ -387,6 +387,15 @@ function callback_go_to_tags(response)
|
||||||
/**************************************************************************************************/
|
/**************************************************************************************************/
|
||||||
api.users = {};
|
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 =
|
api.users.login =
|
||||||
function login(username, password, callback)
|
function login(username, password, callback)
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,8 @@
|
||||||
{% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
|
{% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
|
||||||
<script src="/static/js/common.js"></script>
|
<script src="/static/js/common.js"></script>
|
||||||
<script src="/static/js/api.js"></script>
|
<script src="/static/js/api.js"></script>
|
||||||
|
<script src="/static/js/editor.js"></script>
|
||||||
|
<script src="/static/js/spinner.js"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#content_body
|
#content_body
|
||||||
|
|
@ -23,13 +25,69 @@
|
||||||
<body>
|
<body>
|
||||||
{{header.make_header(session=session)}}
|
{{header.make_header(session=session)}}
|
||||||
<div id="content_body">
|
<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>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>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>
|
<p><a href="/search?author={{user.username}}">Photos by {{user.display_name}}</a></p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<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>
|
</script>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue