É possível criar uma lockscreen em JS+HTML+CSS com a mesma funcionalidade do bloqueio do Windows? Penso em fazer isso no sistema web que estou fazendo.
1 Resposta
Sim, é possível. Usando o método setTimeout
do JavaScript você consegue programar para que o bloqueio de tela seja executado no tempo determinado, e também criei a função pra "reiniciar" o tempo caso o usuário esteja "ativo" no site, através dos métodos onclick
e onmousemove
.
Bem, fiz um exemplo usando JavaScript+jQuery, e também um com JavaScript puro:
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();
}
});
Puro 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();
Caso queira ver um exemplo: Exemplo JSFiddle
A senha é swordfish
Claro que você teria que criar algum tipo de validação server-side para que o usuário não conseguisse editar pelo console. Eu acho que o mais simples seria fazer o LogOut do usuário depois do tempo pré-determinado.