/** * NOSTR_LOGIN_LITE - Authentication Library * * ⚠️ WARNING: THIS FILE IS AUTO-GENERATED - DO NOT EDIT MANUALLY! * ⚠️ To make changes, edit lite/build.js and run: cd lite && node build.js * ⚠️ Any manual edits to this file will be OVERWRITTEN when build.js runs! * * Two-file architecture: * 1. Load nostr.bundle.js (official nostr-tools bundle) * 2. Load nostr-lite.js (this file - NOSTR_LOGIN_LITE library with CSS-only themes) * Generated on: 2025-09-15T17:48:16.817Z */ // Verify dependencies are loaded if (typeof window !== 'undefined') { if (!window.NostrTools) { console.error('NOSTR_LOGIN_LITE: nostr.bundle.js must be loaded first'); throw new Error('Missing dependency: nostr.bundle.js'); } console.log('NOSTR_LOGIN_LITE: Dependencies verified ✓'); console.log('NOSTR_LOGIN_LITE: NostrTools available with keys:', Object.keys(window.NostrTools)); console.log('NOSTR_LOGIN_LITE: NIP-46 available:', !!window.NostrTools.nip46); } // ===== NIP-46 Extension Integration ===== // Add NIP-46 functionality to NostrTools if not already present if (typeof window.NostrTools !== 'undefined' && !window.NostrTools.nip46) { console.log('NOSTR_LOGIN_LITE: Adding NIP-46 extension to NostrTools'); const { nip44, generateSecretKey, getPublicKey, finalizeEvent, verifyEvent, utils } = window.NostrTools; // NIP-05 regex for parsing const NIP05_REGEX = /^(?:([\w.+-]+)@)?([\w_-]+(.[\w_-]+)+)$/; const BUNKER_REGEX = /^bunker:\/\/([0-9a-f]{64})\??([?\/\w:.=&%-]*)$/; const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Event kinds const NostrConnect = 24133; const ClientAuth = 22242; const Handlerinformation = 31990; // Fetch implementation let _fetch; try { _fetch = fetch; } catch { _fetch = null; } function useFetchImplementation(fetchImplementation) { _fetch = fetchImplementation; } // Simple Pool implementation for NIP-46 class SimplePool { constructor() { this.relays = new Map(); this.subscriptions = new Map(); } async ensureRelay(url) { if (!this.relays.has(url)) { console.log(`NIP-46: Connecting to relay ${url}`); const ws = new WebSocket(url); const relay = { ws, connected: false, subscriptions: new Map() }; this.relays.set(url, relay); // Wait for connection with proper event handlers await new Promise((resolve, reject) => { const timeout = setTimeout(() => { console.error(`NIP-46: Connection timeout for ${url}`); reject(new Error(`Connection timeout to ${url}`)); }, 10000); // 10 second timeout ws.onopen = () => { console.log(`NIP-46: Successfully connected to relay ${url}, WebSocket state: ${ws.readyState}`); relay.connected = true; clearTimeout(timeout); resolve(); }; ws.onerror = (error) => { console.error(`NIP-46: Failed to connect to ${url}:`, error); clearTimeout(timeout); reject(new Error(`Failed to connect to ${url}: ${error.message || 'Connection failed'}`)); }; ws.onclose = (event) => { console.log(`NIP-46: Disconnected from relay ${url}:`, event.code, event.reason); relay.connected = false; if (this.relays.has(url)) { this.relays.delete(url); } clearTimeout(timeout); reject(new Error(`Connection closed during setup: ${event.reason || 'Unknown reason'}`)); }; }); } else { const relay = this.relays.get(url); // Verify the existing connection is still open if (!relay.connected || relay.ws.readyState !== WebSocket.OPEN) { console.log(`NIP-46: Reconnecting to relay ${url}`); this.relays.delete(url); return await this.ensureRelay(url); // Recursively reconnect } } const relay = this.relays.get(url); console.log(`NIP-46: Relay ${url} ready, WebSocket state: ${relay.ws.readyState}`); return relay; } subscribe(relays, filters, params = {}) { const subId = Math.random().toString(36).substring(7); relays.forEach(async (url) => { try { const relay = await this.ensureRelay(url); relay.ws.onmessage = (event) => { try { const data = JSON.parse(event.data); if (data[0] === 'EVENT' && data[1] === subId) { params.onevent?.(data[2]); } else if (data[0] === 'EOSE' && data[1] === subId) { params.oneose?.(); } } catch (err) { console.warn('Failed to parse message:', err); } }; // Ensure filters is an array const filtersArray = Array.isArray(filters) ? filters : [filters]; const reqMsg = JSON.stringify(['REQ', subId, ...filtersArray]); relay.ws.send(reqMsg); } catch (err) { console.warn('Failed to connect to relay:', url, err); } }); return { close: () => { relays.forEach(async (url) => { const relay = this.relays.get(url); if (relay?.connected) { relay.ws.send(JSON.stringify(['CLOSE', subId])); } }); } }; } async publish(relays, event) { console.log(`NIP-46: Publishing event to ${relays.length} relays:`, event); const promises = relays.map(async (url) => { try { console.log(`NIP-46: Attempting to publish to ${url}`); const relay = await this.ensureRelay(url); return new Promise((resolve, reject) => { const timeout = setTimeout(() => { console.error(`NIP-46: Publish timeout to ${url}`); reject(new Error(`Publish timeout to ${url}`)); }, 10000); // Increased timeout to 10 seconds // Set up message handler for this specific event const messageHandler = (msg) => { try { const data = JSON.parse(msg.data); if (data[0] === 'OK' && data[1] === event.id) { clearTimeout(timeout); relay.ws.removeEventListener('message', messageHandler); if (data[2]) { console.log(`NIP-46: Publish success to ${url}:`, data[3]); resolve(data[3]); } else { console.error(`NIP-46: Publish rejected by ${url}:`, data[3]); reject(new Error(`Publish rejected: ${data[3]}`)); } } } catch (err) { console.error(`NIP-46: Error parsing message from ${url}:`, err); clearTimeout(timeout); relay.ws.removeEventListener('message', messageHandler); reject(err); } }; relay.ws.addEventListener('message', messageHandler); // Double-check WebSocket state before sending console.log(`NIP-46: About to publish to ${url}, WebSocket state: ${relay.ws.readyState} (0=CONNECTING, 1=OPEN, 2=CLOSING, 3=CLOSED)`); if (relay.ws.readyState === WebSocket.OPEN) { console.log(`NIP-46: Sending event to ${url}`); relay.ws.send(JSON.stringify(['EVENT', event])); } else { console.error(`NIP-46: WebSocket not ready for ${url}, state: ${relay.ws.readyState}`); clearTimeout(timeout); relay.ws.removeEventListener('message', messageHandler); reject(new Error(`WebSocket not ready for ${url}, state: ${relay.ws.readyState}`)); } }); } catch (err) { console.error(`NIP-46: Failed to publish to ${url}:`, err); return Promise.reject(new Error(`Failed to publish to ${url}: ${err.message}`)); } }); const results = await Promise.allSettled(promises); console.log(`NIP-46: Publish results:`, results); return results; } async querySync(relays, filter, params = {}) { return new Promise((resolve) => { const events = []; this.subscribe(relays, [filter], { ...params, onevent: (event) => events.push(event), oneose: () => resolve(events) }); }); } } // Bunker URL utilities function toBunkerURL(bunkerPointer) { let bunkerURL = new URL(`bunker://${bunkerPointer.pubkey}`); bunkerPointer.relays.forEach((relay) => { bunkerURL.searchParams.append('relay', relay); }); if (bunkerPointer.secret) { bunkerURL.searchParams.set('secret', bunkerPointer.secret); } return bunkerURL.toString(); } async function parseBunkerInput(input) { let match = input.match(BUNKER_REGEX); if (match) { try { const pubkey = match[1]; const qs = new URLSearchParams(match[2]); return { pubkey, relays: qs.getAll('relay'), secret: qs.get('secret') }; } catch (_err) { // Continue to NIP-05 parsing } } return queryBunkerProfile(input); } async function queryBunkerProfile(nip05) { if (!_fetch) { throw new Error('Fetch implementation not available'); } const match = nip05.match(NIP05_REGEX); if (!match) return null; const [_, name = '_', domain] = match; try { const url = `https://${domain}/.well-known/nostr.json?name=${name}`; const res = await (await _fetch(url, { redirect: 'error' })).json(); let pubkey = res.names[name]; let relays = res.nip46[pubkey] || []; return { pubkey, relays, secret: null }; } catch (_err) { return null; } } // BunkerSigner class class BunkerSigner { constructor(clientSecretKey, bp, params = {}) { if (bp.relays.length === 0) { throw new Error('no relays are specified for this bunker'); } this.params = params; this.pool = params.pool || new SimplePool(); this.secretKey = clientSecretKey; this.conversationKey = nip44.getConversationKey(clientSecretKey, bp.pubkey); this.bp = bp; this.isOpen = false; this.idPrefix = Math.random().toString(36).substring(7); this.serial = 0; this.listeners = {}; this.waitingForAuth = {}; this.ready = false; this.readyPromise = this.setupSubscription(params); } async setupSubscription(params) { console.log('NIP-46: Setting up subscription to relays:', this.bp.relays); const listeners = this.listeners; const waitingForAuth = this.waitingForAuth; const convKey = this.conversationKey; // Ensure all relays are connected first await Promise.all(this.bp.relays.map(url => this.pool.ensureRelay(url))); console.log('NIP-46: All relays connected, setting up subscription'); this.subCloser = this.pool.subscribe( this.bp.relays, [{ kinds: [NostrConnect], authors: [this.bp.pubkey], '#p': [getPublicKey(this.secretKey)] }], { onevent: async (event) => { const o = JSON.parse(nip44.decrypt(event.content, convKey)); const { id, result, error } = o; if (result === 'auth_url' && waitingForAuth[id]) { delete waitingForAuth[id]; if (params.onauth) { params.onauth(error); } else { console.warn( `NIP-46: remote signer ${this.bp.pubkey} tried to send an "auth_url"='${error}' but there was no onauth() callback configured.` ); } return; } let handler = listeners[id]; if (handler) { if (error) handler.reject(error); else if (result) handler.resolve(result); delete listeners[id]; } }, onclose: () => { this.subCloser = undefined; } } ); this.isOpen = true; this.ready = true; console.log('NIP-46: BunkerSigner setup complete and ready'); } async ensureReady() { if (!this.ready) { console.log('NIP-46: Waiting for BunkerSigner to be ready...'); await this.readyPromise; } } async close() { this.isOpen = false; this.subCloser?.close(); } async sendRequest(method, params) { return new Promise(async (resolve, reject) => { try { await this.ensureReady(); // Wait for BunkerSigner to be ready if (!this.isOpen) { throw new Error('this signer is not open anymore, create a new one'); } if (!this.subCloser) { await this.setupSubscription(this.params); } this.serial++; const id = `${this.idPrefix}-${this.serial}`; const encryptedContent = nip44.encrypt(JSON.stringify({ id, method, params }), this.conversationKey); const verifiedEvent = finalizeEvent( { kind: NostrConnect, tags: [['p', this.bp.pubkey]], content: encryptedContent, created_at: Math.floor(Date.now() / 1000) }, this.secretKey ); this.listeners[id] = { resolve, reject }; this.waitingForAuth[id] = true; console.log(`NIP-46: Sending ${method} request with id ${id}`); const publishResults = await this.pool.publish(this.bp.relays, verifiedEvent); // Check if at least one publish succeeded const hasSuccess = publishResults.some(result => result.status === 'fulfilled'); if (!hasSuccess) { throw new Error('Failed to publish to any relay'); } console.log(`NIP-46: ${method} request sent successfully`); } catch (err) { console.error(`NIP-46: sendRequest ${method} failed:`, err); reject(err); } }); } async ping() { let resp = await this.sendRequest('ping', []); if (resp !== 'pong') { throw new Error(`result is not pong: ${resp}`); } } async connect() { await this.sendRequest('connect', [this.bp.pubkey, this.bp.secret || '']); } async getPublicKey() { if (!this.cachedPubKey) { this.cachedPubKey = await this.sendRequest('get_public_key', []); } return this.cachedPubKey; } async signEvent(event) { let resp = await this.sendRequest('sign_event', [JSON.stringify(event)]); let signed = JSON.parse(resp); if (verifyEvent(signed)) { return signed; } else { throw new Error(`event returned from bunker is improperly signed: ${JSON.stringify(signed)}`); } } async nip04Encrypt(thirdPartyPubkey, plaintext) { return await this.sendRequest('nip04_encrypt', [thirdPartyPubkey, plaintext]); } async nip04Decrypt(thirdPartyPubkey, ciphertext) { return await this.sendRequest('nip04_decrypt', [thirdPartyPubkey, ciphertext]); } async nip44Encrypt(thirdPartyPubkey, plaintext) { return await this.sendRequest('nip44_encrypt', [thirdPartyPubkey, plaintext]); } async nip44Decrypt(thirdPartyPubkey, ciphertext) { return await this.sendRequest('nip44_decrypt', [thirdPartyPubkey, ciphertext]); } } async function createAccount(bunker, params, username, domain, email, localSecretKey = generateSecretKey()) { if (email && !EMAIL_REGEX.test(email)) { throw new Error('Invalid email'); } let rpc = new BunkerSigner(localSecretKey, bunker.bunkerPointer, params); let pubkey = await rpc.sendRequest('create_account', [username, domain, email || '']); rpc.bp.pubkey = pubkey; await rpc.connect(); return rpc; } async function fetchBunkerProviders(pool, relays) { const events = await pool.querySync(relays, { kinds: [Handlerinformation], '#k': [NostrConnect.toString()] }); events.sort((a, b) => b.created_at - a.created_at); const validatedBunkers = await Promise.all( events.map(async (event, i) => { try { const content = JSON.parse(event.content); try { if (events.findIndex((ev) => JSON.parse(ev.content).nip05 === content.nip05) !== i) { return undefined; } } catch (err) { // Continue processing } const bp = await queryBunkerProfile(content.nip05); if (bp && bp.pubkey === event.pubkey && bp.relays.length) { return { bunkerPointer: bp, nip05: content.nip05, domain: content.nip05.split('@')[1], name: content.name || content.display_name, picture: content.picture, about: content.about, website: content.website, local: false }; } } catch (err) { return undefined; } }) ); return validatedBunkers.filter((b) => b !== undefined); } // Extend NostrTools with NIP-46 functionality window.NostrTools.nip46 = { BunkerSigner, parseBunkerInput, toBunkerURL, queryBunkerProfile, createAccount, fetchBunkerProviders, useFetchImplementation, BUNKER_REGEX, SimplePool }; console.log('NIP-46 extension loaded successfully'); console.log('Available: NostrTools.nip46'); } // ====================================== // NOSTR_LOGIN_LITE Components // ====================================== // ====================================== // CSS-Only Theme System // ====================================== const THEME_CSS = { 'default': `/** * NOSTR_LOGIN_LITE - Default Monospace Theme * Black/white/red color scheme with monospace typography * Simplified 14-variable system (6 core + 8 floating tab) */ :root { /* Core Variables (6) */ --nl-primary-color: #000000; --nl-secondary-color: #ffffff; --nl-accent-color: #ff0000; --nl-muted-color: #666666; --nl-font-family: "Courier New", Courier, monospace; --nl-border-radius: 15px; --nl-border-width: 3px; /* Floating Tab Variables (8) */ --nl-tab-bg-logged-out: #ffffff; --nl-tab-bg-logged-in: #ffffff; --nl-tab-bg-opacity-logged-out: 0.9; --nl-tab-bg-opacity-logged-in: 0.2; --nl-tab-color-logged-out: #000000; --nl-tab-color-logged-in: #ffffff; --nl-tab-border-logged-out: #000000; --nl-tab-border-logged-in: #ff0000; --nl-tab-border-opacity-logged-out: 1.0; --nl-tab-border-opacity-logged-in: 0.1; } /* Base component styles using simplified variables */ .nl-component { font-family: var(--nl-font-family); color: var(--nl-primary-color); } .nl-button { background: var(--nl-secondary-color); color: var(--nl-primary-color); border: var(--nl-border-width) solid var(--nl-primary-color); border-radius: var(--nl-border-radius); font-family: var(--nl-font-family); cursor: pointer; transition: all 0.2s ease; } .nl-button:hover { border-color: var(--nl-accent-color); } .nl-button:active { background: var(--nl-accent-color); color: var(--nl-secondary-color); } .nl-input { background: var(--nl-secondary-color); color: var(--nl-primary-color); border: var(--nl-border-width) solid var(--nl-primary-color); border-radius: var(--nl-border-radius); font-family: var(--nl-font-family); box-sizing: border-box; } .nl-input:focus { border-color: var(--nl-accent-color); outline: none; } .nl-container { background: var(--nl-secondary-color); border: var(--nl-border-width) solid var(--nl-primary-color); border-radius: var(--nl-border-radius); } .nl-title, .nl-heading { font-family: var(--nl-font-family); color: var(--nl-primary-color); margin: 0; } .nl-text { font-family: var(--nl-font-family); color: var(--nl-primary-color); } .nl-text--muted { color: var(--nl-muted-color); } .nl-icon { font-family: var(--nl-font-family); color: var(--nl-primary-color); } /* Floating tab styles */ .nl-floating-tab { font-family: var(--nl-font-family); border-radius: var(--nl-border-radius); border: var(--nl-border-width) solid; transition: all 0.2s ease; } .nl-floating-tab--logged-out { background: rgba(255, 255, 255, var(--nl-tab-bg-opacity-logged-out)); color: var(--nl-tab-color-logged-out); border-color: rgba(0, 0, 0, var(--nl-tab-border-opacity-logged-out)); } .nl-floating-tab--logged-in { background: rgba(0, 0, 0, var(--nl-tab-bg-opacity-logged-in)); color: var(--nl-tab-color-logged-in); border-color: rgba(255, 0, 0, var(--nl-tab-border-opacity-logged-in)); } .nl-transition { transition: all 0.2s ease; }`, 'dark': `/** * NOSTR_LOGIN_LITE - Dark Monospace Theme */ :root { /* Core Variables (6) */ --nl-primary-color: #white; --nl-secondary-color: #black; --nl-accent-color: #ff0000; --nl-muted-color: #666666; --nl-font-family: "Courier New", Courier, monospace; --nl-border-radius: 15px; --nl-border-width: 3px; /* Floating Tab Variables (8) */ --nl-tab-bg-logged-out: #ffffff; --nl-tab-bg-logged-in: #000000; --nl-tab-bg-opacity-logged-out: 0.9; --nl-tab-bg-opacity-logged-in: 0.8; --nl-tab-color-logged-out: #000000; --nl-tab-color-logged-in: #ffffff; --nl-tab-border-logged-out: #000000; --nl-tab-border-logged-in: #ff0000; --nl-tab-border-opacity-logged-out: 1.0; --nl-tab-border-opacity-logged-in: 0.9; } /* Base component styles using simplified variables */ .nl-component { font-family: var(--nl-font-family); color: var(--nl-primary-color); } .nl-button { background: var(--nl-secondary-color); color: var(--nl-primary-color); border: var(--nl-border-width) solid var(--nl-primary-color); border-radius: var(--nl-border-radius); font-family: var(--nl-font-family); cursor: pointer; transition: all 0.2s ease; } .nl-button:hover { border-color: var(--nl-accent-color); } .nl-button:active { background: var(--nl-accent-color); color: var(--nl-secondary-color); } .nl-input { background: var(--nl-secondary-color); color: var(--nl-primary-color); border: var(--nl-border-width) solid var(--nl-primary-color); border-radius: var(--nl-border-radius); font-family: var(--nl-font-family); box-sizing: border-box; } .nl-input:focus { border-color: var(--nl-accent-color); outline: none; } .nl-container { background: var(--nl-secondary-color); border: var(--nl-border-width) solid var(--nl-primary-color); border-radius: var(--nl-border-radius); } .nl-title, .nl-heading { font-family: var(--nl-font-family); color: var(--nl-primary-color); margin: 0; } .nl-text { font-family: var(--nl-font-family); color: var(--nl-primary-color); } .nl-text--muted { color: var(--nl-muted-color); } .nl-icon { font-family: var(--nl-font-family); color: var(--nl-primary-color); } /* Floating tab styles */ .nl-floating-tab { font-family: var(--nl-font-family); border-radius: var(--nl-border-radius); border: var(--nl-border-width) solid; transition: all 0.2s ease; } .nl-floating-tab--logged-out { background: rgba(255, 255, 255, var(--nl-tab-bg-opacity-logged-out)); color: var(--nl-tab-color-logged-out); border-color: rgba(0, 0, 0, var(--nl-tab-border-opacity-logged-out)); } .nl-floating-tab--logged-in { background: rgba(0, 0, 0, var(--nl-tab-bg-opacity-logged-in)); color: var(--nl-tab-color-logged-in); border-color: rgba(255, 0, 0, var(--nl-tab-border-opacity-logged-in)); } .nl-transition { transition: all 0.2s ease; }` }; // Theme management functions function injectThemeCSS(themeName = 'default') { if (typeof document !== 'undefined') { // Remove existing theme CSS const existingStyle = document.getElementById('nl-theme-css'); if (existingStyle) { existingStyle.remove(); } // Inject selected theme CSS const themeCss = THEME_CSS[themeName] || THEME_CSS['default']; const style = document.createElement('style'); style.id = 'nl-theme-css'; style.textContent = themeCss; document.head.appendChild(style); console.log(`NOSTR_LOGIN_LITE: ${themeName} theme CSS injected`); } } // Auto-inject default theme when DOM is ready if (typeof document !== 'undefined') { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => injectThemeCSS('default')); } else { injectThemeCSS('default'); } } // ====================================== // Modal UI Component // ====================================== class Modal { constructor(options = {}) { this.options = options; this.container = null; this.isVisible = false; this.currentScreen = null; this.isEmbedded = !!options.embedded; this.embeddedContainer = options.embedded; // Initialize modal container and styles this._initModal(); } _initModal() { // Create modal container this.container = document.createElement('div'); this.container.id = this.isEmbedded ? 'nl-modal-embedded' : 'nl-modal'; if (this.isEmbedded) { // Embedded mode: inline positioning, no overlay this.container.style.cssText = ` position: relative; display: none; font-family: var(--nl-font-family, 'Courier New', monospace); width: 100%; `; } else { // Modal mode: fixed overlay this.container.style.cssText = ` position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.75); display: none; z-index: 10000; font-family: var(--nl-font-family, 'Courier New', monospace); `; } // Create modal content const modalContent = document.createElement('div'); if (this.isEmbedded) { // Embedded content: no centering margin, full width modalContent.style.cssText = ` position: relative; background: var(--nl-secondary-color); color: var(--nl-primary-color); width: 100%; border-radius: var(--nl-border-radius, 15px); border: var(--nl-border-width) solid var(--nl-primary-color); overflow: hidden; `; } else { // Modal content: centered with margin modalContent.style.cssText = ` position: relative; background: var(--nl-secondary-color); color: var(--nl-primary-color); width: 90%; max-width: 400px; margin: 50px auto; border-radius: var(--nl-border-radius, 15px); border: var(--nl-border-width) solid var(--nl-primary-color); max-height: 600px; overflow: hidden; `; } // Header const modalHeader = document.createElement('div'); modalHeader.style.cssText = ` padding: 20px 24px 0 24px; display: flex; justify-content: space-between; align-items: center; background: transparent; border-bottom: none; `; const modalTitle = document.createElement('h2'); modalTitle.textContent = 'Nostr Login'; modalTitle.style.cssText = ` margin: 0; font-size: 24px; font-weight: 600; color: var(--nl-primary-color); font-family: var(--nl-font-family, 'Courier New', monospace); `; modalHeader.appendChild(modalTitle); // Only add close button for non-embedded modals // Embedded modals shouldn't have a close button because there's no way to reopen them if (!this.isEmbedded) { const closeButton = document.createElement('button'); closeButton.innerHTML = '×'; closeButton.onclick = () => this.close(); closeButton.style.cssText = ` background: var(--nl-secondary-color); border: var(--nl-border-width) solid var(--nl-primary-color); border-radius: var(--nl-border-radius); font-size: 28px; color: var(--nl-primary-color); cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-family: var(--nl-font-family, 'Courier New', monospace); `; closeButton.onmouseover = () => { closeButton.style.borderColor = 'var(--nl-accent-color)'; closeButton.style.background = 'var(--nl-secondary-color)'; }; closeButton.onmouseout = () => { closeButton.style.borderColor = 'var(--nl-primary-color)'; closeButton.style.background = 'var(--nl-secondary-color)'; }; modalHeader.appendChild(closeButton); } // Body this.modalBody = document.createElement('div'); this.modalBody.style.cssText = ` padding: 24px; overflow-y: auto; max-height: 500px; background: transparent; font-family: var(--nl-font-family, 'Courier New', monospace); `; modalContent.appendChild(modalHeader); modalContent.appendChild(this.modalBody); this.container.appendChild(modalContent); // Add to appropriate parent if (this.isEmbedded && this.embeddedContainer) { // Append to specified container for embedding if (typeof this.embeddedContainer === 'string') { const targetElement = document.querySelector(this.embeddedContainer); if (targetElement) { targetElement.appendChild(this.container); } else { console.error('NOSTR_LOGIN_LITE: Embedded container not found:', this.embeddedContainer); document.body.appendChild(this.container); } } else if (this.embeddedContainer instanceof HTMLElement) { this.embeddedContainer.appendChild(this.container); } else { console.error('NOSTR_LOGIN_LITE: Invalid embedded container'); document.body.appendChild(this.container); } } else { // Add to body for modal mode document.body.appendChild(this.container); } // Click outside to close (only for modal mode) if (!this.isEmbedded) { this.container.onclick = (e) => { if (e.target === this.container) { this.close(); } }; } // Update theme this.updateTheme(); } updateTheme() { // The theme will automatically update through CSS custom properties // No manual styling needed - the CSS variables handle everything } open(opts = {}) { this.currentScreen = opts.startScreen; this.isVisible = true; this.container.style.display = 'block'; // Render login options this._renderLoginOptions(); } close() { this.isVisible = false; this.container.style.display = 'none'; this.modalBody.innerHTML = ''; } _renderLoginOptions() { this.modalBody.innerHTML = ''; const options = []; // Extension option if (this.options?.methods?.extension !== false) { options.push({ type: 'extension', title: 'Browser Extension', description: 'Use your browser extension', icon: '🔌' }); } // Local key option if (this.options?.methods?.local !== false) { options.push({ type: 'local', title: 'Local Key', description: 'Create or import your own key', icon: '🔑' }); } // Nostr Connect option (check both 'connect' and 'remote' for compatibility) if (this.options?.methods?.connect !== false && this.options?.methods?.remote !== false) { options.push({ type: 'connect', title: 'Nostr Connect', description: 'Connect with external signer', icon: '🌐' }); } // Read-only option if (this.options?.methods?.readonly !== false) { options.push({ type: 'readonly', title: 'Read Only', description: 'Browse without signing', icon: '👁️' }); } // OTP/DM option if (this.options?.methods?.otp !== false) { options.push({ type: 'otp', title: 'DM/OTP', description: 'Receive OTP via DM', icon: '📱' }); } // Render each option options.forEach(option => { const button = document.createElement('button'); button.onclick = () => this._handleOptionClick(option.type); button.style.cssText = ` display: flex; align-items: center; width: 100%; padding: 16px; margin-bottom: 12px; background: var(--nl-secondary-color); color: var(--nl-primary-color); border: var(--nl-border-width) solid var(--nl-primary-color); border-radius: var(--nl-border-radius); cursor: pointer; transition: all 0.2s; font-family: var(--nl-font-family, 'Courier New', monospace); `; button.onmouseover = () => { button.style.borderColor = 'var(--nl-accent-color)'; button.style.background = 'var(--nl-secondary-color)'; }; button.onmouseout = () => { button.style.borderColor = 'var(--nl-primary-color)'; button.style.background = 'var(--nl-secondary-color)'; }; const iconDiv = document.createElement('div'); // Replace emoji icons with text-based ones const iconMap = { '🔌': '[EXT]', '🔑': '[KEY]', '🌐': '[NET]', '👁️': '[VIEW]', '📱': '[SMS]' }; iconDiv.textContent = iconMap[option.icon] || option.icon; iconDiv.style.cssText = ` font-size: 16px; font-weight: bold; margin-right: 16px; width: 50px; text-align: center; color: var(--nl-primary-color); font-family: var(--nl-font-family, 'Courier New', monospace); `; const contentDiv = document.createElement('div'); contentDiv.style.cssText = 'flex: 1; text-align: left;'; const titleDiv = document.createElement('div'); titleDiv.textContent = option.title; titleDiv.style.cssText = ` font-weight: 600; margin-bottom: 4px; color: var(--nl-primary-color); font-family: var(--nl-font-family, 'Courier New', monospace); `; const descDiv = document.createElement('div'); descDiv.textContent = option.description; descDiv.style.cssText = ` font-size: 14px; color: #666666; font-family: var(--nl-font-family, 'Courier New', monospace); `; contentDiv.appendChild(titleDiv); contentDiv.appendChild(descDiv); button.appendChild(iconDiv); button.appendChild(contentDiv); this.modalBody.appendChild(button); }); } _handleOptionClick(type) { console.log('Selected login type:', type); // Handle different login types switch (type) { case 'extension': this._handleExtension(); break; case 'local': this._showLocalKeyScreen(); break; case 'connect': this._showConnectScreen(); break; case 'readonly': this._handleReadonly(); break; case 'otp': this._showOtpScreen(); break; } } _handleExtension() { // Detect all available real extensions const availableExtensions = this._detectAllExtensions(); console.log(`Modal: Found ${availableExtensions.length} extensions:`, availableExtensions.map(e => e.displayName)); if (availableExtensions.length === 0) { console.log('Modal: No real extensions found'); this._showExtensionRequired(); } else if (availableExtensions.length === 1) { // Single extension - use it directly without showing choice UI console.log('Modal: Single extension detected, using it directly:', availableExtensions[0].displayName); this._tryExtensionLogin(availableExtensions[0].extension); } else { // Multiple extensions - show choice UI console.log('Modal: Multiple extensions detected, showing choice UI for', availableExtensions.length, 'extensions'); this._showExtensionChoice(availableExtensions); } } _detectAllExtensions() { const extensions = []; const seenExtensions = new Set(); // Track extensions by object reference to avoid duplicates // Extension locations to check (in priority order) const locations = [ { path: 'window.navigator?.nostr', name: 'navigator.nostr', displayName: 'Standard Extension (navigator.nostr)', icon: '🌐', getter: () => window.navigator?.nostr }, { path: 'window.webln?.nostr', name: 'webln.nostr', displayName: 'Alby WebLN Extension', icon: '⚡', getter: () => window.webln?.nostr }, { path: 'window.alby?.nostr', name: 'alby.nostr', displayName: 'Alby Extension (Direct)', icon: '🐝', getter: () => window.alby?.nostr }, { path: 'window.nos2x', name: 'nos2x', displayName: 'nos2x Extension', icon: '🔌', getter: () => window.nos2x }, { path: 'window.flamingo?.nostr', name: 'flamingo.nostr', displayName: 'Flamingo Extension', icon: '🦩', getter: () => window.flamingo?.nostr }, { path: 'window.mutiny?.nostr', name: 'mutiny.nostr', displayName: 'Mutiny Extension', icon: '⚔️', getter: () => window.mutiny?.nostr }, { path: 'window.nostrich?.nostr', name: 'nostrich.nostr', displayName: 'Nostrich Extension', icon: '🐦', getter: () => window.nostrich?.nostr }, { path: 'window.getAlby?.nostr', name: 'getAlby.nostr', displayName: 'getAlby Extension', icon: '🔧', getter: () => window.getAlby?.nostr } ]; // Check each location for (const location of locations) { try { const obj = location.getter(); console.log(`Modal: Checking ${location.name}:`, !!obj, obj?.constructor?.name); if (obj && this._isRealExtension(obj) && !seenExtensions.has(obj)) { extensions.push({ name: location.name, displayName: location.displayName, icon: location.icon, extension: obj }); seenExtensions.add(obj); console.log(`Modal: ✓ Detected extension at ${location.name} (${obj.constructor?.name})`); } else if (obj) { console.log(`Modal: ✗ Filtered out ${location.name} (${obj.constructor?.name})`); } } catch (e) { // Location doesn't exist or can't be accessed console.log(`Modal: ${location.name} not accessible:`, e.message); } } // Also check window.nostr but be extra careful to avoid our library console.log('Modal: Checking window.nostr:', !!window.nostr, window.nostr?.constructor?.name); if (window.nostr && this._isRealExtension(window.nostr) && !seenExtensions.has(window.nostr)) { extensions.push({ name: 'window.nostr', displayName: 'Extension (window.nostr)', icon: '🔑', extension: window.nostr }); seenExtensions.add(window.nostr); console.log(`Modal: ✓ Detected extension at window.nostr: ${window.nostr.constructor?.name}`); } else if (window.nostr) { console.log(`Modal: ✗ Filtered out window.nostr (${window.nostr.constructor?.name}) - likely our library`); } return extensions; } _isRealExtension(obj) { console.log(`Modal: EXTENSIVE DEBUG - _isRealExtension called with:`, obj); console.log(`Modal: Object type: ${typeof obj}`); console.log(`Modal: Object truthy: ${!!obj}`); if (!obj || typeof obj !== 'object') { console.log(`Modal: REJECT - Not an object`); return false; } console.log(`Modal: getPublicKey type: ${typeof obj.getPublicKey}`); console.log(`Modal: signEvent type: ${typeof obj.signEvent}`); // Must have required Nostr methods if (typeof obj.getPublicKey !== 'function' || typeof obj.signEvent !== 'function') { console.log(`Modal: REJECT - Missing required methods`); return false; } // Exclude NostrTools library object if (obj === window.NostrTools) { console.log(`Modal: REJECT - Is NostrTools object`); return false; } // Use the EXACT SAME logic as the comprehensive test (lines 804-809) // This is the key fix - match the comprehensive test's successful detection logic const constructorName = obj.constructor?.name; const objectKeys = Object.keys(obj); console.log(`Modal: Constructor name: "${constructorName}"`); console.log(`Modal: Object keys: [${objectKeys.join(', ')}]`); // COMPREHENSIVE TEST LOGIC - Accept anything with required methods that's not our specific library classes const isRealExtension = ( typeof obj.getPublicKey === 'function' && typeof obj.signEvent === 'function' && constructorName !== 'WindowNostr' && // Our library class constructorName !== 'NostrLite' // Our main class ); console.log(`Modal: Using comprehensive test logic:`); console.log(` Has getPublicKey: ${typeof obj.getPublicKey === 'function'}`); console.log(` Has signEvent: ${typeof obj.signEvent === 'function'}`); console.log(` Not WindowNostr: ${constructorName !== 'WindowNostr'}`); console.log(` Not NostrLite: ${constructorName !== 'NostrLite'}`); console.log(` Constructor: "${constructorName}"`); // Additional debugging for comparison const extensionPropChecks = { _isEnabled: !!obj._isEnabled, enabled: !!obj.enabled, kind: !!obj.kind, _eventEmitter: !!obj._eventEmitter, _scope: !!obj._scope, _requests: !!obj._requests, _pubkey: !!obj._pubkey, name: !!obj.name, version: !!obj.version, description: !!obj.description }; console.log(`Modal: Extension property analysis:`, extensionPropChecks); const hasExtensionProps = !!( obj._isEnabled || obj.enabled || obj.kind || obj._eventEmitter || obj._scope || obj._requests || obj._pubkey || obj.name || obj.version || obj.description ); const underscoreKeys = objectKeys.filter(key => key.startsWith('_')); const hexToUint8Keys = objectKeys.filter(key => key.startsWith('_hex')); console.log(`Modal: Underscore keys: [${underscoreKeys.join(', ')}]`); console.log(`Modal: _hex* keys: [${hexToUint8Keys.join(', ')}]`); console.log(`Modal: Additional analysis:`); console.log(` hasExtensionProps: ${hasExtensionProps}`); console.log(` hasLibraryMethod (_hexToUint8Array): ${objectKeys.includes('_hexToUint8Array')}`); console.log(`Modal: COMPREHENSIVE TEST LOGIC RESULT: ${isRealExtension ? 'ACCEPT' : 'REJECT'}`); console.log(`Modal: FINAL DECISION for ${constructorName}: ${isRealExtension ? 'ACCEPT' : 'REJECT'}`); return isRealExtension; } _showExtensionChoice(extensions) { this.modalBody.innerHTML = ''; const title = document.createElement('h3'); title.textContent = 'Choose Browser Extension'; title.style.cssText = ` margin: 0 0 16px 0; font-size: 18px; font-weight: 600; color: var(--nl-primary-color); font-family: var(--nl-font-family, 'Courier New', monospace); `; const description = document.createElement('p'); description.textContent = `Found ${extensions.length} Nostr extensions. Choose which one to use:`; description.style.cssText = ` margin-bottom: 20px; color: #666666; font-size: 14px; font-family: var(--nl-font-family, 'Courier New', monospace); `; this.modalBody.appendChild(title); this.modalBody.appendChild(description); // Create button for each extension extensions.forEach((ext, index) => { const button = document.createElement('button'); button.onclick = () => this._tryExtensionLogin(ext.extension); button.style.cssText = ` display: flex; align-items: center; width: 100%; padding: 16px; margin-bottom: 12px; background: var(--nl-secondary-color); color: var(--nl-primary-color); border: var(--nl-border-width) solid var(--nl-primary-color); border-radius: var(--nl-border-radius); cursor: pointer; transition: all 0.2s; text-align: left; font-family: var(--nl-font-family, 'Courier New', monospace); `; button.onmouseover = () => { button.style.borderColor = 'var(--nl-accent-color)'; button.style.background = 'var(--nl-secondary-color)'; }; button.onmouseout = () => { button.style.borderColor = 'var(--nl-primary-color)'; button.style.background = 'var(--nl-secondary-color)'; }; const iconDiv = document.createElement('div'); iconDiv.textContent = ext.icon; iconDiv.style.cssText = ` font-size: 24px; margin-right: 16px; width: 24px; text-align: center; `; const contentDiv = document.createElement('div'); contentDiv.style.cssText = 'flex: 1;'; const nameDiv = document.createElement('div'); nameDiv.textContent = ext.displayName; nameDiv.style.cssText = ` font-weight: 600; margin-bottom: 4px; color: var(--nl-primary-color); font-family: var(--nl-font-family, 'Courier New', monospace); `; const pathDiv = document.createElement('div'); pathDiv.textContent = ext.name; pathDiv.style.cssText = ` font-size: 12px; color: #666666; font-family: var(--nl-font-family, 'Courier New', monospace); `; contentDiv.appendChild(nameDiv); contentDiv.appendChild(pathDiv); button.appendChild(iconDiv); button.appendChild(contentDiv); this.modalBody.appendChild(button); }); // Add back button const backButton = document.createElement('button'); backButton.textContent = 'Back to Login Options'; backButton.onclick = () => this._renderLoginOptions(); backButton.style.cssText = this._getButtonStyle('secondary') + 'margin-top: 20px;'; this.modalBody.appendChild(backButton); } async _tryExtensionLogin(extensionObj) { try { // Show loading state this.modalBody.innerHTML = '
${nsec}`;
nsecDiv.style.cssText = 'margin-bottom: 16px; font-size: 14px;';
const npubDiv = document.createElement('div');
npubDiv.innerHTML = `Your Public Key:${window.NostrTools.nip19.npubEncode(pubkey)}`;
npubDiv.style.cssText = 'margin-bottom: 16px; font-size: 14px;';
const continueButton = document.createElement('button');
continueButton.textContent = 'Continue';
continueButton.onclick = () => this._setAuthMethod('local', { secret: nsec, pubkey });
continueButton.style.cssText = this._getButtonStyle();
this.modalBody.appendChild(title);
this.modalBody.appendChild(warningDiv);
this.modalBody.appendChild(nsecDiv);
this.modalBody.appendChild(npubDiv);
this.modalBody.appendChild(continueButton);
}
_setAuthMethod(method, options = {}) {
// Emit auth method selection
const event = new CustomEvent('nlMethodSelected', {
detail: { method, ...options }
});
window.dispatchEvent(event);
this.close();
}
_showError(message) {
this.modalBody.innerHTML = '';
const errorDiv = document.createElement('div');
errorDiv.style.cssText = 'background: #fee2e2; color: #dc2626; padding: 16px; border-radius: 6px; margin-bottom: 16px;';
errorDiv.innerHTML = `Error: ${message}`;
const backButton = document.createElement('button');
backButton.textContent = 'Back';
backButton.onclick = () => this._renderLoginOptions();
backButton.style.cssText = this._getButtonStyle('secondary');
this.modalBody.appendChild(errorDiv);
this.modalBody.appendChild(backButton);
}
_showExtensionRequired() {
this.modalBody.innerHTML = '';
const title = document.createElement('h3');
title.textContent = 'Browser Extension Required';
title.style.cssText = 'margin: 0 0 16px 0; font-size: 18px; font-weight: 600;';
const message = document.createElement('p');
message.textContent = 'Please install a Nostr browser extension like Alby or getflattr and refresh the page.';
message.style.cssText = 'margin-bottom: 20px; color: #6b7280;';
const backButton = document.createElement('button');
backButton.textContent = 'Back';
backButton.onclick = () => this._renderLoginOptions();
backButton.style.cssText = this._getButtonStyle('secondary');
this.modalBody.appendChild(title);
this.modalBody.appendChild(message);
this.modalBody.appendChild(backButton);
}
_showConnectScreen() {
this.modalBody.innerHTML = '';
const title = document.createElement('h3');
title.textContent = 'Connect to NIP-46 Remote Signer';
title.style.cssText = 'margin: 0 0 16px 0; font-size: 18px; font-weight: 600;';
const description = document.createElement('p');
description.textContent = 'Connect to a remote signer (bunker) server to use its keys for signing.';
description.style.cssText = 'margin-bottom: 20px; color: #6b7280; font-size: 14px;';
const formGroup = document.createElement('div');
formGroup.style.cssText = 'margin-bottom: 20px;';
const label = document.createElement('label');
label.textContent = 'Bunker Public Key:';
label.style.cssText = 'display: block; margin-bottom: 8px; font-weight: 500;';
const pubkeyInput = document.createElement('input');
pubkeyInput.type = 'text';
pubkeyInput.placeholder = 'bunker://pubkey?relay=..., bunker:hex, hex, or npub...';
pubkeyInput.style.cssText = `
width: 100%;
padding: 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
margin-bottom: 12px;
font-family: monospace;
box-sizing: border-box;
`;
const urlLabel = document.createElement('label');
urlLabel.textContent = 'Remote URL (optional):';
urlLabel.style.cssText = 'display: block; margin-bottom: 8px; font-weight: 500;';
const urlInput = document.createElement('input');
urlInput.type = 'url';
urlInput.placeholder = 'ws://localhost:8080 (default)';
urlInput.style.cssText = `
width: 100%;
padding: 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
margin-bottom: 16px;
box-sizing: border-box;
`;
// Users will enter the bunker URL manually from their bunker setup
const connectButton = document.createElement('button');
connectButton.textContent = 'Connect to Bunker';
connectButton.onclick = () => this._handleNip46Connect(pubkeyInput.value, urlInput.value);
connectButton.style.cssText = this._getButtonStyle();
const backButton = document.createElement('button');
backButton.textContent = 'Back';
backButton.onclick = () => this._renderLoginOptions();
backButton.style.cssText = this._getButtonStyle('secondary') + 'margin-top: 12px;';
formGroup.appendChild(label);
formGroup.appendChild(pubkeyInput);
formGroup.appendChild(urlLabel);
formGroup.appendChild(urlInput);
this.modalBody.appendChild(title);
this.modalBody.appendChild(description);
this.modalBody.appendChild(formGroup);
this.modalBody.appendChild(connectButton);
this.modalBody.appendChild(backButton);
}
_handleNip46Connect(bunkerPubkey, bunkerUrl) {
if (!bunkerPubkey || !bunkerPubkey.length) {
this._showError('Bunker pubkey is required');
return;
}
this._showNip46Connecting(bunkerPubkey, bunkerUrl);
this._performNip46Connect(bunkerPubkey, bunkerUrl);
}
_showNip46Connecting(bunkerPubkey, bunkerUrl) {
this.modalBody.innerHTML = '';
const title = document.createElement('h3');
title.textContent = 'Connecting to Remote Signer...';
title.style.cssText = 'margin: 0 0 16px 0; font-size: 18px; font-weight: 600; color: #059669;';
const description = document.createElement('p');
description.textContent = 'Establishing secure connection to your remote signer.';
description.style.cssText = 'margin-bottom: 20px; color: #6b7280;';
// Normalize bunker pubkey for display (= show original format if bunker: prefix)
const displayPubkey = bunkerPubkey.startsWith('bunker:') || bunkerPubkey.startsWith('npub') || bunkerPubkey.length === 64 ? bunkerPubkey : bunkerPubkey;
const bunkerInfo = document.createElement('div');
bunkerInfo.style.cssText = 'background: #f1f5f9; padding: 12px; border-radius: 6px; margin-bottom: 20px; font-size: 14px;';
bunkerInfo.innerHTML = `
Connecting to bunker:${displayPubkey}${bunkerUrl || 'ws://localhost:8080'}