lnlink-server 1.0.1 → 1.0.3

package/dist/public/js/init.js

@@ -0,0 +1,895 @@
+/* eslint-disable unused-imports/no-unused-vars */
+/* eslint-disable no-unused-vars */
+/* global bootstrap */
+
+// Global toggle state
+let isAdvancedConfigVisible = false
+
+// Function to open external URL in default browser
+function openExternalUrl(url) {
+  if (window.electronAPI && window.electronAPI.openExternal) {
+    window.electronAPI.openExternal(url)
+  }
+  else {
+    // Fallback for non-Electron environments
+    window.open(url, "_blank")
+  }
+}
+
+// Network configuration presets
+const defaultNetworkConfigs = {
+  regtest: {
+    network: "regtest",
+  },
+  testnet: {
+    network: "testnet",
+  },
+  mainnet: {
+    network: "mainnet",
+  },
+}
+
+// Initialize networkConfigs with default values
+let networkConfigs = JSON.parse(JSON.stringify(defaultNetworkConfigs))
+
+// Fetch network configurations from API
+async function fetchNetworkConfigs() {
+  try {
+    const response = await fetch(
+      "https://dev-edge-api.unift.xyz/edge/nodeconfig/getList",
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({}),
+      },
+    )
+
+    const result = await response.json()
+
+    if (result.code === "0" && result.data && Array.isArray(result.data)) {
+      const apiConfigs = {}
+
+      result.data.forEach((item) => {
+        if (!item.network)
+          return
+        const networkKey = item.network.toLowerCase()
+
+        apiConfigs[networkKey] = {
+          bitcoindIndex: item.rgbIndex,
+          bitcoindPass: item.bitcoindRpcPassword,
+          bitcoindRpcHost: item.bitcoindRpcHost,
+          bitcoindRpcPort: String(item.bitcoindRpcPort),
+          bitcoindUser: item.bitcoindRpcUser,
+          bitcoindZmqBlock: item.bitcoindZmqBlock,
+          bitcoindZmqRawTx: item.bitcoindZmqRawTx,
+          network: networkKey,
+          nostrRelays: item.nostrRelays ? [item.nostrRelays] : [],
+          officialLndPeer: item.lndPeerId,
+          officialLndPeerHost: item.lndPeerHost,
+          officialNostrPubKey: item.nostrPubkey,
+          officialRgbPeer: item.rgbPeerId,
+          officialRgbPeerHost: item.rgbPeerHost,
+          officialUniverseServer: item.lndUniverseServer,
+          priceOracle: item.lndPriceOracle,
+          rgbProxy: item.rgbProxy,
+        }
+      })
+
+      // Update global configs, strictly using API response if valid
+      if (Object.keys(apiConfigs).length > 0) {
+        networkConfigs = apiConfigs
+        console.log("Network configs updated from API")
+      }
+    }
+    else {
+      console.warn(
+        "API returned success but no data or invalid format, using default configs.",
+      )
+    }
+  }
+  catch (error) {
+    console.error(
+      "Error fetching network configs, using default configs:",
+      error,
+    )
+  }
+}
+
+// Field display name mapping
+const fieldLabels = {
+  // Bitcoin Config
+  bitcoindRpcHost: "Bitcoind RPC Host",
+  bitcoindRpcPort: "Port",
+  bitcoindUser: "User",
+  bitcoindPass: "Password",
+  bitcoindZmqBlock: "ZMQ Block",
+  bitcoindZmqRawTx: "ZMQ Raw TX",
+  // LND Config
+  officialLndPeer: "Peer ID",
+  officialLndPeerHost: "Peer Host",
+  officialUniverseServer: "Universe Server",
+  priceOracle: "Price Oracle",
+  // RGB Config
+  officialRgbPeer: "Peer ID",
+  officialRgbPeerHost: "Peer Host",
+  rgbProxy: "Proxy",
+  bitcoindIndex: "Index",
+  // Nostr Config
+  officialNostrPubKey: "PubKey",
+  nostrRelays: "Relays",
+  network: "Network Type",
+  owner: "Owner Address",
+}
+
+// Show error modal
+function showErrorModal(message) {
+  const errorModalBody = document.getElementById("errorModalBody")
+  errorModalBody.textContent = message
+  if (typeof bootstrap !== "undefined") {
+    const errorModal = new bootstrap.Modal(
+      document.getElementById("errorModal"),
+    )
+    errorModal.show()
+  }
+  else {
+    console.error("Error:", message)
+  }
+}
+
+// Show success modal
+function showSuccessModal(message) {
+  const successModalBody = document.getElementById("successModalBody")
+  successModalBody.textContent = message
+  if (typeof bootstrap !== "undefined") {
+    const successModal = new bootstrap.Modal(
+      document.getElementById("successModal"),
+    )
+    successModal.show()
+  }
+  else {
+    console.log("Success:", message)
+  }
+}
+
+// Status determination function
+function getStatusClass(value) {
+  const strValue = String(value).toLowerCase()
+  if (
+    strValue === "true"
+    || strValue === "running"
+    || strValue === "active"
+    || strValue === "online"
+  ) {
+    return { class: "status-success", icon: "fas fa-check-circle" }
+  }
+  else if (
+    strValue === "false"
+    || strValue === "stopped"
+    || strValue === "inactive"
+    || strValue === "offline"
+  ) {
+    return { class: "status-error", icon: "fas fa-times-circle" }
+  }
+  else if (strValue.includes("pending") || strValue.includes("waiting")) {
+    return { class: "status-warning", icon: "fas fa-clock" }
+  }
+  return { class: "", icon: "fas fa-info-circle" }
+}
+
+// Get system information
+async function getInfo(showLoading = true) {
+  const mainContent = document.getElementById("main-content")
+
+  // Show loading state
+  if (showLoading) {
+    mainContent.innerHTML
+      = "<div class=\"loading-container\"><div class=\"loading\"></div><div>Loading information...</div></div>"
+  }
+
+  try {
+    const res = await fetch("/api/lnd/info").then(res => res.json())
+
+    if (res.code === 200) {
+      if (res.data) {
+        const { owner, settings } = res.data
+
+        // If both owner and settings exist, show configured view
+        if (owner && settings) {
+          renderConfiguredView(res.data, settings)
+        }
+        // If missing owner or settings, show configuration form
+        else {
+          // Fetch network configs only when needed for configuration
+          await fetchNetworkConfigs()
+
+          fetch("https://api.example.com/login", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              "Authorization": "Bearer your-token-here", // 可选
+            },
+            body: JSON.stringify({
+              username: "test",
+              password: "123456",
+            }),
+          })
+          renderConfigurationForm(res.data)
+        }
+      }
+    }
+    else if (
+      res.code === 500
+      && res.message === "Please init the wallet or init owner first"
+    ) {
+      // Fetch network configs only when needed for configuration
+      await fetchNetworkConfigs()
+
+      // If wallet/owner not initialized, show configuration form
+      renderConfigurationForm({})
+    }
+    else {
+      mainContent.innerHTML
+        = "<div class=\"alert alert-danger\"><i class=\"fas fa-exclamation-triangle\"></i> Failed to load information</div>"
+    }
+  }
+  catch (error) {
+    console.error("Failed to get info:", error)
+    mainContent.innerHTML
+      = "<div class=\"alert alert-danger\"><i class=\"fas fa-exclamation-triangle\"></i> Network error occurred</div>"
+  }
+}
+
+// Render configured view
+function renderConfiguredView(basicData, settings) {
+  const mainContent = document.getElementById("main-content")
+
+  // Extract Node ID (Nostr PubKey)
+  const nodeId
+    = settings.officialNostrPubKey || basicData.officialNostrPubKey || "Unknown"
+
+  // Determine Service Status
+  // We check basicData for status indicators or default to design mocks if not present
+  // Assuming keys might exist, otherwise using placeholders for the design requirement
+  const rgbStatus = basicData.rgb || "Stopped" // Mock/Default based on design
+  const litdStatus = basicData.litd || "Stopped" // Mock/Default based on design
+
+  const isRgbRunning
+    = rgbStatus.toLowerCase() === "running" || rgbStatus === "true"
+  const isLitdRunning
+    = litdStatus.toLowerCase() === "running" || litdStatus === "true"
+
+  const rgbClass = isRgbRunning ? "running" : "stopped"
+  const litdClass = isLitdRunning ? "running" : "stopped"
+
+  const rgbText = isRgbRunning ? "Running" : "Stopped"
+  const litdText = isLitdRunning ? "Running" : "Stopped"
+
+  // Helper to shorten address in the middle
+  const shortenAddress = (address, chars = 10) => {
+    if (!address || address.length <= chars * 2)
+      return address || ""
+    return `${address.substring(0, chars)}...${address.substring(address.length - chars)}`
+  }
+
+  const html = `
+    <div class="header-logo text-center mb-5">
+       <img src="./img/logo.svg" alt="NodeFlow Logo" style="height: 110px;">
+    </div>
+    
+    <div class="welcome-container">
+      <h1 class="welcome-title">Welcome!</h1>
+      <p class="welcome-subtitle">Your nodes, managed effortlessly.</p>
+      
+      <div class="status-card">
+        <!-- Owner Address -->
+        <div class="read-only-input-group">
+          <label class="card-label">Owner Address</label>
+          <div class="input-container" style="position: relative;">
+            <div class="read-only-input" id="display-owner">${shortenAddress(basicData.owner || "")}</div>
+            <button class="copy-icon-btn" onclick="copyToClipboard('${basicData.owner || ""}', this)">
+               <i class="far fa-copy"></i>
+            </button>
+          </div>
+        </div>
+        
+        <!-- Node ID -->
+        <div class="read-only-input-group">
+          <label class="card-label">Node ID</label>
+          <div class="input-container" style="position: relative;">
+            <div class="read-only-input" id="display-node-id">${shortenAddress(nodeId)}</div>
+            <button class="copy-icon-btn" onclick="copyToClipboard('${nodeId}', this)">
+               <i class="far fa-copy"></i>
+            </button>
+          </div>
+        </div>
+        
+        <!-- Service Status -->
+        <div class="service-status-section">
+          <label class="card-label">Service Status</label>
+          <div class="status-grid">
+            <div class="status-box">
+               <div class="status-name">
+                 <span class="status-dot ${rgbClass}"></span> RGB
+               </div>
+               <span class="status-value ${rgbClass}">${rgbText}</span>
+            </div>
+            <div class="status-box">
+               <div class="status-name">
+                 <span class="status-dot ${litdClass}"></span> LITD
+               </div>
+               <span class="status-value ${litdClass}">${litdText}</span>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Footer -->
+        <div class="card-footer-row">
+           <div class="regtest-badge">${settings.network || "Regtest"}</div>
+           <button class="settings-icon-btn" onclick="openSettingsModal()">
+             <i class="fas fa-cog"></i>
+           </button>
+        </div>
+      </div>
+      
+      <button class="manage-btn" onclick="navigateToManage('${basicData.manageUrl || "#"}', this)">
+        Manage My Node <i class="fas fa-arrow-right"></i>
+      </button>
+    </div>
+    
+    <!-- Settings Modal Placeholder -->
+    <div id="settings-modal-container"></div>
+  `
+
+  mainContent.innerHTML = html
+
+  // Store data globally for modal use
+  window.currentSettings = settings
+  window.currentBasicData = basicData
+}
+
+// Navigate to manage URL with loading state
+window.navigateToManage = function navigateToManage(url, button) {
+  if (!url || url === "#" || !button) {
+    return
+  }
+
+  // Prevent double-click
+  if (button.dataset.loading === "true") {
+    return
+  }
+
+  // Set loading state
+  button.dataset.loading = "true"
+  button.disabled = true
+  button.classList.add("loading-state")
+  button.innerHTML = `<span class="loading"></span> Loading...`
+
+  // Allow UI to render before navigation
+  requestAnimationFrame(() => {
+    setTimeout(() => {
+      window.location.href = url
+    }, 50)
+  })
+}
+
+// Open Settings Modal
+function openSettingsModal() {
+  const container = document.getElementById("settings-modal-container")
+  const settings = window.currentSettings || {}
+  const basicData = window.currentBasicData || {}
+
+  // Helper to create read-only field
+  const createField = (label, value, isPassword = false) => {
+    const type = isPassword ? "password" : "text"
+    const toggleHtml = isPassword
+      ? `<i class="far fa-eye password-toggle-icon" onclick="togglePasswordVisibility(this)"></i>`
+      : ""
+
+    return `
+      <div class="settings-field">
+        <label>${label}</label>
+        <div class="settings-input-group">
+          <input type="${type}" class="settings-input" value="${value || ""}" readonly>
+          ${toggleHtml}
+        </div>
+      </div>
+    `
+  }
+
+  const modalHtml = `
+    <div class="settings-modal-overlay" onclick="closeSettingsModal(event)">
+      <div class="settings-modal" onclick="event.stopPropagation()">
+        <div class="settings-header">
+          <h3>Settings</h3>
+          <button class="close-modal-btn" onclick="closeSettingsModal()"><i class="fas fa-times"></i></button>
+        </div>
+        <div class="settings-content">
+          <!-- Node Information -->
+          <div class="settings-section-title">Node Information</div>
+          <div class="settings-grid">
+            ${createField("Owner Address", basicData.owner)}
+            ${createField("Node ID", settings.officialNostrPubKey || basicData.officialNostrPubKey)}
+            ${createField("Network Type", settings.network)}
+          </div>
+          
+          <!-- Bitcoin Core -->
+          <div class="settings-section-title">Bitcoin Core</div>
+          <div class="settings-grid">
+            ${createField("Bitcoind RPC Host", settings.bitcoindRpcHost)}
+            ${createField("Port", settings.bitcoindRpcPort)}
+            ${createField("User", settings.bitcoindUser)}
+            ${createField("Password", settings.bitcoindPass, true)}
+            ${createField("ZMQ Block", settings.bitcoindZmqBlock)}
+            ${createField("ZMQ Raw TX", settings.bitcoindZmqRawTx)}
+          </div>
+          
+          <!-- LND -->
+          <div class="settings-section-title">LND</div>
+          <div class="settings-grid">
+            ${createField("Peer ID", settings.officialLndPeer)}
+            ${createField("Peer Host", settings.officialLndPeerHost)}
+            ${createField("Universe Server", settings.officialUniverseServer)}
+            ${createField("Price Oracle", settings.priceOracle)}
+          </div>
+          
+           <!-- RGB -->
+          <div class="settings-section-title">RGB</div>
+          <div class="settings-grid">
+            ${createField("Peer ID", settings.officialRgbPeer)}
+            ${createField("Peer Host", settings.officialRgbPeerHost)}
+            ${createField("Proxy", settings.rgbProxy)}
+            ${createField("Index", settings.bitcoindIndex)}
+          </div>
+          
+          <!-- Nostr -->
+          <div class="settings-section-title">Nostr</div>
+          <div class="settings-grid">
+            ${createField("Nostr Relay", settings.nostrRelays)}
+            ${createField("Nostr Private Key", settings.officialNostrPubKey)}
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+
+  container.innerHTML = modalHtml
+}
+
+// Close Settings Modal
+function closeSettingsModal(event) {
+  const container = document.getElementById("settings-modal-container")
+  container.innerHTML = ""
+}
+
+// Toggle Password Visibility
+function togglePasswordVisibility(icon) {
+  const input = icon.previousElementSibling
+  if (input.type === "password") {
+    input.type = "text"
+    icon.classList.remove("fa-eye")
+    icon.classList.add("fa-eye-slash")
+  }
+  else {
+    input.type = "password"
+    icon.classList.remove("fa-eye-slash")
+    icon.classList.add("fa-eye")
+  }
+}
+
+// Copy to clipboard function
+function copyToClipboard(text, triggerElement) {
+  const showFeedback = () => {
+    if (triggerElement) {
+      const icon = triggerElement.querySelector("i")
+      if (icon) {
+        const originalClass = icon.className
+        icon.className = "fas fa-check"
+
+        setTimeout(() => {
+          icon.className = originalClass
+        }, 2000)
+      }
+    }
+  }
+
+  if (navigator.clipboard && window.isSecureContext) {
+    navigator.clipboard.writeText(text).then(
+      () => {
+        showFeedback()
+      },
+      (err) => {
+        console.error("Could not copy text: ", err)
+      },
+    )
+  }
+  else {
+    const textArea = document.createElement("textarea")
+    textArea.value = text
+    textArea.style.position = "fixed"
+    textArea.style.left = "-9999px"
+    document.body.appendChild(textArea)
+    textArea.focus()
+    textArea.select()
+    try {
+      document.execCommand("copy")
+      showFeedback()
+    }
+    catch (err) {
+      console.error("Fallback: Oops, unable to copy", err)
+    }
+    document.body.removeChild(textArea)
+  }
+}
+
+// Render configuration form (when owner or settings missing)
+function renderConfigurationForm(basicData) {
+  const mainContent = document.getElementById("main-content")
+
+  const html = `
+    <div class="header-logo text-center mb-4">
+        <img src="img/logo.svg" alt="NodeFlow" height="110">
+    </div>
+
+    <h2 class="text-center text-white mb-2">Node Initial Configuration</h2>
+    <p class="text-center text-muted mb-5">You can start the node after viewing and saving the configuration details.</p>
+
+    <div class="info-section">
+      <form class="needs-validation" novalidate id="configForm" autocomplete="off">
+        <!-- Owner Configuration -->
+        <div class="config-group">
+          <label for="owner" class="form-label text-muted">Owner Address</label>
+          <div class="input-group">
+              <input type="text" class="form-control" id="owner" name="owner" required
+                     placeholder="Enter owner address" value="${basicData?.owner || ""}" readonly>
+              <span class="input-icon copy-btn" onclick="copyToClipboard(document.getElementById('owner').value, this)">
+                  <i class="far fa-copy"></i>
+              </span>
+          </div>
+          <div class="invalid-feedback">
+            Please provide a valid owner address.
+          </div>
+        </div>
+
+        <!-- Network Configuration -->
+        <div class="config-group network-type mt-4">
+          <label class="form-label text-muted">Network Type</label>
+          <div class="network-selector d-flex gap-2">
+            <button type="button" class="btn btn-network active" data-value="regtest" onclick="selectNetwork('regtest')">Regtest</button>
+            <button type="button" class="btn btn-network" data-value="testnet" onclick="selectNetwork('testnet')">Testnet</button>
+            <button type="button" class="btn btn-network" data-value="mainnet" onclick="selectNetwork('mainnet')">Mainnet</button>
+          </div>
+          <input type="hidden" id="network" name="network" value="regtest">
+        </div>
+
+        <!-- Advanced Toggle -->
+        <div class="mt-3 mb-3 d-flex align-items-center justify-content-between">
+            <a href="javascript:void(0)" class="advanced-toggle text-decoration-none text-lime" onclick="toggleAdvanced()">
+                Show Advanced Configuration <i class="fas fa-chevron-down" id="advanced-icon"></i>
+            </a>
+            <span id="mainnet-badge" class="customizable-badge" style="display: none;">Customizable parameters available.</span>
+        </div>
+
+        <!-- Dynamic Configuration Fields -->
+        <div id="config-fields-container" style="display: none;"></div>
+        
+        <div class="row mb-3 mt-4">
+          <button type="submit" id="btn_config_submit" class="btn btn-lime w-100 py-2 fw-bold">
+            Save and Continue
+          </button>
+        </div>
+      </form>
+    </div>
+  `
+
+  mainContent.innerHTML = html
+
+  // Initialize configuration fields
+  updateConfigFields()
+}
+
+// Toggle Advanced Configuration
+window.toggleAdvanced = function () {
+  isAdvancedConfigVisible = !isAdvancedConfigVisible
+  const container = document.getElementById("config-fields-container")
+  const icon = document.getElementById("advanced-icon")
+
+  if (isAdvancedConfigVisible) {
+    container.style.display = "block"
+    icon.classList.remove("fa-chevron-down")
+    icon.classList.add("fa-chevron-up")
+  }
+  else {
+    container.style.display = "none"
+    icon.classList.remove("fa-chevron-up")
+    icon.classList.add("fa-chevron-down")
+  }
+}
+
+// Select Network
+window.selectNetwork = function (network) {
+  if (networkConfigs && !networkConfigs[network]) {
+    showErrorModal("This network is not supported")
+    return
+  }
+  document.getElementById("network").value = network
+
+  // Update active button state
+  document.querySelectorAll(".btn-network").forEach((btn) => {
+    if (btn.dataset.value === network) {
+      btn.classList.add("active")
+    }
+    else {
+      btn.classList.remove("active")
+    }
+  })
+
+  // Toggle mainnet badge
+  const badge = document.getElementById("mainnet-badge")
+  if (badge) {
+    badge.style.display = network === "mainnet" ? "inline-block" : "none"
+  }
+
+  updateConfigFields()
+}
+
+window.copyToClipboard = copyToClipboard
+
+window.togglePassword = function (id) {
+  const input = document.getElementById(id)
+  if (input.type === "password") {
+    input.type = "text"
+  }
+  else {
+    input.type = "password"
+  }
+}
+
+// Render basic information list
+function renderBasicInfoList(data) {
+  let html = ""
+  const excludeKeys = ["settings"]
+
+  for (const key in data) {
+    if (excludeKeys.includes(key))
+      continue
+
+    const value = data[key]
+    const status = getStatusClass(value)
+
+    let valueHtml = `<span class="info-value ${status.class}">
+      <i class="${status.icon} status-icon"></i>${value}
+    </span>`
+
+    if (key === "manageUrl") {
+      valueHtml = `<span class="info-value">
+        <a href="#" class="info-link" onclick="this.innerHTML='<i class=\\'fas fa-spinner fa-spin status-icon\\'></i>Loading...';setTimeout(()=>{window.location.href='${value}';},100);return false;">
+          <i class="fas fa-external-link-alt status-icon"></i>Click to manage
+        </a>
+      </span>`
+    }
+
+    html += `
+      <li class="list-group-item">
+        <div class="info-key">${key}:</div>
+        <div class="info-value-container">${valueHtml}</div>
+      </li>
+    `
+  }
+  return html
+}
+
+// Render settings list
+function renderSettingsList(settings) {
+  let html = ""
+  for (const key in settings) {
+    const value = Array.isArray(settings[key])
+      ? settings[key].join(", ")
+      : settings[key]
+    const label = fieldLabels[key] || key
+
+    html += `
+      <li class="list-group-item">
+        <div class="info-key">${label}:</div>
+        <div class="info-value-container">
+          <span class="info-value">${value}</span>
+        </div>
+      </li>
+    `
+  }
+  return html
+}
+
+// Update configuration fields
+function updateConfigFields() {
+  const networkInput = document.getElementById("network")
+  const container = document.getElementById("config-fields-container")
+
+  if (!networkInput || !container)
+    return
+
+  const selectedNetwork = networkInput.value
+  const config = networkConfigs[selectedNetwork]
+
+  if (!config)
+    return
+
+  let fieldsHtml = ""
+
+  // Group fields by category
+  const groups = {
+    "Bitcoin Config": [
+      "bitcoindRpcHost",
+      "bitcoindRpcPort",
+      "bitcoindUser",
+      "bitcoindPass",
+      "bitcoindZmqBlock",
+      "bitcoindZmqRawTx",
+    ],
+    "LND Config": [
+      "officialLndPeer",
+      "officialLndPeerHost",
+      "officialUniverseServer",
+      "priceOracle",
+    ],
+    "RGB Config": [
+      "officialRgbPeer",
+      "officialRgbPeerHost",
+      "rgbProxy",
+      "bitcoindIndex",
+    ],
+    "Nostr Config": ["officialNostrPubKey", "nostrRelays"],
+  }
+
+  // Define editable fields per network
+  let editableFields = []
+  if (selectedNetwork === "regtest") {
+    editableFields = ["bitcoindPass"]
+  }
+  else if (selectedNetwork === "mainnet") {
+    editableFields = [
+      "bitcoindRpcHost",
+      "bitcoindRpcPort",
+      "bitcoindUser",
+      "bitcoindPass",
+      "bitcoindZmqBlock",
+      "bitcoindZmqRawTx",
+      "rgbProxy",
+      "bitcoindIndex",
+    ]
+  }
+  else if (selectedNetwork === "testnet") {
+    editableFields = ["bitcoindPass"]
+  }
+
+  for (const groupName in groups) {
+    fieldsHtml += `<div class="config-section mb-4">`
+    fieldsHtml += `<h6 class="text-lime mb-3">${groupName}</h6>`
+    fieldsHtml += `<div class="row g-3">`
+
+    groups[groupName].forEach((key) => {
+      if (config[key] !== undefined) {
+        const label = fieldLabels[key] || key
+        const value = Array.isArray(config[key])
+          ? config[key].join(",")
+          : config[key]
+
+        const isEditable = editableFields.includes(key)
+        const isPassword = key.toLowerCase().includes("pass")
+        const inputType = isPassword ? "password" : "text"
+
+        fieldsHtml += `
+            <div class="col-md-4">
+                <label for="${key}" class="form-label text-muted small">${label}</label>
+                <div class="input-group">
+                    <input type="${inputType}" class="form-control" id="${key}" name="${key}" 
+                           value="${value}" ${isEditable ? "" : "readonly"}>
+                    ${
+                      isPassword && isEditable
+                        ? `
+                    <span class="input-icon toggle-password" onclick="togglePassword('${key}')">
+                        <i class="far fa-eye"></i>
+                    </span>
+                    `
+                        : ""
+                    }
+                </div>
+            </div>
+        `
+      }
+    })
+
+    fieldsHtml += `</div></div>`
+  }
+
+  container.innerHTML = fieldsHtml
+}
+
+// Handle configuration form submission
+async function handleConfigFormSubmit(event) {
+  event.preventDefault()
+  const form = document.getElementById("configForm")
+  const submitBtn = document.getElementById("btn_config_submit")
+
+  if (!form.checkValidity()) {
+    event.stopPropagation()
+    form.classList.add("was-validated")
+    return
+  }
+
+  form.classList.add("was-validated")
+  submitBtn.setAttribute("disabled", "disabled")
+  // Use the new loading spinner style
+  submitBtn.innerHTML = "<div class=\"loading\"></div>Save and Continue"
+  const formData = new FormData(form)
+  const myHeaders = new Headers()
+  myHeaders.append("Content-Type", "application/json")
+  // Extract owner
+  const owner = formData.get("owner")
+
+  // Build settings object (exclude owner)
+  const settings = {}
+  for (const [key, value] of formData.entries()) {
+    if (key === "owner")
+      continue
+
+    if (key === "nostrRelays") {
+      // Handle comma-separated array
+      settings[key] = value
+        .split(",")
+        .map(item => item.trim())
+        .filter(item => item)
+    }
+    else {
+      settings[key] = value
+    }
+  }
+
+  const raw = JSON.stringify({
+    owner,
+    settings,
+  })
+
+  const requestOptions = {
+    method: "POST",
+    headers: myHeaders,
+    body: raw,
+    redirect: "follow",
+  }
+
+  try {
+    const response = await fetch("/api/lnd/init", requestOptions)
+    const result = await response.json()
+
+    if (result.code === 200) {
+      await getInfo(false)
+      showSuccessModal("Complete configuration saved successfully!")
+    }
+    else {
+      showErrorModal(result.message || "Configuration failed")
+    }
+  }
+  catch (error) {
+    console.error("Network error:", error)
+    showErrorModal("Network error occurred")
+  }
+  finally {
+    submitBtn.removeAttribute("disabled")
+    submitBtn.innerHTML
+      = "<i class=\"fas fa-save\"></i> Save Complete Configuration"
+  }
+}
+
+// Page initialization
+document.addEventListener("DOMContentLoaded", async () => {
+  // Get information
+  await getInfo()
+
+  // Bind form submission events (using event delegation)
+  document.addEventListener("submit", (event) => {
+    if (event.target.id === "configForm") {
+      handleConfigFormSubmit(event)
+    }
+  })
+})