Inloggen met wachtwoord vergeten Nieuw

<!-- Inloggen met wachtwoord vergeten · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ilw"><div class="ilw__in">
<section class="ilw__v" data-v="in">
<h3 class="ilw__h" tabindex="-1">Inloggen bij Mijn Dossier</h3>
<p class="ilw__sub">Administratiekantoor Van Dijk, Zwolle</p>
<div class="ilw__alert" role="alert" hidden></div>
<form class="ilw__form" novalidate>
<div class="ilw__fld"><label class="ilw__l" for="ilw-e">E-mailadres</label><input class="ilw__i ilw__e" id="ilw-e" type="email" autocomplete="username" aria-describedby="ilw-ee"><p class="ilw__err" id="ilw-ee"></p></div>
<div class="ilw__fld"><div class="ilw__row"><label class="ilw__l" for="ilw-p">Wachtwoord</label><button class="ilw__link ilw__forgot" type="button">Wachtwoord vergeten?</button></div>
<div class="ilw__pw"><input class="ilw__i ilw__p" id="ilw-p" type="password" autocomplete="current-password" aria-describedby="ilw-pe ilw-caps"><button class="ilw__show" type="button" aria-pressed="false">Toon</button></div>
<p class="ilw__caps" id="ilw-caps" hidden>Caps Lock staat aan</p><p class="ilw__err" id="ilw-pe"></p></div>
<button class="ilw__btn" type="submit">Inloggen</button>
</form>
</section>
<section class="ilw__v" data-v="reset" hidden>
<h3 class="ilw__h" tabindex="-1">Wachtwoord vergeten</h3>
<p class="ilw__sub">Vul je e-mailadres in. We sturen je een link om een nieuw wachtwoord te kiezen.</p>
<form class="ilw__form ilw__rform" novalidate>
<div class="ilw__fld"><label class="ilw__l" for="ilw-r">E-mailadres</label><input class="ilw__i ilw__r" id="ilw-r" type="email" autocomplete="email" aria-describedby="ilw-re"><p class="ilw__err" id="ilw-re"></p></div>
<button class="ilw__btn" type="submit">Stuur herstellink</button>
</form>
<button class="ilw__link ilw__back" type="button">Terug naar inloggen</button>
</section>
<section class="ilw__v" data-v="sent" hidden>
<h3 class="ilw__h" tabindex="-1">Kijk in je mailbox</h3>
<p class="ilw__sub ilw__sentmsg"></p>
<p class="ilw__sub">Niets ontvangen? Kijk in je map met ongewenste mail of vraag de link over tien minuten opnieuw aan.</p>
<button class="ilw__link ilw__back" type="button">Terug naar inloggen</button>
</section>
<section class="ilw__v" data-v="ok" hidden>
<h3 class="ilw__h" tabindex="-1">Welkom terug, Sanne</h3>
<p class="ilw__sub">Je aangifte inkomstenbelasting 2025 staat klaar om te controleren. Er wachten 2 documenten op je handtekening.</p>
<button class="ilw__btn ilw__out" type="button">Uitloggen</button>
</section>
</div></div>
</div>

