lightning-auth-and-payment/dist/components/AuthModal.js

Lightning Network authentication and payment processing library for modern web applications

"use strict";
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.AuthModal = AuthModal;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const lucide_react_1 = require("lucide-react");
function AuthModal({ isOpen, onClose, lnurl, error, isLoading, onRetry, qrCodeSize = 200, className = '', qrCodeComponent, }) {
    const [copied, setCopied] = (0, react_1.useState)(false);
    // Handle ESC key press
    (0, react_1.useEffect)(() => {
        const handleEscKey = (event) => {
            if (event.key === 'Escape') {
                onClose();
            }
        };
        if (isOpen) {
            document.addEventListener('keydown', handleEscKey);
            // Prevent body scroll when modal is open
            document.body.style.overflow = 'hidden';
        }
        return () => {
            document.removeEventListener('keydown', handleEscKey);
            document.body.style.overflow = 'unset';
        };
    }, [isOpen, onClose]);
    const handleCopyLink = async () => {
        if (lnurl) {
            try {
                await navigator.clipboard.writeText(lnurl);
                setCopied(true);
                setTimeout(() => setCopied(false), 2000);
            }
            catch (err) {
                console.error('Failed to copy link:', err);
            }
        }
    };
    if (!isOpen)
        return null;
    return ((0, jsx_runtime_1.jsx)("div", { className: `fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4 ${className}`, onClick: (e) => {
            if (e.target === e.currentTarget) {
                onClose();
            }
        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-slate-800 border border-slate-600 rounded-xl w-full max-w-sm mx-auto max-h-[80vh] overflow-y-auto shadow-2xl", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between p-3 sm:p-4 border-b border-slate-700/50", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-base sm:text-lg font-bold text-white", children: "Lightning Authentication" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs sm:text-sm text-slate-300", children: "Lightning Network" })] }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "p-2 text-slate-400 hover:text-white hover:bg-slate-700 rounded-lg transition-colors", "aria-label": "Close modal", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-5 h-5" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 sm:p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-center mb-6", children: error ? ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-12 h-12 bg-red-500/20 rounded-full flex items-center justify-center mx-auto mb-4", children: (0, jsx_runtime_1.jsx)("svg", { className: "w-6 h-6 text-red-500", fill: "currentColor", viewBox: "0 0 20 20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-red-400 font-medium", children: error }), onRetry && ((0, jsx_runtime_1.jsx)("button", { onClick: onRetry, className: "px-6 py-3 bg-orange-500 hover:bg-orange-600 text-white rounded-lg transition-colors font-medium", children: "Try Again" }))] })) : lnurl ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center space-x-2 text-orange-500", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-5 h-5 border-2 border-orange-500 border-t-transparent rounded-full animate-spin" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Waiting for authentication..." })] }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-12 h-12 bg-orange-500/20 rounded-full flex items-center justify-center mx-auto mb-4", children: (0, jsx_runtime_1.jsx)("div", { className: "w-6 h-6 border-2 border-orange-500 border-t-transparent rounded-full animate-spin" }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-slate-300 font-medium", children: "Generating login link..." }), (0, jsx_runtime_1.jsx)("p", { className: "text-slate-400 text-sm", children: "Please wait a moment" })] })) }), lnurl && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-slate-900/50 rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-medium text-white mb-2", children: "Authentication Instructions:" }), (0, jsx_runtime_1.jsxs)("ol", { className: "text-sm text-slate-300 space-y-1", children: [(0, jsx_runtime_1.jsx)("li", { children: "1. Scan the QR code with your Lightning wallet" }), (0, jsx_runtime_1.jsx)("li", { children: "2. Or copy the login link below" }), (0, jsx_runtime_1.jsx)("li", { children: "3. Confirm the authentication in your wallet" }), (0, jsx_runtime_1.jsx)("li", { children: "4. You'll be logged in automatically" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "bg-white p-3 sm:p-4 rounded-lg flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "text-center", children: qrCodeComponent ? (qrCodeComponent({ lnurl, size: Math.min(qrCodeSize, 160) })) : ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("img", { src: `https://api.qrserver.com/v1/create-qr-code/?size=${Math.min(qrCodeSize, 160)}x${Math.min(qrCodeSize, 160)}&data=${encodeURIComponent(lnurl)}`, alt: "Lightning Login QR Code", width: Math.min(qrCodeSize, 160), height: Math.min(qrCodeSize, 160), className: "mx-auto mb-2 rounded w-32 h-32 sm:w-40 sm:h-40" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-slate-500", children: "Scan with Lightning wallet" })] })) }) }), (0, jsx_runtime_1.jsx)("div", { className: "bg-slate-700/50 p-3 rounded-lg", children: (0, jsx_runtime_1.jsx)("code", { className: "text-xs text-slate-300 break-all block hyphens-auto overflow-wrap-anywhere", children: lnurl }) }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleCopyLink, className: "w-full px-4 py-3 bg-slate-600 hover:bg-slate-500 text-white rounded-lg transition-colors font-medium flex items-center justify-center space-x-2", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) }), (0, jsx_runtime_1.jsx)("span", { children: copied ? 'Copied!' : 'Copy Login Link' })] })] }))] })] }) }));
}
//# sourceMappingURL=AuthModal.js.map