Auto update for windows #157

Levminer · Nov 26, 2021 · 0aab107 · 0aab107
1 parent 51c0575
commit 0aab107
Show file tree

Hide file tree

Showing 5 changed files with 174 additions and 0 deletions.
diff --git a/app/application/index.html b/app/application/index.html
@@ -89,6 +89,38 @@ <h5 class="mx-3 flex flex-row m-0 font-bold build-content text-center">You are r
 			</div>
 		</div>
 
+		<!-- auto update -->
+		<div class="w-full text-white bg-popup-blue font-bold autoupdate hidden">
+			<div class="container flex flex-row items-center justify-between px-6 py-4 mx-auto">
+				<div class="flex">
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 relative top-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z" />
+					</svg>
+
+					<div class="mx-3 flex flex-row relative top-3">
+						<p id="updateText" class="mr-3">New Authme version available. Starting the update...</p>
+						<button type="button" id="updateButton" onclick="updateRestart()" class="hidden mr-3 py-1 px-3 relative -top-2.5 bg-white hover:bg-transparent text-black border-2 border-white hover:text-white cursor-pointer transition ease-in duration-200 text-center text-base font-bold rounded-full">
+							<svg xmlns="http://www.w3.org/2000/svg" class="relative top-1" height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+							</svg>
+							Restart
+						</button>
+						<button type="button" onclick="releaseNotes()" class="py-1 px-3 relative -top-2.5 bg-white hover:bg-transparent text-black border-2 border-white hover:text-white cursor-pointer transition ease-in duration-200 text-center text-base font-bold rounded-full">
+							<svg xmlns="http://www.w3.org/2000/svg" class="relative top-1" height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
+							</svg>
+							Release notes
+						</button>
+					</div>
+				</div>
+				<a onclick="this.parentElement.style.display='none'" id="updateClose" class="hidden p-1 transition-colors duration-200 transform rounded-md hover:text-gray-800 cursor-pointer">
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+					</svg>
+				</a>
+			</div>
+		</div>
+
 		<!-- info -->
 		<div class="w-full text-white bg-popup-yellow font-bold info hidden">
 			<div class="container flex flex-row items-center justify-between px-6 py-4 mx-auto">

