ADD: update modal added

launcher/public/output.css

@@ -1155,6 +1155,10 @@ video {
   grid-column-start: 9;
 }
 
+.col-start-16{
+  grid-column-start: 16;
+}
+
 .col-end-10{
   grid-column-end: 10;
 }
@@ -1858,6 +1862,26 @@ video {
   height: 100vh;
 }
 
+.h-\[20\%\]{
+  height: 20%;
+}
+
+.h-\[15\%\]{
+  height: 15%;
+}
+
+.h-\[10\%\]{
+  height: 10%;
+}
+
+.h-\[5\%\]{
+  height: 5%;
+}
+
+.h-\[0\%\]{
+  height: 0%;
+}
+
 .max-h-10{
   max-height: 2.5rem;
 }
@@ -2346,6 +2370,22 @@ video {
   width: 100vw;
 }
 
+.w-\[50\%\]{
+  width: 50%;
+}
+
+.w-\[15\%\]{
+  width: 15%;
+}
+
+.w-\[20\%\]{
+  width: 20%;
+}
+
+.w-\[25\%\]{
+  width: 25%;
+}
+
 .min-w-\[100px\]{
   min-width: 100px;
 }
@@ -4124,6 +4164,16 @@ video {
   background-color: rgb(63 63 70 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#70E763\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(112 231 99 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#EB5353\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(235 83 83 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-80{
   --tw-bg-opacity: 0.8;
 }

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

@@ -1,8 +1,14 @@
 import ServerHeader from './components/ServerHeader.vue';
 <template>
-  <div 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">
+  <div
+    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="(serverStore.isServerAnimationActive || serverStore.connectingProcess) && !serverStore.errorMsgExists && !isTwoFactorAuthActive"
+      v-if="
+        (serverStore.isServerAnimationActive || serverStore.connectingProcess) &&
+        !serverStore.errorMsgExists &&
+        !isTwoFactorAuthActive
+      "
       @cancel-login="cancelLoginHandler"
     />
     <ServerHeader @tab-picker="tabPicker" />
@@ -16,12 +22,34 @@ import ServerHeader from './components/ServerHeader.vue';
       @quick-login="quickLoginHandler"
     />
     <PasswordModal v-if="serverStore.isPasswordChanged" :res="serverStore.passResponse" />
-    <GenerateKey v-if="serverStore.isGenerateModalActive" @close-modal="closeGenerateModal" @generate-key="generateKeyHandler" />
-    <RemoveModal v-if="serverStore.isRemoveModalActive" @remove-handler="removeServerHandler" @close-window="closeWindow" />
-    <TwofactorModal v-if="isTwoFactorAuthActive" @submit-auth="submitAuthHandler" @close-window="closeAndCancel" />
-    <ChangeOTPModal v-if="serverStore.isOTPActive" @submit-password="submitPasswordHandler" @close-window="closeAndCancel" />
-    <ErrorModal v-if="serverStore.errorMsgExists" :description="serverStore.error" @close-window="closeErrorDialog" />
+    <GenerateKey
+      v-if="serverStore.isGenerateModalActive"
+      @close-modal="closeGenerateModal"
+      @generate-key="generateKeyHandler"
+    />
+    <RemoveModal
+      v-if="serverStore.isRemoveModalActive"
+      @remove-handler="removeServerHandler"
+      @close-window="closeWindow"
+    />
+    <TwofactorModal
+      v-if="isTwoFactorAuthActive"
+      @submit-auth="submitAuthHandler"
+      @close-window="closeAndCancel"
+    />
+    <ChangeOTPModal
+      v-if="serverStore.isOTPActive"
+      @submit-password="submitPasswordHandler"
+      @close-window="closeAndCancel"
+    />
+    <ErrorModal
+      v-if="serverStore.errorMsgExists"
+      :description="serverStore.error"
+      @close-window="closeErrorDialog"
+    />
     <QRcodeModal v-if="authStore.isBarcodeModalActive" @close-window="closeBarcode" />
+    <UpdateModal v-if="true" />
+    <!-- :version="serverStore.updateVersion" @update="serverStore.updateHandler" @close-window="serverStore.closeUpdateModal" -->
   </div>
 </template>
 
@@ -34,6 +62,7 @@ import SwitchAnimation from "./components/SwitchAnimation.vue";
 import TwofactorModal from "./components/modals/TwofactorModal.vue";
 import GenerateKey from "./components/modals/GenerateKey.vue";
 import ChangeOTPModal from "./components/modals/ChangeOTPModal.vue";
+import UpdateModal from "./components/modals/UpdateModal.vue";
 
 import { ref, onMounted, watchEffect, onUnmounted } from "vue";
 import ControlService from "@/store/ControlService";
@@ -218,7 +247,9 @@ const serverHandler = (server) => {
     server.isSelected = true;
   }
 
-  serverStore.savedServers.savedConnections = [...serverStore.savedServers.savedConnections];
+  serverStore.savedServers.savedConnections = [
+    ...serverStore.savedServers.savedConnections,
+  ];
 };
 
 //Change password handling
