feat: Implement SigSocket request queuing and approval system, Enhance Settings UI

This commit is contained in:
zaelgohary
2025-06-17 03:18:25 +03:00
parent c641d0ae2e
commit 4f3f98a954
7 changed files with 1567 additions and 220 deletions

View File

@@ -7,28 +7,17 @@
<body>
<div class="container">
<header class="header">
<div class="logo">
<div class="logo clickable-header" id="headerTitle">
<div class="logo-icon">🔐</div>
<h1>CryptoVault</h1>
</div>
<div class="header-actions">
<div class="settings-container">
<button id="settingsToggle" class="btn-icon-only" title="Settings">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="3"></circle>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
</svg>
</button>
<div class="settings-dropdown hidden" id="settingsDropdown">
<div class="settings-item">
<label for="timeoutInput">Session Timeout</label>
<div class="timeout-input-group">
<input type="number" id="timeoutInput" min="3" max="300" value="15">
<span>seconds</span>
</div>
</div>
</div>
</div>
<button id="settingsBtn" class="btn-icon-only" title="Settings">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="3"></circle>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
</svg>
</button>
<button id="themeToggle" class="btn-icon-only" title="Switch to dark mode">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
@@ -84,6 +73,14 @@
</div>
<div class="requests-container" id="requestsContainer">
<div class="loading-requests hidden" id="loadingRequestsMessage">
<div class="loading-state">
<div class="loading-spinner"></div>
<p>Loading requests...</p>
<small>Fetching pending signature requests</small>
</div>
</div>
<div class="no-requests" id="noRequestsMessage">
<div class="empty-state">
<div class="empty-icon">📝</div>
@@ -106,14 +103,6 @@
</svg>
Refresh
</button>
<button id="sigSocketStatusBtn" class="btn btn-ghost btn-small">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="6" x2="12" y2="12"></line>
<line x1="16" y1="16" x2="12" y2="12"></line>
</svg>
Status
</button>
</div>
</div>
@@ -235,8 +224,41 @@
</div>
</section>
<!-- Settings Section -->
<section class="section hidden" id="settingsSection">
<div class="settings-header">
<h2>Settings</h2>
</div>
<!-- Session Settings -->
<div class="card">
<h3>Session Settings</h3>
<div class="settings-item">
<label for="timeoutInput">Session Timeout</label>
<div class="timeout-input-group">
<input type="number" id="timeoutInput" min="3" max="300" value="15">
<span>seconds</span>
</div>
<small class="settings-help">Automatically lock session after inactivity</small>
</div>
</div>
<!-- SigSocket Settings -->
<div class="card">
<h3>SigSocket Settings</h3>
<div class="settings-item">
<label for="serverUrlInput">Server URL</label>
<div class="server-input-group">
<input type="text" id="serverUrlInput" placeholder="ws://localhost:8080/ws" value="ws://localhost:8080/ws">
<button id="saveServerUrlBtn" class="btn btn-small btn-primary">Save</button>
</div>
<small class="settings-help">WebSocket URL for SigSocket server (ws:// or wss://)</small>
</div>
</div>
</section>
</div>