tetratto/crates/app/src/public/html/profile/base.html

{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %}
<title>{{ profile.username }} - {{ config.name }}</title>
{% endblock %} {% block body %} {{ macros::nav() }}
<article>
    <div class="content_container flex flex-col gap-4">
        {{ components::banner(username=profile.username) }}

        <div class="w-full flex gap-4 flex-collapse">
            <div
                class="lhs flex flex-col gap-2 sm:w-full"
                style="min-width: 20rem"
            >
                <div class="card-nest w-full">
                    <div class="card flex gap-2" id="user_avatar_and_name">
                        {{
                        components::avatar(username=profile.username,size="72px")
                        }}
                        <div class="flex flex-col">
                            <!-- prettier-ignore -->
                            <h3 id="username" class="username flex items-center gap-2">
                                {{ components::username(user=profile) }}

                                {% if profile.is_verified %}
                                <span title="Verified" style="color: var(--color-primary);" class="flex items-center">
                                    {{ icon "badge-check" }}
                                </span>
                                {% endif %}
                            </h3>

                            <span class="fade">{{ profile.username }}</span>
                        </div>
                    </div>

                    <div class="card flex flex-col gap-2" id="social">
                        <div class="w-full flex">
                            <a
                                href="/@{{ profile.username }}/followers"
                                class="w-full flex justify-center items-center gap-2"
                            >
                                <h4>{{ profile.follower_count }}</h4>
                                <span>{{ text "auth:label.followers" }}</span>
                            </a>
                            <a
                                href="/@{{ profile.username }}/following"
                                class="w-full flex justify-center items-center gap-2"
                            >
                                <h4>{{ profile.following_count }}</h4>
                                <span>{{ text "auth:label.following" }}</span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="card-nest flex flex-col">
                    <div id="bio" class="card small">
                        {{ profile.settings.biography|markdown|safe }}
                    </div>

                    <div class="card flex flex-col gap-2">
                        <div class="w-full flex justify-between items-center">
                            <span class="notification chip">ID</span>
                            <button
                                title="Copy"
                                onclick="trigger('atto::copy_text', ['{{ profile.id }}'])"
                                class="camo small"
                            >
                                {{ icon "copy" }}
                            </button>
                        </div>

                        <div class="w-full flex justify-between items-center">
                            <span class="notification chip">Joined</span>
                            <span class="date">{{ profile.created }}</span>
                        </div>

                        {% if not profile.settings.private_last_seen or is_self
                        or is_helper %}
                        <div class="w-full flex justify-between items-center">
                            <span class="notification chip">Last seen</span>
                            <span class="date">{{ profile.last_seen }}</span>
                        </div>
                        {% endif %}
                    </div>
                </div>

                {% if not is_self and user %}
                <div class="card-nest">
                    <div class="card small">
                        <b>{{ text "auth:label.relationship" }}</b>
                    </div>

                    <div class="card flex gap-2 flex-wrap">
                        {% if not is_blocking %} {% if not is_following %}
                        <button onclick="toggle_follow_user()">
                            {{ icon "user-plus" }}
                            <span>{{ text "auto:action.follow" }}</span>
                        </button>
                        {% else %}
                        <button
                            onclick="toggle_follow_user()"
                            class="quaternary red"
                        >
                            {{ icon "user-minus" }}
                            <span>{{ text "auto:action.unfollow" }}</span>
                        </button>
                        {% endif %}

                        <button
                            onclick="toggle_block_user()"
                            class="quaternary red"
                        >
                            {{ icon "shield" }}
                            <span>{{ text "auto:action.block" }}</span>
                        </button>
                        {% else %}
                        <button
                            onclick="toggle_block_user()"
                            class="quaternary red"
                        >
                            {{ icon "shield-off" }}
                            <span>{{ text "auto:action.unblock" }}</span>
                        </button>
                        {% endif %}

                        <script>
                            globalThis.toggle_follow_user = () => {
                                fetch(
                                    "/api/v1/auth/profile/{{ profile.id }}/follow",
                                    {
                                        method: "POST",
                                    },
                                )
                                    .then((res) => res.json())
                                    .then((res) => {
                                        trigger("atto::toast", [
                                            res.ok ? "success" : "error",
                                            res.message,
                                        ]);
                                    });
                            };

                            globalThis.toggle_block_user = async () => {
                                if (
                                    !(await trigger("atto::confirm", [
                                        "Are you sure you would like to do this?",
                                    ]))
                                ) {
                                    return;
                                }

                                fetch(
                                    "/api/v1/auth/profile/{{ profile.id }}/block",
                                    {
                                        method: "POST",
                                    },
                                )
                                    .then((res) => res.json())
                                    .then((res) => {
                                        trigger("atto::toast", [
                                            res.ok ? "success" : "error",
                                            res.message,
                                        ]);
                                    });
                            };
                        </script>
                    </div>
                </div>
                {% endif %} {% if not profile.settings.private_communities or
                is_self or is_helper %}
                <div class="card-nest">
                    <div class="card small flex gap-2 items-center">
                        {{ icon "users-round" }}
                        <span>{{ text "auth:label.joined_communities" }}</span>
                    </div>

                    <div class="card flex flex-wrap gap-2">
                        {% for community in communities %}
                        <a href="/community/{{ community.title }}">
                            {{ components::community_avatar(id=community.id,
                            community=community, size="48px") }}
                        </a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
            </div>

            <div class="rhs w-full flex flex-col gap-4">
                {% if is_helper %}
                <div class="card-nest">
                    <div class="card small flex items-center gap-2">
                        {{ icon "shield" }}
                        <span>{{ text "auth:label.moderation" }}</span>
                    </div>

                    <div class="card tertiary">
                        <div class="flex flex-col gap-2" id="mod_options">
                            <div
                                class="card w-full flex flex-wrap gap-2"
                                ui_ident="actions"
                            >
                                <a
                                    href="/settings?username={{ profile.username }}"
                                    class="button quaternary"
                                >
                                    {{ icon "settings" }}
                                    <span>View settings</span>
                                </a>

                                <button
                                    class="red quaternary"
                                    onclick="delete_account(event)"
                                >
                                    {{ icon "trash" }}
                                    <span
                                        >{{ text "settings:label.delete_account"
                                        }}</span
                                    >
                                </button>

                                {% if profile.permissions != 131073 %}
                                <button
                                    class="red quaternary"
                                    onclick="update_user_role(131073)"
                                >
                                    Ban
                                </button>
                                {% else %}
                                <button
                                    class="quaternary"
                                    onclick="update_user_role(1)"
                                >
                                    Unban
                                </button>
                                {% endif %}
                            </div>
                        </div>

                        <script>
                            setTimeout(() => {
                                const ui = ns("ui");
                                const element =
                                    document.getElementById("mod_options");

                                async function profile_request(
                                    do_confirm,
                                    path,
                                    body,
                                ) {
                                    if (do_confirm) {
                                        if (
                                            !(await trigger("atto::confirm", [
                                                "Are you sure you would like to do this?",
                                            ]))
                                        ) {
                                            return;
                                        }
                                    }

                                    fetch(
                                        `/api/v1/auth/profile/{{ profile.id }}/${path}`,
                                        {
                                            method: "POST",
                                            headers: {
                                                "Content-Type":
                                                    "application/json",
                                            },
                                            body: JSON.stringify(body),
                                        },
                                    )
                                        .then((res) => res.json())
                                        .then((res) => {
                                            trigger("atto::toast", [
                                                res.ok ? "success" : "error",
                                                res.message,
                                            ]);
                                        });
                                }

                                globalThis.delete_account = async (e) => {
                                    e.preventDefault();

                                    if (
                                        !(await trigger("atto::confirm", [
                                            "Are you sure you would like to do this?",
                                        ]))
                                    ) {
                                        return;
                                    }

                                    fetch(
                                        "/api/v1/auth/profile/{{ profile.id }}",
                                        {
                                            method: "DELETE",
                                            headers: {
                                                "Content-Type":
                                                    "application/json",
                                            },
                                            body: JSON.stringify({
                                                password: "",
                                            }),
                                        },
                                    )
                                        .then((res) => res.json())
                                        .then((res) => {
                                            trigger("atto::toast", [
                                                res.ok ? "success" : "error",
                                                res.message,
                                            ]);
                                        });
                                };

                                globalThis.update_user_role = async (
                                    new_role,
                                ) => {
                                    if (
                                        !(await trigger("atto::confirm", [
                                            "Are you sure you would like to do this?",
                                        ]))
                                    ) {
                                        return;
                                    }

                                    fetch(
                                        `/api/v1/auth/profile/{{ profile.id }}/role`,
                                        {
                                            method: "POST",
                                            headers: {
                                                "Content-Type":
                                                    "application/json",
                                            },
                                            body: JSON.stringify({
                                                role: Number.parseInt(new_role),
                                            }),
                                        },
                                    )
                                        .then((res) => res.json())
                                        .then((res) => {
                                            trigger("atto::toast", [
                                                res.ok ? "success" : "error",
                                                res.message,
                                            ]);
                                        });
                                };

                                ui.refresh_container(element, ["actions"]);

                                setTimeout(() => {
                                    ui.refresh_container(element, ["actions"]);

                                    ui.generate_settings_ui(
                                        element,
                                        [
                                            [
                                                ["is_verified", "Is verified"],
                                                "{{ profile.is_verified }}",
                                                "checkbox",
                                            ],
                                            [
                                                ["role", "Permission level"],
                                                "{{ profile.permissions }}",
                                                "input",
                                            ],
                                        ],
                                        null,
                                        {
                                            is_verified: (value) => {
                                                profile_request(
                                                    false,
                                                    "verified",
                                                    {
                                                        is_verified: value,
                                                    },
                                                );
                                            },
                                            role: (new_role) => {
                                                return update_user_role(
                                                    new_role,
                                                );
                                            },
                                        },
                                    );
                                }, 100);
                            }, 150);
                        </script>
                    </div>
                </div>
                {% endif %} {% block content %}{% endblock %}
            </div>
        </div>
    </div>
</article>
{% endblock %}