UPDATE: tooltips and languages (#1921)

* update the fetching

* fix the new api for the testers

* Revert "fix the new api for the testers"

This reverts commit ab01562.

* Revert "update the fetching"

This reverts commit b5a052c.

* Fix the nuke modal animation

* Revert "Fix the nuke modal animation"

This reverts commit 3c5b547.

* FIX: footer and multi Server size

* ADD: tooltips to the server details

* ADD: tooltip for change the password

* ADD:tooltip to the server panel

* ADD:tooltip to the login page

* ADD: tooltips to ssh manaement tab

* ADD: tooltips to os update management

* ADD: tooltip to server node setting

* ADD: tooltips to the 2fa tab

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.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -1808,6 +1808,10 @@ video {
   height: 95%;
 }
 
+.h-\[95\.5\%\]{
+  height: 95.5%;
+}
+
 .h-fit{
   height: -webkit-fit-content;
   height: -moz-fit-content;
@@ -2380,12 +2384,6 @@ video {
       flex-shrink: 0;
 }
 
-.flex-grow{
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-}
-
 .origin-top-right{
   -webkit-transform-origin: top right;
           transform-origin: top right;
@@ -5513,6 +5511,11 @@ html body {
   border-color: rgb(77 117 117 / var(--tw-border-opacity));
 }
 
+.hover\:border-amber-300:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(252 211 77 / var(--tw-border-opacity));
+}
+
 .hover\:border-blue-400:hover{
   --tw-border-opacity: 1;
   border-color: rgb(96 165 250 / var(--tw-border-opacity));

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

@@ -1,7 +1,7 @@
 import ServerHeader from './components/ServerHeader.vue';
 <template>
   <div
-    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"
+    class="w-full h-[95.5%] 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="
@@ -32,16 +32,8 @@ import ServerHeader from './components/ServerHeader.vue';
       @remove-handler="removeServerHandler"
       @close-window="closeWindow"
     />
-    <TwofactorModal
-      v-if="isTwoFactorAuthActive"
-      @submit-auth="submitAuthHandler"
-      @close-window="closeAndCancel"
-    />
-    <ErrorModal
-      v-if="serverStore.errorMsgExists"
-      :description="serverStore.error"
-      @close-window="closeErrorDialog"
-    />
+    <TwofactorModal v-if="isTwoFactorAuthActive" @submit-auth="submitAuthHandler" @close-window="closeAndCancel" />
+    <ErrorModal v-if="serverStore.errorMsgExists" :description="serverStore.error" @close-window="closeErrorDialog" />
     <QRcodeModal v-if="authStore.isBarcodeModalActive" @close-window="closeBarcode" />
   </div>
 </template>
@@ -220,9 +212,7 @@ const serverHandler = (server) => {
     server.isSelected = true;
   }
 
-  serverStore.savedServers.savedConnections = [
-    ...serverStore.savedServers.savedConnections,
-  ];
+  serverStore.savedServers.savedConnections = [...serverStore.savedServers.savedConnections];
 };
 
 //Change password handling
@@ -260,8 +250,7 @@ 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();
@@ -285,9 +274,7 @@ const readSSHKeyFile = async () => {
 const confirmDelete = async (key) => {
   serverStore.sshKeys = serverStore.sshKeys.filter((item) => item !== key);
   try {
-    await ControlService.writeSSHKeyFile(
-      serverStore.sshKeys.filter((item) => item !== key)
-    );
+    await ControlService.writeSSHKeyFile(serverStore.sshKeys.filter((item) => item !== key));
     await readSSHKeyFile();
   } catch (err) {
     console.log(err);

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

@@ -2,34 +2,30 @@
   <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"
           v-model="serverStore.loginState.hostName"
           type="text"
-          :placeholder="`${$t('multiServer.serverName')}`"
+          :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="serverNameChanged = true"
+          @mouseenter="footerStore.cursorLocation = `${t('loginForm.addServerName')}`"
+          @mouseleave="footerStore.cursorLocation = ''"
         />
 
         <div
@@ -41,8 +37,8 @@
             alt="Trash Icon"
             :class="removeButtonDisabled ? 'opacity-50 pointer-events-none ' : ''"
             @mousedown.prevent
-            @mouseenter="removeHovered = true"
-            @mouseleave="removeHovered = false"
+            @mouseenter="(removeHovered = true), (footerStore.cursorLocation = `${t('loginForm.rem')}`)"
+            @mouseleave="(removeHovered = false), (footerStore.cursorLocation = '')"
             @click="removeServer"
           />
 
@@ -59,8 +55,8 @@
             src="/img/icon/server-management-icons/plus-icon.png"
             alt="icon"
             @mousedown.prevent
-            @mouseenter="addHovered = true"
-            @mouseleave="addHovered = false"
+            @mouseenter="(addHovered = true), (footerStore.cursorLocation = `${t('loginForm.save')}`)"
+            @mouseleave="(addHovered = false), (footerStore.cursorLocation = '')"
             @click="saveServer"
           />
           <div
@@ -71,9 +67,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"
@@ -90,6 +84,8 @@
             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
+            @mouseenter="footerStore.cursorLocation = `${t('loginForm.ipOrHost')}`"
+            @mouseleave="footerStore.cursorLocation = ''"
             @change="serverIPChanged = true"
           />
           <img
@@ -105,9 +101,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"
@@ -120,11 +114,11 @@
           type="text"
           placeholder="22"
           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"
+          @mouseenter="footerStore.cursorLocation = `${t('loginForm.port')}`"
+          @mouseleave="footerStore.cursorLocation = ''"
         />
       </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"
@@ -139,11 +133,11 @@
           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="serverUsernameChanged = true"
+          @mouseenter="footerStore.cursorLocation = `${t('loginForm.uName')}`"
+          @mouseleave="footerStore.cursorLocation = ''"
         />
       </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
@@ -152,6 +146,8 @@
         <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"
+          @mouseenter="footerStore.cursorLocation = `${t('loginForm.tgll')}`"
+          @mouseleave="footerStore.cursorLocation = ''"
         >
           <input
             id="AcceptConditions"
@@ -193,9 +189,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 +216,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
@@ -253,6 +240,8 @@
           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="******************"
+          @mouseenter="footerStore.cursorLocation = `${t('loginForm.pass')}`"
+          @mouseleave="footerStore.cursorLocation = ''"
         />
       </div>
       <div
@@ -273,12 +262,12 @@
           placeholder="******************"
           required
           @input="validatePassword"
+          @mouseenter="footerStore.cursorLocation = `${t('loginForm.pass')}`"
+          @mouseleave="footerStore.cursorLocation = ''"
         />
       </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"
@@ -315,9 +304,14 @@ import { useServers } from "@/store/servers";
 import { useServerLogin } from "@/composables/useLogin";
 import ControlService from "@/store/ControlService";
 import { useRouter } from "vue-router";
+import { useFooter } from "@/store/theFooter";
+import i18n from "@/includes/i18n";
+
+const t = i18n.global.t;
 
 const emit = defineEmits(["serverLogin"]);
 
+const footerStore = useFooter();
 const serverStore = useServers();
 const router = useRouter();
 
@@ -478,8 +472,7 @@ const validateServerName = () => {
 const validateIP = () => {
   const ipOrHostname = serverStore.loginState.ip || "";
 
-  ipError.value =
-    ipOrHostname.trim().length > 0 ? "" : "IP address or hostname is required.";
+  ipError.value = ipOrHostname.trim().length > 0 ? "" : "IP address or hostname is required.";
 };
 
 const validateUsername = () => {

launcher/src/components/UI/server-management/components/saved-servers/ServerPanel.vue

@@ -13,8 +13,10 @@
         ref="searchInputRef"
         v-model="searchQuery"
         type="text"
-        :placeholder="`${$t('multiServer.serchFor')}`"
+        :placeholder="`${t('multiServer.serchFor')}`"
         class="w-full h-8 rounded-md border-gray-200 py-2.5 pe-10 shadow-sm sm:text-sm px-2"
+        @mouseenter="footerStore.cursorLocation = `${t('serverList.search')}`"
+        @mouseleave="footerStore.cursorLocation = ''"
       />
 
       <span class="absolute inset-y-0 end-0 grid w-10 place-content-center">
@@ -49,11 +51,15 @@
         :server="server"
         @select-server="selectServer"
         @quick-login="quickLogin"
+        @mouseenter="footerStore.cursorLocation = `${server.name}`"
+        @mouseleave="footerStore.cursorLocation = ''"
       />
     </div>
     <button
       class="w-full h-[50px] self-end col-start-1 col-span-full row-start-11 row-span-2 bg-gray-200 rounded-md px-4 py-2 flex justify-center items-center shadow-lg shadow-black active:shadow-none active:scale-95 cursor-pointer space-x-4 transition-all duration-200 ease-in-out hover:bg-[#336666] text-gray-800 hover:text-gray-100"
       @click="serverLogin"
+      @mouseenter="footerStore.cursorLocation = `${t('serverList.addServer')}`"
+      @mouseleave="footerStore.cursorLocation = ''"
     >
       <img
         class="w-7 h-7 border border-gray-500 bg-teal-500 rounded-full p-1"
@@ -70,9 +76,14 @@ import ControlService from "@/store/ControlService";
 import { useServers } from "@/store/servers";
 import { useControlStore } from "@/store/theControl";
 import { onMounted, watch, ref } from "vue";
+import { useFooter } from "@/store/theFooter";
+import i18n from "@/includes/i18n";
+
+const t = i18n.global.t;
 
 const emit = defineEmits(["selectServer", "serverLogin", "quickLogin"]);
 
+const footerStore = useFooter();
 const serverStore = useServers();
 const controlStore = useControlStore();
 const searchQuery = ref("");