feat: implemente unlimited teams feature client-side

Author: thelicato

src/client/api/rest.ts

@@ -10,6 +10,7 @@ import {
   GetFilesRequest,
   GetFilesResponse,
   IGenericResultRes,
+  NewTeamResponse,
   StartActivityRequest,
   StartBroadcastRequest,
   StartExploitAppRequest,
@@ -122,6 +123,11 @@ class RESTManager {
     return res;
   }
 
+  async addNewTeam(): Promise<AxiosResponse<NewTeamResponse>> {
+    const res = await http.post<NewTeamResponse>(E.NEW_TEAM);
+    return res;
+  }
+
   async getAttackSurface(debugToken: string): Promise<AxiosResponse<CompanionAttackSurface>> {
     const res = await http.get<CompanionAttackSurface>(E.ATTACK_SURFACE, { headers: { Authorization: debugToken } });
     return res;

src/client/components/AddNewTeamModal.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from "react";
+import toast from "react-hot-toast";
+import { RESTManagerInstance } from "@client/api/rest";
+
+interface IModalProps {
+  dialogRef: React.RefObject<HTMLDialogElement | null>;
+}
+
+export const AddNewTeamModal: React.FC<IModalProps> = ({ dialogRef }) => {
+  const [requestResult, setRequestResult] = useState<string>("");
+
+  useEffect(() => {
+    const handleClose = () => {
+      setRequestResult("");
+    };
+
+    const dialog = dialogRef.current;
+    if (dialog) {
+      dialog.addEventListener("close", handleClose);
+    }
+
+    return () => {
+      if (dialog) {
+        dialog.removeEventListener("close", handleClose);
+      }
+    };
+  }, []);
+
+  const getTeamToken = async () => {
+    try {
+      const res = await RESTManagerInstance.addNewTeam();
+      setRequestResult(`New Team Token generated: ${res.data.teamToken}`);
+    } catch (e) {
+      console.error(e);
+      toast.error("Error while generating new Team Token.");
+    }
+  };
+
+  return (
+    <dialog ref={dialogRef} className="modal">
+      <div className="modal-box max-w-3xl">
+        <h3 className="font-bold text-lg mb-4">Get Team Token</h3>
+        <p className="mb-4">
+          This will allow you to get a new Team Token which is <b>required</b> to install and run <i>exploit apps</i>{" "}
+          and for the <i>Exploit Server</i> as well.
+        </p>
+        <div className="space-y-4">
+          {/* Result */}
+          {requestResult.length > 0 && (
+            <div className="flex flex-col justify-between mb-4 gap-4">
+              <span className="font-semibold">Output</span>
+              <div className="mockup-code w-full hide-before max-h-96 overflow-y-auto p-4">
+                <pre className="text-accent text-wrap wrap-break-word break-all">
+                  <code>{requestResult}</code>
+                </pre>
+              </div>
+            </div>
+          )}
+
+          {/* Submit */}
+          <div className="flex justify-end">
+            <input onClick={getTeamToken} className="btn btn-primary" value="Get Token" />
+          </div>
+        </div>
+      </div>
+      <form method="dialog" className="modal-backdrop">
+        <button>close</button>
+      </form>
+    </dialog>
+  );
+};

src/client/components/index.ts

@@ -4,3 +4,4 @@ export { StartBroadcastModal } from "@client/components/StartBroadcastModal";
 export { StartServiceModal } from "@client/components/StartServiceModal";
 export { InstallExploitAppModal } from "@client/components/InstallExploitAppModal";
 export { StartExploitAppModal } from "@client/components/StartExploitAppModal";
+export { AddNewTeamModal } from "@client/components/AddNewTeamModal";

src/client/views/Overview.tsx

@@ -7,7 +7,7 @@ import { MdSpaceDashboard } from "react-icons/md";
 import { RESTManagerInstance } from "@client/api/rest";
 import { BugreportzStatusResponse } from "@shared/api";
 import { useAPI } from "@client/context/API";
-import { StartActivityModal, StartBroadcastModal, StartServiceModal } from "@client/components";
+import { AddNewTeamModal, StartActivityModal, StartBroadcastModal, StartServiceModal } from "@client/components";
 
 export const Overview: React.FC = () => {
   const { featuresConfig, deviceInfo } = useAPI();
@@ -17,6 +17,7 @@ export const Overview: React.FC = () => {
   });
   const isPowerMenuEnabled = featuresConfig.shutdownEnabled || featuresConfig.rebootEnabled;
   // Dialogs
+  const addNewTeamDialogRef = useRef<HTMLDialogElement | null>(null);
   const startActivityDialogRef = useRef<HTMLDialogElement | null>(null);
   const startBroadcastReceiverDialogRef = useRef<HTMLDialogElement | null>(null);
   const startServiceDialogRef = useRef<HTMLDialogElement | null>(null);
@@ -120,6 +121,9 @@ export const Overview: React.FC = () => {
        *    Modals   *
        ***************/}
 
+      {/* New Team Modal */}
+      <AddNewTeamModal dialogRef={addNewTeamDialogRef} />
+
       {/* Start Activity Modal */}
       <StartActivityModal dialogRef={startActivityDialogRef} />
 
@@ -202,6 +206,22 @@ export const Overview: React.FC = () => {
               </div>
             </div>
 
+            {featuresConfig.unlimitedTeams && (
+              <div className="flex w-full justify-between items-center">
+                <p>
+                  Get <b>Team Token</b>
+                </p>
+                <div className="join">
+                  <button
+                    className="btn btn-info join-item rounded-r-md"
+                    onClick={() => addNewTeamDialogRef.current?.showModal()}
+                  >
+                    Get
+                  </button>
+                </div>
+              </div>
+            )}
+
             {featuresConfig.startActivityEnabled && (
               <div className="flex w-full justify-between items-center">
                 <p>