Скрыть элемент 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>

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

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

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

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