center window and theme changes to webterm

Author: wh1te909

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "0.101.63",
+  "version": "0.101.64",
   "private": true,
   "productName": "Tactical RMM",
   "scripts": {

package.json

@@ -1,48 +1,28 @@
 import axios from "axios";
 import { openURL } from "quasar";
 import { router } from "@/router";
+import { getCenteredWindowOptions } from "@/utils/helpers";
 
 const baseUrl = "/agents";
 
 export function runTakeControl(agent_id) {
   const url = router.resolve(`/takecontrol/${agent_id}`).href;
   openURL(url, null, {
-    popup: true,
-    scrollbars: false,
-    location: false,
-    status: false,
-    toolbar: false,
-    menubar: false,
-    width: 1600,
-    height: 900,
+    ...getCenteredWindowOptions(1600, 900),
   });
 }
 
 export function runWebVNC(agent_id, port) {
   const url = router.resolve(`/webvnc/${agent_id}/${port}`).href;
   openURL(url, null, {
-    popup: true,
-    scrollbars: false,
-    location: false,
-    status: false,
-    toolbar: false,
-    menubar: false,
-    width: 1600,
-    height: 900,
+    ...getCenteredWindowOptions(1600, 900),
   });
 }
 
 export function openAgentWindow(agent_id) {
   const url = router.resolve(`/agents/${agent_id}`).href;
   openURL(url, null, {
-    popup: true,
-    scrollbars: false,
-    location: false,
-    status: false,
-    toolbar: false,
-    menubar: false,
-    width: 1600,
-    height: 900,
+    ...getCenteredWindowOptions(1600, 900),
   });
 }
 
@@ -51,14 +31,7 @@ export function runRemoteBackground(agent_id, agentPlatform) {
     `/remotebackground/${agent_id}?agentPlatform=${agentPlatform}`,
   ).href;
   openURL(url, null, {
-    popup: true,
-    scrollbars: false,
-    location: false,
-    status: false,
-    toolbar: false,
-    menubar: false,
-    width: 1280,
-    height: 900,
+    ...getCenteredWindowOptions(1280, 900),
   });
 }
 

src/api/agents.js

@@ -8,6 +8,8 @@ import type {
   TestRunURLActionResponse,
 } from "@/types/core/urlactions";
 
+import { getCenteredWindowOptions } from "@/utils/helpers";
+
 import type { CoreSetting } from "@/types/core/settings";
 
 const baseUrl = "/core";
@@ -85,14 +87,7 @@ export async function checkWebTermPerms(): Promise<{
 export function openWebTerminal(): void {
   const url: string = router.resolve("/webterm").href;
   openURL(url, undefined, {
-    popup: true,
-    scrollbars: false,
-    location: false,
-    status: false,
-    toolbar: false,
-    menubar: false,
-    width: 1280,
-    height: 720,
+    ...getCenteredWindowOptions(1280, 720),
   });
 }
 

src/api/core.ts

@@ -6,3 +6,28 @@ export function copyOutput(val: string) {
     notifySuccess("Copied to clipboard");
   });
 }
+
+export function getCenteredWindowOptions(width: number, height: number) {
+  const left =
+    typeof window === "undefined"
+      ? 0
+      : Math.round((window.screen.width - width) / 2);
+
+  const top =
+    typeof window === "undefined"
+      ? 0
+      : Math.round((window.screen.height - height) / 2);
+
+  return {
+    popup: true,
+    scrollbars: false,
+    location: false,
+    status: false,
+    toolbar: false,
+    menubar: false,
+    width,
+    height,
+    left,
+    top,
+  };
+}

src/utils/helpers.ts

@@ -45,18 +45,42 @@ onBeforeUnmount(() => {
 function setupXTerm() {
   term = new Terminal({
     convertEol: true,
-    fontFamily: "Menlo, Monaco, Courier New, monospace",
+    fontFamily: "Menlo, Monaco, 'SF Mono', 'Courier New', monospace",
     fontSize: 15,
     fontWeight: 400,
     cursorBlink: true,
+    scrollback: 50000,
     theme: {
-      background: "#333",
+      background: "#1d1f21",
+      foreground: "#c5c8c6",
+      cursor: "#c5c8c6",
+      cursorAccent: "#1d1f21",
+      selectionBackground: "rgba(255,255,255,0.18)",
+      black: "#1d1f21",
+      red: "#cc6666",
+      green: "#b5bd68",
+      yellow: "#f0c674",
+      blue: "#81a2be",
+      magenta: "#b294bb",
+      cyan: "#8abeb7",
+      white: "#c5c8c6",
+      brightBlack: "#666666",
+      brightRed: "#d54e53",
+      brightGreen: "#b9ca4a",
+      brightYellow: "#e7c547",
+      brightBlue: "#7aa6da",
+      brightMagenta: "#c397d8",
+      brightCyan: "#70c0b1",
+      brightWhite: "#eaeaea",
     },
   });
 
   term.loadAddon(fit);
   term.open(xtermContainer.value!);
   fit.fit();
+  requestAnimationFrame(() => {
+    term?.focus();
+  });
   term.onData((data) => {
     send(JSON.stringify({ action: "trmmcli.input", data: { input: data } }));
   });