Implement logging in via seed phrase

lite/ui/modal.js

@@ -58,7 +58,7 @@ class Modal {
         overflow: hidden;
       `;
     } else {
-      // Modal content: centered with margin
+      // Modal content: centered with margin, no fixed height
       modalContent.style.cssText = `
         position: relative;
         background: var(--nl-secondary-color);
@@ -68,7 +68,6 @@ class Modal {
         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;
       `;
     }
@@ -133,8 +132,6 @@ class Modal {
     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);
     `;
@@ -223,6 +220,16 @@ class Modal {
       });
     }
 
+    // Seed Phrase option - only show if explicitly enabled
+    if (this.options?.methods?.seedphrase === true) {
+      options.push({
+        type: 'seedphrase',
+        title: 'Seed Phrase',
+        description: 'Import from mnemonic seed phrase',
+        icon: '🌱'
+      });
+    }
+
     // Nostr Connect option (check both 'connect' and 'remote' for compatibility)
     if (this.options?.methods?.connect !== false && this.options?.methods?.remote !== false) {
       options.push({
@@ -280,6 +287,27 @@ class Modal {
         button.style.background = 'var(--nl-secondary-color)';
       };
 
+      const iconDiv = document.createElement('div');
+      // Replace emoji icons with text-based ones
+      const iconMap = {
+        '🔌': '[EXT]',
+        '🔑': '[KEY]',
+        '🌱': '[SEED]',
+        '🌐': '[NET]',
+        '👁️': '[VIEW]',
+        '📱': '[SMS]'
+      };
+      iconDiv.textContent = iconMap[option.icon] || option.icon;
+      iconDiv.style.cssText = `
+        font-size: 16px;
+        font-weight: bold;
+        margin-right: 16px;
+        width: 50px;
+        text-align: center;
+        color: var(--nl-primary-color);
+        font-family: var(--nl-font-family, 'Courier New', monospace);
+      `;
+
       const contentDiv = document.createElement('div');
       contentDiv.style.cssText = 'flex: 1; text-align: left;';
 
@@ -303,6 +331,7 @@ class Modal {
       contentDiv.appendChild(titleDiv);
       contentDiv.appendChild(descDiv);
 
+      button.appendChild(iconDiv);
       button.appendChild(contentDiv);
       this.modalBody.appendChild(button);
     });
@@ -319,6 +348,9 @@ class Modal {
       case 'local':
         this._showLocalKeyScreen();
         break;
+      case 'seedphrase':
+        this._showSeedPhraseScreen();
+        break;
       case 'connect':
         this._showConnectScreen();
         break;
@@ -1363,6 +1395,287 @@ class Modal {
     this._setAuthMethod('readonly');
   }
 
+  _showSeedPhraseScreen() {
+    this.modalBody.innerHTML = '';
+
+    const title = document.createElement('h3');
+    title.textContent = 'Import from Seed Phrase';
+    title.style.cssText = 'margin: 0 0 16px 0; font-size: 18px; font-weight: 600;';
+
+    const description = document.createElement('p');
+    description.textContent = 'Enter your 12 or 24-word mnemonic seed phrase to derive Nostr accounts:';
+    description.style.cssText = 'margin-bottom: 12px; color: #6b7280; font-size: 14px;';
+
+    const textarea = document.createElement('textarea');
+    // Remove default placeholder text as requested
+    textarea.placeholder = '';
+    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 mnemonic validation
+    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 isValid = this._validateMnemonic(value);
+      if (isValid) {
+        const wordCount = value.split(/\s+/).length;
+        formatHint.textContent = `✅ Valid ${wordCount}-word mnemonic detected`;
+        formatHint.style.color = '#059669';
+      } else {
+        formatHint.textContent = '❌ Invalid mnemonic - must be 12 or 24 valid BIP-39 words';
+        formatHint.style.color = '#dc2626';
+      }
+    };
+
+    // Generate new seed phrase button
+    const generateButton = document.createElement('button');
+    generateButton.textContent = 'Generate New Seed Phrase';
+    generateButton.onclick = () => this._generateNewSeedPhrase(textarea, formatHint);
+    generateButton.style.cssText = this._getButtonStyle() + 'margin-bottom: 12px;';
+
+    const importButton = document.createElement('button');
+    importButton.textContent = 'Import Accounts';
+    importButton.onclick = () => this._importFromSeedPhrase(textarea.value);
+    importButton.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;';
+
+    this.modalBody.appendChild(title);
+    this.modalBody.appendChild(description);
+    this.modalBody.appendChild(textarea);
+    this.modalBody.appendChild(formatHint);
+    this.modalBody.appendChild(generateButton);
+    this.modalBody.appendChild(importButton);
+    this.modalBody.appendChild(backButton);
+  }
+
+  _generateNewSeedPhrase(textarea, formatHint) {
+    try {
+      // Check if NIP-06 is available
+      if (!window.NostrTools?.nip06) {
+        throw new Error('NIP-06 not available in bundle');
+      }
+
+      // Generate a random 12-word mnemonic using NostrTools
+      const mnemonic = window.NostrTools.nip06.generateSeedWords();
+      
+      // Set the generated mnemonic in the textarea
+      textarea.value = mnemonic;
+      
+      // Trigger validation to show it's valid
+      const wordCount = mnemonic.split(/\s+/).length;
+      formatHint.textContent = `✅ Generated valid ${wordCount}-word mnemonic`;
+      formatHint.style.color = '#059669';
+      
+      console.log('Generated new seed phrase:', wordCount, 'words');
+      
+    } catch (error) {
+      console.error('Failed to generate seed phrase:', error);
+      formatHint.textContent = '❌ Failed to generate seed phrase - NIP-06 not available';
+      formatHint.style.color = '#dc2626';
+    }
+  }
+
+  _validateMnemonic(mnemonic) {
+    try {
+      // Check if NIP-06 is available
+      if (!window.NostrTools?.nip06) {
+        console.error('NIP-06 not available in bundle');
+        return false;
+      }
+
+      const words = mnemonic.trim().split(/\s+/);
+      
+      // Must be 12 or 24 words
+      if (words.length !== 12 && words.length !== 24) {
+        return false;
+      }
+
+      // Try to validate using NostrTools nip06 - this will throw if invalid
+      window.NostrTools.nip06.privateKeyFromSeedWords(mnemonic, '', 0);
+      return true;
+    } catch (error) {
+      console.log('Mnemonic validation failed:', error.message);
+      return false;
+    }
+  }
+
+  _importFromSeedPhrase(mnemonic) {
+    try {
+      const trimmed = mnemonic.trim();
+      if (!trimmed) {
+        throw new Error('Please enter a mnemonic seed phrase');
+      }
+
+      // Validate the mnemonic
+      if (!this._validateMnemonic(trimmed)) {
+        throw new Error('Invalid mnemonic. Please enter a valid 12 or 24-word BIP-39 seed phrase');
+      }
+
+      // Generate accounts 0-5 using NIP-06
+      const accounts = [];
+      for (let i = 0; i < 6; i++) {
+        try {
+          const privateKey = window.NostrTools.nip06.privateKeyFromSeedWords(trimmed, '', i);
+          const publicKey = window.NostrTools.getPublicKey(privateKey);
+          const nsec = window.NostrTools.nip19.nsecEncode(privateKey);
+          const npub = window.NostrTools.nip19.npubEncode(publicKey);
+
+          accounts.push({
+            index: i,
+            privateKey,
+            publicKey,
+            nsec,
+            npub
+          });
+        } catch (error) {
+          console.error(`Failed to derive account ${i}:`, error);
+        }
+      }
+
+      if (accounts.length === 0) {
+        throw new Error('Failed to derive any accounts from seed phrase');
+      }
+
+      console.log(`Successfully derived ${accounts.length} accounts from seed phrase`);
+      this._showAccountSelection(accounts);
+
+    } catch (error) {
+      console.error('Seed phrase import failed:', error);
+      this._showError('Seed phrase import failed: ' + error.message);
+    }
+  }
+
+  _showAccountSelection(accounts) {
+    this.modalBody.innerHTML = '';
+
+    const title = document.createElement('h3');
+    title.textContent = 'Select Account';
+    title.style.cssText = 'margin: 0 0 16px 0; font-size: 18px; font-weight: 600;';
+
+    const description = document.createElement('p');
+    description.textContent = `Select which account to use (${accounts.length} accounts derived from seed phrase):`;
+    description.style.cssText = 'margin-bottom: 20px; color: #6b7280; font-size: 14px;';
+
+    this.modalBody.appendChild(title);
+    this.modalBody.appendChild(description);
+
+    // Create table for account selection
+    const table = document.createElement('table');
+    table.style.cssText = `
+      width: 100%;
+      border-collapse: collapse;
+      margin-bottom: 20px;
+      font-family: var(--nl-font-family, 'Courier New', monospace);
+      font-size: 12px;
+    `;
+
+    // Table header
+    const thead = document.createElement('thead');
+    thead.innerHTML = `
+      <tr style="background: #f3f4f6;">
+        <th style="padding: 8px; text-align: center; border: 1px solid #d1d5db; font-weight: bold;">#</th>
+        <th style="padding: 8px; text-align: left; border: 1px solid #d1d5db; font-weight: bold;">Public Key (npub)</th>
+        <th style="padding: 8px; text-align: center; border: 1px solid #d1d5db; font-weight: bold;">Action</th>
+      </tr>
+    `;
+    table.appendChild(thead);
+
+    // Table body
+    const tbody = document.createElement('tbody');
+    accounts.forEach(account => {
+      const row = document.createElement('tr');
+      row.style.cssText = 'border: 1px solid #d1d5db;';
+      
+      const indexCell = document.createElement('td');
+      indexCell.textContent = account.index;
+      indexCell.style.cssText = 'padding: 8px; text-align: center; border: 1px solid #d1d5db; font-weight: bold;';
+
+      const pubkeyCell = document.createElement('td');
+      pubkeyCell.style.cssText = 'padding: 8px; border: 1px solid #d1d5db; font-family: monospace; word-break: break-all;';
+      
+      // Show truncated npub for readability
+      const truncatedNpub = `${account.npub.slice(0, 12)}...${account.npub.slice(-8)}`;
+      pubkeyCell.innerHTML = `
+        <code style="background: #f3f4f6; padding: 2px 4px; border-radius: 2px;">${truncatedNpub}</code><br>
+        <small style="color: #6b7280;">Full: ${account.npub}</small>
+      `;
+
+      const actionCell = document.createElement('td');
+      actionCell.style.cssText = 'padding: 8px; text-align: center; border: 1px solid #d1d5db;';
+      
+      const selectButton = document.createElement('button');
+      selectButton.textContent = 'Use';
+      selectButton.onclick = () => this._selectAccount(account);
+      selectButton.style.cssText = `
+        padding: 4px 12px;
+        font-size: 11px;
+        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);
+      `;
+      selectButton.onmouseover = () => {
+        selectButton.style.borderColor = 'var(--nl-accent-color)';
+      };
+      selectButton.onmouseout = () => {
+        selectButton.style.borderColor = 'var(--nl-primary-color)';
+      };
+
+      actionCell.appendChild(selectButton);
+      
+      row.appendChild(indexCell);
+      row.appendChild(pubkeyCell);
+      row.appendChild(actionCell);
+      tbody.appendChild(row);
+    });
+    table.appendChild(tbody);
+
+    this.modalBody.appendChild(table);
+
+    // Back button
+    const backButton = document.createElement('button');
+    backButton.textContent = 'Back to Seed Phrase';
+    backButton.onclick = () => this._showSeedPhraseScreen();
+    backButton.style.cssText = this._getButtonStyle('secondary');
+
+    this.modalBody.appendChild(backButton);
+  }
+
+  _selectAccount(account) {
+    console.log('Selected account:', account.index, account.npub);
+    
+    // Use the same auth method as local keys, but with seedphrase identifier
+    this._setAuthMethod('local', {
+      secret: account.nsec,
+      pubkey: account.publicKey,
+      source: 'seedphrase',
+      accountIndex: account.index
+    });
+  }
+
   _showOtpScreen() {
     // Placeholder for OTP functionality
     this._showError('OTP/DM not yet implemented - coming soon!');