Selected: ${file.name}
+ Click "Upload" to get media URL`; + } else { + mediaPreview.style.display = 'block'; + mediaLinkContainer.innerHTML = + 'Click "Upload" to get media URL'; + } + }); + } + + // Post kind radio button change handler + if (postKindRadios.length) { + postKindRadios.forEach(radio => { + radio.addEventListener('change', () => { + titleField.classList.toggle('d-none', radio.value !== '20'); + + // Show/hide required media elements for kind 20 + const isKind20 = radio.value === '20'; + const kind20MediaRequired = document.getElementById('kind20MediaRequired'); + if (kind20MediaRequired) { + kind20MediaRequired.style.display = isKind20 ? 'inline-block' : 'none'; + } + + // For kind 20, validate that media is provided before posting + if (submitPostBtn) { + submitPostBtn.title = isKind20 ? + 'Picture posts require a title and an image URL' : + 'Create a standard text post'; + } + }); + }); + } + + // =================================================== + // Event Handler Functions + // =================================================== + + // Load content when button is clicked + function handleLoadContent() { + if (!botSelect || !botSelect.value) { + alert('Please select a bot first!'); + return; + } + + currentBotId = botSelect.value; + contentContainer.classList.remove('d-none'); + + loadBotContent(currentBotId); + } + + // Handle file upload button click + function handleFileUpload() { + if (!currentBotId) { + alert('Please select a bot first'); + return; + } + + if (!uploadFileInput.files.length) { + alert('Please select a file to upload'); + return; + } + + uploadBotFile(currentBotId); + } + + // Handle quick upload for post creation + function handleQuickUpload() { + if (!currentBotId) { + alert('Please select a bot first'); + return; + } + + if (!postMediaInput.files.length) { + alert('Please select a file to upload'); + return; + } + + quickUploadMedia(currentBotId, postMediaInput.files[0]); + } + + // Handle post submission + function handleSubmitPost() { + if (!currentBotId) { + alert('Please select a bot first'); + return; + } + + createManualPost(currentBotId); + } + + // Handle saving media server settings + function handleSaveMediaSettings() { + globalMediaConfig.primaryService = primaryServer.value; + globalMediaConfig.primaryURL = primaryServerURL ? primaryServerURL.value.trim() : ''; + globalMediaConfig.fallbackService = fallbackServer.value === 'none' ? '' : fallbackServer.value; + globalMediaConfig.fallbackURL = fallbackServerURL ? fallbackServerURL.value.trim() : ''; + + // Save to localStorage + localStorage.setItem('mediaConfig', JSON.stringify(globalMediaConfig)); + + alert('Media server settings saved!'); + } + + // =================================================== + // Utility Functions + // =================================================== + + // Preview a file (image or video) + function previewFile(file, previewElement, containerElement) { + if (!file) { + containerElement.classList.add('d-none'); + return; + } + + containerElement.classList.remove('d-none'); + + // Show preview for images + if (file.type.startsWith('image/')) { + const reader = new FileReader(); + reader.onload = function (e) { + previewElement.src = e.target.result; + previewElement.style.display = 'block'; + }; + reader.readAsDataURL(file); + } else { + // For non-images (video, etc) + previewElement.style.display = 'none'; + } + } + + // Validates post data before submission + function validatePostData() { + const kind = parseInt(document.querySelector('input[name="postKind"]:checked').value); + const content = manualPostContent.value.trim(); + + // Basic validation for all post types + if (!content) { + alert('Post content is required'); + return false; + } + + // Additional validation for kind 20 posts + if (kind === 20) { + const title = postTitle.value.trim(); + if (!title) { + alert('Title is required for Picture Posts (kind: 20)'); + return false; + } + + // Check if we have a media URL either in the content or in the mediaUrlInput + const mediaUrl = mediaUrlInput.value.trim(); + const urlRegex = /(https?:\/\/[^\s]+)/g; + const contentContainsUrl = urlRegex.test(content); + + if (!mediaUrl && !contentContainsUrl) { + alert('Picture posts require an image URL. Please upload an image or enter a URL in the Media URL field or in the content.'); + return false; + } + } + + return true; + } + + // =================================================== + // API Functions + // =================================================== + + // Load bot content files + function loadBotContent(botId) { + const token = localStorage.getItem('authToken'); + + // Load any saved media config from localStorage + const savedConfig = localStorage.getItem('mediaConfig'); + if (savedConfig) { + try { + globalMediaConfig = JSON.parse(savedConfig); + if (primaryServer) primaryServer.value = globalMediaConfig.primaryService || 'nip94'; + if (primaryServerURL) primaryServerURL.value = globalMediaConfig.primaryURL || ''; + if (fallbackServer) { + fallbackServer.value = globalMediaConfig.fallbackService || 'none'; + } + if (fallbackServerURL) { + fallbackServerURL.value = globalMediaConfig.fallbackURL || ''; + } + } catch (e) { + console.error('Error parsing saved media config:', e); + } + } + + // Fetch content files + fetch(`/api/content/${botId}`, { + headers: { 'Authorization': token } + }) + .then(res => { + if (!res.ok) throw new Error('Failed to list content'); + return res.json(); + }) + .then(files => { + renderContentFiles(botId, files); + }) + .catch(err => { + console.error('Error loading content:', err); + alert('Error loading content: ' + err.message); + }); + } + + // Render the list of content files + function renderContentFiles(botId, files) { + const contentArea = document.getElementById('contentArea'); + if (!contentArea) return; + + if (!files || files.length === 0) { + contentArea.innerHTML = 'No files found. Upload some content!
'; + return; + } + + let html = 'Media URL:
+${mediaUrl}`;
+
+ // Insert into text area
+ textArea.value += (textArea.value ? '\n\n' : '') + mediaUrl;
+ })
+ .catch(err => {
+ console.error('Upload error:', err);
+ quickUploadBtn.disabled = false;
+ quickUploadBtn.textContent = 'Upload';
+ mediaLinkContainer.innerHTML =
+ `Upload error: ${err.message}
`; + alert('Upload error: ' + err.message); + }); + } + + // Create a manual post (improved for kind 20 posts) + function createManualPost(botId) { + // Validate the form data first + if (!validatePostData()) { + return; + } + + const content = manualPostContent.value.trim(); + const hashtagsValue = postHashtags.value.trim(); + const hashtags = hashtagsValue + ? hashtagsValue.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0) + : []; + + const kind = parseInt(document.querySelector('input[name="postKind"]:checked').value); + let title = ''; + + if (kind === 20) { + title = postTitle.value.trim(); + } + + // Extract media URLs and alt text + const mediaUrl = mediaUrlInput ? mediaUrlInput.value.trim() : ''; + const altText = mediaAltText ? mediaAltText.value.trim() : ''; + + // Build the post data based on kind + const postData = { + kind: kind, + content: content, + hashtags: hashtags + }; + + if (kind === 20) { + postData.title = title; + + // For kind 20, we need to ensure we have a valid URL + // If we have a specific media URL field value, add it to the content if not already there + if (mediaUrl && !content.includes(mediaUrl)) { + postData.content = content + '\n\n' + mediaUrl; + } + + // Add alt text if provided + if (altText) { + postData.alt = altText; + } + } + + // Disable submit button during request + submitPostBtn.disabled = true; + submitPostBtn.innerHTML = ' Posting...'; + + const token = localStorage.getItem('authToken'); + fetch(`/api/bots/${botId}/post`, { + method: 'POST', + headers: { + 'Authorization': token, + 'Content-Type': 'application/json' + }, + body: JSON.stringify(postData) + }) + .then(res => { + if (!res.ok) { + return res.json().then(data => { + throw new Error(data.error || 'Failed to create post'); + }); + } + return res.json(); + }) + .then(data => { + alert('Post created successfully!'); + console.log('Post success response:', data); + + // Reset form + manualPostContent.value = ''; + postHashtags.value = ''; + postTitle.value = ''; + postMediaInput.value = ''; + if (mediaUrlInput) mediaUrlInput.value = ''; + if (mediaAltText) mediaAltText.value = ''; + mediaPreviewContainer.classList.add('d-none'); + + // Reset button + submitPostBtn.disabled = false; + submitPostBtn.textContent = 'Post Now'; + }) + .catch(err => { + console.error('Error creating post:', err); + alert('Error creating post: ' + err.message); + + // Reset button + submitPostBtn.disabled = false; + submitPostBtn.textContent = 'Post Now'; + }); + } + + // =================================================== + // Initialize media config + // =================================================== + // Try to load media config from localStorage + const savedConfig = localStorage.getItem('mediaConfig'); + if (savedConfig) { + try { + globalMediaConfig = JSON.parse(savedConfig); + if (primaryServer) primaryServer.value = globalMediaConfig.primaryService || 'nip94'; + if (primaryServerURL) primaryServerURL.value = globalMediaConfig.primaryURL || ''; + if (fallbackServer) { + fallbackServer.value = globalMediaConfig.fallbackService || 'none'; + } + if (fallbackServerURL) { + fallbackServerURL.value = globalMediaConfig.fallbackURL || ''; + } + } catch (e) { + console.error('Error parsing saved media config:', e); + } + } +}); \ No newline at end of file diff --git a/web/assets/js/main.js b/web/assets/js/main.js index 6128277..81f0023 100644 --- a/web/assets/js/main.js +++ b/web/assets/js/main.js @@ -1,5 +1,7 @@ document.addEventListener('DOMContentLoaded', () => { - // DOM Elements + /* ---------------------------------------------------- + * DOM Elements + * -------------------------------------------------- */ const loginButton = document.getElementById('loginButton'); const logoutButton = document.getElementById('logoutButton'); const userInfo = document.getElementById('userInfo'); @@ -9,30 +11,134 @@ document.addEventListener('DOMContentLoaded', () => { const botsList = document.getElementById('bots-list'); const createBotBtn = document.getElementById('create-bot-btn'); const saveBotBtn = document.getElementById('save-bot-btn'); - const generateKeypair = document.getElementById('generateKeypair'); - const keypairInput = document.getElementById('keypair-input'); - // Bootstrap Modal + // Modal elements for new bot creation + const createBotModalEl = document.getElementById('createBotModal'); + // New form fields for key import/generation + const keyOption = document.getElementById('keyOption'); + const nsecKeyInput = document.getElementById('nsecKeyInput'); + const toggleNsecKey = document.getElementById('toggleNsecKey'); + + // If you have a "bot settings" modal: + // (IDs must match the modals in your HTML) + const botSettingsModalEl = document.getElementById('botSettingsModal'); + + /* ---------------------------------------------------- + * Bootstrap Modal instance + * -------------------------------------------------- */ let createBotModal; - if (typeof bootstrap !== 'undefined') { - createBotModal = new bootstrap.Modal(document.getElementById('createBotModal')); + if (typeof bootstrap !== 'undefined' && createBotModalEl) { + createBotModal = new bootstrap.Modal(createBotModalEl); } - // State - let currentUser = null; - const API_ENDPOINT = ''; + // If you have a Bot Settings modal + let botSettingsModal; + if (typeof bootstrap !== 'undefined' && botSettingsModalEl) { + botSettingsModal = new bootstrap.Modal(botSettingsModalEl); + } - // Check if already logged in + /* ---------------------------------------------------- + * Global State + * -------------------------------------------------- */ + let currentUser = null; + const API_ENDPOINT = ''; // <--- If your server is at http://localhost:8765, then use that. Example: 'http://localhost:8765' + + /* ---------------------------------------------------- + * On page load, check if already logged in + * -------------------------------------------------- */ checkAuth(); - // Event Listeners - loginButton.addEventListener('click', login); - logoutButton.addEventListener('click', logout); - createBotBtn.addEventListener('click', showCreateBotModal); - saveBotBtn.addEventListener('click', createBot); - generateKeypair.addEventListener('change', toggleKeypairInput); + /* ---------------------------------------------------- + * Event Listeners + * -------------------------------------------------- */ + if (loginButton) loginButton.addEventListener('click', login); + if (logoutButton) logoutButton.addEventListener('click', logout); - // Functions + if (createBotBtn) createBotBtn.addEventListener('click', showCreateBotModal); + if (saveBotBtn) saveBotBtn.addEventListener('click', createBot); + + document.body.addEventListener('click', (evt) => { + const viewBtn = evt.target.closest('.view-bot'); + if (viewBtn) { + const botId = viewBtn.dataset.id; + if (botId) { + openBotSettings(botId); + } + } + }); + + // Handle "keyOption" dropdown changes + if (keyOption) { + keyOption.addEventListener('change', function () { + if (this.value === 'import') { + nsecKeyInput.style.display = 'block'; + // Focus the NSEC input field (slight delay to ensure DOM is ready) + setTimeout(() => { + const nk = document.getElementById('botNsecKey'); + if (nk) nk.focus(); + }, 100); + } else { + nsecKeyInput.style.display = 'none'; + } + }); + } + + // Toggle NSEC key visibility + if (toggleNsecKey) { + toggleNsecKey.addEventListener('click', function () { + const nsecKeyField = document.getElementById('botNsecKey'); + if (!nsecKeyField) return; + + if (nsecKeyField.type === 'password') { + nsecKeyField.type = 'text'; + this.innerHTML = ` + + `; + } else { + nsecKeyField.type = 'password'; + this.innerHTML = ` + + `; + } + }); + } + + /* ---------------------------------------------------- + * Authentication / Login / Logout + * -------------------------------------------------- */ async function checkAuth() { const token = localStorage.getItem('authToken'); if (!token) { @@ -42,15 +148,22 @@ document.addEventListener('DOMContentLoaded', () => { try { const response = await fetch(`${API_ENDPOINT}/api/auth/verify`, { - headers: { - 'Authorization': token - } + headers: { 'Authorization': token } }); if (response.ok) { const data = await response.json(); - currentUser = data.pubkey; + + // data.pubkey is currently hex + // Convert to npub using nip19 from nostr-tools + const { nip19 } = window.nostrTools; + const userNpub = nip19.npubEncode(data.pubkey); + + // Store npub as currentUser + currentUser = userNpub; + showMainContent(); + // Always load bots if on the main page fetchBots(); } else { // Token invalid @@ -63,6 +176,7 @@ document.addEventListener('DOMContentLoaded', () => { } } + async function login() { if (!window.nostr) { alert('Nostr extension not found. Please install a NIP-07 compatible extension like nos2x or Alby.'); @@ -72,7 +186,7 @@ document.addEventListener('DOMContentLoaded', () => { try { // Get user's public key const pubkey = await window.nostr.getPublicKey(); - + // Create challenge event for signing const event = { kind: 22242, @@ -83,13 +197,11 @@ document.addEventListener('DOMContentLoaded', () => { // Sign the event const signedEvent = await window.nostr.signEvent(event); - + // Send to server for verification const response = await fetch(`${API_ENDPOINT}/api/auth/login`, { method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, + headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pubkey: pubkey, signature: signedEvent.sig, @@ -118,33 +230,44 @@ document.addEventListener('DOMContentLoaded', () => { showAuthSection(); } + /* ---------------------------------------------------- + * UI State Helpers + * -------------------------------------------------- */ function showAuthSection() { - authSection.classList.remove('d-none'); - mainContent.classList.add('d-none'); - loginButton.classList.remove('d-none'); - userInfo.classList.add('d-none'); - logoutButton.classList.add('d-none'); + if (authSection) authSection.classList.remove('d-none'); + if (mainContent) mainContent.classList.add('d-none'); + if (loginButton) loginButton.classList.remove('d-none'); + if (userInfo) userInfo.classList.add('d-none'); + if (logoutButton) logoutButton.classList.add('d-none'); } - + function showMainContent() { - authSection.classList.add('d-none'); - mainContent.classList.remove('d-none'); - loginButton.classList.add('d-none'); - userInfo.classList.remove('d-none'); - logoutButton.classList.remove('d-none'); - + if (authSection) authSection.classList.add('d-none'); + if (mainContent) mainContent.classList.remove('d-none'); + if (loginButton) loginButton.classList.add('d-none'); + if (userInfo) userInfo.classList.remove('d-none'); + if (logoutButton) logoutButton.classList.remove('d-none'); + // Truncate pubkey for display - const shortPubkey = currentUser.substring(0, 8) + '...' + currentUser.substring(currentUser.length - 4); - userPubkey.textContent = shortPubkey; + if (userPubkey && currentUser) { + const shortPubkey = currentUser.substring(0, 8) + '...' + + currentUser.substring(currentUser.length - 4); + userPubkey.textContent = shortPubkey; + } } + + /* ---------------------------------------------------- + * Bots List + * -------------------------------------------------- */ async function fetchBots() { + // If there's no #bots-list, skip + if (!botsList) return; + try { const token = localStorage.getItem('authToken'); const response = await fetch(`${API_ENDPOINT}/api/bots`, { - headers: { - 'Authorization': token - } + headers: { 'Authorization': token } }); if (response.ok) { @@ -159,21 +282,67 @@ document.addEventListener('DOMContentLoaded', () => { } function renderBots(bots) { - botsList.innerHTML = ''; + if (!botsList) return; - if (bots.length === 0) { + botsList.innerHTML = ''; + + if (!bots || bots.length === 0) { botsList.innerHTML = `