34. Login page and account creation

Now, we will create a menu for users to log in or create an account. First, we will modify the navigation bar to include an account button.

navbar.html

{% load static %}
<nav>
    <a href = "{% url 'homepage' %}">Reserva</a>
    <a href = "{% url 'store' %}">Store</a>
    <div style="display: flex;">
        {% for category in categories_navbar %}
        <div>
            <a href="{% url 'store' %}{{ category.slug }}">{{ category.name }}</a>
            <br>
            {% for type in types_navbar %}
                <a href="{% url 'store' %}{{ category.slug }}-{{ type.slug }}">{{ type.name }}</a>
            {% endfor %}
        </div>
        {% endfor %}
    </div>

    {% if request.user.is_authenticated %}
        <a href = "{% url 'your_account' %}">My Account</a>
    {% else %}
        <a href = "{% url 'login' %}">Login</a>
    {% endif %}
    <a href = "{% url 'cart' %}">Cart</a>
    <img src = "{% static 'images/cart.png' %}" width="30" height="30">
    {{ product_amount_cart }}

</nav>

In the updated code, we relocated the loop filtering all categories to an earlier position, ensuring that the account buttons appear at the end of the navigation bar. Additionally, we configured the your_account button to display only if the user is authenticated; otherwise, the login button will be shown.

Next, we will update the login.html template to include a form where the user can input their email and password. If the user has forgotten their password, they will be redirected to another URL (currently using # as a placeholder to redirect to itself). If the user does not have an account, they will be redirected to the create_account URL, which we will define shortly.

login.html

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


{% block body %}

<h3>
    Log in
</h3>

<form method="POST" action="">
    {% csrf_token %}
    <input type="email" name="email" placeholder="Email">
    <input type="password" name="password" placeholder="Password">
    <button type="submit">Login</button>
</form>

<a href="{% url 'create_account' %}">Don't have a account? Create one</a>
<a href="#">I forgot my password</a>
{% endblock %}

To create the create_account URL, we need to follow the same steps we used previously for creating new URLs. First, we will reference it at the end of the urlpatterns list in the urls.py file (inside the store folder).

store\urls.py

path('createaccount/', create_account, name="create_account"),

Next, we create a new view function for it at the end of the views.py file.

def create_account(request) :
    return render(request, 'user/create_account.html')

Lastly, we need to create the appropriate HTML file containing its contents. Since the URL is related to user actions, we will place this HTML file inside the user folder, which is located within the templates folder.

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

{% block body %}

<h3>
    Fill in your information to create a account
</h3>

<form method="POST" action="">
    {% csrf_token %}
    <input type="email" name="email" placeholder="Email">
    <input type="password" name="password" placeholder="Password">
    <input type="password" name="confirm_password" placeholder="Confirm Password">
    <button type="submit">Create Account</button>
</form>

<a href="{% url 'login' %}">Already have a account? Log in</a>
{% endblock %}

This code is similar to the login page, with some differences such as adding an input to confirm the password and changing the text from "login" to "create account."

Now, the login and create account URLs are properly displayed for unauthenticated users with their appropriate contents.

Note: For easy testing, open the page in an incognito tab so that the user won't be authenticated and the login options will appear.

Log in page

Create a account page