From f977a42ceac5fef2e2ab563209806b5a7da6d3de Mon Sep 17 00:00:00 2001
From: Matt Scott <matt@azorian.solutions>
Date: Mon, 20 Feb 2023 12:08:32 -0500
Subject: [PATCH] Completed first-round updates for the user profile edit view.

---
 powerdnsadmin/templates/login.html        | 304 +++++++++---------
 powerdnsadmin/templates/maintenance.html  |  78 ++---
 powerdnsadmin/templates/register.html     | 293 +++++++++--------
 powerdnsadmin/templates/register_otp.html | 125 ++++----
 powerdnsadmin/templates/user_profile.html | 373 ++++++++++++----------
 5 files changed, 617 insertions(+), 556 deletions(-)
diff --git a/powerdnsadmin/templates/login.html b/powerdnsadmin/templates/login.html
index f7ef158..0436e5d 100644
--- a/powerdnsadmin/templates/login.html
+++ b/powerdnsadmin/templates/login.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Log In - {{ SITE_NAME }}</title>
@@ -9,162 +9,172 @@
     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
     <META HTTP-EQUIV="REFRESH" CONTENT="{{ 60 * SETTING.get('session_timeout') }}">
     {% assets "css_login" -%}
-      <link rel="stylesheet" href="{{ ASSET_URL }}">
+        <link rel="stylesheet" href="{{ ASSET_URL }}">
     {%- endassets %}
     {% if SETTING.get('custom_css') %}
-      <link rel="stylesheet" href="/static/custom/{{ SETTING.get('custom_css') }}">
+        <link rel="stylesheet" href="/static/custom/{{ SETTING.get('custom_css') }}">
     {% endif %}
-  </head>
-  <body class="hold-transition login-page">
-    <div class="login-box">
-      <div class="card card-outline card-primary">
+</head>
+<body class="hold-transition login-page">
+<div class="login-box">
+    <div class="card card-outline card-primary shadow">
         <div class="card-header text-center">
-          <a href="{{ url_for('index.index') }}" class="h3">
-            {% if SETTING.get('site_name') %}
-              {{ SITE_NAME }}
-            {% else %}
-              <b>PowerDNS</b>-Admin
-            {% endif %}
-          </a>
+            <a href="{{ url_for('index.index') }}" class="h3">
+                {% if SETTING.get('site_name') %}
+                    {{ SITE_NAME }}
+                {% else %}
+                    <b>PowerDNS</b>-Admin
+                {% endif %}
+            </a>
         </div>
         <div class="card-body login-card-body">
-          {% if error %}
-            <div class="alert alert-danger alert-dismissible">
-              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-              {{ error }}
-            </div>
-          {% endif %}
-          {% if SETTING.get('ldap_enabled') or SETTING.get('local_db_enabled') %}
-            <form action="" method="post" data-toggle="validator">
-              <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
-              <div class="form-group">
-                <input type="text" class="form-control" placeholder="Username" name="username" data-error="Please input your username" required {% if username %}value="{{ username }}" {% endif %}>
-                <span class="help-block with-errors"></span>
-              </div>
-              <div class="form-group">
-                <input type="password" class="form-control" placeholder="Password" name="password" data-error="Please input your password" required {% if password %}value="{{ password }}" {% endif %}>
-                <span class="help-block with-errors"></span>
-              </div>
-              {% if SETTING.get('otp_field_enabled') %}
-                <div class="form-group">
-                  <input type="otptoken" class="form-control" placeholder="OTP Token" name="otptoken" autocomplete="off">
+            {% if error %}
+                <div class="alert alert-danger alert-dismissible">
+                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+                    {{ error }}
                 </div>
-              {% endif %}
-              {% if SETTING.get('ldap_enabled') and SETTING.get('local_db_enabled') %}
-                <div class="form-group">
-                  <select class="form-control" name="auth_method">
-                    <option value="LOCAL">
-                      LOCAL Authentication
-                    </option>
-                    {% if SETTING.get('login_ldap_first') %}
-                      <option value="LDAP" selected="selected">
-                        LDAP Authentication
-                      </option>
-                    {% else %}
-                      <option value="LDAP">
-                        LDAP Authentication
-                      </option>
-                    {% endif %}
-                  </select>
-                </div>
-              {% elif SETTING.get('ldap_enabled') and not SETTING.get('local_db_enabled') %}
-                <div class="form-group">
-                  <input type="hidden" name="auth_method" value="LDAP">
-                </div>
-              {% elif SETTING.get('local_db_enabled') and not SETTING.get('ldap_enabled') %}
-                <div class="form-group">
-                  <input type="hidden" name="auth_method" value="LOCAL">
-                </div>
-              {% else %}
-                <div class="form-group">
-                  <input type="hidden" name="auth_method" value="LOCAL">
-                </div>
-              {% endif %}
-              <div class="row">
-                <div class="col-8">
-                  <div class="icheck-primary">
-                    <input type="checkbox" id="remember">
-                    <label for="remember">
-                      Remember Me
-                    </label>
-                  </div>
-                </div>
-                <div class="col-4">
-                  <button type="submit" class="btn btn-primary btn-block">Sign In</button>
-                </div>
-              </div>
-            </form>
-          {% endif %}
-          {% if SETTING.get('google_oauth_enabled') or SETTING.get('github_oauth_enabled') or SETTING.get('oidc_oauth_enabled') or SETTING.get('azure_oauth_enabled') %}
-            <div class="social-auth-links text-center">
-              {% if SETTING.get('ldap_enabled') or SETTING.get('local_db_enabled') %}
-                <p>- OR -</p>
-              {% endif %}
-              {% if SETTING.get('oidc_oauth_enabled') %}
-                <a href="{{ url_for('index.oidc_login') }}" class="btn btn-block btn-social btn-openid btn-flat">
-                  <i class="fa-brands fa-openid"></i>
-                  Sign in using OpenID Connect
-                </a>
-              {% endif %}
-              {% if SETTING.get('github_oauth_enabled') %}
-                <a href="{{ url_for('index.github_login') }}" class="btn btn-block btn-social btn-github btn-flat">
-                  <i class="fa-brands fa-github"></i>
-                  Sign in using Github
-                </a>
-              {% endif %}
-              {% if SETTING.get('google_oauth_enabled') %}
-                <a href="{{ url_for('index.google_login') }}" class="btn btn-block btn-social btn-google btn-flat">
-                  <i class="fa-brands fa-google"></i>
-                  Sign in using Google
-                </a>
-              {% endif %}
-              {% if SETTING.get('azure_oauth_enabled') %}
-                <a href="{{ url_for('index.azure_login') }}" class="btn btn-block btn-social btn-microsoft btn-flat">
-                  <i class="fa-brands fa-windows"></i>
-                  Sign in using Microsoft Azure
-                </a>
-              {% endif %}
-            </div>
-          {% endif %}
-          {% if saml_enabled %}
-            <a href="{{ url_for('index.saml_login') }}">
-              SAML login
-            </a>
-          {% endif %}
-          {% if SETTING.get('signup_enabled') %}
-            <br>
-            <a href="{{ url_for('index.register') }}" class="text-center">
-              Create an account
-            </a>
-            {% if SETTING.get('verify_user_email') %}
-              <br/>
-              <a href="{{ url_for('index.resend_confirmation_email') }}" class="text-center">
-                Resend confirmation email
-              </a>
             {% endif %}
