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); 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 { .btn-go {
width: 100%; width: 100%;
padding: 16px; padding: 16px;
@@ -627,50 +633,54 @@
<!-- Login Form --> <!-- Login Form -->
<div id="loginForm"> <div id="loginForm">
<div class="login-card"> <div class="login-card">
<!-- Trading Mode Selection --> <form id="loginFormElement" onsubmit="login(event)">
<div class="trading-mode-group"> <!-- Trading Mode Selection -->
<div class="mode-options"> <div class="trading-mode-group">
<div class="mode-option"> <div class="mode-options">
<input type="radio" id="paperMode" name="tradingMode" value="paper" checked> <div class="mode-option">
<label for="paperMode" class="mode-option-label"> <input type="radio" id="paperMode" name="tradingMode" value="paper" checked>
<div class="mode-title">Paper Trading</div> <label for="paperMode" class="mode-option-label">
<div class="mode-description">(Virtual Money)</div> <div class="mode-title">Paper Trading</div>
</label> <div class="mode-description">(Virtual Money)</div>
</div> </label>
<div class="mode-option"> </div>
<input type="radio" id="liveMode" name="tradingMode" value="live"> <div class="mode-option">
<label for="liveMode" class="mode-option-label"> <input type="radio" id="liveMode" name="tradingMode" value="live">
<div class="mode-title">Live Trading</div> <label for="liveMode" class="mode-option-label">
<div class="mode-description">(Real Money)</div> <div class="mode-title">Live Trading</div>
</label> <div class="mode-description">(Real Money)</div>
</label>
</div>
</div> </div>
</div> </div>
</div>
<!-- API Credentials --> <!-- API Credentials -->
<div class="input-group"> <div class="input-group">
<label for="apiKey">API Key</label> <label for="apiKey">API Key</label>
<input <input
type="password" type="text"
id="apiKey" id="apiKey"
placeholder="PK••••••••••••••••" name="username"
autocomplete="off" placeholder="PK••••••••••••••••"
> autocomplete="username"
</div> >
<div class="input-group"> </div>
<label for="apiSecret">API Secret</label> <div class="input-group">
<input <label for="apiSecret">API Secret</label>
type="password" <input
id="apiSecret" type="password"
placeholder="••••••••••••••••" id="apiSecret"
autocomplete="off" name="password"
> placeholder="••••••••••••••••"
</div> autocomplete="current-password"
<button class="btn-go" onclick="login()">GO!</button> >
<div class="api-key-info"> </div>
Visit <a href="https://alpaca.markets" target="_blank">Alpaca Markets</a> to get your API key. <button type="submit" class="btn-go">GO!</button>
</div> <div class="api-key-info">
<div id="loginError"></div> Visit <a href="https://alpaca.markets" target="_blank">Alpaca Markets</a> to get your API key.
</div>
<div id="loginError"></div>
</form>
</div> </div>
</div> </div>
@@ -724,7 +734,9 @@
let hideTimeout = null; let hideTimeout = null;
let isRevealed = false; let isRevealed = false;
async function login() { async function login(event) {
event.preventDefault(); // Prevent form submission
const apiKey = document.getElementById('apiKey').value.trim(); const apiKey = document.getElementById('apiKey').value.trim();
const apiSecret = document.getElementById('apiSecret').value.trim(); const apiSecret = document.getElementById('apiSecret').value.trim();
const errorDiv = document.getElementById('loginError'); const errorDiv = document.getElementById('loginError');
@@ -970,14 +982,6 @@
document.getElementById('dashboard').style.display = 'none'; document.getElementById('dashboard').style.display = 'none';
document.getElementById('loginError').innerHTML = ''; 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> </script>
</body> </body>
</html> </html>