Browse Source

Started redesign from bootstrap3 to bootstrap4

Dashie der otter 1 month ago
parent
commit
67364b7e0d

+ 2
- 2
requirements.txt View File

@@ -13,14 +13,14 @@ sqlalchemy==1.2.13
13 13
 pydub==0.23.0
14 14
 bcrypt==3.1.4
15 15
 celery==4.2.1
16
-flask_bootstrap==3.3.7.1
17 16
 flask_mail==0.9.1
18 17
 flask_migrate==2.3.0
19
-git+https://github.com/mattupstate/flask-security#egg=Flask-Security
20 18
 flask_uploads==0.2.1
21 19
 wtforms_alchemy==0.16.7
22 20
 sqlalchemy_searchable==1.0.3
23 21
 flask_debugtoolbar==0.10.1
24 22
 redis==2.10.6
25 23
 flask-accept==0.0.6
24
+Bootstrap-Flask==1.0.8
25
+git+https://github.com/mattupstate/flask-security#egg=Flask-Security
26 26
 git+https://github.com/tsileo/little-boxes/#egg=little-boxes

+ 1
- 1
setup.py View File

@@ -17,7 +17,7 @@ setup(
17 17
         "SQLAlchemy-Searchable",
18 18
         "SQLAlchemy-Utils",
19 19
         "SQLAlchemy-Continuum",
20
-        "Flask-Bootstrap",
20
+        "Bootstrap-Flask",
21 21
         "Flask-DebugToolbar",
22 22
         "Flask-Login",
23 23
         "Flask-Mail",

+ 0
- 1
static/css/bootstrap.min.css.map
File diff suppressed because it is too large
View File


+ 1
- 4
static/css/style.css View File

@@ -3,11 +3,8 @@
3 3
  */
4 4
 
5 5
 body {
6
-    padding-top: 70px;
7
-    padding-bottom: 20px;
8
-    clear: both;
9
-
10 6
     font-family: "PingFang SC", "Helvetica Neue", "Microsoft YaHei", Arial, Helvetica, sans-serif !important;
7
+    padding-top: 120px;
11 8
 }
12 9
 
13 10
 footer {

+ 2445
- 0
static/js/popper.js
File diff suppressed because it is too large
View File


+ 5
- 0
static/js/popper.min.js
File diff suppressed because it is too large
View File


+ 45
- 0
templates/bootstrap/flash.html View File

@@ -0,0 +1,45 @@
1
+{% macro flashed_messages(messages=None, container=True, transform={
2
+  'critical': 'danger',
3
+  'error': 'danger',
4
+  'info': 'info',
5
+  'warning': 'warning',
6
+  'debug': 'info',
7
+  'notset': 'info',
8
+  'message': 'info',
9
+}, default_category=None, dismissible=False) -%}
10
+{% with messages = messages or get_flashed_messages(with_categories=True) -%}
11
+{% if messages -%} {# don't output anything if there are no messages #}
12
+
13
+{% if container -%}
14
+<!-- begin message block -->
15
+<div class="container flashed-messages">
16
+  <div class="row">
17
+    <div class="col-md-12">
18
+{% endif -%}
19
+
20
+{% for cat, msg in messages %}      <div class="alert alert-{{transform.get(cat.lower(), default_category or cat)}}{% if dismissible %} alert-dismissible{% endif %}" role="alert">
21
+{% if dismissible %}        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>{% endif %}
22
+        {{msg}}
23
+      </div>
24
+{%- endfor -%}
25
+
26
+{% if container %}
27
+    </div>
28
+  </div>
29
+</div>
30
+<!-- end message block -->
31
+{% endif -%}
32
+
33
+{% endif -%}
34
+{% endwith -%}
35
+{% endmacro -%}
36
+
37
+
38
+{% macro icon(type=None, extra_classes=[]) -%}
39
+<span{{ ({'class': (['glyphicon', 'glyphicon-' + type] + extra_classes)|join(' ')})|xmlattr}}{{kwargs|xmlattr}}></span>
40
+{%- endmacro %}
41
+
42
+
43
+{% macro form_button(url, content, method='post', class='btn-link') -%}
44
+<form style="display: inline;" action='{{url}}' method='{{method}}'><button class="{{class|safe}}">{{content}}</button></form>
45
+{%- endmacro %}

+ 86
- 81
templates/layout.jinja2 View File

@@ -1,113 +1,117 @@
1
-{% import "bootstrap/utils.html" as butils %}
1
+{% import "bootstrap/flash.html" as bf %}
2
+
2 3
 <!DOCTYPE html>
3 4
 <html lang="en">
4 5
 <head>
5 6
     <meta charset="utf-8">
6 7
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
-    <meta name="viewport" content="width=device-width, initial-scale=1">
8
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8 9
     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
9 10
     <meta name="description" content="">
10 11
     <meta name="author" content="">
11 12
 
12
-    <link rel="icon" href="{{AppSubURL}}/favicon.ico">
13
-
14 13
     <title>
15
-    {% block title %}{% if pcfg and pcfg['title'] %}
16
-        {{ pcfg['title'] }} - {{ g.cfg['app_name'] }}
17
-    {% else %}
18
-        {{  g.cfg['app_name'] }}
19
-    {% endif %}{% endblock %}
14
+        {% block title %}{% if pcfg and pcfg['title'] %}
15
+            {{ pcfg['title'] }} - {{ g.cfg['app_name'] }}
16
+        {% else %}
17
+            {{ g.cfg['app_name'] }}
18
+        {% endif %}{% endblock %}
20 19
     </title>
21 20
 
21
+
22 22
     <!-- Bootstrap core CSS -->
23 23
     <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
24
-
25
-    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
26
-    <link href="{{ url_for('static', filename='css/ie10-viewport-bug-workaround.css') }}" rel="stylesheet">
27
-
28
-    <link href="{{ url_for('static', filename='css/fork-awesome.min.css') }}" rel="stylesheet">
29 24
     <link href="{{ url_for('static', filename='css/datatables.min.css') }}" rel="stylesheet">
30
-    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
25
+    <link href="{{ url_for('static', filename='css/fork-awesome.min.css') }}" rel="stylesheet">
31 26
 
32
-    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
33
-    <!--[if lt IE 9]>
34
-      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
35
-      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
36
-    <![endif]-->
27
+    <!-- Custom styles for this template -->
28
+    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
37 29
 
38 30
     {% block styles %}{% endblock %}
39 31
 
40 32
     {% block opengraph %}
41
-        <meta content="{{ g.cfg['app_name'] }}" property="og:site_name" />
33
+        <meta content="{{ g.cfg['app_name'] }}" property="og:site_name"/>
42 34
         <meta property="og:title" content="{{ g.cfg['app_name'] }} - Upload and share sound tracks">
43 35
         <meta property="og:description" content="{{ g.cfg['app_description'] }}">
44 36
     {% endblock %}
37
+
45 38
 </head>
46 39
 
47 40
 <body>
48 41
 
49
-<nav class="navbar navbar-default navbar-fixed-top">
50
-    <div class="container">
51
-        <div class="navbar-header">
52
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
53
-                <span class="sr-only">{{ gettext('Toggle navigation') }}</span>
54
-                <span class="icon-bar"></span>
55
-                <span class="icon-bar"></span>
56
-                <span class="icon-bar"></span>
57
-            </button>
58
-            <a class="navbar-brand" href="{{ url_for('bp_main.home') }}">{{ g.cfg['app_name'] }}</a>
59
-        </div>
60
-        <div id="navbar" class="navbar-collapse collapse">
61
-            <ul class="nav navbar-nav">
62
-                {% if current_user.is_authenticated %}
63
-                    <li><a href="{{ url_for('bp_sound.upload') }}">{{ gettext('Upload') }}</a></li>
64
-                    <li><a href="{{ url_for('bp_albums.new', username=current_user.name) }}">{{ gettext('New album') }}</a></li>
65
-                    <li><a href="{{ url_for('bp_users.profile', name=current_user.name) }}">{{ gettext('My Profile') }}</a></li>
66
-                {% endif %}
67
-            </ul>
68
-            <ul class="nav navbar-nav navbar-right">
69
-                {% if request.endpoint %}
70
-
71
-                    <form action="{{ url_for('bp_search.users') }}" class="navbar-form navbar-left" role="search" method="get">
72
-                      <div class="input-group">
42
+<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
43
+    <a class="navbar-brand" href="{{ url_for('bp_main.home') }}">{{ g.cfg['app_name'] }}</a>
44
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
45
+            aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
46
+        <span class="navbar-toggler-icon"></span>
47
+    </button>
48
+
49
+    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
50
+        <ul class="navbar-nav mr-auto">
51
+            {% if current_user.is_authenticated %}
52
+                <li class="nav-item"><a class="nav-link"
53
+                                        href="{{ url_for('bp_sound.upload') }}"><i class="fa fa-cloud-upload" aria-hidden="true"></i> {{ gettext('Upload') }}</a></li>
54
+                <li class="nav-item"><a class="nav-link"
55
+                                        href="{{ url_for('bp_albums.new', username=current_user.name) }}"><i class="fa fa-folder-open" aria-hidden="true"></i> {{ gettext('New album') }}</a>
56
+                </li>
57
+                <li class="nav-item"><a class="nav-link"
58
+                                        href="{{ url_for('bp_users.profile', name=current_user.name) }}"><i class="fa fa-user-circle" aria-hidden="true"></i> {{ gettext('My Profile') }}</a>
59
+                </li>
60
+            {% endif %}
61
+        </ul>
62
+
63
+        <ul class="navbar-nav ml-auto">
64
+            {% if request.endpoint %}
65
+                <form action="{{ url_for('bp_search.users') }}" class="navbar-form navbar-left" role="search"
66
+                      method="get">
67
+                    <div class="input-group">
73 68
                         <input name="who" type="text" class="search-input form-control" placeholder="Search user">
74
-                      </div>
75
-                    </form>
76
-
77
-                    <li class="{% if request.endpoint.startswith('bp_main.about') %}active{% endif %}"><a href="{{ url_for('bp_main.about') }}">{{ gettext('About') }}</a></li>
78
-                    {% if current_user.is_authenticated %}
79
-                        <li class="dropdown">
80
-                          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ gettext('Logged as %(username)s', username=current_user.name) }} <span class="caret"></span></a>
81
-                          <ul class="dropdown-menu">
82
-                              <li class="dropdown-header">{{ gettext('User') }}</li>
83
-                              <li><a href="{{ url_for('bp_users.profile', name=current_user.name) }}">{{ gettext('Profile') }}</a></li>
84
-                              <li><a href="{{ url_for('bp_users.logs') }}">{{ gettext('Logs') }}</a></li>
85
-                              {% if is_admin() %}
86
-                                  <li role="separator" class="divider"></li>
87
-                                  <li class="dropdown-header">{{ gettext('Admin') }}</li>
88
-                                  <li><a href="{{ url_for('bp_admin.config') }}">{{ gettext('App config') }}</a></li>
89
-                                  <li><a href="{{ url_for('bp_admin.logs') }}">{{ gettext('App logs') }}</a></li>
90
-                              {% endif %}
91
-                              <li role="separator" class="divider"></li>
92
-                              <li><a href="{{ url_for_security('change_password') }}">{{ gettext('Change password') }}</a></li>
93
-                              <li><a href="{{ url_for_security('logout') }}">{{ gettext('Logout') }}</a></li>
94
-                            </ul>
69
+                    </div>
70
+                </form>
71
+
72
+                <li class="nav-item {% if request.endpoint.startswith('bp_main.about') %}active{% endif %}"><a
73
+                        class="nav-link" href="{{ url_for('bp_main.about') }}">{{ gettext('About') }}</a></li>
74
+                {% if current_user.is_authenticated %}
75
+                    <li class="nav-item dropdown">
76
+                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
77
+                           aria-expanded="false">Logged as {{ current_user.name }}</a>
78
+                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown_user">
79
+                            <h6 class="dropdown-header"><i class="fa fa-user" aria-hidden="true"></i> {{ gettext("User") }}</h6>
80
+                            <a class="dropdown-item"
81
+                               href="{{ url_for('bp_users.profile', name=current_user.name) }}">{{ gettext('Profile') }}</a>
82
+                            <a class="dropdown-item" href="{{ url_for('bp_users.logs') }}">{{ gettext('Logs') }}</a>
83
+                            {% if is_admin() %}
84
+                                <div class="dropdown-divider"></div>
85
+                                <h6 class="dropdown-header"><i class="fa fa-cogs" aria-hidden="true"></i> {{ gettext('Admin') }}</h6>
86
+                                <a class="dropdown-item"
87
+                                   href="{{ url_for('bp_admin.config') }}">{{ gettext('App config') }}</a>
88
+                                <a class="dropdown-item"
89
+                                   href="{{ url_for('bp_admin.logs') }}">{{ gettext('App logs') }}</a>
90
+                            {% endif %}
91
+                            <div class="dropdown-divider"></div>
92
+                            <a class="dropdown-item"
93
+                               href="{{ url_for_security('change_password') }}">{{ gettext('Change password') }}</a>
94
+                            <a class="dropdown-item" href="{{ url_for_security('logout') }}">{{ gettext('Logout') }}</a>
95
+                        </div>
96
+                    </li>
97
+                {% else %}
98
+                    {% if security.registerable %}
99
+                        <li class="nav-item {% if request.endpoint.startswith('security.register') %}active{% endif %}">
100
+                            <a class="nav-link" href="{{ url_for_security('register') }}">{{ gettext('Register') }}</a>
95 101
                         </li>
96
-                    {% else %}
97
-                        {% if security.registerable %}
98
-                            <li class="{% if request.endpoint.startswith('security.register') %}active{% endif %}"><a href="{{ url_for_security('register') }}">{{ gettext('Register') }}</a></li>
99
-                        {% endif %}
100
-                        <li class="{% if request.endpoint.startswith('security.login') %}active{% endif %}"><a href="{{ url_for_security('login') }}">{{ gettext('Login') }}</a></li>
101 102
                     {% endif %}
103
+                    <li class="nav-item {% if request.endpoint.startswith('security.login') %}active{% endif %}"><a
104
+                            class="nav-link" href="{{ url_for_security('login') }}">{{ gettext('Login') }}</a></li>
105
+
102 106
                 {% endif %}
103
-            </ul>
104
-        </div><!--/.nav-collapse -->
107
+            {% endif %}
108
+        </ul>
105 109
     </div>
106 110
 </nav>
107 111
 
108
-<div class="container">
109
-    <div class="row">
110
-        <div class="col-lg-6 col-lg-offset-3">{{ butils.flashed_messages(container=False) }}</div>
112
+<main role="main" class="container">
113
+    <div class="row justify-content-center">
114
+        <div class="col-6">{{ bf.flashed_messages(container=False) }}</div>
111 115
     </div>
112 116
 
113 117
     {% block content %}{% endblock %}
@@ -115,7 +119,9 @@
115 119
     <footer>
116 120
         <div>
117 121
             <div class="left">
118
-                &copy; 2017-2018 reel2bits - {{ gettext("version: %(version)s", version=g.cfg['REEL2BITS_VERSION']) }}{% if current_user.is_authenticated %} - {{ gettext('Logged as %(username)s', username=current_user.name) }}{% endif %}
122
+                &copy; 2017-2018 reel2bits - {{ gettext("version: %(version)s", version=g.cfg['REEL2BITS_VERSION']) }}
123
+                    {% if current_user.is_authenticated %} -
124
+                        {{ gettext('Logged as %(username)s', username=current_user.name) }}{% endif %}
119 125
             </div>
120 126
             <div class="right">
121 127
                 <a target="_blank" href="https://dev.sigpipe.me/dashie/reel2bits">{{ gettext("Sources") }}</a>
@@ -124,21 +130,20 @@
124 130
             </div>
125 131
         </div>
126 132
     </footer>
127
-</div> <!-- /container -->
133
+
134
+</main><!-- /.container -->
128 135
 
129 136
 
130 137
 <!-- Bootstrap core JavaScript
131 138
 ================================================== -->
132 139
 <!-- Placed at the end of the document so the pages load faster -->
133 140
 <script src="{{ url_for('static', filename='js/jquery-3.3.1.min.js') }}"></script>
141
+<script src="{{ url_for('static', filename='js/popper.min.js') }}"></script>
134 142
 <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
135
-<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
136
-<script src="{{ url_for('static', filename='js/ie10-viewport-bug-workaround.js') }}"></script>
137 143
 <script src="{{ url_for('static', filename='js/jquery.bootstrap-growl.min.js') }}"></script>
138 144
 <script src="{{ url_for('static', filename='js/global.js') }}"></script>
139 145
 <script src="{{ url_for('static', filename='js/datatables.min.js') }}"></script>
140 146
 <script src="{{ url_for('static', filename='js/wavesurfer.min.js') }}"></script>
141 147
 {% block scripts %}{% endblock %}
142
-
143 148
 </body>
144 149
 </html>

+ 1
- 1
templates/security/_macros.html View File

@@ -10,6 +10,6 @@
10 10
 {% if value %}
11 11
 <span class="fa fa-check"></span>
12 12
 {% else %}
13
-<span class="fa fa-remove"></span>
13
+<span class="fa fa-times"></span>
14 14
 {% endif %}
15 15
 {% endmacro %}

+ 10
- 16
templates/security/change_password.html View File

@@ -1,22 +1,16 @@
1 1
 {% extends "layout.jinja2" %}
2
-{% import "bootstrap/wtf.html" as wtf %}
2
+{% import 'bootstrap/form.html' as bf4 %}
3 3
 
4 4
 {% block content %}
5
-    <div class="row">
6
-        <div class="col-md-6 col-md-offset-3 columns">
7
-            <div class="panel">
8
-                <form action="{{ url_for_security('change_password') }}" method="POST" name="change_password_form" role="form">
9
-                    <h3>{{ gettext("Set a new password") }}</h3>
10
-                    {{ change_password_form.hidden_tag() }}
11
-                    {{ wtf.form_errors(change_password_form, hiddens="only") }}
12
-                    <fieldset>
13
-                        {{ wtf.form_field(change_password_form.password) }}
14
-                        {{ wtf.form_field(change_password_form.new_password) }}
15
-                        {{ wtf.form_field(change_password_form.new_password_confirm) }}
16
-                        {{ wtf.form_field(change_password_form.submit, button_map={'submit': 'success'}) }}
17
-                    </fieldset>
18
-                </form>
19
-            </div>
5
+    <div class="row justify-content-center">
6
+        <div class="col-8">
7
+            <h3>{{ gettext("Set a new password") }}</h3>
8
+        </div>
9
+    </div>
10
+
11
+    <div class="row justify-content-center">
12
+        <div class="col-8">
13
+            {{ bf4.render_form(change_password_form, action=url_for_security('change_password'), horizontal_columns=('lg', 3, 5), form_type='horizontal', button_map={'submit': 'success'}) }}
20 14
         </div>
21 15
     </div>
22 16
 {% endblock %}

+ 9
- 14
templates/security/forgot_password.html View File

@@ -1,21 +1,16 @@
1 1
 {% extends "layout.jinja2" %}
2
-{% import "bootstrap/wtf.html" as wtf %}
2
+{% import 'bootstrap/form.html' as bf4 %}
3 3
 
4 4
 {% block content %}
5
-<div class="container">
6
-    <div class="row">
7
-        <div class="col-md-6 col-md-offset-3">
8
-            <h3>{{ gettext("You lost your password ? :'(") }}</h3>
9
-            <form action="{{ url_for_security('forgot_password') }}" method="POST" name="reset_password_form" role="form" class="form">
10
-                {{ forgot_password_form.hidden_tag() }}
11
-                {{ wtf.form_errors(forgot_password_form, hiddens="only") }}
12
-
13
-                {{ wtf.form_field(forgot_password_form.email) }}
5
+    <div class="row justify-content-center">
6
+        <div class="col-8">
7
+            <h3>{{ gettext("You lost your password ?") }}</h3>
8
+        </div>
9
+    </div>
14 10
 
15
-                {{ wtf.form_field(forgot_password_form.submit, button_map={'submit': 'success'}) }}
16
-            </form>
11
+    <div class="row justify-content-center">
12
+        <div class="col-8">
13
+            {{ bf4.render_form(forgot_password_form, action=url_for_security('forgot_password'), horizontal_columns=('lg', 3, 5), form_type='horizontal', button_map={'submit': 'success'}) }}
17 14
         </div>
18 15
     </div>
19
-</div>
20 16
 {% endblock %}
21
-

+ 9
- 21
templates/security/login_user.html View File

@@ -1,28 +1,16 @@
1 1
 {% extends "layout.jinja2" %}
2
-{% import "bootstrap/wtf.html" as wtf %}
2
+{% import 'bootstrap/form.html' as bf4 %}
3 3
 
4 4
 {% block content %}
5
-<div class="row">
6
-    <div class="col-md-4 col-md-offset-4">
7
-        <div class="login-panel panel panel-default">
8
-            <div class="panel-heading">
9
-                <h3 class="panel-title">{{ gettext('Please Sign In') }}</h3>
10
-            </div>
11
-            <div class="panel-body">
12
-                <form action="{{ url_for_security('login') }}" method="POST" name="login_user_form" role="form" class="form">
13
-                    {{ login_user_form.hidden_tag() }}
14
-                    {{ wtf.form_errors(login_user_form, hiddens="only") }}
15
-
16
-                    {{ wtf.form_field(login_user_form.email) }}
17
-                    {{ wtf.form_field(login_user_form.password) }}
18
-
19
-                    {{ wtf.form_field(login_user_form.remember) }}
5
+    <div class="row justify-content-center">
6
+        <div class="col-8">
7
+            <h3>{{ gettext("Please Sign In") }}</h3>
8
+        </div>
9
+    </div>
20 10
 
21
-                    {{ wtf.form_field(login_user_form.submit, button_map={'submit': 'success'}) }}
22
-                    <a href="{{ url_for('security.forgot_password') }}" role="button" class="btn btn-info">{{ gettext("forgot password :(") }}</a>
23
-                </form>
24
-            </div>
11
+    <div class="row justify-content-center">
12
+        <div class="col-8">
13
+            {{ bf4.render_form(login_user_form, action=url_for_security('login'), render_kw={'name': "login_user_form"}, horizontal_columns=('lg', 3, 5), form_type='horizontal', button_map={'submit': 'success'}) }}
25 14
         </div>
26 15
     </div>
27
-</div>
28 16
 {% endblock %}

+ 9
- 19
templates/security/register_user.html View File

@@ -1,26 +1,16 @@
1 1
 {% extends "layout.jinja2" %}
2
-{% import "bootstrap/wtf.html" as wtf %}
2
+{% import 'bootstrap/form.html' as bf4 %}
3 3
 
4 4
 {% block content %}
5
-<div class="container">
6
-    <div class="row">
7
-        <div class="col-md-6 col-md-offset-3">
8
-            <h3>{{ gettext('Register user') }}</h3>
9
-            <form action="{{ url_for_security('register') }}" method="POST" name="register_user_form" role="form" class="form">
10
-                {{ register_user_form.hidden_tag() }}
11
-                {{ wtf.form_errors(register_user_form, hiddens="only") }}
12
-
13
-                {{ wtf.form_field(register_user_form.email) }}
14
-                {{ wtf.form_field(register_user_form.name) }}
15
-                {{ wtf.form_field(register_user_form.password) }}
16
-                {% if register_user_form.password_confirm %}
17
-                    {{ wtf.form_field(register_user_form.password_confirm) }}
18
-                {% endif %}
5
+    <div class="row justify-content-center">
6
+        <div class="col-8">
7
+            <h3>{{ gettext("Register user") }}</h3>
8
+        </div>
9
+    </div>
19 10
 
20
-                {{ wtf.form_field(register_user_form.submit, button_map={'submit': 'success'}) }}
21
-            </form>
11
+    <div class="row justify-content-center">
12
+        <div class="col-8">
13
+            {{ bf4.render_form(register_user_form, action=url_for_security('register'), horizontal_columns=('lg', 3, 5), form_type='horizontal', button_map={'submit': 'success'}) }}
22 14
         </div>
23 15
     </div>
24
-</div>
25 16
 {% endblock %}
26
-

+ 9
- 14
templates/security/reset_password.html View File

@@ -1,21 +1,16 @@
1 1
 {% extends "layout.jinja2" %}
2
-{% import "bootstrap/wtf.html" as wtf %}
2
+{% import 'bootstrap/form.html' as bf4 %}
3 3
 
4 4
 {% block content %}
5
-<div class="container">
6
-    <div class="row">
7
-        <div class="col-md-6 col-md-offset-3">
8
-            <form action="{{ url_for_security('reset_password') }}" method="POST" name="reset_password_form" role="form" class="form">
9
-                {{ reset_password_form.hidden_tag() }}
10
-                {{ wtf.form_errors(reset_password_form, hiddens="only") }}
11
-
12
-                {{ wtf.form_field(reset_password_form.password) }}
13
-                {{ wtf.form_field(reset_password_form.password_confirm) }}
5
+    <div class="row justify-content-center">
6
+        <div class="col-8">
7
+            <h3>{{ gettext("Reset Password") }}</h3>
8
+        </div>
9
+    </div>
14 10
 
15
-                {{ wtf.form_field(reset_password_form.submit, button_map={'submit': 'success'}) }}
16
-            </form>
11
+    <div class="row justify-content-center">
12
+        <div class="col-8">
13
+            {{ bf4.render_form(reset_password_form, action=url_for_security('reset_password'), horizontal_columns=('lg', 3, 5), form_type='horizontal', button_map={'submit': 'success'}) }}
17 14
         </div>
18 15
     </div>
19
-</div>
20 16
 {% endblock %}
21
-

+ 10
- 13
templates/security/send_confirmation.html View File

@@ -1,19 +1,16 @@
1 1
 {% extends "layout.jinja2" %}
2
-{% import "bootstrap/wtf.html" as wtf %}
2
+{% import 'bootstrap/form.html' as bf4 %}
3 3
 
4 4
 {% block content %}
5
-<div class="container">
6
-    <div class="row">
7
-        <div class="col-md-6 col-md-offset-3">
8
-            <form action="{{ url_for_security('send_confirmation') }}" method="POST" name="send_confirmation_form" role="form" class="form">
9
-                {{ send_confirmation_form.hidden_tag() }}
10
-                {{ wtf.form_errors(send_confirmation_form, hiddens="only") }}
11
-
12
-                {{ wtf.form_field(send_confirmation_form.email) }}
5
+    <div class="row justify-content-center">
6
+        <div class="col-8">
7
+            <h3>{{ gettext("Send Confirmation") }}</h3>
8
+        </div>
9
+    </div>
13 10
 
14
-                {{ wtf.form_field(send_confirmation_form.submit, button_map={'submit': 'success'}) }}
15
-            </form>
11
+    <div class="row justify-content-center">
12
+        <div class="col-8">
13
+            {{ bf4.render_form(send_confirmation_form, action=url_for_security('send_confirmation'), horizontal_columns=('lg', 3, 5), form_type='horizontal', button_map={'submit': 'success'}) }}
16 14
         </div>
17 15
     </div>
18
-</div>
19
-{% endblock %}
16
+{% endblock %}

+ 10
- 13
templates/security/send_login.html View File

@@ -1,19 +1,16 @@
1 1
 {% extends "layout.jinja2" %}
2
-{% import "bootstrap/wtf.html" as wtf %}
2
+{% import 'bootstrap/form.html' as bf4 %}
3 3
 
4 4
 {% block content %}
5
-<div class="container">
6
-    <div class="row">
7
-        <div class="col-md-6 col-md-offset-3">
8
-            <form action="{{ url_for_security('login') }}" method="POST" name="send_login_form" role="form" class="form">
9
-                {{ send_login_form.hidden_tag() }}
10
-                {{ wtf.form_errors(send_login_form, hiddens="only") }}
11
-
12
-                {{ wtf.form_field(send_login_form.email) }}
5
+    <div class="row justify-content-center">
6
+        <div class="col-8">
7
+            <h3>{{ gettext("Send Login") }}</h3>
8
+        </div>
9
+    </div>
13 10
 
14
-                {{ wtf.form_field(send_login_form.submit, button_map={'submit': 'success'}) }}
15
-            </form>
11
+    <div class="row justify-content-center">
12
+        <div class="col-8">
13
+            {{ bf4.render_form(send_login_form, action=url_for_security('login'), horizontal_columns=('lg', 3, 5), form_type='horizontal', button_map={'submit': 'success'}) }}
16 14
         </div>
17 15
     </div>
18
-</div>
19
-{% endblock %}
16
+{% endblock %}

Loading…
Cancel
Save