-          {% endif %}
+            {% if SETTING.get('ldap_enabled') or SETTING.get('local_db_enabled') %}
+                <form action="" method="post" data-toggle="validator">
+                    <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
+                    <div class="form-group">
+                        <input type="text" class="form-control" placeholder="Username" name="username"
+                               data-error="Please input your username" required
+                               {% if username %}value="{{ username }}" {% endif %}>
+                        <span class="help-block with-errors"></span>
+                    </div>
+                    <div class="form-group">
+                        <input type="password" class="form-control" placeholder="Password" name="password"
+                               data-error="Please input your password" required
+                               {% if password %}value="{{ password }}" {% endif %}>
+                        <span class="help-block with-errors"></span>
+                    </div>
+                    {% if SETTING.get('otp_field_enabled') %}
+                        <div class="form-group">
+                            <input type="otptoken" class="form-control" placeholder="OTP Token" name="otptoken"
+                                   autocomplete="off">
+                        </div>
+                    {% endif %}
+                    {% if SETTING.get('ldap_enabled') and SETTING.get('local_db_enabled') %}
+                        <div class="form-group">
+                            <select class="form-control" name="auth_method">
+                                <option value="LOCAL">
+                                    LOCAL Authentication
+                                </option>
+                                {% if SETTING.get('login_ldap_first') %}
+                                    <option value="LDAP" selected="selected">
+                                        LDAP Authentication
+                                    </option>
+                                {% else %}
+                                    <option value="LDAP">
+                                        LDAP Authentication
+                                    </option>
+                                {% endif %}
+                            </select>
+                        </div>
+                    {% elif SETTING.get('ldap_enabled') and not SETTING.get('local_db_enabled') %}
+                        <div class="form-group">
+                            <input type="hidden" name="auth_method" value="LDAP">
+                        </div>
+                    {% elif SETTING.get('local_db_enabled') and not SETTING.get('ldap_enabled') %}
+                        <div class="form-group">
+                            <input type="hidden" name="auth_method" value="LOCAL">
+                        </div>
+                    {% else %}
+                        <div class="form-group">
+                            <input type="hidden" name="auth_method" value="LOCAL">
+                        </div>
+                    {% endif %}
+                    <div class="row">
+                        <div class="col-8">
+                            <div class="icheck-primary">
+                                <input type="checkbox" id="remember">
+                                <label for="remember">
+                                    Remember Me
+                                </label>
+                            </div>
+                        </div>
+                        <div class="col-4">
+                            <button type="submit" class="btn btn-primary btn-block">Sign In</button>
+                        </div>
+                    </div>
+                </form>
+            {% endif %}
+            {% if SETTING.get('google_oauth_enabled') or SETTING.get('github_oauth_enabled') or SETTING.get('oidc_oauth_enabled') or SETTING.get('azure_oauth_enabled') %}
+                <div class="social-auth-links text-center">
+                    {% if SETTING.get('ldap_enabled') or SETTING.get('local_db_enabled') %}
+                        <p>- OR -</p>
+                    {% endif %}
+                    {% if SETTING.get('oidc_oauth_enabled') %}
+                        <a href="{{ url_for('index.oidc_login') }}"
+                           class="btn btn-block btn-social btn-openid btn-flat">
+                            <i class="fa-brands fa-openid"></i>
+                            Sign in using OpenID Connect
+                        </a>
+                    {% endif %}
+                    {% if SETTING.get('github_oauth_enabled') %}
+                        <a href="{{ url_for('index.github_login') }}"
+                           class="btn btn-block btn-social btn-github btn-flat">
+                            <i class="fa-brands fa-github"></i>
+                            Sign in using Github
+                        </a>
+                    {% endif %}
+                    {% if SETTING.get('google_oauth_enabled') %}
+                        <a href="{{ url_for('index.google_login') }}"
+                           class="btn btn-block btn-social btn-google btn-flat">
+                            <i class="fa-brands fa-google"></i>
+                            Sign in using Google
+                        </a>
+                    {% endif %}
+                    {% if SETTING.get('azure_oauth_enabled') %}
+                        <a href="{{ url_for('index.azure_login') }}"
+                           class="btn btn-block btn-social btn-microsoft btn-flat">
+                            <i class="fa-brands fa-windows"></i>
+                            Sign in using Microsoft Azure
+                        </a>
+                    {% endif %}
+                </div>
+            {% endif %}
+            {% if saml_enabled %}
+                <a href="{{ url_for('index.saml_login') }}">
+                    SAML login
+                </a>
+            {% endif %}
+            {% if SETTING.get('signup_enabled') %}
+                <br>
+                <a href="{{ url_for('index.register') }}" class="text-center">
+                    Create an account
+                </a>
+                {% if SETTING.get('verify_user_email') %}
+                    <br/>
+                    <a href="{{ url_for('index.resend_confirmation_email') }}" class="text-center">
+                        Resend confirmation email
+                    </a>
+                {% endif %}
+            {% endif %}
         </div>
