More page formatting

Added server-side logic for register.html validation Keep form firelds on register.html in the event of wrong input fields to save users from retyping info More button rounding
2024-11-08 14:40:27 +00:00 · 2023-02-13 03:57:21 +00:00 · 2023-02-13 03:57:21 +00:00 · c00ddea2fc
commit c00ddea2fc
parent d38a919644
24 changed files with 1234 additions and 1125 deletions
--- a/powerdnsadmin/routes/index.py
+++ b/powerdnsadmin/routes/index.py
@ -653,6 +653,8 @@ def logout():
 def register():
  CAPTCHA_ENABLE = current_app.config.get('CAPTCHA_ENABLE')
  if Setting().get('signup_enabled'):
+    if current_user.is_authenticated:
+      return redirect(url_for('index.index'))
    if request.method == 'GET':
      return render_template('register.html', captcha_enable=CAPTCHA_ENABLE)
    elif request.method == 'POST':
@ -663,24 +665,40 @@ def register():
      email = request.form.get('email', '').strip()
      rpassword = request.form.get('rpassword', '')

-            if not username or not password or not email:
-                return render_template(
-                    'register.html', error='Please input required information', captcha_enable=CAPTCHA_ENABLE)
+      is_valid_email = re.compile(r'[\w\.-]+@[\w\.-]+')

+      error_messages = {}
+      if not firstname:
+        error_messages['firstname'] = 'First Name is required'
+      if not lastname:
+        error_messages['lastname'] = 'Last Name is required'
+      if not username:
+        error_messages['username'] = 'Username is required'
+      if not password:
+        error_messages['password'] = 'Password is required'
+      if not rpassword:
+        error_messages['rpassword'] = 'Password confirmation is required'
+      if not email:
+        error_messages['email'] = 'Email is required'
+      if not is_valid_email.match(email):
+        error_messages['email'] = 'Invalid email address'
      if password != rpassword:
-                return render_template(
-                    'register.html',
-                    error="Password confirmation does not match", captcha_enable=CAPTCHA_ENABLE)
+        error_messages['password'] = 'Password confirmation does not match'
+        error_messages['rpassword'] = 'Password confirmation does not match'

      if not captcha.validate():
        return render_template(
-                    'register.html', error='Invalid CAPTCHA answer', captcha_enable=CAPTCHA_ENABLE)
+          'register.html', error='Invalid CAPTCHA answer', error_messages=error_messages, captcha_enable=CAPTCHA_ENABLE)
+
+      if error_messages:
+        return render_template('register.html', error_messages=error_messages, captcha_enable=CAPTCHA_ENABLE)

      user = User(username=username,
        plain_text_password=password,
        firstname=firstname,
        lastname=lastname,
-                        email=email)
+        email=email
+      )

      try:
        result = user.create_local_user()
--- a/powerdnsadmin/templates/admin_edit_account.html
+++ b/powerdnsadmin/templates/admin_edit_account.html
@ -1,9 +1,14 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_accounts" %}
-{% block title %}<title>Edit Account - {{ SITE_NAME }}</title>{% endblock %}
+
+{% block title %}
+<title>
+  Edit Account - {{ SITE_NAME }}
+</title>
+{% endblock %}

 {% block dashboard_stat %}
-<!-- Content Header (Page header) -->
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
@ -30,7 +35,7 @@
  <div class="container-fluid">
    <div class="row">
      <div class="col-4">
-        <div class="card card-primary">
+        <div class="card shadow">
          <div class="card-header with-border">
            <h3 class="card-title">{% if create %}Add{% else %}Edit{% endif %} account</h3>
          </div>
@ -107,8 +112,8 @@
          </form>
        </div>
      </div>
-      <div class="col-6">
-        <div class="card card-primary">
+      <div class="col-8">
+        <div class="card shadow">
          <div class="card-header with-border">
            <h3 class="card-title">Help with creating a new account</h3>
          </div>
--- a/powerdnsadmin/templates/admin_edit_key.html
+++ b/powerdnsadmin/templates/admin_edit_key.html
@ -1,11 +1,16 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_keys" %}
+
 {% if (key is not none and key.role.name != "User") %}{% set hide_opts = True %}{%else %}{% set hide_opts = False %}{% endif %}
+
 {% block title %}
-<title>Edit Key - {{ SITE_NAME }}</title>
+  <title>
+    Edit Key - {{ SITE_NAME }}
+  </title>
 {% endblock %}
+
 {% block dashboard_stat %}
-<!-- Content Header (Page header) -->
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
@ -25,19 +30,17 @@
      </div>
    </div>
  </div>
-
 {% endblock %}

 {% block content %}
 <section class="content">
+  <div class="container-fluid">
  <div class="row">
    <div class="col-4">
      <div class="card card-primary">
        <div class="card-header with-border">
          <h3 class="card-title">{% if create %}Add{% else %}Edit{% endif %} Key</h3>
        </div>
-                <!-- /.box-header -->
-                <!-- form start -->
        <form role="form" method="post"
        action="{% if create %}{{ url_for('admin.edit_key') }}{% else %}{{ url_for('admin.edit_key', key_id=key.id) }}{% endif %}">
          <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
@ -49,16 +52,17 @@
                {% for role in roles %}
                  <option value="{{ role.name }}"
                  {% if (key is not none) and (role.id==key.role.id) %}selected{% endif %}
-                                {% if (key is none) and (role.name=="User") %}selected{% endif %}
-                                >{{ role.name }}</option>
+                  {% if (key is none) and (role.name=="User") %}selected{% endif %}>
+                    {{ role.name }}
+                  </option>
                {% endfor %}
              </select>
            </div>
            <div class="form-group has-feedback">
              <label class="control-label" for="description">Description</label>
                <input type="text" class="form-control" placeholder="Description" name="description"
-                                {% if key is not none %} value="{{ key.description }}" {% endif %}> <span
-                                class="glyphicon glyphicon-pencil form-control-feedback"></span>
+                {% if key is not none %} value="{{ key.description }}" {% endif %}>
+                <span class="glyphicon glyphicon-pencil form-control-feedback"></span>
              </div>
            </div>
            <div class="card-header with-border key-opts"{% if hide_opts %} style="display: none;"{% endif %}>
@ -69,8 +73,7 @@
              <p>thus granting access to domains owned by the selected accounts.</p>
              <p>Click on accounts to move between the columns.</p>
              <div class="form-group col-2">
-                          <select multiple="multiple" class="form-control" id="key_multi_account"
-                              name="key_multi_account">
+                <select multiple="multiple" class="form-control" id="key_multi_account" name="key_multi_account">
                  {% for account in accounts %}
                    <option {% if key and account in key.accounts %}selected{% endif %} value="{{ account.name }}">{{ account.name }}</option>
                  {% endfor %}
@ -115,8 +118,10 @@
            </div>
        </div>
    </div>
+    </div>
 </section>
 {% endblock %}
