finish update dialog

electron/updateCheck.js

@@ -1,13 +1,16 @@
 const semver = require("semver");
 const { appVersion } = require("./appInfo");
 
-const repoUrl =
+const repoApiUrl =
   "https://git.ez-pp.farm/api/v1/repos/EZPPFarm/EZPPLauncher/releases?limit=1";
 
+const releasesUrl =
+  "https://git.ez-pp.farm/EZPPFarm/EZPPLauncher/releases/latest";
+
 module.exports = {
   updateAvailable: async () => {
     try {
-      const latestRelease = await fetch(repoUrl);
+      const latestRelease = await fetch(repoApiUrl);
       const json = await latestRelease.json();
       if (json.length <= 0) return false;
       return {
@@ -18,4 +21,5 @@ module.exports = {
       return { update: false };
     }
   },
+  releasesUrl,
 };

main.js

@@ -1,5 +1,7 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, Menu, ipcMain, dialog } = require("electron");
+const { app, BrowserWindow, Menu, ipcMain, dialog, shell } = require(
+  "electron",
+);
 const path = require("path");
 const serve = require("electron-serve");
 const loadURL = serve({ directory: "public" });
@@ -31,7 +33,7 @@ const richPresence = require("./electron/richPresence");
 const cryptUtil = require("./electron/cryptoUtil");
 const { getHwId } = require("./electron/hwidUtil");
 const { appName, appVersion } = require("./electron/appInfo");
-const { updateAvailable } = require("./electron/updateCheck");
+const { updateAvailable, releasesUrl } = require("./electron/updateCheck");
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -319,6 +321,11 @@ function registerIPCPipes() {
     return config.all();
   });
 
