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

@ -325,94 +325,23 @@
}
// permissions manager
const permissions = {
// https://trisuaso.github.io/tetratto/tetratto/model/communities_permissions/struct.CommunityPermission.html
DEFAULT: 1 << 0,
ADMINISTRATOR: 1 << 1,
MEMBER: 1 << 2,
MANAGE_POSTS: 1 << 3,
MANAGE_ROLES: 1 << 4,
BANNED: 1 << 5,
REQUESTED: 1 << 6,
MANAGE_PINS: 1 << 7,
MANAGE_COMMUNITY: 1 << 8,
};
function all_matching_permissions(role) {
const matching = [];
const not_matching = [];
for (permission of Object.entries(permissions)) {
if ((role & permission[1]) === permission[1]) {
matching.push(permission[0]);
} else {
not_matching.push(permission[0]);
}
}
return [matching, not_matching];
}
function rebuild_role(matching) {
let role = 0;
for (const permission of matching) {
role = role | permissions[permission];
}
document.getElementById("role").value = role;
return role;
}
function get_permissions_html(role, id) {
const [matching, not_matching] =
all_matching_permissions(role);
globalThis.remove_permission_from_role = (
permission,
) => {
matching.splice(matching.indexOf(permission), 1);
not_matching.push(permission);
document.getElementById(id).innerHTML =
get_permissions_html(
rebuild_role(matching),
id,
);
};
globalThis.add_permission_to_role = (permission) => {
not_matching.splice(
not_matching.indexOf(permission),
1,
);
matching.push(permission);
document.getElementById(id).innerHTML =
get_permissions_html(
rebuild_role(matching),
id,
);
};
let permissions_html = "";
for (const match of matching) {
permissions_html += `<div class="card w-full secondary flex justify-between gap-2">
<span>${match} <code>${permissions[match]}</code></span>
<button class="red quaternary" onclick="remove_permission_from_role('${match}')">Remove</button>
</div>`;
}
for (const match of not_matching) {
permissions_html += `<div class="card w-full secondary flex justify-between gap-2">
<span>${match} <code>${permissions[match]}</code></span>
<button class="green quaternary" onclick="add_permission_to_role('${match}')">Add</button>
</div>`;
}
return permissions_html;
}
const get_permissions_html = trigger(
"ui::generate_permissions_ui",
[
{
// https://trisuaso.github.io/tetratto/tetratto/model/communities_permissions/struct.CommunityPermission.html
DEFAULT: 1 << 0,
ADMINISTRATOR: 1 << 1,
MEMBER: 1 << 2,
MANAGE_POSTS: 1 << 3,
MANAGE_ROLES: 1 << 4,
BANNED: 1 << 5,
REQUESTED: 1 << 6,
MANAGE_PINS: 1 << 7,
MANAGE_COMMUNITY: 1 << 8,
},
],
);
// ...
element.innerHTML = `<div class="flex gap-2 flex-wrap" ui_ident="actions">

View file

@ -347,4 +347,72 @@ user.settings.private_last_online or is_helper %}
</svg>
</div>
</div>
{% endif %} {%- endmacro %} {% macro town_square_post_form() -%} {% if
config.town_square and user %}
<div class="card-nest">
<div class="card small flex flex-col">
<div class="flex items-center gap-2">
{{ icon "pencil" }}
<span>{{ text "communities:label.create_post" }}</span>
</div>
<span class="fade"
>Posts created here go to the
<a href="/api/v1/communities/find/{{ config.town_square }}"
>town square</a
>
community!</span
>
</div>
<form
class="card flex flex-col gap-2"
onsubmit="create_post_from_form(event)"
>
<div class="flex flex-col gap-1">
<label for="content">{{ text "communities:label.content" }}</label>
<textarea
type="text"
name="content"
id="content"
placeholder="content"
required
minlength="2"
maxlength="4096"
></textarea>
</div>
<button class="primary">{{ text "communities:action.create" }}</button>
</form>
</div>
<script>
async function create_post_from_form(e) {
e.preventDefault();
await trigger("atto::debounce", ["posts::create"]);
fetch("/api/v1/posts", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
content: e.target.content.value,
community: "{{ config.town_square }}",
}),
})
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
if (res.ok) {
setTimeout(() => {
window.location.href = `/post/${res.payload}`;
}, 100);
}
});
}
</script>
{% endif %} {%- endmacro %}

View file

@ -39,6 +39,13 @@ show_lhs=true) -%}
<div class="flex nav_side">
{% if user %}
<button
onclick="document.getElementById('town_square_post_dialog').showModal()"
title="Create post"
>
{{ icon "square-pen" }}
</button>
<a
href="/notifs"
class="button {% if selected == 'notifications' %}active{% endif %}"

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 %}

View file

@ -25,6 +25,12 @@
{{ icon "badge-check" }}
</span>
{% endif %}
{% if is_supporter %}
<span title="Supporter" style="color: var(--color-primary);" class="flex items-center">
{{ icon "star" }}
</span>
{% endif %}
</h3>
<span class="fade">{{ profile.username }}</span>
@ -126,6 +132,14 @@
{{ icon "shield-off" }}
<span>{{ text "auto:action.unblock" }}</span>
</button>
{% endif %} {% if is_helper %}
<a
href="/mod_panel/profile/{{ profile.id }}"
class="button quaternary"
>
{{ icon "shield" }}
<span>{{ text "general:action.manage" }}</span>
</a>
{% endif %}
<script>
@ -192,206 +206,7 @@
</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/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>
{% endif %} {% block content %}{% endblock %}
{% block content %}{% endblock %}
</div>
</div>
</div>

View file

@ -1,73 +1,5 @@
{% import "macros.html" as macros %} {% extends "profile/base.html" %} {% block
content %} {% if config.town_square and is_self %}
<div class="card-nest">
<div class="card small flex flex-col">
<div class="flex items-center gap-2">
{{ icon "pencil" }}
<span>{{ text "communities:label.create_post" }}</span>
</div>
<span class="fade"
>Posts created here go to the
<a href="/api/v1/communities/find/{{ config.town_square }}"
>town square</a
>
community!</span
>
</div>
<form
class="card flex flex-col gap-2"
onsubmit="create_post_from_form(event)"
>
<div class="flex flex-col gap-1">
<label for="content">{{ text "communities:label.content" }}</label>
<textarea
type="text"
name="content"
id="content"
placeholder="content"
required
minlength="2"
maxlength="4096"
></textarea>
</div>
<button class="primary">{{ text "communities:action.create" }}</button>
</form>
</div>
<script>
async function create_post_from_form(e) {
e.preventDefault();
await trigger("atto::debounce", ["posts::create"]);
fetch("/api/v1/posts", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
content: e.target.content.value,
community: "{{ config.town_square }}",
}),
})
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
if (res.ok) {
setTimeout(() => {
window.location.href = `/post/${res.payload}`;
}, 100);
}
});
}
</script>
{% endif %}
content %}
<div class="card-nest">
<div class="card small flex gap-2 items-center">
{{ icon "clock" }}

View file

@ -295,6 +295,26 @@
</form>
</div>
</dialog>
<dialog id="town_square_post_dialog">
<div class="inner flex flex-col gap-2">
{{ components::town_square_post_form() }}
<div class="flex justify-between">
<div></div>
<div class="flex gap-2">
<button
class="bold red quaternary"
onclick="document.getElementById('town_square_post_dialog').remove()"
type="button"
>
{{ icon "x" }} {{ text "dialog:action.close" }}
</button>
</div>
</div>
</div>
</dialog>
{% endif %}
</body>
</html>