...
This commit is contained in:
299
poc/logintest.html
Normal file
299
poc/logintest.html
Normal file
@@ -0,0 +1,299 @@
|
||||
{% 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>
|
||||
Reference in New Issue
Block a user