<!DOCTYPE html>
<html lang="en">

{{> head pageTitle="2FA" ogUrl="/mbkauthe/2fa"}}

<body>
    {{> header}}

    <style>
        .login-box {
            max-width: 450px;
            padding: 2.5rem;
            overflow: hidden;
        }
    </style>

    {{> showmessage}}

    <section class="login-container">

        {{> backgroundElements}}

        <div class="login-box">
            <h1 class="login-title">Two-Factor Authentication</h1>
            <p class="login-subtitle">Enter the 6-digit code from your authenticator app</p>

            <form id="loginForm" method="POST">
                <input type="hidden" name="_csrf" value="{{csrfToken}}">
                <div class="form-group token-container" id="tokenCon">
                    <input id="token" class="form-input" type="text" name="token" placeholder=" " pattern="\d{6}"
                        title="Token must be exactly 6 digits" maxlength="6" minlength="6" autocomplete="off" autofocus
                        required />
                    <label class="form-label">2FA Token</label>
                    <i class="fas fa-info-circle input-icon" onclick="tokeninfo()"></i>
                </div>

                <div class="trust-device-container">
                    <label class="trust-device-label">
                        <input type="checkbox" id="trustDevice" name="trustDevice" class="trust-device-checkbox" />
                        <span class="checkbox-custom"></span>
                        <span class="checkbox-text">Trust this device for {{DEVICE_TRUST_DURATION_DAYS}} days</span>
                    </label>
                    <i class="fas fa-info-circle trust-device-info" onclick="trustDeviceInfo()"
                        title="Learn more about trusted devices"></i>
                </div>

                <button type="submit" class="btn-login" id="loginButton">
                    <span id="loginButtonText">Verify</span>
                </button>

                <p class="terms-info">
                    By logging in, you agree to our
                    <a href="https://mbktech.org/PrivacyPolicy" target="_blank" class="terms-link">Terms &
                        Conditions</a>
                    and
                    <a href="https://mbktech.org/PrivacyPolicy" target="_blank" class="terms-link">Privacy Policy</a>.
                </p>
            </form>
        </div>
    </section>

    {{> versionInfo}}

    <script>
        function tokeninfo() {
            showMessage(`The 2FA token is a 6-digit code generated by your authenticator app (such as Google Authenticator, Microsoft Authenticator, or Authy). Enter the code shown in your app to complete login. If you have not set up 2FA or are having trouble, please contact support.`, `What is the 2FA token?`);
        }

        function trustDeviceInfo() {
            showMessage(`When you trust this device, you won't need to enter a 2FA code for {{DEVICE_TRUST_DURATION_DAYS}} days when logging in from this browser. This makes logging in faster while keeping your account secure. You can revoke trusted devices at any time from your account settings.`, `Trust This Device`);
        }

        document.getElementById('loginForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const token = document.getElementById('token').value;
            const trustDevice = document.getElementById('trustDevice').checked;
            const csrfToken = document.querySelector('input[name="_csrf"]').value;
            const loginButton = document.getElementById('loginButton');
            const loginButtonText = document.getElementById('loginButtonText');

            loginButton.disabled = true;
            loginButtonText.textContent = 'Verifying...';

            try {
                const response = await fetch('/mbkauthe/api/verify-2fa', {
                    method: 'POST',
                    credentials: 'include',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        token,
                        trustDevice,
                        _csrf: csrfToken
                    })
                });
                const data = await response.json();
                if (data.success) {
                    loginButtonText.textContent = 'Success! Redirecting...';
                    window.location.href = data.redirectUrl || '{{ customURL }}';
                } else {
                    loginButton.disabled = false;
                    loginButtonText.textContent = 'Verify';
                    showMessage(data.message, 'Error');
                }
            } catch (error) {
                loginButton.disabled = false;
                loginButtonText.textContent = 'Verify';
                showMessage('Failed to verify token. Please try again.', 'Error');
            }
        });

    </script>
</body>

</html>