Laboratorium siły hasła

<main class="password"><div><p class="note">Sprawdzanie hasła</p><h1>Wymagania<br>hasła.</h1><div class="rings" aria-hidden="true"><span></span><span></span><span></span><b>•••</b></div><p class="muted">Nie wpisuj prawdziwego hasła. Ta ocena sprawdza tylko proste reguły.</p></div><form id="password-form"><label for="password">Przykładowe hasło</label><div class="password-row"><input id="password" type="password" maxlength="128" autocomplete="new-password" aria-describedby="strength"><button id="reveal" type="button" class="secondary" aria-pressed="false">Pokaż</button></div><meter id="meter" min="0" max="4" value="0" aria-label="Spełnione wymagania"></meter><p id="strength" class="status" role="status">Wpisz przykładowe hasło</p><ul id="rules"><li data-rule="length">Co najmniej 12 znaków</li><li data-rule="case">Małe i wielkie litery</li><li data-rule="digit">Przynajmniej jedna cyfra</li><li data-rule="symbol">Przynajmniej jeden znak specjalny</li></ul><button type="button" data-demo-submit>Sprawdź wymagania</button><p id="status" role="status" class="status"></p></form></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;font:16px/1.45 system-ui,sans-serif;display:grid;align-content:center;color:#17212e;background:#f5f7fb}main{width:min(100%,850px);margin:auto}h1,h2,p{margin:0 0 16px}h1{font-size:clamp(26px,4vw,42px);line-height:1.1}h2{font-size:21px}label{display:block;font-weight:600;margin-bottom:6px}input,select,textarea,button{font:inherit;max-width:100%}input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=color]),select,textarea{width:100%;padding:10px 12px;background:#fff;color:#17212e;border:1px solid #748091;min-height:44px;border-radius:0}textarea{resize:vertical}button{min-height:44px;padding:10px 18px;border:1px solid currentColor;background:#17212e;color:white;cursor:pointer;border-radius:0}button:hover{filter:brightness(1.15)}button:disabled{cursor:default;opacity:.55}button.secondary{background:transparent;color:inherit}input[type=radio],input[type=checkbox]{width:20px;height:20px;vertical-align:middle;accent-color:var(--accent,#3155c7)}input[type=range]{width:100%;accent-color:var(--accent,#3155c7);min-height:32px}input[type=color]{width:100%;min-height:52px;cursor:pointer;background:transparent;border:1px solid currentColor}fieldset{border:0;padding:0;margin:0}legend{font-weight:600;margin-bottom:12px}output{display:block}small,.note{font-size:13px}p.note{margin:10px 0 0}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent,#3155c7);outline-offset:3px}[hidden]{display:none!important}.field{margin-bottom:16px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.status{min-height:24px;margin-top:14px;font-weight:600;overflow-wrap:anywhere}.muted{color:#4b5868}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:560px){body{padding:18px}.two{grid-template-columns:1fr}h1{font-size:29px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body{background:#13253c;color:#f7fbff;--accent:#74d1ff}.password{display:grid;grid-template-columns:1fr 1fr;gap:55px}.password .muted{color:#c0cfe0;font-size:14px}.password-row{display:flex;gap:8px}.password-row input{min-width:0}.password-row button{padding:8px 12px;white-space:nowrap}.password button{background:#d1eeff;color:#13253c}.password button.secondary{background:transparent;color:#fff}meter{width:100%;height:17px;margin-top:16px}#rules{padding:0;list-style:none;line-height:2;font-size:14px}#rules li:before{content:'○';padding-right:9px}#rules li.done{color:#97e9c1}#rules li.done:before{content:'✓'}.rings{position:relative;height:150px;max-width:240px;margin:18px 0}.rings span{position:absolute;border:2px solid #52799a;border-radius:50%;inset:0 36px}.rings span:nth-child(2){inset:20px 56px;border-color:#74d1ff}.rings span:nth-child(3){inset:40px 76px;border-color:#97e9c1}.rings b{position:absolute;inset:0;display:grid;place-items:center;font-size:25px}@media(max-width:560px){.password{grid-template-columns:1fr;gap:24px}.rings{display:none}}

(()=>{const q=s=>document.querySelector(s);const all=s=>[...document.querySelectorAll(s)];let score=0;const update=()=>{const v=q('#password').value;const rules={length:v.length>=12,case:/[a-z]/.test(v)&&/[A-Z]/.test(v),digit:/\d/.test(v),symbol:/[^\w\s]/.test(v)};score=Object.values(rules).filter(Boolean).length;q('#meter').value=score;q('#strength').textContent=['Wpisz przykładowe hasło','Słabe: spełniono 1 z 4 wymagań','Średnie: spełniono 2 z 4 wymagań','Dobre: spełniono 3 z 4 wymagań','Silne: spełniono 4 z 4 wymagań'][score];all('[data-rule]').forEach(e=>e.classList.toggle('done',rules[e.dataset.rule]));q('#status').textContent='';};q('#password').oninput=update;q('#reveal').onclick=()=>{const visible=q('#password').type==='password';q('#password').type=visible?'text':'password';q('#reveal').textContent=visible?'Ukryj':'Pokaż';q('#reveal').setAttribute('aria-pressed',String(visible))};q('#password-form').onsubmit=e=>{e.preventDefault();q('#status').textContent=score===4?'Wszystkie wymagania spełnione.':'Uzupełnij wymagania zaznaczone pustym kółkiem.';};all('form').forEach(form=>{const submit=form.querySelector('[data-demo-submit]');if(!submit)return;submit.addEventListener('click',()=>form.dispatchEvent(new Event('submit',{cancelable:true})));form.addEventListener('keydown',event=>{if(event.key==='Enter'&&!event.defaultPrevented&&event.target.matches('input:not([type=radio]):not([type=checkbox])')){event.preventDefault();submit.click();}})});})();