v0.3.18 - index.html improvements

This commit is contained in:
Your Name
2025-09-30 07:51:23 -04:00
parent c23d81b740
commit eefb0e427e
2 changed files with 432 additions and 455 deletions

View File

@@ -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;
}
}

View File

@@ -1 +1 @@
1182553
1371445