FIX: login (stereum-dev#1682)

* FIX: login

* FIX: add new server

Author: MaxTheGeeek

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

@@ -5,6 +5,7 @@ import ServerHeader from './components/ServerHeader.vue';
   >
     <ServerHeader @tab-picker="tabPicker" />
     <ServerBody
+      @server-login="loginHandler"
       @select-server="serverHandler"
       @change-password="acceptChangePass"
       @file-upload="addExistingKeyHandler"
@@ -32,15 +33,15 @@ import PasswordModal from "./components/modals/PasswordModal.vue";
 import GenerateKey from "./components/modals/GenerateKey.vue";
 import { ref, onMounted, watchEffect } from "vue";
 import ControlService from "@/store/ControlService";
-import { useControlStore } from "@/store/theControl";
 import { useServers } from "@/store/servers";
 import RemoveModal from "./components/modals/RemoveModal.vue";
 import ErrorModal from "./components/modals/ErrorModal.vue";
 import { useServerLogin } from "@/composables/useLogin";
+import { useRouter } from "vue-router";
 
-const controlStore = useControlStore();
 const serverStore = useServers();
-const { remove } = useServerLogin();
+const { login, remove, loadStoredConnections } = useServerLogin();
+const router = useRouter();
 
 const keyLocation = ref("");
 
@@ -87,20 +88,22 @@ onMounted(async () => {
 
 //Methods
 
+//Server Management Login Handler
+
+const loginHandler = async () => {
+  if (router.currentRoute.value.path === "/login") {
+    await login();
+  } else {
+    await ControlService.logout();
+    await login();
+  }
+};
+
 //Server Management Tab Picker
 const tabPicker = (tab) => {
   serverStore.setActiveTab(tab);
 };
 
-//Load stored connections
-
-const loadStoredConnections = async () => {
-  const savedConnections = await ControlService.readConfig();
-  serverStore.selectedServerConnection = savedConnections.savedConnections.find(
-    (item) => item.host === controlStore.ipAddress
-  );
-};
-
 //Click handling on a server in the saved servers list
 const serverHandler = (server) => {
   serverStore.tabs.forEach((tab) => {
@@ -145,6 +148,7 @@ const closeWindow = () => {
 
 const closeErrorDialog = () => {
   serverStore.errorMsgExists = false;
+  serverStore.connectingProcess = false;
 };
 
 const removeServerHandler = async () => {

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

@@ -5,7 +5,7 @@
     <div
       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" />
+      <LoginPanel v-if="isLoginActive" @server-login="serverLogin" />
       <DetailsPanel v-if="isDetailsActive" @change-password="changePassword" @set-avatar="setServerAvatar" />
       <UpdatePanel v-if="isUpdateActive" />
       <SshPanel v-if="isSSHActive" @file-upload="fileUpload" @delete-key="deleteKey" />
@@ -27,7 +27,7 @@ import SshPanel from "./ssh-management/SshPanel.vue";
 import ControlService from "@/store/ControlService";
 import { useServers } from "@/store/servers";
 import { useControlStore } from "@/store/theControl";
-import { computed } from "vue";
+import { computed, watch } from "vue";
 import { useRoute } from "vue-router";
 
 const emit = defineEmits(["selectServer", "serverLogin", "changePassword", "fileUpload", "deleteKey"]);
@@ -41,15 +41,15 @@ const isSSHActive = computed(() => route.path !== "/login" && serverStore.isServ
 const isDetailsActive = computed(() => route.path !== "/login" && serverStore.isServerDetailsActive);
 const isUpdateActive = computed(() => route.path !== "/login" && serverStore.isServerUpdateActive);
 
-// watch(
-//   () => serverStore.selectedServerConnection,
-//   async (newVal) => {
-//     if (newVal) {
-//       serverStore.isServerLoginActive = false;
-//       serverStore.isServerManagementActive = true;
-//     }
-//   }
-// );
+watch(
+  () => serverStore.selectedServerConnection,
+  async (newVal) => {
+    if (newVal) {
+      serverStore.isServerLoginActive = false;
+      serverStore.isServerManagementActive = true;
+    }
+  }
+);
 
 //Methods
 
@@ -86,6 +86,8 @@ const addNewServer = () => {
   }
   serverStore.addNewServer = true;
   serverStore.isServerLoginActive = true;
+  serverStore.isServerDetailsActive = false;
+  serverStore.setActiveTab("login");
   serverStore.isServerManagementActive = false;
 };
 
@@ -100,4 +102,8 @@ const fileUpload = (file) => {
 const deleteKey = (key) => {
   emit("deleteKey", key);
 };
+
+const serverLogin = () => {
+  emit("serverLogin");
+};
 </script>

launcher/src/components/UI/server-management/components/login-form/LoginForm.vue

@@ -248,14 +248,15 @@ import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted
 </template>
 
 <script setup>
-import { computed, ref, onMounted, watchEffect } from "vue";
+import { computed, ref, watchEffect } from "vue";
 import { useServers } from "@/store/servers";
-import ControlService from "@/store/ControlService";
 import { useServerLogin } from "@/composables/useLogin";
 
+const emit = defineEmits(["serverLogin"]);
+
 const serverStore = useServers();
 
-const { login, add, loadStoredConnections } = useServerLogin();
+const { add } = useServerLogin();
 
 const hovered = ref(false);
 const removeHovered = ref(false);
@@ -318,10 +319,6 @@ watchEffect(() => {
 
 // Lifecycle
 
-onMounted(async () => {
-  await loadStoredConnections();
-});
-
 // Methods
 const handleFileSelect = (event) => {
   const selectedFile = event.target.files[0];
@@ -383,11 +380,15 @@ const internalLogin = async () => {
   if (!validateServerName() || !validateIPorHostname() || !validateUsername()) {
     return;
   }
-
-  await ControlService.logout();
-  await login();
-  serverStore.connectingProcess = false;
-  serverStore.isServerAccessManagementActive = false;
+  emit("serverLogin");
+  // if (router.currentRoute.value.fullPath === "/login") {
+  //   await login();
+  // } else {
+  //   await ControlService.logout();
+  //   await login();
+  //   serverStore.connectingProcess = false;
+  //   serverStore.isServerAccessManagementActive = false;
+  // }
 };
 
 const saveServer = async () => {

launcher/src/components/UI/server-management/components/login-form/LoginPanel.vue

@@ -2,10 +2,15 @@
   <div
     class="w-full h-full col-start-1 col-span-full row-start-1 row-span-full grid grid-cols-12 grid-rows-12 p-2 gap-y-1"
   >
-    <LoginForm />
+    <LoginForm @server-login="serverLogin" />
   </div>
 </template>
 
 <script setup>
 import LoginForm from "./LoginForm.vue";
+
+const emit = defineEmits(["serverLogin"]);
+const serverLogin = () => {
+  emit("serverLogin");
+};
 </script>

launcher/src/components/UI/welcome-page/WelcomeScreen.vue

@@ -4,7 +4,7 @@
     <ServerDetails />
     <WelcomeBody />
     <WelcomeFooter />
-    <LogoutModal @logout-handler="loggingOut" @close-window="closeModal" />
+    <LogoutModal v-if="isLogoutModalActive" @logout-handler="loggingOut" @close-window="closeModal" />
   </installation-layout>
 </template>