ric930-fake-smtp/web/app.js

'use strict';

document.addEventListener('DOMContentLoaded', function () {
    initializeEmailList();
});

function initializeEmailList() {
    var emailItems = document.querySelectorAll('.email-item');

    emailItems.forEach(function (item) {
        var summary = item.querySelector('.email-summary');
        var downloadButton = item.querySelector('.download-icon');

        if (summary) {
            summary.addEventListener('click', function (event) {
                if (event.target.closest('.download-icon')) {
                    return;
                }

                toggleEmail(item);
            });

            summary.addEventListener('keydown', function (event) {
                if (
                    event.key !== 'Enter' &&
                    event.key !== ' '
                ) {
                    return;
                }

                if (event.target.closest('.download-icon')) {
                    return;
                }

                event.preventDefault();

                toggleEmail(item);
            });
        }

        if (downloadButton) {
            downloadButton.addEventListener('click', function (event) {
                event.stopPropagation();

                var id = item.dataset.id;

                if (!id) {
                    console.error('Email ID is missing');
                    return;
                }

                downloadEmail(event, id);
            });
        }
    });
}

function toggleEmail(item) {
    var id = item.dataset.id;

    if (!id) {
        console.error('Email ID is missing');
        return;
    }

    var summary = item.querySelector('.email-summary');
    var detail = item.querySelector('.email-detail');
    var toggleIcon = item.querySelector('.toggle');
    var iframe = item.querySelector('.email-content-frame');

    if (!detail || !iframe) {
        console.error(
            'Email UI elements are missing for:',
            id
        );

        return;
    }

    var isHidden = detail.classList.contains('hidden');

    if (isHidden) {
        detail.classList.remove('hidden');

        if (toggleIcon) {
            toggleIcon.classList.add('rotated');
        }

        if (summary) {
            summary.setAttribute(
                'aria-expanded',
                'true'
            );
        }

        loadEmailContent(
            id,
            iframe
        );
    } else {
        detail.classList.add('hidden');

        if (toggleIcon) {
            toggleIcon.classList.remove('rotated');
        }

        if (summary) {
            summary.setAttribute(
                'aria-expanded',
                'false'
            );
        }
    }
}

function loadEmailContent(id, iframe) {
    if (iframe.dataset.loaded === 'true') {
        resizeIframe(iframe);
        return;
    }

    iframe.dataset.loading = 'true';

    fetch(
        '/api/view?id=' +
        encodeURIComponent(id),
        {
            method: 'GET',
            credentials: 'same-origin'
        }
    )
        .then(function (response) {
            if (!response.ok) {
                throw new Error(
                    'HTTP error ' +
                    response.status
                );
            }

            return response.text();
        })
        .then(function (data) {
            writeEmailToIframe(
                iframe,
                data
            );

            iframe.dataset.loaded = 'true';

            delete iframe.dataset.loading;

            resizeIframe(iframe);
        })
        .catch(function (error) {
            delete iframe.dataset.loading;

            writeErrorToIframe(
                iframe,
                error.message
            );

            console.error(
                'Failed to load email:',
                id,
                error
            );
        });
}

function writeEmailToIframe(iframe, emailBody) {
    var doc = iframe.contentWindow.document;

    doc.open();

    doc.write(
        '<!DOCTYPE html>' +
        '<html>' +
        '<head>' +
        '<meta charset="UTF-8">' +
        '<meta name="viewport" content="width=device-width, initial-scale=1.0">' +

        '<base target="_blank">' +

        '<style>' +

        'html {' +
            'margin: 0 !important;' +
            'padding: 0 !important;' +
            'background: white !important;' +
        '}' +

        'body {' +
            'margin: 0 !important;' +
            'padding: 15px !important;' +
            'font-family: monospace !important;' +
            'font-size: 12px !important;' +
            'line-height: 1.4 !important;' +
            'background: white !important;' +
            'color: #333 !important;' +
            'overflow-wrap: anywhere !important;' +
        '}' +

        '* {' +
            'box-sizing: border-box !important;' +
            'max-width: 100% !important;' +
        '}' +

        'img {' +
            'max-width: 100% !important;' +
            'height: auto !important;' +
        '}' +

        'table {' +
            'max-width: 100% !important;' +
        '}' +

        'pre {' +
            'margin: 0 !important;' +
            'font-family: inherit !important;' +
            'white-space: pre-wrap !important;' +
            'overflow-wrap: anywhere !important;' +
        '}' +

        'a {' +
            'color: #2563eb !important;' +
            'text-decoration: underline !important;' +
        '}' +

        'a:visited {' +
            'color: #7c3aed !important;' +
        '}' +

        'a:hover {' +
            'color: #1d4ed8 !important;' +
        '}' +

        '</style>' +

        '</head>' +

        '<body>' +
        emailBody +
        '</body>' +

        '</html>'
    );

    doc.close();
}

function writeErrorToIframe(iframe, message) {
    var doc = iframe.contentWindow.document;

    doc.open();

    doc.write(
        '<!DOCTYPE html>' +
        '<html>' +
        '<head>' +
        '<meta charset="UTF-8">' +
        '</head>' +
        '<body style="' +
            'padding:15px;' +
            'font-family:monospace;' +
            'font-size:12px;' +
            'color:#b91c1c;' +
        '">' +
        'Error loading email: ' +
        escapeHTML(message) +
        '</body>' +
        '</html>'
    );

    doc.close();

    resizeIframe(iframe);
}

function resizeIframe(iframe) {
    if (!iframe || !iframe.contentWindow) {
        return;
    }

    try {
        var doc = iframe.contentWindow.document;

        if (!doc || !doc.body) {
            return;
        }

        var height = Math.max(
            doc.body.scrollHeight,
            doc.documentElement
                ? doc.documentElement.scrollHeight
                : 0
        );

        iframe.style.height =
            Math.max(height + 20, 200) +
            'px';

        if (
            !iframe.dataset.resizeObserver &&
            typeof ResizeObserver !== 'undefined'
        ) {
            var observer = new ResizeObserver(
                function () {
                    try {
                        var body =
                            iframe.contentWindow.document.body;

                        var html =
                            iframe.contentWindow.document.documentElement;

                        var newHeight = Math.max(
                            body
                                ? body.scrollHeight
                                : 0,
                            html
                                ? html.scrollHeight
                                : 0
                        );

                        iframe.style.height =
                            Math.max(
                                newHeight + 20,
                                200
                            ) +
                            'px';
                    } catch (error) {

                    }
                }
            );

            observer.observe(doc.body);

            iframe.dataset.resizeObserver =
                'true';
        }
    } catch (error) {
        console.warn(
            'Cannot resize email iframe:',
            error
        );
    }
}

function downloadEmail(event, id) {
    var icon = event.currentTarget;

    if (!id) {
        return;
    }

    var originalTransform =
        icon.style.transform;

    var originalOpacity =
        icon.style.opacity;

    icon.style.transform =
        'scale(0.8)';

    icon.style.opacity =
        '0.5';

    window.location.href =
        '/api/download?id=' +
        encodeURIComponent(id);

    window.setTimeout(
        function () {
            icon.style.transform =
                originalTransform;

            icon.style.opacity =
                originalOpacity;
        },
        150
    );
}

function escapeHTML(value) {
    return String(value)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
}