300 lines
13 KiB
HTML
300 lines
13 KiB
HTML
{% 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 ThreeFold.</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>
|