Flask-Security templates not taking effect

Question

I am using Flask-Security with my Flask-Admin app.

The login.html template current is:

% extends "base.html" %} 
{% from "security/_macros.html" 
import     render_field_with_errors, render_field %} 

{% block content %} 
{% include "security/_messages.html" %}

Custom Login Form

{{ login_form.hidden_tag() }} 
{{ render_field_with_errors(login_form.email) }} 
{{ render_field_with_errors(login_form.password) }} 
{{ render_field_with_errors(login_form.remember) }} 
{{ render_field(login_form.next) }} 
{{ render_field(login_form.submit) }}
{% include "security/_menu.html" %} 
{% endblock %}

This is in /templates/security/login_user.html. I set this to be the file loaded in my config.

SECURITY_LOGIN_USER_TEMPLATE = 'security/login_user.html'

If I change Custom login form to something else, the text changes so it is loading this file correctly. The only issue is there is no styling on it. Its like the CSS isn't getting picked up:

flask-admin_1 | raise value.with_traceback(tb)

flask-admin_1 | File "/code/app/templates/security/login_user.html", line 3, in top-level template code

flask-admin_1 | {% from "security/_macros.html" import render_field_with_errors, render_field %}

flask-admin_1 | File "/code/app/templates/base.html", line 26, in top-level template code

flask-admin_1 | {% block content %}

flask-admin_1 | File "/code/app/templates/security/login_user.html", line 9, in block "content"

flask-admin_1 | {{ login_form.hidden_tag() }}

flask-admin_1 | File "/usr/local/lib/python3.5/dist-packages/jinja2/environment.py", line 408, in getattr

flask-admin_1 | return getattr(obj, attribute)

flask-admin_1 | jinja2.exceptions.UndefinedError: 'login_form' is undefined

base.html*

<html>
<head>
  <title>Flask-Security Example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
{%- with messages = get_flashed_messages(with_categories=true) -%}
  {% if messages %}
    <ul class=flashes>
    {% for category, message in messages %}
      <li class="{{ category }}">{{ message }}</li>
    {% endfor %}
    </ul>
  {% endif %}
{%- endwith %}
<ul>
{% if current_user.is_authenticated %}
  <li>Hello {{ current_user.email }}</li>
  <li><a href="{{ url_for('security.logout') }}">Logout</a></li>
{% else %}
  <li><a href="{{ url_for('security.login') }}">Login</a></li>
  <li><a href="{{ url_for('security.register') }}">Register</a></li>
{% endif %}
</ul>

{% block content %}
{% endblock %}

</body>
</html>

Where are you importing the CSS file? where is it located? Use ` — mmenschig, Jan 12 '17 at 18:21
@mmenschig Is it required to import the CSS file explicitly? There are no CSS files in my project I'm just using the bog standard template that comes with Flask-Admin. — , Jan 12 '17 at 19:22

score 3 · Answer 1 · answered Jan 15 '18 at 10:29

Flask-Security by default will look for it's templates in "/templates/security". If the templates are not found, it will use the default bundled templates.

The easiest way override the default templates is:

Copy Flask-Security templates from their Github Source and paste it into your folder. You should have "/templates/security" directory.
Change the templates however you want.
Lastly, change the "base.html" file to include your CSS (you may even use your own base.html).

With this, you won't even need to change "SECURITY_LOGIN_USER_TEMPLATE" default configuration.

I hope this helps you.

score 0 · Answer 2 · answered Jan 12 '17 at 19:32

0

Unless your base.html includes CSS links already, you need to link them into your login template. Take a look at this Flask-Admin Login Example here:

http://examples.flask-admin.org/auth/admin/login/

Notice that the page is using Bootstrap for CSS. You have to explicitly import it, otherwise the site will not know what the design should be:

Add this into your <head> (I recommend your base.html so you dont have to repeat this over and over):

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

answered Jan 12 '17 at 19:32

mmenschig

1,088
14
22

Thanks for the advice. I have done that and now get the error **jinja2.exceptions.UndefinedError: 'login_form' is undefined'** I'll start looking into it now but if you already know the solution that be great! – Jan 12 '17 at 19:53
Just linking in the css shouldn't create that issue. check your closing tags especially where you've just edited the document. – mmenschig Jan 12 '17 at 20:01
Please show your base.html and views.py file as well – mmenschig Jan 12 '17 at 20:02
I've added my base.html - I don't have a views.py! – Jan 12 '17 at 20:04

Flask-Security templates not taking effect

2 Answers2