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>

server/pages/admin/users/groups/[id].vue

@@ -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>

server/pages/admin/users/index.vue

@@ -22,6 +22,8 @@
         </NuxtLink>
       </div>
     </div>
+
+    <!-- Users Table -->
     <div class="mt-8 flow-root">
       <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
         <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
@@ -122,14 +124,6 @@
                     >
                       {{ $t("users.admin.delete") }}
                     </button>
-
-                    <!--
-                    <NuxtLink to="#" class="text-blue-600 hover:text-blue-500"
-                      >Edit<span class="sr-only"
-                        >, {{ user.displayName }}</span
-                      ></NuxtLink
-                    >
-                    -->
                   </td>
                 </tr>
               </tbody>
@@ -139,6 +133,204 @@
       </div>
     </div>
     <ModalDeleteUser v-model="userToDelete" />
+
+    <!-- Groups Section -->
+    <div class="mt-12">
+      <div class="sm:flex sm:items-center">
+        <div class="sm:flex-auto">
+          <h2 class="text-base font-semibold text-zinc-100">
+            {{ $t("users.admin.groups.title") }}
+          </h2>
+          <p class="mt-2 text-sm text-zinc-400">
+            {{ $t("users.admin.groups.description") }}
+          </p>
+        </div>
+        <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
+          <button
+            class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+            @click="showCreateGroup = true"
+          >
+            {{ $t("users.admin.groups.createGroup") }}
+          </button>
+        </div>
+      </div>
+
+      <div class="mt-8 flow-root">
+        <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+          <div
+            class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"
+          >
+            <div
+              class="overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow"
+            >
+              <table class="min-w-full divide-y divide-zinc-700">
+                <thead>
+                  <tr class="bg-zinc-800/50">
+                    <th
+                      scope="col"
+                      class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-zinc-100 sm:pl-6"
+                    >
+                      {{ $t("users.admin.groups.name") }}
+                    </th>
+                    <th
+                      scope="col"
+                      class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+                    >
+                      {{ $t("users.admin.groups.descriptionField") }}
+                    </th>
+                    <th
+                      scope="col"
+                      class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+                    >
+                      {{ $t("users.admin.groups.members") }}
+                    </th>
+                    <th
+                      scope="col"
+                      class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+                    >
+                      {{ $t("users.admin.groups.bannedRatings") }}
+                    </th>
+                    <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                      <span class="sr-only">
+                        {{ $t("users.admin.srEditLabel") }}
+                      </span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="divide-y divide-zinc-700">
+                  <tr
+                    v-for="group in groups"
+                    :key="group.id"
+                    class="hover:bg-zinc-800/50 transition-colors duration-150"
+                  >
+                    <td
+                      class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-6"
+                    >
+                      {{ group.name }}
+                    </td>
+                    <td
+                      class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400"
+                    >
+                      {{ group.description || "-" }}
+                    </td>
+                    <td
+                      class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400"
+                    >
+                      {{ group._count.users }}
+                    </td>
+                    <td
+                      class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400"
+                    >
+                      {{ group._count.bannedAgeRatings }}
+                    </td>
+                    <td
+                      class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 space-x-2"
+                    >
+                      <NuxtLink
+                        :to="`/admin/users/groups/${group.id}`"
+                        class="text-blue-400 hover:text-blue-300"
+                      >
+                        {{ $t("common.edit") }}
+                      </NuxtLink>
+                      <button
+                        class="text-red-400 hover:text-red-300"
+                        @click="groupToDelete = group"
+                      >
+                        {{ $t("users.admin.groups.deleteGroup") }}
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Create Group Modal -->
+    <div
+      v-if="showCreateGroup"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-zinc-950/70"
+      @click.self="showCreateGroup = false"
+    >
+      <div
+        class="rounded-lg border border-zinc-700 bg-zinc-900 p-6 shadow-xl w-full max-w-md"
+      >
+        <h2 class="text-lg font-semibold text-zinc-100 mb-4">
+          {{ $t("users.admin.groups.createGroup") }}
+        </h2>
+        <div class="space-y-4">
+          <div>
+            <label class="text-sm/6 font-medium text-zinc-100">
+              {{ $t("users.admin.groups.name") }}
+            </label>
+            <input
+              v-model="newGroupName"
+              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="newGroupDescription"
+              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 class="flex justify-end gap-2">
+            <button
+              class="rounded-md px-3 py-2 text-sm font-semibold text-zinc-400 hover:text-zinc-300"
+              @click="showCreateGroup = false"
+            >
+              {{ $t("cancel") }}
+            </button>
+            <button
+              class="rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white hover:bg-blue-500"
+              :disabled="newGroupName.length < 2"
+              @click="createGroup"
+            >
+              {{ $t("users.admin.groups.createGroup") }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Delete Group Confirm Modal -->
+    <div
+      v-if="groupToDelete"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-zinc-950/70"
+      @click.self="groupToDelete = undefined"
+    >
+      <div
+        class="rounded-lg border border-zinc-700 bg-zinc-900 p-6 shadow-xl w-full max-w-md"
+      >
+        <h2 class="text-lg font-semibold text-zinc-100 mb-4">
+          {{ $t("users.admin.groups.deleteGroup") }}
+        </h2>
+        <p class="text-sm text-zinc-400 mb-4">
+          {{ $t("users.admin.groups.deleteConfirm") }}
+        </p>
+        <div class="flex justify-end gap-2">
+          <button
+            class="rounded-md px-3 py-2 text-sm font-semibold text-zinc-400 hover:text-zinc-300"
+            @click="groupToDelete = undefined"
+          >
+            {{ $t("cancel") }}
+          </button>
+          <button
+            class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white hover:bg-red-500"
+            @click="deleteGroup"
+          >
+            {{ $t("users.admin.groups.deleteGroup") }}
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -162,6 +354,45 @@ if (!users.value) {
 }
 
 const userToDelete = ref();
-
 const setUserToDelete = (user: UserModel) => (userToDelete.value = user);
+
+// Groups
+interface GroupListItem {
+  id: string;
+  name: string;
+  description: string;
+  _count: { users: number; bannedAgeRatings: number };
+}
+
+const groups = ref<GroupListItem[]>([]);
+const showCreateGroup = ref(false);
+const newGroupName = ref("");
+const newGroupDescription = ref("");
+const groupToDelete = ref<GroupListItem | undefined>();
+
+const fetchGroups = async () => {
+  groups.value = await $dropFetch<GroupListItem[]>("/api/v1/admin/groups");
+};
+
+await fetchGroups();
+
+const createGroup = async () => {
+  await $dropFetch("/api/v1/admin/groups", {
+    method: "POST",
+    body: { name: newGroupName.value, description: newGroupDescription.value },
+  });
+  showCreateGroup.value = false;
+  newGroupName.value = "";
+  newGroupDescription.value = "";
+  await fetchGroups();
+};
+
+const deleteGroup = async () => {
+  if (!groupToDelete.value) return;
+  await $dropFetch(`/api/v1/admin/groups/${groupToDelete.value.id}`, {
+    method: "DELETE",
+  });
+  groupToDelete.value = undefined;
+  await fetchGroups();
+};
 </script>