-      </div>
-      <div class="login-box-footer">
-        <center>
-          <p>Powered by <a href="https://github.com/PowerDNS-Admin/PowerDNS-Admin">PowerDNS-Admin</a></p>
-        </center>
-      </div>
+        <!-- /.card-body -->
     </div>
-    {% assets "js_login" -%}
-      <script type="text/javascript" src="{{ ASSET_URL }}"></script>
-    {%- endassets %}
-    {% assets "js_validation" -%}
-      <script type="text/javascript" src="{{ ASSET_URL }}"></script>
-    {%- endassets %}
-    <script>
-      $(function () {
+    <!-- /.card -->
+</div>
+<!-- /.login-box -->
+<div class="text-center pt-3">
+    <p>Powered by <a href="https://powerdnsadmin.org" target="_blank">PowerDNS-Admin</a></p>
+</div>
+{% assets "js_login" -%}
+    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
+{%- endassets %}
+{% assets "js_validation" -%}
+    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
+{%- endassets %}
+<script>
+    $(function () {
         $('input').iCheck({
-          checkboxClass: 'icheckbox_square-blue',
-          radioClass: 'iradio_square-blue',
-          increaseArea: '20%' // optional
+            checkboxClass: 'icheckbox_square-blue',
+            radioClass: 'iradio_square-blue',
+            increaseArea: '20%' // optional
         });
-      });
-    </script>
-  </body>
+    });
+</script>
+</body>
 </html>
diff --git a/powerdnsadmin/templates/maintenance.html b/powerdnsadmin/templates/maintenance.html
index a9839e5..6eb527f 100644
--- a/powerdnsadmin/templates/maintenance.html
+++ b/powerdnsadmin/templates/maintenance.html
@@ -1,43 +1,49 @@
-<!doctype html>
-<title>Site Maintenance</title>
-<style>
-  body {
-    text-align: center;
-    padding: 150px;
-  }
+<!DOCTYPE html>
+<html lang="en" class>
+<head>
+    <title>Site Maintenance</title>
+    <style>
+        body {
+            text-align: center;
+            padding: 150px;
+        }
 
-  h1 {
-    font-size: 50px;
-  }
+        h1 {
+            font-size: 50px;
+        }
 
-  body {
-    font: 20px Helvetica, sans-serif;
-    color: #333;
-  }
+        body {
+            font: 20px Helvetica, sans-serif;
+            color: #333;
+        }
 
-  article {
-    display: block;
-    text-align: left;
-    width: 650px;
-    margin: 0 auto;
-  }
+        article {
+            display: block;
+            text-align: left;
+            width: 650px;
+            margin: 0 auto;
+        }
 
-  a {
-    color: #dc8100;
-    text-decoration: none;
-  }
-
-  a:hover {
-    color: #333;
-    text-decoration: none;
-  }
-</style>
+        a {
+            color: #dc8100;
+            text-decoration: none;
+        }
 
+        a:hover {
+            color: #333;
+            text-decoration: none;
+        }
+    </style>
+</head>
+<body>
 <article>
-  <h1>We&rsquo;ll be back soon!</h1>
-  <div>
-    <p>Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment. Please contact the System
-      Administrator if you need more information, otherwise we&rsquo;ll be back online shortly!</p>
-    <p>&mdash; Team</p>
-  </div>
+    <h1>We&rsquo;ll be back soon!</h1>
+    <div>
+        <p>Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment. Please contact the
+            System
+            Administrator if you need more information, otherwise we&rsquo;ll be back online shortly!</p>
+        <p>&mdash; Team</p>
+    </div>
 </article>
+</body>
+</html>
\ No newline at end of file
diff --git a/powerdnsadmin/templates/register.html b/powerdnsadmin/templates/register.html
index 81c833f..0a5d6d5 100644
--- a/powerdnsadmin/templates/register.html
+++ b/powerdnsadmin/templates/register.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html>
-
-  <head>
+<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Register - {{ SITE_NAME }}</title>
@@ -10,183 +9,201 @@
     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
     {% assets "css_login" -%}
-      <link rel="stylesheet" href="{{ ASSET_URL }}">
+        <link rel="stylesheet" href="{{ ASSET_URL }}">
     {%- endassets %}
-  </head>
+</head>
 
-  <body class="hold-transition register-page">
-    <div class="register-box">
-      <div class="card card-outline card-primary">
+<body class="hold-transition register-page">
+<div class="register-box">
+    <div class="card card-outline card-primary shadow">
         <div class="card-header text-center">
-          <a href="{{ url_for('index.index') }}" class="h3">
-            {% if SETTING.get('site_name') %}
-              {{ SITE_NAME }}
-            {% else %}
-              <b>PowerDNS</b>-Admin
-            {% endif %}
-          </a>
+            <a href="{{ url_for('index.index') }}" class="h3">
+                {% if SETTING.get('site_name') %}
+                    {{ SITE_NAME }}
+                {% else %}
+                    <b>PowerDNS</b>-Admin
+                {% endif %}
+            </a>
         </div>
         <div class="card-body">
