stepan
a116b30df7
[ui] registrace.php – použit společný JS pro kontrolu hesla [ui] nove_heslo.php – použit společný JS pro kontrolu hesla, opraven odkaz na reset [ui] admin.php – použit společný JS pro kontrolu hesla [FÁZE-1][install] Vícekrokový průběh instalace, použit společný JS pro kontrolu hesla
90 lines
3.4 KiB
JavaScript
90 lines
3.4 KiB
JavaScript
// ============================================================
|
||
// 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);
|
||
|
||
})(); |