@@ -256,7 +287,9 @@ const closeBarcode = () => {
 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) =>
+      item.host !== serverStore.selectedServerToConnect?.host &&
+      item.name !== serverStore.selectedServerToConnect?.name
   );
 
   await remove();
@@ -280,7 +313,9 @@ const readSSHKeyFile = async () => {
 const confirmDelete = async (key) => {
   serverStore.sshKeys = serverStore.sshKeys.filter((item) => item !== key);
   try {
-    await ControlService.writeSSHKeyFile(serverStore.sshKeys.filter((item) => item !== key));
+    await ControlService.writeSSHKeyFile(
+      serverStore.sshKeys.filter((item) => item !== key)
+    );
     await readSSHKeyFile();
   } catch (err) {
     console.log(err);

launcher/src/components/UI/server-management/components/modals/UpdateModal.vue

@@ -0,0 +1,61 @@
+<template>
+  <custom-modal
+    icon=" /animation/launcher-update/update-loading-modal.gif"
+    icon-size="w-[30%]"
+    bg-color="bg-[#336666]"
+    :main-title="`Update ${version} available`"
+    confirm-text=""
+    @close-window="closeWindow"
+  >
+    <template #content>
+      <div
+        class="update-content-parent w-full h-full grid grid-cols-24 grid-rows-12 items-center"
+      >
+        <span
+          class="col-start-5 col-end-21 row-start-2 row-end-4 text-md text-center text-gray-300"
+          >Do you want to update now?</span
+        >
+        <div
+          class="btn-modal col-start-3 col-end-10 row-start-8 row-span-4 h-full rounded-2xl px-2 font-semibold text-xl text-gray-700 bg-[#70E763] flex items-center justify-center uppercase cursor-pointer"
+          @click="submitUpdate"
+        >
+          <span>accept</span>
+        </div>
+        <div
+          class="btn-modal col-start-16 col-end-23 row-start-8 row-span-4 h-full rounded-2xl px-2 font-semibold text-xl text-gray-100 bg-[#EB5353] flex items-center justify-center uppercase cursor-pointer"
+          @click="closeWindow"
+        >
+          <span>deny</span>
+        </div>
+      </div>
+    </template>
+  </custom-modal>
+</template>
+
+<script setup>
+import CustomModal from "../../../node-page/components/modals/CustomModal.vue";
+// import i18n from "@/includes/i18n";
+// const t = i18n.global.t;
+defineProps({
+  version: String,
+});
+
+const emit = defineEmits(["update", "close-window"]);
+
+const submitUpdate = () => {
+  emit("update");
+};
+
+const closeWindow = () => {
+  emit("close-window");
+};
+</script>
+
+<style scoped>
+.btn-modal:active {
+  box-shadow: 1px 1px 10px 1px #171717 inset;
+}
+.btn-modal:active span {
+  transform: scale(0.9);
+}
+</style>