// ============================================================ // KONTROLA SÍLY HESLA // ============================================================ // Tento skript se stará o indikátor síly hesla a blokování // tlačítka odeslání formuláře. // // Předpoklady (musí být v HTML před načtením tohoto skriptu): // - načtena knihovna zxcvbn // - definovány proměnné AUTH_HESLO_MIN_SILA a AUTH_HESLO_MIN_DELKA // (vkládá je PHP přímo do stránky) // // Skript hledá na stránce prvky podle ID: // - input#heslo ... pole pro zadání hesla // - span#heslo-sila ... zobrazení síly hesla // - button#tlacitko-odeslat ... tlačítko pro odeslání // - span#tlacitko-duvod ... vysvětlení proč je tlačítko zakázané // ============================================================ (function () { // Popisky síly hesla (index = skóre zxcvbn 0–4) var POPISKY_SILY = [ 'Velmi slabé', 'Slabé', 'Průměrné', 'Silné', 'Velmi silné' ]; var inputHeslo = document.getElementById('heslo'); var spanSila = document.getElementById('heslo-sila'); var tlacitko = document.getElementById('tlacitko-odeslat'); var spanDuvod = document.getElementById('tlacitko-duvod'); // Pokud prvky na stránce nejsou (např. zobrazení úspěchu), // skript tiše skončí if (!inputHeslo || !spanSila || !tlacitko || !spanDuvod) { return; } function zkontrolujHeslo() { var hodnota = inputHeslo.value; // Prázdné heslo if (hodnota.length === 0) { spanSila.textContent = 'Síla hesla: zadej heslo'; tlacitko.disabled = true; spanDuvod.textContent = ' (čekám na zadání hesla)'; return; } // Kontrola minimální délky // AUTH_HESLO_MIN_DELKA je definována PHP přímo ve stránce if (hodnota.length < AUTH_HESLO_MIN_DELKA) { spanSila.textContent = 'Heslo je příliš krátké (' + hodnota.length + ' / ' + AUTH_HESLO_MIN_DELKA + ' znaků)'; tlacitko.disabled = true; spanDuvod.textContent = ' (heslo musí mít alespoň ' + AUTH_HESLO_MIN_DELKA + ' znaků)'; return; } // Kontrola síly přes zxcvbn var vysledek = zxcvbn(hodnota); var skore = vysledek.score; // 0–4 spanSila.textContent = 'Síla hesla: ' + POPISKY_SILY[skore] + ' (' + skore + '/4)' + ' · délka: ' + hodnota.length + ' znaků'; // Tlačítko je dostupné jen pokud jsou splněny obě podmínky: // 1) dostatečná délka (zkontrolována výše) // 2) dostatečná síla (zxcvbn skóre) if (skore >= AUTH_HESLO_MIN_SILA) { tlacitko.disabled = false; spanDuvod.textContent = ''; } else { tlacitko.disabled = true; spanDuvod.textContent = ' (heslo je příliš slabé, ' + 'potřebuji alespoň ' + AUTH_HESLO_MIN_SILA + '/4)'; } } // Spustíme kontrolu při každé změně hesla inputHeslo.addEventListener('input', zkontrolujHeslo); })();