mirror of
https://github.com/Drop-OSS/drop.git
synced 2026-08-23 14:52:04 +10:00
Adding groups logic and restrictions (#454)
* Adding groups logic and restrictions * Cleaning up some redundant code * hastily made translations * Linter issues * More linting * PR comments * Covering other APIs with age filters per comment --------- Co-authored-by: Robert Clabough <robert@clabough.tech>
This commit is contained in:
AgentScrubbles
co-authored by
Robert Clabough
Robert Clabough
parent
cc3f645580
commit
13891f6ab2
@@ -0,0 +1,356 @@
|
||||
<template>
|
||||
<div v-if="group">
|
||||
<h1 class="text-xl font-semibold text-zinc-100">
|
||||
{{ group.name }}
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-zinc-400">
|
||||
{{ group.description }}
|
||||
</p>
|
||||
|
||||
<!-- Details Section -->
|
||||
<div class="mt-8 rounded-lg border border-zinc-800 bg-zinc-900 p-6">
|
||||
<h2 class="text-base font-semibold text-zinc-100 mb-4">
|
||||
{{ $t("users.admin.groups.details") }}
|
||||
</h2>
|
||||
<div class="space-y-4 max-w-md">
|
||||
<div>
|
||||
<label class="text-sm/6 font-medium text-zinc-100">
|
||||
{{ $t("users.admin.groups.name") }}
|
||||
</label>
|
||||
<input
|
||||
v-model="editName"
|
||||
type="text"
|
||||
class="mt-1 block w-full rounded-md bg-zinc-800 px-3 py-1.5 text-sm text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 focus:outline-blue-600"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-sm/6 font-medium text-zinc-100">
|
||||
{{ $t("users.admin.groups.descriptionField") }}
|
||||
</label>
|
||||
<input
|
||||
v-model="editDescription"
|
||||
type="text"
|
||||
class="mt-1 block w-full rounded-md bg-zinc-800 px-3 py-1.5 text-sm text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 focus:outline-blue-600"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
class="rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white hover:bg-blue-500"
|
||||
@click="saveDetails"
|
||||
>
|
||||
{{ $t("common.save") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Members Section -->
|
||||
<div class="mt-8 rounded-lg border border-zinc-800 bg-zinc-900 p-6">
|
||||
<h2 class="text-base font-semibold text-zinc-100 mb-4">
|
||||
{{ $t("users.admin.groups.members") }}
|
||||
</h2>
|
||||
|
||||
<!-- OIDC managed banner -->
|
||||
<div
|
||||
v-if="oidcEnabled"
|
||||
class="mb-4 rounded-md bg-blue-900/30 border border-blue-700/50 p-4"
|
||||
>
|
||||
<p class="text-sm text-blue-300">
|
||||
{{ $t("users.admin.groups.oidcManagedNote") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="group.users.length === 0" class="text-sm text-zinc-400">
|
||||
{{ $t("users.admin.groups.noMembers") }}
|
||||
</div>
|
||||
<ul class="space-y-2">
|
||||
<li
|
||||
v-for="member in group.users"
|
||||
:key="member.id"
|
||||
class="flex items-center justify-between rounded-md bg-zinc-800/50 px-3 py-2"
|
||||
>
|
||||
<!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
|
||||
<span class="text-sm text-zinc-100">
|
||||
{{ member.displayName }}
|
||||
<!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
|
||||
<span class="text-zinc-400">({{ member.username }})</span>
|
||||
</span>
|
||||
<button
|
||||
v-if="!oidcEnabled"
|
||||
class="text-sm text-red-400 hover:text-red-300"
|
||||
@click="removeMember(member.id)"
|
||||
>
|
||||
{{ $t("users.admin.groups.removeMember") }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Add member -->
|
||||
<div v-if="!oidcEnabled" class="mt-4 flex items-center gap-2">
|
||||
<select
|
||||
v-model="selectedUserId"
|
||||
class="rounded-md bg-zinc-800 px-2 py-1.5 text-sm text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 focus:outline-blue-600"
|
||||
>
|
||||
<option value="" disabled>
|
||||
{{ $t("users.admin.groups.addMember") }}
|
||||
</option>
|
||||
<!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
|
||||
<option
|
||||
v-for="user in availableUsers"
|
||||
:key="user.id"
|
||||
:value="user.id"
|
||||
>
|
||||
{{ user.displayName }} ({{ user.username }})
|
||||
</option>
|
||||
</select>
|
||||
<button
|
||||
class="rounded-md bg-blue-600 px-2 py-1 text-sm font-semibold text-white hover:bg-blue-500"
|
||||
:disabled="!selectedUserId"
|
||||
@click="addMember"
|
||||
>
|
||||
{{ $t("add") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Banned Ratings Section -->
|
||||
<div class="mt-8 rounded-lg border border-zinc-800 bg-zinc-900 p-6">
|
||||
<h2 class="text-base font-semibold text-zinc-100 mb-4">
|
||||
{{ $t("users.admin.groups.bannedRatings") }}
|
||||
</h2>
|
||||
<p class="text-sm text-zinc-400 mb-4">
|
||||
{{ $t("users.admin.groups.unratedNote") }}
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-if="group.bannedAgeRatings.length === 0 && !showAddRating"
|
||||
class="text-sm text-zinc-400"
|
||||
>
|
||||
{{ $t("users.admin.groups.noBannedRatings") }}
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<div
|
||||
v-for="(br, idx) in group.bannedAgeRatings"
|
||||
:key="br.id"
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
|
||||
<span
|
||||
class="inline-flex items-center rounded-full bg-zinc-800 px-2.5 py-0.5 text-sm font-medium text-zinc-100"
|
||||
>
|
||||
{{ br.organization }}: {{ br.rating }}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
class="text-red-400 hover:text-red-300 text-sm"
|
||||
@click="removeRating(idx)"
|
||||
>
|
||||
{{ $t("users.admin.groups.removeBannedRating") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showAddRating" class="mt-4 flex items-center gap-2">
|
||||
<select
|
||||
v-model="newRatingOrg"
|
||||
class="rounded-md bg-zinc-800 px-2 py-1 text-sm text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 focus:outline-blue-600"
|
||||
>
|
||||
<option v-for="org in organizations" :key="org" :value="org">
|
||||
{{ org }}
|
||||
</option>
|
||||
</select>
|
||||
<select
|
||||
v-model="newRatingValue"
|
||||
:disabled="!newRatingOrg"
|
||||
class="rounded-md bg-zinc-800 px-2 py-1 text-sm text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 focus:outline-blue-600"
|
||||
>
|
||||
<option v-for="r in availableRatingsForOrg" :key="r" :value="r">
|
||||
{{ r }}
|
||||
</option>
|
||||
</select>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md bg-blue-600 px-2 py-1 text-sm font-semibold text-white hover:bg-blue-500"
|
||||
:disabled="!newRatingOrg || !newRatingValue"
|
||||
@click="addRating"
|
||||
>
|
||||
{{ $t("add") }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-zinc-400 hover:text-zinc-300 text-sm"
|
||||
@click="showAddRating = false"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-if="!showAddRating"
|
||||
type="button"
|
||||
class="mt-4 text-sm text-blue-400 hover:text-blue-300"
|
||||
@click="showAddRating = true"
|
||||
>
|
||||
{{ $t("users.admin.groups.addBannedRating") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { AuthMec } from "~/prisma/client/enums";
|
||||
import { getAvailableRatings } from "~/utils/ageRatings";
|
||||
import { AgeRatingOrganization } from "~/prisma/client/enums";
|
||||
|
||||
useHead({ title: "Edit Group" });
|
||||
definePageMeta({ layout: "admin" });
|
||||
|
||||
const route = useRoute();
|
||||
const groupId = route.params.id as string;
|
||||
|
||||
interface GroupMember {
|
||||
id: string;
|
||||
username: string;
|
||||
displayName: string;
|
||||
}
|
||||
|
||||
interface BannedRating {
|
||||
id: string;
|
||||
organization: string;
|
||||
rating: string;
|
||||
}
|
||||
|
||||
interface GroupDetail {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
users: GroupMember[];
|
||||
bannedAgeRatings: BannedRating[];
|
||||
}
|
||||
|
||||
const group = ref<GroupDetail | null>(null);
|
||||
const editName = ref("");
|
||||
const editDescription = ref("");
|
||||
const selectedUserId = ref("");
|
||||
const oidcEnabled = ref(false);
|
||||
|
||||
// Rating add state
|
||||
const showAddRating = ref(false);
|
||||
const newRatingOrg = ref<AgeRatingOrganization | "">("");
|
||||
const newRatingValue = ref("");
|
||||
|
||||
const organizations = Object.values(AgeRatingOrganization);
|
||||
|
||||
const availableRatingsForOrg = computed(() => {
|
||||
if (!newRatingOrg.value) return [];
|
||||
return getAvailableRatings(newRatingOrg.value as AgeRatingOrganization);
|
||||
});
|
||||
|
||||
watch(newRatingOrg, () => {
|
||||
newRatingValue.value = "";
|
||||
});
|
||||
|
||||
// Fetch group
|
||||
const fetchGroup = async () => {
|
||||
group.value = await $dropFetch<GroupDetail>(
|
||||
`/api/v1/admin/groups/${groupId}`,
|
||||
);
|
||||
editName.value = group.value.name;
|
||||
editDescription.value = group.value.description;
|
||||
};
|
||||
|
||||
// Fetch all users for member add dropdown
|
||||
interface UserListItem {
|
||||
id: string;
|
||||
username: string;
|
||||
displayName: string;
|
||||
}
|
||||
const allUsers = ref<UserListItem[]>([]);
|
||||
const fetchAllUsers = async () => {
|
||||
allUsers.value = await $dropFetch<UserListItem[]>("/api/v1/admin/users");
|
||||
};
|
||||
|
||||
// Check OIDC
|
||||
const checkOidc = async () => {
|
||||
try {
|
||||
const auth =
|
||||
await $dropFetch<Record<string, unknown>>("/api/v1/admin/auth");
|
||||
oidcEnabled.value = !!auth["OpenID" as AuthMec];
|
||||
} catch {
|
||||
oidcEnabled.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
await Promise.all([fetchGroup(), fetchAllUsers(), checkOidc()]);
|
||||
|
||||
const availableUsers = computed(() => {
|
||||
if (!group.value) return [];
|
||||
const memberIds = new Set(group.value.users.map((u) => u.id));
|
||||
return allUsers.value.filter(
|
||||
(u) => !memberIds.has(u.id) && u.id !== "system",
|
||||
);
|
||||
});
|
||||
|
||||
const saveDetails = async () => {
|
||||
await $dropFetch(`/api/v1/admin/groups/${groupId}`, {
|
||||
method: "PATCH",
|
||||
body: { name: editName.value, description: editDescription.value },
|
||||
});
|
||||
await fetchGroup();
|
||||
};
|
||||
|
||||
const addMember = async () => {
|
||||
if (!group.value || !selectedUserId.value) return;
|
||||
const newUserIds = [
|
||||
...group.value.users.map((u) => u.id),
|
||||
selectedUserId.value,
|
||||
];
|
||||
await $dropFetch(`/api/v1/admin/groups/${groupId}/members`, {
|
||||
method: "PATCH",
|
||||
body: { userIds: newUserIds },
|
||||
});
|
||||
selectedUserId.value = "";
|
||||
await fetchGroup();
|
||||
};
|
||||
|
||||
const removeMember = async (userId: string) => {
|
||||
if (!group.value) return;
|
||||
const newUserIds = group.value.users
|
||||
.filter((u) => u.id !== userId)
|
||||
.map((u) => u.id);
|
||||
await $dropFetch(`/api/v1/admin/groups/${groupId}/members`, {
|
||||
method: "PATCH",
|
||||
body: { userIds: newUserIds },
|
||||
});
|
||||
await fetchGroup();
|
||||
};
|
||||
|
||||
const addRating = async () => {
|
||||
if (!group.value || !newRatingOrg.value || !newRatingValue.value) return;
|
||||
const newRatings = [
|
||||
...group.value.bannedAgeRatings.map((br) => ({
|
||||
organization: br.organization,
|
||||
rating: br.rating,
|
||||
})),
|
||||
{ organization: newRatingOrg.value, rating: newRatingValue.value },
|
||||
];
|
||||
await $dropFetch(`/api/v1/admin/groups/${groupId}/ratings`, {
|
||||
method: "PATCH",
|
||||
body: { bannedRatings: newRatings },
|
||||
});
|
||||
showAddRating.value = false;
|
||||
newRatingOrg.value = "";
|
||||
newRatingValue.value = "";
|
||||
await fetchGroup();
|
||||
};
|
||||
|
||||
const removeRating = async (idx: number) => {
|
||||
if (!group.value) return;
|
||||
const newRatings = group.value.bannedAgeRatings
|
||||
.filter((_, i) => i !== idx)
|
||||
.map((br) => ({ organization: br.organization, rating: br.rating }));
|
||||
await $dropFetch(`/api/v1/admin/groups/${groupId}/ratings`, {
|
||||
method: "PATCH",
|
||||
body: { bannedRatings: newRatings },
|
||||
});
|
||||
await fetchGroup();
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user