Updte auth example to use Bootstrap 3.

examples/auth/app.py

@@ -4,7 +4,7 @@ from flask_sqlalchemy import SQLAlchemy
 from flask_security import Security, SQLAlchemyUserDatastore, \
     UserMixin, RoleMixin, login_required, current_user
 from flask_security.utils import encrypt_password
-import flask_admin as admin
+import flask_admin
 from flask_admin.contrib import sqla
 from flask_admin import helpers as admin_helpers
 
@@ -28,6 +28,9 @@ class Role(db.Model, RoleMixin):
     name = db.Column(db.String(80), unique=True)
     description = db.Column(db.String(255))
 
+    def __str__(self):
+        return self.name
+
 
 class User(db.Model, UserMixin):
     id = db.Column(db.Integer, primary_key=True)
@@ -40,6 +43,9 @@ class User(db.Model, UserMixin):
     roles = db.relationship('Role', secondary=roles_users,
                             backref=db.backref('users', lazy='dynamic'))
 
+    def __str__(self):
+        return self.email
+
 
 # Setup Flask-Security
 user_datastore = SQLAlchemyUserDatastore(db, User, Role)
@@ -76,7 +82,12 @@ def index():
     return render_template('index.html')
 
 # Create admin
-admin = admin.Admin(app, 'Example: Auth', base_template='my_master.html')
+admin = flask_admin.Admin(
+    app,
+    'Example: Auth',
+    base_template='my_master.html',
+    template_mode='bootstrap3',
+)
 
 # Add model views
 admin.add_view(MyModelView(Role, db.session))

examples/auth/templates/admin/index.html

 {% extends 'admin/master.html' %}
 {% block body %}
 {{ super() }}
-<div class="row-fluid">
-
-  <div>
+<div class="container">
+    <div class="row">
+        <div class="col-sm-10 col-sm-offset-1">
             <h1>Flask-Admin example</h1>
             <p class="lead">
                 Authentication
             </p>
             <p>
-      This example shows how you can use Flask-Security for authentication.
+                This example shows how you can use <a href="https://pythonhosted.org/Flask-Security/index.html" target="_blank">Flask-Security</a> for authentication.
             </p>
             {% if not current_user.is_authenticated() %}
             <p>You can register as a regular user, or log in as a superuser with the following credentials:
@@ -17,13 +17,14 @@
                 <li>email: <b>admin</b></li>
                 <li>password: <b>admin</b></li>
             </ul>
-    </p>
             <p>
-      <a class="btn btn-default" href="{{ url_for('security.login') }}">login</a> <a class="btn btn-default" href="{{ url_for('security.register') }}">register</a>
+                <a class="btn btn-primary" href="{{ url_for('security.login') }}">login</a> <a class="btn btn-default" href="{{ url_for('security.register') }}">register</a>
             </p>
             {% endif %}
+            <p>
+                <a class="btn btn-primary" href="/"><i class="glyphicon glyphicon-chevron-left"></i> Back</a>
+            </p>
+        </div>
     </div>
-
-  <a class="btn btn-primary" href="/"><i class="icon-arrow-left icon-white"></i> Back</a>
 </div>
 {% endblock body %}
\ No newline at end of file

examples/auth/templates/my_master.html

@@ -2,16 +2,15 @@
 
 {% block access_control %}
 {% if current_user.is_authenticated() %}
-<div class="btn-group pull-right">
-    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
-        <i class="icon-user"></i>
+<div class="navbar-text btn-group pull-right">
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
+        <i class="glyphicon glyphicon-user"></i>
         {% if current_user.first_name -%}
         {{ current_user.first_name }}
         {% else -%}
         {{ current_user.email }}
-      {%- endif %} <span class="caret"></span>
-    </a>
-    <ul class="dropdown-menu">
+        {%- endif %}<span class="caret"></span></a>
+    <ul class="dropdown-menu" role="menu">
         <li><a href="{{ url_for('security.logout') }}">Log out</a></li>
     </ul>
 </div>

examples/auth/templates/security/_macros.html

 {% macro render_field_with_errors(field) %}
-<p>
-  {{ field.label }} {{ field(**kwargs)|safe }}
+
+<div class="form-group">
+    {{ field.label }} {{ field(class_='form-control', **kwargs)|safe }}
     {% if field.errors %}
-<ul>
+    <ul>
         {% for error in field.errors %}
         <li>{{ error }}</li>
         {% endfor %}
-</ul>
-{% endif %}
-</p>
+    </ul>
+    {% endif %}
+</div>
 {% endmacro %}
 
 {% macro render_field(field) %}
-<p>{{ field(**kwargs)|safe }}</p>
+<p>{{ field(class_='form-control', **kwargs)|safe }}</p>
 {% endmacro %}
+
+{% macro render_checkbox_field(field) -%}
+<div class="form-group">
+    <div class="checkbox">
+        <label>
+            {{ field(type='checkbox', **kwargs) }} {{ field.label }}
+        </label>
+    </div>
+</div>
+{%- endmacro %}
\ No newline at end of file

examples/auth/templates/security/login_user.html

 {% extends 'admin/master.html' %}
-{% from "security/_macros.html" import render_field_with_errors, render_field %}
+{% from "security/_macros.html" import render_field, render_field_with_errors, render_checkbox_field %}
 {% include "security/_messages.html" %}
 {% block body %}
 {{ super() }}
 <div class="row-fluid">
+    <div class="col-sm-8 col-sm-offset-2">
         <h1>Login</h1>
+        <div class="well">
             <form action="{{ url_for_security('login') }}" method="POST" name="login_user_form">
                 {{ login_user_form.hidden_tag() }}
                 {{ render_field_with_errors(login_user_form.email) }}
                 {{ render_field_with_errors(login_user_form.password) }}
-    {{ render_field_with_errors(login_user_form.remember) }}
+                {{ render_checkbox_field(login_user_form.remember) }}
                 {{ render_field(login_user_form.next) }}
                 {{ render_field(login_user_form.submit, class="btn btn-primary") }}
             </form>
-  {% include "security/_menu.html" %}
+            <p>Not yet signed up? Please <a href="{{ url_for('security.register') }}">register for an account</a>.</p>
+        </div>
+    </div>
 </div>
 {% endblock body %}
\ No newline at end of file

examples/auth/templates/security/register_user.html

@@ -4,7 +4,9 @@
 {% block body %}
 {{ super() }}
 <div class="row-fluid">
+    <div class="col-sm-8 col-sm-offset-2">
         <h1>Register</h1>
+        <div class="well">
             <form action="{{ url_for_security('register') }}" method="POST" name="register_user_form">
                 {{ register_user_form.hidden_tag() }}
                 {{ render_field_with_errors(register_user_form.email) }}
@@ -14,6 +16,8 @@
                 {% endif %}
                 {{ render_field(register_user_form.submit, class="btn btn-primary") }}
             </form>
-  {% include "security/_menu.html" %}
+            <p>Already signed up? Please <a href="{{ url_for('security.login') }}">log in</a>.</p>
+        </div>
+    </div>
 </div>
 {% endblock body %}
\ No newline at end of file