protect-scr/dist/react/components.js

Comprehensive client-side security protection for React applications against screenshots, printing, and unauthorized access

import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { useSecurityShield, useRouteSecurityShield, useConditionalSecurityShield } from './hooks';
// Your components with proper interfaces
export const SecurityProvider = ({ children, config, enabled = true }) => {
    useConditionalSecurityShield(enabled, config);
    return _jsx(_Fragment, { children: children });
};
export const RouteSecurityProvider = ({ children, routes, config }) => {
    useRouteSecurityShield(routes, config);
    return _jsx(_Fragment, { children: children });
};
export const SecurePage = ({ children, config, fallback, onSecurityViolation }) => {
    const securityConfig = {
        ...(typeof config === 'string' ? {} : config),
        onProtectedActionAttempt: onSecurityViolation,
        onDevToolsDetected: () => onSecurityViolation === null || onSecurityViolation === void 0 ? void 0 : onSecurityViolation('devtools_detected'),
        onScreenshotAttempt: () => onSecurityViolation === null || onSecurityViolation === void 0 ? void 0 : onSecurityViolation('screenshot_attempt')
    };
    const { isEnabled } = useSecurityShield(typeof config === 'string' ? config : securityConfig);
    if (!isEnabled && fallback) {
        return _jsx(_Fragment, { children: fallback });
    }
    return _jsx(_Fragment, { children: children });
};
export const SecurityStatus = ({ className = '', showDetails = false }) => {
    const [securityState, setSecurityState] = useState({
        isEnabled: false,
        error: null
    });
    useEffect(() => {
        try {
            // For now, just show a static status to prevent hook issues
            setSecurityState({ isEnabled: false, error: null });
        }
        catch (error) {
            console.error('SecurityStatus error:', error);
            setSecurityState({ isEnabled: false, error: error.message });
        }
    }, []);
    const statusStyle = {
        padding: '8px 12px',
        borderRadius: '4px',
        fontSize: '12px',
        fontWeight: 'bold',
        display: 'inline-block',
        backgroundColor: securityState.isEnabled ? '#4CAF50' : '#f44336',
        color: 'white'
    };
    if (securityState.error) {
        return (_jsx("div", { className: className, style: { ...statusStyle, backgroundColor: '#ff9800' }, children: "\uD83D\uDEE1\uFE0F Security: ERROR" }));
    }
    return (_jsxs("div", { className: className, style: statusStyle, children: ["\uD83D\uDEE1\uFE0F Security: ", securityState.isEnabled ? 'ACTIVE' : 'INACTIVE', showDetails && (_jsx("div", { style: { fontSize: '10px', marginTop: '4px', opacity: 0.8 }, children: securityState.isEnabled ? 'Content protection enabled' : 'No protection active' }))] }));
};
export const SecurityToggle = ({ config, onToggle, className = '' }) => {
    const { isEnabled, enable, disable } = useSecurityShield(config);
    const handleToggle = () => {
        if (isEnabled) {
            disable();
            onToggle === null || onToggle === void 0 ? void 0 : onToggle(false);
        }
        else {
            enable();
            onToggle === null || onToggle === void 0 ? void 0 : onToggle(true);
        }
    };
    const buttonStyle = {
        padding: '8px 16px',
        border: 'none',
        borderRadius: '4px',
        cursor: 'pointer',
        fontSize: '14px',
        fontWeight: 'bold',
        backgroundColor: isEnabled ? '#f44336' : '#4CAF50',
        color: 'white',
        transition: 'background-color 0.3s'
    };
    return (_jsx("button", { className: className, style: buttonStyle, onClick: handleToggle, children: isEnabled ? '🔒 Disable Protection' : '🛡️ Enable Protection' }));
};
export const WatermarkOverlay = ({ children, text = 'PROTECTED CONTENT', opacity = 0.1, fontSize = 48, color = '#000000', rotation = -45 }) => {
    const containerStyle = {
        position: 'relative',
        width: '100%',
        height: '100%'
    };
    const watermarkStyle = {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        pointerEvents: 'none',
        zIndex: 9999,
        overflow: 'hidden',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: `${fontSize}px`,
        color: color,
        opacity: opacity,
        transform: `rotate(${rotation}deg)`,
        fontFamily: 'Arial, sans-serif',
        fontWeight: 'bold',
        userSelect: 'none',
        WebkitUserSelect: 'none',
        MozUserSelect: 'none',
        msUserSelect: 'none'
    };
    return (_jsxs("div", { style: containerStyle, children: [children, _jsx("div", { style: watermarkStyle, children: text })] }));
};
export const SecurityWarning = ({ message = 'Security violation detected', onClose, autoClose, className = '' }) => {
    useEffect(() => {
        if (autoClose && onClose) {
            const timer = setTimeout(onClose, autoClose);
            return () => clearTimeout(timer);
        }
    }, [autoClose, onClose]);
    const warningStyle = {
        position: 'fixed',
        top: '20px',
        right: '20px',
        backgroundColor: '#ff4444',
        color: 'white',
        padding: '12px 16px',
        borderRadius: '4px',
        boxShadow: '0 4px 8px rgba(0,0,0,0.2)',
        zIndex: 10000,
        fontSize: '14px',
        fontWeight: 'bold',
        maxWidth: '300px'
    };
    const closeButtonStyle = {
        background: 'none',
        border: 'none',
        color: 'white',
        fontSize: '16px',
        cursor: 'pointer',
        float: 'right',
        marginLeft: '8px'
    };
    return (_jsxs("div", { className: className, style: warningStyle, children: ["\uD83D\uDEA8 ", message, onClose && (_jsx("button", { style: closeButtonStyle, onClick: onClose, children: "\u00D7" }))] }));
};
//# sourceMappingURL=components.js.map