{
"id": "bhaskar/active-sessions",
"kind": "component",
"title": "Active Sessions",
"summary": "Signed-in devices list with live status, per-device sign out, a confirm step for signing out everywhere and smooth row exits.",
"author": "Admin",
"stars": 0,
"url": "https://ownlyplans.com/bhaskar/active-sessions/",
"stack": [
"CSS",
"HTML",
"JavaScript"
],
"tools": [
"claude-code",
"cursor",
"lovable"
],
"difficulty": "beginner",
"license": "mit",
"version": "1.0",
"overview": "Signed-in devices list with live status, per-device sign out, a confirm step for signing out everywhere and smooth row exits. Ported to plain HTML, CSS and JavaScript from ObsidianUI (github.com/Atharvsinh-codez/ObsidianUI), which is released under the MIT License. The original copyright notice is kept in the code.",
"steps": [],
"files": [],
"install": "",
"how_to_use": "Use the component code (html, css, js, or react) directly, or run the install command.",
"component": {
"category": "Feedback",
"html": "\n
\n
\n \n \n
Active sessions
Devices signed in to your account. Sign out any you don’t recognize.
'+\n (s.current?'':btn('ghost','Sign out','aria-label=\"Sign out '+esc(lab)+(s.location?', '+esc(s.location):'')+'\" data-revoke=\"'+s.id+'\"'))+'
'}\n function renderList(){list.innerHTML='';sorted().forEach(function(s){var li=document.createElement('li');li.dataset.session=s.id;li.innerHTML=rowHTML(s);list.appendChild(li)});renderEmpty()}\n function renderEmpty(){var o=others().length;if(o===0){empty.hidden=false;empty.querySelector('span').textContent=sessions.length?'No other sessions. You’re only signed in here.':'No active sessions.';if(sessions.length)empty.setAttribute('data-border','');restore.hidden=false}else{empty.hidden=true;restore.hidden=true}}\n function renderAction(focusConfirm){var o=others().length;if(o===0){action.innerHTML='';return}\n if(confirming){action.innerHTML='
Sign out '+o+' other '+noun(o)+'?'+btn('secondary','Cancel','data-cancel')+btn('danger','Sign out','data-confirm')+'
';var c=action.querySelector('[data-confirm]');c.focus({preventScroll:true})}\n else{action.innerHTML=btn('secondary','Sign out other sessions','data-others'+(Object.keys(pending).length?' disabled':''));if(focusConfirm)action.querySelector('button').focus({preventScroll:true})}}\n function exitRow(li,delay){return new Promise(function(res){if(reduce){li.animate([{opacity:1},{opacity:0}],{duration:120,delay:delay*500,fill:'forwards'}).onfinish=function(){li.remove();res()};return}\n var h=li.offsetHeight;li.animate([{opacity:1},{opacity:0}],{duration:140,delay:delay*1000,fill:'forwards'});li.animate([{transform:'none'},{transform:'translateX(8px)'}],{duration:180,delay:delay*1000,easing:'cubic-bezier(.55,0,1,.45)',fill:'forwards'});\n li.animate([{height:h+'px'},{height:'0px'}],{duration:260,delay:(delay+.06)*1000,easing:'cubic-bezier(.65,0,.35,1)',fill:'forwards'}).onfinish=function(){li.remove();res()}})}\n function revealEmpty(){if(others().length)return;renderEmpty();if(!reduce)empty.animate([{opacity:0,height:'0px'},{opacity:1,height:empty.scrollHeight+'px'}],{duration:440,easing:'cubic-bezier(.65,0,.35,1)',delay:200})}\n list.addEventListener('click',function(e){var b=e.target.closest('[data-revoke]');if(!b||b.hasAttribute('aria-busy'))return;var id=b.dataset.revoke,s=sessions.find(function(x){return x.id===id});var li=b.closest('li');li.querySelector('.op-as-errs').innerHTML='';\n pending[id]=1;setPending(b,true);renderAction();\n wait(650).then(function(){delete pending[id];var wasFocused=document.activeElement===b;var o=sorted().filter(function(x){return!x.current}),i=o.indexOf(s),next=(o[i+1]||o[i-1]);\n sessions=sessions.filter(function(x){return x.id!==id});sr.textContent='Signed out '+label(s);renderAction();\n exitRow(li,0).then(function(){revealEmpty();if(wasFocused){var nb=next&&list.querySelector('[data-revoke=\"'+next.id+'\"]');(nb||heading).focus({preventScroll:true})}})})});\n action.addEventListener('click',function(e){\n if(e.target.closest('[data-others]')){confirming=true;renderAction();return}\n if(e.target.closest('[data-cancel]')){if(revokingOthers)return;confirming=false;renderAction(true);return}\n var c=e.target.closest('[data-confirm]');if(c&&!revokingOthers){revokingOthers=true;setPending(c,true);action.querySelector('[data-cancel]').disabled=true;\n var targets=sorted().filter(function(x){return!x.current});targets.forEach(function(s){var rb=list.querySelector('[data-revoke=\"'+s.id+'\"]');if(rb)setPending(rb,true)});\n wait(900).then(function(){sessions=sessions.filter(function(x){return x.current});sr.textContent='Signed out '+targets.length+' other '+noun(targets.length);revokingOthers=false;confirming=false;\n var fades=action.firstElementChild;if(fades&&!reduce)fades.animate([{opacity:1},{opacity:0,transform:'translateY(-4px)',filter:'blur(2px)'}],{duration:120,fill:'forwards'});setTimeout(function(){renderAction()},120);\n Promise.all(targets.map(function(s,i){var li=list.querySelector('[data-session=\"'+s.id+'\"]');return li?exitRow(li,Math.min(i,8)*.045):null})).then(function(){revealEmpty();heading.focus({preventScroll:true})})})}});\n action.addEventListener('keydown',function(e){if(e.key==='Escape'&&confirming&&!revokingOthers){e.preventDefault();confirming=false;renderAction(true)}});\n restore.addEventListener('click',function(){sessions=demo(Date.now());confirming=false;renderList();renderAction()});\n setInterval(function(){if(!document.hidden)list.querySelectorAll('li').forEach(function(li){var s=sessions.find(function(x){return x.id===li.dataset.session});var t=li.querySelector('.op-as-status-time');if(s&&t)t.textContent='Last active '+rel(s.last,Date.now())})},30000);\n renderList();renderAction();\n});\n})();",
"react": "",
"dependencies": [],
"install": "",
"licence_notice": ""
}
}