Store Nexus API key securely with safeStorage and fix bugs related to invalid Silksong path

This commit is contained in:
2026-02-23 21:24:06 +01:00
parent 9a65857f81
commit 8924e1f882
6 changed files with 112 additions and 46 deletions

View File

@@ -92,7 +92,7 @@
<template id="installed-mods-template">
<h2>List Of Installed Mods</h2>
<div class="horizontal-div">
<form class="horizontal-div search-form" id="search-form">
<form class="horizontal-div input-form" id="search-form">
<input class="input" id="search-input" type="text" placeholder="Search For Mods..." />
<button class="default-button" onclick="searchInstalledMods()">Search</button>
</form>
@@ -115,7 +115,7 @@
<template id="online-mods-template">
<h2>List Of Nexus Mods</h2>
<div class="horizontal-div">
<form class="horizontal-div search-form" id="search-form">
<form class="horizontal-div input-form" id="search-form">
<input class="input" id="search-input" type="text" placeholder="Search For Mods..." />
<button class="default-button" onclick="searchNexusMods()">Search</button>
</form>
@@ -221,19 +221,24 @@
<h2>Nexus</h2>
<p class="transparent-text" id="bepinex-version-text"></p>
<div class="horizontal-div">
<label for="nexus-api-label">Enter your nexus api: </label>
<input type="text" class="input" id="nexus-api-input" name="nexus-api-input" />
<label>Nexus API key: </label>
<img class="nexus-check-image" id="nexus-check-image" src="assets/icons/cross.svg" />
<button class="default-button" onclick="verifyNexusAPI()">Verify</button>
<form class="horizontal-div input-form" id="nexus-api-form">
<input class="input" id="nexus-api-input" type="text" placeholder="Enter your nexus api" />
<button class="default-button" onclick="setNexusAPI()">Set</button>
</form>
<button class="default-button" onclick="resetNexusAPI()">Reset</button>
</div>
<br />
<h2>Import/Export</h2>
<div class="horizontal-div">
<button class="default-button" onclick="importData()">Import Data</button>
<button class="default-button" onclick="exportData()">Export Data</button>
<button class="important-button" onclick="deleteData()">Delete All Data</button>
<button class="important-button" onclick="deleteData()">Delete Data</button>
</div>
<br />
<p class="transparent-text">This data does not include your Nexus API key or the list of your installed mods.</p>
<br />
<h2>Debugging</h2>
<div class="horizontal-div">
<h3>Versions:</h3>

View File

