...
This commit is contained in:
217
poc_project_mycelium/components/identify_modal.html
Normal file
217
poc_project_mycelium/components/identify_modal.html
Normal file
@@ -0,0 +1,217 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user