Authentication system in the forum application #7: Reset password and Send email reset password

in #utopian-io5 years ago

Repository

https://github.com/python

What Will I Learn?

  • Reset password
  • Send email reset password

Requirements

  • Basic Python
  • Install Python 3
  • Install Django

Resources

Difficulty

Basic

Tutorial Content

Hey everyone, this is a continuation of the Django application tutorial series, this tutorial series specifically discusses authentication in the Django forum application, so for those of you who are just following this tutorial, I suggest you follow the tutorial series in the curriculum section. In the previous tutorial, we have made user activation features with e-mail and also a number of other features, now in this section, we will create a new feature, namely resetting user passwords.

Make the interface to Reset password

We will start our new feature by creating an interface to enter the password reset feature, so the idea is that I will make a button at the interface of the Django application. For more details, we can see the following template:

registration/login.html

{% extends "base.html" %}

{% block title %} Sign in{% endblock %}

{% block content %}
<h2>Sign in</h2>
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit" name="button">Login</button>
    <a href="{% url 'password_reset' %}">Forgot password</a> // Set URL for forgot password
</form>

{% endblock%}
  • As usual, we need tokens on every form we make because we need tokens to verify that the data we post is safe. We can use csrf token to make our form safe, by writing like this {% csrf_token%}, later our template will render a new input with type = "hidden", for more details we can see in the picture below:

Screenshot_2.png

  • In the template above we can see the login page that we have used in our previous tutorial, in this template we will add a new interface which is a link to the password reset page.

  • we will render the URL to reset the password in the following way <a href="{% url 'password_reset' %}">Forgot password</a>, Django has provided a URL to reset the password, we can render it like this {% url 'password_reset' %}, If we see, the template will be rendered as follows:

Screenshot_1.png

We can see in the picture above we have successfully rendered the URL to reset the password, now with that URL we don't need to make routing to reset the password, because Django has provided it.

Create a template reset password

We have created a password reset interface on the sign in the template, now we will create a template to reset the password. Django has also provided a default template for resetting passwords if you don't want to create a new template you can use the template provided by Django. In this template, we will send a confirmation email to the user's email.

  • Default template from Django

I will show how to use default templates and templates that we create ourselves, we will see the difference if we use the default template we do not need to declare a class view to render templates. For more details, we can see in the picture below:

ezgif.com-video-to-gif.gif

We can see in the picture above that the link has rendered the template automatically. now we will create our own template.

  • Create a password reset template

In this section, I will create a password reset template, at the top we use the template provided by Django, now we will try to create our own template. We will make the template in the template/registration folder. In this folder, I will create a password_reset_form.html template. We can see an example like the following picture

Screenshot_3.png

password_reset_form.html

{% extends "base.html" %}

{% block title %} Reset Password{% endblock %}

{% block content %}
<h2>Reset your password</h2>
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit" name="button">Send email</button>
</form>

{% endblock%}

In this template we still use {% csrf_token%} and form {{ form.as_p }}, the thing to note is the name of our template file. We can't use template names as we like. If we use our own template the name of the password reset template must be like this password_reset_form.html. For more details, we can see in the picture below:

ezgif.com-video-to-gif (1).gif

It can be seen that we changed the file name to wrongFileName.html, so Django will automatically render the default template that it has provided.

  • Create a send email confirmation page

Now we have finished the password reset page, now we will create a confirmation page when the password is reset successfully and the email is sent to the user's email. to make the confirmation page, we also cannot name the file carelessly. we must make the password reset email confirmation page as follows password_reset_done.html. We will also make the template/registration folder. For more details, we can see the example below:

password_reset_done.html

{% extends "base.html" %}

{% block title %} Confirmation change password{% endblock %}

{% block content %}
<div class="alert alert-success">
  <strong>Success!</strong> Please check your email..!
</div>
{% endblock%}

The configuration page is quite simple, we will only render alerts from bootstrap like the following:

<div class="alert alert-success">
  <strong>Success!</strong> Please check your email..!
</div>

So later when the user succeeds in sending his confirmation e-mail address if successful he will get a confirmation page like the following. If it's finished, we can see the confirmation page like this:

ezgif.com-video-to-gif (2).gif

  • Send an email password

We have created a template and confirmation page, now we will send a confirmation email to the user to reset the password, this email will be sent by the system to the user email that will be reset. Here I will send a password reset link to user [email protected]. We will send the password reset link later on that email. For more details, we can see in the picture below:

ezgif.com-video-to-gif (3).gif

The link that we sent is http://127.0.0.1:8000/accounts/reset/Mw/566-0f6c2c53444cc2b4150b/. Well, we can see in the picture above we have successfully sent a confirmation email to the user's email. this means the system that we are running well. http://127.0.0.1:8000/accounts/reset/Mw/566-0f6c2c53444cc2b4150b/

Curriculum

  • Forum app

django#1, django#2, django#3, django#4, django#5, django#6, django#7, django#8, django#8, django#9, django#10, django#11

Proof of work done

https://github.com/milleaduski/forums-django

Sort:  

Thank you for your contribution @duski.harahap.
After reviewing your contribution, we suggest you following points:

  • Using the first person in the tutorials makes it difficult to understand the tutorials. We suggest using the third person in your text.

  • Using GIFs to show results is definitely better than standard still images.

  • The functionality you explain in your tutorial is very basic. In the next tutorial bring something more innovative.

Thank you for your work in developing this tutorial.
Looking forward to your upcoming tutorials.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Chat with us on Discord.

[utopian-moderator]

Thank you for your review, @portugalcoin! Keep up the good work!

Hi @duski.harahap!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Hey, @duski.harahap!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Coin Marketplace

STEEM 0.26
TRX 0.11
JST 0.033
BTC 63868.85
ETH 3063.91
USDT 1.00
SBD 4.10