Embed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign in — TCG DATAE</title>
<style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

/* Hide ALL scrollbars across the entire page */
html, body, * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
/* Hide all scrollbars but keep scroll functionality */
    html { scrollbar-width: none; -ms-overflow-style: none; }
    html::-webkit-scrollbar { display: none; width: 0; height: 0; }
    body { scrollbar-width: none; -ms-overflow-style: none; }
    body::-webkit-scrollbar { display: none; width: 0; height: 0; }

    body {
        font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        color: #1e293b;
    }

    .login-container {
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
        max-width: 480px;
        width: 100%;
        overflow: hidden;
    }

    .login-header {
        background: linear-gradient(135deg, #1a3a6e 0%, #2d5099 100%);
        color: #ffffff;
        padding: 36px 32px 32px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .login-header::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 120px;
        height: 120px;
        background: #c9a961;
        opacity: 0.15;
        border-radius: 50%;
        transform: translate(40%, -40%);
    }

    .login-badge {
        display: inline-block;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: #c9a961;
        font-family: 'Courier New', monospace;
        margin-bottom: 8px;
    }

    .login-title {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -0.01em;
        position: relative;
        z-index: 1;
    }

    .login-subtitle {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.75);
        margin-top: 6px;
        font-weight: 400;
    }

    .login-body {
        padding: 36px 32px 32px;
    }

    .login-message {
        font-size: 14px;
        line-height: 1.6;
        color: #475569;
        margin-bottom: 24px;
    }

    .login-form {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .login-label {
        font-size: 12px;
        font-weight: 700;
        color: #1e293b;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-family: 'Courier New', monospace;
    }

    .login-input {
        font-family: 'Segoe UI', -apple-system, sans-serif;
        font-size: 15px;
        padding: 13px 14px;
        border: 2px solid #e2e8f0;
        border-radius: 8px;
        background: #f8fafc;
        color: #1e293b;
        outline: none;
        transition: all 0.15s;
    }

    .login-input:focus {
        border-color: #1a3a6e;
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(26, 58, 110, 0.1);
    }

    .login-input:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .login-button {
        font-family: 'Segoe UI', -apple-system, sans-serif;
        background: #1a3a6e;
        color: #ffffff;
        padding: 14px 24px;
        border: none;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.02em;
        cursor: pointer;
        transition: all 0.15s;
        margin-top: 6px;
    }

    .login-button:hover:not(:disabled) {
        background: #2d5099;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(26, 58, 110, 0.25);
    }

    .login-button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .login-button .spinner {
        display: none;
        width: 14px;
        height: 14px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: #ffffff;
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
        vertical-align: middle;
        margin-right: 8px;
    }

    .login-button.loading .spinner { display: inline-block; }

    @keyframes spin { to { transform: rotate(360deg); } }

    .login-status {
        margin-top: 20px;
        padding: 14px 16px;
        border-radius: 8px;
        font-size: 13px;
        line-height: 1.5;
        display: none;
    }

    .login-status.show { display: block; }

    .login-status.success {
        background: #ecfdf5;
        border-left: 4px solid #059669;
        color: #064e3b;
    }

    .login-status.error {
        background: #fef2f2;
        border-left: 4px solid #dc2626;
        color: #7f1d1d;
    }

    .login-status.info {
        background: #eff6ff;
        border-left: 4px solid #1a3a6e;
        color: #1e293b;
    }

    .login-status-title {
        font-weight: 700;
        margin-bottom: 4px;
    }

    .login-footer {
        padding: 20px 32px;
        background: #f8fafc;
        text-align: center;
        font-size: 11px;
        color: #94a3b8;
        font-family: 'Courier New', monospace;
        letter-spacing: 0.03em;
        line-height: 1.5;
        border-top: 1px solid #e2e8f0;
    }

    .verifying-container {
        text-align: center;
        padding: 40px 20px;
    }

    .verifying-spinner {
        width: 48px;
        height: 48px;
        border: 3px solid #e2e8f0;
        border-top-color: #1a3a6e;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        margin: 0 auto 20px;
    }

    .verifying-text {
        font-size: 16px;
        color: #475569;
        font-weight: 500;
    }
</style>
</head>
<body>

<div class="login-container">

    
    <div class="login-header">
        <div class="login-badge">TCG DATAE · Secure Access</div>
        <div class="login-title">Sign in</div>
        <div class="login-subtitle">The Law Office of Denny Borges PA</div>
    </div>

    
    <div class="login-body">

        
        <div id="request-state">
            <div class="login-message">
                Enter your work email and we'll send you a secure sign-in link.
                The link expires in 15 minutes.
            </div>

            <form class="login-form" id="login-form" onsubmit="return requestLink(event)">
                <label class="login-label" for="email-input">Email Address</label>
                <input
                    type="email"
                    id="email-input"
                    class="login-input"
                    placeholder="you@dennysborgespa.com"
                    autocomplete="email"
                    required
                    autofocus
                >
                <button type="submit" class="login-button" id="submit-btn">
                    <span class="spinner"></span>
                    <span class="btn-label">Send sign-in link →</span>
                </button>
            </form>

            <div class="login-status" id="status-msg"></div>
        </div>

        
        <div id="verifying-state" style="display: none;">
            <div class="verifying-container">
                <div class="verifying-spinner"></div>
                <div class="verifying-text" id="verifying-message">Verifying your sign-in link...</div>
            </div>
            <div class="login-status" id="verify-status"></div>
        </div>

    </div>

    
    <div class="login-footer">
        TCG DATAE · 11540 SW 5th Street, Miami, FL<br>
        1-888-815-7782 · info@dennysborgespa.com
    </div>

</div>

<script>
    // ============================================================
    // CONFIG
    // ============================================================
    const API_BASE = 'https://signings-api-production.up.railway.app';
    const PANEL_URL = 'https://tcgdatae.com/signings-html';

    // ============================================================
    // DETECT IF WE HAVE A TOKEN IN URL
    // ============================================================
    window.addEventListener('DOMContentLoaded', () => {
        const urlParams = new URLSearchParams(window.location.search);
        const token = urlParams.get('token');

        if (token) {
            // User came from the magic link email — verify automatically
            verifyToken(token);
        }
    });

    // ============================================================
    // REQUEST MAGIC LINK
    // ============================================================
    async function requestLink(event) {
        event.preventDefault();

        const emailInput = document.getElementById('email-input');
        const submitBtn = document.getElementById('submit-btn');
        const statusMsg = document.getElementById('status-msg');
        const email = emailInput.value.trim();

        if (!email) return false;

        // UI: loading state
        submitBtn.classList.add('loading');
        submitBtn.disabled = true;
        emailInput.disabled = true;
        submitBtn.querySelector('.btn-label').textContent = 'Sending...';
        statusMsg.classList.remove('show');

        try {
            const res = await fetch(API_BASE + '/auth/request-link', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                credentials: 'include',
                body: JSON.stringify({ email })
            });

            const data = await res.json();

            if (data.ok) {
                // Always success message (we never reveal if email exists)
                statusMsg.className = 'login-status show success';
                statusMsg.innerHTML = `
                    <div class="login-status-title">✓ Check your email</div>
                    If <strong>${escapeHtml(email)}</strong> has an account, a sign-in link has been sent.
                    Click the link in your email to continue. The link expires in 15 minutes.
                `;

                // Disable form (no need to resend)
                submitBtn.querySelector('.btn-label').textContent = 'Sent ✓';
            } else {
                throw new Error(data.error || 'Unknown error');
            }
        } catch (err) {
            console.error('Login request error:', err);
            statusMsg.className = 'login-status show error';
            statusMsg.innerHTML = `
                <div class="login-status-title">⚠ Something went wrong</div>
                Could not send sign-in link. Please try again or contact your supervisor.
            `;

            // Restore form
            submitBtn.classList.remove('loading');
            submitBtn.disabled = false;
            emailInput.disabled = false;
            submitBtn.querySelector('.btn-label').textContent = 'Send sign-in link →';
        }

        return false;
    }

    // ============================================================
    // VERIFY MAGIC LINK TOKEN
    // ============================================================
    async function verifyToken(token) {
        // Switch to verifying UI
        document.getElementById('request-state').style.display = 'none';
        document.getElementById('verifying-state').style.display = 'block';

        const verifyStatus = document.getElementById('verify-status');
        const verifyingMsg = document.getElementById('verifying-message');

        try {
            const res = await fetch(API_BASE + '/auth/verify/' + encodeURIComponent(token), {
                method: 'GET',
                credentials: 'include'
            });

            const data = await res.json();

            if (data.ok && data.user) {
                // Success — redirect to panel
                verifyingMsg.textContent = `Welcome back, ${data.user.full_name}!`;

                verifyStatus.className = 'login-status show success';
                verifyStatus.innerHTML = `
                    <div class="login-status-title">✓ Signed in successfully</div>
                    Redirecting to the panel...
                `;

                // Brief delay so user sees the success message
                setTimeout(() => {
                    window.location.href = PANEL_URL;
                }, 1200);

            } else {
                // Error — show message
                let errorMsg = '';
                let errorTitle = '⚠ Sign-in failed';

                switch (data.error) {
                    case 'LINK_EXPIRED':
                        errorTitle = '⏰ Link expired';
                        errorMsg = 'This sign-in link has expired. Please request a new one.';
                        break;
                    case 'LINK_ALREADY_USED':
                        errorTitle = '🔒 Link already used';
                        errorMsg = 'This sign-in link has already been used. Please request a new one.';
                        break;
                    case 'LINK_NOT_FOUND':
                        errorTitle = '❌ Invalid link';
                        errorMsg = 'This sign-in link is not valid. Please request a new one.';
                        break;
                    case 'USER_INACTIVE':
                        errorTitle = '🚫 Account inactive';
                        errorMsg = 'Your account is no longer active. Contact your supervisor.';
                        break;
                    default:
                        errorMsg = 'Could not verify the sign-in link. Please try requesting a new one.';
                }

                verifyingMsg.textContent = 'Verification failed';
                document.querySelector('.verifying-spinner').style.display = 'none';

                verifyStatus.className = 'login-status show error';
                verifyStatus.innerHTML = `
                    <div class="login-status-title">${errorTitle}</div>
                    ${errorMsg}
                    <div style="margin-top: 12px;">
                        <a href="https://tcgdatae.com/login" style="color: #1a3a6e; font-weight: 600; text-decoration: underline;">
                            Request a new sign-in link →
                        </a>
                    </div>
                `;
            }
        } catch (err) {
            console.error('Verify error:', err);
            verifyingMsg.textContent = 'Connection error';
            document.querySelector('.verifying-spinner').style.display = 'none';

            verifyStatus.className = 'login-status show error';
            verifyStatus.innerHTML = `
                <div class="login-status-title">⚠ Connection error</div>
                Could not connect to the server. Please check your internet connection and try again.
                <div style="margin-top: 12px;">
                    <a href="https://tcgdatae.com/login" style="color: #1a3a6e; font-weight: 600; text-decoration: underline;">
                        Try again →
                    </a>
                </div>
            `;
        }
    }

    // ============================================================
    // UTILITIES
    // ============================================================
    function escapeHtml(s) {
        return String(s)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');
    }
</script>

</body>
</html>

TCG DATAE

We empower law firms and corporate partners with precision-driven investigative services designed to uncover critical information, validate case data, and streamline legal processes with unmatched accuracy.

Backed by advanced technology and operational excellence, TCG DATAE ensures every assignment is handled with integrity, confidentiality, and measurable performance.