From c4ababfab85e1e99a681c58d4d9b0c7fd8636834 Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Fri, 12 Apr 2024 13:05:04 +0200
Subject: [PATCH 01/14] REMOVE: useless

---
 .vscode/extensions.json        | 13 -------------
 .vscode/settings.json          | 20 --------------------
 .vscode/snippets.code-snippets | 25 -------------------------
 3 files changed, 58 deletions(-)
 delete mode 100644 .vscode/extensions.json
 delete mode 100644 .vscode/settings.json
 delete mode 100644 .vscode/snippets.code-snippets

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
deleted file mode 100644
index 30eb5cf6f..000000000
--- a/.vscode/extensions.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
-  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
-
-  // List of extensions which should be recommended for users of this workspace.
-  "recommendations": [
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "Vue.volar"
-  ],
-  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
-  "unwantedRecommendations": []
-}
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 3150ee826..000000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
-  },
-  "editor.tabSize": 2,
-  "editor.detectIndentation": false,
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "nuxt.isNuxtApp": false,
-  "vue.features.codeActions.enable": false,
-  "vue.codeActions.enabled": false,
-  "vetur.format.enable": false,
-  "[vue]": {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "vue3snippets.enable-compile-vue-file-on-did-save-code": true,
-  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,
-  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false
-}
diff --git a/.vscode/snippets.code-snippets b/.vscode/snippets.code-snippets
deleted file mode 100644
index 18aec7bcb..000000000
--- a/.vscode/snippets.code-snippets
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  // Place your ethereum-node workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
-  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
-  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
-  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
-  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
-  // Placeholders with the same ids are connected.
-  // Example:
-  // "Print to console": {
-  // 	"scope": "javascript,typescript",
-  // 	"prefix": "log",
-  // 	"body": [
-  // 		"console.log('$1');",
-  // 		"$2"
-  // 	],
-  // 	"description": "Log output to console"
-  // }
-
-  "Import ControlService": {
-    "scope": "javascript,typescript,vue",
-    "prefix": "ics",
-    "body": ["import ControlService from '@/store/ControlService';", "$2"],
-    "description": "Import ControlService"
-  }
-}

From 8e69f564438aa126aec98a6ff3c76b012ba7107a Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Fri, 12 Apr 2024 13:06:36 +0200
Subject: [PATCH 02/14] FIX: login form validation

---
 launcher/public/output.css                    |  44 +--
 .../components/login-form/LoginForm.vue       | 315 +++++++++---------
 2 files changed, 183 insertions(+), 176 deletions(-)

