Как реализовать двухэтапное согласие на персональные данные

// Пример базовой реализации
document.getElementById('submitBtn').addEventListener('click', function(e) {
    e.preventDefault(); // Предотвращаем немедленную отправку
    
    // Показываем модальное окно с информацией о данных
    const modal = document.getElementById('consentModal');
    modal.style.display = 'block';
    
    // Ждем подтверждения от пользователя
    document.getElementById('confirmConsent').addEventListener('click', function() {
        // Скрываем модальное окно
        modal.style.display = 'none';
        
        // Разрешаем отправку формы
        document.getElementById('myForm').submit();
    });
});

const ConsentForm = () => {
    const [showConsentModal, setShowConsentModal] = useState(false);
    const [isConsentConfirmed, setIsConsentConfirmed] = useState(false);
    
    const handleSubmit = (e) => {
        e.preventDefault();
        setShowConsentModal(true);
    };
    
    const handleConsentConfirm = () => {
        setIsConsentConfirmed(true);
        setShowConsentModal(false);
        // Отправка формы
        document.getElementById('myForm').submit();
    };
    
    return (
        <form id="myForm" onSubmit={handleSubmit}>
            {/* Поля формы */}
            <button type="submit">Отправить</button>
            
            {showConsentModal && (
                <div className="consent-modal">
                    <h3>Согласие на обработку персональных данных</h3>
                    <p>Ваши данные будут использоваться для...</p>
                    <button onClick={handleConsentConfirm}>Я согласен</button>
                </div>
            )}
        </form>
    );
};

# Пример на Python (Flask)
@app.route('/submit_form', methods=['POST'])
def submit_form():
    # Проверяем наличие согласия в сессии или скрытом поле
    if not session.get('consent_confirmed'):
        return redirect('/form?error=no_consent')
    
    # Обрабатываем данные формы
    # ...
    
    return 'Форма успешно отправлена'

<!-- Универсальный компонент согласия -->
<div class="consent-component">
    <div class="form-container">
        <!-- Исходная форма -->
        <form id="originalForm">
            <!-- Поля формы -->
            <button type="submit" class="submit-btn">Отправить</button>
        </form>
    </div>
    
    <!-- Модальное окно согласия -->
    <div class="consent-modal" style="display: none;">
        <div class="modal-content">
            <h3>Согласие на обработку персональных данных</h3>
            <div class="data-info">
                <p><strong>Данные, которые собираются:</strong></p>
                <ul>
                    <li>ФИО</li>
                    <li>Контактный телефон</li>
                    <li>Email</li>
                    <li>Дополнительная информация</li>
                </ul>
            </div>
            <div class="purpose-info">
                <p><strong>Цель обработки:</strong> Предоставление услуг и поддержка связи</p>
            </div>
            <div class="consent-actions">
                <button class="confirm-btn">Я согласен</button>
                <button class="cancel-btn">Отмена</button>
            </div>
        </div>
    </div>
</div>

// Глобальный обработчик для всех форм
document.addEventListener('DOMContentLoaded', function() {
    const forms = document.querySelectorAll('form');
    
    forms.forEach(form => {
        const submitBtn = form.querySelector('button[type="submit"]');
        
        if (submitBtn) {
            submitBtn.addEventListener('click', function(e) {
                e.preventDefault();
                
                // Проверяем, есть ли уже согласие
                if (form.dataset.consentConfirmed) {
                    form.submit();
                    return;
                }
                
                // Показываем модальное окно
                showConsentModal(form);
            });
        }
    });
});

function showConsentModal(targetForm) {
    // Создаем и показываем модальное окно
    const modal = createConsentModal();
    document.body.appendChild(modal);
    
    // Обработчик подтверждения
    modal.querySelector('.confirm-btn').addEventListener('click', function() {
        targetForm.dataset.consentConfirmed = 'true';
        modal.remove();
        targetForm.submit();
    });
    
    // Обработчик отмены
    modal.querySelector('.cancel-btn').addEventListener('click', function() {
        modal.remove();
    });
}

<!-- Шаблон модального окна -->
<template id="consentModalTemplate">
    <div class="consent-overlay">
        <div class="consent-modal">
            <div class="modal-header">
                <h2>Согласие на обработку персональных данных</h2>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <p class="consent-text">
                    Нажимая кнопку "Я согласен", Вы даете свое согласие на обработку 
                    Ваших персональных данных в соответствии с Федеральным законом №152-ФЗ 
                    "О персональных данных" и подтверждаете, что ознакомлены с 
                    <a href="/privacy">Политикой конфиденциальности</a>.
                </p>
                <div class="data-details">
                    <h3>Персональные данные, которые мы собираем:</h3>
                    <ul>
                        <li>Фамилия, имя, отчество</li>
                        <li>Контактный телефон</li>
                        <li>Электронная почта</li>
                        <li>Дополнительная информация, указанная в форме</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button class="confirm-consent">Я согласен</button>
                <button class="decline-consent">Отмена</button>
            </div>
        </div>
    </div>
</template>

// Автоматическое добавление согласия к существующим формам
function autoAddConsentToForms() {
    const forms = document.querySelectorAll('form');
    
    forms.forEach(form => {
        if (form.dataset.consentAdded) return;
        
        // Запрещаем прямую отправку
        form.addEventListener('submit', function(e) {
            if (!form.dataset.consentConfirmed) {
                e.preventDefault();
                showConsentModal(form);
            }
        });
        
        form.dataset.consentAdded = 'true';
    });
}

// Запускаем при загрузке страницы
document.addEventListener('DOMContentLoaded', autoAddConsentToForms);

// Пример тестирования с Jest
describe('Consent Form', () => {
    test('should show consent modal on form submit', () => {
        // Arrange
        document.body.innerHTML = `
            <form id="testForm">
                <input type="text" name="name">
                <button type="submit">Отправить</button>
            </form>
        `;
        
        // Act
        const form = document.getElementById('testForm');
        const submitBtn = form.querySelector('button[type="submit"]');
        submitBtn.click();
        
        // Assert
        expect(document.querySelector('.consent-modal')).toBeInTheDocument();
    });
    
    test('should submit form after consent confirmation', () => {
        // Arrange
        // ... similar setup
        
        // Act
        submitBtn.click();
        confirmBtn.click();
        
        // Assert
        expect(formSubmitSpy).toHaveBeenCalled();
    });
});