/* Inloggen met wachtwoord vergeten · NedDev · eigen werk. */
.ilw{position:absolute;inset:0;overflow:auto;display:flex;padding:14px;box-sizing:border-box;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a}
.ilw *,.ilw *::before,.ilw *::after{box-sizing:border-box}
.ilw [hidden]{display:none!important}
.ilw__in{margin:auto;width:100%;max-width:340px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px;padding:16px}
.ilw__h{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;outline:none}
.ilw__sub{margin:3px 0 10px;font-size:13px;line-height:1.4;color:#4a4a4a}
.ilw__alert{margin:0 0 10px;padding:8px 10px;border-left:3px solid #B42318;background:#fdf1ef;font-size:13px;line-height:1.4;color:#7a1610}
.ilw__alert .ilw__link{color:#7a1610}
.ilw__fld{margin-bottom:9px}
.ilw__row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ilw__l{display:block;font-size:13px;font-weight:600;margin-bottom:4px}
.ilw__i{display:block;width:100%;height:36px;padding:0 10px;font:400 14px 'Switzer',sans-serif;color:#0a0a0a;background:#fff;border:1px solid #8c8c8c;border-radius:4px;transition:border-color .15s,box-shadow .15s}
.ilw__i:hover{border-color:#0a0a0a}
.ilw__i:focus-visible{outline:none;border-color:#0a0a0a;box-shadow:0 0 0 3px rgba(245,72,15,.35)}
.ilw__i[aria-invalid="true"]{border-color:#B42318}
.ilw__pw{position:relative}
.ilw__pw .ilw__i{padding-right:60px}
.ilw__show{position:absolute;right:4px;top:4px;height:28px;padding:0 9px;border:0;border-radius:4px;background:#f4f3f1;font:600 12.5px 'Switzer',sans-serif;color:#0a0a0a;cursor:pointer}
.ilw__show:hover{background:#e7e4df}
.ilw__err{margin:4px 0 0;font-size:12.5px;color:#B42318;line-height:1.35}
.ilw__err:empty{display:none}
.ilw__caps{margin:4px 0 0;font-size:12.5px;color:#8A4B00}
.ilw__link{border:0;background:none;padding:4px 0;min-height:24px;font:500 13px 'Switzer',sans-serif;color:#0a0a0a;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ilw__link:hover{text-decoration-thickness:2px}
.ilw__btn{width:100%;height:40px;margin-top:4px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 14px 'Switzer',sans-serif;cursor:pointer;transition:background-color .15s}
.ilw__btn:hover{background:#2a2a2a}
.ilw__btn:active{transform:translateY(1px)}
.ilw__btn[aria-busy="true"]{background:#4a4a4a;cursor:progress}
.ilw__back{margin-top:8px}
.ilw__show:focus-visible,.ilw__link:focus-visible,.ilw__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.ilw__v{animation:ilw-in .25s ease}
@keyframes ilw-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ilw *{transition:none!important;animation:none!important}}

// Inloggen met wachtwoord vergeten · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ilw');if(!w)return;
var sfx='-'+Math.random().toString(36).slice(2,7);
w.querySelectorAll('[id]').forEach(function(el){el.id=el.id+sfx;});
w.querySelectorAll('[for]').forEach(function(el){el.setAttribute('for',el.getAttribute('for')+sfx);});
w.querySelectorAll('[aria-describedby]').forEach(function(el){el.setAttribute('aria-describedby',el.getAttribute('aria-describedby').split(' ').map(function(x){return x+sfx;}).join(' '));});
var views=w.querySelectorAll('.ilw__v'),alert=w.querySelector('.ilw__alert'),e=w.querySelector('.ilw__e'),p=w.querySelector('.ilw__p'),r=w.querySelector('.ilw__r'),caps=w.querySelector('.ilw__caps'),tries=3,PW='Zwolle2026';
var RE=/^[^\s@]+@[^\s@]+\.[a-z]{2,}$/i;
function show(v){views.forEach(function(s){s.hidden=s.getAttribute('data-v')!==v;});var h=w.querySelector('[data-v="'+v+'"] .ilw__h');if(h)h.focus();}
function err(inp,msg){var el=w.querySelector('#'+inp.getAttribute('aria-describedby').split(' ')[0]);el.textContent=msg||'';if(msg)inp.setAttribute('aria-invalid','true');else inp.removeAttribute('aria-invalid');return !msg;}
function ce(){var v=e.value.trim();return err(e,!v?'Vul je e-mailadres in':!RE.test(v)?'Dit lijkt geen e-mailadres, bijvoorbeeld naam@voorbeeld.nl':'');}
function cp(){return err(p,p.value?'':'Vul je wachtwoord in');}
e.addEventListener('blur',function(){if(e.value)ce();});e.addEventListener('input',function(){if(e.getAttribute('aria-invalid'))ce();});
p.addEventListener('input',function(){if(p.getAttribute('aria-invalid'))cp();});
function capsChk(ev){if(ev.getModifierState)caps.hidden=!ev.getModifierState('CapsLock');}
p.addEventListener('keyup',capsChk);p.addEventListener('keydown',capsChk);p.addEventListener('blur',function(){caps.hidden=true;});
var sb=w.querySelector('.ilw__show');sb.addEventListener('click',function(){var on=p.type==='password';p.type=on?'text':'password';sb.textContent=on?'Verberg':'Toon';sb.setAttribute('aria-pressed',on);sb.setAttribute('aria-label',on?'Wachtwoord verbergen':'Wachtwoord tonen');});
sb.setAttribute('aria-label','Wachtwoord tonen');
var lf=w.querySelector('[data-v="in"] .ilw__form'),lb=lf.querySelector('.ilw__btn');
lf.addEventListener('submit',function(ev){ev.preventDefault();if(lb.getAttribute('aria-busy')==='true')return;alert.hidden=true;
 var a=ce(),b=cp();if(!a||!b){(a?p:e).focus();return;}
 if(tries<=0){alert.hidden=false;return;}
 lb.setAttribute('aria-busy','true');lb.textContent='Bezig met inloggen';
 setTimeout(function(){lb.removeAttribute('aria-busy');lb.textContent='Inloggen';
  if(p.value===PW){tries=3;show('ok');return;}
  tries--;alert.hidden=false;
  if(tries>0){alert.innerHTML='Deze combinatie van e-mailadres en wachtwoord kennen we niet. Nog '+tries+(tries===1?' poging':' pogingen')+' voordat we inloggen 15 minuten blokkeren.';p.value='';p.focus();}
  else{alert.innerHTML='Inloggen is 15 minuten geblokkeerd. Je kunt wel direct <button type="button" class="ilw__link ilw__alink">een nieuw wachtwoord aanvragen</button>.';alert.querySelector('.ilw__alink').addEventListener('click',goReset);alert.querySelector('.ilw__alink').focus();}
 },700);});
function goReset(){r.value=e.value.trim();err(r,'');show('reset');}
w.querySelector('.ilw__forgot').addEventListener('click',goReset);
w.querySelectorAll('.ilw__back').forEach(function(b){b.addEventListener('click',function(){show('in');});});
w.querySelector('.ilw__rform').addEventListener('submit',function(ev){ev.preventDefault();var v=r.value.trim();
 if(!err(r,!v?'Vul je e-mailadres in':!RE.test(v)?'Dit lijkt geen e-mailadres, bijvoorbeeld naam@voorbeeld.nl':'')){r.focus();return;}
 w.querySelector('.ilw__sentmsg').textContent='Als er een account bestaat voor '+v+', ontvang je binnen 5 minuten een link. Die werkt 1 uur.';show('sent');});
w.querySelector('.ilw__out').addEventListener('click',function(){p.value='';alert.hidden=true;show('in');});
}
init(document.querySelector('.jouw-container'));