justin/alpaca-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enable password manager support and hide API key field text with bullets

Browse Source
This commit is contained in:
Justin Oros
2026-01-27 19:15:04 -07:00
parent b25fb9fb85
commit 7e12f4cdaf
1 changed files with 54 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+54 -50
View File
@@ -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>