diff --git a/app/application/src/js/index.js b/app/application/src/js/index.js
@@ -893,3 +893,33 @@ const releaseNotes = () => {
 const manualUpdate = () => {
 	ipc.send("manualUpdate")
 }
+
+/**
+ * Display auto update download info
+ */
+ipc.on("updateInfo", (event, info) => {
+	document.querySelector("#updateText").textContent = `Downloading update: ${info.download_percent}% - ${info.download_speed}MB/s (${info.download_transferred}MB/${info.download_total}MB)`
+})
+
+/**
+ * Display auto update popup if update available
+ */
+const updateAvailable = () => {
+	document.querySelector(".autoupdate").style.display = "block"
+}
+
+/**
+ * Display restart button if download finished
+ */
+const updateDownloaded = () => {
+	document.querySelector("#updateText").textContent = "Successfully downloaded update! Please restart the app, Authme will install the updates in the background and restart automatically."
+	document.querySelector("#updateButton").style.display = "block"
+	document.querySelector("#updateClose").style.display = "block"
+}
+
+/**
+ * Restart app after the download finished
+ */
+const updateRestart = () => {
+	ipc.send("updateRestart")
+}
diff --git a/app/settings/index.html b/app/settings/index.html
@@ -149,6 +149,38 @@ <h5 class="mx-3 flex flex-row m-0 font-bold build-content text-center">You are r
 						</div>
 					</div>
 
+					<!-- auto update -->
+					<div class="w-full text-white bg-popup-blue font-bold autoupdate hidden">
+						<div class="container flex flex-row items-center justify-between px-6 py-4 mx-auto">
+							<div class="flex">
+								<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 relative top-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z" />
+								</svg>
+
+								<div class="mx-3 flex flex-row relative top-3">
+									<p id="updateText" class="mr-3">New Authme version available. Starting the update...</p>
+									<button type="button" id="updateButton" onclick="updateRestart()" class="hidden mr-3 py-1 px-3 relative -top-2.5 bg-white hover:bg-transparent text-black border-2 border-white hover:text-white cursor-pointer transition ease-in duration-200 text-center text-base font-bold rounded-full">
+										<svg xmlns="http://www.w3.org/2000/svg" class="relative top-1" height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+										</svg>
+										Restart
+									</button>
+									<button type="button" onclick="releaseNotes()" class="py-1 px-3 relative -top-2.5 bg-white hover:bg-transparent text-black border-2 border-white hover:text-white cursor-pointer transition ease-in duration-200 text-center text-base font-bold rounded-full">
+										<svg xmlns="http://www.w3.org/2000/svg" class="relative top-1" height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
+										</svg>
+										Release notes
+									</button>
+								</div>
+							</div>
+							<a onclick="this.parentElement.style.display='none'" id="updateClose" class="hidden p-1 transition-colors duration-200 transform rounded-md hover:text-gray-800 cursor-pointer">
+								<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+								</svg>
+							</a>
+						</div>
+					</div>
+
 					<!-- info -->
 					<div class="w-full text-white bg-popup-yellow font-bold info hidden">
 						<div class="container flex flex-row items-center justify-between px-6 py-4 mx-auto">

diff --git a/app/settings/src/js/index.js b/app/settings/src/js/index.js
@@ -862,3 +862,33 @@ const releaseNotes = () => {
 const manualUpdate = () => {
 	ipc.send("manualUpdate")
 }
+
+/**
+ * Display auto update download info
+ */
+ipc.on("updateInfo", (event, info) => {
+	document.querySelector("#updateText").textContent = `Downloading update: ${info.download_percent}% - ${info.download_speed}MB/s (${info.download_transferred}MB/${info.download_total}MB)`
+})
+
+/**
+ * Display auto update popup if update available
+ */
+const updateAvailable = () => {
+	document.querySelector(".autoupdate").style.display = "block"
+}
+
+/**
+ * Display restart button if download finished
+ */
+const updateDownloaded = () => {
+	document.querySelector("#updateText").textContent = "Successfully downloaded update! Please restart the app, Authme will install the updates in the background and restart automatically."
+	document.querySelector("#updateButton").style.display = "block"
+	document.querySelector("#updateClose").style.display = "block"
+}
+
+/**
+ * Restart app after the download finished
+ */
+const updateRestart = () => {
+	ipc.send("updateRestart")
+}
diff --git a/main.js b/main.js
@@ -1,5 +1,6 @@
 const { app, BrowserWindow, Menu, Tray, shell, dialog, clipboard, globalShortcut, nativeTheme, ipcMain: ipc } = require("electron")
 const logger = require("@levminer/lib/logger/main")
+const { autoUpdater } = require("electron-updater")
 const { version, tag } = require("./package.json")
 const { number, date } = require("./build.json")
 const remote = require("@electron/remote/main")
@@ -627,6 +628,55 @@ const createWindow = () => {
 		window_application.webContents.executeJavaScript("focusSearch()")
 	})
 
+	// ? auto updater
+	if (dev === false) {
+		autoUpdater.checkForUpdates()
+	}
+
+	autoUpdater.on("checking-for-update", () => {
+		logger.log("Checking for auto update")
+	})
+
+	autoUpdater.on("update-available", () => {
+		logger.log("Auto update available")
+
+		window_application.webContents.executeJavaScript("updateAvailable()")
+	})
+
+	autoUpdater.on("update-not-available", () => {
+		logger.log("Auto update not available")
+	})
+
+	autoUpdater.on("update-downloaded", () => {
+		logger.log("Update downloaded")
+
+		window_application.webContents.executeJavaScript("updateDownloaded()")
+	})
+
+	autoUpdater.on("error", (error) => {
+		logger.error("Error during auto update", error.stack)
+	})
+
+	autoUpdater.on("download-progress", (progress) => {
+		const download_percent = Math.trunc(progress.percent)
+		const download_speed = (Math.round((progress.bytesPerSecond / 1000000) * 10) / 10).toFixed(1)
+		const download_transferred = Math.trunc(progress.transferred / 1000000)
+		const download_total = Math.trunc(progress.total / 1000000)
+
+		logger.log(`Downloading auto update: ${download_percent}% - ${download_speed}MB/s (${download_transferred}MB/${download_total}MB)`)
+
+		window_application.webContents.send("updateInfo", {
+			download_percent: download_percent,
+			download_speed: download_speed,
+			download_transferred: download_transferred,
+			download_total: download_total,
+		})
+	})
+
+	ipc.on("updateRestart", () => {
+		autoUpdater.quitAndInstall(true, true)
+	})
+
 	// ? global shortcuts
 	if (settings.global_shortcuts.show !== "None") {
 		globalShortcut.register(settings.global_shortcuts.show, () => {