Html code for password recovery

Bootstrap snippet and html example. password recovery form

This html snippet was created to help web designers, web developers, front-end and back-end developer save time. Use it for free in your project and build your app faster, You can also download the HTML, CSS, and JS code.
Tags: password,form,recovery

HTML code

This is the html code used to create this bootstrap snippet, You can copy and paste the following html code inside a page with bootstrap 4.4.1 included, to get the result that you can see in the preview selection

CSS code

This is the css code used to create this bootstrap snippet, You can copy and paste the following css code inside a page with bootstrap 4.4.1 included, to get the result that you can see in the preview selection

body .form-control:not(textarea) < height: 44px; >.form-control < padding: 0 18px 3px; border: 1px solid #dbe2e8; border-radius: 22px; background-color: #fff; color: #606975; font-family: "Maven Pro",Helvetica,Arial,sans-serif; font-size: 14px; -webkit-appearance: none; -moz-appearance: none; appearance: none; >.form-group label < margin-bottom: 8px; padding-left: 18px; font-size: 13px; font-weight: 500; cursor: pointer; >.form-text < padding-left: 18px; >.text-muted

Similar snippets

Find more similar snippets using the following tags:password,form,recovery

small change password form

Textarea with character count

Trending now

social network user profile example

About this bootstrap example/template

This example/template, password recovery form, was published on Feb 22nd 2020, 19:36 by Bootdey Admin and it is free.

We hope you will enjoy this awesome snippet and stay tuned for the latest updates, bootdey snippets are already used in thousands of blogs, websites and projects. We believe it will save your precious time and gives trendy look to your next web project.

We always try to offer the best beautiful and responsive source of Bootstrap code examples and components.

This code example currectly have 6.0K views, Using this bootstrap snippet you have the following benefits:

Bootstrap 4.4.1

This code example is based on bootstrap 4.4.1 and the grid system of this framework

Responsive

Based on bootstrap framework makes all the layouts perfectly responsive for all devices

Crossbrowser compatibility

Tested on all major browsers, it works smoothly on all of them

semantic html 5

Built on html / css3 the code quality is really amazing

Simple Integration

This code example can be simply integrated on existing sites and new ones too, all you need to do is copy the code and start working

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

In Part III of our User Portal Series, we will walk you through building a forgot password page. Your forgot password page is likely to receive more traffic than you may anticipate so make it as intuitive and user friendly as possible.

solodev/forgot-password

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

In Part III of our User Portal Series, we will walk you through building a forgot password page. Your forgot password page is likely to receive more traffic than you may anticipate so make it as intuitive and user friendly as possible.

For detailed instructions, view Solodev’s Designing an Effective Forgot Password Page article.

Check out a working example on JSFiddle.

The forgot password page has the following basic HTML markup.

All necessary CSS is in forgot-password.css

Источник

PHP Forgot Password Recover Code

In this post, we are going to see an example to learn how to recover the forgot password. In this example we have a forgot password form to get the username or email to recover the password. After form submits, we are sending password recovery email to the user.

The Password recovery email has a link to the page where we can reset the password.

Forgot Password Code

This HTML code shows the forgot password form.

handleForgot(); > ?>       
 
 
 
Forgot Password
  
 else if ($displayMessage["status"] == "success") < ?> 
 > ?> 
 
 
Username
 
 
 
 
    