+
 {% block extrascripts %}
 <script>
    $('form').submit(function (e) {
--- a/powerdnsadmin/templates/admin_global_search.html
+++ b/powerdnsadmin/templates/admin_global_search.html
@ -1,44 +1,44 @@
 {% extends "base.html" %}
-{% set active_page = "admin_global_search" %}
-{% block title %}
-<title>Global Search - {{ SITE_NAME }}</title>
-{% endblock %} {% block dashboard_stat %}
-<!-- Content Header (Page header) -->
-<section class="content-header">
-    <h1>
-        Global Search <small>Search for domains, records and comments directly from PDNS API</small>
-    </h1>
-    <ol class="breadcrumb">
-        <li><a href="{{ url_for('dashboard.dashboard') }}"><i class="fa fa-dashboard"></i> Home</a></li>
-        <li class="active">Global Search</li>
-    </ol>
-</section>

+{% set active_page = "admin_global_search" %}
+
+{% block title %}
+  <title>
+    Global Search - {{ SITE_NAME }}
+  </title>
+{% endblock %}
+
+{% block dashboard_stat %}
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0 text-dark">
-            Dashboard
-            <small>Control panel</small>
+            Global Search
+            <small>Search for domains, records and comments directly from PDNS API</small>
          </h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
-            <li class="breadcrumb-item"><a href="#">Home</a></li>
-            <li class="breadcrumb-item active">Dashboard v1</li>
+            <li class="breadcrumb-item"><a href="{{ url_for('dashboard.dashboard') }}">Dashboard</a></li>
+            <li class="breadcrumb-item active">Global Search</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
+{% endblock %}

-{% endblock %} {% block content %}
+{% block content %}
  <section class="content">
+    <div class="container-fluid">
      <div class="row">
-        <div class="col-xs-12">
-            <div class="box-body">
-                <!-- search form -->
+        <div class="col-12">
+          <div class="card shadow">
+            <div class="card-header">
+              <h3 class="card-title">Global Search</h3>
+            </div>
+            <div class="card-body">
              <form action="" method="get">
                <div class="input-group">
                  <input type="text" name="q" class="form-control" placeholder="Your keyword...">
@ -50,19 +50,21 @@
              <div>
                <p><b>Hints:</b> The * character can be used in your keyword as a wildcard character and the ? character can be used as
                  a wildcard for a
-                        single character.</p>
-                </div>
-                <!-- /.search form -->
+                  single character.
+                </p>
              </div>
            </div>
          </div>
+        </div>
+      </div>
+
      <div class="row">
-        <div class="col-xs-12">
-            <div class="box">
-                <div class="box-header">
-                    <h3 class="box-title">Domains ({{ domains|length }})</h3>
+        <div class="col-12">
+          <div class="card shadow">
+            <div class="card-header">
+              <h3 class="card-title">Domains ({{ domains|length }})</h3>
            </div>
-                <div class="box-body">
+            <div class="card-body">
              <table id="tbl_domain" class="table table-bordered table-striped">
                <thead>
                  <tr>
@ -80,20 +82,17 @@
                </tbody>
              </table>
            </div>
-                <!-- /.box-body -->
          </div>
-            <!-- /.box -->
        </div>
-        <!-- /.col -->
      </div>

      <div class="row">
-        <div class="col-xs-12">
-            <div class="box">
-                <div class="box-header">
-                    <h3 class="box-title">Records ({{ records|length }})</h3>
+        <div class="col-12">
+          <div class="card shadow">
+            <div class="card-header">
+              <h3 class="card-title">Records ({{ records|length }})</h3>
            </div>
-                <div class="box-body">
+            <div class="card-body">
              <table id="tbl_record" class="table table-bordered table-striped">
                <thead>
                  <tr>
@ -119,20 +118,17 @@
                </tbody>
              </table>
            </div>
-                <!-- /.box-body -->
          </div>
-            <!-- /.box -->
        </div>
-        <!-- /.col -->
      </div>

      <div class="row">
-        <div class="col-xs-12">
-            <div class="box">
-                <div class="box-header">
-                    <h3 class="box-title">Comments ({{ comments|length }})</h3>
+        <div class="col-12">
+          <div class="card shadow">
+            <div class="card-header">
+              <h3 class="card-title">Comments ({{ comments|length }})</h3>
            </div>
-                <div class="box-body">
+            <div class="card-body">
              <table id="tbl_comment" class="table table-bordered table-striped">
                <thead>
                  <tr>
@ -154,14 +150,13 @@
                </tbody>
              </table>
            </div>
-                <!-- /.box-body -->
          </div>
-            <!-- /.box -->
        </div>
-        <!-- /.col -->
+      </div>
    </div>
  </section>
 {% endblock %}
+
 {% block extrascripts %}
  <script>
    // set up domain result data table
@ -176,9 +171,7 @@
        [0, "asc"]
      ]
    });
-</script>

-<script>
    // set up domain result data table
    $("#tbl_record").DataTable({
      "paging": false,
@ -191,9 +184,7 @@
        [0, "asc"]
      ]
    });
-</script>

-<script>
    // set up domain result data table
    $("#tbl_comment").DataTable({
      "paging": false,
--- a/powerdnsadmin/templates/admin_history.html
+++ b/powerdnsadmin/templates/admin_history.html
@ -1,10 +1,14 @@
 {% extends "base.html" %}
-{% set active_page = "admin_history" %}
-{% block title %}
-<title>History - {{ SITE_NAME }}</title>
-{% endblock %} {% block dashboard_stat %}
-<!-- Content Header (Page header) -->

+{% set active_page = "admin_history" %}
+
+{% block title %}
+  <title>
+    History - {{ SITE_NAME }}
+  </title>
+{% endblock %}
+
+{% block dashboard_stat %}
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
@ -23,17 +27,14 @@
      </div>
    </div>
  </div>
-
 {% endblock %} 
+
 {% block content %}
 {% import 'applied_change_macro.html' as applied_change_macro %}
-
-
-
 <section class="content">
  <div class="container-fluid">
    <div class="row">
-      <div class="col-md-12">
+      <div class="col-12">
        <div class="card card-outline card-secondary">
          <div class="card-header with-border">
            <h3 class="card-title">History Management</h3>
--- a/powerdnsadmin/templates/admin_history_table.html
+++ b/powerdnsadmin/templates/admin_history_table.html
@ -6,7 +6,7 @@
  </p>
 {% endif %}

-<div class="box-body"></div>
+<div class="card-body"></div>
  <table id="tbl_history" class="table table-bordered table-striped">
    <thead>
      <tr>
--- a/powerdnsadmin/templates/admin_manage_account.html
+++ b/powerdnsadmin/templates/admin_manage_account.html
@ -1,8 +1,14 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_accounts" %}
+
 {% block title %}
-<title>Account Management - {{ SITE_NAME }}</title>
-{% endblock %} {% block dashboard_stat %}
+  <title>
+    Account Management - {{ SITE_NAME }}
+  </title>
+{% endblock %}
+
+{% block dashboard_stat %}
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
@ -21,12 +27,13 @@
      </div>
    </div>
  </div>
+{% endblock %}

-{% endblock %} {% block content %}
+{% block content %}
 <section class="content">
  <div class="container-fluid">
    <div class="row">
-      <div class="col-xs-12 col-md-12">
+      <div class="col-12">
        <div class="card card-primary">
          <div class="card-header with-border">
            <h3 class="card-title">Account Management</h3>
@ -133,8 +140,8 @@
                <p></p>
            </div>
            <div class="modal-footer">
-                <button type="button" class="btn btn-flat btn-default pull-left" data-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-flat btn-danger" id="button_delete_confirm">Delete</button>
+                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-danger" id="button_delete_confirm">Delete</button>
            </div>
        </div>
        <!-- /.modal-content -->
--- a/powerdnsadmin/templates/admin_manage_keys.html
+++ b/powerdnsadmin/templates/admin_manage_keys.html
@ -1,8 +1,14 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_keys" %}
+
 {% block title %}
-<title>Key Management - {{ SITE_NAME }}</title>
-{% endblock %} {% block dashboard_stat %}
+  <title>
+    Key Management - {{ SITE_NAME }}
+  </title>
+{% endblock %}
+
+{% block dashboard_stat %}
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
@ -21,7 +27,9 @@
      </div>
    </div>
  </div>
-{% endblock %} {% block content %}
+{% endblock %}
+
+{% block content %}
 <section class="content">
  <div class="container-fluid">
    <div class="card">
@ -74,6 +82,7 @@
  </div>
 </section>
 {% endblock %}
+
 {% block extrascripts %}
  <script>
    // set up key data table
@ -107,10 +116,10 @@
        modal.modal('hide');
      })
      modal.modal('show');
