<div class="modal-overlay" id="identifyModal"> <div class="modal-container"> <div class="modal-header"> <h2>Identify Yourself</h2> <p class="modal-description">Enter your secret password to access the key management system.</p> </div> <form class="modal-form" id="identifyForm" onsubmit="return handleIdentify(event)"> <div class="form-group"> <label for="secret">Secret Password</label> <input type="password" id="secret" name="secret" required placeholder="Enter your secret password" autocomplete="current-password"> <div class="error-message" id="errorMessage"></div> </div> <div class="modal-buttons"> <button type="button" class="btn btn-secondary" onclick="closeIdentifyModal()">Cancel</button> <button type="submit" class="btn btn-primary" id="identifyButton">Identify</button> </div> </form> </div> </div> <script> function showIdentifyModal() { document.getElementById('identifyModal').style.display = 'block'; document.getElementById('secret').focus(); } function closeIdentifyModal() { document.getElementById('identifyModal').style.display = 'none'; document.getElementById('identifyForm').reset(); document.getElementById('errorMessage').style.display = 'none'; } async function handleIdentify(event) { event.preventDefault(); const secret = document.getElementById('secret').value; const errorMessage = document.getElementById('errorMessage'); const identifyButton = document.getElementById('identifyButton'); // Disable button during processing identifyButton.disabled = true; identifyButton.textContent = 'Processing...'; try { if (!window.kvs) { throw new Error('Key management system not initialized'); } // Set the password in session storage window.kvs.setPassword(secret); // Try to generate/retrieve the private key to verify the password await window.kvs.generate_private_key(); // If successful, close the modal closeIdentifyModal(); // Dispatch an event to notify that identification was successful window.dispatchEvent(new CustomEvent('userIdentified')); } catch (error) { console.error('Identification error:', error); errorMessage.textContent = error.message || 'Invalid secret password'; errorMessage.style.display = 'block'; window.kvs.clearSession(); } finally { // Re-enable button identifyButton.disabled = false; identifyButton.textContent = 'Identify'; } return false; } // Check session validity periodically const sessionCheckInterval = setInterval(() => { if (window.kvs && !window.kvs.isSessionValid()) { window.kvs.clearSession(); showIdentifyModal(); } }, 60000); // Check every minute // Cleanup interval when page unloads window.addEventListener('unload', () => { clearInterval(sessionCheckInterval); }); // Initial check when the page loads window.addEventListener('DOMContentLoaded', () => { if (!window.kvs || !window.kvs.isSessionValid()) { showIdentifyModal(); } }); </script> <style> .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; backdrop-filter: blur(3px); } .modal-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); z-index: 1001; width: 90%; max-width: 400px; } .modal-header { margin-bottom: 1.5rem; text-align: center; } .modal-description { color: #666; margin-top: 0.5rem; font-size: 0.9rem; } .modal-form { display: flex; flex-direction: column; gap: 1rem; } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .form-group label { font-weight: bold; color: #333; } .form-group input { padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; transition: border-color 0.2s; } .form-group input:focus { border-color: #007bff; outline: none; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); } .modal-buttons { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1.5rem; } .btn { padding: 0.75rem 1.5rem; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; transition: all 0.2s; font-weight: 500; } .btn:disabled { opacity: 0.7; cursor: not-allowed; } .btn-primary { background-color: #007bff; color: white; } .btn-primary:hover:not(:disabled) { background-color: #0056b3; } .btn-secondary { background-color: #6c757d; color: white; } .btn-secondary:hover:not(:disabled) { background-color: #545b62; } .error-message { color: #dc3545; font-size: 0.875rem; margin-top: 0.5rem; display: none; padding: 0.5rem; background-color: #fff5f5; border-radius: 4px; border: 1px solid #ffebee; } </style>