Форма забыл пароль html

Как сделать — форму входа

Узнать, как создать адаптивную форму входа с помощью CSS.

Форма входа

Нажмите на кнопку, чтобы открыть форму входа:

Создать форму входа

Шаг 1) Добавить HTML:

Добавить изображение внутри контейнера и добавьте входные данные (с соответствующей меткой) для каждого поля. Оберните элемент вокруг них, чтобы обработать ввод. Вы можете узнать больше о том, как обрабатывать входные данные в нашем учебникЕ PHP.

Пример

Шаг 2) Добавить CSS:

Пример

/* Окаймленная форма */
form border: 3px solid #f1f1f1;
>

/* Входы полной ширины */
input[type=text], input[type=password] width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
>

/* Установите стиль для всех кнопок */
button background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
>

/* Добавить эффект наведения для кнопок */
button:hover opacity: 0.8;
>

/* Дополнительный стиль для кнопки отмены (красный) */
.cancelbtn width: auto;
padding: 10px 18px;
background-color: #f44336;
>

/* Центрируйте изображение Аватара внутри этого контейнера */
.imgcontainer text-align: center;
margin: 24px 0 12px 0;
>

/* Аватар изображение */
img.avatar width: 40%;
border-radius: 50%;
>

/* Добавить отступы для контейнеров */
.container padding: 16px;
>

/* Текст «Забыли пароль» */
span.psw float: right;
padding-top: 16px;
>

/* Измените стили для кнопки span и cancel на очень маленьких экранах */
@media screen and (max-width: 300px) span.psw display: block;
float: none;
>
.cancelbtn width: 100%;
>
>

Создать модальную форму входа

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

/* Модальный (фон) */
.modal display: none; /* Скрыто по умолчанию */
position: fixed; /* Оставаться на месте */
z-index: 1; /* Сидеть на вершине */
left: 0;
top: 0;
width: 100%; /* Полная ширина */
height: 100%; /* Полный рост */
overflow: auto; /* Включите прокрутку, если это необходимо */
background-color: rgb(0,0,0); /* Цвет запасной вариант */
background-color: rgba(0,0,0,0.4); /* Черный с непрозрачностью */
padding-top: 60px;
>

/* Модальное Содержание/коробка */
.modal-content background-color: #fefefe;
margin: 5px auto; /* 15% сверху и по центру */
border: 1px solid #888;
width: 80%; /* Может быть больше или меньше, в зависимости от размера экрана */
>

/* Кнопка закрытия */
.close /* Расположите его в правом верхнем углу за пределами модели */
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
>

/* Кнопка закрытия при наведении курсора мыши */
.close:hover,
.close:focus color: red;
cursor: pointer;
>

/* Добавить анимация масштабирования */
.animate -webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
>

Совет: Вы также можете использовать следующий javascript для закрытия модального, щелкнув за пределами модального содержимого (а не только с помощью кнопки «x» или «отмена», чтобы закрыть его):

Пример

// Когда пользователь щелкает в любом месте за пределами модального, закройте его
window.onclick = function(event) if (event.target == modal) modal.style.display = «none»;
>
>

Совет: Зайдите на наш учебник HTML Форма, чтобы узнать больше о формах HTML.

Совет: Зайдите на наш учебник CSSL Форма, чтобы узнать больше о том, как стилизовать элементы формы.

Источник

Build a password reset form with HTML

In this section, we create a custom password reset form that allows a user to reset their password and includes:

You can clone the example password reset form on CodePen

(opens new window) and make edits, or follow along below.

1. A user requests a password reset email. Userfront sends the user an email. This email contains a link to reset the user’s password.
2. The user clicks the link. The link has a special token and uuid in the URL.
3. The user submits their new password. The user submits their new password with the password reset form on the page. The form updates the user’s password and then logs in the user.

The example form has the Userfront Core JS library added to the document, as described in the section below.

The token and uuid from the password reset email must be present in the URL. Thus, this example form does not reset an actual password.

See the Pen by userfront (@ userfront) on CodePen.

Start by adding the Userfront Core JS library via CDN or using npm.

You only need to do one of these.

Then import the library into your file(s)

In order to request a password reset email, call the sendResetLink() method with the user’s email address.

Userfront will email the user with a link to your account’s Password reset path.

The link will look something like:

https://www.example.com/reset? token= . & uuid= .

Create your password reset form with the elements you want to use.

• password — required to update the password
• password-verify — optional, for checking the password before updating it

The resetPassword() method allows the user to submit a new password.

Our JavaScript needs to call this method with the new password.

Userfront then does the following:

1. Verifies the user’s credentials
2. Updates the user’s password
3. Adds the user’s access token as a cookie named access.demo1234
4. Redirects the page to the After-login path

In the example code here, we do the following:

1. Reference all the elements on the page
2. Define a custom formResetPassword() method that calls Userfront.resetPassword() with the form value
3. Add an event listener to call formResetPassword() when the form is submitted