diff --git a/launcher/public/output.css b/launcher/public/output.css
index bb6145561..dfbfe69ea 100755
--- a/launcher/public/output.css
+++ b/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 {
@@ -757,10 +771,6 @@ video {
   bottom: -2rem;
 }
 
-.-left-12{
-  left: -3rem;
-}
-
 .-left-\[1px\]{
   left: -1px;
 }
@@ -793,10 +803,6 @@ video {
   top: -5rem;
 }
 
-.-top-7{
-  top: -1.75rem;
-}
-
 .-top-8{
   top: -2rem;
 }
@@ -881,10 +887,6 @@ video {
   left: 8rem;
 }
 
-.left-4{
-  left: 1rem;
-}
-
 .left-\[1\.3rem\]{
   left: 1.3rem;
 }
@@ -3308,11 +3310,6 @@ video {
   background-color: rgb(22 23 23 / var(--tw-bg-opacity));
 }
 
-.bg-\[\#16181b\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(22 24 27 / var(--tw-bg-opacity));
-}
-
 .bg-\[\#171D22\]{
   --tw-bg-opacity: 1;
   background-color: rgb(23 29 34 / var(--tw-bg-opacity));
@@ -3373,11 +3370,6 @@ video {
   background-color: rgb(27 29 31 / var(--tw-bg-opacity));
 }
 
-.bg-\[\#1b1d20\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(27 29 32 / var(--tw-bg-opacity));
-}
-
 .bg-\[\#1b3231\]{
   --tw-bg-opacity: 1;
   background-color: rgb(27 50 49 / var(--tw-bg-opacity));
diff --git a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
index b898546a8..f7a0c2fa6 100644
--- a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
+++ b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
@@ -1,5 +1,3 @@
-import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted, watch, watchEffect, onUnmounted } from
-'vue';
 <template>
   <div
     class="w-full h-full col-start-1 col-span-full row-start-1 row-span-full bg-[#1b1b1d] rounded-md grid grid-cols-12 grid-rows-12 p-2 pt-0"
@@ -94,7 +92,7 @@ import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted
             class="w-6 h-6 col-start-11 col-span-full self-center p-[2px] cursor-pointer hover:scale-110 active:scale-100 transition-all ease-in-out duration-200 justify-self-center"
             src="/img/icon/server-management-icons/local-lan.png"
             alt="Scanner Icon"
-            @click="IpScanLan1"
+            @click="IpScanner"
           />
           <span
             v-else
@@ -141,7 +139,7 @@ import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted
 
         <label
           for="AcceptConditions"
-          class="col-start-6 col-end-9 row-start-2 row-span-full self-center relative h-6 w-12 cursor-pointer [-webkit-tap-highlight-color:_transparent] flex justify-center items-center"
+          class="col-start-6 col-end-9 row-start-2 row-span-full self-center relative h-6 w-12 cursor-pointer flex justify-center items-center"
         >
           <input
             id="AcceptConditions"
@@ -220,6 +218,7 @@ import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted
           class="h-8 self-center col-start-1 col-end-12 row-start-2 row-span-2 overflow-hidden appearance-none border rounded-l-md w-full py-1 px-2 text-gray-800 text-sm font-semibold leading-tight focus:outline-none focus:shadow-outline bg-gray-200"
           :disabled="!useSSHKey"
           required
+          @change="toggleSSH"
         />
         <label
           for="keypath-file"
@@ -252,13 +251,14 @@ import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted
       <div class="col-start-1 col-span-full row-start-6 row-span-1 flex justify-center items-center">
         <button
           v-if="!serverStore.connectingProcess"
-          class="w-full h-[50px] hover:bg-teal-700 text-gray-800 hover:text-white font-bold py-1 px-4 rounded-md focus:outline-none focus:shadow-outline active:scale-95 transition-all ease-in-out duration-100 shadow-lg shadow-black active:shadow-none text-md uppercase"
+          class="w-full h-[50px] font-bold py-1 px-4 rounded-md focus:outline-none focus:shadow-outline transition-all ease-in-out duration-100 shadow-lg shadow-black text-md uppercase"
           :class="
-            serverStore.isIpScannerModalActive || buttonDisabled
-              ? 'bg-gray-400 opacity-50 pointer-events-none '
-              : 'bg-gray-200'
+            buttonDisabled
+              ? 'bg-gray-600 text-gray-200 cursor-not-allowed'
+              : 'bg-gray-300 hover:text-white hover:bg-teal-700 text-gray-800 active:scale-95 active:shadow-none'
           "
           type="button"
+          :disabled="buttonDisabled"
           @click="internalLogin"
         >
           {{ $t("multiServer.login") }}
@@ -280,31 +280,47 @@ import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted
 </template>
 
 <script setup>
-import { computed, onUnmounted, ref, watchEffect } from "vue";
+import { computed, ref, watch, onUnmounted, watchEffect } from "vue";
 import { useServers } from "@/store/servers";
-import { useServerLogin } from "@/composables/useLogin";
-import ControlService from "@/store/ControlService";
 import { useRouter } from "vue-router";
+import ControlService from "@/store/ControlService";
+import { useServerLogin } from "@/composables/useLogin";
 
+//Props and Emits
 const emit = defineEmits(["serverLogin"]);
 
+//Stores
 const serverStore = useServers();
+const router = useRouter();
 
+//Composables
 const { add } = useServerLogin();
 
-const hovered = ref(false);
-const removeHovered = ref(false);
-const addHovered = ref(false);
-const message = ref("");
+//Refs
 const serverNameError = ref("");
 const ipError = ref("");
 const usernameError = ref("");
 const passwordError = ref("");
 const sshError = ref("");
+const message = ref("");
 const devices = ref([]);
-const buttonDisabled = ref(false);
+const hovered = ref(false);
+const removeHovered = ref(false);
+const addHovered = ref(false);
 
-const router = useRouter();
+//Computed
+
+const buttonDisabled = computed(() => {
+  return (
+    serverNameError.value.length > 0 ||
+    ipError.value.length > 0 ||
+    usernameError.value.length > 0 ||
+    (useSSHKey.value && sshError.value.length > 0) ||
+    (!useSSHKey.value && passwordError.value.length > 0)
+  );
+});
+
+const useSSHKey = computed(() => serverStore.loginState.useAuth);
 
 const getTrashImg = computed(() => {
   if (hovered.value) {
@@ -314,20 +330,12 @@ const getTrashImg = computed(() => {
   }
 });
 
-const useSSHKey = computed(() => {
-  if (serverStore.loginState.useAuth) {
-    return true;
-  } else {
-    return false;
-  }
-});
-
 const addButtonDisabled = computed(() => {
   const existingServer = serverStore.savedServers?.savedConnections?.some(
     (item) => item.host === serverStore.selectedServerToConnect?.host
   );
 
-  if (existingServer) {
+  if (existingServer || buttonDisabled.value) {
     return true;
   } else {
     return false;
@@ -342,119 +350,64 @@ const removeButtonDisabled = computed(() => {
   }
 });
 
-watchEffect(() => {
-  if (serverStore.connectExistingServer) {
-    serverStore.loginState.hostName = serverStore.selectedServerToConnect.name;
-    serverStore.loginState.ip = serverStore.selectedServerToConnect.host;
-    serverStore.loginState.port = serverStore.selectedServerToConnect.port;
-    serverStore.loginState.username = serverStore.selectedServerToConnect.user;
-    serverStore.loginState.useAuth = serverStore.selectedServerToConnect.useAuthKey;
-    serverStore.loginState.keyPath = serverStore.selectedServerToConnect.keylocation;
-    serverStore.loginState.password = "";
-    serverStore.loginState.passphrase = "";
-  } else {
-    serverStore.selectedServerToConnect = null;
-    serverStore.loginState.hostName = "";
-    serverStore.loginState.ip = "";
-    serverStore.loginState.port = "";
-    serverStore.loginState.username = "";
-    serverStore.loginState.useAuth = false;
-    serverStore.loginState.keyPath = "";
-    serverStore.loginState.password = "";
-    serverStore.loginState.passphrase = "";
-  }
-});
-
-watchEffect(() => {
-  if (!useSSHKey.value && serverStore.loginState.password === "") {
-    buttonDisabled.value = true;
-  } else {
-    buttonDisabled.value = false;
-  }
-});
-
-// Lifecycle
+//*********** Methods ***********//
 
-onUnmounted(() => {
-  serverStore.loginState.hostName = "";
-  serverStore.loginState.ip = "";
-  serverStore.loginState.port = "";
-  serverStore.loginState.username = "";
-  serverStore.loginState.useAuth = false;
-  serverStore.loginState.keyPath = "";
-  serverStore.loginState.password = "";
-  serverStore.loginState.passphrase = "";
-  serverStore.connectExistingServer = false;
-  serverStore.selectedServerToConnect = null;
-});
-
-// Methods
-const handleFileSelect = (event) => {
-  const selectedFile = event.target.files[0];
-  if (selectedFile) {
-    if (selectedFile.size > 0) {
-      serverStore.loginState.keyPath = selectedFile.path;
-    } else {
-      serverStore.loginState.keyPath = "";
-      message.value = "Selected file is empty.";
-    }
+const toggleSSH = () => {
+  serverStore.loginState.useAuth = !serverStore.loginState.useAuth;
+  if (useSSHKey.value) {
+    serverStore.loginState.password = "";
+    validateSSHKeyPath();
   } else {
     serverStore.loginState.keyPath = "";
+    validatePassword();
   }
 };
 
+// Validation functions
+
 const validateServerName = () => {
-  if (!serverStore.loginState.hostName) {
-    serverNameError.value = "Server name is required.";
-    return false;
-  }
-  serverNameError.value = "";
-  return true;
+  serverNameError.value = serverStore.loginState.hostName.trim() ? "" : "Server name is required.";
 };
 
-const validateIPorHostname = () => {
-  const ipRegex =
-    /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
-
-  const hostnameRegex = /^[a-zA-Z0-9.-]+$/;
+const validateIP = () => {
+  const ipPattern = /^[0-9]{1,3}(\.[0-9]{1,3}){3}$/; // Simplified pattern for IP addresses
+  ipError.value = ipPattern.test(serverStore.loginState.ip.trim()) ? "" : "Invalid IP address.";
+};
 
-  const input = serverStore.loginState.ip;
+const validateUsername = () => {
+  usernameError.value = serverStore.loginState.username.trim() ? "" : "Username is required.";
+};
 
-  if (ipRegex.test(input.trim()) || hostnameRegex.test(input.trim())) {
-    ipError.value = "";
-    return true;
-  } else {
-    ipError.value = "Invalid IP address or hostname.";
-    return false;
-  }
+const validateSSHKeyPath = () => {
+  sshError.value = serverStore.loginState.keyPath.trim() ? "" : "SSH key path is required.";
 };
 
-const validateUsername = () => {
-  if (!serverStore.loginState.username) {
-    usernameError.value = "Username is required.";
-    return false;
-  }
-  usernameError.value = "";
-  return true;
+const validatePassword = () => {
+  passwordError.value = serverStore.loginState.password.trim() ? "" : "Password is required.";
 };
 
-const validateSshKey = () => {
-  if (serverStore.loginState.keyPath) {
-    sshError.value = "";
-    return true;
+const internalLogin = () => {
+  if (!buttonDisabled.value) {
+    serverStore.isServerAnimationActive = true;
+    serverStore.connectingProcess = true;
+    emit("serverLogin");
   } else {
-    sshError.value = "SSH key path is required.";
-    return false;
+    router.push("/login");
   }
 };
 
-const validatePassword = () => {
-  if (serverStore.loginState.password) {
-    passwordError.value = "";
-    return true;
+// Methods
+const handleFileSelect = (event) => {
+  const selectedFile = event.target.files[0];
+  if (selectedFile) {
+    if (selectedFile.size > 0) {
+      serverStore.loginState.keyPath = selectedFile.path;
+    } else {
+      serverStore.loginState.keyPath = "";
+      message.value = "Selected file is empty.";
+    }
   } else {
-    passwordError.value = "Password is required.";
-    return false;
+    serverStore.loginState.keyPath = "";
   }
 };
 
@@ -464,38 +417,11 @@ const changeLabel = () => {
   }
 };
 
-const internalLogin = async () => {
-  serverStore.isServerAnimationActive = true;
-  serverStore.connectingProcess = true;
-  serverNameError.value = "";
-  ipError.value = "";
-  usernameError.value = "";
-  passwordError.value = "";
-  sshError.value = "";
-
-  let isValid = true;
-  isValid = isValid && validateServerName();
-  isValid = isValid && validateIPorHostname();
-  isValid = isValid && validateUsername();
-
-  if (useSSHKey.value) {
-    isValid = isValid && validateSshKey();
-  } else {
-    isValid = isValid && validatePassword();
-  }
-
-  if (isValid) {
-    emit("serverLogin");
-  } else {
-    serverStore.isServerAnimationActive = false;
-    router.push("/login");
-  }
-};
-
-const IpScanLan1 = async () => {
+const IpScanner = async () => {
   serverStore.isIpScannerModalActive = true;
   try {
     let res = await ControlService.IpScanLan();
+    console.log(res);
     devices.value = res;
     if (devices.value.length > 0) {
       const ip = devices.value[0].ip;
@@ -505,16 +431,105 @@ const IpScanLan1 = async () => {
       serverStore.isIpScannerModalActive = false;
     }
   } catch (error) {
-    console.error("An error occurred:", error);
+    console.error("An error occurred during IP scanning:", error);
+  } finally {
+    serverStore.isIpScannerModalActive = false;
   }
 };
 
 const saveServer = async () => {
   await add();
-  //reload the page
 };
 
 const removeServer = () => {
   serverStore.isRemoveModalActive = true;
 };
+
+// Watchers
+watch(
+  () => serverStore.loginState.hostName,
+  () => validateServerName()
+);
+watch(
+  () => serverStore.loginState.ip,
+  () => validateIP()
+);
+watch(
+  () => serverStore.loginState.username,
+  () => validateUsername()
+);
+watch(
+  () => serverStore.loginState.keyPath,
+  () => {
+    if (useSSHKey.value) {
+      validateSSHKeyPath();
+    }
+  }
+);
+watch(
+  () => serverStore.loginState.password,
+  () => {
+    if (!useSSHKey.value) {
+      validatePassword();
+    }
+  }
+);
+
+watch(
+  () => useSSHKey.value,
+  (newVal) => {
+    if (newVal) {
+      serverStore.loginState.password = "";
+      validateSSHKeyPath();
+    } else {
+      serverStore.loginState.keyPath = "";
+      validatePassword();
+    }
+  }
+);
+
+// Handle existing server data
+watchEffect(() => {
+  if (serverStore.connectExistingServer) {
+    serverStore.loginState.hostName = serverStore.selectedServerToConnect.name;
+    serverStore.loginState.ip = serverStore.selectedServerToConnect.host;
+    serverStore.loginState.port = serverStore.selectedServerToConnect.port;
+    serverStore.loginState.username = serverStore.selectedServerToConnect.user;
+    serverStore.loginState.useAuth = serverStore.selectedServerToConnect.useAuthKey;
+    serverStore.loginState.keyPath = serverStore.selectedServerToConnect.keylocation;
+    serverStore.loginState.password = "";
+    serverStore.loginState.passphrase = "";
+
+    validateServerName();
+    validateIP();
+    validateUsername();
+    useSSHKey.value ? validateSSHKeyPath() : validatePassword();
+  } else {
+    // Reset the form
+    serverStore.selectedServerToConnect = null;
+    serverStore.loginState.hostName = "";
+    serverStore.loginState.ip = "";
+    serverStore.loginState.port = "";
+    serverStore.loginState.username = "";
+    serverStore.loginState.useAuth = false;
+    serverStore.loginState.keyPath = "";
+    serverStore.loginState.password = "";
+    serverStore.loginState.passphrase = "";
+  }
+});
+
+// Lifecycle
+
+onUnmounted(() => {
+  serverStore.loginState.hostName = "";
+  serverStore.loginState.ip = "";
+  serverStore.loginState.port = "";
+  serverStore.loginState.username = "";
+  serverStore.loginState.useAuth = false;
+  serverStore.loginState.keyPath = "";
+  serverStore.loginState.password = "";
+  serverStore.loginState.passphrase = "";
+  serverStore.connectExistingServer = false;
+  serverStore.selectedServerToConnect = null;
+});
 </script>

From 7d7d39e64e0ee6e89dbf186a62cc74a191e1fa47 Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Fri, 12 Apr 2024 13:50:52 +0200
Subject: [PATCH 03/14] ADD: empty from validation

---
 .../UI/server-management/components/login-form/LoginForm.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
index f7a0c2fa6..e1aaf1bd4 100644
--- a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
+++ b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
@@ -316,7 +316,10 @@ const buttonDisabled = computed(() => {
     ipError.value.length > 0 ||
     usernameError.value.length > 0 ||
     (useSSHKey.value && sshError.value.length > 0) ||
-    (!useSSHKey.value && passwordError.value.length > 0)
+    (!useSSHKey.value && passwordError.value.length > 0) ||
+    serverStore.loginState.hostName === "" ||
+    serverStore.loginState.ip === "" ||
+    serverStore.loginState.username === ""
   );
 });
 

From 456af02fd001170da421119cde8c02b994c544d9 Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Mon, 15 Apr 2024 17:28:33 +0200
Subject: [PATCH 04/14] REFACTOR: login form

---
 launcher/package.json                         |   4 +-
 .../icon/server-management-icons/write.png    | Bin 0 -> 6334 bytes
 .../components/login-form/LoginForm.vue       | 321 +++++++++---------
 3 files changed, 160 insertions(+), 165 deletions(-)
 create mode 100755 launcher/public/img/icon/server-management-icons/write.png

diff --git a/launcher/package.json b/launcher/package.json
index a4b5cffc1..8699aa72e 100755
--- a/launcher/package.json
+++ b/launcher/package.json
@@ -48,6 +48,7 @@
     "semver": "^7.6.0",
     "ssh2": "^1.1.0",
     "swiper": "^11.0.6",
+    "vee-validate": "^4.12.6",
     "vue": "^3.2.33",
     "vue-i18n": "9.2.2",
     "vue-router": "^4.0.15",
@@ -57,7 +58,8 @@
     "xterm": "^5.3.0",
     "xterm-addon-attach": "^0.9.0",
     "xterm-addon-fit": "^0.8.0",
-    "yaml": "^2.2.1"
+    "yaml": "^2.2.1",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.2",
diff --git a/launcher/public/img/icon/server-management-icons/write.png b/launcher/public/img/icon/server-management-icons/write.png
new file mode 100755
index 0000000000000000000000000000000000000000..782c40dbfca507663a6caf39fd93bbee6b71f4b5
GIT binary patch
literal 6334
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

literal 0
HcmV?d00001

diff --git a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
index 8f30c7f00..f29783be5 100644
--- a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
+++ b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
@@ -7,6 +7,7 @@
     </div>
     <form
       class="w-full h-full col-start-1 col-span-full row-start-3 row-span-full grid grid-cols-12 grid-rows-6 space-y-1"
+      @submit.prevent="onSubmit"
     >
       <div class="col-start-1 col-span-full row-start-1 row-span-1 grid grid-cols-12 grid-rows-3">
         <label
@@ -22,13 +23,14 @@
           :placeholder="`${$t('multiServer.serverName')}`"
           class="h-8 self-center col-start-1 col-end-10 row-start-2 row-span-2 shadow appearance-none border rounded w-full py-1 px-2 text-gray-800 text-sm font-semibold leading-tight focus:outline-none focus:shadow-outline bg-gray-200"
           required
+          @change="validateForm"
         />
 
         <div
           class="w-full h-full col-start-10 col-span-full row-start-2 row-span-2 flex justify-evenly items-center relative"
         >
           <img
-            class="w-8 hover:scale-110 active:scale-100 transition-all ease-in-out duration-200 cursor-pointer self-center border-4 border-gray-400 rounded-full shadow-md shadow-[#141414]"
+            class="w-7 hover:scale-110 active:scale-100 transition-all ease-in-out duration-200 cursor-pointer self-center border-4 border-gray-400 rounded-full shadow-md shadow-[#141414]"
             :src="getTrashImg"
             alt=""
             :class="removeButtonDisabled ? 'opacity-50 pointer-events-none ' : ''"
@@ -49,7 +51,7 @@
           </div>
 
           <img
-            class="w-8 hover:scale-110 active:scale-100 transition-all ease-in-out duration-200 cursor-pointer self-center border-4 border-gray-400 rounded-full shadow-md shadow-[#141414]"
+            class="w-7 hover:scale-110 active:scale-100 transition-all ease-in-out duration-200 cursor-pointer self-center border-4 border-gray-400 rounded-full shadow-md shadow-[#141414]"
             :class="addButtonDisabled ? 'opacity-50 pointer-events-none ' : ''"
             src="/img/icon/server-management-icons/plus-icon.png"
             alt="icon"
@@ -86,6 +88,7 @@
             placeholder="114.72.86.90"
             class="h-8 self-center col-start-1 col-end-11 shadow appearance-none border rounded w-full py-1 px-2 text-gray-800 text-sm font-semibold leading-tight focus:outline-none focus:shadow-outline bg-gray-200"
             required
+            @change="validateForm"
           />
           <img
             v-if="!serverStore.isIpScannerModalActive"
@@ -129,6 +132,7 @@
           placeholder="root"
           class="h-8 self-center col-start-1 col-span-full row-start-2 row-span-2 shadow appearance-none border rounded w-full py-1 px-2 text-gray-800 text-sm font-semibold leading-tight focus:outline-none focus:shadow-outline bg-gray-200"
           required
+          @change="validateForm"
         />
       </div>
       <div class="col-start-7 col-span-full row-start-3 row-span-1 grid grid-cols-12 grid-rows-3">
@@ -146,7 +150,7 @@
             v-model="serverStore.loginState.useAuth"
             type="checkbox"
             class="peer sr-only [&:checked_+_span_svg[data-checked-icon]]:block [&:checked_+_span_svg[data-unchecked-icon]]:hidden bg-gray-200"
-            @change="changeLabel"
+            @change="toggleSSH"
           />
 
           <span
@@ -185,25 +189,10 @@
         </label>
       </div>
 
-      <div v-if="!useSSHKey" class="col-start-1 col-span-full row-start-4 row-span-1 grid grid-cols-12 grid-rows-3">
-        <label
-          for="password"
-          class="col-start-1 col-span-full row-start-1 row-span-1 block text-gray-300 text-xs font-bold"
-          :class="passwordError ? 'text-red-500' : 'text-gray-300'"
-          >{{ passwordError ? passwordError : $t("multiServer.pass") }}</label
-        >
-        <input
-          id="password"
-          v-model="serverStore.loginState.password"
-          type="password"
-          class="h-8 self-center col-start-1 col-span-full row-start-2 row-span-2 shadow appearance-none border rounded w-full py-1 px-2 text-gray-800 text-sm font-semibold leading-tight focus:outline-none focus:shadow-outline bg-gray-200"
-          placeholder="******************"
-          :disabled="useSSHKey"
-          required
-          @keydown.enter="internalLogin"
-        />
-      </div>
-      <div v-if="useSSHKey" class="col-start-1 col-span-full row-start-4 row-span-1 grid grid-cols-12 grid-rows-3">
+      <div
+        v-if="useSSHKey && !usePassword"
+        class="col-start-1 col-span-full row-start-4 row-span-1 grid grid-cols-12 grid-rows-3"
+      >
         <label
           for="keypath"
           class="col-start-1 col-end-12 row-start-1 row-span-1 block text-xs font-bold"
@@ -216,9 +205,8 @@
           type="text"
           placeholder="/user/.ssh/id_rsa"
           class="h-8 self-center col-start-1 col-end-12 row-start-2 row-span-2 overflow-hidden appearance-none border rounded-l-md w-full py-1 px-2 text-gray-800 text-sm font-semibold leading-tight focus:outline-none focus:shadow-outline bg-gray-200"
-          :disabled="!useSSHKey"
           required
-          @change="toggleSSH"
+          @change="validateForm"
         />
         <label
           for="keypath-file"
@@ -230,10 +218,13 @@
               >+</span
             >
           </div>
-          <input id="keypath-file" type="file" class="hidden" :disabled="!useSSHKey" @change="handleFileSelect" />
+          <input id="keypath-file" type="file" class="hidden" @change="handleFileSelect" />
         </label>
       </div>
-      <div v-if="useSSHKey" class="col-start-1 col-span-full row-start-5 row-span-1 grid grid-cols-12 grid-rows-3">
+      <div
+        v-if="useSSHKey && !usePassword"
+        class="col-start-1 col-span-full row-start-5 row-span-1 grid grid-cols-12 grid-rows-3"
+      >
         <label
           for="password"
           class="col-start-1 col-span-full row-start-1 row-span-1 block text-gray-300 text-xs font-bold"
@@ -247,6 +238,27 @@
           placeholder="******************"
         />
       </div>
+      <div
+        v-if="usePassword && !useSSHKey"
+        class="col-start-1 col-span-full row-start-4 row-span-1 grid grid-cols-12 grid-rows-3"
+      >
+        <label
+          for="password"
+          class="col-start-1 col-span-full row-start-1 row-span-1 block text-gray-300 text-xs font-bold"
+          :class="passwordError ? 'text-red-500' : 'text-gray-300'"
+          >{{ passwordError ? passwordError : $t("multiServer.pass") }}</label
+        >
+        <input
+          id="password"
+          v-model="serverStore.loginState.password"
+          type="password"
+          class="h-8 self-center col-start-1 col-span-full row-start-2 row-span-2 shadow appearance-none border rounded w-full py-1 px-2 text-gray-800 text-sm font-semibold leading-tight focus:outline-none focus:shadow-outline bg-gray-200"
+          placeholder="******************"
+          required
+          @keydown.enter="internalLogin"
+          @change="validateForm"
+        />
+      </div>
 
       <div class="col-start-1 col-span-full row-start-6 row-span-1 flex justify-center items-center">
         <button
@@ -280,7 +292,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watch, onUnmounted, watchEffect } from "vue";
+import { computed, ref, onUnmounted, watchEffect, watch, onMounted } from "vue";
 import { useServers } from "@/store/servers";
 import { useRouter } from "vue-router";
 import ControlService from "@/store/ControlService";
@@ -307,26 +319,20 @@ const devices = ref([]);
 const hovered = ref(false);
 const removeHovered = ref(false);
 const addHovered = ref(false);
+const isFormValid = ref(false);
+const useSSHKey = ref(false);
+const usePassword = ref(false);
 
-//Computed
+//*********** Computed ***********//
 
 const buttonDisabled = computed(() => {
-  return (
-    serverNameError.value.length > 0 ||
-    ipError.value.length > 0 ||
-    usernameError.value.length > 0 ||
-    (useSSHKey.value && sshError.value.length > 0) ||
-
-    (!useSSHKey.value && passwordError.value.length > 0) ||
-    serverStore.loginState.hostName === "" ||
-    serverStore.loginState.ip === "" ||
-    serverStore.loginState.username === ""
-
-  );
+  if (isFormValid.value) {
+    return true;
+  } else {
+    return false;
+  }
 });
 
-const useSSHKey = computed(() => serverStore.loginState.useAuth);
-
 const getTrashImg = computed(() => {
   if (hovered.value) {
     return "./img/icon/server-management-icons/trash-can-2.png";
@@ -336,14 +342,10 @@ const getTrashImg = computed(() => {
 });
 
 const addButtonDisabled = computed(() => {
-  const existingServer = serverStore.savedServers?.savedConnections?.some(
-    (item) => item.host === serverStore.selectedServerToConnect?.host
-  );
-
-  if (existingServer || buttonDisabled.value) {
-    return true;
-  } else {
+  if (isFormValid.value) {
     return false;
+  } else {
+    return true;
   }
 });
 
@@ -355,53 +357,116 @@ const removeButtonDisabled = computed(() => {
   }
 });
 
-//*********** Methods ***********//
+//*********** Watchers ***********//
 
-const toggleSSH = () => {
-  serverStore.loginState.useAuth = !serverStore.loginState.useAuth;
-  if (useSSHKey.value) {
-    serverStore.loginState.password = "";
-    validateSSHKeyPath();
-  } else {
-    serverStore.loginState.keyPath = "";
-    validatePassword();
+watch(
+  () => serverStore.loginState.useAuth,
+  () => {
+    toggleSSH();
   }
-};
+);
 
-// Validation functions
+watchEffect(() => {
+  if (serverStore.addNewServer) {
+    serverStore.selectedServerToConnect = null;
+    serverStore.loginState.hostName = "";
+    serverStore.loginState.ip = "";
+    serverStore.loginState.port = "";
+    serverStore.loginState.username = "";
+    serverStore.loginState.useAuth = false;
+  }
+});
+
+watchEffect(() => {
+  if (serverStore.selectedServerToConnect) {
+    serverStore.loginState.hostName = serverStore.selectedServerToConnect.name;
+    serverStore.loginState.ip = serverStore.selectedServerToConnect.host;
+    serverStore.loginState.port = serverStore.selectedServerToConnect.port;
+    serverStore.loginState.username = serverStore.selectedServerToConnect.user;
+    serverStore.loginState.useAuth = serverStore.selectedServerToConnect.useAuthKey;
+
+    if (serverStore.loginState.useAuth) {
+      useSSHKey.value = true;
+      usePassword.value = false;
+      serverStore.loginState.keyPath = serverStore.selectedServerToConnect.keylocation;
+      serverStore.loginState.passphrase = serverStore.selectedServerToConnect?.passphrase;
+      serverStore.loginState.password = "";
+    } else {
+      useSSHKey.value = false;
+      usePassword.value = true;
+      serverStore.loginState.keyPath = "";
+      serverStore.loginState.passphrase = "";
+      serverStore.loginState.password = serverStore.selectedServerToConnect.password;
+    }
+  }
+});
+
+//*********** Lifecycle Hooks ***********//
 
+onMounted(() => {
+  serverStore.loginState = {};
+});
+
+onUnmounted(() => {
+  serverStore.loginState = {};
+});
+
+//*********** Methods ***********//
+
+// Validation functions
 const validateServerName = () => {
-  serverNameError.value = serverStore.loginState.hostName.trim() ? "" : "Server name is required.";
+  const serverName = serverStore.loginState.hostName || ""; // Default to empty string if undefined or null
+  serverNameError.value = serverName.trim() ? "" : "Server name is required.";
 };
 
 const validateIP = () => {
-  const ipPattern = /^[0-9]{1,3}(\.[0-9]{1,3}){3}$/; // Simplified pattern for IP addresses
-  ipError.value = ipPattern.test(serverStore.loginState.ip.trim()) ? "" : "Invalid IP address.";
+  const ip = serverStore.loginState.ip || ""; // Default to empty string if undefined or null
+  const ipPattern = /^[0-9]{1,3}(\.[0-9]{1,3}){3}$/;
+  ipError.value = ipPattern.test(ip.trim()) ? "" : "Invalid IP address.";
 };
 
 const validateUsername = () => {
-  usernameError.value = serverStore.loginState.username.trim() ? "" : "Username is required.";
+  const username = serverStore.loginState.username || ""; // Default to empty string if undefined or null
+  usernameError.value = username.trim() ? "" : "Username is required.";
 };
 
 const validateSSHKeyPath = () => {
-  sshError.value = serverStore.loginState.keyPath.trim() ? "" : "SSH key path is required.";
+  const keyPath = serverStore.loginState.keyPath || ""; // Default to empty string if undefined or null
+  sshError.value = keyPath.trim() ? "" : "SSH key path is required.";
 };
 
 const validatePassword = () => {
-  passwordError.value = serverStore.loginState.password.trim() ? "" : "Password is required.";
+  const password = serverStore.loginState.password || ""; // Default to empty string if undefined or null
+  passwordError.value = password.trim() ? "" : "Password is required.";
 };
 
-const internalLogin = () => {
-  if (!buttonDisabled.value) {
-    serverStore.isServerAnimationActive = true;
-    serverStore.connectingProcess = true;
-    emit("serverLogin");
+const validateForm = () => {
+  validateServerName();
+  validateIP();
+  validateUsername();
+  if (useSSHKey.value) {
+    validateSSHKeyPath();
   } else {
-    router.push("/login");
+    validatePassword();
+  }
+
+  if (!serverNameError.value && !ipError.value && !usernameError.value) {
+    isFormValid.value = true;
+  } else {
+    isFormValid.value = false;
+  }
+};
+
+const toggleSSH = () => {
+  if (serverStore.loginState.useAuth) {
+    useSSHKey.value = true;
+    usePassword.value = false;
+  } else {
+    useSSHKey.value = false;
+    usePassword.value = true;
   }
 };
 
-// Methods
 const handleFileSelect = (event) => {
   const selectedFile = event.target.files[0];
   if (selectedFile) {
@@ -416,12 +481,6 @@ const handleFileSelect = (event) => {
   }
 };
 
-const changeLabel = () => {
-  if (serverStore.loginState.useAuth) {
-    serverStore.loginState.password = "";
-  }
-};
-
 const IpScanner = async () => {
   serverStore.isIpScannerModalActive = true;
   try {
@@ -443,98 +502,32 @@ const IpScanner = async () => {
 };
 
 const saveServer = async () => {
-  await add();
+  if (isFormValid.value) {
+    await add();
+  }
 };
 
 const removeServer = () => {
   serverStore.isRemoveModalActive = true;
 };
 
-// Watchers
-watch(
-  () => serverStore.loginState.hostName,
-  () => validateServerName()
-);
-watch(
-  () => serverStore.loginState.ip,
-  () => validateIP()
-);
-watch(
-  () => serverStore.loginState.username,
-  () => validateUsername()
-);
-watch(
-  () => serverStore.loginState.keyPath,
-  () => {
-    if (useSSHKey.value) {
-      validateSSHKeyPath();
-    }
-  }
-);
-watch(
-  () => serverStore.loginState.password,
-  () => {
-    if (!useSSHKey.value) {
-      validatePassword();
-    }
-  }
-);
-
-watch(
-  () => useSSHKey.value,
-  (newVal) => {
-    if (newVal) {
-      serverStore.loginState.password = "";
-      validateSSHKeyPath();
-    } else {
-      serverStore.loginState.keyPath = "";
-      validatePassword();
-    }
-  }
-);
+const updateCurrentServer = async () => {
+  const currentServer = serverStore.selectedServerToConnect;
+  const config = await ControlService.readConfig();
+  const server = config.savedConnections.find((item) => item.host === currentServer.host);
+  const index = config.savedConnections.indexOf(server);
+  config.savedConnections[index] = currentServer;
+  await ControlService.writeConfig(config);
+};
 
-// Handle existing server data
-watchEffect(() => {
-  if (serverStore.connectExistingServer) {
-    serverStore.loginState.hostName = serverStore.selectedServerToConnect.name;
-    serverStore.loginState.ip = serverStore.selectedServerToConnect.host;
-    serverStore.loginState.port = serverStore.selectedServerToConnect.port;
-    serverStore.loginState.username = serverStore.selectedServerToConnect.user;
-    serverStore.loginState.useAuth = serverStore.selectedServerToConnect.useAuthKey;
-    serverStore.loginState.keyPath = serverStore.selectedServerToConnect.keylocation;
-    serverStore.loginState.password = "";
-    serverStore.loginState.passphrase = "";
-
-    validateServerName();
-    validateIP();
-    validateUsername();
-    useSSHKey.value ? validateSSHKeyPath() : validatePassword();
+const internalLogin = () => {
+  validateForm();
+  if (isFormValid.value) {
+    serverStore.isServerAnimationActive = true;
+    serverStore.connectingProcess = true;
+    emit("serverLogin");
   } else {
-    // Reset the form
-    serverStore.selectedServerToConnect = null;
-    serverStore.loginState.hostName = "";
-    serverStore.loginState.ip = "";
-    serverStore.loginState.port = "";
-    serverStore.loginState.username = "";
-    serverStore.loginState.useAuth = false;
-    serverStore.loginState.keyPath = "";
-    serverStore.loginState.password = "";
-    serverStore.loginState.passphrase = "";
+    router.push("/login");
   }
-});
-
-// Lifecycle
-
-onUnmounted(() => {
-  serverStore.loginState.hostName = "";
-  serverStore.loginState.ip = "";
-  serverStore.loginState.port = "";
-  serverStore.loginState.username = "";
-  serverStore.loginState.useAuth = false;
-  serverStore.loginState.keyPath = "";
-  serverStore.loginState.password = "";
-  serverStore.loginState.passphrase = "";
-  serverStore.connectExistingServer = false;
-  serverStore.selectedServerToConnect = null;
-});
+};
 </script>

From 80cdd8d06ee099319f8989254effbdb4168a4d43 Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Mon, 15 Apr 2024 20:10:24 +0200
Subject: [PATCH 05/14] FIX: login on server management

---
 .../server-management/MultiServerScreen.vue   |  7 ++-
 .../components/login-form/LoginForm.vue       | 47 +++++++++++--------
 2 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/launcher/src/components/UI/server-management/MultiServerScreen.vue b/launcher/src/components/UI/server-management/MultiServerScreen.vue
index 412a69af4..cfef89c4e 100644
--- a/launcher/src/components/UI/server-management/MultiServerScreen.vue
+++ b/launcher/src/components/UI/server-management/MultiServerScreen.vue
@@ -53,7 +53,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(() => {
@@ -215,6 +214,12 @@ const removeServerHandler = async () => {
   );
 
   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++;
diff --git a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
index f29783be5..7ab9545fa 100644
--- a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
+++ b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
@@ -7,7 +7,7 @@
     </div>
     <form
       class="w-full h-full col-start-1 col-span-full row-start-3 row-span-full grid grid-cols-12 grid-rows-6 space-y-1"
-      @submit.prevent="onSubmit"
+      @submit.prevent="internalLogin"
     >
       <div class="col-start-1 col-span-full row-start-1 row-span-1 grid grid-cols-12 grid-rows-3">
         <label
@@ -206,7 +206,7 @@
           placeholder="/user/.ssh/id_rsa"
           class="h-8 self-center col-start-1 col-end-12 row-start-2 row-span-2 overflow-hidden appearance-none border rounded-l-md w-full py-1 px-2 text-gray-800 text-sm font-semibold leading-tight focus:outline-none focus:shadow-outline bg-gray-200"
           required
-          @change="validateForm"
+          @change="validateSSHKeyPath"
         />
         <label
           for="keypath-file"
@@ -255,8 +255,7 @@
           class="h-8 self-center col-start-1 col-span-full row-start-2 row-span-2 shadow appearance-none border rounded w-full py-1 px-2 text-gray-800 text-sm font-semibold leading-tight focus:outline-none focus:shadow-outline bg-gray-200"
           placeholder="******************"
           required
-          @keydown.enter="internalLogin"
-          @change="validateForm"
+          @change="validatePassword"
         />
       </div>
 
@@ -269,9 +268,8 @@
               ? 'bg-gray-600 text-gray-200 cursor-not-allowed'
               : 'bg-gray-300 hover:text-white hover:bg-teal-700 text-gray-800 active:scale-95 active:shadow-none'
           "
-          type="button"
+          type="submit"
           :disabled="buttonDisabled"
-          @click="internalLogin"
         >
           {{ $t("multiServer.login") }}
         </button>
@@ -326,7 +324,7 @@ const usePassword = ref(false);
 //*********** Computed ***********//
 
 const buttonDisabled = computed(() => {
-  if (isFormValid.value) {
+  if (serverNameError.value || ipError.value || usernameError.value) {
     return true;
   } else {
     return false;
@@ -401,6 +399,14 @@ watchEffect(() => {
   }
 });
 
+watchEffect(() => {
+  if (!serverNameError.value && !ipError.value && !usernameError.value) {
+    isFormValid.value = true;
+  } else {
+    isFormValid.value = false;
+  }
+});
+
 //*********** Lifecycle Hooks ***********//
 
 onMounted(() => {
@@ -444,11 +450,6 @@ const validateForm = () => {
   validateServerName();
   validateIP();
   validateUsername();
-  if (useSSHKey.value) {
-    validateSSHKeyPath();
-  } else {
-    validatePassword();
-  }
 
   if (!serverNameError.value && !ipError.value && !usernameError.value) {
     isFormValid.value = true;
@@ -504,6 +505,12 @@ const IpScanner = async () => {
 const saveServer = async () => {
   if (isFormValid.value) {
     await add();
+    serverStore.selectedServerToConnect = null;
+    serverStore.loginState.hostName = "";
+    serverStore.loginState.ip = "";
+    serverStore.loginState.port = "";
+    serverStore.loginState.username = "";
+    serverStore.loginState.useAuth = false;
   }
 };
 
@@ -511,14 +518,14 @@ const removeServer = () => {
   serverStore.isRemoveModalActive = true;
 };
 
-const updateCurrentServer = async () => {
-  const currentServer = serverStore.selectedServerToConnect;
-  const config = await ControlService.readConfig();
-  const server = config.savedConnections.find((item) => item.host === currentServer.host);
-  const index = config.savedConnections.indexOf(server);
-  config.savedConnections[index] = currentServer;
-  await ControlService.writeConfig(config);
-};
+// const updateCurrentServer = async () => {
+//   const currentServer = serverStore.selectedServerToConnect;
+//   const config = await ControlService.readConfig();
+//   const server = config.savedConnections.find((item) => item.host === currentServer.host);
+//   const index = config.savedConnections.indexOf(server);
+//   config.savedConnections[index] = currentServer;
+//   await ControlService.writeConfig(config);
+// };
 
 const internalLogin = () => {
   validateForm();

From de0a4a23615be9a0a6af7b0d4bc20e87a06eddb3 Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Mon, 15 Apr 2024 20:11:27 +0200
Subject: [PATCH 06/14] REMOVE: useless

---
 launcher/package.json | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/launcher/package.json b/launcher/package.json
index 8699aa72e..10899ae39 100755
--- a/launcher/package.json
+++ b/launcher/package.json
@@ -48,7 +48,6 @@
     "semver": "^7.6.0",
     "ssh2": "^1.1.0",
     "swiper": "^11.0.6",
-    "vee-validate": "^4.12.6",
     "vue": "^3.2.33",
     "vue-i18n": "9.2.2",
     "vue-router": "^4.0.15",
@@ -59,7 +58,6 @@
     "xterm-addon-attach": "^0.9.0",
     "xterm-addon-fit": "^0.8.0",
     "yaml": "^2.2.1",
-    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.2",
@@ -99,4 +97,4 @@
     "type": "git",
     "url": "git@github.com:stereum-dev/ethereum-node.git"
   }
-}
+}
\ No newline at end of file

From 6a3767049d897fe2045d77a6b6c214f2405e3c77 Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Mon, 15 Apr 2024 20:11:55 +0200
Subject: [PATCH 07/14] REMOVE: useless

---
 launcher/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/launcher/package.json b/launcher/package.json
index 10899ae39..82f196cc4 100755
--- a/launcher/package.json
+++ b/launcher/package.json
@@ -57,7 +57,7 @@
     "xterm": "^5.3.0",
     "xterm-addon-attach": "^0.9.0",
     "xterm-addon-fit": "^0.8.0",
-    "yaml": "^2.2.1",
+    "yaml": "^2.2.1"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.2",

From 293197fbe9047a7e55350dd627397d9ab11f7fda Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Mon, 15 Apr 2024 20:51:31 +0200
Subject: [PATCH 08/14] FIX: eslint

---
 launcher/public/output.css                    |  8 ++++++++
 .../components/login-form/LoginForm.vue       | 20 +++++++------------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/launcher/public/output.css b/launcher/public/output.css
index dfbfe69ea..7618d731f 100755
--- a/launcher/public/output.css
+++ b/launcher/public/output.css
@@ -2216,6 +2216,14 @@ video {
   width: 100vw;
 }
 
+.w-60{
+  width: 15rem;
+}
+
+.w-40{
+  width: 10rem;
+}
+
 .min-w-\[100px\]{
   min-width: 100px;
 }
diff --git a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
index 7ab9545fa..b2c3374c5 100644
--- a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
+++ b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
@@ -32,21 +32,18 @@
           <img
             class="w-7 hover:scale-110 active:scale-100 transition-all ease-in-out duration-200 cursor-pointer self-center border-4 border-gray-400 rounded-full shadow-md shadow-[#141414]"
             :src="getTrashImg"
-            alt=""
+            alt="Trash Icon"
             :class="removeButtonDisabled ? 'opacity-50 pointer-events-none ' : ''"
             @mousedown.prevent
-            @mouseenter="(hovered = true), (removeHovered = true)"
-            @mouseleave="(hovered = false), (removeHovered = false)"
+            @mouseenter="removeHovered = true"
+            @mouseleave="removeHovered = false"
             @click="removeServer"
           />
 
           <div
             v-if="removeHovered"
-            class="absolute -top-11 right-5 w-28 break-words rounded bg-[#202632] px-3 py-2 text-center text-xs font-medium text-white outline-none"
+            class="absolute -top-11 right-5 w-36 rounded-sm bg-[#202632] px-3 py-2 text-center text-xs font-medium text-white outline-none capitalize"
           >
-            <span
-              class="bg-dark dark:bg-dark-2 absolute top-5 left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45"
-            ></span>
             {{ $t("loginServer.removeServer") }}
           </div>
 
@@ -62,11 +59,8 @@
           />
           <div
             v-if="addHovered"
-            class="absolute -top-11 -right-5 w-28 rounded bg-[#202632] px-3 py-2 text-center text-xs font-medium text-white outline-none"
+            class="absolute -top-11 -right-5 w-28 rounded-sm uppercase bg-[#202632] px-3 py-2 text-center text-xs font-medium text-white outline-none"
           >
-            <span
-              class="bg-dark dark:bg-dark-2 absolute top-5 left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45"
-            ></span>
             {{ $t("multiServer.saveServer") }}
           </div>
         </div>
@@ -307,6 +301,7 @@ const router = useRouter();
 const { add } = useServerLogin();
 
 //Refs
+
 const serverNameError = ref("");
 const ipError = ref("");
 const usernameError = ref("");
@@ -314,7 +309,6 @@ const passwordError = ref("");
 const sshError = ref("");
 const message = ref("");
 const devices = ref([]);
-const hovered = ref(false);
 const removeHovered = ref(false);
 const addHovered = ref(false);
 const isFormValid = ref(false);
@@ -332,7 +326,7 @@ const buttonDisabled = computed(() => {
 });
 
 const getTrashImg = computed(() => {
-  if (hovered.value) {
+  if (removeHovered.value) {
     return "./img/icon/server-management-icons/trash-can-2.png";
   } else {
     return "./img/icon/server-management-icons/trash-can.png";

From 76ba64afe5a370b604556dec493029ed74f08f5a Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Mon, 15 Apr 2024 21:03:57 +0200
Subject: [PATCH 09/14] FIX: conflicts

---
 .vscode/extensions.json                       |  2 +-
 launcher/public/output.css                    | 22 +++++++++++++++----
 .../components/login-form/LoginForm.vue       | 14 ++----------
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 30eb5cf6f..bafc1bb67 100644
--- a/.vscode/extensions.json
+++ b/.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": []
diff --git a/launcher/public/output.css b/launcher/public/output.css
index 90027ee03..7618d731f 100755
--- a/launcher/public/output.css
+++ b/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 {
diff --git a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
index 330ff535c..81076bd68 100644
--- a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
+++ b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
@@ -99,7 +99,7 @@ watchEffect, onUnmounted } from 'vue';
             class="w-6 h-6 col-start-11 col-span-full self-center p-[2px] cursor-pointer hover:scale-110 active:scale-100 transition-all ease-in-out duration-200 justify-self-center"
             src="/img/icon/server-management-icons/local-lan.png"
             alt="Scanner Icon"
-            @click="IpScanLan1"
+            @click="IpScanner"
           />
           <span
             v-else
@@ -321,6 +321,7 @@ import { useRouter } from "vue-router";
 const emit = defineEmits(["serverLogin"]);
 
 const serverStore = useServers();
+const router = useRouter();
 
 const { add } = useServerLogin();
 
@@ -335,7 +336,6 @@ const devices = ref([]);
 const removeHovered = ref(false);
 const addHovered = ref(false);
 const isFormValid = ref(false);
-const useSSHKey = ref(false);
 const usePassword = ref(false);
 
 //*********** Computed ***********//
@@ -515,7 +515,6 @@ const handleFileSelect = (event) => {
       serverStore.loginState.keyPath = selectedFile.path;
     } else {
       serverStore.loginState.keyPath = "";
-      message.value = "Selected file is empty.";
     }
   } else {
     serverStore.loginState.keyPath = "";
@@ -555,15 +554,6 @@ const removeServer = () => {
   serverStore.isRemoveModalActive = true;
 };
 
-// const updateCurrentServer = async () => {
-//   const currentServer = serverStore.selectedServerToConnect;
-//   const config = await ControlService.readConfig();
-//   const server = config.savedConnections.find((item) => item.host === currentServer.host);
-//   const index = config.savedConnections.indexOf(server);
-//   config.savedConnections[index] = currentServer;
-//   await ControlService.writeConfig(config);
-// };
-
 const internalLogin = () => {
   validateForm();
   if (isFormValid.value) {

From a310875e6c5dae58f97ff2c8799f32d07e9fbc43 Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Mon, 15 Apr 2024 21:07:32 +0200
Subject: [PATCH 10/14] REMOVE: useless

---
 .../UI/server-management/components/login-form/LoginForm.vue    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
index 81076bd68..32a751193 100644
--- a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
+++ b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
@@ -1,5 +1,3 @@
-import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted, watch,
-watchEffect, onUnmounted } from 'vue';
 <template>
   <div
     class="w-full h-full col-start-1 col-span-full row-start-1 row-span-full bg-[#1b1b1d] rounded-md grid grid-cols-12 grid-rows-12 p-2 pt-0"

From 508ab3798a2dbcbf1f14b5c9241aa351308b7ef5 Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Mon, 15 Apr 2024 21:12:27 +0200
Subject: [PATCH 11/14] REFACTOR: best practice

---
 .../components/login-form/LoginForm.vue       | 27 +++----------------
 1 file changed, 4 insertions(+), 23 deletions(-)

diff --git a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
index 32a751193..66df40e68 100644
--- a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
+++ b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
@@ -334,16 +334,13 @@ const devices = ref([]);
 const removeHovered = ref(false);
 const addHovered = ref(false);
 const isFormValid = ref(false);
+const useSSHKey = ref(false);
 const usePassword = ref(false);
 
 //*********** Computed ***********//
 
 const buttonDisabled = computed(() => {
-  if (serverNameError.value || ipError.value || usernameError.value) {
-    return true;
-  } else {
-    return false;
-  }
+  return !!(serverNameError.value || ipError.value || usernameError.value);
 });
 
 const getTrashImg = computed(() => {
@@ -354,28 +351,12 @@ const getTrashImg = computed(() => {
   }
 });
 
-const useSSHKey = computed(() => {
-  if (serverStore.loginState.useAuth) {
-    return true;
-  } else {
-    return false;
-  }
-});
-
 const addButtonDisabled = computed(() => {
-  if (isFormValid.value) {
-    return false;
-  } else {
-    return true;
-  }
+  return !isFormValid.value;
 });
 
 const removeButtonDisabled = computed(() => {
-  if (serverStore.selectedServerToConnect) {
-    return false;
-  } else {
-    return true;
-  }
+  return !serverStore.selectedServerToConnect;
 });
 
 //*********** Watchers ***********//

From e983e916e61ca6374a74059db4fea46dda7b513f Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Mon, 15 Apr 2024 21:32:39 +0200
Subject: [PATCH 12/14] REFACTOR: improve UI

---
 .../components/ServerBody.vue                 | 45 +++++++++++++++----
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/launcher/src/components/UI/server-management/components/ServerBody.vue b/launcher/src/components/UI/server-management/components/ServerBody.vue
index 959849306..ff243513e 100644
--- a/launcher/src/components/UI/server-management/components/ServerBody.vue
+++ b/launcher/src/components/UI/server-management/components/ServerBody.vue
@@ -6,7 +6,11 @@
       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" />
@@ -14,7 +18,11 @@
     <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;
   }

From 400d8be81ed5ad2e2c9adea6b01ea51e3ca889c8 Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Tue, 16 Apr 2024 11:21:34 +0200
Subject: [PATCH 13/14] FIX: some validation fixes

---
 launcher/public/output.css                    | 16 -----
 .../components/login-form/LoginForm.vue       | 62 ++++++++++++++++---
 launcher/src/composables/useLogin.js          |  4 +-
 3 files changed, 56 insertions(+), 26 deletions(-)

diff --git a/launcher/public/output.css b/launcher/public/output.css
index 7618d731f..fb1d1f1f5 100755
--- a/launcher/public/output.css
+++ b/launcher/public/output.css
@@ -979,10 +979,6 @@ video {
   top: 5rem;
 }
 
-.top-5{
-  top: 1.25rem;
-}
-
 .top-8{
   top: 2rem;
 }
@@ -995,10 +991,6 @@ video {
   top: 7rem;
 }
 
-.-z-10{
-  z-index: -10;
-}
-
 .z-0{
   z-index: 0;
 }
@@ -2216,14 +2208,6 @@ video {
   width: 100vw;
 }
 
-.w-60{
-  width: 15rem;
-}
-
-.w-40{
-  width: 10rem;
-}
-
 .min-w-\[100px\]{
   min-width: 100px;
 }
diff --git a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
index 66df40e68..44c40a6ea 100644
--- a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
+++ b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
@@ -29,7 +29,7 @@
           :placeholder="`${$t('multiServer.serverName')}`"
           class="h-8 self-center col-start-1 col-end-10 row-start-2 row-span-2 shadow appearance-none border rounded w-full py-1 px-2 text-gray-800 text-sm font-semibold leading-tight focus:outline-none focus:shadow-outline bg-gray-200"
           required
-          @change="validateForm"
+          @change="serverNameChanged = true"
         />
 
         <div
@@ -90,7 +90,7 @@
             placeholder="114.72.86.90"
             class="h-8 self-center col-start-1 col-end-11 shadow appearance-none border rounded w-full py-1 px-2 text-gray-800 text-sm font-semibold leading-tight focus:outline-none focus:shadow-outline bg-gray-200"
             required
-            @change="validateForm"
+            @change="serverIPChanged = true"
           />
           <img
             v-if="!serverStore.isIpScannerModalActive"
@@ -138,7 +138,7 @@
           placeholder="root"
           class="h-8 self-center col-start-1 col-span-full row-start-2 row-span-2 shadow appearance-none border rounded w-full py-1 px-2 text-gray-800 text-sm font-semibold leading-tight focus:outline-none focus:shadow-outline bg-gray-200"
           required
-          @change="validateForm"
+          @change="serverUsernameChanged = true"
         />
       </div>
       <div
@@ -158,7 +158,7 @@
             v-model="serverStore.loginState.useAuth"
             type="checkbox"
             class="peer sr-only [&:checked_+_span_svg[data-checked-icon]]:block [&:checked_+_span_svg[data-unchecked-icon]]:hidden bg-gray-200"
-            @change="toggleSSH"
+            @input="toggleSSH"
           />
 
           <span
@@ -216,7 +216,7 @@
           placeholder="/user/.ssh/id_rsa"
           class="h-8 self-center col-start-1 col-end-12 row-start-2 row-span-2 overflow-hidden appearance-none border rounded-l-md w-full py-1 px-2 text-gray-800 text-sm font-semibold leading-tight focus:outline-none focus:shadow-outline bg-gray-200"
           required
-          @change="validateSSHKeyPath"
+          @input="validateSSHKeyPath"
         />
         <label
           for="keypath-file"
@@ -272,7 +272,7 @@
           class="h-8 self-center col-start-1 col-span-full row-start-2 row-span-2 shadow appearance-none border rounded w-full py-1 px-2 text-gray-800 text-sm font-semibold leading-tight focus:outline-none focus:shadow-outline bg-gray-200"
           placeholder="******************"
           required
-          @change="validatePassword"
+          @input="validatePassword"
         />
       </div>
 
@@ -336,6 +336,9 @@ const addHovered = ref(false);
 const isFormValid = ref(false);
 const useSSHKey = ref(false);
 const usePassword = ref(false);
+const serverNameChanged = ref(false);
+const serverIPChanged = ref(false);
+const serverUsernameChanged = ref(false);
 
 //*********** Computed ***********//
 
@@ -352,7 +355,18 @@ const getTrashImg = computed(() => {
 });
 
 const addButtonDisabled = computed(() => {
-  return !isFormValid.value;
+  if (
+    !ipError.value &&
+    !usernameError.value &&
+    !serverNameError.value &&
+    serverStore.loginState.hostName &&
+    serverStore.loginState.ip &&
+    serverStore.loginState.username
+  ) {
+    return false;
+  } else {
+    return true;
+  }
 });
 
 const removeButtonDisabled = computed(() => {
@@ -375,6 +389,7 @@ watchEffect(() => {
     serverStore.loginState.ip = "";
     serverStore.loginState.port = "";
     serverStore.loginState.username = "";
+    serverStore.loginState.keyPath = "";
     serverStore.loginState.useAuth = false;
   }
 });
@@ -403,6 +418,33 @@ watchEffect(() => {
   }
 });
 
+watch(
+  () => serverStore.loginState.hostName,
+  () => {
+    if (serverNameChanged.value) {
+      validateServerName();
+    }
+  }
+);
+
+watch(
+  () => serverStore.loginState.ip,
+  () => {
+    if (serverIPChanged.value) {
+      validateIP();
+    }
+  }
+);
+
+watch(
+  () => serverStore.loginState.username,
+  () => {
+    if (serverUsernameChanged.value) {
+      validateUsername();
+    }
+  }
+);
+
 watchEffect(() => {
   if (!serverNameError.value && !ipError.value && !usernameError.value) {
     isFormValid.value = true;
@@ -414,6 +456,10 @@ watchEffect(() => {
 //*********** Lifecycle Hooks ***********//
 
 onMounted(() => {
+  ipError.value = "";
+  usernameError.value = "";
+  serverNameError.value = "";
+
   serverStore.loginState = {};
 });
 
@@ -432,7 +478,7 @@ const validateServerName = () => {
 const validateIP = () => {
   const ip = serverStore.loginState.ip || ""; // Default to empty string if undefined or null
   const ipPattern = /^[0-9]{1,3}(\.[0-9]{1,3}){3}$/;
-  ipError.value = ipPattern.test(ip.trim()) ? "" : "Invalid IP address.";
+  ipError.value = ipPattern.test(ip.trim()) ? "" : "Server IP is required .";
 };
 
 const validateUsername = () => {
diff --git a/launcher/src/composables/useLogin.js b/launcher/src/composables/useLogin.js
index c4197460d..88df7b10b 100644
--- a/launcher/src/composables/useLogin.js
+++ b/launcher/src/composables/useLogin.js
@@ -153,8 +153,8 @@ export const useServerLogin = () => {
     let savedConnections = storageSavedConnections.savedConnections || [];
     const server = serverStore.selectedServerToConnect;
 
-    serverStore.connections = serverStore.connections.filter((conn) => conn?.host !== server?.host);
-    savedConnections = savedConnections.filter((conn) => conn?.host !== server?.host);
+    serverStore.connections = serverStore.connections.filter((conn) => conn?.name !== server?.name);
+    savedConnections = savedConnections.filter((conn) => conn?.name !== server?.name);
 
     const updatedConfig = {
       ...storageSavedConnections,

From 6bd9e550d7979c10c1a98095d51904f4cb689345 Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Tue, 16 Apr 2024 11:45:46 +0200
Subject: [PATCH 14/14] FIX: switch server details

---
 .../server-management/MultiServerScreen.vue   | 24 ++++++++--
 .../components/login-form/LoginForm.vue       | 47 +++++--------------
 2 files changed, 30 insertions(+), 41 deletions(-)

diff --git a/launcher/src/components/UI/server-management/MultiServerScreen.vue b/launcher/src/components/UI/server-management/MultiServerScreen.vue
index cfef89c4e..bf0e4eb7d 100644
--- a/launcher/src/components/UI/server-management/MultiServerScreen.vue
+++ b/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>
 
@@ -112,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);
 
@@ -178,7 +187,9 @@ const serverHandler = (server) => {
     server.isSelected = true;
   }
 
-  serverStore.savedServers.savedConnections = [...serverStore.savedServers.savedConnections];
+  serverStore.savedServers.savedConnections = [
+    ...serverStore.savedServers.savedConnections,
+  ];
 };
 
 //Change password handling
@@ -210,7 +221,8 @@ 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();
@@ -234,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);
diff --git a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
index 44c40a6ea..2739ab903 100644
--- a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
+++ b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
@@ -2,25 +2,19 @@
   <div
     class="w-full h-full col-start-1 col-span-full row-start-1 row-span-full bg-[#1b1b1d] rounded-md grid grid-cols-12 grid-rows-12 p-2 pt-0"
   >
-    <div
-      class="w-full h-full col-start-1 col-span-full row-start-1 row-span-1 flex justify-start items-center"
-    >
+    <div class="w-full h-full col-start-1 col-span-full row-start-1 row-span-1 flex justify-start items-center">
       <span class="text-md font-semibold text-gray-300 uppercase">Login to server</span>
     </div>
     <form
       class="w-full h-full col-start-1 col-span-full row-start-3 row-span-full grid grid-cols-12 grid-rows-6 space-y-1"
       @submit.prevent="internalLogin"
     >
-      <div
-        class="col-start-1 col-span-full row-start-1 row-span-1 grid grid-cols-12 grid-rows-3"
-      >
+      <div class="col-start-1 col-span-full row-start-1 row-span-1 grid grid-cols-12 grid-rows-3">
         <label
           for="servername"
           class="col-start-1 col-span-full row-start-1 row-span-1 block text-xs font-bold"
           :class="serverNameError ? 'text-red-500' : 'text-gray-300'"
-          >{{
-            serverNameError ? serverNameError : `${$t("multiServer.serverName")}`
-          }}</label
+          >{{ serverNameError ? serverNameError : `${$t("multiServer.serverName")}` }}</label
         >
         <input
           id="servername"
@@ -71,9 +65,7 @@
           </div>
         </div>
       </div>
-      <div
-        class="col-start-1 col-end-7 row-start-2 row-span-1 grid grid-cols-12 grid-rows-3 mr-1"
-      >
+      <div class="col-start-1 col-end-7 row-start-2 row-span-1 grid grid-cols-12 grid-rows-3 mr-1">
         <label
           for="hostname"
           class="col-start-1 col-span-full row-start-1 row-span-1 block text-gray-300 text-xs font-bold mb-2"
@@ -105,9 +97,7 @@
           ></span>
         </div>
       </div>
-      <div
-        class="col-start-7 col-span-full row-start-2 row-span-1 grid grid-cols-12 grid-rows-3"
-      >
+      <div class="col-start-7 col-span-full row-start-2 row-span-1 grid grid-cols-12 grid-rows-3">
         <label
           for="port"
           class="col-start-1 col-span-full row-start-1 row-span-1 block text-gray-300 text-xs font-bold mb-2"
@@ -122,9 +112,7 @@
           class="h-8 self-center col-start-1 col-span-full row-start-2 row-span-2 shadow appearance-none border rounded w-full py-1 px-2 text-gray-800 text-sm font-semibold leading-tight focus:outline-none focus:shadow-outline bg-gray-200"
         />
       </div>
-      <div
-        class="col-start-1 col-end-7 row-start-3 row-span-1 grid grid-cols-12 grid-rows-3"
-      >
+      <div class="col-start-1 col-end-7 row-start-3 row-span-1 grid grid-cols-12 grid-rows-3">
         <label
           for="username"
           class="col-start-1 col-span-full row-start-1 row-span-1 block text-xs font-bold mb-2"
@@ -141,9 +129,7 @@
           @change="serverUsernameChanged = true"
         />
       </div>
-      <div
-        class="col-start-7 col-span-full row-start-3 row-span-1 grid grid-cols-12 grid-rows-3"
-      >
+      <div class="col-start-7 col-span-full row-start-3 row-span-1 grid grid-cols-12 grid-rows-3">
         <span
           class="w-full col-start-1 col-span-full row-start-1 row-span-1 text-gray-300 font-semibold text-xs ml-1 capitalize text-center"
           >{{ $t("formsetup.usessh") }}</span
@@ -193,9 +179,7 @@
             </svg>
           </span>
 
-          <span
-            class="absolute inset-0 rounded-full bg-gray-300 transition peer-checked:bg-green-500"
-          ></span>
+          <span class="absolute inset-0 rounded-full bg-gray-300 transition peer-checked:bg-green-500"></span>
         </label>
       </div>
 
@@ -222,20 +206,13 @@
           for="keypath-file"
           class="h-8 col-start-12 col-span-full row-start-2 row-span-2 self-center w-full flex justify-center items-center cursor-pointer bg-gray-200 rounded-r-md"
         >
-          <div
-            class="w-6 h-6 border-2 border-gray-400 rounded-full flex justify-center items-center"
-          >
+          <div class="w-6 h-6 border-2 border-gray-400 rounded-full flex justify-center items-center">
             <span
               class="text-xl text-teal-700 text-center font-bold hover:scale-125 active:scale-100 transition-all duration-150 ease-in-out"
               >+</span
             >
           </div>
-          <input
-            id="keypath-file"
-            type="file"
-            class="hidden"
-            @change="handleFileSelect"
-          />
+          <input id="keypath-file" type="file" class="hidden" @change="handleFileSelect" />
         </label>
       </div>
       <div
@@ -276,9 +253,7 @@
         />
       </div>
 
-      <div
-        class="col-start-1 col-span-full row-start-6 row-span-1 flex justify-center items-center"
-      >
+      <div class="col-start-1 col-span-full row-start-6 row-span-1 flex justify-center items-center">
         <button
           v-if="!serverStore.connectingProcess"
           class="w-full h-[50px] hover:bg-teal-700 text-gray-800 hover:text-white font-bold py-1 px-4 rounded-md focus:outline-none focus:shadow-outline active:scale-95 transition-all ease-in-out duration-100 shadow-lg shadow-black active:shadow-none text-md uppercase"