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.
<div 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. </p> </div> <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"> <form> <div> <label for="email" class="block text-sm font-medium leading-5 text-gray-700" > Email </label> <div class="mt-1 rounded-md shadow-sm"> <input id="email" type="email" required placeholder="email@example.com" 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> </div> <div class="mt-6"> <span class="block w-full rounded-md shadow-sm"> <button type="submit" 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 </button> </span> </div> </form> </div> </div> </div>