webpass/templates/breach.html

{% extends "base.html" %}
{% block title %}Breach Checker{% endblock %}
{% block page_title %}OSINT Data Watch{% endblock %}

{% block content %}
<div class="row justify-content-center mt-5">
    <div class="col-lg-6 fade-in-up">
        <div class="cyber-card p-5">
            <h3 class="text-danger mb-4 text-center"><i class="bi bi-shield-lock-fill me-2"></i>Have You Been Pwned?</h3>
            <p class="text-muted text-center mb-4">
                We search 11 Billion leaked records. Your password is <strong>never sent</strong> to us or the database (we use K-Anonymity Hashing).
            </p>

            <div class="mb-3">
                <label class="form-label text-accent">Test Password</label>
                <div class="input-group">
                    <input type="password" id="pwInput" class="form-control" placeholder="Enter a password...">
                    <button class="btn btn-outline-secondary" type="button" onclick="togglePw()">
                        <i class="bi bi-eye"></i>
                    </button>
                </div>
            </div>

            <button class="btn btn-outline-danger w-100 py-3 mb-4" onclick="checkBreach()">
                <i class="bi bi-search me-2"></i>Run OSINT Check
            </button>

            <div id="result-safe" class="d-none alert alert-success text-center fade-in-up">
                <i class="bi bi-check-circle-fill fs-1"></i><br>
                <strong>Safe!</strong><br>
                This password was not found in any known data breaches.
            </div>

            <div id="result-leak" class="d-none alert alert-danger text-center fade-in-up">
                <i class="bi bi-exclamation-octagon-fill fs-1"></i><br>
                <strong>COMPROMISED!</strong><br>
                This password appears in <span id="leak-count" class="fw-bold fs-4">0</span> known data breaches.<br>
                Change it immediately.
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function togglePw() {
    const x = document.getElementById("pwInput");
    x.type = x.type === "password" ? "text" : "password";
}

async function checkBreach() {
    const pw = document.getElementById("pwInput").value;
    if (!pw) return;

    const btn = document.querySelector('button[onclick="checkBreach()"]');
    const originalText = btn.innerHTML;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Scanning Dark Web...';
    btn.disabled = true;

    try {
        const res = await fetch("{{ url_for('tools.breach_check') }}", {
            method: "POST",
            headers: { 
                "Content-Type": "application/json",
                "X-CSRFToken": "{{ csrf_token() }}"
            },
            body: JSON.stringify({ password: pw })
        });
        
        const data = await res.json();
        
        document.getElementById("result-safe").classList.add("d-none");
        document.getElementById("result-leak").classList.add("d-none");

        if (data.leaked) {
            document.getElementById("leak-count").textContent = data.count.toLocaleString();
            document.getElementById("result-leak").classList.remove("d-none");
        } else {
            document.getElementById("result-safe").classList.remove("d-none");
        }

    } catch (e) {
        alert("System Error: " + e);
    }

    btn.innerHTML = originalText;
    btn.disabled = false;
}
</script>
{% endblock %}