Flask-security: security templates with bootstrap

[slippers]

is there a way to avoid copying the security templates to the local app? how can I just include the site-package/flask_security/templates into a generic page template? maybe interrupt the render_template from that view.login from the main app via some kind of pre-process?

 85 return _security.render_template(config_value('LOGIN_USER_TEMPLATE'),
 86                                      login_user_form=form,
 87                                      **_ctx('login'))

was able to customize the security.login page by creating the local application /templates/security/login_user.html.

  1 {% extends "base.html" %}
  2 {% block title %}{{ title }}{% endblock %}
  4 {% block content %}
  6 <div class="container">
  7     {% from "security/_macros.html" import render_field_with_errors, render_field %}
  8     {% include "security/_messages.html" %}
  9     <h1>Login</h1>
 10     <form action="{{ url_for_security('login') }}" method="POST" name="login_user_form">
 11         {{ login_user_form.hidden_tag() }}
 12         {{ render_field_with_errors(login_user_form.email) }}
 13         {{ render_field_with_errors(login_user_form.password) }}
 14         {{ render_field_with_errors(login_user_form.remember) }}
 15         {{ render_field(login_user_form.next) }}
 16         {{ render_field(login_user_form.submit) }}
 17     </form>
 18     {% include "security/_menu.html" %}
 19 </div>
 20 {% endblock %}

[erwinyusrizal]

@slippers

1. Yes you can use your custom template by set the configuration template
2. create your own form extending flask security LoginForm
3. you can use it in your custom login template and use your custom HTML and BS classes

SECURITY_LOGIN_USER_TEMPLATE = 'custom/login.html'

# forms.py
from flask.ext.security.forms import LoginForm

class ExtendedLoginForm(LoginForm):
    email = EmailField('Email', [validators.DataRequired(message='email is required '), validators.Email(message='invalid email address')])
    password = PasswordField('Password', [validators.DataRequired(message='password is required')])
    remember = BooleanField('Remember Me')

custom template

# templates/custom/login.html
<form action="{{ url_for_security('login') }}" method="POST" name="login_form" class="form">
    {{ login_user_form.hidden_tag() }}
    <div class="form-group">
        {{ login_user_form.email(class='form-control', placeholder='email address') }}
    </div>
    <div class="form-group">
        {{ login_user_form.password(class='form-control', placeholder='password') }}
    </div>
    <div class="form-group">
        <div class="col-md-12">
            <div class="checkbox">
                <label>
                    {{ login_user_form.remember }} {{ login_user_form.remember.label }}
                </label>
            </div>
            {{ login_user_form.submit(class='btn btn-primary pull-right') }}
        </div>
    </div>
</form>

Setup your flask security

user_datastore = SQLAlchemyUserDatastore(db, User, Role)
security = Security(app, user_datastore, login_form=ExtendedLoginForm)

Hope thats help

[jirikuncar]

It would be nice to add support for themes similar to Flask-Admin (https://github.com/flask-admin/flask-admin/tree/master/flask_admin/templates)

[DataSapient]

@erwinyusrizal Thanks a lot, solved the issue for me!

[leosok]

@jirikuncar I know this thread is old - but this is just what I was thinking and am still searching for!