3123 lines
100 KiB
JavaScript
3123 lines
100 KiB
JavaScript
/**
|
||
* 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-15T18:50:50.789Z
|
||
*/
|
||
|
||
// 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 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(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 = '<div style="text-align: center; padding: 20px;">🔄 Connecting to extension...</div>';
|
||
|
||
// Get pubkey from extension
|
||
const pubkey = await extensionObj.getPublicKey();
|
||
console.log('Extension provided pubkey:', pubkey);
|
||
|
||
// Set extension method with the extension object
|
||
this._setAuthMethod('extension', { pubkey, extension: extensionObj });
|
||
|
||
} catch (error) {
|
||
console.error('Extension login failed:', error);
|
||
this._showError(`Extension login failed: ${error.message}`);
|
||
}
|
||
}
|
||
|
||
_showLocalKeyScreen() {
|
||
this.modalBody.innerHTML = '';
|
||
|
||
const title = document.createElement('h3');
|
||
title.textContent = 'Local Key';
|
||
title.style.cssText = 'margin: 0 0 20px 0; font-size: 18px; font-weight: 600;';
|
||
|
||
const createButton = document.createElement('button');
|
||
createButton.textContent = 'Create New Key';
|
||
createButton.onclick = () => this._createLocalKey();
|
||
createButton.style.cssText = this._getButtonStyle();
|
||
|
||
const importButton = document.createElement('button');
|
||
importButton.textContent = 'Import Existing Key';
|
||
importButton.onclick = () => this._showImportKeyForm();
|
||
importButton.style.cssText = this._getButtonStyle() + 'margin-top: 12px;';
|
||
|
||
const backButton = document.createElement('button');
|
||
backButton.textContent = 'Back';
|
||
backButton.onclick = () => this._renderLoginOptions();
|
||
backButton.style.cssText = `
|
||
display: block;
|
||
margin-top: 20px;
|
||
padding: 12px;
|
||
background: #6b7280;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
`;
|
||
|
||
this.modalBody.appendChild(title);
|
||
this.modalBody.appendChild(createButton);
|
||
this.modalBody.appendChild(importButton);
|
||
this.modalBody.appendChild(backButton);
|
||
}
|
||
|
||
_createLocalKey() {
|
||
try {
|
||
const sk = window.NostrTools.generateSecretKey();
|
||
const pk = window.NostrTools.getPublicKey(sk);
|
||
const nsec = window.NostrTools.nip19.nsecEncode(sk);
|
||
const npub = window.NostrTools.nip19.npubEncode(pk);
|
||
|
||
this._showKeyDisplay(pk, nsec, 'created');
|
||
} catch (error) {
|
||
this._showError('Failed to create key: ' + error.message);
|
||
}
|
||
}
|
||
|
||
_showImportKeyForm() {
|
||
this.modalBody.innerHTML = '';
|
||
|
||
const title = document.createElement('h3');
|
||
title.textContent = 'Import Local Key';
|
||
title.style.cssText = 'margin: 0 0 16px 0; font-size: 18px; font-weight: 600;';
|
||
|
||
const description = document.createElement('p');
|
||
description.textContent = 'Enter your secret key in either nsec or hex format:';
|
||
description.style.cssText = 'margin-bottom: 12px; color: #6b7280; font-size: 14px;';
|
||
|
||
const textarea = document.createElement('textarea');
|
||
textarea.placeholder = 'Enter your secret key:\n• nsec1... (bech32 format)\n• 64-character hex string';
|
||
textarea.style.cssText = `
|
||
width: 100%;
|
||
height: 100px;
|
||
padding: 12px;
|
||
border: 1px solid #d1d5db;
|
||
border-radius: 6px;
|
||
margin-bottom: 12px;
|
||
resize: none;
|
||
font-family: monospace;
|
||
font-size: 14px;
|
||
box-sizing: border-box;
|
||
`;
|
||
|
||
// Add real-time format detection
|
||
const formatHint = document.createElement('div');
|
||
formatHint.style.cssText = 'margin-bottom: 16px; font-size: 12px; color: #6b7280; min-height: 16px;';
|
||
|
||
textarea.oninput = () => {
|
||
const value = textarea.value.trim();
|
||
if (!value) {
|
||
formatHint.textContent = '';
|
||
return;
|
||
}
|
||
|
||
const format = this._detectKeyFormat(value);
|
||
if (format === 'nsec') {
|
||
formatHint.textContent = '✅ Valid nsec format detected';
|
||
formatHint.style.color = '#059669';
|
||
} else if (format === 'hex') {
|
||
formatHint.textContent = '✅ Valid hex format detected';
|
||
formatHint.style.color = '#059669';
|
||
} else {
|
||
formatHint.textContent = '❌ Invalid key format - must be nsec1... or 64-character hex';
|
||
formatHint.style.color = '#dc2626';
|
||
}
|
||
};
|
||
|
||
const importButton = document.createElement('button');
|
||
importButton.textContent = 'Import Key';
|
||
importButton.onclick = () => this._importLocalKey(textarea.value);
|
||
importButton.style.cssText = this._getButtonStyle();
|
||
|
||
const backButton = document.createElement('button');
|
||
backButton.textContent = 'Back';
|
||
backButton.onclick = () => this._showLocalKeyScreen();
|
||
backButton.style.cssText = this._getButtonStyle('secondary') + 'margin-top: 12px;';
|
||
|
||
this.modalBody.appendChild(title);
|
||
this.modalBody.appendChild(description);
|
||
this.modalBody.appendChild(textarea);
|
||
this.modalBody.appendChild(formatHint);
|
||
this.modalBody.appendChild(importButton);
|
||
this.modalBody.appendChild(backButton);
|
||
}
|
||
|
||
_detectKeyFormat(keyValue) {
|
||
const trimmed = keyValue.trim();
|
||
|
||
// Check for nsec format
|
||
if (trimmed.startsWith('nsec1') && trimmed.length === 63) {
|
||
try {
|
||
window.NostrTools.nip19.decode(trimmed);
|
||
return 'nsec';
|
||
} catch {
|
||
return 'invalid';
|
||
}
|
||
}
|
||
|
||
// Check for hex format (64 characters, valid hex)
|
||
if (trimmed.length === 64 && /^[a-fA-F0-9]{64}$/.test(trimmed)) {
|
||
return 'hex';
|
||
}
|
||
|
||
return 'invalid';
|
||
}
|
||
|
||
_importLocalKey(keyValue) {
|
||
try {
|
||
const trimmed = keyValue.trim();
|
||
if (!trimmed) {
|
||
throw new Error('Please enter a secret key');
|
||
}
|
||
|
||
const format = this._detectKeyFormat(trimmed);
|
||
let sk;
|
||
|
||
if (format === 'nsec') {
|
||
// Decode nsec format - this returns Uint8Array
|
||
const decoded = window.NostrTools.nip19.decode(trimmed);
|
||
if (decoded.type !== 'nsec') {
|
||
throw new Error('Invalid nsec format');
|
||
}
|
||
sk = decoded.data; // This is already Uint8Array
|
||
} else if (format === 'hex') {
|
||
// Convert hex string to Uint8Array
|
||
sk = this._hexToUint8Array(trimmed);
|
||
// Test that it's a valid secret key by trying to get public key
|
||
window.NostrTools.getPublicKey(sk);
|
||
} else {
|
||
throw new Error('Invalid key format. Please enter either nsec1... or 64-character hex string');
|
||
}
|
||
|
||
// Generate public key and encoded formats
|
||
const pk = window.NostrTools.getPublicKey(sk);
|
||
const nsec = window.NostrTools.nip19.nsecEncode(sk);
|
||
const npub = window.NostrTools.nip19.npubEncode(pk);
|
||
|
||
this._showKeyDisplay(pk, nsec, 'imported');
|
||
} catch (error) {
|
||
this._showError('Invalid key: ' + error.message);
|
||
}
|
||
}
|
||
|
||
_hexToUint8Array(hex) {
|
||
// Convert hex string to Uint8Array
|
||
if (hex.length % 2 !== 0) {
|
||
throw new Error('Invalid hex string length');
|
||
}
|
||
const bytes = new Uint8Array(hex.length / 2);
|
||
for (let i = 0; i < bytes.length; i++) {
|
||
bytes[i] = parseInt(hex.substr(i * 2, 2), 16);
|
||
}
|
||
return bytes;
|
||
}
|
||
|
||
_showKeyDisplay(pubkey, nsec, action) {
|
||
this.modalBody.innerHTML = '';
|
||
|
||
const title = document.createElement('h3');
|
||
title.textContent = `Key ${action} successfully!`;
|
||
title.style.cssText = 'margin: 0 0 16px 0; font-size: 18px; font-weight: 600; color: #059669;';
|
||
|
||
const warningDiv = document.createElement('div');
|
||
warningDiv.textContent = '⚠️ Save your secret key securely!';
|
||
warningDiv.style.cssText = 'background: #fef3c7; color: #92400e; padding: 12px; border-radius: 6px; margin-bottom: 16px; font-size: 12px;';
|
||
|
||
// Helper function to create copy button
|
||
const createCopyButton = (text, label) => {
|
||
const copyBtn = document.createElement('button');
|
||
copyBtn.textContent = `Copy ${label}`;
|
||
copyBtn.style.cssText = `
|
||
margin-left: 8px;
|
||
padding: 4px 8px;
|
||
font-size: 10px;
|
||
background: var(--nl-secondary-color);
|
||
color: var(--nl-primary-color);
|
||
border: 1px solid var(--nl-primary-color);
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-family: var(--nl-font-family, 'Courier New', monospace);
|
||
`;
|
||
copyBtn.onclick = async (e) => {
|
||
e.preventDefault();
|
||
try {
|
||
await navigator.clipboard.writeText(text);
|
||
const originalText = copyBtn.textContent;
|
||
copyBtn.textContent = '✓ Copied!';
|
||
copyBtn.style.color = '#059669';
|
||
setTimeout(() => {
|
||
copyBtn.textContent = originalText;
|
||
copyBtn.style.color = 'var(--nl-primary-color)';
|
||
}, 2000);
|
||
} catch (err) {
|
||
console.error('Failed to copy:', err);
|
||
copyBtn.textContent = '✗ Failed';
|
||
copyBtn.style.color = '#dc2626';
|
||
setTimeout(() => {
|
||
copyBtn.textContent = originalText;
|
||
copyBtn.style.color = 'var(--nl-primary-color)';
|
||
}, 2000);
|
||
}
|
||
};
|
||
return copyBtn;
|
||
};
|
||
|
||
// Convert pubkey to hex for verification
|
||
const pubkeyHex = typeof pubkey === 'string' ? pubkey : Array.from(pubkey).map(b => b.toString(16).padStart(2, '0')).join('');
|
||
|
||
// Decode nsec to get secret key as hex
|
||
let secretKeyHex = '';
|
||
try {
|
||
const decoded = window.NostrTools.nip19.decode(nsec);
|
||
secretKeyHex = Array.from(decoded.data).map(b => b.toString(16).padStart(2, '0')).join('');
|
||
} catch (err) {
|
||
console.error('Failed to decode nsec for hex display:', err);
|
||
}
|
||
|
||
// Secret Key Section
|
||
const nsecSection = document.createElement('div');
|
||
nsecSection.style.cssText = 'margin-bottom: 16px;';
|
||
|
||
const nsecLabel = document.createElement('div');
|
||
nsecLabel.innerHTML = '<strong>Your Secret Key (nsec):</strong>';
|
||
nsecLabel.style.cssText = 'margin-bottom: 4px; font-size: 12px; font-weight: 600;';
|
||
|
||
const nsecContainer = document.createElement('div');
|
||
nsecContainer.style.cssText = 'display: flex; align-items: flex-start; margin-bottom: 8px;';
|
||
|
||
const nsecCode = document.createElement('code');
|
||
nsecCode.textContent = nsec;
|
||
nsecCode.style.cssText = `
|
||
flex: 1;
|
||
word-break: break-all;
|
||
background: #f3f4f6;
|
||
padding: 6px;
|
||
border-radius: 4px;
|
||
font-size: 10px;
|
||
line-height: 1.3;
|
||
font-family: 'Courier New', monospace;
|
||
display: block;
|
||
`;
|
||
|
||
nsecContainer.appendChild(nsecCode);
|
||
nsecContainer.appendChild(createCopyButton(nsec, 'nsec'));
|
||
nsecSection.appendChild(nsecLabel);
|
||
nsecSection.appendChild(nsecContainer);
|
||
|
||
// Secret Key Hex Section
|
||
if (secretKeyHex) {
|
||
const secretHexLabel = document.createElement('div');
|
||
secretHexLabel.innerHTML = '<strong>Secret Key (hex):</strong>';
|
||
secretHexLabel.style.cssText = 'margin-bottom: 4px; font-size: 12px; font-weight: 600;';
|
||
|
||
const secretHexContainer = document.createElement('div');
|
||
secretHexContainer.style.cssText = 'display: flex; align-items: flex-start; margin-bottom: 8px;';
|
||
|
||
const secretHexCode = document.createElement('code');
|
||
secretHexCode.textContent = secretKeyHex;
|
||
secretHexCode.style.cssText = `
|
||
flex: 1;
|
||
word-break: break-all;
|
||
background: #f3f4f6;
|
||
padding: 6px;
|
||
border-radius: 4px;
|
||
font-size: 10px;
|
||
line-height: 1.3;
|
||
font-family: 'Courier New', monospace;
|
||
display: block;
|
||
`;
|
||
|
||
secretHexContainer.appendChild(secretHexCode);
|
||
secretHexContainer.appendChild(createCopyButton(secretKeyHex, 'hex'));
|
||
nsecSection.appendChild(secretHexLabel);
|
||
nsecSection.appendChild(secretHexContainer);
|
||
}
|
||
|
||
// Public Key Section
|
||
const npubSection = document.createElement('div');
|
||
npubSection.style.cssText = 'margin-bottom: 16px;';
|
||
|
||
const npub = window.NostrTools.nip19.npubEncode(pubkey);
|
||
|
||
const npubLabel = document.createElement('div');
|
||
npubLabel.innerHTML = '<strong>Your Public Key (npub):</strong>';
|
||
npubLabel.style.cssText = 'margin-bottom: 4px; font-size: 12px; font-weight: 600;';
|
||
|
||
const npubContainer = document.createElement('div');
|
||
npubContainer.style.cssText = 'display: flex; align-items: flex-start; margin-bottom: 8px;';
|
||
|
||
const npubCode = document.createElement('code');
|
||
npubCode.textContent = npub;
|
||
npubCode.style.cssText = `
|
||
flex: 1;
|
||
word-break: break-all;
|
||
background: #f3f4f6;
|
||
padding: 6px;
|
||
border-radius: 4px;
|
||
font-size: 10px;
|
||
line-height: 1.3;
|
||
font-family: 'Courier New', monospace;
|
||
display: block;
|
||
`;
|
||
|
||
npubContainer.appendChild(npubCode);
|
||
npubContainer.appendChild(createCopyButton(npub, 'npub'));
|
||
npubSection.appendChild(npubLabel);
|
||
npubSection.appendChild(npubContainer);
|
||
|
||
// Public Key Hex Section
|
||
const pubHexLabel = document.createElement('div');
|
||
pubHexLabel.innerHTML = '<strong>Public Key (hex):</strong>';
|
||
pubHexLabel.style.cssText = 'margin-bottom: 4px; font-size: 12px; font-weight: 600;';
|
||
|
||
const pubHexContainer = document.createElement('div');
|
||
pubHexContainer.style.cssText = 'display: flex; align-items: flex-start;';
|
||
|
||
const pubHexCode = document.createElement('code');
|
||
pubHexCode.textContent = pubkeyHex;
|
||
pubHexCode.style.cssText = `
|
||
flex: 1;
|
||
word-break: break-all;
|
||
background: #f3f4f6;
|
||
padding: 6px;
|
||
border-radius: 4px;
|
||
font-size: 10px;
|
||
line-height: 1.3;
|
||
font-family: 'Courier New', monospace;
|
||
display: block;
|
||
`;
|
||
|
||
pubHexContainer.appendChild(pubHexCode);
|
||
pubHexContainer.appendChild(createCopyButton(pubkeyHex, 'hex'));
|
||
npubSection.appendChild(pubHexLabel);
|
||
npubSection.appendChild(pubHexContainer);
|
||
|
||
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(nsecSection);
|
||
this.modalBody.appendChild(npubSection);
|
||
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 = `<strong>Error:</strong> ${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 = `
|
||
<strong>Connecting to bunker:</strong><br>
|
||
Pubkey: <code style="word-break: break-all;">${displayPubkey}</code><br>
|
||
Relay: <code style="word-break: break-all;">${bunkerUrl || 'ws://localhost:8080'}</code><br>
|
||
<small style="color: #6b7280;">If this relay is offline, the bunker server may be unavailable.</small>
|
||
`;
|
||
|
||
const connectingDiv = document.createElement('div');
|
||
connectingDiv.style.cssText = 'text-align: center; color: #6b7280;';
|
||
connectingDiv.innerHTML = `
|
||
<div style="font-size: 24px; margin-bottom: 10px;">⏳</div>
|
||
<div>Please wait while we establish the connection...</div>
|
||
<div style="font-size: 12px; margin-top: 10px;">This may take a few seconds</div>
|
||
`;
|
||
|
||
this.modalBody.appendChild(title);
|
||
this.modalBody.appendChild(description);
|
||
this.modalBody.appendChild(bunkerInfo);
|
||
this.modalBody.appendChild(connectingDiv);
|
||
}
|
||
|
||
async _performNip46Connect(bunkerPubkey, bunkerUrl) {
|
||
try {
|
||
console.log('Starting NIP-46 connection to bunker:', bunkerPubkey, bunkerUrl);
|
||
|
||
// Check if nostr-tools NIP-46 is available
|
||
if (!window.NostrTools?.nip46) {
|
||
throw new Error('nostr-tools NIP-46 module not available');
|
||
}
|
||
|
||
// Use nostr-tools to parse bunker input - this handles all formats correctly
|
||
console.log('Parsing bunker input with nostr-tools...');
|
||
const bunkerPointer = await window.NostrTools.nip46.parseBunkerInput(bunkerPubkey);
|
||
|
||
if (!bunkerPointer) {
|
||
throw new Error('Unable to parse bunker connection string or resolve NIP-05 identifier');
|
||
}
|
||
|
||
console.log('Parsed bunker pointer:', bunkerPointer);
|
||
|
||
// Create local client keypair for this session
|
||
const localSecretKey = window.NostrTools.generateSecretKey();
|
||
console.log('Generated local client keypair for NIP-46 session');
|
||
|
||
// Use nostr-tools BunkerSigner constructor
|
||
console.log('Creating nip46 BunkerSigner...');
|
||
const signer = new window.NostrTools.nip46.BunkerSigner(localSecretKey, bunkerPointer, {
|
||
onauth: (url) => {
|
||
console.log('Received auth URL from bunker:', url);
|
||
// Open auth URL in popup or redirect
|
||
window.open(url, '_blank', 'width=600,height=800');
|
||
}
|
||
});
|
||
|
||
console.log('NIP-46 BunkerSigner created successfully');
|
||
|
||
// Skip ping test - NIP-46 works through relays, not direct connection
|
||
// Try to connect directly (this may trigger auth flow)
|
||
console.log('Attempting NIP-46 connect...');
|
||
await signer.connect();
|
||
console.log('NIP-46 connect successful');
|
||
|
||
// Get the user's public key from the bunker
|
||
console.log('Getting public key from bunker...');
|
||
const userPubkey = await signer.getPublicKey();
|
||
console.log('NIP-46 user public key:', userPubkey);
|
||
|
||
// Store the NIP-46 authentication info
|
||
const nip46Info = {
|
||
pubkey: userPubkey,
|
||
signer: {
|
||
method: 'nip46',
|
||
remotePubkey: bunkerPointer.pubkey,
|
||
bunkerSigner: signer,
|
||
secret: bunkerPointer.secret,
|
||
relays: bunkerPointer.relays
|
||
}
|
||
};
|
||
|
||
console.log('NOSTR_LOGIN_LITE NIP-46 connection established successfully!');
|
||
|
||
// Set as current auth method
|
||
this._setAuthMethod('nip46', nip46Info);
|
||
return;
|
||
|
||
} catch (error) {
|
||
console.error('NIP-46 connection failed:', error);
|
||
this._showNip46Error(error.message);
|
||
}
|
||
}
|
||
|
||
_showNip46Error(message) {
|
||
this.modalBody.innerHTML = '';
|
||
|
||
const title = document.createElement('h3');
|
||
title.textContent = 'Connection Failed';
|
||
title.style.cssText = 'margin: 0 0 16px 0; font-size: 18px; font-weight: 600; color: #dc2626;';
|
||
|
||
const errorMsg = document.createElement('p');
|
||
errorMsg.textContent = `Unable to connect to remote signer: ${message}`;
|
||
errorMsg.style.cssText = 'margin-bottom: 20px; color: #6b7280;';
|
||
|
||
const retryButton = document.createElement('button');
|
||
retryButton.textContent = 'Try Again';
|
||
retryButton.onclick = () => this._showConnectScreen();
|
||
retryButton.style.cssText = this._getButtonStyle();
|
||
|
||
const backButton = document.createElement('button');
|
||
backButton.textContent = 'Back to Options';
|
||
backButton.onclick = () => this._renderLoginOptions();
|
||
backButton.style.cssText = this._getButtonStyle('secondary') + 'margin-top: 12px;';
|
||
|
||
this.modalBody.appendChild(title);
|
||
this.modalBody.appendChild(errorMsg);
|
||
this.modalBody.appendChild(retryButton);
|
||
this.modalBody.appendChild(backButton);
|
||
}
|
||
|
||
_handleReadonly() {
|
||
// Set read-only mode
|
||
this._setAuthMethod('readonly');
|
||
}
|
||
|
||
_showOtpScreen() {
|
||
// Placeholder for OTP functionality
|
||
this._showError('OTP/DM not yet implemented - coming soon!');
|
||
}
|
||
|
||
_getButtonStyle(type = 'primary') {
|
||
const baseStyle = `
|
||
display: block;
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: var(--nl-border-width) solid var(--nl-primary-color);
|
||
border-radius: var(--nl-border-radius);
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
font-family: var(--nl-font-family, 'Courier New', monospace);
|
||
`;
|
||
|
||
if (type === 'primary') {
|
||
return baseStyle + `
|
||
background: var(--nl-secondary-color);
|
||
color: var(--nl-primary-color);
|
||
`;
|
||
} else {
|
||
return baseStyle + `
|
||
background: #cccccc;
|
||
color: var(--nl-primary-color);
|
||
`;
|
||
}
|
||
}
|
||
|
||
// Public API
|
||
static init(options) {
|
||
if (Modal.instance) return Modal.instance;
|
||
Modal.instance = new Modal(options);
|
||
return Modal.instance;
|
||
}
|
||
|
||
static getInstance() {
|
||
return Modal.instance;
|
||
}
|
||
}
|
||
|
||
// Initialize global instance
|
||
let modalInstance = null;
|
||
|
||
window.addEventListener('load', () => {
|
||
modalInstance = new Modal();
|
||
});
|
||
|
||
|
||
// ======================================
|
||
// FloatingTab Component (Recovered from git history)
|
||
// ======================================
|
||
|
||
class FloatingTab {
|
||
constructor(modal, options = {}) {
|
||
this.modal = modal;
|
||
this.options = {
|
||
enabled: true,
|
||
hPosition: 1.0, // 0.0 = left, 1.0 = right
|
||
vPosition: 0.5, // 0.0 = top, 1.0 = bottom
|
||
offset: { x: 0, y: 0 },
|
||
appearance: {
|
||
style: 'pill', // 'pill', 'square', 'circle'
|
||
theme: 'auto', // 'auto', 'light', 'dark'
|
||
icon: '',
|
||
text: 'Login',
|
||
iconOnly: false
|
||
},
|
||
behavior: {
|
||
hideWhenAuthenticated: true,
|
||
showUserInfo: true,
|
||
autoSlide: true,
|
||
persistent: false
|
||
},
|
||
getUserInfo: false,
|
||
getUserRelay: [],
|
||
...options
|
||
};
|
||
|
||
this.isAuthenticated = false;
|
||
this.userInfo = null;
|
||
this.userProfile = null;
|
||
this.container = null;
|
||
this.isVisible = false;
|
||
|
||
if (this.options.enabled) {
|
||
this._init();
|
||
}
|
||
}
|
||
|
||
_init() {
|
||
console.log('FloatingTab: Initializing with options:', this.options);
|
||
this._createContainer();
|
||
this._setupEventListeners();
|
||
this._updateAppearance();
|
||
this._position();
|
||
this.show();
|
||
}
|
||
|
||
_createContainer() {
|
||
// Remove existing floating tab if any
|
||
const existingTab = document.getElementById('nl-floating-tab');
|
||
if (existingTab) {
|
||
existingTab.remove();
|
||
}
|
||
|
||
this.container = document.createElement('div');
|
||
this.container.id = 'nl-floating-tab';
|
||
this.container.className = 'nl-floating-tab';
|
||
|
||
// Base styles - positioning and behavior
|
||
this.container.style.cssText = `
|
||
position: fixed;
|
||
z-index: 9999;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.2s ease;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
padding: 8px 16px;
|
||
min-width: 80px;
|
||
max-width: 200px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
`;
|
||
|
||
document.body.appendChild(this.container);
|
||
}
|
||
|
||
_setupEventListeners() {
|
||
if (!this.container) return;
|
||
|
||
// Click handler
|
||
this.container.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
this._handleClick();
|
||
});
|
||
|
||
// Hover effects
|
||
this.container.addEventListener('mouseenter', () => {
|
||
if (this.options.behavior.autoSlide) {
|
||
this._slideIn();
|
||
}
|
||
});
|
||
|
||
this.container.addEventListener('mouseleave', () => {
|
||
if (this.options.behavior.autoSlide) {
|
||
this._slideOut();
|
||
}
|
||
});
|
||
|
||
// Listen for authentication events
|
||
window.addEventListener('nlMethodSelected', (e) => {
|
||
console.log('FloatingTab: Authentication method selected:', e.detail);
|
||
this._handleAuth(e.detail);
|
||
});
|
||
|
||
window.addEventListener('nlLogout', () => {
|
||
console.log('FloatingTab: Logout detected');
|
||
this._handleLogout();
|
||
});
|
||
}
|
||
|
||
_handleClick() {
|
||
console.log('FloatingTab: Clicked');
|
||
|
||
if (this.isAuthenticated && this.options.behavior.showUserInfo) {
|
||
// Show user menu or profile options
|
||
this._showUserMenu();
|
||
} else {
|
||
// Open login modal
|
||
if (this.modal) {
|
||
this.modal.open({ startScreen: 'login' });
|
||
}
|
||
}
|
||
}
|
||
|
||
async _handleAuth(authData) {
|
||
console.log('FloatingTab: Handling authentication:', authData);
|
||
this.isAuthenticated = true;
|
||
this.userInfo = authData;
|
||
|
||
// Fetch user profile if enabled and we have a pubkey
|
||
if (this.options.getUserInfo && authData.pubkey) {
|
||
console.log('FloatingTab: Fetching user profile for:', authData.pubkey);
|
||
try {
|
||
const profile = await this._fetchUserProfile(authData.pubkey);
|
||
this.userProfile = profile;
|
||
console.log('FloatingTab: User profile fetched:', profile);
|
||
} catch (error) {
|
||
console.warn('FloatingTab: Failed to fetch user profile:', error);
|
||
this.userProfile = null;
|
||
}
|
||
}
|
||
|
||
if (this.options.behavior.hideWhenAuthenticated) {
|
||
this.hide();
|
||
} else {
|
||
this._updateAppearance();
|
||
}
|
||
}
|
||
|
||
_handleLogout() {
|
||
console.log('FloatingTab: Handling logout');
|
||
this.isAuthenticated = false;
|
||
this.userInfo = null;
|
||
this.userProfile = null;
|
||
|
||
if (this.options.behavior.hideWhenAuthenticated) {
|
||
this.show();
|
||
}
|
||
|
||
this._updateAppearance();
|
||
}
|
||
|
||
_showUserMenu() {
|
||
// Simple user menu - could be expanded
|
||
const menu = document.createElement('div');
|
||
menu.style.cssText = `
|
||
position: fixed;
|
||
background: var(--nl-secondary-color);
|
||
border: var(--nl-border-width) solid var(--nl-primary-color);
|
||
border-radius: var(--nl-border-radius);
|
||
padding: 12px;
|
||
z-index: 10000;
|
||
font-family: var(--nl-font-family);
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
`;
|
||
|
||
// Position near the floating tab
|
||
const tabRect = this.container.getBoundingClientRect();
|
||
if (this.options.hPosition > 0.5) {
|
||
// Tab is on right side, show menu to the left
|
||
menu.style.right = (window.innerWidth - tabRect.left) + 'px';
|
||
} else {
|
||
// Tab is on left side, show menu to the right
|
||
menu.style.left = tabRect.right + 'px';
|
||
}
|
||
menu.style.top = tabRect.top + 'px';
|
||
|
||
// Menu content
|
||
const userDisplay = this.userInfo?.pubkey ?
|
||
`${this.userInfo.pubkey.slice(0, 8)}...${this.userInfo.pubkey.slice(-4)}` :
|
||
'Authenticated';
|
||
|
||
menu.innerHTML = `
|
||
<div style="margin-bottom: 8px; font-weight: bold; color: var(--nl-primary-color);">${userDisplay}</div>
|
||
<button onclick="window.NOSTR_LOGIN_LITE.logout(); this.parentElement.remove();"
|
||
style="background: var(--nl-secondary-color); color: var(--nl-primary-color);
|
||
border: 1px solid var(--nl-primary-color); border-radius: 4px;
|
||
padding: 6px 12px; cursor: pointer; width: 100%;">
|
||
Logout
|
||
</button>
|
||
`;
|
||
|
||
document.body.appendChild(menu);
|
||
|
||
// Auto-remove menu after delay or on outside click
|
||
const removeMenu = () => menu.remove();
|
||
setTimeout(removeMenu, 5000);
|
||
|
||
document.addEventListener('click', function onOutsideClick(e) {
|
||
if (!menu.contains(e.target) && e.target !== this.container) {
|
||
removeMenu();
|
||
document.removeEventListener('click', onOutsideClick);
|
||
}
|
||
});
|
||
}
|
||
|
||
_updateAppearance() {
|
||
if (!this.container) return;
|
||
|
||
// Update content
|
||
if (this.isAuthenticated && this.options.behavior.showUserInfo) {
|
||
let display;
|
||
|
||
// Use profile name if available, otherwise fall back to pubkey
|
||
if (this.userProfile?.name || this.userProfile?.display_name) {
|
||
const userName = this.userProfile.name || this.userProfile.display_name;
|
||
display = this.options.appearance.iconOnly
|
||
? userName.slice(0, 8)
|
||
: userName;
|
||
} else if (this.userInfo?.pubkey) {
|
||
// Fallback to pubkey display
|
||
display = this.options.appearance.iconOnly
|
||
? this.userInfo.pubkey.slice(0, 6)
|
||
: `${this.userInfo.pubkey.slice(0, 6)}...`;
|
||
} else {
|
||
display = this.options.appearance.iconOnly ? 'User' : 'Authenticated';
|
||
}
|
||
|
||
this.container.textContent = display;
|
||
this.container.className = 'nl-floating-tab nl-floating-tab--logged-in';
|
||
} else {
|
||
const display = this.options.appearance.iconOnly ?
|
||
this.options.appearance.icon :
|
||
(this.options.appearance.icon ? `${this.options.appearance.icon} ${this.options.appearance.text}` : this.options.appearance.text);
|
||
|
||
this.container.textContent = display;
|
||
this.container.className = 'nl-floating-tab nl-floating-tab--logged-out';
|
||
}
|
||
|
||
// Apply appearance styles based on current state
|
||
this._applyThemeStyles();
|
||
}
|
||
|
||
_applyThemeStyles() {
|
||
if (!this.container) return;
|
||
|
||
// The CSS classes will handle the theming through CSS custom properties
|
||
// Additional style customizations can be added here if needed
|
||
|
||
// Apply style variant
|
||
if (this.options.appearance.style === 'circle') {
|
||
this.container.style.borderRadius = '50%';
|
||
this.container.style.width = '48px';
|
||
this.container.style.height = '48px';
|
||
this.container.style.minWidth = '48px';
|
||
this.container.style.padding = '0';
|
||
} else if (this.options.appearance.style === 'square') {
|
||
this.container.style.borderRadius = '4px';
|
||
} else {
|
||
// pill style (default)
|
||
this.container.style.borderRadius = 'var(--nl-border-radius)';
|
||
}
|
||
}
|
||
|
||
async _fetchUserProfile(pubkey) {
|
||
if (!this.options.getUserInfo) {
|
||
console.log('FloatingTab: getUserInfo disabled, skipping profile fetch');
|
||
return null;
|
||
}
|
||
|
||
// Determine which relays to use
|
||
const relays = this.options.getUserRelay.length > 0
|
||
? this.options.getUserRelay
|
||
: (this.modal?.options?.relays || ['wss://relay.damus.io', 'wss://nos.lol']);
|
||
|
||
console.log('FloatingTab: Fetching profile from relays:', relays);
|
||
|
||
try {
|
||
// Create a SimplePool instance for querying
|
||
const pool = new window.NostrTools.nip46.SimplePool();
|
||
|
||
// Query for kind 0 (user metadata) events
|
||
const events = await pool.querySync(relays, {
|
||
kinds: [0],
|
||
authors: [pubkey],
|
||
limit: 1
|
||
}, { timeout: 5000 });
|
||
|
||
console.log('FloatingTab: Profile query returned', events.length, 'events');
|
||
|
||
if (events.length === 0) {
|
||
console.log('FloatingTab: No profile events found');
|
||
return null;
|
||
}
|
||
|
||
// Get the most recent event
|
||
const latestEvent = events.sort((a, b) => b.created_at - a.created_at)[0];
|
||
|
||
try {
|
||
const profile = JSON.parse(latestEvent.content);
|
||
console.log('FloatingTab: Parsed profile:', profile);
|
||
|
||
// Return relevant profile fields
|
||
return {
|
||
name: profile.name || null,
|
||
display_name: profile.display_name || null,
|
||
about: profile.about || null,
|
||
picture: profile.picture || null,
|
||
nip05: profile.nip05 || null
|
||
};
|
||
} catch (parseError) {
|
||
console.warn('FloatingTab: Failed to parse profile JSON:', parseError);
|
||
return null;
|
||
}
|
||
} catch (error) {
|
||
console.error('FloatingTab: Profile fetch error:', error);
|
||
return null;
|
||
}
|
||
}
|
||
|
||
_position() {
|
||
if (!this.container) return;
|
||
|
||
const padding = 16; // Distance from screen edge
|
||
|
||
// Calculate position based on percentage
|
||
const x = this.options.hPosition * (window.innerWidth - this.container.offsetWidth - padding * 2) + padding + this.options.offset.x;
|
||
const y = this.options.vPosition * (window.innerHeight - this.container.offsetHeight - padding * 2) + padding + this.options.offset.y;
|
||
|
||
this.container.style.left = `${x}px`;
|
||
this.container.style.top = `${y}px`;
|
||
|
||
console.log(`FloatingTab: Positioned at (${x}, ${y})`);
|
||
}
|
||
|
||
_slideIn() {
|
||
if (!this.container || !this.options.behavior.autoSlide) return;
|
||
|
||
// Slide towards center slightly
|
||
const currentTransform = this.container.style.transform || '';
|
||
if (this.options.hPosition > 0.5) {
|
||
this.container.style.transform = currentTransform + ' translateX(-8px)';
|
||
} else {
|
||
this.container.style.transform = currentTransform + ' translateX(8px)';
|
||
}
|
||
}
|
||
|
||
_slideOut() {
|
||
if (!this.container || !this.options.behavior.autoSlide) return;
|
||
|
||
// Reset position
|
||
this.container.style.transform = '';
|
||
}
|
||
|
||
show() {
|
||
if (!this.container) return;
|
||
this.container.style.display = 'flex';
|
||
this.isVisible = true;
|
||
console.log('FloatingTab: Shown');
|
||
}
|
||
|
||
hide() {
|
||
if (!this.container) return;
|
||
this.container.style.display = 'none';
|
||
this.isVisible = false;
|
||
console.log('FloatingTab: Hidden');
|
||
}
|
||
|
||
destroy() {
|
||
if (this.container) {
|
||
this.container.remove();
|
||
this.container = null;
|
||
}
|
||
this.isVisible = false;
|
||
console.log('FloatingTab: Destroyed');
|
||
}
|
||
|
||
// Update options and re-apply
|
||
updateOptions(newOptions) {
|
||
this.options = { ...this.options, ...newOptions };
|
||
if (this.container) {
|
||
this._updateAppearance();
|
||
this._position();
|
||
}
|
||
}
|
||
|
||
// Get current state
|
||
getState() {
|
||
return {
|
||
isVisible: this.isVisible,
|
||
isAuthenticated: this.isAuthenticated,
|
||
userInfo: this.userInfo,
|
||
options: this.options
|
||
};
|
||
}
|
||
}
|
||
|
||
// ======================================
|
||
// Main NOSTR_LOGIN_LITE Library
|
||
// ======================================
|
||
|
||
// Extension Bridge for managing browser extensions
|
||
class ExtensionBridge {
|
||
constructor() {
|
||
this.extensions = new Map();
|
||
this.primaryExtension = null;
|
||
this._detectExtensions();
|
||
}
|
||
|
||
_detectExtensions() {
|
||
// Common extension locations
|
||
const locations = [
|
||
{ path: 'window.nostr', name: 'Generic' },
|
||
{ path: 'window.alby?.nostr', name: 'Alby' },
|
||
{ path: 'window.nos2x?.nostr', name: 'nos2x' },
|
||
{ path: 'window.flamingo?.nostr', name: 'Flamingo' },
|
||
{ path: 'window.getAlby?.nostr', name: 'Alby Legacy' },
|
||
{ path: 'window.mutiny?.nostr', name: 'Mutiny' }
|
||
];
|
||
|
||
for (const location of locations) {
|
||
try {
|
||
const obj = eval(location.path);
|
||
if (obj && typeof obj.getPublicKey === 'function') {
|
||
this.extensions.set(location.name, {
|
||
name: location.name,
|
||
extension: obj,
|
||
constructor: obj.constructor?.name || 'Unknown'
|
||
});
|
||
|
||
if (!this.primaryExtension) {
|
||
this.primaryExtension = this.extensions.get(location.name);
|
||
}
|
||
}
|
||
} catch (e) {
|
||
// Extension not available
|
||
}
|
||
}
|
||
}
|
||
|
||
getAllExtensions() {
|
||
return Array.from(this.extensions.values());
|
||
}
|
||
|
||
getExtensionCount() {
|
||
return this.extensions.size;
|
||
}
|
||
}
|
||
|
||
// Main NostrLite class
|
||
class NostrLite {
|
||
constructor() {
|
||
this.options = {};
|
||
this.extensionBridge = new ExtensionBridge();
|
||
this.initialized = false;
|
||
this.currentTheme = 'default';
|
||
this.modal = null;
|
||
this.floatingTab = null;
|
||
}
|
||
|
||
async init(options = {}) {
|
||
console.log('NOSTR_LOGIN_LITE: Initializing with options:', options);
|
||
|
||
this.options = {
|
||
theme: 'default',
|
||
relays: ['wss://relay.damus.io', 'wss://nos.lol'],
|
||
methods: {
|
||
extension: true,
|
||
local: true,
|
||
readonly: true,
|
||
connect: false,
|
||
otp: false
|
||
},
|
||
floatingTab: {
|
||
enabled: false,
|
||
hPosition: 1.0,
|
||
vPosition: 0.5,
|
||
offset: { x: 0, y: 0 },
|
||
appearance: {
|
||
style: 'pill',
|
||
theme: 'auto',
|
||
icon: '',
|
||
text: 'Login',
|
||
iconOnly: false
|
||
},
|
||
behavior: {
|
||
hideWhenAuthenticated: true,
|
||
showUserInfo: true,
|
||
autoSlide: true,
|
||
persistent: false
|
||
},
|
||
getUserInfo: false,
|
||
getUserRelay: []
|
||
},
|
||
...options
|
||
};
|
||
|
||
// Apply the selected theme (CSS-only)
|
||
this.switchTheme(this.options.theme);
|
||
|
||
// Always set up window.nostr facade to handle multiple extensions properly
|
||
this._setupWindowNostrFacade();
|
||
|
||
// Create modal during init (matching original git architecture)
|
||
this.modal = new Modal(this.options);
|
||
console.log('NOSTR_LOGIN_LITE: Modal created during init');
|
||
|
||
// Initialize floating tab if enabled
|
||
if (this.options.floatingTab.enabled) {
|
||
this.floatingTab = new FloatingTab(this.modal, this.options.floatingTab);
|
||
console.log('NOSTR_LOGIN_LITE: Floating tab initialized');
|
||
}
|
||
|
||
this.initialized = true;
|
||
console.log('NOSTR_LOGIN_LITE: Initialization complete');
|
||
|
||
return this;
|
||
}
|
||
|
||
_setupWindowNostrFacade() {
|
||
if (typeof window !== 'undefined') {
|
||
// Store existing window.nostr if it exists (from extensions)
|
||
const existingNostr = window.nostr;
|
||
|
||
// Always install our facade
|
||
window.nostr = new WindowNostr(this, existingNostr);
|
||
console.log('NOSTR_LOGIN_LITE: window.nostr facade installed',
|
||
existingNostr ? '(with extension passthrough)' : '(no existing extension)');
|
||
}
|
||
}
|
||
|
||
launch(startScreen = 'login') {
|
||
console.log('NOSTR_LOGIN_LITE: Launching with screen:', startScreen);
|
||
|
||
if (this.modal) {
|
||
this.modal.open({ startScreen });
|
||
} else {
|
||
console.error('NOSTR_LOGIN_LITE: Modal not initialized - call init() first');
|
||
}
|
||
}
|
||
|
||
logout() {
|
||
console.log('NOSTR_LOGIN_LITE: Logout called');
|
||
|
||
// Clear stored data
|
||
if (typeof localStorage !== 'undefined') {
|
||
localStorage.removeItem('nl_current');
|
||
}
|
||
|
||
// Dispatch logout event
|
||
if (typeof window !== 'undefined') {
|
||
window.dispatchEvent(new CustomEvent('nlLogout', {
|
||
detail: { timestamp: Date.now() }
|
||
}));
|
||
}
|
||
}
|
||
|
||
// CSS-only theme switching
|
||
switchTheme(themeName) {
|
||
console.log(`NOSTR_LOGIN_LITE: Switching to ${themeName} theme`);
|
||
|
||
if (THEME_CSS[themeName]) {
|
||
injectThemeCSS(themeName);
|
||
this.currentTheme = themeName;
|
||
|
||
// Dispatch theme change event
|
||
if (typeof window !== 'undefined') {
|
||
window.dispatchEvent(new CustomEvent('nlThemeChanged', {
|
||
detail: { theme: themeName }
|
||
}));
|
||
}
|
||
|
||
return { theme: themeName };
|
||
} else {
|
||
console.warn(`Theme '${themeName}' not found, using default`);
|
||
injectThemeCSS('default');
|
||
this.currentTheme = 'default';
|
||
return { theme: 'default' };
|
||
}
|
||
}
|
||
|
||
getCurrentTheme() {
|
||
return this.currentTheme;
|
||
}
|
||
|
||
getAvailableThemes() {
|
||
return Object.keys(THEME_CSS);
|
||
}
|
||
|
||
embed(container, options = {}) {
|
||
console.log('NOSTR_LOGIN_LITE: Creating embedded modal in container:', container);
|
||
|
||
const embedOptions = {
|
||
...this.options,
|
||
...options,
|
||
embedded: container
|
||
};
|
||
|
||
// Create new modal instance for embedding
|
||
const embeddedModal = new Modal(embedOptions);
|
||
embeddedModal.open();
|
||
|
||
return embeddedModal;
|
||
}
|
||
|
||
// Floating tab management methods
|
||
showFloatingTab() {
|
||
if (this.floatingTab) {
|
||
this.floatingTab.show();
|
||
} else {
|
||
console.warn('NOSTR_LOGIN_LITE: Floating tab not enabled');
|
||
}
|
||
}
|
||
|
||
hideFloatingTab() {
|
||
if (this.floatingTab) {
|
||
this.floatingTab.hide();
|
||
}
|
||
}
|
||
|
||
toggleFloatingTab() {
|
||
if (this.floatingTab) {
|
||
if (this.floatingTab.isVisible) {
|
||
this.floatingTab.hide();
|
||
} else {
|
||
this.floatingTab.show();
|
||
}
|
||
}
|
||
}
|
||
|
||
updateFloatingTab(options) {
|
||
if (this.floatingTab) {
|
||
this.floatingTab.updateOptions(options);
|
||
}
|
||
}
|
||
|
||
getFloatingTabState() {
|
||
return this.floatingTab ? this.floatingTab.getState() : null;
|
||
}
|
||
}
|
||
|
||
// NIP-07 compliant window.nostr provider
|
||
class WindowNostr {
|
||
constructor(nostrLite, existingNostr = null) {
|
||
this.nostrLite = nostrLite;
|
||
this.authState = null;
|
||
this.existingNostr = existingNostr;
|
||
this.authenticatedExtension = null;
|
||
this._setupEventListeners();
|
||
}
|
||
|
||
_setupEventListeners() {
|
||
// Listen for authentication events to store auth state
|
||
if (typeof window !== 'undefined') {
|
||
window.addEventListener('nlMethodSelected', (event) => {
|
||
this.authState = event.detail;
|
||
|
||
// If extension method, capture the specific extension the user chose
|
||
if (event.detail.method === 'extension') {
|
||
this.authenticatedExtension = event.detail.extension;
|
||
console.log('WindowNostr: Captured authenticated extension:', this.authenticatedExtension?.constructor?.name);
|
||
}
|
||
|
||
// CRITICAL FIX: Re-install our facade for ALL authentication methods
|
||
// Extensions may overwrite window.nostr after ANY authentication, not just extension auth
|
||
if (typeof window !== 'undefined') {
|
||
console.log('WindowNostr: Re-installing facade after', this.authState?.method, 'authentication');
|
||
window.nostr = this;
|
||
}
|
||
|
||
console.log('WindowNostr: Auth state updated:', this.authState?.method);
|
||
});
|
||
|
||
window.addEventListener('nlLogout', () => {
|
||
this.authState = null;
|
||
this.authenticatedExtension = null;
|
||
console.log('WindowNostr: Auth state cleared');
|
||
|
||
// Re-install facade after logout to ensure we maintain control
|
||
if (typeof window !== 'undefined') {
|
||
console.log('WindowNostr: Re-installing facade after logout');
|
||
window.nostr = this;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
async getPublicKey() {
|
||
if (!this.authState) {
|
||
throw new Error('Not authenticated - use NOSTR_LOGIN_LITE.launch()');
|
||
}
|
||
|
||
switch (this.authState.method) {
|
||
case 'extension':
|
||
// Use the captured authenticated extension, not current window.nostr
|
||
const ext = this.authenticatedExtension || this.authState.extension || this.existingNostr;
|
||
if (!ext) throw new Error('Extension not available');
|
||
return await ext.getPublicKey();
|
||
|
||
case 'local':
|
||
case 'nip46':
|
||
return this.authState.pubkey;
|
||
|
||
case 'readonly':
|
||
throw new Error('Read-only mode - cannot get public key');
|
||
|
||
default:
|
||
throw new Error(`Unsupported auth method: ${this.authState.method}`);
|
||
}
|
||
}
|
||
|
||
async signEvent(event) {
|
||
if (!this.authState) {
|
||
throw new Error('Not authenticated - use NOSTR_LOGIN_LITE.launch()');
|
||
}
|
||
|
||
if (this.authState.method === 'readonly') {
|
||
throw new Error('Read-only mode - cannot sign events');
|
||
}
|
||
|
||
switch (this.authState.method) {
|
||
case 'extension':
|
||
// Use the captured authenticated extension, not current window.nostr
|
||
console.log('WindowNostr: signEvent - authenticatedExtension:', this.authenticatedExtension);
|
||
console.log('WindowNostr: signEvent - authState.extension:', this.authState.extension);
|
||
console.log('WindowNostr: signEvent - existingNostr:', this.existingNostr);
|
||
|
||
const ext = this.authenticatedExtension || this.authState.extension || this.existingNostr;
|
||
console.log('WindowNostr: signEvent - using extension:', ext);
|
||
console.log('WindowNostr: signEvent - extension constructor:', ext?.constructor?.name);
|
||
|
||
if (!ext) throw new Error('Extension not available');
|
||
return await ext.signEvent(event);
|
||
|
||
case 'local': {
|
||
// Use nostr-tools to sign with local secret key
|
||
const { nip19, finalizeEvent } = window.NostrTools;
|
||
let secretKey;
|
||
|
||
if (this.authState.secret.startsWith('nsec')) {
|
||
const decoded = nip19.decode(this.authState.secret);
|
||
secretKey = decoded.data;
|
||
} else {
|
||
// Convert hex to Uint8Array
|
||
secretKey = this._hexToUint8Array(this.authState.secret);
|
||
}
|
||
|
||
return finalizeEvent(event, secretKey);
|
||
}
|
||
|
||
case 'nip46': {
|
||
// Use BunkerSigner for NIP-46
|
||
if (!this.authState.signer?.bunkerSigner) {
|
||
throw new Error('NIP-46 signer not available');
|
||
}
|
||
return await this.authState.signer.bunkerSigner.signEvent(event);
|
||
}
|
||
|
||
default:
|
||
throw new Error(`Unsupported auth method: ${this.authState.method}`);
|
||
}
|
||
}
|
||
|
||
async getRelays() {
|
||
// Return configured relays from nostr-lite options
|
||
return this.nostrLite.options?.relays || ['wss://relay.damus.io'];
|
||
}
|
||
|
||
get nip04() {
|
||
return {
|
||
encrypt: async (pubkey, plaintext) => {
|
||
if (!this.authState) {
|
||
throw new Error('Not authenticated - use NOSTR_LOGIN_LITE.launch()');
|
||
}
|
||
|
||
if (this.authState.method === 'readonly') {
|
||
throw new Error('Read-only mode - cannot encrypt');
|
||
}
|
||
|
||
switch (this.authState.method) {
|
||
case 'extension': {
|
||
const ext = this.authenticatedExtension || this.authState.extension || this.existingNostr;
|
||
if (!ext) throw new Error('Extension not available');
|
||
return await ext.nip04.encrypt(pubkey, plaintext);
|
||
}
|
||
|
||
case 'local': {
|
||
const { nip04, nip19 } = window.NostrTools;
|
||
let secretKey;
|
||
|
||
if (this.authState.secret.startsWith('nsec')) {
|
||
const decoded = nip19.decode(this.authState.secret);
|
||
secretKey = decoded.data;
|
||
} else {
|
||
secretKey = this._hexToUint8Array(this.authState.secret);
|
||
}
|
||
|
||
return await nip04.encrypt(secretKey, pubkey, plaintext);
|
||
}
|
||
|
||
case 'nip46': {
|
||
if (!this.authState.signer?.bunkerSigner) {
|
||
throw new Error('NIP-46 signer not available');
|
||
}
|
||
return await this.authState.signer.bunkerSigner.nip04Encrypt(pubkey, plaintext);
|
||
}
|
||
|
||
default:
|
||
throw new Error(`Unsupported auth method: ${this.authState.method}`);
|
||
}
|
||
},
|
||
|
||
decrypt: async (pubkey, ciphertext) => {
|
||
if (!this.authState) {
|
||
throw new Error('Not authenticated - use NOSTR_LOGIN_LITE.launch()');
|
||
}
|
||
|
||
if (this.authState.method === 'readonly') {
|
||
throw new Error('Read-only mode - cannot decrypt');
|
||
}
|
||
|
||
switch (this.authState.method) {
|
||
case 'extension': {
|
||
const ext = this.authenticatedExtension || this.authState.extension || this.existingNostr;
|
||
if (!ext) throw new Error('Extension not available');
|
||
return await ext.nip04.decrypt(pubkey, ciphertext);
|
||
}
|
||
|
||
case 'local': {
|
||
const { nip04, nip19 } = window.NostrTools;
|
||
let secretKey;
|
||
|
||
if (this.authState.secret.startsWith('nsec')) {
|
||
const decoded = nip19.decode(this.authState.secret);
|
||
secretKey = decoded.data;
|
||
} else {
|
||
secretKey = this._hexToUint8Array(this.authState.secret);
|
||
}
|
||
|
||
return await nip04.decrypt(secretKey, pubkey, ciphertext);
|
||
}
|
||
|
||
case 'nip46': {
|
||
if (!this.authState.signer?.bunkerSigner) {
|
||
throw new Error('NIP-46 signer not available');
|
||
}
|
||
return await this.authState.signer.bunkerSigner.nip04Decrypt(pubkey, ciphertext);
|
||
}
|
||
|
||
default:
|
||
throw new Error(`Unsupported auth method: ${this.authState.method}`);
|
||
}
|
||
}
|
||
};
|
||
}
|
||
|
||
get nip44() {
|
||
return {
|
||
encrypt: async (pubkey, plaintext) => {
|
||
if (!this.authState) {
|
||
throw new Error('Not authenticated - use NOSTR_LOGIN_LITE.launch()');
|
||
}
|
||
|
||
if (this.authState.method === 'readonly') {
|
||
throw new Error('Read-only mode - cannot encrypt');
|
||
}
|
||
|
||
switch (this.authState.method) {
|
||
case 'extension': {
|
||
const ext = this.authenticatedExtension || this.authState.extension || this.existingNostr;
|
||
if (!ext) throw new Error('Extension not available');
|
||
return await ext.nip44.encrypt(pubkey, plaintext);
|
||
}
|
||
|
||
case 'local': {
|
||
const { nip44, nip19 } = window.NostrTools;
|
||
let secretKey;
|
||
|
||
if (this.authState.secret.startsWith('nsec')) {
|
||
const decoded = nip19.decode(this.authState.secret);
|
||
secretKey = decoded.data;
|
||
} else {
|
||
secretKey = this._hexToUint8Array(this.authState.secret);
|
||
}
|
||
|
||
return nip44.encrypt(plaintext, nip44.getConversationKey(secretKey, pubkey));
|
||
}
|
||
|
||
case 'nip46': {
|
||
if (!this.authState.signer?.bunkerSigner) {
|
||
throw new Error('NIP-46 signer not available');
|
||
}
|
||
return await this.authState.signer.bunkerSigner.nip44Encrypt(pubkey, plaintext);
|
||
}
|
||
|
||
default:
|
||
throw new Error(`Unsupported auth method: ${this.authState.method}`);
|
||
}
|
||
},
|
||
|
||
decrypt: async (pubkey, ciphertext) => {
|
||
if (!this.authState) {
|
||
throw new Error('Not authenticated - use NOSTR_LOGIN_LITE.launch()');
|
||
}
|
||
|
||
if (this.authState.method === 'readonly') {
|
||
throw new Error('Read-only mode - cannot decrypt');
|
||
}
|
||
|
||
switch (this.authState.method) {
|
||
case 'extension': {
|
||
const ext = this.authenticatedExtension || this.authState.extension || this.existingNostr;
|
||
if (!ext) throw new Error('Extension not available');
|
||
return await ext.nip44.decrypt(pubkey, ciphertext);
|
||
}
|
||
|
||
case 'local': {
|
||
const { nip44, nip19 } = window.NostrTools;
|
||
let secretKey;
|
||
|
||
if (this.authState.secret.startsWith('nsec')) {
|
||
const decoded = nip19.decode(this.authState.secret);
|
||
secretKey = decoded.data;
|
||
} else {
|
||
secretKey = this._hexToUint8Array(this.authState.secret);
|
||
}
|
||
|
||
return nip44.decrypt(ciphertext, nip44.getConversationKey(secretKey, pubkey));
|
||
}
|
||
|
||
case 'nip46': {
|
||
if (!this.authState.signer?.bunkerSigner) {
|
||
throw new Error('NIP-46 signer not available');
|
||
}
|
||
return await this.authState.signer.bunkerSigner.nip44Decrypt(pubkey, ciphertext);
|
||
}
|
||
|
||
default:
|
||
throw new Error(`Unsupported auth method: ${this.authState.method}`);
|
||
}
|
||
}
|
||
};
|
||
}
|
||
|
||
_hexToUint8Array(hex) {
|
||
if (hex.length % 2 !== 0) {
|
||
throw new Error('Invalid hex string length');
|
||
}
|
||
const bytes = new Uint8Array(hex.length / 2);
|
||
for (let i = 0; i < bytes.length; i++) {
|
||
bytes[i] = parseInt(hex.substr(i * 2, 2), 16);
|
||
}
|
||
return bytes;
|
||
}
|
||
}
|
||
|
||
// Initialize and export
|
||
if (typeof window !== 'undefined') {
|
||
const nostrLite = new NostrLite();
|
||
|
||
// Export main API
|
||
window.NOSTR_LOGIN_LITE = {
|
||
init: (options) => nostrLite.init(options),
|
||
launch: (startScreen) => nostrLite.launch(startScreen),
|
||
logout: () => nostrLite.logout(),
|
||
|
||
// Embedded modal method
|
||
embed: (container, options) => nostrLite.embed(container, options),
|
||
|
||
// CSS-only theme management API
|
||
switchTheme: (themeName) => nostrLite.switchTheme(themeName),
|
||
getCurrentTheme: () => nostrLite.getCurrentTheme(),
|
||
getAvailableThemes: () => nostrLite.getAvailableThemes(),
|
||
|
||
// Floating tab management API
|
||
showFloatingTab: () => nostrLite.showFloatingTab(),
|
||
hideFloatingTab: () => nostrLite.hideFloatingTab(),
|
||
toggleFloatingTab: () => nostrLite.toggleFloatingTab(),
|
||
updateFloatingTab: (options) => nostrLite.updateFloatingTab(options),
|
||
getFloatingTabState: () => nostrLite.getFloatingTabState(),
|
||
|
||
// Expose for debugging
|
||
_extensionBridge: nostrLite.extensionBridge,
|
||
_instance: nostrLite
|
||
};
|
||
|
||
console.log('NOSTR_LOGIN_LITE: Library loaded and ready');
|
||
console.log('NOSTR_LOGIN_LITE: Use window.NOSTR_LOGIN_LITE.init(options) to initialize');
|
||
console.log('NOSTR_LOGIN_LITE: Detected', nostrLite.extensionBridge.getExtensionCount(), 'browser extensions');
|
||
} else {
|
||
// Node.js environment
|
||
module.exports = { NostrLite };
|
||
}
|