added proper github authentication and exposing ipc function in preload

gittoken.json

@@ -0,0 +1 @@
+{"token": "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"}

index.js

@@ -1,10 +1,17 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow, webContents, ipcRenderer } = require('electron')
+const { Octokit, App } = require("octokit");
 const path = require('path')
+const {token} = require("./gittoken.json");
+
+// Create a personal access token at https://github.com/settings/tokens/new?scopes=repo
+const octokit = new Octokit({auth: token});
+
+var mainWindow;
 
 const createWindow = () => {
     // Create the browser window.
-    const mainWindow = new BrowserWindow({
+    mainWindow = new BrowserWindow({
         width: 600,
         height: 300,
         backgroundColor: '#2f3241',
@@ -29,16 +36,28 @@ const createWindow = () => {
     // mainWindow.webContents.openDevTools()
 }
 
+async function initGithub (){
+    console.log(`token: %s`, token)
+    mainWindow.webContents.send("github-lookup", "looking up releases");
+    // Compare: https://docs.github.com/en/rest/reference/users#get-the-authenticated-user
+    const { data: { login }, } = await octokit.rest.users.getAuthenticated();
+    console.log("Hello, %s", login);
+}
+
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.whenReady().then(() => {
+app.whenReady().then(async () => {
     createWindow()
+    initGithub()
 
-    app.on('activate', () => {
+    app.on('activate', async () => {
         // On macOS it's common to re-create a window in the app when the
         // dock icon is clicked and there are no other windows open.
-        if (BrowserWindow.getAllWindows().length === 0) createWindow()
+        if (BrowserWindow.getAllWindows().length === 0) {
+            createWindow();
+            initGithub();
+        }
     })
 })
 

preload.js

@@ -1,5 +1,11 @@
 // All the Node.js APIs are available in the preload process.
 // It has the same sandbox as a Chrome extension.
+const { contextBridge, ipcRenderer } = require('electron')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+    updateProgress: (callback) => ipcRenderer.on('github-lookup', callback)
+})
+
 window.addEventListener('DOMContentLoaded', () => {
     const replaceText = (selector, text) => {
         const element = document.getElementById(selector)

render.js

@@ -1,3 +1,9 @@
+window.electronAPI.updateProgress(async (_event, value) => {
+    console.log(_event)
+    console.log(value)
+    updateProgressStep(value);
+})
+
 function updateProgressBar(progress){
     document.getElementById("progress-bar").style.width = progress + "%";
     document.getElementById("progress-label").textContent = progress + "%";

renderer.js

@@ -1,7 +0,0 @@
-// You can also put expose this code to the renderer
-// process with the `contextBridge` API
-const { ipcRenderer } = require('electron')
-
-ipcRenderer.on('github-lookup', (_event, arg) => {
-  console.log(arg) // prints "pong" in the DevTools console
-})

style.css

@@ -35,6 +35,7 @@ h4 {
     width: 90%;
     font-size: 15px;
     height: 33px;
+    display: none;
 }
 
 .download:hover {
@@ -45,6 +46,7 @@ h4 {
     width: 100%;
     border-radius: 5px;
     border: 1px solid #74b1be;
+    display: none;
 }
 
 #progress-bar {
@@ -52,12 +54,14 @@ h4 {
     height: 33px;
     border-radius: 5px;
     background-color: #74b1be;
+    display:none;
 }
 
 #progress-label {
     position: absolute;
     color: white;
     padding: 1.5%;
+    display: none;
 }
 
 div[class^=col-] {