Added bot impersonation

Author: hlbmtc

front_end/messages/cs.json

@@ -1781,5 +1781,8 @@
   "hideApiKey": "Skrýt API klíč",
   "accessToken": "Přístupový token",
   "copy": "kopírovat",
+  "switchToBotAccount": "Přepnout na účet bota",
+  "impersonationBannerText": "Momentálně si prohlížíte Metaculus jako váš bot.",
+  "stopImpersonating": "Přepnout zpět na můj účet",
   "othersCount": "Ostatní ({count})"
 }

front_end/messages/en.json

@@ -1774,6 +1774,9 @@
   "revealApiKey": "Reveal API Key",
   "hideApiKey": "Hide API Key",
   "accessToken": "Access Token",
-  "copy": "copy",
+  "copy": "Copy",
+  "switchToBotAccount": "Switch to Bot Account",
+  "impersonationBannerText": "You are currently viewing Metaculus as your bot.",
+  "stopImpersonating": "Switch back to my account",
   "none": "none"
 }

front_end/messages/es.json

@@ -1781,5 +1781,8 @@
   "hideApiKey": "Ocultar Clave API",
   "accessToken": "Token de Acceso",
   "copy": "copiar",
+  "switchToBotAccount": "Cambiar a cuenta de bot",
+  "impersonationBannerText": "Actualmente estás viendo Metaculus como tu bot.",
+  "stopImpersonating": "Volver a mi cuenta",
   "othersCount": "Otros ({count})"
 }

front_end/messages/pt.json

@@ -1779,5 +1779,8 @@
   "hideApiKey": "Ocultar Chave da API",
   "accessToken": "Token de Acesso",
   "copy": "copiar",
+  "switchToBotAccount": "Mudar para Conta de Bot",
+  "impersonationBannerText": "Você está visualizando o Metaculus atualmente como seu bot.",
+  "stopImpersonating": "Voltar para minha conta",
   "othersCount": "Outros ({count})"
 }

front_end/messages/zh-TW.json

@@ -1778,5 +1778,8 @@
   "hideApiKey": "隱藏API密鑰",
   "accessToken": "訪問令牌",
   "copy": "複製",
+  "switchToBotAccount": "切換到機器人帳戶",
+  "impersonationBannerText": "您目前正在以您的機器人帳戶查看 Metaculus。",
+  "stopImpersonating": "切換回我的帳戶",
   "withdrawAfterPercentSetting2": "問題總生命周期後撤回"
 }

front_end/messages/zh.json

@@ -1783,5 +1783,8 @@
   "hideApiKey": "隐藏 API 密钥",
   "accessToken": "访问令牌",
   "copy": "复制",
+  "switchToBotAccount": "切换到机器人账户",
+  "impersonationBannerText": "您当前正在以机器人身份查看 Metaculus。",
+  "stopImpersonating": "切换回我的账户",
   "othersCount": "其他（{count}）"
 }

front_end/src/app/(main)/accounts/settings/actions.tsx

@@ -1,8 +1,16 @@
 "use server";
 
 import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
 
 import ServerProfileApi from "@/services/api/profile/profile.server";
+import {
+  deleteImpersonatorSession,
+  getImpersonatorSession,
+  getServerSession,
+  setImpersonatorSession,
+  setServerSession,
+} from "@/services/session";
 import { ApiError } from "@/utils/core/errors";
 
 export async function changePassword(password: string, new_password: string) {
@@ -107,3 +115,37 @@ export async function getBotTokenAction(botId: number) {
     };
   }
 }
+
+export async function stopImpersonatingAction() {
+  const impersonatorToken = await getImpersonatorSession();
+
+  if (impersonatorToken) {
+    await setServerSession(impersonatorToken);
+    await deleteImpersonatorSession();
+  }
+
+  redirect("/accounts/settings/bots/");
+}
+
+export async function impersonateBotAction(botId: number) {
+  try {
+    const userToken = await getServerSession();
+    const { token: botToken } = await ServerProfileApi.getBotToken(botId);
+
+    if (userToken) {
+      await setImpersonatorSession(userToken);
+    }
+
+    await setServerSession(botToken);
+
+    redirect("/");
+  } catch (err) {
+    if (!ApiError.isApiError(err)) {
+      throw err;
+    }
+
+    return {
+      errors: err.data,
+    };
+  }
+}

