show error modal when update failed

README.md

@@ -19,5 +19,14 @@ The Launcher is a "plug and play thing", download it, place it on the desktop an
 * [axios](https://www.npmjs.com/package/axios)
 * [jquery](https://www.npmjs.com/package/jquery)
 
+## Build from source
+
+- clone repo
+- cd into the repo
+- use `yarn install` to install all dependencies
+- (if node-gyp cant build the natives try clearing the cache at `%localappdata%\node-gyp\Cache\`)
+- run `yarn rebuild` to rebuild the natives to the current `NODE_MODULE_VERSION`
+- use the buildscript `pack-win` to build a executeable
+
 ## License
 [AGPL-3.0](https://choosealicense.com/licenses/agpl-3.0/)

app.js

@@ -2,6 +2,7 @@ const { app, BrowserWindow, ipcMain, dialog } = require('electron');
 const { setupTitlebar, attachTitlebarToWindow } = require('custom-electron-titlebar/main');
 const windowManager = require('./ui/windowManager');
 const osuUtil = require('./osuUtil');
+const ezppUtil = require('./ezppUtil');
 const config = require('./config');
 const fs = require('fs');
 
@@ -21,6 +22,8 @@ const run = () => {
 
         mainWindow = createWindow();
         mainWindow.on('show', async () => {
+            await updateConfigVars(mainWindow);
+            await tryLogin(mainWindow);
             await doUpdateCheck(mainWindow);
         })
         app.on('activate', function () {
@@ -30,6 +33,19 @@ const run = () => {
             app.quit()
         })
         ipcMain.handle('launch', async () => {
+            const osuConfig = await osuUtil.getLatestConfig(tempOsuPath);
+            const username = await config.get('username');
+            const password = await config.get('password');
+            if (password && username) {
+                await osuUtil.setConfigValue(osuConfig.path, "SaveUsername", "1");
+                await osuUtil.setConfigValue(osuConfig.path, "SavePassword", "1");
+                await osuUtil.setConfigValue(osuConfig.path, "Username", username);
+                await osuUtil.setConfigValue(osuConfig.path, "Password", await osuUtil.decryptString(password));
+                await osuUtil.setConfigValue(osuConfig.path, "CredentialEndpoint", "ez-pp.farm");
+            } else {
+                await osuUtil.setConfigValue(osuConfig.path, "Username", "");
+                await osuUtil.setConfigValue(osuConfig.path, "Password", "");
+            }
             const result = await osuUtil.startOsuWithDevServer(tempOsuPath, "ez-pp.farm", async () => {
                 await doUpdateCheck(mainWindow);
             });
@@ -66,6 +82,12 @@ const run = () => {
                         type: "update-complete"
                     })
                 });
+                downloadTask.on('error', () => {
+                    mainWindow.webContents.send('status_update', {
+                        type: "error",
+                        message: "An error occured while updating."
+                    });
+                });
 
             } else
                 mainWindow.webContents.send('status_update', {
@@ -84,15 +106,64 @@ const run = () => {
 
             if (validOsuDir) await config.set("osuPath", folderPath);
 
-            return validOsuDir;
+            return { validOsuDir, folderPath };
+        })
+        ipcMain.handle('perform-login', async (event, data) => {
+            const { username, password } = data;
+            const loginData = await ezppUtil.performLogin(username, password);
+            if (loginData && loginData.code === 200) {
+                await config.set("username", username);
+                await config.set("password", await osuUtil.encryptString(password));
+            }
+            return loginData;
+        })
+        ipcMain.on('perform-logout', async (event) => {
+            await config.remove("username");
+            await config.remove("password");
         })
     })
 }
 
-async function doUpdateCheck(window) {
+async function updateConfigVars(window) {
     const osuPath = await config.get("osuPath", "");
+    window.webContents.send('config_update', {
+        osuPath: osuPath
+    })
+}
+
+async function tryLogin(window) {
+    const username = await config.get("username", "");
+    const password = await config.get("password", "");
+    if ((username && username.length > 0) && (password && password.length > 0)) {
+        const passwordPlain = await osuUtil.decryptString(password);
+        const loginResponse = await ezppUtil.performLogin(username, passwordPlain);
+        if (loginResponse && loginResponse.code === 200) {
+            window.webContents.send('account_update', {
+                type: "loggedin",
+                user: loginResponse.user
+            })
+        } else {
+            window.webContents.send('account_update', {
+                type: "login-failed"
+            })
+        }
+    } else {
+        window.webContents.send('account_update', {
+            type: "not-loggedin"
+        })
+    }
+}
+
+async function doUpdateCheck(window) {
+    const osuPath = await config.get("osuPath");
+    if (!osuPath || osuPath.trim == "") {
+        window.webContents.send('status_update', {
+            type: "missing-folder"
+        })
+        return;
+    }
     const isValid = await osuUtil.isValidOsuFolder(osuPath);
-    if (osuPath.trim == "" || !isValid) {
+    if (!isValid) {
         window.webContents.send('status_update', {
             type: "missing-folder"
         })

assets/launcher.css

@@ -23,6 +23,7 @@
     width: 100%;
 }
 
+.loading-section,
 .login-section {
     margin-top: 35px;
     display: flex;
@@ -31,8 +32,23 @@
     align-items: center;
 }
 
+.loading-section {
+    margin-top: 0;
+}
+
+.loading-section {}
+
+.loading-indicator {}
+
+.loading-indicator-text {
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+}
+
 .folder-section {
-    margin-top: 80px;
+    margin-top: 45px;
     display: flex;
     flex-flow: column;
     justify-content: center;
@@ -164,4 +180,126 @@
 
 .clickable {
     cursor: pointer;
+}
+
+.loader {
+    position: relative;
+    margin: 0px auto;
+    width: 200px;
+    height: 200px;
+    transform: scale(0.5);
+}
+
+.loader:before {
+    content: '';
+    display: block;
+    padding-top: 100%;
+}
+
+.circular-loader {
+    -webkit-animation: rotate 2s linear infinite;
+    animation: rotate 2s linear infinite;
+    height: 100%;
+    -webkit-transform-origin: center center;
+    -ms-transform-origin: center center;
+    transform-origin: center center;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: auto;
+}
+
+.loader-path {
+    stroke-dasharray: 150, 200;
+    stroke-dashoffset: -10;
+    -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+    stroke-linecap: round;
+}
+
+@-webkit-keyframes rotate {
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes rotate {
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@-webkit-keyframes dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35;
+    }
+
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124;
+    }
+}
+
+@keyframes dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35;
+    }
+
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124;
+    }
+}
+
+@-webkit-keyframes color {
+    0% {
+        stroke: #fff;
+    }
+
+    40% {
+        stroke: #fff;
+    }
+
+    66% {
+        stroke: #fff;
+    }
+
+    80%,
+    90% {
+        stroke: #fff;
+    }
+}
+
+@keyframes color {
+    0% {
+        stroke: #fff;
+    }
+
+    40% {
+        stroke: #fff;
+    }
+
+    66% {
+        stroke: #fff;
+    }
+
+    80%,
+    90% {
+        stroke: #fff;
+    }
 }

config.js

@@ -47,4 +47,26 @@ async function set(key, value) {
     await fs.promises.writeFile(configLocation, arr.join('\n'));
 }
 
-module.exports = { get, set }
+async function remove(key) {
+    const configValues = new Map();
+    const fileStream = await fs.promises.readFile(configLocation, "utf-8");
+    const lines = fileStream.split(/\r?\n/)
+    for (const line of lines) {
+        if (line.includes('=')) {
+            const argsPair = line.split('=', 2);
+            const keyname = argsPair[0]
+            const value = argsPair[1];
+            configValues.set(keyname, value);
+        }
+    }
+
+    const arr = [];
+    for (var [storkey, storvalue] of configValues.entries()) {
+        if (storkey != key)
+            arr.push(`${storkey}=${storvalue}`);
+    }
+
+    await fs.promises.writeFile(configLocation, arr.join('\n'));
+}
+
+module.exports = { get, set, remove }

ezppUtil.js

@@ -0,0 +1,10 @@
+const axios = require('axios').default;
+
+const loginCheckEndpoint = 'https://new.ez-pp.farm/login/check';
+
+const performLogin = async (username, password) => {
+    const result = await axios.post(loginCheckEndpoint, { username, password });
+    return result.data;
+}
+
+module.exports = { performLogin };

html/index.html

@@ -25,7 +25,26 @@
                 <div class="launcher-window position-relative overflow-hidden">
                     <div class="container px-1 py-2 w-100 mw-100 h-100">
                         <div class="row d-flex justify-content-center align-items-center h-100">
-                            <div id="launch-page" class="sections col col-xl-10">
+                            <div id="loading-page" class="sections col col-xl-10" style="//display: none;">
+                                <div class="launch-section flex-row">
+                                    <div class="server-logo">
+                                        <img src="../assets/logo.png" height="120">
+                                    </div>
+                                    <div class="app-name">EZPPLauncher</div>
+                                </div>
+                                <div class="loading-section">
+                                    <div class="loading-indicator">
+                                        <div class="loader">
+                                            <svg class="circular-loader" viewBox="25 25 50 50">
+                                                <circle class="loader-path" cx="50" cy="50" r="20" fill="none"
+                                                    stroke="#fff" stroke-width="2" />
+                                            </svg>
+                                        </div>
+                                    </div>
+                                    <div class="loading-indicator-text">Loading... Please wait</div>
+                                </div>
+                            </div>
+                            <div id="launch-page" class="sections col col-xl-10" style="display: none;">
                                 <div class="account-section">
                                     <div class="user-image">
                                         <img id="user-img" src="https://a.ez-pp.farm/0">
@@ -41,17 +60,17 @@
                                 </div>
                                 <div class="launch-section">
                                     <div class="server-logo">
-                                        <img src="../assets/logo.png" height="120">
+                                        <img src="../assets/logo.png" height="150">
                                     </div>
                                     <div class="launch-button">
-                                        <button class="btn btn-lg btn-launch btn-accent">Launch</button>
+                                        <button class="btn btn-lg btn-launch btn-accent" id="launch-btn">Launch</button>
                                     </div>
                                 </div>
                                 <div class="folder-section">
                                     <div class="folder-location">
-                                        Current osu! directory: C:\Users\Thomas\AppData\Local\osu!
+                                        Current osu! directory: <span id="currentOsuPath"></span>
                                     </div>
-                                    <div class="folder-action">
+                                    <div class="folder-action" id="change-folder-btn">
                                         Not right?
                                     </div>
                                 </div>
@@ -65,18 +84,18 @@
                                 </div>
                                 <div class="login-section">
                                     <div class="form-outline mb-3 w-50">
-                                        <input type="text" id="username" class="form-control form-control-lg" />
-                                        <label class="form-label" for="username">Username</label>
+                                        <input type="text" id="login-username" class="form-control form-control-lg" />
+                                        <label class="form-label" for="login-username">Username</label>
                                     </div>
                                     <div class="form-outline mb-3 w-50">
-                                        <input type="password" id="password" class="form-control form-control-lg" />
-                                        <label class="form-label" for="password">Password</label>
+                                        <input type="password" id="login-password" class="form-control form-control-lg" />
+                                        <label class="form-label" for="login-password">Password</label>
                                     </div>
                                     <div class="pt-1 mb-4">
                                         <div class="btn-grouped">
                                             <button id="action-cancel" class="btn btn-grey btn-lg"
                                                 type="button">Cancel</button>
-                                            <button id="login" class="btn btn-accent btn-lg"
+                                            <button id="action-login" class="btn btn-accent btn-lg"
                                                 type="button">Login</button>
                                         </div>
                                     </div>

osuUtil.js

@@ -3,11 +3,13 @@ const fu = require('./fileUtil');
 const path = require('path');
 const crypto = require('crypto');
 const axios = require('axios').default;
+const dpapi = require('wincrypt');
 const executeUtil = require('./executeUtil');
 const { EventEmitter } = require('events');
 const { DownloaderHelper } = require('node-downloader-helper');
 
 const checkUpdateURL = "https://osu.ppy.sh/web/check-updates.php?action=check&stream=";
+const osuEncryptBuffer = Buffer.from('cu24180ncjeiu0ci1nwui', "utf-8")
 const osuEntities = [
     'avcodec-51.dll',
     'avformat-52.dll',
@@ -47,12 +49,12 @@ async function isValidOsuFolder(path) {
 }
 
 async function getLatestConfig(osuPath) {
-    const allFiles = await fs.promises.readdir(osuPath);
     const configFileInfo = {
         name: "",
         path: "",
-        lastModified: 0,
         get: async (key) => {
+            if (!configFileInfo.path)
+                return "";
             const fileStream = await fs.promises.readFile(configFileInfo.path, "utf-8");
             const lines = fileStream.split(/\r?\n/)
             for (const line of lines) {
@@ -67,17 +69,10 @@ async function getLatestConfig(osuPath) {
             }
         }
     }
-    for (const file of allFiles) {
-        if (file.startsWith('osu!.') && file.endsWith('.cfg') && file !== "osu!.cfg") {
-            const fullFilePath = path.join(osuPath, file);
-            const fileStats = await fs.promises.stat(fullFilePath);
-            const lastModified = fileStats.mtimeMs;
-            if (lastModified > configFileInfo.lastModified) {
-                configFileInfo.name = file;
-                configFileInfo.path = fullFilePath;
-                configFileInfo.lastModified = lastModified;
-            }
-        }
+    const userOsuConfig = path.join(osuPath, `osu!.${process.env['USERNAME']}.cfg`)
+    if (fs.existsSync(userOsuConfig)) {
+        configFileInfo.name = `osu!.${process.env['USERNAME']}.cfg`;
+        configFileInfo.path = userOsuConfig;
     }
     return configFileInfo;
 }
@@ -103,14 +98,14 @@ async function filesThatNeedUpdate(osuPath, updateFiles) {
                     fileName,
                     fileURL
                 })
-                // console.log("hashes are not matching", `(${existingFileMD5} - ${fileHash})`);
+                //console.log("hashes are not matching", `(${existingFileMD5} - ${fileHash})`);
             }
         } else {
             filesToDownload.push({
                 fileName,
                 fileURL
             });
-            // console.log("new file " + fileName);
+            //console.log("new file " + fileName);
         }
     }
     return filesToDownload;
@@ -121,6 +116,7 @@ async function downloadUpdateFiles(osuPath, filesToUpdate) {
     let completedIndex = 0;
     filesToUpdate.forEach(async (fileToUpdate) => {
         const filePath = path.join(osuPath, fileToUpdate.fileName);
+        console.log(filePath);
         if (await fu.existsAsync(filePath))
             await fs.promises.rm(filePath);
 
@@ -133,6 +129,10 @@ async function downloadUpdateFiles(osuPath, filesToUpdate) {
             if (completedIndex >= filesToUpdate.length)
                 eventEmitter.emit('completed');
         });
+        fileDownload.on('error', (err) => {
+            console.log(err);
+            eventEmitter.emit('error');
+        });
 
         fileDownload.start().catch(err => console.error(err));
     });
@@ -147,4 +147,37 @@ async function startWithDevServer(osuPath, serverDomain, onExit) {
     return true;
 }
 
-module.exports = { isValidOsuFolder, getLatestConfig, getUpdateFiles, filesThatNeedUpdate, downloadUpdateFiles, startOsuWithDevServer: startWithDevServer }
+async function encryptString(value) {
+    return Buffer.from(await dpapi.protect(Buffer.from(value, 'utf-8'), osuEncryptBuffer, 'CurrentUser'), 'utf-8').toString('base64');
+}
+
+async function decryptString(value) {
+    const decrypted = await dpapi.unprotect(Buffer.from(value, 'base64'), osuEncryptBuffer, 'CurrentUser');
+    return decrypted.toString();
+}
+
+async function setConfigValue(configPath, key, value) {
+    const configLines = new Array();
+    const fileStream = await fs.promises.readFile(configPath, "utf-8");
+    const lines = fileStream.split(/\r?\n/)
+    for (const line of lines) {
+        if (line.includes(' = ')) {
+            const argsPair = line.split(' = ', 2);
+            const keyname = argsPair[0].trim();
+            if (key == keyname) {
+                configLines.push(`${keyname} = ${value}`);
+            } else {
+                configLines.push(line);
+            }
+        } else {
+            configLines.push(line);
+        }
+    }
+    await fs.promises.writeFile(configPath, configLines.join("\n"), 'utf-8');
+}
+
+module.exports = {
+    isValidOsuFolder, getLatestConfig, getUpdateFiles, filesThatNeedUpdate,
+    downloadUpdateFiles, startOsuWithDevServer: startWithDevServer, setConfigValue,
+    encryptString, decryptString
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ezpplauncher",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "app.js",
   "license": "MIT",
   "author": "HorizonCode",
@@ -32,6 +32,8 @@
   },
   "scripts": {
     "start": "electron .",
+    "test": "electron ./test/encrypt.js",
+    "rebuild": "electron-rebuild -f -w wincrypt",
     "pack-win": "electron-builder --x64",
     "pack-win32": "electron-builder --ia32",
     "pack-winarm": "electron-builder --arm64",
@@ -40,15 +42,17 @@
     "dist": "electron-builder"
   },
   "devDependencies": {
-    "electron": "^17.4.3",
+    "electron": "^21.1.1",
     "electron-builder": "^23.0.3",
-    "electron-packager": "^15.5.1"
+    "electron-packager": "^15.5.1",
+    "electron-rebuild": "^3.2.9"
   },
   "dependencies": {
     "axios": "^0.27.2",
     "custom-electron-titlebar": "^4.1.1",
     "jquery": "^3.6.0",
     "node-downloader-helper": "^2.1.4",
-    "sweetalert2": "^11.5.2"
+    "sweetalert2": "^11.5.2",
+    "wincrypt": "^1.5.0"
   }
 }

preload/preload.js

@@ -2,6 +2,8 @@ const { ipcRenderer } = require('electron');
 const { Titlebar, Color } = require('custom-electron-titlebar');
 const appInfo = require('../appInfo');
 let titlebar;
+let currentPage = "loading";
+let loggedIn = false;
 
 window.addEventListener('DOMContentLoaded', () => {
     titlebar = new Titlebar({
@@ -17,11 +19,21 @@ window.addEventListener('DOMContentLoaded', () => {
     const axios = require('axios').default;
     const Swal = require('sweetalert2');
 
-    const loggedIn = false;
-
     $('#account-action').on('click', () => {
         if (!loggedIn) {
             changePage('login');
+        } else {
+            $('#welcome-text').text(`Nice to see you!`);
+            $('#account-action').text('Click to login');
+            $('#user-img').prop('src', `https://a.ez-pp.farm/0`)
+            loggedIn = false;
+            ipcRenderer.send("perform-logout");
+            Swal.fire({
+                title: 'See ya soon!',
+                text: "Successfully logged out!",
+                icon: 'success',
+                confirmButtonText: 'Okay'
+            });
         }
     });
 
