Lock screen lockscreen

3

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.

    
asked by anonymous 19.05.2017 / 23:03

1 answer

4

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.

    
21.05.2017 / 20:06