<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cloudflare Tunnel Authentication Setup - PrintGuard</title>
    <link rel="stylesheet" href="{{ url_for('static', path='css/universal.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', path='css/cloudflare_setup.css') }}">
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js"></script>
</head>
<body class="warp-enrollment-page">
    <div class="universal-container">
        <div class="universal-card">
            <div class="warp-enrollment-header">
                <h1>🔒 Cloudflare Tunnel Authentication Setup</h1>
                <p>Setup authentication for your site so it can only be accessed by authorised emails.</p>
            </div>
            <div class="universal-section warp-device-info">
                <h3>Device Information</h3>
                <p><strong>Current Device:</strong> <span id="device-info">Detecting...</span></p>
            </div>
            <div class="universal-section warp-instructions">
                <h3>📋 Setup Instructions</h3>
                <div class="warp-step warp-setup-overview">
                    <h4>Initial Setup (First Time Only)</h4>
                    <p>If this is your first time setting up Cloudflare WARP with Zero Trust, follow these detailed steps:</p>
                    <ol class="setup-steps">
                        <li>All high-level instructions found here just in case: <a href="https://developers.cloudflare.com/cloudflare-one/setup/" target="_blank">https://developers.cloudflare.com/cloudflare-one/setup/</a></li>
                        <li>First setup a zero trust account and team name by going <a href="https://dash.cloudflare.com" target="_blank">dash.cloudflare.com</a> and clicking zero trust. Note that zero trust free plan is all you need.</li>
                        <li>Next, in zero trust (<a href="https://one.dash.cloudflare.com" target="_blank">one.dash.cloudflare.com</a>) go settings → authentication and under login methods, click add new and select one-time PIN - if instructions change, use this link <a href="https://developers.cloudflare.com/cloudflare-one/identity/one-time-pin/" target="_blank">https://developers.cloudflare.com/cloudflare-one/identity/one-time-pin/</a></li>
                        <li>Next define enrollment permissions. Go to the zero trust again, then settings → warp client. in device enrollment section click the manage button for device enrollment permissions.</li>
                        <li>Create new policy, then in the add policy page, in basic information section enter a policy name like WARP-login, action Allow and session duration same as application session timeout. In the add rules section, for the 'include' rule choose selector as emails and add the allowed emails to login (trusted emails) in the value field. <i><b>Note:</b> If you wish for your application to require users to be authenticated via the WARP client, add a 'require' rule to the policy with the 'Warp' selector.</i> Save.</li>
                        <li>Back on the device enrollment permissions page, press select existing policies and choose the one you just created. Then, in the login methods tab (still in device enrollment permissions page), under login methods, make sure 'Accept all available identity providers' is toggled off, One time PIN is ticked and 'Instant Auth' is toggled on. Click save.</li>
                        <li>Finally, from the <a href="https://one.dash.cloudflare.com" target="_blank">zero trust dashboard</a> visit access → Applications → Add an application. Give it an appropriate application name like 'printguard' and session duration of 1 week. Set the public hostname to the same as your cloudflare tunnel domain then, in the policies section, add your existing WARP-login policy that was created earlier.</li>
                    </ol>
                </div>
                <h3>Download and Connect WARP Client</h3>
                <p>If in the initial setup instructions you chose to require the WARP client to access printguard for added security, you will need to follow these steps for each device you wish to enroll. If your policy did not require WARP, you can skip this section.</p>
                <div class="warp-step">
                    <h4>Step 1: Download WARP Client</h4>
                    <p>First, download and install the Cloudflare WARP client for your device.</p>
                    <p>Click <a href="https://developers.cloudflare.com/warp-client/get-started/" class="download-btn" target="_blank">here</a> to download directly from the Cloudflare website.</p>
                    <p>Or use the buttons below to download the client for your specific platform (links from Cloudflare):</p>
                    <div class="download-links">
                        <a href="https://downloads.cloudflareclient.com/v1/download/windows/ga" class="download-btn windows" target="_blank">
                            🪟 Windows
                        </a>
                        <a href="https://downloads.cloudflareclient.com/v1/download/macos/ga" class="download-btn macos" target="_blank">
                            🍎 macOS
                        </a>
                        <a href="https://pkg.cloudflareclient.com/" class="download-btn linux" target="_blank">
                            🐧 Linux
                        </a>
                        <a href="https://apps.apple.com/us/app/cloudflare-one-agent/id6443476492" class="download-btn ios" target="_blank">
                            📱 iOS
                        </a>
                        <a href="https://play.google.com/store/apps/details?id=com.cloudflare.cloudflareoneagent" class="download-btn android" target="_blank">
                            🤖 Android
                        </a>
                    </div>
                </div>
                <div class="warp-step">
                    <h4>Step 2: Connect to Organization</h4>
                    <ol>
                        <li>Open the WARP client application</li>
                        <li>Navigate to Settings → Account → Login to Cloudflare Zero Trust</li>
                        <li>Enter your organization's team name: <code id="team-name">Loading...</code></li>
                        <li>Authenticate using your organization's login method</li>
                    </ol>
                </div>
                <div class="warp-step">
                    <h4>Step 3: Access the Site</h4>
                    <p>Once connected to your organization's WARP network, you should be able to access the PrintGuard site automatically through your Cloudflare domain.</p>
                </div>
            </div>
            <div class="message info">
                <h4>✅ Setup Complete!</h4>
                <p>If you've followed the setup steps correctly and are connected to your organization's Zero Trust, you should be able to access the PrintGuard application directly through your Cloudflare domain.</p>
                <p><strong>Your Cloudflare domain:</strong> <span id="site-domain">Loading...</span></p>
                <p>If your setup requires the WARP client, you will need to download and login to the WARP client on each device you wish to visit the site from. Otherwise, you can access the site directly through your Cloudflare domain and by logging in with one of your allowed email addresses.</p>
            </div>
            <div class="universal-section warp-share-section">
                <h3>📱 Share Link</h3>
                <p class="text-center mb-md" style="color: var(--text-secondary); font-size: var(--font-size-sm);">
                    Scan the QR code or share the link to open this page on your other devices.
                </p>
                <div class="warp-qr-container">
                    <canvas id="qr-code"></canvas>
                </div>
                <div class="code-block warp-share-url" id="enrollment-url">Loading...</div>
                <button class="btn secondary warp-copy-button" id="copy-url-btn">📋 Copy Link</button>
            </div>
        </div>
    </div>
    <script src="{{ url_for('static', path='js/cloudflare_setup.js') }}"></script>
</body>
</html>