front_end/src/app/(main)/accounts/settings/bots/components/bot_controls.tsx

@@ -6,7 +6,10 @@ import { useTranslations } from "next-intl";
 import { FC, useState } from "react";
 import toast from "react-hot-toast";
 
-import { getBotTokenAction } from "@/app/(main)/accounts/settings/actions";
+import {
+  getBotTokenAction,
+  impersonateBotAction,
+} from "@/app/(main)/accounts/settings/actions";
 import Button from "@/components/ui/button";
 import { CurrentBot } from "@/types/users";
 import { extractError } from "@/utils/core/errors";
@@ -42,6 +45,18 @@ const BotControls: FC<Props> = ({ bot }) => {
     }
   };
 
+  const [isImpersonating, setIsImpersonating] = useState(false);
+
+  const handleImpersonate = async () => {
+    setIsImpersonating(true);
+    const response = await impersonateBotAction(id);
+
+    if (response?.errors) {
+      setIsImpersonating(false);
+      toast.error(extractError(response.errors));
+    }
+  };
+
   return (
     <div className="flex flex-col gap-2">
       <div className="flex flex-wrap gap-2">
@@ -55,6 +70,16 @@ const BotControls: FC<Props> = ({ bot }) => {
             <FontAwesomeIcon icon={faSpinner} spin className="ml-1" />
           )}
         </Button>
+        <Button
+          size="xs"
+          onClick={handleImpersonate}
+          disabled={isImpersonating}
+        >
+          {t("switchToBotAccount")}
+          {isImpersonating && (
+            <FontAwesomeIcon icon={faSpinner} spin className="ml-1" />
+          )}
+        </Button>
       </div>
 
       {apiToken && (

front_end/src/app/(main)/components/impersonation_banner.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { FC, useState } from "react";
+
+import { stopImpersonatingAction } from "@/app/(main)/accounts/settings/actions";
+import Button from "@/components/ui/button";
+import { useAuth } from "@/contexts/auth_context";
+
+const ImpersonationBanner: FC = () => {
+  const t = useTranslations();
+  const [isLoading, setIsLoading] = useState(false);
+  const { user } = useAuth();
+
+  const handleStop = async () => {
+    setIsLoading(true);
+    await stopImpersonatingAction();
+  };
+
+  if (!user?.is_bot) return;
+
+  return (
+    <div className="text-med -mb-12 mt-12 flex w-full items-center justify-center gap-4 border-b border-t border-orange-400 bg-orange-50 p-2 text-sm leading-6 text-orange-900 dark:border-orange-400-dark dark:bg-orange-50-dark dark:text-orange-900-dark sm:px-6">
+      <span>{t("impersonationBannerText")}</span>
+      <Button
+        onClick={handleStop}
+        disabled={isLoading}
+        size="sm"
+        variant="tertiary"
+      >
+        {t("stopImpersonating")}
+      </Button>
+    </div>
+  );
+};
+
+export default ImpersonationBanner;

front_end/src/app/(main)/layout.tsx

@@ -3,13 +3,15 @@ import "@fortawesome/fontawesome-svg-core/styles.css";
 import type { Metadata } from "next";
 
 import { defaultDescription } from "@/constants/metadata";
+import { getImpersonatorSession } from "@/services/session";
 import { getPublicSettings } from "@/utils/public_settings.server";
 
 import FeedbackFloat from "./(home)/components/feedback_float";
 import Bulletins from "./components/bulletins";
 import CookiesBanner from "./components/cookies_banner";
 import Footer from "./components/footer";
 import GlobalHeader from "./components/headers/global_header";
+import ImpersonationBanner from "./components/impersonation_banner";
 import VersionChecker from "./components/version_checker";
 
 config.autoAddCss = false;
@@ -26,9 +28,14 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const impersonatorToken = await getImpersonatorSession();
+
   return (
     <div className="flex min-h-screen flex-col">
       <GlobalHeader />
+
+      {impersonatorToken && <ImpersonationBanner />}
+
       <Bulletins />
       <div className="flex-grow">{children}</div>
       {!PUBLIC_MINIMAL_UI && (