-          {% if error %}
-          <div class="alert alert-danger alert-dismissible">
-            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-            {{ error }}
-          </div>
-          {% endif %}
-          <p class="login-box-msg">Enter your personal details below</p>
-          <form action="{{ url_for('index.register') }}" method="post" validator>
-            <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
-            
-            <div class="form-group">
-              <div class="input-group">
-                <div class="input-group-prepend">
+            {% if error %}
+                <div class="alert alert-danger alert-dismissible">
+                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+                    {{ error }}
+                </div>
+            {% endif %}
+            <p class="login-box-msg">Enter your personal details below</p>
+            <form action="{{ url_for('index.register') }}" method="post" validator>
+                <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
+
+                <div class="form-group">
+                    <div class="input-group">
+                        <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">
+                                <i class="fas fa-exclamation-triangle"></i>
+                                {{ error_messages['firstname'] }}
+                            </div>
+                        {% endif %}
+                    </div>
                 </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">
-                    <i class="fas fa-exclamation-triangle"></i>
-                    {{ error_messages['firstname'] }}
-                  </div>
-                {% endif %}
-              </div>
-            </div>
 
-            <div class="form-group">
-              <div class="input-group">
-                <div class="input-group-prepend">
+                <div class="form-group">
+                    <div class="input-group">
+                        <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">
+                                <i class="fas fa-exclamation-triangle"></i>
+                                {{ error_messages['lastname'] }}
+                            </div>
+                        {% endif %}
+                    </div>
                 </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">
-                    <i class="fas fa-exclamation-triangle"></i>
-                    {{ error_messages['lastname'] }}
-                  </div>
-                {% endif %}
-              </div>
-            </div>
 
-            <div class="form-group">
-              <div class="input-group">
-                <div class="input-group-prepend">
+                <div class="form-group">
+                    <div class="input-group">
+                        <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">
+                                <i class="fas fa-exclamation-triangle"></i>
+                                {{ error_messages['email'] }}
+                            </div>
+                        {% endif %}
+                    </div>
                 </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">
-                    <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>
+                <p class="login-box-msg">Enter your account details below</p>
 
-            <div class="form-group">
-              <div class="input-group">
-                <div class="input-group-prepend">
+                <div class="form-group">
+                    <div class="input-group">
+                        <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 'username' in error_messages %}
+                            <div class="invalid-feedback">
+                                <i class="fas fa-exclamation-triangle"></i>
+                                {{ error_messages['username'] }}
+                            </div>
+                        {% endif %}
+                    </div>
                 </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 'username' in error_messages %}
-                  <div class="invalid-feedback">
-                    <i class="fas fa-exclamation-triangle"></i>
-                    {{ error_messages['username'] }}
-                  </div>
-                {% endif %}
-              </div>
-            </div>
 
-            <div class="form-group">
-              <div class="input-group">
-                <div class="input-group-prepend">
+                <div class="form-group">
+                    <div class="input-group">
+                        <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 'password' in error_messages %}
+                            <div class="invalid-feedback">
+                                <i class="fas fa-exclamation-triangle"></i>
+                                {{ error_messages['password'] }}
+                            </div>
+                        {% endif %}
+                    </div>
                 </div>
-                <input type="password" class="form-control {{ 'is-invalid' if 'password' in error_messages else '' }}" placeholder="Password" id="password" name="password" required>
-                {% if 'password' in error_messages %}
-                  <div class="invalid-feedback">
-                    <i class="fas fa-exclamation-triangle"></i>
-                    {{ error_messages['password'] }}
-                  </div>
-                {% endif %}
-              </div>
-            </div>
 
-            <div class="form-group">
-              <div class="input-group">
-                <div class="input-group-prepend">
+                <div class="form-group">
+                    <div class="input-group">
+                        <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">
+                                <i class="fas fa-exclamation-triangle"></i>
+                                {{ error_messages['rpassword'] }}
+                            </div>
+                        {% endif %}
+                    </div>
                 </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">
-                    <i class="fas fa-exclamation-triangle"></i>
-                    {{ error_messages['rpassword'] }}
-                  </div>
-                {% endif %}
-              </div>
-            </div>
 
-            {% if captcha_enable %}
-            <p class="login-box-msg">Please complete the CAPTCHA below</p>
-            <div class="form-group">
-              {{ captcha() }}
-              <div class="input-group">
-                <div class="input-group-prepend">
+                {% if captcha_enable %}
+                    <p class="login-box-msg">Please complete the CAPTCHA below</p>
+                    <div class="form-group">
+                    {{ captcha() }}
+                    <div class="input-group">
+                        <div class="input-group-prepend">
                   <span class="input-group-text">
                     <i class="fas fa-shield-alt"></i>
                   </span>
-                </div>
-              <input type="text" class="form-control {{ 'is-invalid' if 'captcha_result' in error_messages else '' }}" placeholder="CAPTCHA"  id="captcha" name="captcha" required>
-              {% if 'captcha_result' in error_messages %}
-                <div class="invalid-feedback">
-                  <i class="fas fa-exclamation-triangle"></i>
-                  {{ error_messages['captcha_result'] }}
-                </div>
-              {% endif %}
-            </div>
-          {% endif %}
+                        </div>
+                        <input type="text"
+                               class="form-control {{ 'is-invalid' if 'captcha_result' in error_messages else '' }}"
+                               placeholder="CAPTCHA" id="captcha" name="captcha" required>
+                        {% if 'captcha_result' in error_messages %}
+                            <div class="invalid-feedback">
+                                <i class="fas fa-exclamation-triangle"></i>
+                                {{ error_messages['captcha_result'] }}
+                            </div>
+                        {% endif %}
+                    </div>
+                {% endif %}
 
