15. Password Reset Functionality - Part 1

Published 2 months 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.

pages/reset-password.vue
<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="you@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>

Comments

Want to participate?

Create a free Chris Courses account to begin

or
Sign In

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 Cheat Sheet

Providing the lift to launch your development career

© 2020 Chris Courses. All rights reserved.