Satchmo Template form.username Not Popping Up

Question

registration/login.html edited

{% load i18n %}
    <div id="Login">
{% if form.non_field_errors %}
    <p class="error">
        {% for err in form.non_field_errors %}{{ err }}
            {% if not forloop.last %}<br/>{% endif %}
        {% endfor %}
    </p>
{% endif %}

<form method="post" action=".">{% csrf_token %}
<table>
    <tr><td><label for="id_username">{% trans 'USERNAME' %}:</label></td><td>{{ form.username }}</td></tr>
    {% if form.username.errors %}<tr><td class="error" colspan="2">***{{     form.username.errors|join:", " }}</td></tr>{% endif %}
    <tr><td><label for="id_password">{% trans 'PASSWORD' %}:</label></td><td>{{ form.password }}</td></tr>
    {% if form.password.errors %}<tr><td class="error" colspan="2">***{{     form.password.errors|join:", " }}</td></tr>{% endif %}
</table>

<input type="submit" value="{% trans 'sign in' %}" />
{% url registration_register as registration_register %}
{% if registration_register %}
    <span><a href="{% url registration_register %}">{% trans "register" %}</a></span>
{% endif %}
<input type="hidden" name="next"
{% if next %}
    value={{ next }} />
{% else %}
     {% url satchmo_account_info as accounturl %}
     {% if accounturl %} value="{% url satchmo_account_info %}" /> {% endif %}
{% endif %}
</form>

{% comment %} We jump through hoops with the urls so it doesn't bomb with django's built in unit tests.{% endcomment %}
{% url auth_password_reset as auth_password_reset %}
{% if auth_password_reset %}
    <p>{% trans "If you do not remember your password, please" %} 
        <a href="{% url auth_password_reset %}">{% trans "click here</a> to have it reset." %}</p>
{% endif %}
</div>

Why does the form.username and form.password input box not show up? I had to remove the block tag {% extends shop/base.html %}. Did that cause the input field to disappear?

What I did was removed the {% block content %}{% endblock %} and used {% include "registration/login.html" %} in the base.html template. I wanted the login section to appear at the top left corner instead of having to click "Login" for the login field located in the {% block content %}.

registration/login.html original file

{% extends "shop/base.html" %}
{% load i18n %}

{% block navbar %}
   <li class="first"><a href="{{ shop_base }}/">{% trans "Home" %}</a></li>
{% endblock %}

{% block content %}

{% if form.non_field_errors %}
<p class="error">{% for err in form.non_field_errors %}{{ err }}{% if not forloop.last %}<br/>{% endif %}
{% endfor %}</p>
{% endif %}

<form method="post" action=".">{% csrf_token %}
<table>
<tr><td><label for="id_username">{% trans 'Email address' %}:</label></td><td>{{ form.username }}</td></tr>
{% if form.username.errors %}<tr><td class="error" colspan="2">***{{ form.username.errors|join:", " }}</td></tr>{% endif %}
<tr><td><label for="id_password">{% trans 'Password' %}:</label></td><td>{{ form.password }}</td></tr>
{% if form.password.errors %}<tr><td class="error" colspan="2">***{{ form.password.errors|join:", " }}</td></tr>{% endif %}
</table>

<input type="submit" value="{% trans 'Login' %}" />
<input type="hidden" name="next"
{% if next %}
    value={{ next }} />
{% else %}
     {% url satchmo_account_info as accounturl %}
     {% if accounturl %} value="{% url satchmo_account_info %}" /> {% endif %}
{% endif %}
</form>
{% comment %} We jump through hoops with the urls so it doesn't bomb with django's built in unit tests.{% endcomment %}
{% url registration_register as registration_register %}
{% url auth_password_reset as auth_password_reset %}
{% if registration_register %}
    <p>{% trans "If you do not have an account, please" %} <a href="{% url registration_register %}">{% trans "click here" %}</a>.</p>
{% endif %}
{% if auth_password_reset %}
    <p>{% trans "If you do not remember your password, please" %} <a href="{% url auth_password_reset %}">{% trans "click here</a> to have it reset." %}</p>
{% endif %}
{% endblock %}

