laantungir/c-relay
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 7 Wiki Activity

v0.3.18 - index.html improvements

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

139
api/index.html
View File

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

2
relay.pid
View File

@@ -1 +1 @@
1182553 1371445