41. My account page

Next, we will edit the "My Account" page to include two forms: one for the user to update their personal information and another for changing their password.

You could also add this functionality by creating an <a> tag that links to the change_password URL, redirecting the user to Django's default password change page. However, to provide more features and flexibility, we will implement the password change functionality using custom forms instead.

In the first form, we will allow the user to edit their email, name, and phone number.

To implement this, we will edit the your_account.html file to include the form fields for the user to update their email, name, and phone number.

your_account.html

{% extends 'base.html' %}
{% load static %}

{% block body %}

<h3>
    Your account
</h3>
<a href="{% url 'my_orders' %}">My orders</a>

<a href="{% url 'perform_logout' %}">Logout</a>
<h3>Account information</h3>
<form method="POST" action="{%url 'your_account' %}">
    {% csrf_token %}
    <input type="text" name="name" placeholder="Full Name" 
    {% if request.user.client.name %}
    value="{{ request.user.client.name }}"
    {% endif %}>
    <input type="email" name="email" placeholder="Email" value="{{ request.user.email }}"> <!--Initializing the textbox with the users email (all users have a email associated)-->
    <input type="number" name="name" placeholder="Telephone" value="{{ request.user.client.phone }}">
    <button type="submit">Save</button>
</form>
<hr>
<h3>Change Password</h3>
<form method="POST" action="{% url 'your_account' %}">
    {% csrf_token %}
    <input type="password" name="current_password" placeholder="Current Password">
    <input type="password" name="new_password" placeholder="New Password">
    <input type="password" name="confirm_new_password" placeholder="Confirm new password">
    <button type="submit">Change Password</button>

</form>

{% endblock %}

Below is a explanation of the code:

• Template Inheritance: {% extends 'base.html' %}

  • Inherits from the base.html template for consistent page layout.

• Static Files: {% load static %}

  • Loads the static file handling tags to reference static resources.

• Block Definition: {% block body %}

  • Defines a block named body where the specific content for this template will be inserted.

• Header: <h3> Your account </h3>

  • Displays a heading for the user's account page.

• Navigation Links:

  • <a href="{% url 'my_orders' %}">My orders</a>:

    • Link to the 'my_orders' view, displaying the user's orders.

  • <a href="{% url 'perform_logout' %}">Logout</a>:

    • Link to log the user out, calling the 'perform_logout' view.

• Account Information Header: <h3>Account information</h3>

  • Displays a subheading for account information.

• Account Information Form: <form method="POST" action="{%url 'your_account' %}">

  • Creates a form for updating account information, submitting data via POST to the 'your_account' view.

  • Full Name Input:

    • <input type="text" name="name" placeholder="Full Name" ...>

      • Input for the user's full name.

    • {% if request.user.client.name %}

      • If the user already has a name set, it pre-fills the input with that value.

  • Email Input: <input type="email" name="email" placeholder="Email" value="{{ request.user.email }}">

    • Displays the user's email in the input field, which all users must have.

  • Telephone Input: <input type="number" name="name" placeholder="Telephone" value="{{ request.user.client.phone }}">

    • Input for the user's telephone number, pre-filled if available.

  • Save Button: <button type="submit">Save</button>

    • Button to submit the form and save changes to the account information.

• Section Separator: <hr>

  • Inserts a horizontal line to separate sections.

• Change Password Header: <h3>Change Password</h3>

  • Displays a subheading for the change password section.

• Change Password Form: <form method="POST" action="{% url 'your_account' %}">

  • Creates a form for changing the user's password, submitting data via POST to the 'your_account' view.

  • Password Inputs:

    • <input type="password" name="current_password" placeholder="Current Password">: Input for the current password.

    • <input type="password" name="new_password" placeholder="New Password">: Input for the new password.

    • <input type="password" name="confirm_new_password" placeholder="Confirm new password">: Input to confirm the new password.

  • Change Password Button: <button type="submit">Change Password</button>

    • Button to submit the form and change the user's password.

• End Block: </div>

  • Ends the body block defined earlier.

Now, when the user navigates to their account page, two sections will be displayed: one containing their account information and the other for password change. The input fields in these sections will be pre-populated with the appropriate initial values. For instance, if the user hasn’t provided a name, the name text box will be empty instead of displaying "None," thanks to conditional logic that handles missing values.

Try updating the user's name in the admin page to see the changes reflected in their account information on the site.

In the next section, we will add the functionalities for updating the user's information and changing their password.