Merge branch 'examples'

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>
-    <h1>Flask-Admin example</h1>
-    <p class="lead">
-      Authentication
-    </p>
-    <p>
-      This example shows how you can use Flask-Security 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:
-    <ul>
-      <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>
-    </p>
-    {% endif %}
-  </div>
-
-  <a class="btn btn-primary" href="/"><i class="icon-arrow-left icon-white"></i> Back</a>
+<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 <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:
+            <ul>
+                <li>email: <b>admin</b></li>
+                <li>password: <b>admin</b></li>
+            </ul>
+            <p>
+                <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>
 </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>
-      {% if current_user.first_name -%}
-      {{ current_user.first_name }}
-      {% else -%}
-      {{ current_user.email }}
-      {%- endif %} <span class="caret"></span>
-    </a>
-    <ul class="dropdown-menu">
+<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" 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 }}
-  {% if field.errors %}
-<ul>
-  {% for error in field.errors %}
-  <li>{{ error }}</li>
-  {% endfor %}
-</ul>
-{% endif %}
-</p>
+
+<div class="form-group">
+    {{ field.label }} {{ field(class_='form-control', **kwargs)|safe }}
+    {% if field.errors %}
+    <ul>
+        {% for error in field.errors %}
+        <li>{{ error }}</li>
+        {% endfor %}
+    </ul>
+    {% endif %}
+</div>
 {% endmacro %}
 
 {% macro render_field(field) %}
-<p>{{ field(**kwargs)|safe }}</p>
-{% endmacro %}
+<p>{{ field(class_='form-control', **kwargs)|safe }}</p>
+{% endmacro %}
\ No newline at end of file
+
+{% 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">
-  <h1>Login</h1>
-  <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_field(login_user_form.next) }}
-    {{ render_field(login_user_form.submit, class="btn btn-primary") }}
-  </form>
-  {% include "security/_menu.html" %}
+    <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_checkbox_field(login_user_form.remember) }}
+                {{ render_field(login_user_form.next) }}
+                {{ render_field(login_user_form.submit, class="btn btn-primary") }}
+            </form>
+            <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,16 +4,20 @@
 {% block body %}
 {{ super() }}
 <div class="row-fluid">
-  <h1>Register</h1>
-  <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) }}
-    {{ render_field_with_errors(register_user_form.password) }}
-    {% if register_user_form.password_confirm %}
-    {{ render_field_with_errors(register_user_form.password_confirm) }}
-    {% endif %}
-    {{ render_field(register_user_form.submit, class="btn btn-primary") }}
-  </form>
-  {% include "security/_menu.html" %}
+    <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) }}
+                {{ render_field_with_errors(register_user_form.password) }}
+                {% if register_user_form.password_confirm %}
+                {{ render_field_with_errors(register_user_form.password_confirm) }}
+                {% endif %}
+                {{ render_field(register_user_form.submit, class="btn btn-primary") }}
+            </form>
+            <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

examples/forms/app.py

@@ -157,7 +157,7 @@ def index():
     return '<a href="/admin/">Click me to get to Admin!</a>'
 
 # Create admin
-admin = Admin(app, 'Example: Forms')
+admin = Admin(app, 'Example: Forms', template_mode='bootstrap3')
 
 # Add views
 admin.add_view(FileView(File, db.session))

examples/forms/requirements.txt

 Flask
 Flask-Admin
 Flask-SQLAlchemy
+pillow
\ No newline at end of file

examples/forms/templates/admin/index.html

 {% extends 'admin/master.html' %}
 {% block body %}
 {{ super() }}
-<div class="row-fluid">
-    <h1>Flask-Admin example</h1>
-    <p class="lead">
-        Custom forms
-    </p>
-    <p>
-        This example shows how you can define your own custom forms by using form rendering rules.
-    </p>
-    <p>
-        It also demonstrates general file handling as well as the handling of image files specifically.
-    </p>
-    <a class="btn btn-primary" href="/"><i class="icon-arrow-left icon-white"></i> Back</a>
+<div class="container">
+    <div class="row">
+        <div class="col-sm-10 col-sm-offset-1">
+            <h1>Flask-Admin example</h1>
+            <p class="lead">
+                Custom forms
+            </p>
+            <p>
+                This example shows how you can define your own custom forms by using form rendering rules.
+            </p>
+            <p>
+                It also demonstrates general file handling as well as the handling of image files specifically.
+            </p>
+            <a class="btn btn-primary" href="/"><i class="glyphicon glyphicon-chevron-left"></i> Back</a>
+        </div>
+    </div>
 </div>
 {% endblock body %}
