65. My account, login, and create frontend

We will update the My Account, Login, and Create Account pages. Since all three share a similar structure, the updates will be streamlined for consistency and clarity.

My account

To update the frontend of the My Account page, we will modify the your_account.html file located in the user folder. This ensures a better user interface and functionality for managing account details.

your_account.html

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

{% block body %}

<main class="principal">
    <section class="conta">
        {% if altered_account %}
        <p class="checkout_acerto">Account information succesfully saved</p>
        {% endif %}
        {% if altered_password %}
        <p class="checkout_acerto">Password succesfully altered</p>
        {% endif %}

        {% if error == "invalid_current_password" %}
        <p class="checkout_erro">Wrong current password</p>
        {% endif %}

        {% if error == "different_passwords" %}
        <p class="checkout_erro">Password confirmation doesn't match</p>
        {% endif %}

        {% if error == "email_exists" %}
        <p class="checkout_erro">Email in use</p>
        {% endif %}

        {% if error == "invalid_changes" %}
        <p class="checkout_erro">Invalid changes, try again</p>
        {% endif %}

        {% if error == "weak_password" %}
        <p class="checkout_erro">Invalid password. Ensure it has 8 to 20 characters, with least one upper, lower, numeric and special</p>
        {% endif %}

        {% if error == "same_password" %}
        <p class="checkout_erro">New password is the same as the previous one</p>
        {% endif %}

      <div class="conta__container">
        <div class="checkout__titulos">
          <p class="checkout__titulo">Dados pessoais</p>
        </div>

        <form
          class="conta__form"
          action="{% url 'your_account' %}"
          method="post"
        >
        {% csrf_token %}

          <div class="conta__item">
            <label for="name">Nome</label>
            <input name="name" type="text" placeholder="Nome Completo" 
            {% if request.user.client.name %}
            value="{{ request.user.client.name }}"
            {% endif %}/>
          </div>

          
          <div class="conta__item">
              <label for="phone">Telefone</label>
              <input name="phone" type="number" placeholder="Telefone" value="{{ request.user.client.phone }}"/>
            </div>
            <div class="conta__item conta__item--email">
              <label for="email">E-mail</label>
              <input name="email" type="email" placeholder="Email" value="{{ request.user.email }}"/>
            </div>

          <button class="subtotal__botao" type="submit">
            Salvar alterações
          </button>
        </form>
      </div>
      
      
      
      <div class="conta__container">
        <div class="checkout__titulos">
          <p class="checkout__titulo">Alterar Senha</p>
        </div>

        <form
          class="conta__form"
          action="{% url 'your_account' %}"
          method="post"
        >
        {% csrf_token %}
          <div class="conta__item">
            <label for="current_password">Senha Atual</label>
            <input name="current_password" type="password" placeholder="Senha Atual"/>
          </div>
          
          <div class="conta__item">
            <label for="new_password">Senha Nova</label>
            <input name="new_password" type="password" placeholder="Senha Nova"/>
          </div>
          
          <div class="conta__item">
            <label for="confirm_new_password">Confirmar Senha</label>
            <input name="confirm_new_password" type="password" placeholder="Senha Nova"/>
          </div>


          <button class="subtotal__botao" type="submit">
            Salvar alterações
          </button>
        </form>
      </div>
    </section>
</main>


{% endblock %}

Updated my account page

Login

Next, we will update the login.html file to enhance the frontend design and functionality of the login page.

login.html

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


{% block body %}


<main class="principal">
    <section class="conta">

      <div class="conta__container">
        <div class="checkout__titulos">
          <p class="checkout__titulo">Log In</p>
        </div>

        {% if error %}
        <p class="checkout_erro">Invalid credentials, try again or recover your password.</p>
        {% endif %}

        <form
          class="conta__form"
          action="{% url 'perform_login' %}"
          method="post"
        >
        {% csrf_token %}
          
        <div class="conta__item">
          <label for="email">E-mail</label>
          <input name="email" type="email" placeholder="Email"/>
        </div>
        <div class="conta__item">
            <label for="password">Password</label>
            <input name="password" type="password" placeholder="password"/>
        </div>

          <button class="subtotal__botao" type="submit">
            Log In
          </button>
        </form>
        <a class="esquecer_senha" href="{% url 'create_account' %}">Don't have a account? Create one</a>
        <a class="esquecer_senha" href="{% url 'password_reset' %}">Forgot your password?</a>
      </div>
    </section>
</main>
{% endblock %}

Updated Log In page

Create account

Finally, we will update the create_account.html file to improve the user interface and functionality for account creation.

create_account.html

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

{% block body %}

<main class="principal">
    <section class="conta">

      <div class="conta__container">
        <div class="checkout__titulos">
          <p class="checkout__titulo">Fill in your information to create a account</p>
        </div>

        {% if error == "fill" %}
        <p class="checkout_erro">Please complete all fields correctly to create an account.</p>
        {% endif %}

        {% if error == "invalid_email" %}
        <p class="checkout_erro">Invalid email address. Please enter a valid email and try again.</p>
        {% endif %}

        {% if error == "user_exists" %}
        <p class="checkout_erro">Email already in use. <a href="{% url 'perform_login' %}">Perform login</a></p>
        {% endif %}

        {% if error == "different_password" %}
        <p class="checkout_erro">Passwords do not match. Please ensure both fields are identical.</p>
        {% endif %}

        {% if error == "weak_password" %}
        <p class="checkout_erro">Invalid password. Ensure it meets the criteria</p>
        {% endif %}

        <form
          class="conta__form"
          action="{% url 'create_account' %}"
          method="post"
        >
        {% csrf_token %}
          
        <div class="conta__item conta__item--email">
          <label for="email">E-mail</label>
          <input name="email" type="email" placeholder="Email"/>
        </div>
        <div class="conta__item">
            <label for="password">Password</label>
            <input name="password" type="password" placeholder="password"/>
        </div>
        <div class="conta__item">
            <label for="confirm_password">Confirm Password</label>
            <input name="confirm_password" type="password" placeholder="Password"/>
        </div>
        <p class="senha_aviso">Password must be 8 to 20 characters with at least one upper and lower case letter, number, and special. </p>

          <button class="subtotal__botao" type="submit">
            Create Account
          </button>
        </form>
        <a class="esquecer_senha" href="{% url 'perform_login' %}">Already have a account? Log in</a>
      </div>
    </section>
</main>

{% endblock %}

Updated create account page