-          <div class="row">
-            <div class="d-flex justify-content-between mx-auto mt-3">
-              <button type="button" class="btn btn-secondary" id="button_back">Back</button>
-              <button type="submit" class="btn btn-primary btn-block mx-3">Register</button>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div class="login-box-footer">
-        <center>
-          <p>Powered by <a href="https://github.com/PowerDNS-Admin/PowerDNS-Admin">PowerDNS-Admin</a></p>
-        </center>
-      </div>
+                <div class="row">
+                    <div class="d-flex justify-content-between mx-auto mt-3">
+                        <button type="button" class="btn btn-secondary" id="button_back">Back</button>
+                        <button type="submit" class="btn btn-primary btn-block mx-3">Register</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+        <!-- /.card-body -->
     </div>
-    {% assets "js_login" -%}
-      <script type="text/javascript" src="{{ ASSET_URL }}"></script>
-    {%- endassets %}
-    {% assets "js_validation" -%}
-      <script type="text/javascript" src="{{ ASSET_URL }}"></script>
-    {%- endassets %}
-    <script>
-      $(function () {
+    <!-- /.card -->
+</div>
+<!-- /.register-box -->
+<div class="text-center pt-3">
+    <p>Powered by <a href="https://powerdnsadmin.org" target="_blank">PowerDNS-Admin</a></p>
+</div>
+{% assets "js_login" -%}
+    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
+{%- endassets %}
+{% assets "js_validation" -%}
+    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
+{%- endassets %}
+<script>
+    $(function () {
         $('#button_back').click(function () {
-          window.location.href = '{{ url_for('index.login') }}';
+            window.location.href = '{{ url_for('index.login') }}';
         })
-      });
-    </script>
-  </body>
+    });
+</script>
+</body>
 </html>
diff --git a/powerdnsadmin/templates/register_otp.html b/powerdnsadmin/templates/register_otp.html
index 2e84786..683bc7f 100755
--- a/powerdnsadmin/templates/register_otp.html
+++ b/powerdnsadmin/templates/register_otp.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html>
-
-  <head>
+<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Welcome - {{ SITE_NAME }}</title>
@@ -9,82 +8,82 @@
     <!-- Tell the browser to be responsive to screen width -->
     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
     {% assets "css_login" -%}
-    <link rel="stylesheet" href="{{ ASSET_URL }}">
+        <link rel="stylesheet" href="{{ ASSET_URL }}">
     {%- endassets %}
     {% if SETTING.get('custom_css') %}
-    <link rel="stylesheet" href="/static/custom/{{ SETTING.get('custom_css') }}">
+        <link rel="stylesheet" href="/static/custom/{{ SETTING.get('custom_css') }}">
     {% endif %}
-  </head>
-
-  <body class="hold-transition register-page">
-    <div class="register-box">
-      <div class="register-logo">
+</head>
+<body class="hold-transition register-page">
+<div class="register-box">
+    <div class="register-logo">
         <a><b>PowerDNS</b>-Admin</a>
-      </div>
-      <div class="register-box-body">
+    </div>
+    <div class="register-box-body">
         {% if error %}
-        <div class="alert alert-danger alert-dismissible">
-          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-          {{ error }}
-        </div>
+            <div class="alert alert-danger alert-dismissible">
+                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+                {{ error }}
+            </div>
         {% endif %}
-        Welcome, {{user.firstname}}! <br />
-        You will need a Token on login. <br />
+        Welcome, {{ user.firstname }}! <br/>
+        You will need a Token on login. <br/>
         Your QR code is:
         <div id="token_information">
-          {% if qrcode_image == None %}
-          <p><img id="qrcode" src="{{ url_for('user.qrcode') }}"></p>
-          {% else %}
-          <p><img id="qrcode" src="data:image/svg+xml;utf8;base64, {{qrcode_image}}"></p>
-          {% endif %}
-          <p>
-            Your secret key is: <br />
+            {% if qrcode_image == None %}
+                <p><img id="qrcode" src="{{ url_for('user.qrcode') }}"></p>
+            {% else %}
+                <p><img id="qrcode" src="data:image/svg+xml;utf8;base64, {{ qrcode_image }}"></p>
+            {% endif %}
+            <p>
+                Your secret key is: <br/>
             <form>
-              <input type=text id="otp_secret" value={{user.otp_secret}} readonly>
-              <button type=button style="position:relative; right:28px" onclick="copy_otp_secret_to_clipboard()"> <i class="fa fa-clipboard"></i> </button>
-              <br /><font color="red" id="copy_tooltip" style="visibility:collapse">Copied.</font>
+                <input type=text id="otp_secret" value={{ user.otp_secret }} readonly>
+                <button type=button style="position:relative; right:28px" onclick="copy_otp_secret_to_clipboard()"><i
+                    class="fa fa-clipboard"></i></button>
+                <br/><font color="red" id="copy_tooltip" style="visibility:collapse">Copied.</font>
             </form>