shop/base.html

 <div id="sidebar-primary">{# rightnav #}
                {% block sidebar-primary %}
                <h3>{% trans "Quick Links" %}</h3>
                {% url satchmo_product_recently_added as recenturl %}
                {% if recenturl %}<a href="{{ recenturl }}">{% trans "Recently Added" %}</a>{% endif %}
                {% url satchmo_product_best_selling as popularurl %}
                {% if popularurl %}<br/><a href="{{ popularurl }}">{% trans "Best Sellers" %}</a><br/>{% endif %}
        {% url satchmo_category_index as category_index %}
        {% if category_index %} <a href="{{ category_index }}">{% trans "Category Index" %}</a><br /> {% endif %}
        {% url satchmo_quick_order as quick_order %}
        {% if quick_order %}<a href="{{ quick_order }}">{% trans "Quick Order" %}</a> {% endif %}
                {% plugin_point "sidebar_links" %}

            <h3>{% trans "Account Information" %}</h3>
            {% if user.is_staff %}
                <a href="{% url admin:index %}" target="blank">{% trans "Admin" %}</a><br/>
                {% endif %}
            {% if user.is_authenticated %}
                {% url satchmo_account_info as accounturl %}
        {% if accounturl %}<a href="{{ accounturl }}" target="blank">{% trans "Account Details" %}</a><br/>{% endif %}
        <a href="{{ logout_url }}?next={{request.path}}">{% trans "Log out" %}</a><br/>
            {% else %}
 <!-- I REMOVE REPLACED THE LINK BELOW WITH {% include "registration/login.html" %} -->
        <a href="{{ login_url }}?next={{request.path}}">{% trans "Log in" %}</a><br/>
            {% endif %}

                {% url satchmo_cart as carturl %}
            {% if carturl %}<a href="{{ carturl }}">{% trans "Cart" %}</a>{% endif %}

            {% if not cart.is_empty %}
            ({{ cart_count|normalize_decimal }} - {% if sale %}{{ cart|discount_cart_total:sale|currency }}{% else %}{{cart.total|currency}}{% endif%}) <br/>
            {% url satchmo_checkout-step1 as checkouturl %}
            {% if checkouturl %}<a href="{{ checkouturl }}">{% trans "Check out" %}</a>{% endif %}
            {% endif %}

                {% plugin_point "shop_sidebar_actions" %}

                {% url satchmo_contact as contact_url %}
            {% if contact_url %}<p><a href="{{ contact_url }}">{% trans "Contact Us" %}</a></p>{% endif %}

                {% satchmo_language_selection_form %}

                {% block sidebar-primary-bottom %}
                {% plugin_point "shop_sidebar_primary" %}
                {% endblock %}
                {% endblock sidebar-primary %}
        </div>

I tried a {% include "registration/copy_login.html" %} and changed the content around a little. I also used <form action="{% url auth_login %}. When I click submit with login/pass filled out, it takes me to /accounts/login/ where I have to enter the login data again.

This is my copy_login.html:

 # copy_login.html
 ...
 <tr><td><label for="id_username">{% trans "Username" %}</label></td><td><input type="text" name="id_username" id="id_username" /></td></tr>
 <tr><td><label for="id_password">{% trans "Password" %}</label></td><td><input type="text" name="id_password" id="id_password" /></td></tr>
 ...

Answer 1

Answer specific only to user's code

The first problem is that you probably tried to include the modified shortened registration/login.html into the main template, but you hide it into comment:

<!-- I REMOVE REPLACED THE LINK BELOW WITH {% include "registration/login.html" %} -->

Uncomment it to see the result.

The original template registration/login.html is used by the view accounts.views.emaillogin and used by URL /accounts/login/ which is redirected if you go to any page that requires login. You broke it, but you want to display a bigger form in the centre of page in this case, not only the small in the corner. You also do not want display there errors related to other forms on the page. Isn't it? Do not break the purpose of the original template.

General answer

I recommend first to copy paste important parts of login template registration/login.html to your smaller template that you include somewhere. Do it so that you not include error messages etc. in the small template, only the minimum. If the login fails the usual big login page with messages will be displayed. You need to change action="." to

<form method="post" action="{% url auth_login %}?next={{ request.path }}">

Note: The name auth_login is defined in satchmo_store/accounts/urls.py by:

(r'^login/$', 'emaillogin', {'template_name': 'registration/login.html'}, 'auth_login'),

Finally you can make it DRY (Do not Repeat Yourself) but it's not worth the effort for you, while the templates will be very different.

[Edited] 1) Included small fix from comments. 2) Modified to be easier for others.

Answer 2

If your template extends another template, then only the code it has in {% block %}...{% endblock %} is supposed to "show up".

Say i have this base.html template:

<html>
    <body>
        {% block body %}
        {% endblock %}
    </body>
</html>

Then, in such a login.html template:

{% extends 'base.html' %}

this won't show up because it's not in a block

{% block body %}
    this will "show up"
{% endblock %}

Read up about template inheritance