Merge branch 'release/0.3.3'

Author: thelicato

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "droidground",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "type": "module",
   "author": "Angelo Delicato",
   "scripts": {

package.json

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useLocation, useNavigate } from "@tanstack/react-router";
 import { motion } from "motion/react";
 import toast from "react-hot-toast";
@@ -56,14 +56,18 @@ const Navbar: React.FC = () => {
     { label: "Exploit Server", to: PAGES.EXPLOIT_SERVER, routeEnabled: teamModeEnabled },
   ];
 
+  const suffix = useMemo(() => {
+    const suffix = featuresConfig.basePath.length > 0 ? featuresConfig.basePath : "";
+    return suffix;
+  }, [featuresConfig]);
+
   useEffect(() => {
     if (!appManagerEnabled) {
       return;
     }
 
     const isHttps = typeof window !== "undefined" && window.location.protocol === "https:";
     const prefix = isHttps ? "wss" : "ws";
-    const suffix = featuresConfig.basePath.length > 0 ? featuresConfig.basePath : "";
     const wsBaseUrl = `${prefix}://${window.location.host}${suffix}`;
     const socket = new WebSocket(`${wsBaseUrl}${WEBSOCKET_ENDPOINTS.NOTIFICATIONS}`);
 
@@ -187,7 +191,7 @@ const Navbar: React.FC = () => {
                   className="cursor-pointer relative z-10 px-3 py-2 rounded-md transition-colors text-gray-300"
                 >
                   {item.label}
-                  {location.pathname === item.to && (
+                  {location.pathname === `${suffix}${item.to}` && (
                     <motion.div
                       layoutId="underline"
                       className="absolute -bottom-4.5 left-0 right-0 h-0.5 bg-info rounded z-20"

src/client/layout/Header.tsx

@@ -183,7 +183,7 @@ export const VideoRenderer: React.FC = () => {
 
   return (
     <div
-      className={`m-auto w-3/4 min-w-3/4 sm:w-1/2 sm:min-w-1/2 lg:w-1/4 lg:min-w-1/4 rounded-2xl border-10 border-black shadow-2xl flex items-center justify-center relative overflow-hidden ${streamingPhase !== StreamingPhase.RENDER ? "aspect-9/16 bg-gray-950" : "bg-transparent "}`}
+      className={`mx-auto w-3/4 min-w-3/4 sm:w-1/2 sm:min-w-1/2 lg:w-1/4 lg:min-w-1/4 rounded-2xl border-10 border-black shadow-2xl flex items-center justify-center relative overflow-hidden ${streamingPhase !== StreamingPhase.RENDER ? "aspect-9/16 bg-gray-950" : "bg-transparent "}`}
     >
       {/* Speaker + Camera Dot */}
       <div className="absolute top-2 w-full flex justify-center items-center z-10">

src/client/layout/Renderer.tsx

@@ -104,7 +104,7 @@ export const AppManager: React.FC = () => {
         </div>
         <div className="card bg-base-300 border border-base-300">
           <div className="card-body p-4 max-h-screen">
-            <div className="card-title justify-between mb-2 select-none">
+            <div className="card-title items-start justify-between mb-2 select-none flex flex-col lg:flex-row">
               <h2>Third-party Apps</h2>
               <div className="flex gap-2">
                 <button className="btn btn-info" onClick={getPackageInfos}>

src/client/views/AppManager.tsx

@@ -40,7 +40,10 @@ export const Debug: React.FC = () => {
             <h2>Attack Surface</h2>
           </div>
           <div className="flex gap-2">
-            <form onSubmit={handleSubmit(retrieveAttackSurface)} className="flex flex-1 gap-4 space-y-4">
+            <form
+              onSubmit={handleSubmit(retrieveAttackSurface)}
+              className="flex flex-1 space-y-4 flex-col lg:flex-row lg:gap-4"
+            >
               <input
                 type="text"
                 placeholder="Debug Token in server logs"
@@ -50,8 +53,8 @@ export const Debug: React.FC = () => {
               {errors.debugToken && <p className="text-error text-sm">Debug Token is required.</p>}
 
               {/* Submit */}
-              <div className="flex justify-end">
-                <input className="btn btn-primary" type="submit" value="Get Attack Surface" />
+              <div className="flex w-full lg:w-auto justify-end">
+                <input className="btn btn-primary w-full" type="submit" value="Get Attack Surface" />
               </div>
             </form>
           </div>

src/client/views/Debug.tsx

@@ -1,11 +1,79 @@
-import { useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 import { BiSolidServer } from "react-icons/bi";
+import { FaCopy } from "react-icons/fa";
 import { useAPI } from "@client/context/API";
 import { TeamTokenGenericRequest } from "@shared/api";
 import { WEBSOCKET_ENDPOINTS } from "@shared/endpoints";
 
+type CopyButtonProps = {
+  text: string;
+  tooltip?: string;
+  copiedTooltip?: string;
+  ariaLabel?: string;
+  buttonClassName?: string;
+  className?: string;
+};
+
+async function copyToClipboard(text: string) {
+  if (navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+}
+
+export function CopyIconButton({
+  text,
+  tooltip = "Copy",
+  copiedTooltip = "Copied!",
+  ariaLabel = "Copy to clipboard",
+  buttonClassName = "btn btn-ghost btn-sm",
+  className = "",
+}: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+  const liveId = useId();
+  const timerRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) window.clearTimeout(timerRef.current);
+    };
+  }, []);
+
+  async function handleCopy() {
+    try {
+      await copyToClipboard(text);
+      setCopied(true);
+
+      if (timerRef.current) window.clearTimeout(timerRef.current);
+      timerRef.current = window.setTimeout(() => setCopied(false), 1200);
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  return (
+    <span className={`inline-flex items-center gap-2 ${className}`}>
+      <div className="tooltip tooltip-bottom" data-tip={copied ? copiedTooltip : tooltip}>
+        <button
+          type="button"
+          className={buttonClassName}
+          onClick={handleCopy}
+          aria-label={ariaLabel}
+          aria-describedby={liveId}
+        >
+          <FaCopy size={16} />
+        </button>
+      </div>
+
+      <span id={liveId} className="sr-only" aria-live="polite">
+        {copied ? copiedTooltip : ""}
+      </span>
+    </span>
+  );
+}
+
 export const ExploitServer: React.FC = () => {
   const { featuresConfig } = useAPI();
   const [isConnected, setIsConnected] = useState<boolean>(false);
@@ -57,14 +125,20 @@ export const ExploitServer: React.FC = () => {
 
   return (
     <div className="w-full flex flex-col gap-2">
-      <div className="flex items-center justify-between mb-2">
+      <div className="flex items-start gap-2 justify-between mb-2 flex-col lg:flex-row">
         <div className="flex items-center gap-2">
           <BiSolidServer size={32} />
           <h1 className="text-2xl font-semibold select-none">Exploit Server</h1>
         </div>
         {featuresConfig.ipAddress.length > 0 && (
-          <span className="indicator-item badge badge-primary">
-            <b>IP Address:</b> <code>{featuresConfig.ipAddress}</code>
+          <span className="indicator-item badge badge-primary py-4">
+            <b>Host:</b> <code>{featuresConfig.ipAddress}</code>
+            <CopyIconButton
+              text={featuresConfig.ipAddress}
+              buttonClassName="btn btn-ghost hover:bg-white hover:text-primary btn-square btn-xs"
+              tooltip="Copy Host"
+              copiedTooltip="Copied!"
+            />
           </span>
         )}
       </div>
@@ -77,8 +151,9 @@ export const ExploitServer: React.FC = () => {
             suggest you to <b>keep this page open</b>.
           </p>
           <p className="text-info">
-            You will be able to visualize all the network interactions made to <code>/exploit/&lt;teamToken&gt;</code>.
-            Type your <i>team token</i> and click on <i>Connect</i> to start.
+            You will be able to visualize all the network interactions made to{" "}
+            <code>http://&lt;host&gt;/exploit/&lt;teamToken&gt;</code>. Type your <i>team token</i> and click on{" "}
+            <i>Connect</i> to start.
           </p>
           <div className="flex gap-2 mt-4">
             <form onSubmit={handleSubmit(connectToExploitServer)} className="flex flex-1 gap-4 space-y-4">

src/client/views/ExploitServer.tsx

@@ -34,7 +34,7 @@ export const Logs: React.FC = () => {
       </div>
       <div className="card bg-base-300 border border-base-300">
         <div className="card-body p-4">
-          <div className="card-title justify-between select-none">
+          <div className="card-title items-start justify-between mb-2 select-none flex flex-col lg:flex-row">
             <h2>Logcat</h2>
             <div className="flex gap-2">
               <button className="btn btn-info" onClick={dump}>

src/client/views/Logs.tsx

@@ -53,6 +53,7 @@ export class ManagerSingleton {
     const ipStatic = process.env.DROIDGROUND_IP_STATIC ?? undefined;
     const iface = process.env.DROIDGROUND_IP_IFACE ?? "";
     const ipAddress = ipStatic && ipStatic.length > 0 ? ipStatic : getIP(iface); // Either an empty string or the IP address
+    const backendPort = process.env.DROIDGROUND_PORT || 4242;
     // Check team-mode
     const teamNumEnv: any = process.env.DROIDGROUND_NUM_TEAMS ?? "";
     const teamNum: number = isNaN(teamNumEnv) || teamNumEnv.trim().length === 0 ? 0 : parseInt(teamNumEnv);
@@ -89,7 +90,7 @@ export class ManagerSingleton {
         fridaType: process.env.DROIDGROUND_FRIDA_TYPE === "full" ? "full" : "jail",
         exploitAppDuration:
           isNaN(exploitAppDuration) || exploitAppDuration.trim().length === 0 ? 10 : parseInt(exploitAppDuration),
-        ipAddress: ipAddress,
+        ipAddress: `${ipAddress}:${backendPort}`,
       },
       teams: teams,
       debugToken: crypto.randomBytes(64).toString("hex"),