-          </p>
-          You can use Google Authenticator (<a target="_blank"
-              href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2">Android</a>
-          - <a target="_blank"
-              href="https://apps.apple.com/us/app/google-authenticator/id388497605">iOS</a>)
-          <br />
-          or FreeOTP (<a target="_blank"
-              href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp&hl=en">Android</a>
-          - <a target="_blank"
-              href="https://itunes.apple.com/en/app/freeotp-authenticator/id872559395?mt=8">iOS</a>)
-          on your smartphone <br /> to scan the QR code or type the secret key.
-          <br /> <br />
-          <font color="red"><strong><i>Make sure only you can see this QR Code <br />
-            and secret key, and nobody can capture them.</i></strong></font>
+            </p>
+            You can use Google Authenticator (<a target="_blank"
+                                                 href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2">Android</a>
+            - <a target="_blank"
+                 href="https://apps.apple.com/us/app/google-authenticator/id388497605">iOS</a>)
+            <br/>
+            or FreeOTP (<a target="_blank"
+                           href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp&hl=en">Android</a>
+            - <a target="_blank"
+                 href="https://itunes.apple.com/en/app/freeotp-authenticator/id872559395?mt=8">iOS</a>)
+            on your smartphone <br/> to scan the QR code or type the secret key.
+            <br/> <br/>
+            <font color="red"><strong><i>Make sure only you can see this QR Code <br/>
+                and secret key, and nobody can capture them.</i></strong></font>
         </div>
         </br>
         Please input your OTP token to continue, to ensure the seed has been scanned correctly.
         <form action="" method="post" data-toggle="validator">
-          <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
-          <div class="form-group">
-            <input type="text" class="form-control" placeholder="OTP Token" name="otptoken"
-              data-error="Please input your OTP token" required>
-          </div>
-          <div class="row">
-            <div class="col-xs-4">
-              <button type="submit" class="btn btn-primary btn-block">Continue</button>
+            <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
+            <div class="form-group">
+                <input type="text" class="form-control" placeholder="OTP Token" name="otptoken"
+                       data-error="Please input your OTP token" required>
+            </div>
+            <div class="row">
+                <div class="col-xs-4">
+                    <button type="submit" class="btn btn-primary btn-block">Continue</button>
+                </div>
             </div>
-          </div>
         </form>
-      </div>
-      <div class="login-box-footer">
-        <center>
-          <p>Powered by <a href="https://github.com/PowerDNS-Admin/PowerDNS-Admin">PowerDNS-Admin</a></p>
-        </center>
-      </div>
     </div>
-  </body>
-  {% assets "js_login" -%}
-  <script type="text/javascript" src="{{ ASSET_URL }}"></script>
-  {%- endassets %}
-  {% assets "js_validation" -%}
-  <script type="text/javascript" src="{{ ASSET_URL }}"></script>
-  {%- endassets %}
+    <!-- /.register-box-body -->
+    <div class="text-center">
+        <p>Powered by <a href="https://powerdnsadmin.org" target="_blank">PowerDNS-Admin</a></p>
+    </div>
+</div>
+<!-- /.register-box -->
+</body>
+{% assets "js_login" -%}
+    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
+{%- endassets %}
+{% assets "js_validation" -%}
+    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
+{%- endassets %}
 </html>
\ No newline at end of file
diff --git a/powerdnsadmin/templates/user_profile.html b/powerdnsadmin/templates/user_profile.html
index b7bf69f..3bb9971 100644
--- a/powerdnsadmin/templates/user_profile.html
+++ b/powerdnsadmin/templates/user_profile.html
@@ -1,190 +1,219 @@
 {% extends "base.html" %}
-
 {% set active_page = "user_profile" %}