\ No newline at end of file

examples/layout-bootstrap3/templates/admin/index.html

@@ -12,6 +12,6 @@
     <p>
         This is done by overriding some of the built-in templates.
     </p>
-    <a class="btn btn-primary" href="/"><i class="icon-arrow-left icon-white"></i> Back</a>
+    <a class="btn btn-primary" href="/"><i class="glyphicon glyphicon-chevron-left"></i> Back</a>
 </div>
 {% endblock body %}

examples/simple/app.py

@@ -30,7 +30,7 @@ def index():
     return '<a href="/admin/">Click me to get to Admin!</a>'
 
 # Create admin interface
-admin = admin.Admin(name="Example: Simple Views")
+admin = admin.Admin(name="Example: Simple Views", template_mode='bootstrap3')
 admin.add_view(MyAdminView(name="view1", category='Test'))
 admin.add_view(AnotherAdminView(name="view2", category='Test'))
 admin.init_app(app)

examples/simple/templates/admin/index.html

 {% extends 'admin/master.html' %}
 {% block body %}
 {{ super() }}
-<div class="row">
-  <div class="span10 offset1">
-    <h1>Flask-Admin example</h1>
-    <p class="lead">
-      Simple admin views, not related to models.
-    </p>
-    <p>
-      This example shows how to add your own views to the admin interface. The views do not have to be associated
-      to any of your models, and you can fill them with whatever content you want.
-    </p>
-    <p>
-      By adding custom views to the admin interface, they become accessible through the <em>navbar</em> at the top.
-    </p>
-    <a class="btn btn-primary" href="/"><i class="icon-arrow-left icon-white"></i> Back</a>
-  </div>
+<div class="container">
+    <div class="row">
+        <div class="col-sm-10 col-sm-offset-1">
+            <h1>Flask-Admin example</h1>
+            <p class="lead">
+                Simple admin views, not related to models.
+            </p>
+            <p>
+                This example shows how to add your own views to the admin interface. The views do not have to be associated
+                to any of your models, and you can fill them with whatever content you want.
+            </p>
+            <p>
+                By adding custom views to the admin interface, they become accessible through the <em>navbar</em> at the top.
+            </p>
+            <a class="btn btn-primary" href="/"><i class="glyphicon glyphicon-chevron-left"></i> Back</a>
+        </div>
+    </div>
 </div>
 {% endblock body %}

examples/sqla/app.py

@@ -144,7 +144,7 @@ class TreeView(sqla.ModelView):
 
 
 # Create admin
-admin = admin.Admin(app, name='Example: SQLAlchemy')
+admin = admin.Admin(app, name='Example: SQLAlchemy', template_mode='bootstrap3')
 
 # Add views
 admin.add_view(UserAdmin(User, db.session))

examples/sqla/app2.py

@@ -50,7 +50,7 @@ class TyreAdmin(sqla.ModelView):
     form_columns = ['car', 'tyre_id', 'desc']
 
 # Create admin
-admin = admin.Admin(app, name='Example: SQLAlchemy2')
+admin = admin.Admin(app, name='Example: SQLAlchemy2', template_mode='bootstrap3')
 admin.add_view(CarAdmin(Car, db.session))
 admin.add_view(TyreAdmin(Tyre, db.session))
 

examples/sqla/templates/admin/index.html

 {% extends 'admin/master.html' %}
 {% block body %}
 {{ super() }}
-<div class="row">
-  <div class="span10 offset1">
-    <h1>Flask-Admin example</h1>
-    <p class="lead">
-      Basic SQLAlchemy model views.
-    </p>
-    <p>
-      This example shows how to add basic CRUD-views for your SQLAlchemy models.
-    </p>
-    <p>
-      The views are generated automatically, but it is perfectly possible to customize them to suit your needs.
-    </p>
-    <a class="btn btn-primary" href="/"><i class="icon-arrow-left icon-white"></i> Back</a>
-  </div>
+<div class="container">
+    <div class="row">
+        <div class="col-sm-10 col-sm-offset-1">
+            <h1>Flask-Admin example</h1>
+            <p class="lead">
+                Basic SQLAlchemy model views.
+            </p>
+            <p>
+                This example shows how to add basic CRUD-views for your SQLAlchemy models.
+            </p>
+            <p>
+                The views are generated automatically, but it is perfectly possible to customize them to suit your needs.
+            </p>
+            <a class="btn btn-primary" href="/"><i class="glyphicon glyphicon-chevron-left"></i> Back</a>
+        </div>
+    </div>
 </div>
 {% endblock body %}