@@ -60,17 +72,46 @@ window.addEventListener('DOMContentLoaded', () => {
         }
     });
 
-    $("#folder-btn").on('click', async () => {
-        const success = await ipcRenderer.invoke('set-osu-dir');
-        if (success == undefined)
+    $("#action-login").on('click', async () => {
+        const username = $('#login-username').val();
+        const password = $('#login-password').val();
+        $("#action-login").attr('disabled', true);
+        $("#action-cancel").attr('disabled', true);
+        const responseData = await ipcRenderer.invoke('perform-login', { username, password });
+        $("#action-login").attr('disabled', false);
+        $("#action-cancel").attr('disabled', false);
+        if (!responseData)
             return;
-        if (success) {
+        if (responseData.code != 200) {
+            Swal.fire({
+                title: 'Uh oh!',
+                text: responseData.message,
+                icon: 'error',
+                confirmButtonText: 'Oops.. my bad!'
+            })
+            return;
+        }
+        $('#login-username').val("");
+        $('#login-password').val("");
+        $('#welcome-text').text(`Welcome back, ${responseData.user.name}!`);
+        $('#account-action').text('Not you?');
+        $('#user-img').prop('src', `https://a.ez-pp.farm/${responseData.user.id}`);
+        loggedIn = true;
+        changePage('launch');
+    })
+
+    $("#change-folder-btn").on('click', async () => {
+        const responseData = await ipcRenderer.invoke('set-osu-dir');
+        if (!responseData)
+            return;
+        if (responseData.validOsuDir) {
             Swal.fire({
                 title: 'Success!',
                 text: 'osu! folder set.',
                 icon: 'success',
                 confirmButtonText: 'Cool'
             })
+            $('#currentOsuPath').text(responseData.folderPath);
             ipcRenderer.send("do-update-check");
         } else {
             Swal.fire({
@@ -82,6 +123,27 @@ window.addEventListener('DOMContentLoaded', () => {
         }
     });
 
+    ipcRenderer.on('config_update', (event, data) => {
+        if (data.osuPath) {
+            $('#currentOsuPath').text(data.osuPath);
+        }
+    })
+
+    ipcRenderer.on('account_update', (event, data) => {
+        switch (data.type) {
+            case "not-loggedin":
+                changePage("launch");
+                break;
+            case "loggedin":
+                changePage("launch");
+                $('#welcome-text').text(`Welcome back, ${data.user.name}!`);
+                $('#account-action').text('Not you?');
+                $('#user-img').prop('src', `https://a.ez-pp.farm/${data.user.id}`)
+                loggedIn = true;
+                break;
+        }
+    })
+
     ipcRenderer.on('status_update', (event, status) => {
         currentState = status.type;
         switch (status.type) {
@@ -94,7 +156,8 @@ window.addEventListener('DOMContentLoaded', () => {
                 $('#launch-btn').html('Update');
                 break;
             case "missing-folder":
-                $('#launch-btn').html('Please set your osu! folder');
+                $("#launch-btn").attr('disabled', true);
+                $('#launch-btn').html('set your osu! folder');
                 break;
             case "error":
                 Swal.fire({
@@ -118,18 +181,10 @@ window.addEventListener('DOMContentLoaded', () => {
     })
 
     function changePage(page) {
-        switch (page) {
-            case "login":
-                $("#launch-page").fadeOut(50, "swing", () => {
-                    $("#login-page").fadeIn(350);
-                });
-                break;
-            case "launch":
-                $("#login-page").fadeOut(50, "swing", () => {
-                    $("#launch-page").fadeIn(350);
-                });
-                break;
-        }
+        $(`#${currentPage}-page`).fadeOut(50, "swing", () => {
+            $(`#${page}-page`).fadeIn(350);
+        });
+        currentPage = page;
     }
 
     // workaround for the dark theme

test/encrypt.js

@@ -0,0 +1,26 @@
+const dpapi = require('wincrypt');
+const entropyBuffer = Buffer.from('cu24180ncjeiu0ci1nwui', 'utf-8');
+
+const run = async () => {
+    const stringToEncrypt = "Test123456!";
+    
+
+    const encrypted = await encryptString(stringToEncrypt)
+    console.log(encrypted);
+    const decrypted = await decryptString(encrypted);
+    console.log(decrypted);
+
+}
+
+async function encryptString(value) {
+    const encryptedString = await dpapi.protect(Buffer.from(value, 'utf-8'), entropyBuffer, 'CurrentUser');
+    const encodedBase64 = Buffer.from(encryptedString, 'utf-8').toString('base64');
+    return encodedBase64;
+}
+
+async function decryptString(value) {
+    const decrypted = await dpapi.unprotect(Buffer.from(value, 'base64'), entropyBuffer, 'CurrentUser');
+    return decrypted.toString();
+}
+
+run();