fix(frontend): fix wave 2, motd, sftp, neoforge, ws auth, kill btn

apps/frontend/src/components/ui/servers/PanelServerActionButton.vue

@@ -1,5 +1,13 @@
 <template>
   <div class="flex flex-row items-center gap-2 rounded-lg">
+    <ButtonStyled v-if="showStopButton" type="standard" color="red">
+      <button :disabled="!canTakeAction" @click="killServer">
+        <div class="flex gap-1">
+          <SlashIcon class="h-5 w-5" />
+          <span>{{ killButtonText }}</span>
+        </div>
+      </button>
+    </ButtonStyled>
     <ButtonStyled v-if="showStopButton" type="standard" color="red">
       <button :disabled="!canTakeAction" @click="stopServer">
         <div class="flex gap-1">
@@ -35,7 +43,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
-import { PlayIcon, UpdatedIcon, StopCircleIcon } from "@modrinth/assets";
+import { PlayIcon, UpdatedIcon, StopCircleIcon, SlashIcon } from "@modrinth/assets";
 import { ButtonStyled } from "@modrinth/ui";
 
 const props = defineProps<{
@@ -44,7 +52,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: "action", action: "start" | "restart" | "stop"): void;
+  (e: "action", action: "start" | "restart" | "stop" | "kill"): void;
 }>();
 
 const ServerState = {
@@ -97,6 +105,10 @@ const stopButtonText = computed(() => {
   return currentState.value === ServerState.Stopping ? "Stopping..." : "Stop";
 });
 
+const killButtonText = computed(() => {
+  return currentState.value === ServerState.Stopping ? "Stopping..." : "Kill";
+});
+
 const updateState = (newState: ServerStateType) => {
   currentState.value = newState;
 };
@@ -120,6 +132,13 @@ const stopServer = () => {
   emit("action", "stop");
 };
 
+const killServer = () => {
+  if (!canTakeAction.value) return;
+
+  updateState(ServerState.Stopping);
+  emit("action", "kill");
+};
+
 watch(
   () => props.isOnline,
   (newValue) => {

apps/frontend/src/components/ui/servers/PanelTerminal.vue

@@ -283,7 +283,6 @@ onMounted(() => {
   nextTick(() => {
     updateItemHeights();
     setTimeout(scrollToBottom, 200);
-    console.log("s2b");
   });
   window.addEventListener("resize", updateClientHeight);
   window.addEventListener("keydown", handleKeydown);

apps/frontend/src/composables/pyroServers.ts

@@ -88,6 +88,8 @@ interface General {
   project?: Project;
   sftp_username: string;
   sftp_password: string;
+  sftp_host: string;
+  datacenter?: string;
 }
 
 interface Allocation {
@@ -317,7 +319,7 @@ const fetchConfigFile = async (fileName: string) => {
 
 const getMotd = async () => {
   try {
-    const props = (await fetchConfigFile("ServerProperties")) as any;
+    const props = await downloadFile("/server.properties");
     if (props) {
       const lines = props.split("\n");
       for (const line of lines) {
@@ -656,6 +658,7 @@ const modules: any = {
       }
       data.image = (await processImage(data.project?.icon_url)) ?? undefined;
       const motd = await getMotd();
+      console.log(motd);
       if (motd === "A Minecraft Server") {
         await setMotd(`§b${data.project?.title} §f♦ §aModrinth Servers`);
       }

apps/frontend/src/pages/servers/manage/[id].vue

@@ -195,14 +195,12 @@ const handleWebSocketMessage = (data: WSEvent) => {
       updateStats(data);
       break;
     case "auth-expiring":
+    case "auth-incorrect":
       reauthenticate();
       break;
     case "power-state":
       updatePowerState(data.state);
       break;
-    case "auth-incorrect":
-      isWSAuthIncorrect.value = true;
-      break;
     case "installation-result":
       handleInstallationResult(data);
       break;

apps/frontend/src/pages/servers/manage/[id]/options/info.vue

@@ -1,23 +1,17 @@
 <template>
   <div class="h-full w-full gap-2 overflow-y-auto">
-    <div
-      class="mb-4 flex h-full w-full items-center gap-2 rounded-xl border border-solid border-blue bg-bg-blue p-4 text-contrast"
-    >
-      <UnknownIcon class="h-8 w-8 text-blue" />
-      SFTP is currently unavailable. This feature is under construction and will be available soon.
-    </div>
     <div class="card">
       <div class="flex flex-col gap-4">
         <div class="flex justify-between">
           <label class="flex flex-col gap-2">
             <span class="text-lg font-bold text-contrast">SFTP</span>
             <span> SFTP is a way to access your server's files from outside of Modrinth. </span>
           </label>
-          <Button> Launch SFTP </Button>
+          <Button @click="openSftp"> Launch SFTP </Button>
         </div>
         <div class="flex w-full flex-col gap-2 rounded-xl bg-table-alternateRow p-4">
           <span class="font-bold text-contrast">
-            sftp://geezyippeedrat@us-lax2.kyros.pyro.host:2022/
+            {{ data?.sftp_host }}
           </span>
           <span class="text-xs uppercase text-secondary">server address</span>
         </div>
@@ -27,9 +21,22 @@
             <span class="text-xs uppercase text-secondary">username</span>
           </div>
           <div class="flex w-full flex-col gap-2 rounded-xl bg-table-alternateRow p-4">
-            <span class="font-bold text-contrast">
-              {{ data?.sftp_password }}
-            </span>
+            <div class="flex items-center justify-between">
+              <span
+                class="font-bold text-contrast hover:cursor-pointer"
+                :class="{ blur: !showPassword }"
+                @click="togglePassword"
+              >
+                {{ data?.sftp_password }}
+              </span>
+
+              <EyeIcon
+                v-if="showPassword"
+                class="h-5 w-5 hover:cursor-pointer"
+                @click="togglePassword"
+              />
+              <EyeOffIcon v-else class="h-5 w-5 hover:cursor-pointer" @click="togglePassword" />
+            </div>
             <span class="text-xs uppercase text-secondary">password</span>
           </div>
         </div>
@@ -57,8 +64,9 @@
 
 <script setup lang="ts">
 import { Button } from "@modrinth/ui";
-import { UnknownIcon } from "@modrinth/assets";
+import { EyeIcon, EyeOffIcon } from "@modrinth/assets";
 import type { Server } from "~/composables/pyroServers";
+
 const route = useNativeRoute();
 const serverId = route.params.id as string;
 
@@ -67,6 +75,15 @@ const props = defineProps<{
 }>();
 
 const data = computed(() => props.server.general);
+const showPassword = ref(false);
+
+const openSftp = () => {
+  window.open(`sftp://${data.value?.sftp_username}@${data.value?.sftp_host}`);
+};
+
+const togglePassword = () => {
+  showPassword.value = !showPassword.value;
+};
 
 const properties = [
   { name: "Server ID", value: serverId ?? "Unknown" },

apps/frontend/src/pages/servers/manage/[id]/options/loader.vue

@@ -237,25 +237,25 @@
             <div class="flex items-center gap-2">
               <div
                 class="rounded-xl bg-button-bg p-2"
-                :class="data.loader === 'Neoforge' ? '[&&]:bg-bg-green' : ''"
+                :class="data.loader === 'NeoForge' ? '[&&]:bg-bg-green' : ''"
               >
                 <UiServersLoaderIcon
                   loader="Neoforge"
                   class="[&&]:size-10"
-                  :class="data.loader === 'Neoforge' ? 'text-brand' : ''"
+                  :class="data.loader === 'NeoForge' ? 'text-brand' : ''"
                 />
               </div>
               <h1 class="m-0 text-xl font-extrabold leading-none text-contrast">Neoforge</h1>
               <span
-                v-if="data.loader === 'Neoforge'"
+                v-if="data.loader === 'NeoForge'"
                 class="rounded-full bg-bg-green p-1 px-2 text-sm font-semibold text-brand"
               >
                 Current
               </span>
             </div>
 
-            <Button @click="selectLoader('Neoforge')">
-              {{ data.loader === "Neoforge" ? "Reinstall" : "Install" }}
+            <Button @click="selectLoader('NeoForge')">
+              {{ data.loader === "NeoForge" ? "Reinstall" : "Install" }}
               <ChevronRightIcon />
             </Button>
           </div>

packages/ui/src/components/billing/PurchaseModal.vue

@@ -71,7 +71,7 @@
           /> -->
           <div class="flex justify-between h-24 gap-4">
             <button
-              v-for="loader in ['Vanilla', 'Fabric', 'Forge', 'Quilt', 'Neoforge']"
+              v-for="loader in ['Vanilla', 'Fabric', 'Forge', 'Quilt', 'NeoForge']"
               :key="loader"
               class="!w-full !h-full btn flex !flex-col !items-center !justify-between !pt-4 !pb-3"
               :style="{