add moderator role (#1419)

website/.env

@@ -1,4 +1,5 @@
 ADMIN_USERS = "credentials:admin,discord:root,email:admin@example.com"
+MODERATOR_USERS = "credentials:mod,discord:mod,email:mod@example.com"
 
 # The database created by running the jobs in /scripts/frontend-development/docker-compose.yaml
 DATABASE_URL=postgres://postgres:postgres@localhost:5433/oasst_web

website/src/components/AdminArea.tsx

@@ -10,9 +10,12 @@ export const AdminArea = ({ children }: { children: ReactNode }) => {
     if (status === "loading") {
       return;
     }
-    if (session?.user.role === "admin") {
+    const role = session?.user.role;
+
+    if (role === "admin" || role === "moderator") {
       return;
     }
+
     router.push("/");
   }, [router, session, status]);
   return <main>{status === "loading" ? "loading..." : children}</main>;

website/src/components/Header/UserMenu.tsx

@@ -1,5 +1,6 @@
 import {
   Avatar,
+  Badge,
   Box,
   Link,
   Menu,
@@ -16,6 +17,7 @@ import NextLink from "next/link";
 import { signOut, useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
 import React, { ElementType, useCallback } from "react";
+import { useHasAnyRole } from "src/hooks/auth/useHasAnyRole";
 
 interface MenuOption {
   name: string;
@@ -31,7 +33,7 @@ export function UserMenu() {
     signOut({ callbackUrl: "/" });
   }, []);
   const { data: session, status } = useSession();
-
+  const isAdminOrMod = useHasAnyRole(["admin", "moderator"]);
   if (!session || status !== "authenticated") {
     return null;
   }
@@ -56,7 +58,7 @@ export function UserMenu() {
     },
   ];
 
-  if (session.user.role === "admin") {
+  if (isAdminOrMod) {
     options.unshift({
       name: t("admin_dashboard"),
       href: "/admin",
@@ -77,7 +79,14 @@ export function UserMenu() {
       </MenuButton>
       <MenuList p="2" borderRadius="xl" shadow="none">
         <Box display="flex" flexDirection="column" alignItems="center" borderRadius="md" p="4">
-          <Text>{session.user.name}</Text>
+          <Text>
+            {session.user.name}
+            {isAdminOrMod ? (
+              <Badge size="xs" ml="2" fontSize="xs" textTransform="capitalize">
+                {session.user.role}
+              </Badge>
+            ) : null}
+          </Text>
           {/* <Text color="blue.500" fontWeight="bold" fontSize="xl">
             3,200
           </Text> */}

website/src/components/LeaderboardTable/LeaderboardTable.tsx

@@ -4,7 +4,7 @@ import { MoreHorizontal } from "lucide-react";
 import NextLink from "next/link";
 import { useTranslation } from "next-i18next";
 import React, { useMemo } from "react";
-import { useHasRole } from "src/hooks/auth/useHasRole";
+import { useHasAnyRole } from "src/hooks/auth/useHasAnyRole";
 import { LeaderboardEntity, LeaderboardReply, LeaderboardTimeFrame } from "src/types/Leaderboard";
 
 import { DataTable, DataTableColumnDef } from "../DataTable/DataTable";
@@ -41,7 +41,7 @@ export const LeaderboardTable = ({
     `/api/leaderboard?time_frame=${timeFrame}&limit=${limit}&includeUserStats=${!hideCurrentUserRanking}`
   );
 
-  const isAdmin = useHasRole("admin");
+  const isAdminOrMod = useHasAnyRole(["admin", "moderator"]);
 
   const columns: DataTableColumnDef<WindowLeaderboardEntity>[] = useMemo(
     () => [
@@ -51,7 +51,7 @@ export const LeaderboardTable = ({
           cell: (ctx) =>
             ctx.row.original.isSpaceRow ? (
               <SpaceRow></SpaceRow>
-            ) : isAdmin ? (
+            ) : isAdminOrMod ? (
               jsonExpandRowModel.renderCell(ctx)
             ) : (
               ctx.getValue()
@@ -62,7 +62,7 @@ export const LeaderboardTable = ({
       columnHelper.accessor("display_name", {
         header: t("user"),
         cell: ({ getValue, row }) =>
-          isAdmin ? (
+          isAdminOrMod ? (
             <Link as={NextLink} href={`/admin/manage_user/${row.original.user_id}`}>
               {getValue()}
             </Link>
@@ -83,7 +83,7 @@ export const LeaderboardTable = ({
         header: t("label"),
       }),
     ],
-    [isAdmin, t]
+    [isAdminOrMod, t]
   );
 
   const {

website/src/components/Messages/MessageEmojiButton.tsx

@@ -1,5 +1,5 @@
 import { Button, ButtonProps } from "@chakra-ui/react";
-import { useHasRole } from "src/hooks/auth/useHasRole";
+import { useHasAnyRole } from "src/hooks/auth/useHasAnyRole";
 import { MessageEmoji } from "src/types/Conversation";
 import { emojiIcons } from "src/types/Emoji";
 
@@ -23,12 +23,12 @@ export const MessageEmojiButton = ({
   sx,
 }: MessageEmojiButtonProps) => {
   const EmojiIcon = emojiIcons.get(emoji.name);
-  const isAdmin = useHasRole("admin");
+  const isAdminOrMod = useHasAnyRole(["admin", "moderator"]);
 
   if (!EmojiIcon) return null;
 
   const isDisabled = !!(userIsAuthor ? true : disabled);
-  const showCount = (emoji.count > 0 && userReacted) || userIsAuthor || isAdmin;
+  const showCount = (emoji.count > 0 && userReacted) || userIsAuthor || isAdminOrMod;
 
   return (
     <Button

website/src/components/Messages/MessageTableEntry.tsx

@@ -22,7 +22,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { LabelMessagePopup } from "src/components/Messages/LabelPopup";
 import { MessageEmojiButton } from "src/components/Messages/MessageEmojiButton";
 import { ReportPopup } from "src/components/Messages/ReportPopup";
-import { useHasRole } from "src/hooks/auth/useHasRole";
+import { useHasAnyRole } from "src/hooks/auth/useHasAnyRole";
 import { del, post, put } from "src/lib/api";
 import { colors } from "src/styles/Theme/colors";
 import { Message, MessageEmojis } from "src/types/Conversation";
@@ -210,7 +210,7 @@ const MessageActions = ({
     });
   };
 
-  const isAdmin = useHasRole("admin");
+  const isAdminOrMod = useHasAnyRole(["admin", "moderator"]);
 
   return (
     <Menu>
@@ -243,7 +243,7 @@ const MessageActions = ({
         >
           {t("copy_message_link")}
         </MenuItem>
-        {!!isAdmin && (
+        {!!isAdminOrMod && (
           <>
             <MenuDivider />
             <MenuItem onClick={() => handleCopy(id)} icon={<Copy />}>

website/src/components/RoleSelect.tsx

@@ -2,7 +2,7 @@ import { Select, SelectProps } from "@chakra-ui/react";
 import { forwardRef } from "react";
 import { ElementOf } from "src/types/utils";
 
-export const roles = ["general", "admin", "banned"] as const;
+export const roles = ["general", "admin", "banned", "moderator"] as const;
 export type Role = ElementOf<typeof roles>;
 
 type RoleSelectProps = Omit<SelectProps, "defaultValue"> & {

website/src/hooks/auth/useHasAnyRole.ts

@@ -0,0 +1,8 @@
+import { useSession } from "next-auth/react";
+import { Role } from "src/components/RoleSelect";
+
+export const useHasAnyRole = (roles: Role[]) => {
+  const { data: session } = useSession();
+
+  return roles.some((role) => role === session?.user?.role);
+};

website/src/lib/auth.ts

@@ -32,4 +32,18 @@ const withRole = (role: Role, handler: (arg0: NextApiRequest, arg1: NextApiRespo
   };
 };
 
+export const withAnyRole = (
+  roles: Role[],
+  handler: (arg0: NextApiRequest, arg1: NextApiResponse, token: JWT) => void
+) => {
+  return async (req: NextApiRequest, res: NextApiResponse) => {
+    const token = await getToken({ req });
+    if (!token || roles.every((role) => token.role !== role)) {
+      res.status(403).end();
+      return;
+    }
+    return handler(req, res, token);
+  };
+};
+
 export { withoutRole, withRole };

website/src/pages/api/admin/delete_message/[id].ts

@@ -1,7 +1,7 @@
-import { withRole } from "src/lib/auth";
+import { withAnyRole } from "src/lib/auth";
 import { createApiClient } from "src/lib/oasst_client_factory";
 
-const handler = withRole("admin", async (req, res, token) => {
+const handler = withAnyRole(["admin", "moderator"], async (req, res, token) => {
   const { id } = req.query;
   try {
     const client = await createApiClient(token);

website/src/pages/api/admin/parameters.ts

@@ -1,9 +1,15 @@
-import { withRole } from "src/lib/auth";
+import { withAnyRole } from "src/lib/auth";
 import { createApiClient } from "src/lib/oasst_client_factory";
 
-export default withRole("admin", async (_, res, token) => {
+export default withAnyRole(["admin", "moderator"], async (_, res, token) => {
   const client = await createApiClient(token);
 
+  if (token.role === "moderator") {
+    const publicSettings = await client.fetch_public_settings();
+
+    return res.json(publicSettings);
+  }
+
   try {
     const fullSettings = await client.fetch_full_settings();
 

website/src/pages/api/admin/status.ts

@@ -1,10 +1,10 @@
-import { withRole } from "src/lib/auth";
+import { withAnyRole } from "src/lib/auth";
 import { createApiClientFromUser } from "src/lib/oasst_client_factory";
 
 /**
  * Returns tasks availability, stats, and tree manager stats.
  */
-const handler = withRole("admin", async (req, res) => {
+const handler = withAnyRole(["admin", "moderator"], async (req, res) => {
   // NOTE: why are we using a dummy user here?
   const dummyUser = {
     id: "__dummy_user__",

website/src/pages/api/admin/stop_tree/[id].ts

@@ -1,7 +1,7 @@
-import { withRole } from "src/lib/auth";
+import { withAnyRole } from "src/lib/auth";
 import { createApiClient } from "src/lib/oasst_client_factory";
 
-const handler = withRole("admin", async (req, res, token) => {
+const handler = withAnyRole(["admin", "moderator"], async (req, res, token) => {
   const { id } = req.query;
   try {
     const client = await createApiClient(token);

website/src/pages/api/admin/trollboard.ts

@@ -1,8 +1,8 @@
-import { withRole } from "src/lib/auth";
+import { withAnyRole } from "src/lib/auth";
 import { createApiClient } from "src/lib/oasst_client_factory";
 import { TrollboardTimeFrame } from "src/types/Trollboard";
 
-export default withRole("admin", async (req, res, token) => {
+export default withAnyRole(["admin", "moderator"], async (req, res, token) => {
   const client = await createApiClient(token);
 
   const trollboard = await client.fetch_trollboard(req.query.time_frame as TrollboardTimeFrame, {

website/src/pages/api/admin/user_messages.ts

@@ -1,4 +1,4 @@
-import { withRole } from "src/lib/auth";
+import { withAnyRole } from "src/lib/auth";
 import { createApiClient } from "src/lib/oasst_client_factory";
 
 const LIMIT = 10;
@@ -6,7 +6,7 @@ const LIMIT = 10;
 /**
  * Returns the messages recorded by the backend for a user.
  */
-const handler = withRole("admin", async (req, res, token) => {
+const handler = withAnyRole(["admin", "moderator"], async (req, res, token) => {
   const { cursor, direction, user } = req.query;
 
   const oasstApiClient = await createApiClient(token);

website/src/pages/api/admin/users.ts

@@ -1,4 +1,4 @@
-import { withRole } from "src/lib/auth";
+import { withAnyRole } from "src/lib/auth";
 import { createApiClient } from "src/lib/oasst_client_factory";
 import prisma from "src/lib/prismadb";
 import { FetchUsersParams } from "src/types/Users";
@@ -17,7 +17,7 @@ const PAGE_SIZE = 20;
  * - `direction`: Either "forward" or "backward" representing the pagination
  *   direction.
  */
-const handler = withRole("admin", async (req, res, token) => {
+const handler = withAnyRole(["admin", "moderator"], async (req, res, token) => {
   const { cursor, direction, searchDisplayName = "", sortKey = "username" } = req.query;
 
   const oasstApiClient = await createApiClient(token);

website/src/pages/api/auth/[...nextauth].ts

@@ -1,5 +1,6 @@
 import { PrismaAdapter } from "@next-auth/prisma-adapter";
 import { boolean } from "boolean";
+import { generateUsername } from "friendly-username-generator";
 import { NextApiRequest, NextApiResponse } from "next";
 import type { AuthOptions } from "next-auth";
 import NextAuth from "next-auth";
@@ -11,7 +12,6 @@ import { checkCaptcha } from "src/lib/captcha";
 import { createApiClientFromUser } from "src/lib/oasst_client_factory";
 import prisma from "src/lib/prismadb";
 import { BackendUserCore } from "src/types/Users";
-import { generateUsername } from "friendly-username-generator";
 
 const providers: Provider[] = [];
 
@@ -78,6 +78,14 @@ const adminUserMap = process.env.ADMIN_USERS.split(",").reduce((result, entry) =
   return result;
 }, new Map());
 
+const moderatorUserMap = process.env.MODERATOR_USERS.split(",").reduce((result, entry) => {
+  const [authType, id] = entry.split(":");
+  const s = result.get(authType) || new Set();
+  s.add(id);
+  result.set(authType, s);
+  return result;
+}, new Map());
+
 const authOptions: AuthOptions = {
   // Ensure we can store user data in a database.
   adapter: PrismaAdapter(prisma),
@@ -161,9 +169,10 @@ const authOptions: AuthOptions = {
 
       // Get the admin list for the user's auth type.
       const adminForAccountType = adminUserMap.get(account.provider);
+      const moderatorForAccountType = moderatorUserMap.get(account.provider);
 
       // Return early if there's no admin list.
-      if (!adminForAccountType) {
+      if (!adminForAccountType && !moderatorForAccountType) {
         return;
       }
 
@@ -180,6 +189,17 @@ const authOptions: AuthOptions = {
           },
         });
       }
+
+      if (moderatorForAccountType.has(account.providerAccountId)) {
+        await prisma.user.update({
+          data: {
+            role: "moderator",
+          },
+          where: {
+            id: user.id,
+          },
+        });
+      }
     },
   },
 };

website/types/env.d.ts

@@ -6,6 +6,8 @@ declare global {
       CLOUDFLARE_CAPTCHA_SECRET_KEY: string;
       NEXT_PUBLIC_ENABLE_EMAIL_SIGNIN_CAPTCHA: boolean;
       NEXT_PUBLIC_ENABLE_EMAIL_SIGNIN: boolean;
+      ADMIN_USERS: string;
+      MODERATOR_USERS: string;
     }
   }
 }