lnlink-server 1.0.1 → 1.0.2

package/dist/public/js/init.js

@@ -0,0 +1,840 @@
+/* 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="window.location.href='${basicData.manageUrl || "#"}'">
+        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;
+}
+
+// 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);
+    }
+  });
+});