Merge branch 'pyro' of github.com:/modrinth/code into pyro

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

@@ -35,12 +35,12 @@
           <div v-if="expandedMods[mod.project_id]" class="mt-2 flex items-center gap-2">
             <DropdownSelect
               id="version-select"
-              v-model="selectedVersion"
+              v-model="selectedVersions[mod.project_id]"
               name="version-select"
               :options="expandedMods[mod.project_id].versions"
               placeholder="Select version..."
             />
-            <Button icon-only @click="emits('select', mod, selectedVersion)">
+            <Button icon-only @click="emits('select', mod, selectedVersions[mod.project_id])">
               <ChevronRightIcon />
             </Button>
           </div>
@@ -127,7 +127,7 @@ const getVersions = async (projectId: string) => {
   return versions[projectId];
 };
 
-const selectedVersion = ref("");
+const selectedVersions = reactive<{ [key: string]: string }>({});
 
 const expandedMods = reactive<{ [key: string]: { expanded: boolean; versions: any[] } }>({});
 
@@ -138,8 +138,11 @@ const toggleMod = async (modId: string) => {
   expandedMods[modId].expanded = !expandedMods[modId].expanded;
   if (expandedMods[modId].expanded && expandedMods[modId].versions.length === 0) {
     expandedMods[modId].versions = await getVersions(modId);
+    // Select the first version by default
+    if (expandedMods[modId].versions.length > 0) {
+      selectedVersions[modId] = expandedMods[modId].versions[0];
+    }
   }
-  selectedVersion.value = "";
 };
 
 const loadMore = async () => {
@@ -159,8 +162,8 @@ const { reset } = useInfiniteScroll(scrollContainer, async () => {
 const resetList = () => {
   mods.value.hits = [];
   Object.keys(expandedMods).forEach((key) => delete expandedMods[key]);
+  Object.keys(selectedVersions).forEach((key) => delete selectedVersions[key]);
   page.value = 0;
-  selectedVersion.value = "";
   loadMods();
   reset();
 };

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

@@ -85,11 +85,11 @@
       <UiServersPoweredByPyro />
     </div>
 
-    <div v-else class="flex h-screen flex-col items-center justify-center">
-      <p class="text-lg font-bold">Get ready! We're preparing your server for you.</p>
-      <div class="h-1.5 w-full max-w-lg overflow-hidden rounded-xl bg-brand-highlight">
-        <div class="progress left-right h-full w-full bg-brand"></div>
-      </div>
+    <div v-else class="flex h-[calc(100vh-4.5rem)] flex-col items-center justify-center gap-4">
+      <BrandLogoAnimated />
+      <h1 class="m-0 font-bold">Get ready! Your server is being prepared</h1>
+      <p class="m-0 text-secondary">This will take a few moments.</p>
+      <UiCopyCode :text="`Server ID: ${serverId}`" />
     </div>
   </div>
 </template>
@@ -407,7 +407,6 @@ onMounted(() => {
 
 onUnmounted(() => {
   stopPolling();
-  socket.value?.close();
 });
 
 watch(
@@ -427,26 +426,6 @@ definePageMeta({
 </script>
 
 <style scoped>
-.progress {
-  animation: progress 1s infinite linear;
-}
-
-.left-right {
-  transform-origin: 0% 50%;
-}
-
-@keyframes progress {
-  0% {
-    transform: translateX(0) scaleX(0);
-  }
-  40% {
-    transform: translateX(0) scaleX(0.4);
-  }
-  100% {
-    transform: translateX(100%) scaleX(0.5);
-  }
-}
-
 @keyframes server-action-buttons-anim {
   0% {
     opacity: 0;

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

@@ -26,12 +26,10 @@
             class="flex w-full flex-col justify-center gap-2 rounded-xl bg-table-alternateRow p-4"
           >
             <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 class="font-bold text-contrast">
+                {{
+                  showPassword ? data?.sftp_password : "*".repeat(data?.sftp_password?.length ?? 0)
+                }}
               </span>
 
               <div class="flex flex-row items-center gap-1">
@@ -41,7 +39,10 @@
                   </button>
                 </ButtonStyled>
                 <ButtonStyled type="transparent">
-                  <button v-tooltip="'Show/hide SFTP password'" @click="togglePassword">
+                  <button
+                    v-tooltip="showPassword ? 'Hide password' : 'Show password'"
+                    @click="togglePassword"
+                  >
                     <EyeIcon v-if="showPassword" class="h-5 w-5 hover:cursor-pointer" />
                     <EyeOffIcon v-else class="h-5 w-5 hover:cursor-pointer" />
                   </button>

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

@@ -20,18 +20,18 @@
           <XIcon class="h-4 w-4" />
         </button>
       </div>
-      <p>
-        Choose the version of Minecraft you want to use for this server. You can change this later.
-      </p>
+      <p>Choose the version of Minecraft you want to use for this server.</p>
       <div class="flex flex-col gap-2">
         <DropdownSelect
           v-model="selectedMCVersion"
+          name="mcVersion"
           :options="mcVersions"
           placeholder="Select Minecraft version..."
         />
         <DropdownSelect
           v-if="selectedMCVersion && selectedLoader.toLowerCase() !== 'vanilla'"
           v-model="selectedLoaderVersion"
+          name="loaderVersion"
           :options="selectedLoaderVersions"
           placeholder="Select loader version..."
         />
@@ -409,54 +409,84 @@ const updateData = async () => {
 };
 updateData();
 
+const selectLoader = (loader: string) => {
+  selectedLoader.value = loader;
+  versionSelectModal.value.show();
+};
+
+const handleReinstallError = (error: any) => {
+  if (error instanceof PyroFetchError && error.statusCode === 429) {
+    addNotification({
+      group: "server",
+      title: "Cannot reinstall server",
+      text: "You are being rate limited. Please try again later.",
+      type: "error",
+    });
+  } else {
+    addNotification({
+      group: "server",
+      title: "Reinstall Failed",
+      text: "An unexpected error occurred while reinstalling. Please try again later.",
+      type: "error",
+    });
+  }
+};
+
 const reinstallCurrent = async () => {
   const projectId = data.value?.upstream?.project_id;
   if (!projectId) {
     throw new Error("Project ID not found");
   }
   const resolvedVersionIds = versionIds.value;
   const versionId = resolvedVersionIds.find((entry: any) => entry[version.value])?.[version.value];
-  await props.server.general?.reinstall(serverId, false, projectId, versionId);
-};
-
-const selectLoader = (loader: string) => {
-  selectedLoader.value = loader;
-  versionSelectModal.value.show();
+  try {
+    await props.server.general?.reinstall(serverId, false, projectId, versionId);
+  } catch (error) {
+    handleReinstallError(error);
+  }
 };
 
 const reinstallLoader = async (loader: string) => {
-  await props.server.general?.reinstall(
-    serverId,
-    true,
-    loader,
-    selectedMCVersion.value,
-    loader === "Vanilla" ? "" : selectedLoaderVersion.value,
-  );
-  emit("reinstall", {
-    loader,
-    lVersion: selectedLoaderVersion.value,
-    mVersion: selectedMCVersion.value,
-  });
-  await nextTick();
-  window.scrollTo(0, 0);
+  try {
+    await props.server.general?.reinstall(
+      serverId,
+      true,
+      loader,
+      selectedMCVersion.value,
+      loader === "Vanilla" ? "" : selectedLoaderVersion.value,
+    );
+    emit("reinstall", {
+      loader,
+      lVersion: selectedLoaderVersion.value,
+      mVersion: selectedMCVersion.value,
+    });
+    await nextTick();
+    window.scrollTo(0, 0);
+  } catch (error) {
+    handleReinstallError(error);
+  }
 };
 
 const reinstallNew = async (project: any, versionNumber: string) => {
   editModal.value.hide();
-  const versions = (await useBaseFetch(
-    `project/${project.project_id}/version`,
-    {},
-    false,
-    prodOverride,
-  )) as any;
-  const version = versions.find((x: any) => x.version_number === versionNumber);
+  try {
+    const versions = (await useBaseFetch(
+      `project/${project.project_id}/version`,
+      {},
+      false,
+      prodOverride,
+    )) as any;
+    const version = versions.find((x: any) => x.version_number === versionNumber);
 
-  if (!version?.id) {
-    throw new Error("Version not found");
+    if (!version?.id) {
+      throw new Error("Version not found");
+    }
+    await props.server.general?.reinstall(serverId, false, project.project_id, version.id);
+    emit("reinstall");
+    await nextTick();
+    window.scrollTo(0, 0);
+  } catch (error) {
+    handleReinstallError(error);
   }
-  await props.server.general?.reinstall(serverId, false, project.project_id, version.id);
-  emit("reinstall");
-  await nextTick();
-  window.scrollTo(0, 0);
 };
 </script>