Userfront will verify that the password is the correct length and format, and we can additionally verify that the user has typed what they intended by having them type it twice.

This «passwords match» verification is performed before sending the information to Userfront.

Whenever the Userfront.resetPassword() method fails, we can catch its error in the promise chain.

This error contains a message property with what went wrong.

In this example, we use the setAlert() method to display the error message inside of our alert element.

Источник

Восстановлени пароля пользователя php + mysq

Привет друзья. В самом начале создания своего блога я написал статью как создать регистрацию и авторизацию на PHP + MySQL . Данная статья стала очень актуальной на моем блоге и требует своего логического продолжения, а именно это восстановление пароля пользователя . Ища информацию на просторах Рунета вы много найдете статей как создать регистрацию и авторизацию пользователей на сайте, но при этом все опускают тот момент, когда пользователь забыл свой пароль. В данной статье мы исправим этот досадный момент.

Восстановление пароля пользователя может быть двух способов:

• Когда пароль в базе данных хранится не в зашифрованном виде, то вы можете выслать данный пароль пользователю на его email. ( Хранить пароли в открытом виде очень небезопасно и так делать нельзя! ).
• Второй вариант, когда пароль хранится в зашифрованном виде, например, по средствам md5() и возможность дешифровать его нет. Тогда нужно создавать новый пароль и обновлять запись в таблице.

Рассмотрим структуру нашей таблицы:

У нас есть ID, есть логин, пароль в зашифрованном виде с солью, соль, active_hex и статус пользователя. Исходя из этих данных будем создавать алгоритм восстановления пароля на сайте. Особое внимание нужно уделить полю active_hex так как оно будет непосредственно участвовать в восстановлении пароля пользователя.

Сейчас попробуем описать алгоритм действий для реализации восстановления пароля пользователя на php + mysql.

• Показываем форму с вводом логина для восстановления.
• Если такой логин есть, то шлем ему письмо ссылкой и ключом в качестве ключа используем строку из ячейки active_hex.
• Когда пользователь прошел по ссылке проверяем ключ, если ключ совпадает с полем active_hex то выводим форму с двумя полями для вода нового пароля. Как только пользователь сменил пароль, в целях безопасности генерируем новый active_hex, чтобы никто не смог воспользоваться ссылкой восстановления пароля повторно! Далее отправляем письмо о том, что пароль сменен и ссылку для входа.
• Пользователь входит с новым паролем.

Я не буду здесь расписывать все скрипты, вы можете ознакомится с ними в первой статье регистрация и авторизация на PHP + MySQL . Здесь я выложу дополнения к данным скриптам.

В каталоге scripts создаем новую папку reminder . В данном каталоге создаем три файла:

Далее переходим в index.php и подключаем наши файлы в switch();

 prepare($sql); $stmt->bindValue(':active_hex', $_GET['key'], PDO::PARAM_STR); if($stmt->execute()) < $row = $stmt->fetch(PDO::FETCH_ASSOC); //Проверяем что вернул запрос if($row['total'] == 0) include './scripts/reminder/form_reminder.html'; else < //Отправляем на главную страницу //header('Location: '. BEZ_HOST); //exit; include './scripts/reminder/new_pass_form.html'; >> > else < if(!isset($_GET['newpass'])) include './scripts/reminder/form_reminder.html'; // include './scripts/reminder/new_pass_form.html'; >break; > //Получаем данные с буфера $content = ob_get_contents(); ob_end_clean(); //Подключаем наш шаблон include './html/index.html'; ?> 

Создаем html разметку для формы восстановления пароля пользователя в файле form_reminder.html

  
 
Восстановление параметров авторизации
 
Если забыли свои параметры авторизации, не переживайте, их можно восстановить. Для этого введите, пожалуйста, ниже свой email.
 
 
Адрес email: 
 
Восстановить 
 
  
 
 
  

Далее создаем html разметку для ввода нового пароля пользователя в файле new_pass_form.html

  
 
Восстановление пароля
 
 
 
Пароль: 
Повторите пароль: 
 
Изменить 
 
  
 
 
  

Формы мы сделали, самое время написать обработчик данных форм reminder.php

  //Выводим сообщение об отправки ссылки для восстановления пароля if(isset($_GET['send']) and $_GET['send'] == 'ok') echo '
