Is it possible to create a lockscreen in JS + HTML + CSS with the same functionality as Windows locking? I think of doing this on the web system I'm doing.
Is it possible to create a lockscreen in JS + HTML + CSS with the same functionality as Windows locking? I think of doing this on the web system I'm doing.
Yes, it is possible. Using the% method of JavaScript you can program so that the screen lock is executed in the given time, and also created the function to "restart" the time if the user is "active" in the site , by methods setTimeout
and onclick
.
Well, I've done an example using JavaScript + jQuery , and also one with pure JavaScript :
HTML :
<div id="content">
AQUI ESTÁ SEU CONTEÚDO, AGUARDE 5 SEGUNDOS SEM MOVER O MOUSE E A TELA SERÁ TRAVADA.
</div>
<div id="lockscreen">
<div class="lock-msg">Insira sua senha para desbloquear a tela.</div>
<input class="lockscreen-password" type="password"></input>
<input type="submit" class="lockscreen-btn" value="DESBLOQUEAR"></input>
</div>
CSS :
#content {
position:absolute;
top:150px;
left:50px;
}
#lockscreen {
position:fixed;
z-index:999;
cursor:forbidden;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.9);
color:white;
display:none;
}
.lock-msg{
position:relative;
display:table;
margin:auto;
top:300px;
}
.lockscreen-password{
position:relative;
text-align:center;
display:table;
margin:auto;
top:350px;
}
.lockscreen-btn{
position:relative;
display:table;
margin:auto;
top:380px;
}
JavaScript + jQuery
locked = false;
function lockScreen() {
/*1000 ms = 1 seg*/
var timeout = 5000
if (locked == true) {
clearTimeout(lockscreen);
}
else {
lockscreen = setTimeout(function(){
$('#lockscreen').show();
locked = true;
clearTimeout(lockscreen);
}, timeout);
}
}
$(document).click(function(){
clearTimeout(lockscreen);
lockScreen();
});
$(document).mousemove(function(){
clearTimeout(lockscreen);
lockScreen();
});
lockScreen();
$('.lockscreen-btn').click(function(){
var lck_senha = $('.lockscreen-password').val();
if (lck_senha == "swordfish") {
locked = false;
$('.lockscreen-password').val("");
$('#lockscreen').hide();
}
});
Pure JavaScript :
locked = false;
function lockScreen() {
if (locked == true) {
clearTimeout(lockscreen);
}
else {
lockscreen = setTimeout(function(){
triggerToggle = document.getElementById("lockscreen");
triggerToggle.style.display = 'initial';
locked = true;
clearTimeout(lockscreen);
}, 5000);
}
}
document.onclick = triggerLockByClick;
function triggerLockByClick() {
clearTimeout(lockscreen);
lockScreen();
}
document.onmousemove = triggerLockByMove;
function triggerLockByMove() {
clearTimeout(lockscreen);
lockScreen();
};
document.querySelector('.lockscreen-btn').onclick = unlock;
function unlock() {
lck_senha = document.getElementsByClassName('lockscreen-password')[0].value;
if (lck_senha == "swordfish") {
document.getElementsByClassName('lockscreen-password').value = "";
triggerToggle.style.display = 'none';
locked = false;
}
}
lockScreen();
If you'd like to see an example: JSFiddle Example
The password is swordfish
Of course you would have to create some sort of server-side validation so that the user could not edit through the console. I think the simplest thing would be to do the LogOut of the user after the predetermined time.