@narcisbodea/smstunnel-sdk 1.0.0

package/dist/react/index.mjs

@@ -0,0 +1,624 @@
+// src/react/SmsTunnelPairing.tsx
+import { useState as useState2 } from "react";
+
+// src/react/useSmsTunnel.ts
+import { useState, useEffect, useRef, useCallback } from "react";
+function useSmsTunnel(options) {
+  const { apiBaseUrl, getAuthHeaders, routePrefix = "smstunnel", pollInterval = 3e3 } = options;
+  const [state, setState] = useState({
+    status: "loading",
+    serverUrl: "",
+    deviceName: "",
+    showQr: false,
+    qrData: "",
+    generating: false,
+    polling: false,
+    error: ""
+  });
+  const pollRef = useRef(null);
+  const pairingTokenRef = useRef("");
+  const baseUrl = apiBaseUrl.replace(/\/$/, "");
+  const authHeaders = useCallback(() => {
+    return getAuthHeaders ? getAuthHeaders() : {};
+  }, [getAuthHeaders]);
+  const fetchStatus = useCallback(async () => {
+    try {
+      const res = await fetch(`${baseUrl}/${routePrefix}/status`, {
+        headers: authHeaders()
+      });
+      const data = await res.json();
+      setState((prev) => ({
+        ...prev,
+        status: data.paired ? "paired" : "unpaired",
+        serverUrl: data.serverUrl || "",
+        deviceName: data.deviceName || ""
+      }));
+    } catch {
+      setState((prev) => ({ ...prev, status: "unpaired" }));
+    }
+  }, [baseUrl, routePrefix, authHeaders]);
+  useEffect(() => {
+    fetchStatus();
+  }, [fetchStatus]);
+  useEffect(() => {
+    if (!state.polling || !pairingTokenRef.current) return;
+    pollRef.current = setInterval(async () => {
+      try {
+        const res = await fetch(
+          `${baseUrl}/${routePrefix}/pairing-status/${pairingTokenRef.current}`
+        );
+        const data = await res.json();
+        if (data.status === "completed") {
+          setState((prev) => ({ ...prev, polling: false, showQr: false }));
+          if (pollRef.current) clearInterval(pollRef.current);
+          setTimeout(() => fetchStatus(), 2e3);
+        } else if (data.status === "expired") {
+          setState((prev) => ({
+            ...prev,
+            polling: false,
+            showQr: false,
+            error: "QR code expired"
+          }));
+          if (pollRef.current) clearInterval(pollRef.current);
+        }
+      } catch {
+      }
+    }, pollInterval);
+    return () => {
+      if (pollRef.current) clearInterval(pollRef.current);
+    };
+  }, [state.polling, baseUrl, routePrefix, pollInterval, fetchStatus]);
+  const generateQr = useCallback(async () => {
+    setState((prev) => ({ ...prev, generating: true, error: "" }));
+    try {
+      const res = await fetch(`${baseUrl}/${routePrefix}/create-token`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...authHeaders()
+        }
+      });
+      const data = await res.json();
+      if (!data.success) {
+        setState((prev) => ({
+          ...prev,
+          generating: false,
+          error: data.error || "Failed to create QR code"
+        }));
+        return;
+      }
+      pairingTokenRef.current = data.token;
+      setState((prev) => ({
+        ...prev,
+        qrData: data.qrData,
+        showQr: true,
+        polling: true,
+        generating: false
+      }));
+    } catch (err) {
+      setState((prev) => ({
+        ...prev,
+        generating: false,
+        error: `Error: ${err.message}`
+      }));
+    }
+  }, [baseUrl, routePrefix, authHeaders]);
+  const cancelPairing = useCallback(() => {
+    if (pollRef.current) clearInterval(pollRef.current);
+    pairingTokenRef.current = "";
+    setState((prev) => ({
+      ...prev,
+      showQr: false,
+      polling: false,
+      qrData: ""
+    }));
+  }, []);
+  const unpair = useCallback(async () => {
+    try {
+      await fetch(`${baseUrl}/${routePrefix}/unpair`, {
+        method: "POST",
+        headers: authHeaders()
+      });
+      setState((prev) => ({
+        ...prev,
+        status: "unpaired",
+        deviceName: ""
+      }));
+    } catch (err) {
+      setState((prev) => ({ ...prev, error: `Unpair failed: ${err.message}` }));
+    }
+  }, [baseUrl, routePrefix, authHeaders]);
+  const sendTestSms = useCallback(
+    async (to, message) => {
+      try {
+        const res = await fetch(`${baseUrl}/${routePrefix}/send`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            ...authHeaders()
+          },
+          body: JSON.stringify({ to, message })
+        });
+        return await res.json();
+      } catch (err) {
+        return { success: false, error: err.message };
+      }
+    },
+    [baseUrl, routePrefix, authHeaders]
+  );
+  const updateServerUrl = useCallback(
+    async (serverUrl) => {
+      try {
+        await fetch(`${baseUrl}/${routePrefix}/update-config`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            ...authHeaders()
+          },
+          body: JSON.stringify({ serverUrl })
+        });
+        setState((prev) => ({ ...prev, serverUrl }));
+      } catch (err) {
+        setState((prev) => ({ ...prev, error: `Update failed: ${err.message}` }));
+      }
+    },
+    [baseUrl, routePrefix, authHeaders]
+  );
+  const refetch = useCallback(() => fetchStatus(), [fetchStatus]);
+  return {
+    ...state,
+    generateQr,
+    cancelPairing,
+    unpair,
+    sendTestSms,
+    updateServerUrl,
+    refetch
+  };
+}
+
+// src/react/QrCodeCanvas.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import qrcode from "qrcode-generator";
+import { jsx } from "react/jsx-runtime";
+function QrCodeCanvas({ value, size = 200 }) {
+  const canvasRef = useRef2(null);
+  useEffect2(() => {
+    if (!canvasRef.current || !value) return;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const qr = qrcode(0, "M");
+    qr.addData(value);
+    qr.make();
+    const moduleCount = qr.getModuleCount();
+    const cellSize = size / moduleCount;
+    canvas.width = size;
+    canvas.height = size;
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(0, 0, size, size);
+    ctx.fillStyle = "#000000";
+    for (let row = 0; row < moduleCount; row++) {
+      for (let col = 0; col < moduleCount; col++) {
+        if (qr.isDark(row, col)) {
+          ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
+        }
+      }
+    }
+  }, [value, size]);
+  return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, width: size, height: size });
+}
+
+// src/shared/labels.ts
+var EN_LABELS = {
+  title: "SMS Configuration (SMSTunnel)",
+  description: "Connect an Android phone with the SMSTunnel app to send SMS directly from the application.",
+  serverUrlLabel: "SMSTunnel Server",
+  serverUrlPlaceholder: "https://smstunnel.io",
+  saveButton: "Save",
+  pairedStatus: "Connected",
+  deviceLabel: "Device",
+  unpairButton: "Disconnect",
+  unpairConfirm: "Are you sure you want to disconnect the SMS device?",
+  notPairedStatus: "Not connected",
+  notPairedDescription: "Scan the QR code with the SMSTunnel app on your Android phone.",
+  connectButton: "Connect phone",
+  scanQrPrompt: "Scan this QR code with the SMSTunnel app on your phone:",
+  waitingForPairing: "Waiting for connection...",
+  cancelButton: "Cancel",
+  qrExpired: "QR code has expired. Generate a new one.",
+  testSmsTitle: "Send test SMS",
+  testPhonePlaceholder: "Phone number (e.g., +1234567890)",
+  testMessagePlaceholder: "Message",
+  sendTestButton: "Send",
+  smsSentSuccess: "SMS sent successfully!",
+  smsError: "Error"
+};
+var RO_LABELS = {
+  title: "Configurare SMS (SMSTunnel)",
+  description: "Conecteaza un telefon Android cu aplicatia SMSTunnel pentru a trimite SMS-uri direct din aplicatie.",
+  serverUrlLabel: "Server SMSTunnel",
+  serverUrlPlaceholder: "https://smstunnel.io",
+  saveButton: "Salveaza",
+  pairedStatus: "Conectat",
+  deviceLabel: "Dispozitiv",
+  unpairButton: "Deconecteaza",
+  unpairConfirm: "Sigur doresti sa deconectezi dispozitivul SMS?",
+  notPairedStatus: "Neconectat",
+  notPairedDescription: "Scaneaza codul QR cu aplicatia SMSTunnel de pe telefonul Android.",
+  connectButton: "Conecteaza telefon",
+  scanQrPrompt: "Scaneaza acest cod QR cu aplicatia SMSTunnel de pe telefon:",
+  waitingForPairing: "Se asteapta conectarea...",
+  cancelButton: "Anuleaza",
+  qrExpired: "Codul QR a expirat. Genereaza unul nou.",
+  testSmsTitle: "Trimite SMS de test",
+  testPhonePlaceholder: "Nr. telefon (ex: 0741234567)",
+  testMessagePlaceholder: "Mesaj",
+  sendTestButton: "Trimite",
+  smsSentSuccess: "SMS trimis cu succes!",
+  smsError: "Eroare"
+};
+
+// src/react/SmsTunnelPairing.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var styles = {
+  container: {
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    fontSize: "14px",
+    color: "#1f2937"
+  },
+  card: {
+    border: "1px solid #e5e7eb",
+    borderRadius: "12px",
+    padding: "24px",
+    backgroundColor: "#ffffff"
+  },
+  title: {
+    fontSize: "18px",
+    fontWeight: 600,
+    color: "#111827",
+    marginBottom: "4px"
+  },
+  subtitle: {
+    fontSize: "13px",
+    color: "#6b7280",
+    marginBottom: "20px"
+  },
+  section: {
+    border: "1px solid #e5e7eb",
+    borderRadius: "8px",
+    padding: "16px",
+    marginBottom: "16px"
+  },
+  label: {
+    display: "block",
+    fontSize: "13px",
+    fontWeight: 500,
+    color: "#374151",
+    marginBottom: "6px"
+  },
+  inputRow: {
+    display: "flex",
+    gap: "8px"
+  },
+  input: {
+    flex: 1,
+    border: "1px solid #d1d5db",
+    borderRadius: "8px",
+    padding: "6px 12px",
+    fontSize: "13px",
+    outline: "none"
+  },
+  button: {
+    padding: "6px 16px",
+    borderRadius: "8px",
+    border: "none",
+    fontSize: "13px",
+    fontWeight: 500,
+    cursor: "pointer",
+    backgroundColor: "#4f46e5",
+    color: "#ffffff",
+    transition: "opacity 0.2s"
+  },
+  buttonSecondary: {
+    padding: "6px 16px",
+    borderRadius: "8px",
+    border: "1px solid #d1d5db",
+    fontSize: "13px",
+    fontWeight: 500,
+    cursor: "pointer",
+    backgroundColor: "#ffffff",
+    color: "#374151"
+  },
+  buttonDanger: {
+    padding: "6px",
+    borderRadius: "8px",
+    border: "none",
+    cursor: "pointer",
+    backgroundColor: "transparent",
+    color: "#9ca3af",
+    transition: "color 0.2s"
+  },
+  pairedBanner: {
+    display: "flex",
+    alignItems: "center",
+    gap: "12px",
+    border: "1px solid #bbf7d0",
+    backgroundColor: "#f0fdf4",
+    borderRadius: "8px",
+    padding: "16px",
+    marginBottom: "16px"
+  },
+  pairedIcon: {
+    width: "40px",
+    height: "40px",
+    borderRadius: "50%",
+    backgroundColor: "#dcfce7",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "#16a34a",
+    fontSize: "18px",
+    flexShrink: 0
+  },
+  unpairedBanner: {
+    display: "flex",
+    alignItems: "center",
+    gap: "12px",
+    border: "1px solid #fde68a",
+    backgroundColor: "#fefce8",
+    borderRadius: "8px",
+    padding: "16px",
+    marginBottom: "16px"
+  },
+  qrContainer: {
+    textAlign: "center",
+    padding: "16px"
+  },
+  qrFrame: {
+    display: "inline-block",
+    border: "2px dashed #a5b4fc",
+    borderRadius: "12px",
+    padding: "16px",
+    backgroundColor: "#ffffff",
+    marginBottom: "12px"
+  },
+  spinner: {
+    display: "inline-block",
+    width: "12px",
+    height: "12px",
+    border: "2px solid #d1d5db",
+    borderTopColor: "#4f46e5",
+    borderRadius: "50%",
+    animation: "smstunnel-spin 0.8s linear infinite",
+    marginRight: "8px",
+    verticalAlign: "middle"
+  },
+  error: {
+    color: "#dc2626",
+    fontSize: "13px",
+    marginBottom: "12px"
+  },
+  success: {
+    color: "#16a34a",
+    fontSize: "12px",
+    marginTop: "8px"
+  },
+  errorSmall: {
+    color: "#dc2626",
+    fontSize: "12px",
+    marginTop: "8px"
+  }
+};
+var stylesInjected = false;
+function injectKeyframes() {
+  if (stylesInjected || typeof document === "undefined") return;
+  const style = document.createElement("style");
+  style.textContent = `@keyframes smstunnel-spin { to { transform: rotate(360deg); } }`;
+  document.head.appendChild(style);
+  stylesInjected = true;
+}
+function SmsTunnelPairing({
+  apiBaseUrl,
+  getAuthHeaders,
+  labels = EN_LABELS,
+  onPaired,
+  onUnpaired,
+  showTestSms = true,
+  showServerUrlInput = true,
+  qrSize = 220,
+  routePrefix = "smstunnel",
+  className
+}) {
+  injectKeyframes();
+  const tunnel = useSmsTunnel({ apiBaseUrl, getAuthHeaders, routePrefix });
+  const [localServerUrl, setLocalServerUrl] = useState2("");
+  const [savingUrl, setSavingUrl] = useState2(false);
+  const [testPhone, setTestPhone] = useState2("");
+  const [testMsg, setTestMsg] = useState2("Test SMS");
+  const [testResult, setTestResult] = useState2(null);
+  const [sendingTest, setSendingTest] = useState2(false);
+  if (tunnel.serverUrl && !localServerUrl) {
+    setLocalServerUrl(tunnel.serverUrl);
+  }
+  const handleSaveUrl = async () => {
+    if (!localServerUrl.trim()) return;
+    setSavingUrl(true);
+    await tunnel.updateServerUrl(localServerUrl.trim().replace(/\/$/, ""));
+    setSavingUrl(false);
+  };
+  const handleUnpair = async () => {
+    if (!confirm(labels.unpairConfirm)) return;
+    await tunnel.unpair();
+    onUnpaired?.();
+  };
+  const handleGenerateQr = async () => {
+    await tunnel.generateQr();
+  };
+  const prevStatus = tunnel.status;
+  if (prevStatus === "paired" && tunnel.deviceName) {
+  }
+  const handleTestSms = async () => {
+    if (!testPhone.trim()) return;
+    setSendingTest(true);
+    setTestResult(null);
+    const result = await tunnel.sendTestSms(testPhone.trim(), testMsg);
+    setTestResult(result);
+    setSendingTest(false);
+  };
+  if (tunnel.status === "loading") {
+    return /* @__PURE__ */ jsx2("div", { style: styles.container, className, children: /* @__PURE__ */ jsx2("div", { style: styles.card, children: /* @__PURE__ */ jsx2("div", { style: { textAlign: "center", padding: "24px" }, children: /* @__PURE__ */ jsx2("span", { style: styles.spinner }) }) }) });
+  }
+  return /* @__PURE__ */ jsx2("div", { style: styles.container, className, children: /* @__PURE__ */ jsxs("div", { style: styles.card, children: [
+    /* @__PURE__ */ jsx2("div", { style: styles.title, children: labels.title }),
+    /* @__PURE__ */ jsx2("div", { style: styles.subtitle, children: labels.description }),
+    showServerUrlInput && /* @__PURE__ */ jsxs("div", { style: styles.section, children: [
+      /* @__PURE__ */ jsx2("label", { style: styles.label, children: labels.serverUrlLabel }),
+      /* @__PURE__ */ jsxs("div", { style: styles.inputRow, children: [
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            value: localServerUrl,
+            onChange: (e) => setLocalServerUrl(e.target.value),
+            placeholder: labels.serverUrlPlaceholder,
+            style: styles.input
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            style: {
+              ...styles.button,
+              opacity: savingUrl || !localServerUrl.trim() ? 0.5 : 1
+            },
+            onClick: handleSaveUrl,
+            disabled: savingUrl || !localServerUrl.trim(),
+            children: labels.saveButton
+          }
+        )
+      ] })
+    ] }),
+    tunnel.error && /* @__PURE__ */ jsx2("div", { style: styles.error, children: tunnel.error }),
+    tunnel.status === "paired" ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { style: styles.pairedBanner, children: [
+        /* @__PURE__ */ jsx2("div", { style: styles.pairedIcon, children: "\u2713" }),
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx2("div", { style: { fontSize: "14px", fontWeight: 600, color: "#166534" }, children: labels.pairedStatus }),
+          /* @__PURE__ */ jsxs("div", { style: { fontSize: "12px", color: "#16a34a" }, children: [
+            labels.deviceLabel,
+            ": ",
+            tunnel.deviceName || "Android Phone"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: handleUnpair,
+            style: styles.buttonDanger,
+            title: labels.unpairButton,
+            children: "\u2715"
+          }
+        )
+      ] }),
+      showTestSms && /* @__PURE__ */ jsxs("div", { style: styles.section, children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              fontSize: "13px",
+              fontWeight: 600,
+              color: "#374151",
+              marginBottom: "12px"
+            },
+            children: labels.testSmsTitle
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: styles.inputRow, children: [
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              value: testPhone,
+              onChange: (e) => setTestPhone(e.target.value),
+              placeholder: labels.testPhonePlaceholder,
+              style: styles.input
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              value: testMsg,
+              onChange: (e) => setTestMsg(e.target.value),
+              placeholder: labels.testMessagePlaceholder,
+              style: styles.input
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              style: {
+                ...styles.button,
+                opacity: sendingTest || !testPhone.trim() ? 0.5 : 1
+              },
+              onClick: handleTestSms,
+              disabled: sendingTest || !testPhone.trim(),
+              children: sendingTest ? /* @__PURE__ */ jsx2("span", { style: styles.spinner }) : labels.sendTestButton
+            }
+          )
+        ] }),
+        testResult && /* @__PURE__ */ jsx2("div", { style: testResult.success ? styles.success : styles.errorSmall, children: testResult.success ? `${labels.smsSentSuccess} (ID: ${testResult.messageId})` : `${labels.smsError}: ${testResult.error}` })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { style: styles.unpairedBanner, children: [
+        /* @__PURE__ */ jsx2("div", { style: { fontSize: "24px" }, children: "\u{1F4F1}" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx2("div", { style: { fontSize: "14px", fontWeight: 600, color: "#854d0e" }, children: labels.notPairedStatus }),
+          /* @__PURE__ */ jsx2("div", { style: { fontSize: "12px", color: "#a16207" }, children: labels.notPairedDescription })
+        ] })
+      ] }),
+      !tunnel.showQr ? /* @__PURE__ */ jsxs(
+        "button",
+        {
+          style: {
+            ...styles.button,
+            opacity: tunnel.generating ? 0.5 : 1
+          },
+          onClick: handleGenerateQr,
+          disabled: tunnel.generating,
+          children: [
+            tunnel.generating && /* @__PURE__ */ jsx2("span", { style: styles.spinner }),
+            labels.connectButton
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs("div", { style: styles.qrContainer, children: [
+        /* @__PURE__ */ jsx2("div", { style: { fontSize: "13px", color: "#4b5563", marginBottom: "12px" }, children: labels.scanQrPrompt }),
+        /* @__PURE__ */ jsx2("div", { style: styles.qrFrame, children: /* @__PURE__ */ jsx2(QrCodeCanvas, { value: tunnel.qrData, size: qrSize }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "8px",
+              fontSize: "12px",
+              color: "#9ca3af",
+              marginBottom: "12px"
+            },
+            children: [
+              /* @__PURE__ */ jsx2("span", { style: styles.spinner }),
+              labels.waitingForPairing
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2("button", { style: styles.buttonSecondary, onClick: tunnel.cancelPairing, children: labels.cancelButton })
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  EN_LABELS,
+  QrCodeCanvas,
+  RO_LABELS,
+  SmsTunnelPairing,
+  useSmsTunnel
+};
+//# sourceMappingURL=index.mjs.map