#### Repository
https://github.com/python

#### What Will I Learn?
- Reset password
- Send email reset password

#### Requirements
- Basic Python
- Install Python 3
- Install Django


#### Resources
- Python - https://www.python.org/
- Django- https://www.djangoproject.com/
- Bootstrap 4 - https://getbootstrap.com/docs/4.0/getting-started/introduction/
- http://ana-balica.github.io/2015/01/29/pagination-in-django/

#### 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](https://ipfs.busy.org/ipfs/QmdNMJxSatg3WtPqnR1zJD3891g8n3gByjCxzHBoiJxTz2)

- 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](https://ipfs.busy.org/ipfs/QmPqXD4zDbzVcLr43fSnjJGdDttBKk3fTLhsX9K7vgVCCp)

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](https://cdn.steemitimages.com/DQmV7d7DioXUsjQeKHWtHzfMmBvJhojC3aVNveA2BXagE8C/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.
<br>
- **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](https://ipfs.busy.org/ipfs/QmavANreSNpX4Xd2bLg9UraRxELiXnu4EAnh61nj5P3Bui)


**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](https://cdn.steemitimages.com/DQmfKvcynuHkRo7czjSaxCJ8xJ97JkWt3X14rsYcccyiUrK/ezgif.com-video-to-gif%20(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.*
<br>
- **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](https://cdn.steemitimages.com/DQmVqqTUome4jybN1RzAhvX2vk6qFwLSBMtL5enDFgSYcQ1/ezgif.com-video-to-gif%20(2).gif)
<br>
- **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 **millea@admin.com**. 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](https://cdn.steemitimages.com/DQmYSndhC98Khzs5rGF8wRfhZmZLJ4vpupLoNaja4wh2FJX/ezgif.com-video-to-gif%20(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](https://steemit.com/utopian-io/@duski.harahap/create-a-forum-application-using-django-1-init-projects-and-dependencies-and-database-schema-1551711163679), [django#2](https://steemit.com/utopian-io/@duski.harahap/create-a-forum-application-using-django-2-template-system-and-class-based-view-implementation-1552057536737), [django#3](https://steemit.com/utopian-io/@duski.harahap/create-a-forum-application-using-django-3-base-template-login-and-register-system-1552311993977), [django#4](https://steemit.com/utopian-io/@duski.harahap/create-a-forum-application-using-django-4-admin-dashboard-ang-setting-redirect), [django#5](https://steemit.com/utopian-io/@duski.harahap/create-a-forum-application-using-django-5-slug-concept-and-generated-slug-and-use-forms-generic-view), [django#6](https://steemit.com/utopian-io/@duski.harahap/create-a-forum-application-using-django-6-crud-system-and-url-protection-redirect-system), [django#7](https://steemit.com/utopian-io/@duski.harahap/create-a-forum-application-using-django-7-unique-slug-and-manage-modules-in-admin-dashboard-1553268749861), [django#8](https://steemit.com/utopian-io/@duski.harahap/create-a-forum-application-using-django-8-display-forum-data-and-create-and-implement-list-view-1553525769014),  [django#8](https://steemit.com/utopian-io/@duski.harahap/create-a-forum-application-using-django-8-display-forum-data-and-create-and-implement-list-view-1553525769014),  [django#9](https://steemit.com/utopian-io/@duski.harahap/create-a-forum-application-using-django-9-single-page-for-forums-passing-params-in-routing-and-make-time-humanize-1553788983186),  [django#10](https://steemit.com/utopian-io/@duski.harahap/create-a-forum-application-using-django-10-detail-page-for-forums-use-slug-as-the-parameter-url-and-implement-getcontextdata),  [django#11](https://steemit.com/utopian-io/@duski.harahap/create-a-forum-application-using-django-11-url-behavior-and-update-view-and-edit-menu-1554268753908)


#### Proof of work done

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