Merge pull request #154 from codeoverflow-org/feature/dashboard-first-startup-pw-notice

Add password notice in dashbord on first startup

Author: hlxid

nodecg-io-core/dashboard/authentication.ts

@@ -9,6 +9,7 @@ const inputPassword = document.getElementById("inputPassword") as HTMLInputEleme
 const divAuth = document.getElementById("divAuth");
 const divMain = document.getElementById("divMain");
 const spanPasswordNotice = document.getElementById("spanPasswordNotice") as HTMLSpanElement;
+const pFirstStartup = document.getElementById("pFirstStartup");
 
 // Add key listener to password input
 inputPassword?.addEventListener("keyup", function (event) {
@@ -25,12 +26,14 @@ nodecg.socket.on("connect", () => {
         loadFramework();
     } else {
         updateLoadedStatus();
+        updateFirstStartupLabel();
     }
 });
 
 document.addEventListener("DOMContentLoaded", () => {
     // Render loaded status for initial load
     updateLoadedStatus();
+    updateFirstStartupLabel();
 });
 
 export async function isLoaded(): Promise<boolean> {
@@ -71,3 +74,12 @@ export async function loadFramework(): Promise<void> {
 
     updateLoadedStatus();
 }
+
+async function updateFirstStartupLabel(): Promise<void> {
+    const isFirstStartup: boolean = await nodecg.sendMessage("isFirstStartup");
+    if (isFirstStartup) {
+        pFirstStartup?.classList.add("hidden");
+    } else {
+        pFirstStartup?.classList.remove("hidden");
+    }
+}

nodecg-io-core/dashboard/panel.html

@@ -10,6 +10,10 @@
         <p>Current status: <span id="spanLoaded">Unknown</span></p>
 
         <div id="divAuth">
+            <p id="pFirstStartup" class="hidden">
+                This seems to be your first startup of nodecg-io. Please choose a password which will be used to encrypt
+                all your credentials.
+            </p>
             <p>Login:</p>
             <div class="margins">
                 <label for="inputPassword">Password: </label>

nodecg-io-core/extension/messageManager.ts

@@ -141,6 +141,12 @@ export class MessageManager {
                 ack?.(undefined, result);
             }
         });
+
+        this.nodecg.listenFor("isFirstStartup", (_msg: undefined, ack) => {
+            if (!ack?.handled) {
+                ack?.(undefined, this.persist.isFirstStartup());
+            }
+        });
     }
 
     authRequired<M extends PasswordMessage, V>(handler: ListenForCallback<M, V>): ListenForCallback<M, V> {

nodecg-io-core/extension/persistenceManager.ts

@@ -86,6 +86,14 @@ export class PersistenceManager {
         return this.password !== undefined;
     }
 
+    /**
+     * Returns whether this is the first startup aka. whether any encrypted data has been saved.
+     * If this returns true {{@link load}} will accept any password and use it to encrypt the configuration.
+     */
+    isFirstStartup(): boolean {
+        return this.encryptedData.value.cipherText !== undefined;
+    }
+
     /**
      * Decrypts and loads the locally stored configuration using the passed password.
      * @param password the password of the encrypted config.