v0.3.18 - index.html improvements
This commit is contained in:
139
api/index.html
139
api/index.html
@@ -169,10 +169,11 @@
|
||||
}
|
||||
|
||||
.config-table {
|
||||
border: var(--border-width) solid var(--primary-color);
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: var(--border-radius);
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
margin: 10px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -183,6 +184,12 @@
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
font-family: var(--font-family);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.config-table-container {
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.config-table th {
|
||||
@@ -425,16 +432,17 @@
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* Two-Column Layout */
|
||||
.two-column-layout {
|
||||
/* Main Sections Wrapper */
|
||||
.main-sections-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--border-width);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.column {
|
||||
.flex-section {
|
||||
flex: 1;
|
||||
min-width: 300px; /* Ensure columns are at least 300px wide */
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
@@ -453,12 +461,6 @@
|
||||
h2 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Stack columns vertically on screens smaller than 700px */
|
||||
.two-column-layout {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -466,8 +468,11 @@
|
||||
<body>
|
||||
<h1>C-RELAY ADMIN API</h1>
|
||||
|
||||
<!-- Main Sections Wrapper -->
|
||||
<div class="main-sections-wrapper">
|
||||
|
||||
<!-- Persistent Authentication Header - Always Visible -->
|
||||
<div id="persistent-auth-container" class="section">
|
||||
<div id="persistent-auth-container" class="section flex-section">
|
||||
<div class="user-info-container">
|
||||
<button type="button" id="login-logout-btn" class="login-logout-btn">LOGIN</button>
|
||||
<div class="user-details" id="persistent-user-details" style="display: none;">
|
||||
@@ -480,10 +485,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Two-Column Layout: Authentication + Relay Connection -->
|
||||
<div class="two-column-layout">
|
||||
<!-- Login Section - Left Column -->
|
||||
<div id="login-section" class="column">
|
||||
<!-- Login Section -->
|
||||
<div id="login-section" class="flex-section">
|
||||
<div class="section">
|
||||
<h2>NOSTR AUTHENTICATION</h2>
|
||||
<p id="login-instructions">Please login with your Nostr identity to access the admin interface.</p>
|
||||
@@ -491,19 +494,21 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Relay Connection Section - Right Column -->
|
||||
<div id="relay-connection-section" class="column">
|
||||
<!-- Relay Connection Section -->
|
||||
<div id="relay-connection-section" class="flex-section">
|
||||
<div class="section">
|
||||
<h2>RELAY CONNECTION</h2>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="relay-connection-url">Relay URL:</label>
|
||||
<input type="text" id="relay-connection-url" value="ws://localhost:8888" placeholder="ws://localhost:8888 or wss://relay.example.com">
|
||||
<input type="text" id="relay-connection-url" value="ws://localhost:8888"
|
||||
placeholder="ws://localhost:8888 or wss://relay.example.com">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="relay-pubkey-manual">Relay Pubkey (if not available via NIP-11):</label>
|
||||
<input type="text" id="relay-pubkey-manual" placeholder="64-character hex pubkey" pattern="[0-9a-fA-F]{64}" title="64-character hexadecimal public key">
|
||||
<input type="text" id="relay-pubkey-manual" placeholder="64-character hex pubkey"
|
||||
pattern="[0-9a-fA-F]{64}" title="64-character hexadecimal public key">
|
||||
<small>If the relay hasn't been configured yet, enter the relay pubkey shown during startup</small>
|
||||
</div>
|
||||
|
||||
@@ -532,24 +537,21 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Interface (hidden until logged in) -->
|
||||
<div id="main-interface" class="hidden">
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Testing Section - Always Visible -->
|
||||
<div class="section">
|
||||
|
||||
<div class="status disconnected" id="relay-status">READY TO FETCH</div>
|
||||
<div class="inline-buttons">
|
||||
<button type="button" id="fetch-config-btn">FETCH CONFIGURATION (REQUIRES LOGIN + RELAY CONNECTION)</button>
|
||||
</div>
|
||||
<div class="status disconnected" id="config-status">NO CONFIGURATION LOADED</div>
|
||||
</div> <!-- End Main Sections Wrapper -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Testing Section -->
|
||||
<div id="div_config" class="section flex-section">
|
||||
|
||||
<div id="config-display" class="hidden">
|
||||
<div id="config-view-mode">
|
||||
<div class="config-table-container">
|
||||
<table class="config-table" id="config-table">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -561,8 +563,10 @@
|
||||
<tbody id="config-table-body">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="inline-buttons">
|
||||
<button type="button" id="fetch-config-btn">REFRESH</button>
|
||||
<button type="button" id="edit-config-btn">EDIT CONFIGURATION</button>
|
||||
<button type="button" id="copy-config-btn">COPY CONFIGURATION</button>
|
||||
</div>
|
||||
@@ -584,7 +588,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Auth Rules Management - Moved after configuration -->
|
||||
<div class="section" id="authRulesSection" style="display: none;">
|
||||
<div class="section flex-section" id="authRulesSection" style="display: none;">
|
||||
<div class="section-header">
|
||||
<h2>AUTH RULES MANAGEMENT</h2>
|
||||
<div class="status" id="authRulesStatus">●</div>
|
||||
@@ -628,12 +632,15 @@
|
||||
<small id="authRuleHelp">Enter nsec (will auto-convert) or 64-character hex pubkey</small>
|
||||
</div>
|
||||
<div id="whitelistWarning" class="warning-box" style="display: none;">
|
||||
<strong>⚠️ WARNING:</strong> Adding whitelist rules changes relay behavior to whitelist-only mode.
|
||||
<strong>⚠️ WARNING:</strong> Adding whitelist rules changes relay behavior to whitelist-only
|
||||
mode.
|
||||
Only whitelisted users will be able to interact with the relay.
|
||||
</div>
|
||||
<div class="inline-buttons">
|
||||
<button type="button" id="addWhitelistBtn" onclick="addWhitelistRule()">ADD TO WHITELIST</button>
|
||||
<button type="button" id="addBlacklistBtn" onclick="addBlacklistRule()">ADD TO BLACKLIST</button>
|
||||
<button type="button" id="addWhitelistBtn" onclick="addWhitelistRule()">ADD TO
|
||||
WHITELIST</button>
|
||||
<button type="button" id="addBlacklistBtn" onclick="addBlacklistRule()">ADD TO
|
||||
BLACKLIST</button>
|
||||
</div>
|
||||
<div id="authRuleStatus" class="rule-status"></div>
|
||||
</div>
|
||||
@@ -650,6 +657,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- TESTS Section -->
|
||||
<div class="section">
|
||||
<h2>ADMIN API TESTS</h2>
|
||||
@@ -660,7 +672,8 @@
|
||||
<label for="test-event-log">Event Log (Sent/Received):</label>
|
||||
<div class="log-panel" id="test-event-log" style="height: 300px;">
|
||||
<div class="log-entry">
|
||||
<span class="log-timestamp">SYSTEM:</span> Test interface ready. Click buttons below to test admin API functions.
|
||||
<span class="log-timestamp">SYSTEM:</span> Test interface ready. Click buttons below to test admin
|
||||
API functions.
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" id="clear-test-log-btn">CLEAR TEST LOG</button>
|
||||
@@ -688,8 +701,10 @@
|
||||
<div class="input-group">
|
||||
<label for="test-pubkey-input">Test Pubkey (for blacklist/whitelist):</label>
|
||||
<div style="display: flex; gap: 10px; align-items: flex-start;">
|
||||
<input type="text" id="test-pubkey-input" placeholder="Enter pubkey or nsec1... for testing" style="flex: 1;">
|
||||
<button type="button" id="generate-test-key-btn" style="width: auto; padding: 8px 16px; white-space: nowrap;">GENERATE KEY</button>
|
||||
<input type="text" id="test-pubkey-input" placeholder="Enter pubkey or nsec1... for testing"
|
||||
style="flex: 1;">
|
||||
<button type="button" id="generate-test-key-btn"
|
||||
style="width: auto; padding: 8px 16px; white-space: nowrap;">GENERATE KEY</button>
|
||||
</div>
|
||||
<small>This pubkey will be used for blacklist/whitelist tests</small>
|
||||
</div>
|
||||
@@ -746,13 +761,12 @@
|
||||
|
||||
// DOM elements
|
||||
const loginSection = document.getElementById('login-section');
|
||||
const mainInterface = document.getElementById('main-interface');
|
||||
// const mainInterface = document.getElementById('main-interface');
|
||||
const persistentUserName = document.getElementById('persistent-user-name');
|
||||
const persistentUserPubkey = document.getElementById('persistent-user-pubkey');
|
||||
const persistentUserAbout = document.getElementById('persistent-user-about');
|
||||
const persistentUserDetails = document.getElementById('persistent-user-details');
|
||||
const relayUrl = document.getElementById('relay-url');
|
||||
const relayStatus = document.getElementById('relay-status');
|
||||
const fetchConfigBtn = document.getElementById('fetch-config-btn');
|
||||
// Relay connection elements
|
||||
const relayConnectionUrl = document.getElementById('relay-connection-url');
|
||||
@@ -761,7 +775,6 @@
|
||||
const connectRelayBtn = document.getElementById('connect-relay-btn');
|
||||
const disconnectRelayBtn = document.getElementById('disconnect-relay-btn');
|
||||
const testWebSocketBtn = document.getElementById('test-websocket-btn');
|
||||
const configStatus = document.getElementById('config-status');
|
||||
const configDisplay = document.getElementById('config-display');
|
||||
const configViewMode = document.getElementById('config-view-mode');
|
||||
const configEditMode = document.getElementById('config-edit-mode');
|
||||
@@ -1282,11 +1295,9 @@
|
||||
disconnectFromRelay();
|
||||
|
||||
// Reset UI
|
||||
mainInterface.classList.add('hidden');
|
||||
// mainInterface.classList.add('hidden');
|
||||
loginSection.classList.remove('hidden');
|
||||
updateConfigStatus(false);
|
||||
relayStatus.textContent = 'READY TO FETCH';
|
||||
relayStatus.className = 'status disconnected';
|
||||
updateLoginLogoutButton();
|
||||
hideAuthRulesSection();
|
||||
|
||||
@@ -1309,7 +1320,7 @@
|
||||
// Show main interface after login
|
||||
function showMainInterface() {
|
||||
loginSection.classList.add('hidden');
|
||||
mainInterface.classList.remove('hidden');
|
||||
// mainInterface.classList.remove('hidden');
|
||||
updateLoginLogoutButton();
|
||||
}
|
||||
|
||||
@@ -1396,11 +1407,9 @@
|
||||
currentConfig = null;
|
||||
|
||||
// Reset UI - keep persistent auth container visible
|
||||
mainInterface.classList.add('hidden');
|
||||
// mainInterface.classList.add('hidden');
|
||||
loginSection.classList.remove('hidden');
|
||||
updateConfigStatus(false);
|
||||
relayStatus.textContent = 'READY TO FETCH';
|
||||
relayStatus.className = 'status disconnected';
|
||||
updateLoginLogoutButton();
|
||||
|
||||
console.log('Logged out successfully');
|
||||
@@ -1412,12 +1421,8 @@
|
||||
|
||||
function updateConfigStatus(loaded) {
|
||||
if (loaded) {
|
||||
configStatus.textContent = 'CONFIGURATION LOADED';
|
||||
configStatus.className = 'status connected';
|
||||
configDisplay.classList.remove('hidden');
|
||||
} else {
|
||||
configStatus.textContent = 'NO CONFIGURATION LOADED';
|
||||
configStatus.className = 'status disconnected';
|
||||
configDisplay.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
@@ -1445,8 +1450,6 @@
|
||||
}
|
||||
|
||||
console.log(`Connecting to relay via SimplePool: ${url}`);
|
||||
relayStatus.textContent = 'CONNECTING...';
|
||||
relayStatus.className = 'status connected';
|
||||
|
||||
// Clean up existing pool
|
||||
if (relayPool) {
|
||||
@@ -1462,9 +1465,6 @@
|
||||
|
||||
console.log(`Generated subscription ID: ${subscriptionId}`);
|
||||
|
||||
relayStatus.textContent = 'CONNECTED - SUBSCRIBING...';
|
||||
relayStatus.className = 'status connected';
|
||||
|
||||
// Subscribe to kind 23457 events (admin response events)
|
||||
const subscription = relayPool.subscribeMany([url], [{
|
||||
since: Math.floor(Date.now() / 1000),
|
||||
@@ -1488,9 +1488,6 @@
|
||||
|
||||
// Process admin response event
|
||||
processAdminResponse(event);
|
||||
|
||||
relayStatus.textContent = 'SUBSCRIBED - LIVE UPDATES';
|
||||
relayStatus.className = 'status connected';
|
||||
},
|
||||
oneose() {
|
||||
console.log('EOSE received - End of stored events');
|
||||
@@ -1498,19 +1495,10 @@
|
||||
|
||||
if (!currentConfig) {
|
||||
console.log('No configuration events were received');
|
||||
configStatus.textContent = 'NO CONFIGURATION EVENTS FOUND';
|
||||
configStatus.className = 'status error';
|
||||
relayStatus.textContent = 'SUBSCRIBED - NO EVENTS FOUND';
|
||||
relayStatus.className = 'status error';
|
||||
} else {
|
||||
relayStatus.textContent = 'SUBSCRIBED - LIVE UPDATES';
|
||||
relayStatus.className = 'status connected';
|
||||
}
|
||||
},
|
||||
onclose(reason) {
|
||||
console.log('Subscription closed:', reason);
|
||||
relayStatus.textContent = 'SUBSCRIPTION CLOSED';
|
||||
relayStatus.className = 'status error';
|
||||
updateConfigStatus(false);
|
||||
}
|
||||
});
|
||||
@@ -1525,9 +1513,6 @@
|
||||
console.error('Configuration subscription failed:', error.message);
|
||||
console.error('Configuration subscription failed:', error);
|
||||
console.error('Error stack:', error.stack);
|
||||
|
||||
relayStatus.textContent = 'SUBSCRIPTION FAILED';
|
||||
relayStatus.className = 'status error';
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -1679,8 +1664,6 @@
|
||||
} else {
|
||||
console.log('No configuration data received');
|
||||
updateConfigStatus(false);
|
||||
configStatus.textContent = 'NO CONFIGURATION DATA RECEIVED';
|
||||
configStatus.className = 'status error';
|
||||
}
|
||||
|
||||
// Also log to test interface for debugging
|
||||
@@ -1987,21 +1970,15 @@
|
||||
}
|
||||
|
||||
console.log('Config query command sent successfully - waiting for response...');
|
||||
configStatus.textContent = 'CONFIGURATION QUERY SENT - WAITING FOR RESPONSE';
|
||||
configStatus.className = 'status connected';
|
||||
|
||||
} else {
|
||||
console.log('Not logged in - only subscription established for testing');
|
||||
configStatus.textContent = 'SUBSCRIPTION ESTABLISHED - LOGIN REQUIRED FOR CONFIG QUERY';
|
||||
configStatus.className = 'status disconnected';
|
||||
}
|
||||
|
||||
return true;
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch configuration:', error);
|
||||
configStatus.textContent = 'CONFIGURATION FETCH FAILED';
|
||||
configStatus.className = 'status error';
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user