Скрыть элемент DIV с паролем

Question

У меня есть элемент DIV, разделенный на 2 таблицы справа и слева. Левая таблица в порядке, но правильная таблица должна быть скрыта до тех пор, пока пользователь не вводит пароль или фразу, которая откроет/разблокирует эту таблицу.

Это не вопрос безопасности, а технический. Мне было предложено не сделать этот раздел доступным напрямую, но добавить какой-то общий пароль (без необходимости регистрации).

Я знаю, что клиентская сторона JS слаба для безопасности, но безопасность в этом случае не является проблемой. Какой мой лучший/самый эффективный вариант? Я пробовал решение лайтбокса, но я не могу понять, как показать DIV после ввода правильной фразы.

Answer 1

вот что я сделал:

http://jsfiddle.net/rp40rkpo/3/

#HIDDENDIV { 
 
    display: none; 
 
} 
 

 
#table td { 
 
    padding: 1em; 
 
    border: 1px solid black; 
 
} 
 

 

 
#table.show tr > *:nth-child(2) { 
 
    display: block; 
 
}

<div id="passw"> 
 
      <div> 
 
       (THE PASSWORD IS PASSWORD) <br /> 
 
       Enter the password to proceed: 
 
      </div> 
 
      <div> 
 
      
 
       <input type="password" id="password" onkeydown="if (event.keyCode == 13) document.getElementById('button').click()" /> <!-- IMPORTANT! this part is so if you click enter, it works. --> 
 
       </div> 
 
      
 

 
      <div> 
 
       <br/> 
 
       <input id="button" type="button" value="Login" onclick="if (document.getElementById('password').value == 'PASSWORD') { 
 
document.getElementById('table').classList.toggle('show'); document.getElementById('passw').style.display='none'; } 
 
else { alert('Invalid Password!'); password.setSelectionRange(0, password.value.length); } " /> 
 
      </div> 
 
<!-- it will autoselect wrong input if wrong --> 
 
    <br /><br /><br /> 
 
     </div> 
 

 
<table id="table"> 
 
    <tr> 
 
     <td>stuff</td> 
 
     <td id="HIDDENDIV" >hidden stuff</td> 
 
    </tr> 
 
</table>

Внимание: это не очень безопасно. Любой, кто знает, как управлять веб-инспектором, сможет просматривать скрытый div

Я сделал это, если вы ошиблись, он предупреждает «Неверный пароль» и выбирает ваш пароль, чтобы вы могли попробовать снова, не выбрав Это.

Кроме того, окно с паролем скрывается, когда вы его правильно.

Надеюсь, это поможет!