www_projectmycelium_io/poc/components/identify_modal.html

<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>