From 7e12f4cdaf40241e2af1e66305f5839d32aa1d11 Mon Sep 17 00:00:00 2001
From: Justin Oros <JustinOros@gmail.com>
Date: Tue, 27 Jan 2026 19:15:04 -0700
Subject: [PATCH] Enable password manager support and hide API key field text
 with bullets

---
 index.html | 104 +++++++++++++++++++++++++++--------------------------
 1 file changed, 54 insertions(+), 50 deletions(-)

diff --git a/index.html b/index.html
index 093f758..76e4eba 100644
--- a/index.html
+++ b/index.html
@@ -250,6 +250,12 @@
             box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
         }
 
+        /* Make text input look like password field */
+        input[type="text"]#apiKey {
+            -webkit-text-security: disc;
+            text-security: disc;
+        }
+
         .btn-go {
             width: 100%;
             padding: 16px;
@@ -627,50 +633,54 @@
         <!-- Login Form -->
         <div id="loginForm">
             <div class="login-card">
-                <!-- Trading Mode Selection -->
-                <div class="trading-mode-group">
-                    <div class="mode-options">
-                        <div class="mode-option">
-                            <input type="radio" id="paperMode" name="tradingMode" value="paper" checked>
-                            <label for="paperMode" class="mode-option-label">
-                                <div class="mode-title">Paper Trading</div>
-                                <div class="mode-description">(Virtual Money)</div>
-                            </label>
-                        </div>
-                        <div class="mode-option">
-                            <input type="radio" id="liveMode" name="tradingMode" value="live">
-                            <label for="liveMode" class="mode-option-label">
-                                <div class="mode-title">Live Trading</div>
-                                <div class="mode-description">(Real Money)</div>
-                            </label>
+                <form id="loginFormElement" onsubmit="login(event)">
+                    <!-- Trading Mode Selection -->
+                    <div class="trading-mode-group">
+                        <div class="mode-options">
+                            <div class="mode-option">
+                                <input type="radio" id="paperMode" name="tradingMode" value="paper" checked>
+                                <label for="paperMode" class="mode-option-label">
+                                    <div class="mode-title">Paper Trading</div>
+                                    <div class="mode-description">(Virtual Money)</div>
+                                </label>
+                            </div>
+                            <div class="mode-option">
+                                <input type="radio" id="liveMode" name="tradingMode" value="live">
+                                <label for="liveMode" class="mode-option-label">
+                                    <div class="mode-title">Live Trading</div>
+                                    <div class="mode-description">(Real Money)</div>
+                                </label>
+                            </div>
                         </div>
                     </div>
-                </div>
 
-                <!-- API Credentials -->
-                <div class="input-group">
-                    <label for="apiKey">API Key</label>
-                    <input 
-                        type="password" 
-                        id="apiKey" 
-                        placeholder="PK••••••••••••••••"
-                        autocomplete="off"
-                    >
-                </div>
-                <div class="input-group">
-                    <label for="apiSecret">API Secret</label>
-                    <input 
-                        type="password" 
-                        id="apiSecret" 
-                        placeholder="••••••••••••••••"
-                        autocomplete="off"
-                    >
-                </div>
-                <button class="btn-go" onclick="login()">GO!</button>
-                <div class="api-key-info">
-                    Visit <a href="https://alpaca.markets" target="_blank">Alpaca Markets</a> to get your API key.
-                </div>
-                <div id="loginError"></div>
+                    <!-- API Credentials -->
+                    <div class="input-group">
+                        <label for="apiKey">API Key</label>
+                        <input 
+                            type="text" 
+                            id="apiKey" 
+                            name="username"
+                            placeholder="PK••••••••••••••••"
+                            autocomplete="username"
+                        >
+                    </div>
+                    <div class="input-group">
+                        <label for="apiSecret">API Secret</label>
+                        <input 
+                            type="password" 
+                            id="apiSecret" 
+                            name="password"
+                            placeholder="••••••••••••••••"
+                            autocomplete="current-password"
+                        >
+                    </div>
+                    <button type="submit" class="btn-go">GO!</button>
+                    <div class="api-key-info">
+                        Visit <a href="https://alpaca.markets" target="_blank">Alpaca Markets</a> to get your API key.
+                    </div>
+                    <div id="loginError"></div>
+                </form>
             </div>
         </div>
 
@@ -724,7 +734,9 @@
         let hideTimeout = null;
         let isRevealed = false;
 
-        async function login() {
+        async function login(event) {
+            event.preventDefault(); // Prevent form submission
+            
             const apiKey = document.getElementById('apiKey').value.trim();
             const apiSecret = document.getElementById('apiSecret').value.trim();
             const errorDiv = document.getElementById('loginError');
@@ -970,14 +982,6 @@
             document.getElementById('dashboard').style.display = 'none';
             document.getElementById('loginError').innerHTML = '';
         }
-
-        // Allow Enter key to submit
-        document.getElementById('apiKey').addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') login();
-        });
-        document.getElementById('apiSecret').addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') login();
-        });
     </script>
 </body>
 </html>