diff options
Diffstat (limited to 'src/application/templates/modern/view_user.twig')
| -rw-r--r-- | src/application/templates/modern/view_user.twig | 196 |
1 files changed, 196 insertions, 0 deletions
diff --git a/src/application/templates/modern/view_user.twig b/src/application/templates/modern/view_user.twig new file mode 100644 index 0000000..f2b8440 --- /dev/null +++ b/src/application/templates/modern/view_user.twig @@ -0,0 +1,196 @@ +{% set canEdit = + currentUser is not null + and ( + ( + ctx.user.id == currentUser.id + and currentUser.hasPermission(permission("EDIT_OWN_USER")) + ) + or currentUser.hasPermission(permission("EDIT_OTHER_USER")) + ) %} + +{% set isOwnProfile = + currentUser is not null + and currentUser.id == ctx.user.id %} + +{% set sUserPossessive = isOwnProfile ? "Your posts" : "%display_name%'s posts" %} + +{% set emailPending = isOwnProfile and ctx.user.pendingEmail is not null %} + +{% set title = ctx.user.displayName %} + +{% extends "base.twig" %} + +{% block content %} + +<div class="page-header profile-header"> + <img class="_image" src="?_action=profilepicture&user={{ ctx.user.id|url_encode }}" alt="{{ __("Profile picture") }}" width="64" height="64"> + <div class="h1 _name"> + {{ ctx.user.displayName }} + {% if isOwnProfile %} + <svg viewBox="0 0 24 24" class="icon is-you icon-in-text"><title>{{ __("You") }}</title><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg> + {% endif %} + </div> + <span class="_info"> + @{{ ctx.user.name }} • <span class="text-muted">{{ __("Member since %join_date%", { + "join_date": '<span class="_date">' ~ (ctx.dateJoined.format("c")|e("html")) ~ '</span>', + }) }}</span> + </span> +</div> + +{% if canEdit %} +<div class="profile-edit-view"> +<div class="_posts"> +{% endif %} + +<h3>{{ __(sUserPossessive, { + "display_name": ctx.user.displayName|e("html"), +}) }}</h3> + +{% if ctx.posts|length > 0 %} + <div class="post-list"> + {% for post in ctx.posts %} + <a href="?_action=viewtopic&topic={{ post.topicId|url_encode }}#post-{{ post.id|url_encode }}" class="_item"> + <h4 class="_heading"> + {% if hasAttachments %} + <span class="badge"> + <svg viewBox="0 0 24 24" class="icon"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg> + </span> + {% endif %} + {{ renderPostSummary(post.content) }}<br> + </h4> + <span class="text-muted _text">{{ __("posted on %post_date% in %topic%", { + "post_date": '<span class="_time">' ~ post.postDate.format("c")|e("html") ~ '</span>', + "topic": '<em>' ~ + (ctx.topics[post.topicId] is not null and ctx.topics[post.topicId].isLocked ? '<svg viewBox="0 0 24 24" class="icon text-muted"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> ' : '') ~ + (ctx.topics[post.topicId] is not null ? ctx.topics[post.topicId].title : __("unknown"))|e("html") ~ '</em>', + }) }}</span> + </a> + {% endfor %} + </div> +{% else %} + <div class="result-alert"> + <div class="alert alert-info"> + <svg viewBox="0 0 24 24" class="icon"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg> + <span>{{ __("This user has not posted anything yet") }}</span> + </div> + </div> +{% endif %} + +{% if canEdit %} +</div> <!-- _posts --> + +<div class="_edit"> + <h3>{{ __("Edit profile") }}</h3> + {% set formId = "update_profile" %} + {% set formError = getAndClearFormError(formId) %} + {% if formError %} + {% include "components/alert_error.twig" with { message: formError } %} + {% endif %} + <form action="{{ g.server.REQUEST_URI }}" method="post" enctype="multipart/form-data"> + <input type="hidden" name="form_id" value="{{ formId }}"> + <div class="form-group"> + <label for="i_display_name">{{ __("Display name:") }}</label> + <input required class="form-control" type="text" name="display_name" id="i_display_name" value="{{ ctx.user.displayName }}"> + </div> + <div class="form-group"> + <label for="i_name">{{ __("Username:") }}</label> + {% if ctx.lastNameChangeTooRecent %} + <input class="form-control" type="text" id="i_name" value="{{ ctx.user.name }}" disabled> + <small class="text-danger"><strong>{{ __("You can only change your username every 30 days!") }}</strong></small> + {% else %} + <input required class="form-control" type="text" name="name" id="i_name" value="{{ ctx.user.name }}"> + {% endif %} + </div> + <div class="form-group"> + <label for="i_email">{{ __("Email address:") }}</label> + {% if emailPending %} + <input class="form-control" type="email" id="i_email" value="{{ ctx.user.email }}" disabled> + {% else %} + <input required class="form-control" type="email" id="i_email" name="email" value="{{ ctx.user.email }}"> + {% endif %} + </div> + <div class="form-group"> + <label>{{ __("Profile picture:") }}</label> + <div class="radio {{ ctx.user.profilePicture is empty ? " disabled text-muted" }}"> + <label> + <input type="radio" name="pfp_action" id="pfp_action_1" value="keep"{{ ctx.user.profilePicture is not empty ? ' checked' : ' disabled' }}> + {{ __("Keep current profile picture") }} + </label> + </div> + <div class="radio"> + <label> + <input type="radio" name="pfp_action" id="pfp_action_2" value="remove"{{ ctx.user.profilePicture is empty ? ' checked' : '' }}> + {% if ctx.user.profilePicture is empty %} + {{ __("No profile picture") }} + {% else %} + {{ __("Remove profile picture") }} + {% endif %} + </label> + </div> + <div class="radio"> + <label> + <input type="radio" name="pfp_action" value="replace" id="pfp_action_3"> + {{ __("Upload new profile picture") }} + </label> + </div> + <input type="file" name="pfp" id="i_pfp" accept="image/png,image/jpeg"> + </div> + <div class="form-group form-actions"> + <button type="submit" class="btn btn-primary">{{ __("Save changes") }}</button> + </div> + </form> + {% if isOwnProfile %} + <h3>{{ __("Change password") }}</h3> + {% set formId = "update_password" %} + {% set formError = getAndClearFormError(formId) %} + {% if formError %} + {% include "components/alert_error.twig" with { message: formError } %} + {% endif %} + <form action="{{ g.server.REQUEST_URI }}" method="post"> + <input type="hidden" name="form_id" value="{{ formId }}"> + <div class="form-group"> + <label for="i_current_password">{{ __("Current password:") }}</label> + <input autocomplete="current-password" required class="form-control" type="password" name="current_password" id="i_current_password" required> + </div> + <div class="form-group"> + <label for="i_new_password">{{ __("New password:") }}</label> + <input autocomplete="new-password" required class="form-control" type="password" name="new_password" id="i_new_password" required> + </div> + <div class="form-group"> + <label for="i_retype_password">{{ __("Retype password:") }}</label> + <input autocomplete="new-password" required class="form-control" type="password" name="retype_password" id="i_retype_password" required> + </div> + <div class="form-group form-actions"> + <button type="submit" class="btn btn-primary">{{ __("Change password") }}</button> + </div> + </form> + {% endif %} +</div> <!-- ._edit --> +</div> <!-- .profile-edit-view --> +{% endif %} + +{% if canEdit %} +<script> +document.addEventListener("DOMContentLoaded", function() { + const $i_pfp = document.querySelector("#i_pfp"); + function _hide() { + $i_pfp.hidden = true; + $i_pfp.disabled = true; + $i_pfp.required = false; + } + _hide(); + setTimeout(_hide, 10); + document.querySelectorAll("[name='pfp_action']").forEach(e => "change input check click".split(" ").forEach(n => e.addEventListener(n, () => { + if (document.querySelector("#pfp_action_3").checked) { + $i_pfp.hidden = false; + $i_pfp.disabled = false; + $i_pfp.required = true; + } else { + _hide(); + } + }))); +}); +</script> +{% endif %} + +{% endblock %} |