-
-{% block title %}
-  <title>
-    My Profile - {{ SITE_NAME }}
-  </title>
-{% endblock %}
+{% block title %}<title>Edit Profile - {{ 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">
-            User
-            <small>My Profile</small>
-          </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">Edit Profile</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">Edit Profile</li>
+                    </ol>
+                </div>
+            </div>
         </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">My Profile</li>
-          </ol>
-        </div>
-      </div>
     </div>
-  </div>
 {% endblock %}
 
 {% block content %}
-<section class="content">
-  <div class="container-fluid">
-    <div class="row">
-      <div class="col-6">
-        <div class="card">
-          <div class="card-header">
-            <div class="nav-tabs-custom">
-              <ul class="nav nav-tabs" role="tablist">
-                <li class="nav-item">
-                  <a class="nav-link active" href="#tabs-personal" data-toggle="tab">
-                    Personal Info
-                  </a>
-                </li>
-                {%  if session['authentication_type'] == 'LOCAL' %}
-                  <li class="nav-item">
-                    <a class="nav-link" href="#tabs-password" data-toggle="tab">
-                      Change Password
-                    </a>
-                  </li>
-                {% endif %}
-                {%  if session['authentication_type'] in ['LOCAL', 'LDAP'] %}
-                  <li class="nav-item">
-                    <a class="nav-link" href="#tabs-authentication" data-toggle="tab">
-                      Authentication
-                    </a>
-                  </li>
-                {% endif %}
-              </ul>
-              <div class="card-body">
-              <div class="tab-content">
-                <div class="tab-pane fade show active" id="tabs-personal">
-                  <form role="form" method="post" action="{{ user_profile }}">
-                    <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
-                    <div class="form-group">
-                      <label for="firstname">First Name</label>
-                      <input type="text" class="form-control" name="firstname" id="firstname" placeholder="{{ current_user.firstname }}"
-                      {%  if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}>
+    <section class="content">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-12 col-sm-6">
+                    <div class="card card-outline card-primary shadow">
+                        <div class="card-header">
+                            <h3 class="card-title">Profile Editor</h3>
+                        </div>
+                        <!-- /.card-header -->
+                        <div class="card-body">
+                            <div class="nav-tabs-custom mb-2">
+                                <ul class="nav nav-tabs" role="tablist">
+                                    <li class="nav-item">
+                                        <a class="nav-link active" href="#tabs-personal" data-toggle="tab">
+                                            Personal Info
+                                        </a>
+                                    </li>
+                                    {% if session['authentication_type'] == 'LOCAL' %}
+                                        <li class="nav-item">
+                                            <a class="nav-link" href="#tabs-password" data-toggle="tab">
+                                                Change Password
+                                            </a>
+                                        </li>
+                                    {% endif %}
+                                    {% if session['authentication_type'] in ['LOCAL', 'LDAP'] %}
+                                        <li class="nav-item">
+                                            <a class="nav-link" href="#tabs-authentication" data-toggle="tab">
+                                                Authentication
+                                            </a>
+                                        </li>
+                                    {% endif %}
+                                </ul>
+                            </div>
+                            <!-- /.nav-tabs-custom -->
+
+                            <div class="tab-content">
+                                <div class="tab-pane fade show active" id="tabs-personal">
+                                    <form role="form" method="post" action="{{ user_profile }}">
+                                        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
+                                        <div class="form-group">
+                                            <label for="firstname">First Name</label>
+                                            <input type="text" class="form-control" name="firstname"
+                                                   id="firstname" placeholder="{{ current_user.firstname }}"
+                                                   {% if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}>
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="lastname">Last Name</label>
+                                            <input type="text" class="form-control" name="lastname"
+                                                   id="lastname" placeholder="{{ current_user.lastname }}"
+                                                   {% if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}>
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="email">E-Mail</label> <input type="email"
+                                                                                     class="form-control"
+                                                                                     name="email" id="email"
+                                                                                     placeholder="{{ current_user.email }}"
+                                                                                     {% if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}>
+                                        </div>
+                                        {% if session['authentication_type'] == 'LOCAL' %}
+                                            <div class="form-group">
+                                                <button type="submit" class="btn btn-primary" title="Save Profile">
+                                                    <i class="fa-solid fa-floppy-disk"></i>&nbsp;Save Profile
+                                                </button>
+                                            </div>
+                                        {% endif %}
+                                    </form>
+                                </div>
+                                <!-- /.tab-pane -->
+
+                                {% if session['authentication_type'] == 'LOCAL' %}
+                                    <div class="tab-pane fade" id="tabs-password">
+                                        {% if not current_user.password %}
+                                            Your account password is managed via LDAP which isn't supported to
+                                            change here.
+                                        {% else %}
+                                            <form action="{{ user_profile }}" method="post">
+                                                <input type="hidden" name="_csrf_token"
+                                                       value="{{ csrf_token() }}">
+                                                <div class="form-group">
+                                                    <label for="password">New Password</label>
+                                                    <input type="password" class="form-control" name="password"
+                                                           id="newpassword">
+                                                </div>
+                                                <div class="form-group">
+                                                    <label for="rpassword">Re-type New Password</label>
+                                                    <input type="password" class="form-control" name="rpassword"
+                                                           id="rpassword">
+                                                </div>
+                                                <div class="form-group">
+                                                    <button type="submit" class="btn btn-primary" title="Save Password">
+                                                        <i class="fa-solid fa-floppy-disk"></i>&nbsp;Save Password
+                                                    </button>
+                                                </div>
+                                            </form>
+                                        {% endif %}
+                                    </div>
+                                    <!-- /.tab-pane -->
+                                {% endif %}
+
+                                <div class="tab-pane fade" id="tabs-authentication">
+                                    <form action="{{ user_profile }}" method="post">
+                                        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
+                                        <div class="form-group">
+                                            <input type="checkbox" id="otp_toggle" class="otp_toggle"
+                                                   {% if current_user.otp_secret %}checked{% endif %}>
+                                            <label for="otp_toggle">Enable Two Factor Authentication</label>
+                                            {% if current_user.otp_secret %}
+                                                <div id="token_information">
+                                                    <p>
+                                                        <img id="qrcode" src="{{ url_for('user.qrcode') }}">
+                                                    </p>
+                                                    <div style="position: relative; left: 15px">
+                                                        Your secret key is:
+                                                        <br/>
+                                                        <form>
+                                                            <input type=text id="otp_secret"
+                                                                   value={{ current_user.otp_secret }} readonly>
+                                                            <button type=button
+                                                                    style="position:relative; right:28px"
+                                                                    onclick="copy_otp_secret_to_clipboard()">
+                                                                <i class="fa-solid fa-clipboard"></i>
+                                                            </button>
+                                                            <br/>
+                                                            <span style="color: red;" id="copy_tooltip"
+                                                                  style="visibility:collapse">Copied.</span>
+                                                        </form>
+                                                    </div>
+                                                    You can use Google Authenticator
+                                                    (<a target="_blank"
+                                                        href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"><i
+                                                    class="fa-brands fa-google-play"></i>Android</a>
+                                                    - <a target="_blank"
+                                                         href="https://apps.apple.com/us/app/google-authenticator/id388497605"><i
+                                                    class="fa-brands fa-app-store-ios"></i>iOS</a>)
+                                                    or FreeOTP
+                                                    (<a target="_blank"
+                                                        href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp&hl=en"><i
+                                                    class="fa-brands fa-google-play"></i>Android</a>
+                                                    - <a target="_blank"
+                                                         href="https://itunes.apple.com/en/app/freeotp-authenticator/id872559395?mt=8"><i
+                                                    class="fa-brands fa-app-store-ios"></i>iOS</a>)
+                                                    on your smartphone to scan the QR code.
+                                                    <br/>
+                                                    <p style="color: red; font-style: italic; font-weight: bold;">
+                                                        Make sure only you can see this QR Code and
+                                                                secret key and
+                                                                nobody can capture them.
+                                                    </p>
+                                                </div>
+                                            {% endif %}
+                                        </div>
+                                        <!-- /.form-group -->
+                                    </form>
+                                </div>
+                                <!-- /.tab-pane -->
+                            </div>
+                            <!-- /.tab-content -->
+                        </div>
+                        <!-- /.card-body -->
                     </div>
-                    <div class="form-group">
-                      <label for="lastname">Last Name</label>
-                      <input type="text" class="form-control" name="lastname" id="lastname" placeholder="{{ current_user.lastname }}"
-                      {%  if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}>
-                    </div>
-                    <div class="form-group">
-                      <label for="email">E-Mail</label> <input type="email" class="form-control" name="email" id="email" placeholder="{{ current_user.email }}"
-                      {%  if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}>
-                    </div>
-                    {%  if session['authentication_type'] == 'LOCAL' %}
-                      <div class="form-group">
-                        <button type="submit" class="btn btn-primary">
-                          <i class="fa-solid fa-floppy-disk"></i>&nbsp;Save
-                        </button>
-                      </div>
-                    {% endif %}
-                  </form>
+                    <!-- /.card -->
                 </div>
-                {% if session['authentication_type'] == 'LOCAL' %}
-                  <div class="tab-pane fade" id="tabs-password">
-                    {% if not current_user.password %}
-                      Your account password is managed via LDAP which isn't supported to change here.
-                    {% else %}
-                      <form action="{{ user_profile }}" method="post">
-                        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
-                        <div class="form-group">
-                          <label for="password">New Password</label>
-                          <input type="password" class="form-control" name="password" id="newpassword">
-                        </div>
-                        <div class="form-group">
-                          <label for="rpassword">Re-type New Password</label>
-                          <input type="password" class="form-control" name="rpassword" id="rpassword">
-                        </div>
-                        <div class="form-group">
-                          <button type="submit" class="btn btn-primary">
-                            <i class="fa-solid fa-floppy-disk"></i>&nbsp;Save
-                          </button>
-                        </div>
-                      </form>
-                    {% endif %}
-                  </div>
-                {% endif %}
-                <div class="tab-pane fade" id="tabs-authentication">
-                  <form action="{{ user_profile }}" method="post">
-                    <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
-                    <div class="form-group">
-                      <input type="checkbox" id="otp_toggle" class="otp_toggle" {% if current_user.otp_secret %}checked{% endif %}>
-                      <label for="otp_toggle">Enable Two Factor Authentication</label>
-                      {% if current_user.otp_secret %}
-                        <div id="token_information">
-                          <p>
-                            <img id="qrcode" src="{{ url_for('user.qrcode') }}">
-                          </p>
-                          <div style="position: relative; left: 15px">
-                            Your secret key is:
-                            <br />
-                              <form>
-                                <input type=text id="otp_secret" value={{current_user.otp_secret}} readonly>
-                                <button type=button style="position:relative; right:28px" onclick="copy_otp_secret_to_clipboard()">
-                                  <i class="fa-solid fa-clipboard"></i>
-                                </button>
-                                <br />
-                                <font color="red" id="copy_tooltip" style="visibility:collapse">Copied.</font>
-                              </form>
-                          </div>
-                          You can use Google Authenticator 
-                          (<a target="_blank" href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"><i class="fa-brands fa-google-play"></i>Android</a>
-                          - <a target="_blank" href="https://apps.apple.com/us/app/google-authenticator/id388497605"><i class="fa-brands fa-app-store-ios"></i>iOS</a>)
-                           or FreeOTP 
-                           (<a target="_blank" href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp&hl=en"><i class="fa-brands fa-google-play"></i>Android</a>
-                           - <a target="_blank" href="https://itunes.apple.com/en/app/freeotp-authenticator/id872559395?mt=8"><i class="fa-brands fa-app-store-ios"></i>iOS</a>) 
-                           on your smartphone to scan the QR code.
-                           <br />
-                          <font color="red">
-                            <strong>
-                              <i>Make sure only you can see this QR Code and secret key and
-                                nobody can capture them.
-                              </i>
-                            </strong>
-                          </font>
-                        </div>
-                      {% endif %}
-                    </div>
-                  </form>
-                </div>
-              </div>
+                <!-- /.col -->
             </div>
-          </div>
+            <!-- /.row -->
         </div>
-      </div>
-    </div>
-  </div>
-</section>
+        <!-- /.container-fluid -->
+    </section>
 {% endblock %}
+
 {% block extrascripts %}
-<script>
+    <script>
 
-    // initialize pretty checkboxes
-    $('.otp_toggle').iCheck({
-        checkboxClass: 'icheckbox_square-blue',
-        increaseArea: '20%'
-    });
+        // initialize pretty checkboxes
+        $('.otp_toggle').iCheck({
+            checkboxClass: 'icheckbox_square-blue',
+            increaseArea: '20%'
+        });
 
-    // handle checkbox toggling
-    $('.otp_toggle').on('ifToggled', function(event) {
-    var enable_otp = $(this).prop('checked');
-    var postdata = {
-        'action': 'enable_otp',
-        'data': {
-            'enable_otp': enable_otp
-        },
-        '_csrf_token': '{{ csrf_token() }}'
-    };
-    applyChanges(postdata, $SCRIPT_ROOT + '/user/profile', false, true, function() {
-        window.location.reload();
-        $('#tabs li:eq(2) a').tab('show');
-    });
-  });
-</script>
+        // handle checkbox toggling
+        $('.otp_toggle').on('ifToggled', function (event) {
+            var enable_otp = $(this).prop('checked');
+            var postdata = {
+                'action': 'enable_otp',
+                'data': {
+                    'enable_otp': enable_otp
+                },
+                '_csrf_token': '{{ csrf_token() }}'
+            };
+            applyChanges(postdata, $SCRIPT_ROOT + '/user/profile', false, true, function () {
+                window.location.reload();
+                $('#tabs li:eq(2) a').tab('show');
+            });
+        });
+    </script>
 {% endblock %}