-
    });
  </script>
 {% endblock %}
+
 {% block modals %}
  <div class="modal fade modal-warning" id="modal_delete">
    <div class="modal-dialog">
@ -125,12 +134,10 @@
          <p></p>
        </div>
        <div class="modal-footer">
-                <button type="button" class="btn btn-flat btn-default pull-left" data-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-flat btn-danger" id="button_delete_confirm">Delete</button>
+          <button type="button" class="btn btn-default float-left" data-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-danger" id="button_delete_confirm">Delete</button>
        </div>
      </div>
-        <!-- /.modal-content -->
    </div>
-    <!-- /.modal-dialog -->
  </div>
 {% endblock %}
--- a/powerdnsadmin/templates/admin_manage_user.html
+++ b/powerdnsadmin/templates/admin_manage_user.html
@ -1,8 +1,14 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_users" %}
+
 {% block title %}
-<title>User Management - {{ SITE_NAME }}</title>
-{% endblock %} {% block dashboard_stat %}
+  <title>
+    User Management - {{ SITE_NAME }}
+  </title>
+{% endblock %}
+
+{% block dashboard_stat %}
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
@ -21,19 +27,21 @@
      </div>
    </div>
  </div>
-{% endblock %} {% block content %}
+{% endblock %}
+
+{% block content %}
  <section class="content">
    <div class="container-fluid">
      <div class="row">
-        <div class="col-sm-12">
+        <div class="col-12">
          <div class="card">
            <div class="card-header with-border">
              <h3 class="card-title">User Management</h3>
            </div>
            <div class="card-body">
              <a href="{{ url_for('admin.edit_user') }}">
-                        <button type="button" class="btn btn-flat btn-primary pull-left button_add_user">
-                            Add User&nbsp;<i class="fa fa-plus"></i>
+                <button type="button" class="btn btn-primary pull-left button_add_user">
+                  <i class="fa fa-plus"></i>&nbsp;Add User
                </button>
              </a>
            </div>
@ -62,27 +70,29 @@
                          {% if user.username==current_user.username or (current_user.role.name=='Operator' and user.role.name=='Administrator') %}disabled{% endif %}>
                          {% for role in roles %}
                            <option value="{{ role.name }}"
-                                            {% if role.id==user.role.id %}selected{% endif %}>{{ role.name }}</option>
+                              {% if role.id==user.role.id %}selected{% endif %}>
+                                {{ role.name }}
+                            </option>
                          {% endfor %}
                        </select>
                      </td>
                      <td width="6%">
-                                    <button type="button" class="btn btn-flat btn-warning button_revoke"
+                        <button type="button" class="btn btn-warning button_revoke"
                          id="{{ user.username }}"
                          {% if current_user.role.name=='Operator' and user.role.name=='Administrator' %}disabled{% endif %}>
-                                        Revoke&nbsp;<i class="fa fa-lock"></i>
+                            <i class="fa fa-lock"></i>&nbsp;Revoke
                        </button>
                      </td>
                      <td width="15%">
-                                    <button type="button" class="btn btn-flat btn-success button_edit"
+                        <button type="button" class="btn btn-success button_edit"
                          onclick="window.location.href='{{ url_for('admin.edit_user', user_username=user.username) }}'"
                          {% if current_user.role.name=='Operator' and user.role.name=='Administrator' %}disabled{% endif %}>
-                                        Edit&nbsp;<i class="fa fa-lock"></i>
+                            <i class="fa fa-lock"></i>&nbsp;Edit
                        </button>
-                                    <button type="button" class="btn btn-flat btn-danger button_delete"
+                        <button type="button" class="btn btn-danger button_delete"
                          id="{{ user.username }}"
                          {% if user.username==current_user.username or (current_user.role.name=='Operator' and user.role.name=='Administrator') %}disabled{% endif %}>
-                                        Delete&nbsp;<i class="fa fa-trash"></i>
+                            <i class="fa fa-trash"></i>&nbsp;Delete
                        </button>
                      </td>
                    </tr>
@ -90,16 +100,13 @@
                </tbody>
              </table>
            </div>
-                <!-- /.box-body -->
          </div>
-            <!-- /.box -->
        </div>
-        <!-- /.col -->
      </div>
-    <!-- /.row -->
    </div>
  </section>
 {% endblock %}
+
 {% block extrascripts %}
  <script>
    // set up user data table
@ -121,8 +128,8 @@
    $(document.body).on('click', '.button_revoke', function () {
      var modal = $("#modal_revoke");
      var username = $(this).prop('id');
-        var info = "Are you sure you want to revoke all privileges for " + username +
-            ". They will not able to access any domain.";
+      var info = "Are you sure you want to revoke all privileges for user " + username +
+        "? They will not able to access any domain.";
      modal.find('.modal-body p').text(info);
      modal.find('#button_revoke_confirm').click(function () {
        var postdata = {
@ -135,11 +142,12 @@
      })
      modal.modal('show');
    });
+
    // handle deletion of user
    $(document.body).on('click', '.button_delete', function () {
      var modal = $("#modal_delete");
      var username = $(this).prop('id');
-        var info = "Are you sure you want to delete " + username + "?";
+      var info = "Are you sure you want to delete user " + username + "?";
      modal.find('.modal-body p').text(info);
      modal.find('#button_delete_confirm').click(function () {
        var postdata = {
@ -151,7 +159,6 @@
        modal.modal('hide');
      })
      modal.modal('show');
-
    });

    // handle user role changing
@ -170,47 +177,45 @@
    });
  </script>
 {% endblock %}
+
 {% block modals %}
  <div class="modal fade modal-warning" id="modal_revoke">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
+          <h4 class="modal-title">Confirmation</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
-                <h4 class="modal-title">Confirmation</h4>
        </div>
        <div class="modal-body">
          <p></p>
        </div>
        <div class="modal-footer">
-                <button type="button" class="btn btn-flat btn-default pull-left" data-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-flat btn-danger" id="button_revoke_confirm">Revoke</button>
+          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-danger" id="button_revoke_confirm">Revoke</button>
        </div>
      </div>
-        <!-- /.modal-content -->
    </div>
-    <!-- /.modal-dialog -->
  </div>
+
  <div class="modal fade modal-warning" id="modal_delete">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
+          <h4 class="modal-title">Confirmation</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
-                <h4 class="modal-title">Confirmation</h4>
        </div>
        <div class="modal-body">
          <p></p>
        </div>
        <div class="modal-footer">
-                <button type="button" class="btn btn-flat btn-default pull-left" data-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-flat btn-danger" id="button_delete_confirm">Delete</button>
+          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-danger" id="button_delete_confirm">Delete</button>
        </div>
      </div>
-        <!-- /.modal-content -->
    </div>
-    <!-- /.modal-dialog -->
  </div>
 {% endblock %}
--- a/powerdnsadmin/templates/admin_pdns_stats.html
+++ b/powerdnsadmin/templates/admin_pdns_stats.html
@ -1,99 +1,92 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_console" %}
-{% block title %}<title>Admin Console - {{ SITE_NAME }}</title>{% endblock %}
+
+{% block title %}
+  <title>
+    Admin Console - {{ SITE_NAME }}
+  </title>
+{% endblock %}

 {% block dashboard_stat %}
-<!-- Content Header (Page header) -->
-<section class="content-header">
-    <h1>
-        PowerDNS server configuration & statistics
-    </h1>
-    <ol class="breadcrumb">
-        <li><a href="{{ url_for('dashboard.dashboard') }}"><i class="fa fa-dashboard"></i> Home</a></li>
-        <li class="active">Admin Console</li>
-    </ol>
-</section>
-
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0 text-dark">
-            Dashboard
-            <small>Control panel</small>
+            PowerDNS
+            <small>Server Statistics & Configuration</small>
          </h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
