FIX: release bugs (stereum-dev#1770)

* FIX: staking no validator stats * ADD: quick login tooltip to footer * FIX: quick login * ADD: connected icon to concted server row * FIX: staking d&d * REMOVE: useless import * FIX: empty password form * FIX: disabling button * FIX: cancel login * FIX: canceling * add handler to login button --------- Co-authored-by: daverolo <[email protected]>
daverolo · Mar 15, 2024 · 47dceb2 · 47dceb2
1 parent 0a88819
commit 47dceb2
Show file tree

Hide file tree

Showing 10 changed files with 249 additions and 125 deletions.
diff --git a/launcher/public/output.css b/launcher/public/output.css
@@ -821,6 +821,10 @@ video {
   bottom: 1rem;
 }
 
+.bottom-\[2px\]{
+  bottom: 2px;
+}
+
 .bottom-\[3rem\]{
   bottom: 3rem;
 }
@@ -865,6 +869,10 @@ video {
   left: 0.75rem;
 }
 
+.left-32{
+  left: 8rem;
+}
+
 .left-\[1\.3rem\]{
   left: 1.3rem;
 }
@@ -877,6 +885,10 @@ video {
   left: 17rem;
 }
 
+.left-\[34px\]{
+  left: 34px;
+}
+
 .left-\[40\%\]{
   left: 40%;
 }
@@ -1085,6 +1097,10 @@ video {
   grid-column-start: 21;
 }
 
+.col-start-22{
+  grid-column-start: 22;
+}
+
 .col-start-23{
   grid-column-start: 23;
 }
@@ -1173,6 +1189,10 @@ video {
   grid-column-end: 21;
 }
 
+.col-end-22{
+  grid-column-end: 22;
+}
+
 .col-end-23{
   grid-column-end: 23;
 }
@@ -3263,6 +3283,11 @@ video {
   background-color: rgb(21 26 30 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#161717\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 23 23 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#171D22\]{
   --tw-bg-opacity: 1;
   background-color: rgb(23 29 34 / var(--tw-bg-opacity));
@@ -3283,6 +3308,11 @@ video {
   background-color: rgb(23 162 184 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#18191a\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(24 25 26 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#191b1e\]{
   --tw-bg-opacity: 1;
   background-color: rgb(25 27 30 / var(--tw-bg-opacity));
@@ -4659,6 +4689,11 @@ video {
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.filter-none{
+  -webkit-filter: none;
+          filter: none;
+}
+
 .transition{
   -webkit-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
@@ -5146,6 +5181,11 @@ html body {
   background-color: rgb(33 35 37 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-\[\#222425\]:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 36 37 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-\[\#224141\]:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(34 65 65 / var(--tw-bg-opacity));
@@ -5438,10 +5478,6 @@ html body {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
-.hover\:outline-blue-600:hover{
-  outline-color: #2563eb;
-}
-
 .hover\:brightness-110:hover{
   --tw-brightness: brightness(1.1);
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -5519,6 +5555,11 @@ html body {
   border-style: none;
 }
 
+.active\:bg-\[\#1b1c1c\]:active{
+  --tw-bg-opacity: 1;
+  background-color: rgb(27 28 28 / var(--tw-bg-opacity));
+}
+
 .active\:shadow-none:active{
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;

diff --git a/launcher/src/components/UI/edit-page/components/modals/custom-service/AddCustom.vue b/launcher/src/components/UI/edit-page/components/modals/custom-service/AddCustom.vue
@@ -9,7 +9,7 @@
 </template>
 <script setup>
 import { useNodeManage } from "@/store/nodeManage";
-import { defineEmits, onMounted } from "vue";
+import { onMounted } from "vue";
 import CustomConfig from "./CustomConfig.vue";
 
 const emits = defineEmits(["confirmCreate"]);

diff --git a/launcher/src/components/UI/server-management/MultiServerScreen.vue b/launcher/src/components/UI/server-management/MultiServerScreen.vue
@@ -51,7 +51,8 @@ const serverStore = useServers();
 const { login, remove, loadStoredConnections } = useServerLogin();
 const router = useRouter();
 const keyLocation = ref("");
-const loginAbortController = ref(null);
+let loginAbortController = new AbortController();
+console.log("Server Management Screen", loginAbortController);
 
 watchEffect(() => {
   serverStore.setActiveState("isServerDetailsActive");
@@ -95,17 +96,18 @@ onUnmounted(() => {
 //Server Management Login Handler
 
 const loginHandler = async () => {
-  loginAbortController.value = new AbortController();
+  loginAbortController = new AbortController();
   serverStore.isServerAnimationActive = true;
   serverStore.connectingProcess = true;
   try {
     if (router.currentRoute.value.path === "/login") {
-      await login(loginAbortController.value.signal);
+      await login(loginAbortController.signal);
     } else {
       serverStore.connectingProcess = true;
       serverStore.isServerAnimationActive = true;
       await ControlService.logout();
-      await login(loginAbortController.value.signal);
+      await login(loginAbortController.signal);
+
       setTimeout(() => {
         serverStore.isServerAnimationActive = false;
         serverStore.connectingProcess = false;
@@ -114,35 +116,20 @@ const loginHandler = async () => {
   } catch (error) {
     console.error("Login failed:", error);
   }
+  loginAbortController = null;
 };
 
-const quickLoginHandler = async () => {
-  loginAbortController.value = new AbortController();
-  serverStore.isServerAnimationActive = true;
-  serverStore.connectingProcess = true;
-  try {
-    if (router.currentRoute.value.path === "/login") {
-      await login(loginAbortController.value.signal);
-    } else {
-      serverStore.isServerAnimationActive = true;
-      serverStore.connectingProcess = true;
-      await ControlService.logout();
-      await login(loginAbortController.value.signal);
-      setTimeout(() => {
-        serverStore.isServerAnimationActive = false;
-        serverStore.connectingProcess = false;
-      }, 5000);
-    }
-  } catch (error) {
-    console.error("Quick login failed:", error);
-  }
+const quickLoginHandler = async (server) => {
+  serverHandler(server);
+  loginHandler();
 };
 
 const cancelLoginHandler = () => {
-  console.log("Cancel login");
-  if (loginAbortController.value) {
-    loginAbortController.value.abort();
+  if (loginAbortController.signal) {
+    loginAbortController.abort();
+    loginAbortController = null;
   }
+
   serverStore.isServerAnimationActive = false;
   serverStore.connectingProcess = false;
 };

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
@@ -202,6 +202,7 @@ import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted
           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">
@@ -252,7 +253,11 @@ import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted
         <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="serverStore.isIpScannerModalActive ? 'bg-gray-400 opacity-50 pointer-events-none ' : 'bg-gray-200'"
+          :class="
+            serverStore.isIpScannerModalActive || buttonDisabled
+              ? 'bg-gray-400 opacity-50 pointer-events-none '
+              : 'bg-gray-200'
+          "
           type="button"
           @click="internalLogin"
         >
@@ -297,6 +302,7 @@ const usernameError = ref("");
 const passwordError = ref("");
 const sshError = ref("");
 const devices = ref([]);
+const buttonDisabled = ref(false);
 
 const router = useRouter();
 
@@ -359,6 +365,14 @@ watchEffect(() => {
   }
 });
 
+watchEffect(() => {
+  if (!useSSHKey.value && serverStore.loginState.password === "") {
+    buttonDisabled.value = true;
+  } else {
+    buttonDisabled.value = false;
+  }
+});
+
 // Lifecycle
 
 onUnmounted(() => {
@@ -471,9 +485,7 @@ const internalLogin = async () => {
   }
 
   if (isValid) {
-    setTimeout(() => {
-      emit("serverLogin");
-    }, 3000);
+    emit("serverLogin");
   } else {
     serverStore.isServerAnimationActive = false;
     router.push("/login");