Video Thumbnail

Sign up for a plan to instantly unlock all premium lessons.

Premium Features

Download Video

15. Password Reset Functionality - Part 1

Published 2 years ago

We have a pretty functional login system running at the moment, but what happens if a user forgets their password? Right now, without a way to reset it, they’re kind of screwed.

To fix this we’re going to add password reset functionality which consists of: a user submitting their email address via a forgot password field... receiving a unique URL in their inbox that is only valid for a certain period of time... then creating a new password using this link.

We’ll get into the logistics of why we do things such as send the user a unique URL as we go.

  class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8"
  <div class="sm:mx-auto sm:w-full sm:max-w-md text-center">
    <h2 class="text-3xl font-bold">Reset Password</h2>
    <p class="mt-6 text-base leading-5 text-gray-600 max-w-sm mx-auto">
      Enter your email below and we'll send you instructions on how to create
      a new password.

  <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
    <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
            class="block text-sm font-medium leading-5 text-gray-700"

          <div class="mt-1 rounded-md shadow-sm">
              class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-purple focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"

        <div class="mt-6">
          <span class="block w-full rounded-md shadow-sm">
              class="rounded-full tracking-wider  bg-gray-800 hover:bg-gray-900  text-white font-bold text-center py-3 px-8 text-sm uppercase transition transform duration-200 focus:outline-none w-full"
              Send Reset


Want to participate?

Create a free Chris Courses account to begin


No comments yet, be the first to add one

Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Now

Providing the lift to launch your development career

© 2022 Chris Courses. All rights reserved.