From fa35a1bb37f43d0b17ecf48ec810f6235e9142f0 Mon Sep 17 00:00:00 2001
From: deftio <deftio@deftio.com>
Date: Mon, 21 Oct 2024 18:56:13 -0700
Subject: [PATCH] added password masking to /examples/openai.html

---
 examples/openai.html | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/examples/openai.html b/examples/openai.html
index b5b31b6..4b6aa72 100644
--- a/examples/openai.html
+++ b/examples/openai.html
@@ -81,7 +81,8 @@ <h3>Settings</h3>
                         placeholder="">You are a helpful assistant.  Answer the user's questions but say 'I don't know that' if you don't know the answer.</textarea>
                     <label for="apiKey">API Key</label>
                     <input type="text" id="apiKey" name="apiKey"
-                        placeholder="sk-01234-put-your-api-key-here. It-is-not-stored-on-any-server.">
+                        placeholder="sk-01234-put-your-api-key-here. It-is-not-stored-on-any-server."
+                        onblur="maskInput()" onfocus="unmaskInput()">
                     <label for="baseUrl">Base URL (optional):</label>
                     <input type="text" id="baseUrl" name="baseUrl"
                         placeholder="https://api.openai.com/v1/chat/completions"
@@ -196,6 +197,20 @@ <h3 class="mb-0">Chat</h3>
             //}
         );
 
+        // Mask the API key input
+        function maskInput() {
+            var input = document.getElementById("apiKey");
+            if (input.value !== "") {
+                input.type = "password";  // Change to password to show bullets
+            }
+        }
+
+        // Unmask the API key input
+        function unmaskInput() {
+            var input = document.getElementById("apiKey");
+            input.type = "text";  // Change back to text to show input and placeholder
+        }
+
         // set remember the api key to a local cookie
         document.getElementById('settingsForm').addEventListener('submit', function (e) {
             e.preventDefault();
@@ -220,6 +235,7 @@ <h3 class="mb-0">Chat</h3>
                 }
                 if (name.trim() === 'apiKey') {
                     document.getElementById('apiKey').value = decodeURIComponent(value);
+                    maskInput();
                 }
                 if (name.trim() === 'baseUrl') {
                     document.getElementById('baseUrl').value = decodeURIComponent(value);
@@ -244,10 +260,10 @@ <h3 class="mb-0">Chat</h3>
 
         // Export chat history and prompt to a text file    
         document.getElementById('exportChatAndPrompt').addEventListener('click', function () {
-            const exportData = {} 
-            exportData["history"]= chatInstance.historyGetAllCopy();
+            const exportData = {}
+            exportData["history"] = chatInstance.historyGetAllCopy();
             exportData["prompt"] = document.getElementById('prompt').value;
-    
+
             const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
             const url = URL.createObjectURL(blob);
             const dateTime = new Date().toISOString().replace(/[:.]/g, '-');