@@ -78,7 +78,7 @@ async function navigate(page) {
const searchFormInstalled = installedModsTemplateCopy.getElementById("search-form");
const searchInputInstalled = installedModsTemplateCopy.getElementById("search-input");
searchFormInstalled.addEventListener("submit", async function (event) {
searchFormInstalled.addEventListener("submit", function (event) {
event.preventDefault();
});
searchInputInstalled.value = searchValueInstalled;
@@ -241,7 +241,7 @@ async function navigate(page) {
title.innerText = "Settings";
const settingsTemplateCopy = settingsTemplate.content.cloneNode(true);
const silksongPathInput = settingsTemplateCopy.getElementById("silksong-path-input");
const nexusAPIInput = settingsTemplateCopy.getElementById("nexus-api-input");
const nexusAPIForm = settingsTemplateCopy.getElementById("nexus-api-form");
const versionsList = settingsTemplateCopy.getElementById("versions-list");
const versionsDictionnary = {
"Silk-Fly-Launcher": `Silk Fly Launcher: v${await versions.silkFlyLauncher()}`,
@@ -257,10 +257,8 @@ async function navigate(page) {
files.saveSilksongPath(silksongPath);
});
nexusAPIInput.value = await files.loadNexusAPI();
nexusAPIInput.addEventListener("input", async function (event) {
let nexusAPI = nexusAPIInput.value;
files.saveNexusAPI(nexusAPI);
nexusAPIForm.addEventListener("submit", function (event) {
event.preventDefault();
});
for (const element of versionsList.children) {
@@ -286,7 +284,7 @@ async function navigate(page) {
setBepinexVersion();
setThemeButton();
toggleSelectedListButton("themes-menu", actualTheme[0]);
verifyNexusAPI();
setNexusAPI();
break;
}
}
@@ -321,18 +319,18 @@ async function welcomeNavigate() {
case 2:
pageDiv.appendChild(nexusTemplate.content.cloneNode(true));
const nexusLink = document.getElementById("external-link");
const nexusAPIForm = document.getElementById("nexus-api-form");
nexusLink.addEventListener("click", function (event) {
event.preventDefault();
const url = nexusLink.href;
electronAPI.openExternalLink(url);
});
const nexusAPIInput = document.getElementById("nexus-api-input");
nexusAPIInput.value = await files.loadNexusAPI();
nexusAPIInput.addEventListener("input", async function (event) {
let nexusAPI = nexusAPIInput.value;
await files.saveNexusAPI(nexusAPI);
nexusAPIForm.addEventListener("submit", function (event) {
event.preventDefault();
});
setNexusAPI();
break;
case 3:
@@ -372,7 +370,6 @@ async function initialImportData() {
async function importData() {
await files.import();
document.getElementById("silksong-path-input").value = await files.loadSilksongPath();
document.getElementById("nexus-api-input").value = await files.loadNexusAPI();
const lacePinCheckbox = document.getElementById("lace-pin");
const theme = await files.loadTheme();
lacePinCheckbox.checked = theme[1];
@@ -391,7 +388,6 @@ async function deleteData() {
toggleThemesMenu();
await files.delete();
document.getElementById("silksong-path-input").value = await files.loadSilksongPath();
document.getElementById("nexus-api-input").value = await files.loadNexusAPI();
}
//////////////////////////////////////////////////////
@@ -470,6 +466,32 @@ async function searchNexusMods() {
searchInput.value = searchValueNexus;
}
async function setNexusAPI() {
const nexusAPIInput = document.getElementById("nexus-api-input");
const secretString = "●".repeat(1000);
if (!(await files.loadNexusAPI())) {
if (nexusAPIInput.value && nexusAPIInput.value != secretString) {
await files.saveNexusAPI(nexusAPIInput.value);
nexusAPIInput.value = secretString;
nexusAPIInput.readOnly = true;
} else {
nexusAPIInput.value = "";
nexusAPIInput.readOnly = false;
}
} else {
nexusAPIInput.value = secretString;
nexusAPIInput.readOnly = true;
}
verifyNexusAPI();
}
async function resetNexusAPI() {
if (await files.loadNexusAPI()) {
await files.saveNexusAPI(undefined);
setNexusAPI();
}
}
//////////////////////////////////////////////////////
/////////////////////// THEMES ///////////////////////

View File

@@ -436,7 +436,7 @@ body {
color: #ff9800;
}
.search-form {
.input-form {
display: flex;
flex: 1;
}

View File

@@ -16,6 +16,7 @@
<div id="page"></div>
<div class="button-div" id="button-div"></div>
</div>
<div class="toast-div" id="toast-div"></div>
</div>
<template id="welcome-template">
@@ -53,10 +54,12 @@
<a href="https://www.nexusmods.com/settings/api-keys" class="link" id="external-link">https://www.nexusmods.com/settings/api-keys</a> and click on new personnal API key
</p>
<div class="horizontal-div">
<label for="nexus-api-label">Enter your nexus api: </label>
<input type="text" class="input" id="nexus-api-input" name="nexus-api-input" />
<img class="nexus-check-image" id="nexus-check-image" src="assets/icons/cross.svg" />
<button class="default-button" onclick="verifyNexusAPI()">Verify</button>
<form class="horizontal-div input-form" id="nexus-api-form">
<input class="input" id="nexus-api-input" type="text" placeholder="Enter your nexus api" />
<button class="default-button" onclick="setNexusAPI()">Set</button>
</form>
<button class="default-button" onclick="resetNexusAPI()">Reset</button>
</div>
</template>