-            <li class="breadcrumb-item"><a href="#">Home</a></li>
-            <li class="breadcrumb-item active">Dashboard v1</li>
+            <li class="breadcrumb-item"><a href="{{ url_for('dashboard.dashboard') }}">Dashboard</a></li>
+            <li class="breadcrumb-item active">PowerDNS Server Statistics & Configuration</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
-
 {% endblock %}

 {% block content %}
  <section class="content">
+    <div class="container-fluid">
      <div class="row">
-        <div class="col-xs-12">
-            <div class="box">
-                <div class="box-header">
-                    <h3 class="box-title">PDNS Statistics</h3>
+        <div class="col-12">
+          <div class="card">
+            <div class="card-header">
+              <h3 class="card-title">PowerDNS Server Statistics</h3>
            </div>
-                <div class="box-body">
+            <div class="card-body">
              <table id="tbl_statistics" class="table table-bordered table-striped">
                <thead>
                  <tr>
-                                <th width="6%">Docs</th>
-                                <th>Statistic</th>
+                    <th width="30%">Statistic</th>
                    <th>Value</th>
                  </tr>
                </thead>
                <tbody>
                  {% for statistic in statistics %}
                    <tr class="odd gradeX">
-                                <td><a href="https://doc.powerdns.com/authoritative/search.html?q={{ statistic['name'] }}"
-                                        target="_blank" class="btn btn-flat btn-xs blue"><i
-                                            class="fa fa-search"></i></a></td>
-                                <td>{{ statistic['name'] }}</td>
+                      <td>
+                        <a href="https://doc.powerdns.com/authoritative/search.html?q={{ statistic['name'] }}"
+                        target="_blank" class="btn btn-primary">
+                          <i class="fa fa-search"></i>&nbsp;{{ statistic['name'] }}
+                        </a>
+                      </td>
                      <td>{{ statistic['value'] }}</td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
-                <!-- /.box-body -->
          </div>
-            <!-- /.box -->
        </div>
-        <!-- /.col -->
      </div>
-    <!-- /.row -->
      <div class="row">
-        <div class="col-xs-12">
-            <div class="box">
-                <div class="box-header">
-                    <h3 class="box-title">PDNS Configuration</h3>
+        <div class="col-12">
+          <div class="card">
+            <div class="card-header">
+              <h3 class="card-title">PowerDNS Server Configuration</h3>
            </div>
-                <div class="box-body">
+            <div class="card-body">
              <table id="tbl_configuration" class="table table-bordered table-striped">
                <thead>
                  <tr>
-                                <th width="6%">Docs</th>
-                                <th>Statistic</th>
+                    <th width="30%">Configuration</th>
                    <th>Value</th>
                  </tr>
                </thead>
                <tbody>
                  {% for config in configs %}
                    <tr class="odd gradeX">
-                                <td><a href="https://doc.powerdns.com/authoritative/search.html?q={{ config['name'] }}"
-                                        target="_blank" class="btn btn-flat btn-xs blue"><i
-                                            class="fa fa-search"></i></a></td>
-                                <td>{{ config['name'] }}</td>
+                      <td>
+                        <a href="https://doc.powerdns.com/authoritative/search.html?q={{ config['name'] }}"
+                        target="_blank" class="btn btn-primary">
+                          <i class="fa fa-search"></i>&nbsp;{{ config['name'] }}
+                        </a>
+                      </td>
                      <td>
                        {{ config['value'] }}
                      </td>
@ -102,21 +95,19 @@
                </tbody>
              </table>
            </div>
-                <!-- /.box-body -->
          </div>
-            <!-- /.box -->
        </div>
-        <!-- /.col -->
      </div>
-    <!-- /.row -->
+    </div>
  </section>
 {% endblock %}
