add: user permissions level builder ui

This commit is contained in:
trisua 2025-04-06 13:43:12 -04:00
parent a167da017e
commit 31f63c90cd
16 changed files with 511 additions and 371 deletions

View file

@ -0,0 +1,237 @@
{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %}
<title>Manage profile - {{ config.name }}</title>
{% endblock %} {% block body %} {{ macros::nav(selected="notifications") }}
<main class="flex flex-col gap-2">
<div class="card-nest w-full">
<div class="card small flex items-center gap-2">
{{ icon "shield" }}
<span>{{ text "mod_panel:label.manage_profile" }}</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/user/{{ 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/user/{{ 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/user/{{ 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>
<div class="card-nest w-full">
<div class="card small flex items-center justify-between gap-2">
<div class="flex items-center gap-2">
{{ icon "blocks" }}
<span
>{{ text "mod_panel:label.permissions_level_builder"
}}</span
>
</div>
<button
class="small quaternary"
onclick="update_user_role(Number.parseInt(document.getElementById('role').value))"
>
{{ icon "check" }}
<span>{{ text "general:action.save" }}</span>
</button>
</div>
<div
class="card tertiary flex flex-col gap-2"
id="permission_builder"
></div>
</div>
<script>
setTimeout(() => {
const get_permissions_html = trigger(
"ui::generate_permissions_ui",
[
{
// https://trisuaso.github.io/tetratto/tetratto/model/permissions/struct.FinePermission.html
DEFAULT: 1 << 0,
ADMINISTRATOR: 1 << 1,
MANAGE_COMMUNITIES: 1 << 2,
MANAGE_POSTS: 1 << 3,
MANAGE_POST_REPLIES: 1 << 4,
MANAGE_USERS: 1 << 5,
MANAGE_BANS: 1 << 6,
MANAGE_WARNINGS: 1 << 7,
MANAGE_NOTIFICATIONS: 1 << 8,
VIEW_REPORTS: 1 << 9,
VIEW_AUDIT_LOG: 1 << 10,
MANAGE_MEMBERSHIPS: 1 << 11,
MANAGE_REACTIONS: 1 << 12,
MANAGE_FOLLOWS: 1 << 13,
MANAGE_VERIFIED: 1 << 14,
MANAGE_AUDITLOG: 1 << 15,
MANAGE_REPORTS: 1 << 16,
BANNED: 1 << 17,
INFINITE_COMMUNITIES: 1 << 18,
SUPPORTER: 1 << 19,
},
],
);
document.getElementById("permission_builder").innerHTML =
get_permissions_html(
Number.parseInt("{{ profile.permissions }}"),
"permission_builder",
);
}, 250);
</script>
</main>
{% endblock %}