Email and Password Reset

Create a path

In the mysite/urls.py, we create different paths.

  • PasswordResetView: Page for password reset instruction to user’s email
  • PasswordResetDoneView: Page for after the form has been submitted successfully.
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('blog.urls')),
    path('register/', user_views.register, name='register'),
    path('profile/', user_views.profile, name='profile'),
    path('login/', auth_views.LoginView.as_view(template_name='users/login.html'), name='login'),
    path('logout/', auth_views.LogoutView.as_view(template_name='users/logout.html'), name='logout'),
    path('password-reset/',
         auth_views.PasswordResetView.as_view(
             template_name='users/password_reset.html'
         ),
         name='password_reset'),
    path('password-reset/done/',
         auth_views.PasswordResetDoneView.as_view(
             template_name='users/password_reset_done.html'
         ),
         name='password_reset_done'),
    path('password-reset-confirm/<uidb64>/<token>/',
         auth_views.PasswordResetConfirmView.as_view(
             template_name='users/password_reset_confirm.html'
         ),
         name='password_reset_confirm'),
    path('password-reset-complete/',
         auth_views.PasswordResetCompleteView.as_view(
             template_name='users/password_reset_complete.html'
         ),
         name='password_reset_complete'),
]

Create a template

In the users template directory, we create different templates:

  • password_reset.html template
{% extends "blog/base.html" %} {% load crispy_forms_tags %} {% block content %}
<div class="content-section">
  <form method="POST">
    {% csrf_token %}
    <fieldset class="form-group">
      <legend class="border-bottom mb-4">Reset Password</legend>
      {{ form|crispy }}
    </fieldset>
    <div class="form-group">
      <button class="btn btn-outline-info" type="submit">
        Request Password Reset
      </button>
    </div>
  </form>
</div>
{% endblock content %}
  • password_reset_done.html template: This template lets user know that an email has been sent and tells user to check the inbox.
{% extends "blog/base.html" %} {% block content %}
<div class="alert alert-info">
  An email has been sent with instructions to reset your password
</div>
{% endblock content %}
  • password_reset_confirm.html: Form to reset the template
{% extends "blog/base.html" %} {% load crispy_forms_tags %} {% block content %}
<div class="content-section">
  <form method="POST">
    {% csrf_token %}
    <fieldset class="form-group">
      <legend class="border-bottom mb-4">Reset Password</legend>
      {{ form|crispy }}
    </fieldset>
    <div class="form-group">
      <button class="btn btn-outline-info" type="submit">Reset Password</button>
    </div>
  </form>
</div>
{% endblock content %}
  • password_reset_complete.html: Tell users that the password has been successfully changed.
{% extends "blog/base.html" %} {% block content %}
<div class="alert alert-info">Your password has been set.</div>
<a href="{% url 'login' %}">Sign In Here</a>
{% endblock content %}

Set up Gmail server

We’ll use Gmail to send emails in this example.

  1. Sign in through your Google account with the Python app.
  • On Google.com, search “Google App Passwords” and select “App password - Sign in”

In our project settings.py, scroll to the bottom and add:

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_PORT = 587
EMAIL_USE_TLS = True
EMAIL_HOST_USER = os.environ.get('EMAIL_USER')
EMAIL_HOST_PASSWORD = os.environ.get('EMAIL_PASS')

Under the Login button, add:

<small class="text-muted ml-2">
  <a href="{% url 'password_reset' %}">Forgot Password?</a>
</small>