-4

Как попросить пароль при нажатии на текст? Есть 2 страницы Главная и админка На главной есть текст "Панель администратора" при нажатии которой тебя перекидает на админку. Как сделать что бы при нажатии на клавишу просило пароль и если бы он был правильным перекидывало на админку, если нет то ошибку.

<!DOCTYPE html>
<html>
<head>
    <title>Тест</title>
</head>
<body>
<a href="admin.php">Панель администратора</a>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Тест</title>
</head>
<body>
<p>Админ</p>
</body>
</html>

2 ответа 2

5

План действий.

  1. Изучить HTML.
  2. Изучить PHP.
  3. Изучить javascript (можно поверхностно, на уровне пользования jQuery).
  4. Изучить CSS (тоже можно поверхностно).
  5. Перечитать задание (свой вопрос). Потому что на изучение всего этого времени уйдет немало, и изначальный вопрос забудется.
  6. Улыбнуться его наивной формулировке.
  7. Поверить в себя.
  8. Потратить 15 минут и таки сделать.
0

Довольно странно. Совершенно случайно наткнулся на этот вопрос. И смотрю, и как мне кажется, вполне себе нормальный вопрос. Но настолько заминусован, в отличие от единственного красноречивого соседнего ответа, словно требует написания целой диссертации. На что автору соседнего ответа, вероятнее всего находясь в растерянности, проще было составить некий план действий, согласно которому автор вопроса должен руководствоваться с целью решить свою задачу, которая заключается в написании всего лишь нескольких строчек незамысловатого кода. Конечно, похвально, автор соседнего ответа блеснул своими глубокими познаниями дела, что доказывает высокий рейтинг его ответа. Однако, спешу огорчить его и голосующих за этот блестящий ответ, что из восьми пунктов его плана, лишь три из них могут быть полезны автору вопроса, двумя из которых, судя по содержанию вопроса, он уже владеет.

По существу. На самом деле вопрос достаточно простой. В нем не говорится о том, как войти в систему управления сайтом (в админку). Доступ к администрированию сайта это немного другое направление и несомненно у автора вопроса проблем с этим не возникает. В вопросе же обозначена другая задача. Автору необходим лишь небольшой JavaScript-код, который будет разрешать или запрещать переход по ссылке на другую страницу с одним условием - ввод пароля (набор определенных символов) в простое текстовое поле. Более того, я не думаю, что этот пароль должен храниться где-то далеко, как-то генерироваться или быть в зашифрованном виде, потому что не имеет высокую степень важности.

Итак, план действий:

  1. Составляем HTML-код, который содержит:
  • ссылку для открытия диалогового окна;
  • код для структурирования и отображения диалогового окна, содержащего в себе текстовое поле для ввода пароля и другие сопутствующие ему элементы.
  1. Составляем CSS-код для описания внешнего вида элементов веб-страницы.
  2. Составляем функцию JavaScript-кода и условия, предназначенные для выполнения поставленной задачи: если посетитель сайта вводит верный пароль, то скрипт перенаправляет его на страницу администрирования сайта, если нет, то сообщает ему об ошибке.

Инструкция: При нажатии на ссылку открывается диалоговое окно с текстовым полем, куда мы вводим пароль. Верный пароль: pass

Реализация:

window.addEventListener('DOMContentLoaded', function() {
  function myPass() {
    let password = ['pass']; //Пароль
    let input = document.getElementById('input').value; //Текстовое поле
    let result = document.getElementById('result'); //Результат проверки
    //Если пароль введен неверно или поле пустое
    let assess = false.innerHTMl = ['Ошибка!']; //Выводим результат проверки
    //console.log('Мимо');
    for (let i = 0; i < password.length; i++) { //Проверяем на совпадение
      if (password[i] == input) {//Если пароль введен верно
        assess = true.innerHTMl = ['Открываем']; //Выводим результат проверки
        //console.log('Точно');
        //Переходим на станицу, с задержкой 2 секунды
        setTimeout(() => {location.href = "https://ru.stackoverflow.com/"}, 2000);
        break;
      }
    }
    result.innerHTML = assess //Результат проверки
  }
  document.getElementById('enter').addEventListener('click', myPass);
});
/*Ссылка*/
a.button {
  appearance: button; text-decoration: none; padding: 4px; border-radius: 4px;
  background: indianred; color: white; font-family: sans-serif;
}

/*Диалоговое окно*/
.modal {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  min-height: 100vh; pointer-events: none;
  background: rgba(0, 0, 0, 0.7); opacity: 0;
  transition: opacity 400ms ease-in;
}
.content-modal {
  display: flex; justify-content: space-between; flex-direction: column;
  padding: 10px; border-radius: 10px; width: 300px; background: white;
}
.modal:target {opacity: 1; pointer-events: auto;}
.close {align-self: flex-end; text-decoration: none; color: red; font-size: 14px;}
.content-modal input {outline: none; border: 1px solid gray; margin: 10px 0;}
.content-modal h4 {margin: 0;}
<!--Ссылка-->
<a href="#modal" class="button">Панель администратора</a>
<!--Диалоговое окно-->
<div id="modal" class="modal">
  <div class="content-modal">
    <h4>Пароль:</h4>
    <input type="text" placeholder="Пароль" autocomplete="off" class="input" id="input">
    <button id="enter">Перейти</button>
    <p id="result"></p><!--Результат проверки-->
    <a href="#close" class="close">Закрыть</a>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.