add nexus api communication with verification for valide api key

renderer/assets/check.svg

@@ -0,0 +1 @@
+<svg role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill="green" d="M13 4.1974q0 .3097-.21677.5265L7.17806 10.329l-1.0529 1.0529q-.21677.2168-.52645.2168-.30968 0-.52645-.2168L4.01935 10.329 1.21677 7.5264Q1 7.3097 1 7t.21677-.5265l1.05291-1.0529q.21677-.2167.52645-.2167.30968 0 .52645.2167l2.27613 2.2839 5.07871-5.0864q.21677-.2168.52645-.2168.30968 0 .52645.2168l1.05291 1.0529Q13 3.8877 13 4.1974z"/></svg>

renderer/assets/cross.svg

@@ -0,0 +1 @@
+<svg role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill="red" d="M13 10.65657q0 .40404-.28283.68686l-1.37374 1.37374Q11.06061 13 10.65657 13t-.68687-.28283L7 9.74747l-2.9697 2.9697Q3.74747 13 3.34343 13q-.40404 0-.68686-.28283l-1.37374-1.37374Q1 11.06061 1 10.65657t.28283-.68687L4.25253 7l-2.9697-2.9697Q1 3.74747 1 3.34343q0-.40404.28283-.68686l1.37374-1.37374Q2.93939 1 3.34343 1t.68687.28283L7 4.25253l2.9697-2.9697Q10.25253 1 10.65657 1q.40404 0 .68686.28283l1.37374 1.37374Q13 2.93939 13 3.34343t-.28283.68687L9.74747 7l2.9697 2.9697Q13 10.25253 13 10.65657z"/></svg>

renderer/index.html

@@ -99,7 +99,7 @@
         <h2>General settings</h2>
         <div class="horizontal-div">
             <label for="silksong-path-label">Enter Silksong path: </label>
-            <input type="text" class="silksong-path-input" id="silksong-path-input" name="silksong-path-input">
+            <input type="text" class="input" id="silksong-path-input" name="silksong-path-input">
             <button class="default-button" onclick="autoDetectGamePath()">Auto Detect</button>
         </div>
         <br>
@@ -112,6 +112,15 @@
             <button class="important-button" onclick="deleteBepinexBackup()">Delete Backup</button>
         </div>
         <br>
+        <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">
+            <img class="nexus-check-image" id="nexus-check-image" src="assets/cross.svg">
+            <button class="default-button" onclick="verifyNexusAPI()">Verify</button>
+        </div>
+        <br>
         <h2>Import/Export</h2>
         <div class="horizontal-div">
             <button class="default-button" onclick="importData()">Import Data</button>

renderer/renderer.js

@@ -64,16 +64,23 @@ 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")
 
             silksongPathInput.value = await files.loadSilksongPath()
-
             silksongPathInput.addEventListener('input', async function(event) {
                 let silksongPath = silksongPathInput.value
                 await files.saveSilksongPath(silksongPath)
             });
 
+            nexusAPIInput.value = await files.loadNexusAPI()
+            nexusAPIInput.addEventListener('input', async function(event) {
+                let nexusAPI = nexusAPIInput.value
+                await files.saveNexusAPI(nexusAPI)
+            });
+
             view.appendChild(settingsTemplateCopy)
             setBepinexVersion()
+            verifyNexusAPI()
     }
 }
 
@@ -153,10 +160,26 @@ async function setBepinexVersion() {
         bepinexVersionText.innerText = "BepInEx is not installed"
         }
         else {
-            bepinexVersionText.innerText = `BepInEx ${bepinexBackupVersion} is backuped`
+            bepinexVersionText.innerText = `BepInEx ${bepinexBackupVersion} is backed up`
         }
     }
     else {
         bepinexVersionText.innerText = `BepInEx ${bepinexVersion} is installed`
     }
+}
+
+async function verifyNexusAPI() {
+    response = await nexus.verifyAPI()
+
+    const nexusCheckImage = document.getElementById("nexus-check-image")
+    if (nexusCheckImage == undefined) {
+        return
+    }
+
+    if (response) {
+        nexusCheckImage.src = "assets/check.svg"
+    }
+    else {
+        nexusCheckImage.src = "assets/cross.svg"
+    }
 }

renderer/style.css

@@ -133,7 +133,7 @@ body {
     margin-top: 8px;
 }
 
-.silksong-path-input {
+.input {
     flex: 1;
     height: 30px;
     padding: 0 12px;
@@ -146,12 +146,12 @@ body {
     transition: all 0.2s ease;
 }
 
-.silksong-path-input:hover {
+.input:hover {
     background: rgba(0, 0, 0, 0.55);
     border-color: rgba(255, 25, 0, 0.3);
 }
 
-.silksong-path-input:focus {
+.input:focus {
     background: rgba(0, 0, 0, 0.65);
     border-color: rgba(255, 25, 0, 0.3);
     box-shadow: 0 0 0 1px rgba(255, 25, 0, 0.2);
@@ -298,4 +298,10 @@ body {
 
 .transparent-text {
     color: rgba(255, 255, 255, 0.7);
+}
+
+.nexus-check-image {
+    width: 32px;
+    height: 32px;
+    object-fit: cover;
 }