Add auth key functionality and provide better connection error logs

package.json

@@ -4,7 +4,7 @@
     "name": "Valo Spectra",
     "url": "https://www.valospectra.com"
   },
-  "version": "0.2.0-rc1",
+  "version": "0.2.0-rc2",
   "description": "https://www.valospectra.com",
   "private": true,
   "main": "./app/main.js",

src/frontend/index.html

@@ -15,6 +15,10 @@
     <input type="text" class="textInput" id="ValorantNameInput" placeholder="Auto-detected on game start"
       disabled="true"></input>
   </div>
+  <div>
+    <text class="txt">Enter your Key:</text>
+    <input type="text" class="textInput" id="KeyInput" placeholder="e.g. IJTP"></input>
+  </div>
   <div>
     <text class="txt">Enter your Group Code:</text>
     <input type="text" class="textInput" id="GroupCodeInput" placeholder="e.g. AHO716"></input>

src/frontend/renderer.js

@@ -1,5 +1,6 @@
 document.querySelector("#ConnectButton").addEventListener("click", () => {
   const obsName = document.getElementById("ValorantNameInput").value;
+  const key = document.getElementById("KeyInput").value ? document.getElementById("KeyInput").value : "NONE";
   const groupCode = document.getElementById("GroupCodeInput").value;
   const ingestIp = document.getElementById("IngestIpInput").value;
   const teamLeftAttackerStart = document.getElementById(
@@ -24,7 +25,8 @@ document.querySelector("#ConnectButton").addEventListener("click", () => {
     groupCode,
     obsName,
     leftTeam,
-    rightTeam
+    rightTeam,
+    key
   );
 });
 
@@ -36,6 +38,7 @@ window.electronAPI.setPlayerName((value) => {
 window.electronAPI.setInputAllowed((value) => {
   const disableInput = !value;
 
+  document.getElementById("KeyInput").disabled = disableInput;
   document.getElementById("GroupCodeInput").disabled = disableInput;
   document.getElementById("IngestIpInput").disabled = disableInput;
 
@@ -52,7 +55,11 @@ window.electronAPI.setInputAllowed((value) => {
 });
 
 window.electronAPI.loadConfig((config) => {
-  const { groupCode, ingestIp, leftTeam, rightTeam } = config;
+  const { key, groupCode, ingestIp, leftTeam, rightTeam } = config;
+
+  if (key != "skip") {
+    document.getElementById("KeyInput").value = key;
+  }
 
   if (groupCode != "skip") {
     document.getElementById("GroupCodeInput").value = groupCode;

src/main.ts

@@ -1,6 +1,6 @@
 
 require('dotenv').config()
-const VERSION = "v0.2.0-rc1";
+const VERSION = "v0.2.0-rc2";
 const ALLOW_UPDATE_IGNORE = process.env.ALLOW_UPDATE_IGNORE ? process.env.ALLOW_UPDATE_IGNORE : false;
 
 import path from "path"
@@ -26,7 +26,7 @@ log.initialize();
 const createWindow = () => {
   win = new BrowserWindow({
     width: 450,
-    height: 650,
+    height: 700,
     backgroundColor: '#303338',
     resizable: false,
     webPreferences: {
@@ -80,7 +80,7 @@ app.on('window-all-closed', () => {
   }
 })
 
-function processInputs(event: any, ingestIp: string, groupCode: string, obsName: string, leftTeam: AuthTeam, rightTeam: AuthTeam) {
+function processInputs(event: any, ingestIp: string, groupCode: string, obsName: string, leftTeam: AuthTeam, rightTeam: AuthTeam, key: string) {
   const webContents = event.sender;
   const win = BrowserWindow.fromWebContents(webContents)!;
 
@@ -93,9 +93,9 @@ function processInputs(event: any, ingestIp: string, groupCode: string, obsName:
     }
   }
 
-  log.info(`Received Observer Name ${obsName}, Group Code ${groupCode}, Left Tricode ${leftTeam.tricode}, Right Tricode ${rightTeam.tricode}`);
+  log.info(`Received Observer Name ${obsName}, Group Code ${groupCode}, Key ${key}, Left Tricode ${leftTeam.tricode}, Right Tricode ${rightTeam.tricode}`);
   win!.setTitle(`Spectra Client | Attempting to connect...`);
-  connService.handleAuthProcess(ingestIp, obsName, groupCode, leftTeam, rightTeam, win);
+  connService.handleAuthProcess(ingestIp, obsName, groupCode, leftTeam, rightTeam, key, win);
 }
 
 function processConfigDrop(event: any, filePath: string) {
@@ -152,15 +152,15 @@ export function setInputAllowed(allowed: boolean) {
   win.webContents.send("set-input-allowed", allowed);
 }
 
-enum messageBoxType {
+export enum messageBoxType {
   ERROR = "error",
   NONE = "none",
   INFO = "info",
   QUESTION = "question",
   WARNING = "warning"
 }
 
-function messageBox(title: string, message: string, type: messageBoxType, buttons: string[] = ["OK"]): number {
+export function messageBox(title: string, message: string, type: messageBoxType, buttons: string[] = ["OK"]): number {
   return dialog.showMessageBoxSync(win, {
     title: title,
     message: message,

src/preload.js

@@ -1,7 +1,7 @@
 const { contextBridge, ipcRenderer } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('electronAPI', {
-  processInputs: (ingestIp, groupId, obsName, leftTeam, rightTeam) => ipcRenderer.send('process-inputs', ingestIp, groupId, obsName, leftTeam, rightTeam),
+  processInputs: (ingestIp, groupId, obsName, leftTeam, rightTeam, key) => ipcRenderer.send('process-inputs', ingestIp, groupId, obsName, leftTeam, rightTeam, key),
   processConfigDrop: (filePath) => ipcRenderer.send('config-drop', filePath),
   replay: () => ipcRenderer.send('replay'),
 

src/services/connectorService.ts

@@ -2,7 +2,7 @@ import { DataTypes, IFormattedData } from './formattingService';
 import { dialog } from 'electron';
 import log from 'electron-log';
 import * as io from "socket.io-client";
-import { setInputAllowed } from '../main';
+import { messageBox, messageBoxType, setInputAllowed } from '../main';
 
 export interface AuthTeam {
   name: string,
@@ -42,7 +42,7 @@ export class ConnectorService {
         return ConnectorService.instance;
     }
 
-    handleAuthProcess(ingestIp: string, obsName: string, groupCode: string, leftTeam: AuthTeam, rightTeam: AuthTeam, win: Electron.Main.BrowserWindow) {
+    handleAuthProcess(ingestIp: string, obsName: string, groupCode: string, leftTeam: AuthTeam, rightTeam: AuthTeam, key: string, win: Electron.Main.BrowserWindow) {
         this.INGEST_SERVER_URL = `https://${ingestIp}:5100`;
         this.OBS_NAME = obsName;
         this.GROUP_CODE = groupCode.toUpperCase();
@@ -70,15 +70,10 @@ export class ConnectorService {
                     this.websocketSetup();
                 } else {
                     log.info('Authentication failed!');
-                    this.win.setTitle(`Spectra Client | Connection failed, invalid data`);
+                    messageBox("Spectra Client - Error", `Connection failed, reason: ${json.reason}`, messageBoxType.ERROR);
+                    this.win.setTitle(`Spectra Client | Connection failed`);
                     this.setDisconnected();
                     this.ws?.disconnect();
-
-                    dialog.showMessageBoxSync(win, {
-                        title: "Spectra Client - Error",
-                        message: "Inputted data was invalid!",
-                        type: "error"
-                    });
                 }
             }
         });
@@ -88,11 +83,7 @@ export class ConnectorService {
             if (this.unreachable === true) {
                 this.win.setTitle(`Spectra Client | Connection failed, server not reachable`);
 
-                dialog.showMessageBoxSync(win, {
-                    title: "Spectra Client - Error",
-                    message: "Spectra server not reachable!",
-                    type: "error"
-                });
+                messageBox("Spectra Client - Error", "Spectra server not reachable!", messageBoxType.ERROR);
             } else {
                 this.win.setTitle(`Spectra Client | Connection closed`);
             }
@@ -111,7 +102,7 @@ export class ConnectorService {
             log.error(e);
         });
 
-        this.ws.emit('obs_logon', JSON.stringify({ type: DataTypes.AUTH, obsName: this.OBS_NAME, groupCode: this.GROUP_CODE, leftTeam: this.LEFT_TEAM, rightTeam: this.RIGHT_TEAM}));
+        this.ws.emit('obs_logon', JSON.stringify({ type: DataTypes.AUTH, obsName: this.OBS_NAME, groupCode: this.GROUP_CODE, leftTeam: this.LEFT_TEAM, rightTeam: this.RIGHT_TEAM, key: key}));
     }