Lockscreen lock screen

Question

It is possible to create a lockscreen in JS+HTML+CSS with the same blocking functionality as in Windows? I think about doing this in the web system that I’m doing.

Answer 1

Yes, it is possible. Using the method setTimeout of Javascript you can program so that the screen lock runs at the given time, and also created the function to "restart" the time if the user is "active" on the site, through the methods onclick and onmousemove.

Well, I made an example using Javascript+jQuery, and also one with Javascript pure:

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 want to see an example: Jsfiddle example

The password is Swordfish

Of course you would have to create some kind of server-side validation so that the user could not edit through the console. I think the simplest would be to log on from the user after the predetermined time.