Ваш запрос на восстановление пароля отправлен на указаный вами email!
'; //Выводим сообщение об успешно смене пароля if(isset($_GET['newpass']) and $_GET['newpass'] == 'ok') echo '
Ваш пароль успешно изменен, проверьте свой email!
'; //Если нажата кнопка восстановить пароль утюжим переменные if(isset($_POST['reminder']))< //Если email существует, то проверяем есть ли он в нашей базе if(emailValid($_POST['email']))< //Запрос на выборку аккаунта для восстановления $sql = 'SELECT * FROM `'. BEZ_DBPREFIX .'reg` WHERE `status` = 1 AND `login` = :email'; //Подготавливаем PDO выражение для SQL запроса $stmt = $db->prepare($sql); $stmt->bindValue(':email', $_POST['email'], PDO::PARAM_STR); if($stmt->execute()) < //Получаем ответ от MySQL $rows = $stmt->fetch(PDO::FETCH_ASSOC); //Проверяем что такой email есть if(!empty($rows)) < //Шлем письмо для восстановления пароля $title = 'Вы запросили восстановление пароля на http://bezramok-tlt.ru'; $message = 'Для смены пароля Вам нужно пройти по ссылке '. BEZ_HOST .'?mode=reminder&key='. $rows['active_hex'] .''; sendMessageMail($_POST['email'], BEZ_MAIL_AUTOR, $title, $message); //Перенаправляем пользователя на нужную нам страницу header('Location:'. BEZ_HOST .'?mode=reminder&send=ok'); exit; > else < echo showErrorMessage('Нет такого пользователя!'); >> else < echo showErrorMessage('Что-то пошло не так :('); >> else < echo showErrorMessage('Не верные данные!'); >> //Если пользователь сменил пароль if(isset($_POST['newPass'])) < //Утюжим переменные if(empty($_POST['pass'])) $err[] = 'Поле Пароль не может быть пустым'; if(empty($_POST['pass2'])) $err[] = 'Поле Подтверждения пароля не может быть пустым'; //Проверяем равенство паролей if($_POST['pass'] != $_POST['pass2']) $err[] = 'Пароли не совпадают!'; //Проверяем наличие ошибок и выводим пользователю if(count($err) >0) echo showErrorMessage($err); else < //Получаем данные о пользователе $sql = 'SELECT * FROM `'. BEZ_DBPREFIX .'reg` WHERE `status` = 1 AND `active_hex` = :active_hex'; //Подготавливаем PDO выражение для SQL запроса $stmt = $db->prepare($sql); $stmt->bindValue(':active_hex', $_GET['key'], PDO::PARAM_STR); if($stmt->execute()) < //Получаем ответ от MySQL $rows = $stmt->fetch(PDO::FETCH_ASSOC); //Почтовый ящик $email = $rows['login']; //Солим пароль $pass = md5(md5($_POST['pass']).$rows['salt']); //Создаем новый active_hex для защиты $active_hex = md5($pass); //Обновляем данные в таблице $sql = 'UPDATE `'. BEZ_DBPREFIX .'reg` SET `pass` = :pass, `active_hex` = :active_hex WHERE `id` = '. $rows['id']; //Подготавливаем PDO выражение для SQL запроса $stmt = $db->prepare($sql); //Если запрос выполнился if($stmt->execute(array(':pass' => $pass, ':active_hex' => $active_hex))) < //Отправляем сообщение на почту об успешной смене пароля $title = 'Вы успешно сменили пароль на http://bezramok-tlt.ru'; $message = 'Вы успешно сменили пароль на '. $_POST['pass'] .' 
для входа в систему перейдите по ссылке '. BEZ_HOST .'?mode=auth
'; sendMessageMail($email, BEZ_MAIL_AUTOR, $title, $message); //Перенаправляем пользователя на нужную нам страницу header('Location:'. BEZ_HOST .'?mode=reminder&newpass=ok'); exit; > > > > ?> 

Источник

Форма «забыли пароль» для сайта с помощью JS

Как часто случалось, что Вы забывали пароль на сайте? думаю с каждым случалась такая ситуация, но менее того, Вас перебрасывает на следующую страницу для восстановления, а затем на следующую, и так множество раз, меня это раздражает, ведь почему недьзя все сделать быстро, не переходя на лишние страницы, в данном уроке мы рассмотрим как создать замечательную, при этом достаточно простую форму «забыли пароль» для сайта с анимацией переключении, а самое главное остаться на одной станицы, выполнив действия максимально быстро.

Идея состоит в том, что у нас есть форма, а форма «забыли пароль» будет слайдом, которая накладывается на основную форму при ее активации. Выглядит все достаточно просто, но для таких форм излишняя элегантность и не требуется.

Шаг 1. HTML
У нас будет достаточно сложная иерархическая разметка, ведь нам необходимо учесть все нюансы, и по умолчанию скрыть один из контейнеров до момента его активации

У нас будет один основной контейнер с общими правилами form_container, в него будут входить дочерние элементы такие как login и forgot, кроме этого мы добавляем ссылки управления.

Шаг 2. CSS
Нам необходимо стилизовать сам контейнер, установить для него заливку, кроме этого мы устанавливаем анимацию, со скоростью и плоскостью трансформации

Но все стили не обеспечат нам цикличного выполнения поставленной задачи, нам необходимо добавить небольшой код скрипта.

Шаг 3. JS
Нам необходимо выполнение задачи при нажатии на кнопку, кроме этого нам необходимо цикличное выполнение задачи не перебрасывая на другую страницу

В результате данных манипуляций мы получаем замечательную форму,которая станет отличным дополнением для Вашего ресурса.

Источник