ds = new DataSource(); > /** * to get member record by username * * @param string $username * @return array */ public function getMember($username) < $query = 'SELECT * FROM tbl_member where username = ?'; $paramType = 's'; $paramValue = array( $username ); $memberRecord = $this->ds->select($query, $paramType, $paramValue); return $memberRecord; > /** * main function that handles the forgot password * * @return string[] */ public function handleForgot() < if (! empty($_POST["username"])) < $memberRecord = $this->getMember($_POST["username"]); require_once __DIR__ . "/PasswordReset.php"; $passwordReset = new PasswordReset(); $token = $this->generateRandomString(97); if (! empty($memberRecord)) < $passwordReset->insert($memberRecord[0]['id'], $token); $this->sendResetPasswordEmail($memberRecord, $token); > else < // the input username is invalid // do not display a message saying 'username as invalid' // that is a security issue. Instead, // sleep for 2 seconds to mimic email sending duration sleep(2); >> // whatever be the case, show the same message for security purposes $displayMessage = array( "status" => "success", "message" => "Check your email to reset password." ); return $displayMessage; > /** * to send password recovery email * you may substitute this code with SMTP based email * Refer https://phppot.com/php/send-email-in-php-using-gmail-smtp/ to send smtp * based email * * @param array $memberListAry * @param string $token */ public function sendResetPasswordEmail($memberListAry, $token) < $resetUrl = 'applicationUrl . 'reset-password.php?token=' . $token . '">reset'; $emailBody = 'Hi,
 To reset your password, click this link ' . $resetUrl; $to = $memberListAry[0]["email"]; $subject = 'Reset password'; mail($to, $subject, $emailBody); > public function updatePassword($id, $password) < $hashedPassword = password_hash($password, PASSWORD_DEFAULT); $query = 'UPDATE tbl_member SET password = ? WHERE $paramType = 'si'; $paramValue = array( $hashedPassword, $id ); $this->ds->execute($query, $paramType, $paramValue); $displayMessage = array( "status" => "success", "message" => "Password reset successfully." ); return $displayMessage; > /** * use this function if you have PHP version 7 or greater * else use the below fuction generateRandomString * * @param int $length * @param string $keyspace * @throws \RangeException * @return string */ function getRandomString(int $length = 64, string $keyspace = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'): string < if ($length < 1) < throw new \RangeException("Length must be a positive integer"); >$pieces = []; $max = mb_strlen($keyspace, '8bit') - 1; for ($i = 0; $i < $length; ++ $i) < $pieces[] = $keyspace[random_int(0, $max)]; >return implode('', $pieces); > /** * this generates predictable random strings. * So the best * option is to use the above function getRandomString * and to use that, you need PHP 7 or above * * @param number $length * @return string */ function generateRandomString($length = 10) < $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; $charactersLength = strlen($characters); $randomString = ''; for ($i = 0; $i < $length; $i ++) < $randomString .= $characters[rand(0, $charactersLength - 1)]; >return $randomString; > > 

Password reset

ds = new DataSource(); > public function insert($memberId, $token) < $query = 'INSERT INTO tbl_password_reset (member_id, password_recovery_token, expire_at, is_valid) VALUES (?, ?, ?, ?)'; $paramType = 'sssi'; $time = date('Y-m-d H:i:s'); // expire the token after 12 hours $RESET_TOKEN_LIFE = '12 hours'; $expireAt = date('Y-m-d H:i:s', strtotime($time . ' + ' . $RESET_TOKEN_LIFE)); $paramValue = array( $memberId, $token, $expireAt, 1 ); $memberId = $this->ds->insert($query, $paramType, $paramValue); > public function getMemberForgotByResetToken($recoveryToken) < $query = 'SELECT * FROM tbl_password_reset where password_recovery_token = ? AND is_valid = 1 AND expire_at >= now()'; $paramType = 's'; $paramValue = array( $recoveryToken ); $memberRecord = $this->ds->select($query, $paramType, $paramValue); return $memberRecord; > public function expireToken($recoveryToken) < $query = 'UPDATE tbl_password_reset SET is_valid = 0, expired_at = now() WHERE password_recovery_token = ?'; $paramType = 's'; $paramValue = array( $recoveryToken ); $this->ds->execute($query, $paramType, $paramValue); > > 

Reset password form

 else < $token = $_GET["token"]; // token found, let's validate it $memberRecord = $passwordReset->getMemberForgotByResetToken($token); if (empty($memberRecord)) < // token expired // do not say that your token has expired for security reasons // never reveal system state to the end user echo 'Invalid request!'; exit(); >> if (! empty($_POST["reset-btn"])) < $passwordReset->expireToken($token); require_once __DIR__ . '/Model/Member.php'; $member = new Member(); $displayMessage = $member->updatePassword($memberRecord[0]['member_id'], $_POST["password"]); > ?>       
 
 
 
Reset Password
  
 else if ($displayMessage["status"] == "success") < ?> 
 > ?> 
 
 
Password
 
 
 
 
Confirm Password
 
 
 
 
    

Recover Password Database Structure

-- phpMyAdmin SQL Dump -- version 5.0.2 -- https://www.phpmyadmin.net/ -- -- Host: localhost -- Generation Time: Sep 17, 2020 at 04:16 PM -- Server version: 8.0.17 -- PHP Version: 7.4.8 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `forgot-password-reset` -- -- -------------------------------------------------------- -- -- Table structure for table `tbl_member` -- CREATE TABLE `tbl_member` ( `id` int(11) NOT NULL, `username` varchar(255) NOT NULL, `password` varchar(200) NOT NULL, `email` varchar(255) NOT NULL, `create_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -------------------------------------------------------- -- -- Table structure for table `tbl_password_reset` -- CREATE TABLE `tbl_password_reset` ( `id` int(11) NOT NULL, `member_id` int(11) NOT NULL, `password_recovery_token` varchar(255) NOT NULL, `expire_at` timestamp NULL DEFAULT NULL, `is_valid` tinyint(4) NOT NULL, `expired_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00', `create_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Indexes for dumped tables -- -- -- Indexes for table `tbl_member` -- ALTER TABLE `tbl_member` ADD PRIMARY KEY (`id`); -- -- Indexes for table `tbl_password_reset` -- ALTER TABLE `tbl_password_reset` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tbl_member` -- ALTER TABLE `tbl_member` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1; -- -- AUTO_INCREMENT for table `tbl_password_reset` -- ALTER TABLE `tbl_password_reset` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; 

Forgot password recovery email

If the username is found in the database, a recovery mail is sent to the user’s email. The recovery mail will have a link. The link’s essential part is a hashed random secure token. This is designed in such a way that the user will not be able to mimic it.

A record against that member will be done in the table tbl_password_reset with a generated hash secure token. When the user clicks the link with the token, it will be validated for expiry time.

In this example project, for brevity, Php’s mail() function is used. If you wish you can substitute it with PHPMailer based SMTP email.

Источник

Html code for password recovery

В этом разделе помещены уроки по PHP скриптам, которые Вы сможете использовать на своих ресурсах.

• 

Фильтрация данных с помощью zend-filter

Когда речь идёт о безопасности веб-сайта, то фраза «фильтруйте всё, экранируйте всё» всегда будет актуальна. Сегодня поговорим о фильтрации данных.

Контекстное экранирование с помощью zend-escaper

Обеспечение безопасности веб-сайта — это не только защита от SQL инъекций, но и протекция от межсайтового скриптинга (XSS), межсайтовой подделки запросов (CSRF) и от других видов атак. В частности, вам нужно очень осторожно подходить к формированию HTML, CSS и JavaScript кода.

Подключение Zend модулей к Expressive

Expressive 2 поддерживает возможность подключения других ZF компонент по специальной схеме. Не всем нравится данное решение. В этой статье мы расскажем как улучшили процесс подключение нескольких модулей.

Совет: отправка информации в Google Analytics через API

Предположим, что вам необходимо отправить какую-то информацию в Google Analytics из серверного скрипта. Как это сделать. Ответ в этой заметке.

Подборка PHP песочниц

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

Совет: активация отображения всех ошибок в PHP

При поднятии PHP проекта на новом рабочем окружении могут возникнуть ошибки отображение которых изначально скрыто базовыми настройками. Это можно исправить, прописав несколько команд.

Источник