FIX: server management validation & issues

.vscode/extensions.json

@@ -6,7 +6,7 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "Vue.volar"
+    "Vue.official"
   ],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
   "unwantedRecommendations": []

launcher/package.json

@@ -97,4 +97,4 @@
     "type": "git",
     "url": "git@github.com:stereum-dev/ethereum-node.git"
   }
-}
+}

launcher/public/output.css

@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
 /*
-! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -217,6 +217,8 @@ textarea {
   /* 1 */
   line-height: inherit;
   /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
   color: inherit;
   /* 1 */
   margin: 0;
@@ -240,9 +242,9 @@ select {
 */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -524,6 +526,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 ::-ms-backdrop{
@@ -574,6 +580,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 ::backdrop{
@@ -624,6 +634,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 ::-webkit-scrollbar {
@@ -965,10 +979,6 @@ video {
   top: 5rem;
 }
 
-.top-5{
-  top: 1.25rem;
-}
-
 .top-8{
   top: 2rem;
 }
@@ -981,10 +991,6 @@ video {
   top: 7rem;
 }
 
-.-z-10{
-  z-index: -10;
-}
-
 .z-0{
   z-index: 0;
 }

launcher/src/components/UI/server-management/MultiServerScreen.vue

@@ -4,7 +4,10 @@ import ServerHeader from './components/ServerHeader.vue';
     class="w-full h-full absolute inset-0 grid grid-cols-24 grid-rows-7 bg-[#336666] z-10 p-2 rounded-md divide-y-2 divide-gray-300"
   >
     <SwitchAnimation
-      v-if="(serverStore.isServerAnimationActive || serverStore.connectingProcess) && !serverStore.errorMsgExists"
+      v-if="
+        (serverStore.isServerAnimationActive || serverStore.connectingProcess) &&
+        !serverStore.errorMsgExists
+      "
       @cancel-login="cancelLoginHandler"
     />
     <ServerHeader @tab-picker="tabPicker" />
@@ -28,7 +31,11 @@ import ServerHeader from './components/ServerHeader.vue';
       @remove-handler="removeServerHandler"
       @close-window="closeWindow"
     />
-    <ErrorModal v-if="serverStore.errorMsgExists" :description="serverStore.error" @close-window="closeErrorDialog" />
+    <ErrorModal
+      v-if="serverStore.errorMsgExists"
+      :description="serverStore.error"
+      @close-window="closeErrorDialog"
+    />
   </div>
 </template>
 
@@ -53,7 +60,6 @@ const { login, remove, loadStoredConnections } = useServerLogin();
 const router = useRouter();
 const keyLocation = ref("");
 let loginAbortController = new AbortController();
-console.log("Server Management Screen", loginAbortController);
 const serverBodyComponentKey = ref(0);
 
 watchEffect(() => {
@@ -113,6 +119,8 @@ const loginHandler = async () => {
       serverStore.connectingProcess = true;
       serverStore.isServerAnimationActive = true;
       await ControlService.logout();
+      serverStore.loginState = {};
+      // serverStore.selectedServerToConnect
       await ControlService.stopShell();
       await login(loginAbortController.signal);
 
@@ -179,7 +187,9 @@ const serverHandler = (server) => {
     server.isSelected = true;
   }
 
-  serverStore.savedServers.savedConnections = [...serverStore.savedServers.savedConnections];
+  serverStore.savedServers.savedConnections = [
+    ...serverStore.savedServers.savedConnections,
+  ];
 };
 
 //Change password handling
@@ -211,10 +221,17 @@ const removeServerHandler = async () => {
   serverStore.isRemoveProcessing = true;
   serverStore.savedServers.savedConnections = serverStore.savedServers.savedConnections.filter(
     (item) =>
-      item.host !== serverStore.selectedServerToConnect?.host && item.name !== serverStore.selectedServerToConnect?.name
+      item.host !== serverStore.selectedServerToConnect?.host &&
+      item.name !== serverStore.selectedServerToConnect?.name
   );
 
   await remove();
+  serverStore.selectedServerToConnect = null;
+  serverStore.loginState.hostName = "";
+  serverStore.loginState.ip = "";
+  serverStore.loginState.port = "";
+  serverStore.loginState.username = "";
+  serverStore.loginState.useAuth = false;
   serverStore.isRemoveProcessing = false;
   serverStore.isRemoveModalActive = false;
   serverBodyComponentKey.value++;
@@ -229,7 +246,9 @@ const readSSHKeyFile = async () => {
 const confirmDelete = async (key) => {
   serverStore.sshKeys = serverStore.sshKeys.filter((item) => item !== key);
   try {
-    await ControlService.writeSSHKeyFile(serverStore.sshKeys.filter((item) => item !== key));
+    await ControlService.writeSSHKeyFile(
+      serverStore.sshKeys.filter((item) => item !== key)
+    );
     await readSSHKeyFile();
   } catch (err) {
     console.log(err);

launcher/src/components/UI/server-management/components/ServerBody.vue

@@ -6,15 +6,23 @@
       class="col-start-14 col-span-full row-start-1 row-span-full p-1 grid grid-cols-12 grid-rows-12 bg-[#1b3231] rounded-md"
     >
       <LoginPanel v-if="isLoginActive" @server-login="serverLogin" />
-      <DetailsPanel v-if="isDetailsActive" @change-password="changePassword" @set-avatar="setServerAvatar" />
+      <DetailsPanel
+        v-if="isDetailsActive"
+        @change-password="changePassword"
+        @set-avatar="setServerAvatar"
+      />
       <UpdatePanel v-if="isUpdateActive" />
       <SshPanel v-if="isSSHActive" @file-upload="fileUpload" @delete-key="deleteKey" />
       <SettingsPanel v-if="isSettingsActive" />
     </div>
     <div
       class="col-start-1 col-end-14 row-start-1 row-span-full p-3 grid grid-cols-12 grid-rows-12 bg-[#1b3231] rounded-md"
     >
-      <ServerPanel @select-server="selectServer" @server-login="addNewServer" @quick-login="quickLogin" />
+      <ServerPanel
+        @select-server="selectServer"
+        @server-login="addNewServer"
+        @quick-login="quickLogin"
+      />
     </div>
   </div>
 </template>
@@ -32,17 +40,34 @@ import { useControlStore } from "@/store/theControl";
 import { computed, onUnmounted, watch } from "vue";
 import { useRoute } from "vue-router";
 
-const emit = defineEmits(["selectServer", "serverLogin", "changePassword", "fileUpload", "deleteKey", "quickLogin"]);
+const emit = defineEmits([
+  "selectServer",
+  "serverLogin",
+  "changePassword",
+  "fileUpload",
+  "deleteKey",
+  "quickLogin",
+]);
 
 const serverStore = useServers();
 const controlStore = useControlStore();
 const route = useRoute();
 
-const isLoginActive = computed(() => route.path === "/login" || serverStore.isServerLoginActive);
-const isSSHActive = computed(() => route.path !== "/login" && serverStore.isServerSSHActive);
-const isDetailsActive = computed(() => route.path !== "/login" && serverStore.isServerDetailsActive);
-const isUpdateActive = computed(() => route.path !== "/login" && serverStore.isServerUpdateActive);
-const isSettingsActive = computed(() => route.path !== "/login" && serverStore.isServerSettingsActive);
+const isLoginActive = computed(
+  () => route.path === "/login" || serverStore.isServerLoginActive
+);
+const isSSHActive = computed(
+  () => route.path !== "/login" && serverStore.isServerSSHActive
+);
+const isDetailsActive = computed(
+  () => route.path !== "/login" && serverStore.isServerDetailsActive
+);
+const isUpdateActive = computed(
+  () => route.path !== "/login" && serverStore.isServerUpdateActive
+);
+const isSettingsActive = computed(
+  () => route.path !== "/login" && serverStore.isServerSettingsActive
+);
 
 watch(
   () => serverStore.selectedServerConnection,
@@ -92,7 +117,11 @@ const selectServer = (server) => {
 };
 
 const addNewServer = () => {
+  serverStore.savedServers.savedConnections.forEach((s) => {
+    if (s.isSelected) s.isSelected = false;
+  });
   if (serverStore.connectExistingServer) {
+    serverStore.addNewServer = false;
     serverStore.connectExistingServer = false;
     serverStore.selectServerToConnect = null;
   }