+  ipcMain.handle("ezpplauncher:exitAndUpdate", async (e) => {
+    await shell.openExternal(releasesUrl);
+    app.exit();
+  });
+
   ipcMain.handle("ezpplauncher:launch", async (e) => {
     const configPatch = config.get("patch");
     patch = configPatch != undefined ? configPatch == "true" : true;
@@ -580,7 +587,7 @@ function createWindow() {
   // Open the DevTools and also disable Electron Security Warning.
   if (isDev()) {
     process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = true;
-    // mainWindow.webContents.openDevTools({ mode: "detach" });
+    mainWindow.webContents.openDevTools({ mode: "detach" });
   }
 
   // Emitted when the window is closed.
@@ -595,7 +602,7 @@ function createWindow() {
   // This helps in showing the window gracefully.
   mainWindow.once("ready-to-show", async () => {
     const updateInfo = await updateAvailable();
-    if (!updateInfo.update) {
+    if (updateInfo.update) {
       mainWindow.webContents.send("ezpplauncher:update", updateInfo.release);
     }
     mainWindow.show();

package-lock.json

@@ -22,6 +22,7 @@
         "regedit-rs": "^1.0.2",
         "semver": "^7.5.4",
         "svelte-french-toast": "^1.2.0",
+        "sweetalert2": "^11.10.3",
         "systeminformation": "^5.21.22"
       },
       "devDependencies": {
@@ -8484,6 +8485,15 @@
       "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
       "dev": true
     },
+    "node_modules/sweetalert2": {
+      "version": "11.10.3",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.10.3.tgz",
+      "integrity": "sha512-mZYtQR7v+khyEruq0SsVUa6XIdI9Aue8s2XAIpAwdlLN1T0w7mxKEjyubiBZ3/bLbHC/wGS4wNABvXWubCizvA==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
     "node_modules/systeminformation": {
       "version": "5.21.22",
       "resolved": "https://registry.npmjs.org/systeminformation/-/systeminformation-5.21.22.tgz",

package.json

@@ -49,6 +49,7 @@
     "regedit-rs": "^1.0.2",
     "semver": "^7.5.4",
     "svelte-french-toast": "^1.2.0",
+    "sweetalert2": "^11.10.3",
     "systeminformation": "^5.21.22"
   },
   "devDependencies": {

preload.js

@@ -82,6 +82,10 @@ window.addEventListener("settings-set", async (e) => {
   await ipcRenderer.invoke("ezpplauncher:settings-set", e.detail);
 });
 
+window.addEventListener("updateExit", async () => {
+  await ipcRenderer.invoke("ezpplauncher:exitAndUpdate");
+});
+
 ipcRenderer.addListener("ezpplauncher:launchabort", (e, args) => {
   window.dispatchEvent(
     new CustomEvent("launch-abort"),

src/App.svelte

@@ -6,7 +6,6 @@
     DropdownHeader,
     DropdownDivider,
     Button,
-    Modal,
     Indicator,
   } from "flowbite-svelte";
   import {
@@ -30,11 +29,11 @@
   import toast, { Toaster } from "svelte-french-toast";
   import type { User } from "./types/user";
   import Settings from "./pages/Settings.svelte";
+  import Swal from "sweetalert2";
 
   let user: User | undefined = undefined;
   let loggedIn = false;
 
-  let showUpdateDialog = false;
   let updateInfo: Record<string, unknown>;
 
   currentUser.subscribe((newUser) => {
@@ -54,14 +53,17 @@
     });
   };
 
-  window.addEventListener("update", (e) => {
+  window.addEventListener("update", async (e) => {
     const update = (e as CustomEvent).detail;
-    setTimeout(() => {
+    await Swal.fire({
-      showUpdateDialog = true;
+      html: `EZPPLauncher ${update.tag_name} is now available!<br>Click the Button bellow to download the latest release!`,
-      updateInfo = update;
+      title: "It's your lucky day!",
-
+      allowOutsideClick: false,
-      document.getElementById("updateDialog")?.blur();
+      allowEscapeKey: false,
-    }, 2000);
+      allowEnterKey: false,
+      confirmButtonText: "Thanks!",
+    });
+    window.dispatchEvent(new CustomEvent("updateExit"));
   });
 
   window.addEventListener("launchStatusUpdate", (e) => {
@@ -117,104 +119,104 @@
 
 <Toaster></Toaster>
 
-<!-- TODO: Update dialog-->
+{#if !updateInfo}
-
+  <div class="p-2 flex flex-row justify-between items-center">
-<div class="p-2 flex flex-row justify-between items-center">
+    <div class="flex flex-row items-center animate-fadeIn opacity-0">
-  <div class="flex flex-row items-center animate-fadeIn opacity-0">
+      {#if $currentPage == Page.Settings}
-    {#if $currentPage == Page.Settings}
+        <Button
-      <Button
+          class="dark:active:!bg-gray-900 !ring-0 w-10 h-10 mr-1 rounded-lg animate-sideIn opacity-0 active:scale-95 transition-transform duration-75"
-        class="dark:active:!bg-gray-900 !ring-0 w-10 h-10 mr-1 rounded-lg animate-sideIn opacity-0 active:scale-95 transition-transform duration-75"
+          color="light"
-        color="light"
+          on:click={() => {
-        on:click={() => {
+            currentPage.set(Page.Launch);
-          currentPage.set(Page.Launch);
+          }}
-        }}
-      >
-        <ArrowLeftSolid class="outline-none border-none" size="sm" />
-      </Button>
-    {/if}
-    <img src={ezppLogo} alt="EZPPFarm Logo" class="w-12 h-12 mr-2" />
-    <span class="text-gray-700 dark:text-gray-100 text-xl font-extralight">
-      EZPPLauncher
-    </span>
-  </div>
-  {#if $currentPage == Page.Launch}
-    <div
-      class="flex flex-row gap-2 w-fill cursor-pointer md:order-2 animate-lsideIn opacity-0"
-    >
-      <Avatar
-        class="rounded-lg border dark:border-gray-700 hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800"
-        src={loggedIn
-          ? "https://a.ez-pp.farm/" + user?.id
-          : "https://a.ez-pp.farm/0"}
-        id="avatar-menu"
-      />
-      <!-- TODO: if user has donator, display heart indicator-->
-      {#if $currentUser && $currentUser.id == 1001}
-        <Indicator
-          class="pointer-events-none"
-          color="red"
-          border
-          size="xl"
-          placement="top-right"
         >
-          <span class="text-red-300 text-xs font-bold">
+          <ArrowLeftSolid class="outline-none border-none" size="sm" />
-            <HeartSolid class="select-none pointer-events-none" size="xs" />
+        </Button>
-          </span>
-        </Indicator>
       {/if}
+      <img src={ezppLogo} alt="EZPPFarm Logo" class="w-12 h-12 mr-2" />
+      <span class="text-gray-700 dark:text-gray-100 text-xl font-extralight">
+        EZPPLauncher
+      </span>
     </div>
-    <Dropdown placement="bottom-start" triggeredBy="#avatar-menu">
+    {#if $currentPage == Page.Launch}
-      <DropdownHeader>
+      <div
-        <span class="block text-sm">{loggedIn ? user?.name : "Guest"}</span>
+        class="flex flex-row gap-2 w-fill cursor-pointer md:order-2 animate-lsideIn opacity-0"
-        <span
-          class="block truncate text-sm font-medium text-gray-500 dark:text-gray-200"
-        >
-          {loggedIn ? user?.email : "Please log in!"}
-        </span>
-      </DropdownHeader>
-      <DropdownItem
-        class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
-        on:click={() => {
-          if (!$launching) currentPage.set(Page.Settings);
-        }}
       >
-        <UserSettingsSolid class="select-none outline-none border-none" />
+        <Avatar
-        Settings
+          class="rounded-lg border dark:border-gray-700 hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800"
-      </DropdownItem>
+          src={loggedIn
-      <DropdownDivider />
+            ? "https://a.ez-pp.farm/" + user?.id
-      {#if loggedIn}
+            : "https://a.ez-pp.farm/0"}
+          id="avatar-menu"
+        />
+        <!-- TODO: if user has donator, display heart indicator-->
+        {#if $currentUser && $currentUser.id == 1001}
+          <Indicator
+            class="pointer-events-none"
+            color="red"
+            border
+            size="xl"
+            placement="top-right"
+          >
+            <span class="text-red-300 text-xs font-bold">
+              <HeartSolid class="select-none pointer-events-none" size="xs" />
+            </span>
+          </Indicator>
+        {/if}
+      </div>
+      <Dropdown placement="bottom-start" triggeredBy="#avatar-menu">
+        <DropdownHeader>
+          <span class="block text-sm">{loggedIn ? user?.name : "Guest"}</span>
+          <span
+            class="block truncate text-sm font-medium text-gray-500 dark:text-gray-200"
+          >
+            {loggedIn ? user?.email : "Please log in!"}
+          </span>
+        </DropdownHeader>
         <DropdownItem
           class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
           on:click={() => {
-            if (!$launching) logout();
+            if (!$launching) currentPage.set(Page.Settings);
           }}
         >
-          <ArrowRightFromBracketSolid
+          <UserSettingsSolid class="select-none outline-none border-none" />
-            class="select-none outline-none border-none"
+          Settings
-          />
-          Sign out
         </DropdownItem>
-      {:else}
+        <DropdownDivider />
-        <DropdownItem
+        {#if loggedIn}
-          class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
+          <DropdownItem
-          on:click={() => {
+            class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
-            if (!$launching) currentPage.set(Page.Login);
+            on:click={() => {
-          }}
+              if (!$launching) logout();
-        >
+            }}
-          <ArrowRightToBracketSolid
+          >
-            class="select-none outline-none border-none"
+            <ArrowRightFromBracketSolid
-          />
+              class="select-none outline-none border-none"
-          Login
+            />
-        </DropdownItem>
+            Sign out
-      {/if}
+          </DropdownItem>
-    </Dropdown>
+        {:else}
-  {/if}
+          <DropdownItem
-</div>
+            class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
+            on:click={() => {
+              if (!$launching) currentPage.set(Page.Login);
+            }}
+          >
+            <ArrowRightToBracketSolid
+              class="select-none outline-none border-none"
+            />
+            Login
+          </DropdownItem>
+        {/if}
+      </Dropdown>
+    {/if}
+  </div>
 
-{#if $currentPage == Page.Login}
+  {#if $currentPage == Page.Login}
-  <Login />
+    <Login />
-{:else if $currentPage == Page.Settings}
+  {:else if $currentPage == Page.Settings}
-  <Settings />
+    <Settings />
-{:else}
+  {:else}
-  <Launch />
+    <Launch />
+  {/if}
 {/if}

src/app.pcss

@@ -58,6 +58,15 @@ html .cet-titlebar .cet-control-icon svg {
     background-color: #202020 !important;
     color: #ececec !important;
   }
+
+  .swal2-container {
+    background: #202020 !important;
+  }
+
+  .swal2-container .swal2-popup {
+    background: #323232 !important;
+    color: #fff !important;
+  }
 }
 
 .animatedProgress div {