Add modern theme

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&amp;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 }} &bull; <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&amp;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 %}