+
 {% block extrascripts %}
 <script>
  // set up statistics data table
  $("#tbl_statistics").DataTable({
    "paging": true,
-        "lengthChange": false,
+    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "info": true,
@ -126,7 +117,7 @@
  // set up configuration data table
  $("#tbl_configuration").DataTable({
    "paging": true,
-        "lengthChange": false,
+    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "info": true,
--- a/powerdnsadmin/templates/admin_setting_basic.html
+++ b/powerdnsadmin/templates/admin_setting_basic.html
@ -1,9 +1,14 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_settings" %}
+
 {% block title %}
-<title>Basic Settings - {{ SITE_NAME }}</title>
-{% endblock %} {% block dashboard_stat %}
-<!-- Content Header (Page header) -->
+  <title>
+    Basic Settings - {{ SITE_NAME }}
+  </title>
+{% endblock %}
+
+{% block dashboard_stat %}
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
@ -22,8 +27,9 @@
      </div>
    </div>
  </div>
+{% endblock %}

-{% endblock %} {% block content %}
+{% block content %}
 <section class="content">
  <div class="container-fluid">
    <div class="card">
@ -34,9 +40,9 @@
        <table id="tbl_settings" class="table table-bordered table-striped">
          <thead>
            <tr>
-              <th>Name</th>
-              <th>Value</th>
-              <th>Change</th>
+              <th>Setting Name</th>
+              <th>Current Value</th>
+              <th>Action</th>
            </tr>
          </thead>
          <tbody>
@ -45,12 +51,18 @@
                <td>
                  {{ setting }}
                </td>
-                {% if SETTING.get(setting) in [True, False] %}
+                {% if SETTING.get(setting) in [False] %}
                  <td>{{ SETTING.get(setting)|display_setting_state }}</td>
                  <td width="6%">
-                    <button type="button" class="btn btn-warning setting-toggle-button" id="{{ setting }}">
-                      Toggle
-                      <i class="fa fa-info"></i>
+                    <button type="button" class="btn btn-success setting-toggle-button" id="{{ setting }}">
+                      <i class="fas fa-toggle-on"></i>&nbsp;Turn On
+                    </button>
+                  </td>
+                {% elif SETTING.get(setting) in [True] %}
+                  <td>{{ SETTING.get(setting)|display_setting_state }}</td>
+                  <td width="6%">
+                    <button type="button" class="btn btn-danger setting-toggle-button" id="{{ setting }}">
+                      <i class="fas fa-toggle-off"></i>&nbsp;Turn Off
                    </button>
                  </td>
                {% else %}
@ -58,9 +70,8 @@
                    <input name="value" id="value" value="{{ SETTING.get(setting) }}">
                  </td>
                  <td width="6%">
-                    <button type="button" class="btn btn-warning setting-save-button" id="{{ setting }}">
-                      Save
-                      <i class="fa fa-info"></i>
+                    <button type="button" class="btn btn-primary setting-save-button" id="{{ setting }}">
+                      <i class="fas fa-save"></i>&nbsp;Save
                    </button>
                  </td>
                {% endif %}
@ -73,6 +84,7 @@
  </div>
 </section>
 {% endblock %}
+
 {% block extrascripts %}
  <script>
    // set up history data table
--- a/powerdnsadmin/templates/admin_setting_pdns.html
+++ b/powerdnsadmin/templates/admin_setting_pdns.html
@ -1,33 +1,46 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_settings" %}
+
 {% block title %}
-<title>PDNS Settings - {{ SITE_NAME }}</title>
-{% endblock %} {% block dashboard_stat %}
-<!-- Content Header (Page header) -->
+  <title>
+    PDNS Settings - {{ SITE_NAME }}
+  </title>
+{% endblock %}
+
+{% block dashboard_stat %}
  <div class="content-header">
-    <h1>
-        Settings <small>PowerDNS-Admin settings</small>
+    <div class="container-fluid">
+      <div class="row mb-2">
+        <div class="col-sm-6">
+          <h1 class="m-0 text-dark">
+            Settings
+            <small>PowerDNS Authoritative Server</small>
          </h1>
-    <ol class="breadcrumb">
-        <li><a href="{{ url_for('dashboard.dashboard') }}"><i class="fa fa-dashboard"></i> Home</a></li>
-        <li><a href="#">Setting</a></li>
-        <li class="active">PDNS</li>
+        </div>
+        <div class="col-sm-6">
+          <ol class="breadcrumb float-sm-right">
+            <li class="breadcrumb-item"><a href="{{ url_for('dashboard.dashboard') }}">Dashboard</a></li>
+            <li class="breadcrumb-item active">Settings - PowerDNS Authoritative Server</li>
          </ol>
        </div>
+      </div>
+    </div>
+  </div>
 {% endblock %}
+
 {% block content %}
  <section class="content">
+    <div class="container-fluid">
      <div class="row">
-        <div class="col-md-4">
-            <div class="box box-primary">
-                <div class="box-header with-border">
-                    <h3 class="box-title">PDNS Settings</h3>
+        <div class="col-4">
+          <div class="card card-primary">
+            <div class="card-header with-border">
+              <h3 class="card-title">PDNS Settings</h3>
            </div>
-                <!-- /.box-header -->
-                <!-- form start -->
            <form role="form" method="post" data-toggle="validator">
              <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
-                    <div class="box-body">
+              <div class="card-body">
                {% if not SETTING.get('pdns_api_url') or not SETTING.get('pdns_api_key') or not SETTING.get('pdns_version') %}
                  <div class="alert alert-danger alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
@ -36,56 +49,58 @@
                  </div>
                {% endif %}
                <div class="form-group has-feedback">
-                            <label class="control-label" for="pdns_api_url">PDNS API URL</label>
-                            <input type="url" class="form-control" placeholder="PowerDNS API url" name="pdns_api_url"
+                  <label class="control-label" for="pdns_api_url">PowerDNS API URL</label>
+                  <input type="url" class="form-control" placeholder="PowerDNS API URL" name="pdns_api_url"
                  data-error="Please input a valid PowerDNS API URL" required value="{{ pdns_api_url }}">
                  <span class="help-block with-errors"></span>
                </div>
                <div class="form-group has-feedback">
-                            <label class="control-label" for="pdns_api_key">PDNS API KEY</label>
-                            <input type="password" class="form-control" placeholder="PowerDNS API key"
+                  <label class="control-label" for="pdns_api_key">PowerDNS API Key</label>
+                  <input type="password" class="form-control" placeholder="PowerDNS API Key"
                  name="pdns_api_key" data-error="Please input a valid PowerDNS API key" required
                  value="{{ pdns_api_key }}">
                  <span class="help-block with-errors"></span>
                </div>
                <div class="form-group has-feedback">
-                            <label class="control-label" for="pdns_version">PDNS VERSION</label>
-                            <input type="text" class="form-control" placeholder="PowerDNS version" name="pdns_version"
+                  <label class="control-label" for="pdns_version">PowerDNS Version</label>
+                  <input type="text" class="form-control" placeholder="PowerDNS Version" name="pdns_version"
                  data-error="Please input PowerDNS version" required value="{{ pdns_version }}">
                  <span class="help-block with-errors"></span>
                </div>
              </div>
-                    <div class="box-footer">
-                        <button type="submit" class="btn btn-flat btn-primary">Update</button>
+              <div class="card-footer">
+                <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i>&nbsp;Update</button>
              </div>
            </form>
          </div>
        </div>
-        <div class="col-md-8">
-            <div class="box box-primary">
-                <div class="box-header with-border">
-                    <h3 class="box-title">Help</h3>
+        <div class="col-8">
+          <div class="card card-primary">
+            <div class="card-header with-border">
+              <h3 class="card-title">Help</h3>
            </div>
-                <div class="box-body">
+            <div class="card-body">
              <dl class="dl-horizontal">
                <p>You must configure the API connection information before PowerDNS-Admin can query your
                  PowerDNS data. Following fields are required:</p>
-                        <dt>PDNS API URL</dt>
+                <dt>PowerDNS API URL</dt>
                <dd>Your PowerDNS API URL (eg. http://127.0.0.1:8081/).</dd>
-                        <dt>PDNS API KEY</dt>
+                <dt>PowerDNS API Key</dt>
                <dd>Your PowerDNS API key.</dd>
-                        <dt>PDNS VERSION</dt>
+                <dt>PowerDNS Version</dt>
                <dd>Your PowerDNS version number (eg. 4.1.1).</dd>
              </dl>
-                    <p>Find more details at <a
-                            href="https://doc.powerdns.com/md/httpapi/README/">https://doc.powerdns.com/md/httpapi/README/</a>
+              <p>Find more details at
+                <a href="https://doc.powerdns.com/md/httpapi/README/">https://doc.powerdns.com/md/httpapi/README/</a>
              </p>
            </div>
          </div>
        </div>
      </div>
+    </div>
  </section>
 {% endblock %}
+
 {% block extrascripts %}
  {% assets "js_validation" -%}
    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
--- a/powerdnsadmin/templates/admin_setting_records.html
+++ b/powerdnsadmin/templates/admin_setting_records.html
@ -1,34 +1,47 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_settings" %}
+
 {% block title %}
-<title>DNS Records Settings - {{ SITE_NAME }}</title>
-{% endblock %} {% block dashboard_stat %}
-<!-- Content Header (Page header) -->
-<section class="content-header">
-    <h1>
-        Settings <small>PowerDNS-Admin settings</small>
-    </h1>
-    <ol class="breadcrumb">
-        <li><a href="{{ url_for('dashboard.dashboard') }}"><i class="fa fa-dashboard"></i> Home</a></li>
-        <li><a href="#">Setting</a></li>
-        <li class="active">Records</li>
-    </ol>
-</section>
+  <title>
+    DNS Records Settings - {{ SITE_NAME }}
+  </title>
 {% endblock %}
+
+{% block dashboard_stat %}
+  <div class="content-header">
+    <div class="container-fluid">
+      <div class="row mb-2">
+        <div class="col-sm-6">
+          <h1 class="m-0 text-dark">
+            Settings
+            <small>Records</small>
+          </h1>
+        </div>
+        <div class="col-sm-6">
+          <ol class="breadcrumb float-sm-right">
+            <li class="breadcrumb-item"><a href="{{ url_for('dashboard.dashboard') }}">Dashboard</a></li>
+            <li class="breadcrumb-item active">Settings - Records </li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endblock %}
+
 {% block content %}
 <section class="content">
+  <div class="container-fluid">
    <div class="row">
-        <div class="col-md-5">
-            <div class="box box-primary">
-                <div class="box-header with-border">
-                    <h3 class="box-title">DNS record Settings</h3>
+      <div class="col-5">
+        <div class="card card-primary">
+          <div class="card-header with-border">
+            <h3 class="card-title">DNS record Settings</h3>
          </div>
-                <!-- /.box-header -->
-                <!-- form start -->
          <form role="form" method="post">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="create" value="{{ create }}">
-                    <div class="box-body">
+            <div class="card-body">
              <table class="table table-bordered">
                <tr>
                  <th style="width: 10px">#</th>
@ -52,27 +65,30 @@
                {% endfor %}
              </table>
            </div>
-                    <div class="box-footer">
+            <div class="card-footer">
              <button type="submit" class="btn btn-flat btn-primary">Update</button>
            </div>
          </form>
        </div>
      </div>
-        <div class="col-md-7">
-            <div class="box box-primary">
-                <div class="box-header with-border">
-                    <h3 class="box-title">Help</h3>
+      <div class="col-7">
+        <div class="card card-primary">
+          <div class="card-header with-border">
+            <h3 class="card-title">Help</h3>
          </div>
-                <div class="box-body">
+          <div class="card-body">
            <p>Select record types you allow user to edit in the forward zone and reverse zone. Take a look at
              <a href="https://doc.powerdns.com/authoritative/appendices/types.html">PowerDNS docs</a> for
-                        full list of supported record types.</p>
+              full list of supported record types.
+            </p>
+          </div>
        </div>
      </div>
    </div>
  </div>
 </section>
 {% endblock %}
+
 {% block extrascripts %}
  <script>
    $('.checkbox').iCheck({
--- a/powerdnsadmin/templates/base.html
+++ b/powerdnsadmin/templates/base.html
@ -137,7 +137,7 @@
        <li class="{{ 'nav-item active' if active_page == 'admin_console' else 'nav-item' }}">
          <a href="{{ url_for('admin.pdns_stats') }}" class="nav-link">
            <i class="nav-icon fas fa-info-circle"></i>
-            <p>PDNS</p>
+            <p>PowerDNS Info</p>
          </a>
        </li>
        <li class="{{ 'nav-item active' if active_page == 'admin_global_search' else 'nav-item' }}">
@ -201,7 +201,7 @@
              <li class="nav-item">
                <a href="{{ url_for('admin.setting_pdns') }}" class="nav-link">
                  <i class="nav-icon far fa-circle"></i>
-                  <p>PDNS</p>
+                  <p>PowerDNS Connection</p>
                </a>
              </li>
              <li class="nav-item">
--- a/powerdnsadmin/templates/dashboard.html
+++ b/powerdnsadmin/templates/dashboard.html
@ -36,7 +36,7 @@
      {% if current_user.role.name in ['Administrator', 'Operator'] or SETTING.get('allow_user_view_history') %}
        <div class="row">
          <div class="col-3">
-            <div class="card">
+            <div class="card shadow card-outline card-secondary">
              <div class="card-header">
                <h3 class="card-title">Statistics</h3>
              </div>
@ -104,7 +104,7 @@
            </div>
          </div>
          <div class="col-9">
-            <div class="card">
+            <div class="card shadow card-outline card-secondary">
              <div class="card-header">
                <h3 class="card-title">Recent History</h3>
              </div>
@ -151,27 +151,26 @@
          </div>
        </div>
      {% endif %}
-      <!--SYBPATCH START-->
-      <row>
+      <div class="row">
+        <div class="col-12">
+          <div class="card shadow card-outline card-secondary">
+            <div class="card-header">
              <div class="nav-tabs-custom">
                <ul class="nav nav-tabs" id="custom-content-below-tab" role="tablist">
-            <li class="nav-link">
-              <a href="#tab_{{custom_boxes.order[0]}}"data-toggle="pill" role="tab">
+                  <li class="nav-item">
+                    <a class="nav-link active" href="#tab_{{custom_boxes.order[0]}}" data-toggle="pill" role="tab">
                      Hosted Domains <b>{{custom_boxes.boxes[custom_boxes.order[0]][0]}}</b>
                    </a>
                  </li>
                  {% for boxId in custom_boxes.order[1:] %}
-              <li class="nav-link" >
-                <a href="#tab_{{boxId}}" data-toggle="pill" role="tab">Hosted Domains  <b>{{custom_boxes.boxes[boxId][0]}}</b></a>
+                    <li class="nav-item" >
+                      <a class="nav-link" href="#tab_{{boxId}}" data-toggle="pill" role="tab">Hosted Domains <b>{{custom_boxes.boxes[boxId][0]}}</b></a>
                    </li>
                  {% endfor %}
                </ul>
                <div class="tab-content">
                  {% for boxId in custom_boxes.order %}
                    <div class="tab-pane" id='tab_{{boxId}}'>
-                <div class="row">
-                  <div class="col-12">
-                    <div class="card">
                      <div class="card-header">
                        <h3 class="card-title">Hosted Domains <b>{{custom_boxes.boxes[boxId][0]}}</b></h3>
                        {% if show_bg_domain_button %}
@ -191,7 +190,7 @@
                              <th>Serial</th>
                              <th>Master</th>
                              <th>Account</th>
-                              <th>Action</th>
+                              <th>Actions</th>
                            </tr>
                          </thead>
                          <tbody>
@ -199,14 +198,13 @@
                        </table>
                      </div>
                    </div>
-                </div>
-                </div>
-              </div>
                  {% endfor %}
-          </div><!-- /.tab-content -->
-        </div><!-- custom tabs -->
-        <!--SYBPATCH END-->
-      </row>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
    </div>
  </section>
 {% endblock %}
@ -217,7 +215,7 @@
    function setUpDomainList(id ,url){
        $(id).DataTable({
            "paging" : true,
-            "lengthChange" : false,
+            "lengthChange" : true,
            language: {
                searchPlaceholder: "Use ^ and $ for start and end",
            },
--- a/powerdnsadmin/templates/domain_add.html
+++ b/powerdnsadmin/templates/domain_add.html
@ -33,8 +33,8 @@
 <section class="content">
  <div class="container-fluid">
    <div class="row">
-      <div class="col-md-4">
-        <div class="card card-outline card-secondary">
+      <div class="col-4">
+        <div class="card shadow card-outline card-secondary">
          <div class="card-header with-border">
            <h3 class="card-title">Create new domain</h3>
          </div>
@ -128,8 +128,8 @@
          </form>
        </div>
      </div>
-      <div class="col-md-8">
-        <div class="card card-outline card-secondary">
+      <div class="col-8">
+        <div class="card shadow card-outline card-secondary">
          <div class="card-header with-border">
            <h3 class="card-title">Help with creating a new domain</h3>
          </div>
--- a/powerdnsadmin/templates/domain_changelog.html
+++ b/powerdnsadmin/templates/domain_changelog.html
@ -1,5 +1,10 @@
 {% extends "base.html" %}
-{% block title %}<title>{{ domain.name | pretty_domain_name }} - {{ SITE_NAME }}</title>{% endblock %}
+
+{% block title %}
+  <title>
+    {{ domain.name | pretty_domain_name }} - {{ SITE_NAME }}
+  </title>
+{% endblock %}

 {% block dashboard_stat %}
 <div class="content-header">
@ -31,7 +36,7 @@
 <section class="content">
  <div class="container-fluid">
    <div class="row">
-      <div class="col-xs-12">
+      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <button type="button" class="btn btn-primary pull-left button_show_records" id="{{ domain.name }}">
--- a/powerdnsadmin/templates/domain_remove.html
+++ b/powerdnsadmin/templates/domain_remove.html
@ -33,9 +33,9 @@
 <section class="content">
  <div class="container-fluid">
    <div class="row">
-      <div class="col-md-4">
-        <div class="card card-outline card-secondary">
-          <div class="card-header with-border">
+      <div class="col-4">
+        <div class="card shadow card-outline card-secondary">
+          <div class="card-header">
            <h3 class="card-title">Remove domain</h3>
          </div>
          <form role="form" method="post" action="{{ url_for('domain.remove') }}">
@ -58,9 +58,9 @@
          </form>
        </div>
      </div>
-      <div class="col-md-8">
-        <div class="card card-outline card-secondary">
-          <div class="card-header with-border">
+      <div class="col-8">
+        <div class="card shadow card-outline card-secondary">
+          <div class="card-header">
            <h3 class="card-title">Help with removing a new domain</h3>
          </div>
          <div class="card-body">
--- a/powerdnsadmin/templates/domain_setting.html
+++ b/powerdnsadmin/templates/domain_setting.html
@ -1,7 +1,13 @@
 {% extends "base.html" %}
-{% block title %}<title>Domain Management - {{ SITE_NAME }}</title>{% endblock %}
+
+{% block title %}
+  <title>
+    Domain Management - {{ SITE_NAME }}
+  </title>
+{% endblock %}

 {% block dashboard_stat %}
+
 {% if status %}
 {% if status.get('status') == 'ok' %}
 <div class="alert alert-success">
@ -31,7 +37,7 @@
 {% block content %}
 <section class="content">
    <div class="row">
-        <div class="col-xs-12">
+        <div class="col-12">
            <div class="box">
                <form method="post" action="{{ url_for('domain.setting', domain_name=domain.name) }}">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
--- a/powerdnsadmin/templates/register.html
+++ b/powerdnsadmin/templates/register.html
@ -34,92 +34,115 @@
          </div>
          {% endif %}
          <p class="login-box-msg">Enter your personal details below</p>
-          <form action="{{ url_for('index.register') }}" method="post" class="needs-validation" novalidate>
+          <form action="{{ url_for('index.register') }}" method="post" novalidate>
            <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
            
+            <div class="form-group">
              <div class="input-group mb-3">
-              <input type="text" class="form-control" placeholder="First Name" name="firstname" id="firstname" required>
-              <div class="input-group-append">
-                <div class="input-group-text">
-                  <span class="fas fa-user"></span>
-                </div>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <i class="fas fa-user"></i>
+                  </span>
                </div>
+                <input type="text" class="form-control {{ 'is-invalid' if 'firstname' in error_messages else '' }}" placeholder="First Name" name="firstname" id="firstname" value="{{ request.form.firstname }}" required>
+                {% if 'firstname' in error_messages %}
                  <div class="invalid-feedback">
-                Please input your first name
+                    {{ error_messages['firstname'] }}
+                  </div>
+                {% endif %}
              </div>
            </div>

+            <div class="form-group">
              <div class="input-group mb-3">
-              <input type="text" class="form-control" placeholder="Last name" name="lastname" id="lastname" required>
-              <div class="input-group-append">
-                <div class="input-group-text">
-                  <span class="fas fa-user"></span>
-                </div>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <i class="fas fa-user"></i>
+                  </span>
                </div>
+                <input type="text" class="form-control {{ 'is-invalid' if 'lastname' in error_messages else '' }}" placeholder="Last name" name="lastname" id="lastname" value="{{ request.form.lastname }}" required>
+                {% if 'lastname' in error_messages %}
                  <div class="invalid-feedback">
-                Please input your last name
+                    {{ error_messages['lastname'] }}
+                  </div>
+                {% endif %}
              </div>
            </div>

+            <div class="form-group">
              <div class="input-group mb-3">
-              <input type="email" class="form-control" placeholder="Email" name="email" id="email" required>
-              <div class="input-group-append">
-                <div class="input-group-text">
-                  <span class="fas fa-envelope"></span>
-                </div>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <i class="fas fa-envelope"></i>
+                  </span>
                </div>
+                <input type="email" class="form-control {{ 'is-invalid' if 'email' in error_messages else '' }}" placeholder="Email" name="email" id="email" value="{{ request.form.email }}" required>
+                {% if 'email' in error_messages %}
                  <div class="invalid-feedback">
-                Please input a valid email address
+                    <i class="fas fa-exclamation-triangle"></i>
+                    {{ error_messages['email'] }}
+                  </div>
+                {% endif %}
              </div>
            </div>

            <p class="login-box-msg">Enter your account details below</p>

+            <div class="form-group">
              <div class="input-group mb-3">
-              <input type="text" class="form-control" placeholder="Username" name="username" id="username" required>
-              <div class="input-group-append">
-                <div class="input-group-text">
-                  <span class="fas fa-user"></span>
-                </div>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <i class="fas fa-user"></i>
+                  </span>
                </div>
+                <input type="text" class="form-control {{ 'is-invalid' if 'username' in error_messages else '' }}" placeholder="Username" name="username" id="username" value="{{ request.form.username }}" required>
+                {% if 'email' in error_messages %}
                  <div class="invalid-feedback">
-                Please input desired username
+                    {{ error_messages['username'] }}
+                  </div>
+                {% endif %}
              </div>
            </div>

+            <div class="form-group">
              <div class="input-group mb-3">
-              <input type="password" class="form-control" placeholder="Password" id="password" name="password" id="password" required>
-              <div class="input-group-append">
-                <div class="input-group-text">
-                  <span class="fas fa-lock"></span>
-                </div>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <i class="fas fa-lock"></i>
+                  </span>
                </div>
+                <input type="password" class="form-control {{ 'is-invalid' if 'password' in error_messages else '' }}" placeholder="Password" id="password" name="password" required>
+                {% if 'email' in error_messages %}
                  <div class="invalid-feedback">
-                Please input desired username
+                    {{ error_messages['password'] }}
+                  </div>
+                {% endif %}
              </div>
            </div>

-
-          <div class="form-group has-feedback">
-            <input type="password" class="form-control" placeholder="Retype password" name="rpassword" data-match="#password" data-match-error="Password confirmation does not match" required>
-            <span class="fas fa-lock form-control-feedback"></span>
-            <span class="help-block with-errors"></span>
+            <div class="form-group">
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <i class="fas fa-lock"></i>
+                  </span>
+                </div>
+                <input type="password" class="form-control {{ 'is-invalid' if 'rpassword' in error_messages else '' }}" placeholder="Retype password" id="rpassword" name="rpassword" required>
+                {% if 'rpassword' in error_messages %}
+                  <div class="invalid-feedback">
+                    {{ error_messages['rpassword'] }}
+                  </div>
+                {% endif %}
+              </div>
            </div>

            {% if captcha_enable %}
-            <div class="input-group mb-3">
            <p class="login-box-msg">Please complete the CAPTCHA below</p>
+            <div class="form-group has-feedback">
              {{ captcha() }}
-              <br>
-              <input type="text" class="form-control" placeholder="CAPTCHA" id="captcha" name="captcha" required>
-              <div class="input-group-append">
-                <div class="input-group-text">
-                  <span class="fas fa-lock"></span>
-                </div>
-              </div>
-              <div class="invalid-feedback">
-                Please complete the CAPTCHA
-              </div>
+              <input type="text" class="form-control" placeholder="CAPTCHA"  name="captcha"
+                data-error="Please complete the CAPTCHA" required>
+              <span class="help-block with-errors"></span>
            </div>
          {% endif %}

@ -133,7 +156,7 @@
          </div>
        </form>
      </div>
-      <div class="login--footer">
+      <div class="login-box-footer">
        <center>
          <p>Powered by <a href="https://github.com/PowerDNS-Admin/PowerDNS-Admin">PowerDNS-Admin</a></p>
        </center>
@ -151,24 +174,6 @@
          window.location.href = '{{ url_for('index.login') }}';
        })
      });
-      (function() {
-  'use strict';
-  window.addEventListener('load', function() {
-    // Fetch all the forms we want to apply custom Bootstrap validation styles to
-    var forms = document.getElementsByClassName('needs-validation');
-    // Loop over them and prevent submission
-    var validation = Array.prototype.filter.call(forms, function(form) {
-      form.addEventListener('submit', function(event) {
-        if (form.checkValidity() === false) {
-          event.preventDefault();
-          event.stopPropagation();
-        }
-        form.classList.add('was-validated');
-      }, false);
-    });
-  }, false);
-})();
-
    </script>
  </body>
 </html>
--- a/powerdnsadmin/templates/template.html
+++ b/powerdnsadmin/templates/template.html
@ -1,26 +1,43 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_domain_template" %}
-{% block title %}<title>Templates - {{ SITE_NAME }}</title>{% endblock %}
+
+{% block title %}
+  <title>
+    Templates - {{ SITE_NAME }}
+  </title>
+{% endblock %}

 {% block dashboard_stat %}
-<!-- Content Header (Page header) -->
-<section class="content-header">
-  <h1>
+
+<div class="content-header">
+  <div class="container-fluid">
+    <div class="row mb-2">
+      <div class="col-sm-6">
+        <h1 class="m-0 text-dark">
          Templates
          <small>List</small>
        </h1>
-  <ol class="breadcrumb">
-    <li><a href="{{ url_for('admin.templates') }}"><i class="fa fa-dashboard"></i> Templates</a></li>
-    <li class="active">List</li>
+      </div>
+      <div class="col-sm-6">
+        <ol class="breadcrumb float-sm-right">
+          <li class="breadcrumb-item"><a href="{{ url_for('dashboard.dashboard') }}">Dashboard</a></li>
+          <li class="breadcrumb-item active">Templates - List</li>
        </ol>
-</section>
+      </div>
+    </div>
+  </div>
+</div>
+
 {% endblock %}
+
 {% block content %}
-<!-- Main content -->
 <section class="content">
-  {% with errors = get_flashed_messages(category_filter=["error"]) %} {% if errors %}
+  <div class="container-fluid">
+    {% with errors = get_flashed_messages(category_filter=["error"]) %}
+      {% if errors %}
        <div class="row">
-    <div class="col-md-12">
+          <div class="col-12">
            <div class="alert alert-danger alert-dismissible">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <h4>
@ -30,24 +47,23 @@
                <a class="close" href="#">x</a>
                <ul>
                  {%- for msg in errors %}
-            <li>{{ msg }}</li> {% endfor -%}
+                    <li>{{ msg }}</li>
+                  {% endfor -%}
                </ul>
              </div>
            </div>
          </div>
        </div>
-  {% endif %} {% endwith %}
+      {% endif %}
+    {% endwith %}
    <div class="row">
-    <div class="container-fluid">
-    <div class="col-xs-12">
-      <div class="card">
+      <div class="col-12">
+        <div class="card shadow card-outline card-secondary">
          <div class="card-header">
            <h3 class="card-title">Templates</h3>
-        </div>
-        <div class="card-body">
            <a href="{{ url_for('admin.create_template') }}">
-            <button type="button" class="btn btn-flat btn-primary pull-left">
-              Create Template&nbsp;<i class="fa fa-plus"></i>
+              <button type="button" class="btn btn-primary float-right">
+                <i class="fa fa-plus"></i>&nbsp;Create Template
              </button>
            </a>
          </div>
@ -65,8 +81,9 @@
                {% for template in templates %}
                  <tr>
                    <td>
-                  <a
-                    href="{{ url_for('admin.edit_template', template=template.name) }}"><strong>{{ template.name }}</strong></a>
+                      <a href="{{ url_for('admin.edit_template', template=template.name) }}">
+                        <strong>{{ template.name }}</strong>
+                      </a>
                    </td>
                    <td>
                      {{ template.description }}
@ -89,20 +106,16 @@
              </tbody>
            </table>
          </div>
-        <!-- /.box-body -->
-      </div>
-      <!-- /.box -->
-    </div>
-    <!-- /.col -->
        </div>
      </div>
-  <!-- /.row -->
+    </div>
+  </div>
 </section>
-<!-- /.content -->
 {% endblock %}
+
 {% block extrascripts %}
 <script>
-  // set up history data table
+  // set up template data table
  $("#tbl_template_list").DataTable({
    "paging": true,
    "lengthChange": true,
@ -111,6 +124,7 @@
    "info": false,
    "autoWidth": false
  });
+
  // handle delete button
  $(document.body).on("click", ".button_delete", function (e) {
    var template = $(this).prop('id');
@ -119,9 +133,9 @@
    }, function () {
      window.location.href = '{{ url_for('admin.templates') }}';
    });
-
  });
 </script>
 {% endblock %}
+
 {% block modals %}
 {% endblock %}
--- a/powerdnsadmin/templates/template_add.html
+++ b/powerdnsadmin/templates/template_add.html
@ -1,9 +1,14 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_domain_template" %}
-{% block title %}<title>Create Template - {{ SITE_NAME }}</title>{% endblock %}
+
+{% block title %}
+  <title>
+    Create Template - {{ SITE_NAME }}
+  </title>
+{% endblock %}

 {% block dashboard_stat %}
-<!-- Content Header (Page header) -->
 <div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
@ -22,15 +27,14 @@
    </div>
  </div>
 </div>
-
 {% endblock %}

 {% block content %}
 <section class="content">
-	{% with errors = get_flashed_messages(category_filter=["error"]) %} {%
-if errors %}
+  {% with errors = get_flashed_messages(category_filter=["error"]) %}
+    {% if errors %}
      <div class="row">
-		<div class="col-md-12">
+        <div class="col-12">
          <div class="alert alert-danger alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <h4>
@ -40,22 +44,21 @@ if errors %}
              <a class="close" href="#">x</a>
            <ul>
              {%- for msg in errors %}
-						<li>{{ msg }}</li> {% endfor -%}
+                <li>{{ msg }}</li>
+              {% endfor -%}
            </ul>
          </div>
        </div>
      </div>
-	</div>
-	{% endif %} {% endwith %}
+    {% endif %}
+  {% endwith %}

  <div class="row">
-		<div class="col-md-4">
-			<div class="box box-primary">
-				<div class="box-header with-border">
-					<h3 class="box-title">Create new template</h3>
+    <div class="col-4">
+      <div class="card card-primary">
+        <div class="card-header with-border">
+          <h3 class="card-title">Create new template</h3>
        </div>
-				<!-- /.box-header -->
-				<!-- form start -->
        <form role="form" method="post" action="{{ url_for('admin.create_template') }}">
          <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
          <div class="box-body">
@ -75,14 +78,13 @@ if errors %}
          </div>
        </form>
      </div>
-			<!-- /.box -->
    </div>
-		<div class="col-md-8">
-			<div class="box box-primary">
-				<div class="box-header with-border">
-					<h3 class="box-title">Help with creating a new template</h3>
+    <div class="col-8">
+      <div class="card card-primary">
+        <div class="card-header with-border">
+          <h3 class="card-title">Help with creating a new template</h3>
        </div>
-				<div class="box-body">
+        <div class="card-body">
          <dl class="dl-horizontal">
            <dt>Template name</dt>
            <dd>Enter your template name, this is the name of the template that
--- a/powerdnsadmin/templates/template_edit.html
+++ b/powerdnsadmin/templates/template_edit.html
@ -1,6 +1,12 @@
 {% extends "base.html" %}
+
 {% set active_page = "admin_domain_template" %}
-{% block title %}<title>Edit Template - {{ SITE_NAME }}</title>{% endblock %}
+
+{% block title %}
+  <title>
+    Edit Template - {{ SITE_NAME }}
+  </title>
+{% endblock %}

 {% block dashboard_stat %}
 <section class="content-header">
@ -19,7 +25,7 @@
 {% block content %}
 <section class="content">
    <div class="row">
-        <div class="col-xs-12">
+        <div class="col-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Manage Template Records for {{ template }}</h3>
--- a/powerdnsadmin/templates/user_profile.html
+++ b/powerdnsadmin/templates/user_profile.html
@ -30,7 +30,7 @@
 {% block content %}
 <section class="content">
    <div class="row">
-        <div class="col-lg-12">
+        <div class="col-12">
            <div class="card card-primary">
                <div class="card-header with-border">
                    <h3 class="card-title">Edit my profile{%  if session['authentication_type'] != 'LOCAL' %} [Disabled -