{% include 'components/header.html' %}
<body>
{% include 'components/nav.html' %}
<main>
<div class="container">
<h1>Identity Test Page</h1>
<div class="card">
<div id="status" class="status unauthenticated">
Not identified
</div>
<div class="actions">
<button class="btn-identify" onclick="showIdentifyModal()">Identify</button>
<button class="btn-clear" onclick="clearAllAndReload()">Clear All & Reload</button>
</div>
<div id="keyInfo" class="key-info" style="display: none;">
<h3>Key Information</h3>
<div class="key-details">
<div id="keyStatus"></div>
<div id="publicKey" class="public-key"></div>
<div id="generateKeySection" style="display: none;" class="generate-key-section">
<div class="warning-message">
⚠️ No private key found. You need to generate a private key to use the system.
<strong>WARNING: Losing your private key will result in permanent loss of access to your digital life in Project Mycelium.</strong>
</div>
<button onclick="generatePrivateKey()" class="btn-generate">Generate Private Key</button>
</div>
</div>
</div>
<div id="testActions" class="test-actions" style="display: none;">
<h3>Test Actions</h3>
<div class="test-container">
<div class="test-group">
<input type="text" id="testKey" placeholder="Key name">
<input type="text" id="testValue" placeholder="Value">
<button onclick="setTestValue()">Set Value</button>
<div id="setResult" class="set-result"></div>
</div>
<div class="test-group">
<input type="text" id="retrieveKey" placeholder="Key to retrieve">
<button onclick="getTestValue()">Get Value</button>
<div id="retrievedValue" class="retrieved-value"></div>
</div>
<div class="test-group">
<button onclick="listAllValues()" class="btn-list">List All Values</button>
<div id="allValues" class="all-values"></div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Identity Modal -->
<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';
}
function clearAllAndReload() {
sessionStorage.clear();
location.reload();
}
async function generatePrivateKey() {
try {
const privateKey = await window.kvs.generateNewPrivateKey();
const publicKey = window.kvs.getPublicKey(privateKey);
const publicKeyBase58 = bs58.encode(publicKey);
document.getElementById('generateKeySection').style.display = 'none';
document.getElementById('keyStatus').textContent = '🔑 New private key generated';
document.getElementById('publicKey').innerHTML =
`<strong>Public Key (Base58):</strong><br>${publicKeyBase58}`;
} catch (error) {
console.error('Error generating private key:', error);
document.getElementById('keyStatus').textContent =
'❌ Error generating private key: ' + error.message;
}
}
async function updateStatus() {
const status = document.getElementById('status');
const keyInfo = document.getElementById('keyInfo');
const testActions = document.getElementById('testActions');
const keyStatus = document.getElementById('keyStatus');
const generateKeySection = document.getElementById('generateKeySection');
const publicKeyDiv = document.getElementById('publicKey');
if (window.kvs.isSessionValid()) {
try {
status.className = 'status authenticated';
status.textContent = 'Identified successfully';
keyInfo.style.display = 'block';
testActions.style.display = 'block';
const hasKey = await window.kvs.hasPrivateKey();
if (!hasKey) {
generateKeySection.style.display = 'block';
keyStatus.textContent = '⚠️ No private key found';
publicKeyDiv.innerHTML = '';
testActions.style.display = 'none';
} else {
generateKeySection.style.display = 'none';
const privateKey = await window.kvs.getPrivateKey();
const publicKey = window.kvs.getPublicKey(privateKey);
const publicKeyBase58 = bs58.encode(publicKey);
keyStatus.textContent = '🔑 Private key loaded';
publicKeyDiv.innerHTML = `<strong>Public Key (Base58):</strong><br>${publicKeyBase58}`;
}
} catch (error) {
status.className = 'status unauthenticated';
status.textContent = 'Error accessing keys: ' + error.message;
keyInfo.style.display = 'none';
testActions.style.display = 'none';
}
} else {
status.className = 'status unauthenticated';
status.textContent = 'Not identified';
keyInfo.style.display = 'none';
testActions.style.display = 'none';
showIdentifyModal();
}
}
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);
// 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;
}
async function setTestValue() {
const key = document.getElementById('testKey').value;
const value = document.getElementById('testValue').value;
const setResult = document.getElementById('setResult');
const retrieveKey = document.getElementById('retrieveKey');
if (!key || !value) {
setResult.innerHTML = '<div class="error">Please enter both key and value</div>';
return;
}
try {
await window.kvs.set(key, value);
setResult.innerHTML = '<div class="success">Value set successfully!</div>';
document.getElementById('testKey').value = '';
document.getElementById('testValue').value = '';
// Auto-fill the retrieve key field
retrieveKey.value = key;
// Automatically get the value
await getTestValue();
// Refresh the list if it's visible
const allValues = document.getElementById('allValues');
if (allValues.innerHTML !== '') {
await listAllValues();
}
} catch (error) {
setResult.innerHTML = `<div class="error">Error setting value: ${error.message}</div>`;
}
}
async function getTestValue() {
const key = document.getElementById('retrieveKey').value;
const retrievedValueDiv = document.getElementById('retrievedValue');
if (!key) {
retrievedValueDiv.innerHTML = '<div class="error">Please enter a key to retrieve</div>';
return;
}
try {
const value = await window.kvs.get(key);
retrievedValueDiv.innerHTML = value ?
`<div class="success">Retrieved value: ${value}</div>` :
'<div class="info">No value found for this key</div>';
} catch (error) {
retrievedValueDiv.innerHTML = `<div class="error">Error: ${error.message}</div>`;
}
}
async function listAllValues() {
const allValuesDiv = document.getElementById('allValues');
try {
const results = await window.kvs.listAll();
if (results.length === 0) {
allValuesDiv.innerHTML = '<div class="no-values">No stored values found</div>';
return;
}
const html = results.map(({key, value, encrypted}) => `
<div class="stored-value ${encrypted ? 'encrypted' : 'not-encrypted'}">
<div class="stored-key">${key}</div>
<div class="stored-value-content">${value}</div>
<div class="encryption-status">
${encrypted ?
'<span class="status-icon">🔒</span> Encrypted' :
'<span class="status-icon">⚠️</span> Not encrypted'}
</div>
</div>
`).join('');
allValuesDiv.innerHTML = html;
} catch (error) {
allValuesDiv.innerHTML = `<div class="error">Error listing values: ${error.message}</div>`;
}
}
// Check session validity periodically
const sessionCheckInterval = setInterval(() => {
if (window.kvs && !window.kvs.isSessionValid()) {
window.kvs.clearSession();
updateStatus();
}
}, 60000); // Check every minute
// Cleanup interval when page unloads
window.addEventListener('unload', () => {
clearInterval(sessionCheckInterval);
});
// Initial check when the page loads
window.addEventListener('DOMContentLoaded', () => {
updateStatus();
});
// Update status when user is identified
window.addEventListener('userIdentified', updateStatus);
</script>
</body>
</html>