124 lines
6.0 KiB
HTML
124 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<!-- Implement strict Content Security Policy -->
|
|
<title>HTTP Messages - CLIENT</title>
|
|
<!-- Load our CSS files -->
|
|
<link rel="stylesheet" href="./styles.css">
|
|
<link rel="stylesheet" href="./styles/event-list.css">
|
|
<link rel="stylesheet" href="./styles/client-events-table.css">
|
|
</head>
|
|
<body>
|
|
<!-- Navigation bar container - content will be injected by navbar.ts -->
|
|
<div id="navbarContainer" class="top-nav">
|
|
<!-- Navbar content will be injected here -->
|
|
</div>
|
|
|
|
<!-- Main Content (HTTP Request Converter) -->
|
|
<div class="content">
|
|
<div class="info-box">
|
|
<p>This tool converts HTTP requests into a single Nostr event of kind 21120. The HTTP request is encrypted using NIP-44 in the content field with appropriate tags following the specification.</p>
|
|
</div>
|
|
|
|
<h2>Client Information:</h2>
|
|
<div class="client-info" style="margin-bottom: 15px;">
|
|
<div style="display: flex; align-items: center; margin-bottom: 10px;">
|
|
<div style="font-weight: bold; margin-right: 10px;">Your Pubkey:</div>
|
|
<div id="clientPubkey" style="font-family: monospace; word-break: break-all;">Not logged in</div>
|
|
<button id="toggleClientKeyFormatBtn" class="server-format-button" title="Toggle format" style="margin-left: 10px;">HEX</button>
|
|
</div>
|
|
<div class="format-indicator">
|
|
<small id="clientKeyFormatIndicator">Currently showing: NPUB format</small>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Server Information:</h2>
|
|
<div style="margin-bottom: 15px;">
|
|
<div style="margin-bottom: 10px;">
|
|
<label for="relay">Relay to search for servers:</label><br>
|
|
<div class="server-input-container">
|
|
<input type="text" id="relay" value="wss://relay.degmods.com" class="server-input" style="border-radius: 4px 0 0 4px;">
|
|
<button id="searchRelayBtn" class="server-search-button">Search Relay</button>
|
|
<button id="refreshRelayBtn" class="server-refresh-button" title="Clear cache and fetch fresh data">🔄</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 10px;">
|
|
<label for="serverSelection">Choose a server:</label><br>
|
|
<div class="server-input-container">
|
|
<input type="text" id="serverPubkey" placeholder="Selected server pubkey (d-tag) or enter manually" class="server-input">
|
|
<button id="toggleKeyFormatBtn" class="server-format-button" title="Toggle format">HEX</button>
|
|
<button id="selectServerBtn" class="server-select-button">Select Server</button>
|
|
</div>
|
|
<div class="format-indicator">
|
|
<small id="keyFormatIndicator">Currently showing: NPUB format</small>
|
|
</div>
|
|
<div id="serverSelectionContainer" class="server-selection-container" style="display: none;">
|
|
<div class="selection-header">
|
|
<input type="text" id="serverSearchInput" placeholder="Search by operator name/pubkey" class="server-search-input">
|
|
<button id="closeSelectionBtn" class="close-selection-btn">×</button>
|
|
</div>
|
|
<div id="serverList" class="server-list">
|
|
<!-- Server list will be populated here -->
|
|
<div class="server-list-loading">Loading servers...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="relay">Response Relay (optional):</label><br>
|
|
<input type="text" id="relay" value="wss://relay.degmods.com" style="width: 100%; padding: 8px;">
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Enter HTTP Request:</h2>
|
|
<textarea id="httpRequest" placeholder="GET /index.html HTTP/1.1
|
|
Host: example.com
|
|
User-Agent: Browser/1.0
|
|
|
|
"></textarea>
|
|
|
|
<button id="convertButton">Convert to Event</button>
|
|
|
|
<div id="output" hidden>
|
|
<h2>Converted Event:</h2>
|
|
<div class="event-output-container">
|
|
<pre id="eventOutput"></pre>
|
|
<button id="copyEventButton" class="copy-button" title="Copy to clipboard">
|
|
<span>Copy</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="publish-container">
|
|
<h2>Publish to Relay:</h2>
|
|
<div class="publish-input-container">
|
|
<input type="text" id="publishRelay" value="wss://relay.degmods.com" placeholder="wss://relay.example.com" class="publish-input">
|
|
<button id="publishButton" class="publish-button">Publish Event</button>
|
|
</div>
|
|
<div id="publishResult" class="publish-result" style="display: none;">
|
|
<!-- Publish results will be shown here -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="qr-container">
|
|
<h2>QR Code:</h2>
|
|
<div id="qrCode"></div>
|
|
<p><small>Scan this QR code to share the Nostr event</small></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Client Events Table -->
|
|
<div class="client-events-section">
|
|
<h2>Outgoing Requests History</h2>
|
|
<div class="info-box">
|
|
<p>Below is a history of your outgoing KIND 21120 requests and their responses (KIND 21121). Click on a request to see details.</p>
|
|
</div>
|
|
<div id="clientEventsTableContainer"></div>
|
|
</div>
|
|
<!-- Include the webpack bundled JavaScript file with forced loading -->
|
|
<script src="./client.bundle.js" onload="console.log('Client bundle loaded successfully')"></script>
|
|
</body>
|
|
</html> |