WIP: Passwordless

2021-05-28 21:23:13 +03:00
53 changed files with 657 additions and 1275 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -104,4 +104,3 @@ venv.bak/
 # mypy
 .mypy_cache/
 example/test_db
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,52 +1,7 @@
 # Change Log
 ## 2.8.0
 * Support For Django 4.0+ JSONField
 * Removed jsonfield package from requirements
-## 2.7.0 
+## 2.2.0 (Not released)
-* Fixed #70
+   * Added: MFA_REDIRECT_AFTER_REGISTRATION settings parameter 
 * Add QR Code for trusted device link
 * Better formatting for trusted device start page.
 ## 2.6.1
 * Fix: CVE-2022-42731: related to the possibility of registration replay attack.
  Thanks to 'SSE (Secure Systems Engineering)'
 ## 2.5.1
 * Fix: CVE-2022-42731: related to the possibility of registration replay attack.
  Thanks to 'SSE (Secure Systems Engineering)' 
 ## 2.6.0
   * Adding Backup Recovery Codes (Recovery) as a method.
     Thanks to @Spitfireap for work, and  @peterthomassen for guidance.
   * Added: `RECOVERY_ITERATION` to set the number of iteration when hashing recovery token
   * Added: `MFA_ENFORCE_RECOVERY_METHOD` to enforce the user to enroll in the recovery code method once, they add any other method,
   * Added: `MFA_ALWAYS_GO_TO_LAST_METHOD` to the settings which redirects the user automatically to the last used method when logging in
   * Added: `MFA_RENAME_METHODS` to be able to rename the methods for the user.
   * Fix: Alot of CSS fixes for the example application
 ## 2.5.0
   * Fixed: issue in the 'Authorize' button don't show on Firefox and Chrome on iOS.
     Note: It seems Firefox doesn't support WebAuthn on iOS
   * Fixed: Support for bootstrap5
     Thanks to @ezrajrice
   * Upgraded to fido2==1.0.0
 ## 2.4.0
   * Fixed: issue in the 'Authorize' button don't show on Safari Mobile.
   * Upgrade to FIDO2 0.9.2, to fix issue with Windows 11.
   * Fixed: Minor Typos.
 ## 2.3.0
   * Fixed: A missing import Thanks @AndreasDickow
   * Fixed: `MFA.html` now call `{{block.super}}` for head and content blocks, thanks @mnelson4
   * Added: #55 introduced `mfa_base.html` which will be extended by `MFA.html` for better styling 
 ## 2.2.0
   * Added: MFA_REDIRECT_AFTER_REGISTRATION settings parameter
   * Fixed: Deprecation error for NULBooleanField
 ## 2.1.2
  * Fixed: Getting timestamp on Python 3.7 as ("%s") is raising an exception
@@ -54,7 +9,7 @@
 ## 2.1.1
-  * Fixed: FIDO2 version in requirements.txt file.
+  * Fixed: FIDO2 version in requirments.txt file.
 ## 2.1.0
   * Added Support for Touch ID for Mac OSx and iOS 14 on Safari
--- a/EXAMPLE.md
+++ b/EXAMPLE.md
@@ -4,15 +4,5 @@
 `virtualenv venv`
 1. activate env `source venv/bin/activate`
 1. install requirements `pip install -r requirements.txt`
 1. cd to example project `cd example`
 1. migrate `python manage.py migrate`
-1. create super user `python manage.py createsuperuser`
+1. create super user 'python manage.py createsuperuser' 
 1. start the server `python manage.py runserver`
 # Notes for SSL
 To test FIDO2 you need to use HTTPS, after the above steps are done:
 1. stop the server
 1. install requirements `pip install -r example-ssl-requirements.txt`
 1. start the ssl server `python manage.py runsslserver`
--- a/README.md
+++ b/README.md
@@ -1,7 +1,6 @@
 # django-mfa2
-A Django app that handles MFA, it supports TOTP, U2F, FIDO2 U2F (Web Authn), Email Tokens , Trusted  Devices and backup codes.
+A Django app that handles MFA, it supports TOTP, U2F, FIDO2 U2F (Web Authn), Email Tokens , and Trusted Devices
 [![Works with PassKeys](https://github.com/mkalioby/django-mfa2/raw/master/img/Works%20with%20PassKeys-black.png)](https://fidoalliance.org/passkeys/)
 ### Pip Stats
 [![PyPI version](https://badge.fury.io/py/django-mfa2.svg)](https://badge.fury.io/py/django-mfa2)
 [![Downloads Count](https://static.pepy.tech/personalized-badge/django-mfa2?period=total&units=international_system&left_color=black&right_color=green&left_text=Downloads)](https://pepy.tech/project/django-mfa2)
@@ -17,14 +16,10 @@ Web Authencation API (WebAuthn) is state-of-the art techology that is expected t
 For FIDO2, the following are supported
 * **security keys** (Firefox 60+, Chrome 67+, Edge 18+, Safari 13 on Mac OS, Chrome on Andriod, Safari on iOS 13.3+),
- * **Windows Hello** (Firefox 67+, Chrome 72+ , Edge),
+ * **Windows Hello** (Firefox 67+, Chrome 72+ , Edge) ,
 * **Apple's Touch ID/Face ID** (Chrome 70+ on Mac OS X, Safari on macOS Big Sur, Safari on iOS 14.0+ ),
 * **android-safetynet** (Chrome 70+, Firefox 68+)
 * **NFC devices using PCSC** (Not Tested, but as supported in fido2)
 * **Soft Tokens** 
    * ~~[krypt.co](https://krypt.co/): Login by a notification on your phone.~~
 **Update**: Dec 2022, krypt.co has been killed by Google for Passkeys.
 In English :), It allows you to verify the user by security keys on PC, Laptops or Mobiles, Windows Hello (Fingerprint, PIN) on Windows 10 Build 1903+ (May 2019 Update) Touch/Face ID on Macbooks (Chrome, Safari), Touch/Face ID on iPhone and iPad and Fingerprint/Face/Iris/PIN on Android Phones.
@@ -34,8 +29,6 @@ Trusted device is a mode for the user to add a device that doesn't support secur
 Package tested with Django 1.8, Django 2.2 on Python 2.7 and Python 3.5+ but it was not checked with any version in between but open for issues.
 If you just need WebAuthn and Passkeys, you can use **[django-passkeys](https://github.com/mkalioby/django-passkeys)**, which is a slim-down of this app and much easier to integrate.
 Depends on
 * pyotp
@@ -43,16 +36,12 @@ Depends on
 * ua-parser
 * user-agents
 * python-jose
-* fido2==1.0.0
+* fido2==0.9.0
 # Installation
 1. using pip 
-    * For Django >= 4.0
+
-       
+    `pip install django-mfa2`
        `pip install django-mfa2`
    * For Django < 4.0
      `pip install django-mfa2 jsonfield`
 2. Using Conda forge 
   `conda config --add channels conda-forge`
@@ -71,13 +60,12 @@ Depends on
   'mfa',
   '......')
   ```
-2. Collect Static Files
+1. Collect Static Files
 `python manage.py collectstatic`
-3. Add the following settings to your file
+1. Add the following settings to your file
-   ```python
+   ```python 
-   from django.conf.global_settings import PASSWORD_HASHERS as DEFAULT_PASSWORD_HASHERS #Preferably at the same place where you import your other modules
+   MFA_UNALLOWED_METHODS=()   # Methods that shouldn't be allowed for the user
   MFA_UNALLOWED_METHODS=()   # Methods that shouldn't be allowed for the user e.g ('TOTP','U2F',)
   MFA_LOGIN_CALLBACK=""      # A function that should be called by username to login the user in session
   MFA_RECHECK=True           # Allow random rechecking of the user
   MFA_REDIRECT_AFTER_REGISTRATION="mfa_home"   # Allows Changing the page after successful registeration
@@ -85,19 +73,15 @@ Depends on
   MFA_RECHECK_MIN=10         # Minimum interval in seconds
   MFA_RECHECK_MAX=30         # Maximum in seconds
   MFA_QUICKLOGIN=True        # Allow quick login for returning users by provide only their 2FA
   MFA_ALWAYS_GO_TO_LAST_METHOD = False # Always redirect the user to the last method used to save a click (Added in 2.6.0).
   MFA_RENAME_METHODS={} #Rename the methods in a more user-friendly way e.g {"RECOVERY":"Backup Codes"} (Added in 2.6.0)
   MFA_HIDE_DISABLE=('FIDO2',)     # Can the user disable his key (Added in 1.2.0).
   MFA_OWNED_BY_ENTERPRISE = FALSE  # Who owns security keys   
   PASSWORD_HASHERS = DEFAULT_PASSWORD_HASHERS # Comment if PASSWORD_HASHER already set in your settings.py
   PASSWORD_HASHERS += ['mfa.recovery.Hash'] 
   RECOVERY_ITERATION = 350000 #Number of iteration for recovery code, higher is more secure, but uses more resources for generation and check...
   TOKEN_ISSUER_NAME="PROJECT_NAME"      #TOTP Issuer name
   U2F_APPID="https://localhost"    #URL For U2F
-   FIDO_SERVER_ID=u"localehost"      # Server rp id for FIDO2, it is the full domain of your project
+   FIDO_SERVER_ID=u"localehost"      # Server rp id for FIDO2, it the full domain of your project
   FIDO_SERVER_NAME=u"PROJECT_NAME"
   FIDO_LOGIN_URL=BASE_URL
   ```
   **Method Names**
   * U2F
@@ -105,16 +89,13 @@ Depends on
   * TOTP
   * Trusted_Devices
   * Email
   * RECOVERY
   **Notes**:
    * Starting version 1.1, ~~FIDO_LOGIN_URL~~ isn't required for FIDO2 anymore.
    * Starting version 1.7.0, Key owners can be specified.
    * Starting version 2.2.0
        * Added: `MFA_SUCCESS_REGISTRATION_MSG` & `MFA_REDIRECT_AFTER_REGISTRATION`
-    Start version 2.6.0
+1. Break your login function
        * Added: `MFA_ALWAYS_GO_TO_LAST_METHOD`, `MFA_RENAME_METHODS`, `MFA_ENFORCE_RECOVERY_METHOD` & `RECOVERY_ITERATION`
 4. Break your login function
   Usually your login function will check for username and password, log the user in if the username and password are correct and create the user session, to support mfa, this has to change
@@ -134,7 +115,7 @@ Depends on
            return log_user_in(request,username=user.username) 
            #log_user_in is a function that handles creatung user session, it should be in the setting file as MFA_CALLBACK
     ```
-5. Add mfa to urls.py
+1. Add mfa to urls.py
   ```python 
   import mfa
   import mfa.TrustedDevice
@@ -145,15 +126,14 @@ Depends on
   '....',
    ]
    ```
-6. Provide `mfa_auth_base.html` in your templates with block called 'head' and 'content', The template will be included during the user login, the template shall be close to the login template.
+1. Provide `mfa_auth_base.html` in your templaes with block called 'head' and 'content'
    The template will be included during the user login.
    If you will use Email Token method, then you have to provide template named `mfa_email_token_template.html` that will content the format of the email with parameter named `user` and `otp`.
-7. To match the look and feel of your project, MFA includes `base.html` but it needs blocks named `head` & `content` to added its content to it.
+1. To match the look and feel of your project, MFA includes `base.html` but it needs blocks named `head` & `content` to added its content to it.
-   **Note:** Starting v2.3.0, a new template `mfa_base.html` is introduced, this template is used by `MFA.html` so you can control the styling better and current `mfa_base.html` extends `base.html`
+1. Somewhere in your app, add a link to 'mfa_home'
 8. Somewhere in your app, add a link to 'mfa_home'
 ```<li><a href="{% url 'mfa_home' %}">Security</a> </li>```
-
+For Example, See https://github.com/mkalioby/AutoDeploy/commit/5f1d94b1804e0aa33c79e9e8530ce849d9eb78cc in AutDeploy Project
 For Example, See 'example' app and look at EXAMPLE.md to see how to set it up.
 # Going Passwordless
@@ -202,11 +182,6 @@ function some_func() {
 * [swainn](https://github.com/swainn)
 * [unramk](https://github.com/unramk)
 * [willingham](https://github.com/willingham)
 * [AndreasDickow](https://github.com/AndreasDickow)
 * [mnelson4](https://github.com/mnelson4)
 * [ezrajrice](https://github.com/ezrajrice)
 * [Spitfireap](https://github.com/Spitfireap)
 * [peterthomassen](https://github.com/peterthomassen)
 # Security contact information
--- a/example/example-ssl-requirements.txt
+++ b/example/example-ssl-requirements.txt
@@ -1 +0,0 @@
 django-sslserver
--- a/example/example/auth.py
+++ b/example/example/auth.py
@@ -27,4 +27,8 @@ def create_session(request,username):
 def logoutView(request):
    logout(request)
-    return  render(request,"logout.html",{})
+    return  render(request,"logout.html",{})
 def register(request):
    if request.method == "GET":
        return
--- a/example/example/settings.py
+++ b/example/example/settings.py
@@ -11,7 +11,6 @@ https://docs.djangoproject.com/en/2.0/ref/settings/
 """
 import os
 from django.conf.global_settings import PASSWORD_HASHERS as DEFAULT_PASSWORD_HASHERS
 # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
@@ -26,7 +25,7 @@ SECRET_KEY = '#9)q!_i3@pr-^3oda(e^3$x!kq3b4f33#5l@+=+&vuz+p6gb3g'
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
-ALLOWED_HOSTS = ['*']
+ALLOWED_HOSTS = []
 # Application definition
@@ -143,14 +142,9 @@ MFA_QUICKLOGIN=True        # Allow quick login for returning users by provide on
 MFA_HIDE_DISABLE=('',)     # Can the user disable his key (Added in 1.2.0).
 MFA_REDIRECT_AFTER_REGISTRATION="registered"
 MFA_SUCCESS_REGISTRATION_MSG="Go to Home"
-MFA_ALWAYS_GO_TO_LAST_METHOD = True
+
 MFA_ENFORCE_RECOVERY_METHOD = True
 MFA_RENAME_METHODS = {"RECOVERY":"Backup Codes","FIDO2":"Biometric Authentication"}
 PASSWORD_HASHERS = DEFAULT_PASSWORD_HASHERS #Comment if PASSWORD_HASHER already set
 PASSWORD_HASHERS += ['mfa.recovery.Hash']
 RECOVERY_ITERATION = 1 #Number of iteration for recovery code, higher is more secure, but uses more resources for generation and check...
 TOKEN_ISSUER_NAME="PROJECT_NAME"      #TOTP Issuer name
-U2F_APPID="https://localhost:9000"    #URL For U2F
+U2F_APPID="https://localhost"    #URL For U2F
-FIDO_SERVER_ID="localhost"      # Server rp id for FIDO2, it the full domain of your project
+FIDO_SERVER_ID=u"localhost"      # Server rp id for FIDO2, it the full domain of your project
-FIDO_SERVER_NAME="TestApp"
+FIDO_SERVER_NAME=u"PROJECT_NAME"
--- a/example/example/templates/base.html
+++ b/example/example/templates/base.html
@@ -10,7 +10,7 @@
  <meta name="description" content="">
  <meta name="author" content="">
-  <title>Django-mfa2 Example</title>
+  <title>SB Admin - Blank Page</title>
  <!-- Custom fonts for this template-->
  <link href="{% static 'vendor/fontawesome-free/css/all.min.css'%}" rel="stylesheet" type="text/css">
@@ -36,7 +36,7 @@
    <!-- Navbar Search -->
    <form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
-      <div class="input-group mb-3">
+      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
        <div class="input-group-append">
          <button class="btn btn-primary" type="button">
--- a/example/example/templates/blank.html
+++ b/example/example/templates/blank.html
@@ -34,7 +34,7 @@
    <!-- Navbar Search -->
    <form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
-      <div class="input-group mb-3">
+      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
        <div class="input-group-append">
          <button class="btn btn-primary" type="button">
--- a/example/example/templates/login.html
+++ b/example/example/templates/login.html
@@ -17,7 +17,6 @@
  <!-- Custom styles for this template-->
  <link href="{% static 'css/sb-admin.css'%}" rel="stylesheet">
 </head>
 <body class="bg-dark">
@@ -29,7 +28,6 @@
          {% if invalid %}
              <div class="alert alert-danger">Invalid Username or password</div>
          {% endif %}
        <form action="{% url 'login' %}" method="post">
            {% csrf_token %}
          <div class="form-group">
            <div class="form-label-group">
@@ -37,14 +35,9 @@
              <label for="inputUsername">Username</label>
            </div>
          </div>
          <div class="form-group">
            <div class="form-label-group">
              <input type="password" id="inputPassword"  name="password" class="form-control" placeholder="Password" required="required">
              <label for="inputPassword">Password</label>
            </div>
          </div>
-          <button class="btn btn-primary btn-block" type="submit">Login</button>
+
          <button class="btn btn-primary btn-block" type="button" onclick="authen()">Login</button>
        </form>
      </div>
    </div>
@@ -56,7 +49,7 @@
  <!-- Core plugin JavaScript-->
  <script src="{% static 'vendor/jquery-easing/jquery.easing.min.js'%}"></script>
-
+{% include 'FIDO2/login.html' %}
 </body>
 </html>
--- a/example/example/templates/mfa_auth_base.html
+++ b/example/example/templates/mfa_auth_base.html
@@ -28,7 +28,6 @@
      <div class="card-header">Login</div>
      <div class="card-body">
    {% block content %}
  {% endblock %}
  </div>
   </div>
--- a/example/example/urls.py
+++ b/example/example/urls.py
@@ -16,13 +16,12 @@ Including another URLconf
 from django.contrib import admin
 from django.urls import path,re_path,include
 from . import views,auth
 from mfa import TrustedDevice
 urlpatterns = [
    path('admin/', admin.site.urls),
    path('mfa/', include('mfa.urls')),
    path('auth/login',auth.loginView,name="login"),
    path('auth/logout',auth.logoutView,name="logout"),
-    path('devices/add/', TrustedDevice.add,name="add_trusted_device"),
+
    re_path('^$',views.home,name='home'),
    path('registered/',views.registered,name='registered')
 ]
--- a/example/requiremnts.txt
+++ b/example/requiremnts.txt
@@ -0,0 +1,2 @@
 django >= 2.2
 django_ssl
--- a/PassKeys-black.png
+++ b/PassKeys-black.png
--- a/mfa/Email.py
+++ b/mfa/Email.py
@@ -34,16 +34,10 @@ def start(request):
                from django.core.urlresolvers import reverse
            except:
                from django.urls import reverse
-            if getattr(settings, 'MFA_ENFORCE_RECOVERY_METHOD', False) and not User_Keys.objects.filter(
+            return HttpResponseRedirect(reverse(getattr(settings,'MFA_REDIRECT_AFTER_REGISTRATION','mfa_home')))
                    key_type="RECOVERY", username=request.user.username).exists():
                request.session["mfa_reg"] = {"method": "Email",
                                              "name": getattr(settings, "MFA_RENAME_METHODS", {}).get("Email", "Email")}
            else:
                return HttpResponseRedirect(reverse(getattr(settings,'MFA_REDIRECT_AFTER_REGISTRATION','mfa_home')))
        context["invalid"] = True
    else:
        request.session["email_secret"] = str(randint(0,100000))  #generate a random integer
        if sendEmail(request, request.user.username, request.session["email_secret"]):
            context["sent"] = True
    return render(request,"Email/Add.html", context)
--- a/mfa/FIDO2.py
+++ b/mfa/FIDO2.py
@@ -1,6 +1,6 @@
-from fido2.client import Fido2Client
+from fido2.client import ClientData
 from fido2.server import Fido2Server, PublicKeyCredentialRpEntity
-from fido2.webauthn import AttestationObject, AuthenticatorData, CollectedClientData
+from fido2.ctap2 import AttestationObject, AuthenticatorData
 from django.template.context_processors import csrf
 from django.views.decorators.csrf import csrf_exempt
 from django.shortcuts import render
@@ -11,12 +11,12 @@ from django.http import HttpResponse
 from django.conf import settings
 from .models import *
 from fido2.utils import websafe_decode, websafe_encode
-from fido2.webauthn import AttestedCredentialData
+from fido2.ctap2 import AttestedCredentialData
 from .views import login, reset_cookie
 import datetime
 from .Common import get_redirect_url
 from django.utils import timezone
-from django.http import JsonResponse
+
 def recheck(request):
    """Starts FIDO2 recheck"""
@@ -28,7 +28,7 @@ def recheck(request):
 def getServer():
    """Get Server Info from settings and returns a Fido2Server"""
-    rp = PublicKeyCredentialRpEntity(id=settings.FIDO_SERVER_ID, name=settings.FIDO_SERVER_NAME)
+    rp = PublicKeyCredentialRpEntity(settings.FIDO_SERVER_ID, settings.FIDO_SERVER_NAME)
    return Fido2Server(rp)
@@ -49,15 +49,13 @@ def begin_registeration(request):
 def complete_reg(request):
    """Completes the registeration, called by API"""
    try:
        if not "fido_state" in request.session:
            return JsonResponse({'status': 'ERR', "message": "FIDO Status can't be found, please try again"})
        data = cbor.decode(request.body)
-        client_data = CollectedClientData(data['clientDataJSON'])
+        client_data = ClientData(data['clientDataJSON'])
        att_obj = AttestationObject((data['attestationObject']))
        server = getServer()
        auth_data = server.register_complete(
-            request.session.pop('fido_state'),
+            request.session['fido_state'],
            client_data,
            att_obj
        )
@@ -68,28 +66,21 @@ def complete_reg(request):
        uk.owned_by_enterprise = getattr(settings, "MFA_OWNED_BY_ENTERPRISE", False)
        uk.key_type = "FIDO2"
        uk.save()
-        if getattr(settings, 'MFA_ENFORCE_RECOVERY_METHOD', False) and not User_Keys.objects.filter(key_type = "RECOVERY", username=request.user.username).exists():
+        return HttpResponse(simplejson.dumps({'status': 'OK'}))
            request.session["mfa_reg"] = {"method":"FIDO2","name": getattr(settings, "MFA_RENAME_METHODS", {}).get("FIDO2", "FIDO2")}
            return HttpResponse(simplejson.dumps({'status': 'RECOVERY'}))
        else:
            return HttpResponse(simplejson.dumps({'status': 'OK'}))
    except Exception as exp:
        import traceback
        print(traceback.format_exc())
        try:
            from raven.contrib.django.raven_compat.models import client
            client.captureException()
        except:
            pass
-        return JsonResponse({'status': 'ERR', "message": "Error on server, please try again later"})
+        return HttpResponse(simplejson.dumps({'status': 'ERR', "message": "Error on server, please try again later"}))
 def start(request):
-    """Start Registration a new FIDO Token"""
+    """Start Registeration a new FIDO Token"""
    context = csrf(request)
    context.update(get_redirect_url())
-    context["method"] = {"name":getattr(settings,"MFA_RENAME_METHODS",{}).get("FIDO2","FIDO2 Security Key")}
+    context["mfa_invoke"] = True
    context["RECOVERY_METHOD"]=getattr(settings,"MFA_RENAME_METHODS",{}).get("RECOVERY","Recovery codes")
    return render(request, "FIDO2/Add.html", context)
@@ -107,8 +98,8 @@ def auth(request):
 def authenticate_begin(request):
    server = getServer()
-    credentials = getUserCredentials(request.session.get("base_username", request.user.username))
+    #credentials = getUserCredentials(request.session.get("base_username", request.user.username))
-    auth_data, state = server.authenticate_begin(credentials)
+    auth_data, state = server.authenticate_begin()
    request.session['fido_state'] = state
    return HttpResponse(cbor.encode(auth_data), content_type = "application/octet-stream")
@@ -117,12 +108,12 @@ def authenticate_begin(request):
 def authenticate_complete(request):
    try:
        credentials = []
-        username = request.session.get("base_username", request.user.username)
+        username = request.session.get("base_username", request.POST.get("username",request.user.username))
        server = getServer()
        credentials = getUserCredentials(username)
        data = cbor.decode(request.body)
        credential_id = data['credentialId']
-        client_data = CollectedClientData(data['clientDataJSON'])
+        client_data = ClientData(data['clientDataJSON'])
        auth_data = AuthenticatorData(data['authenticatorData'])
        signature = data['signature']
        try:
@@ -145,7 +136,7 @@ def authenticate_complete(request):
            except:
                pass
            return HttpResponse(simplejson.dumps({'status': "ERR",
-                                                  "message": str(excep)}),
+                                                  "message": excep.message}),
                                content_type = "application/json")
        if request.session.get("mfa_recheck", False):
--- a/mfa/TrustedDevice.py
+++ b/mfa/TrustedDevice.py
@@ -7,11 +7,10 @@ from django.template.context_processors import csrf
 from .models import *
 import user_agents
 from django.utils import timezone
 from django.urls import reverse
 def id_generator(size=6, chars=string.ascii_uppercase + string.digits):
    x=''.join(random.choice(chars) for _ in range(size))
-    if not User_Keys.objects.filter(properties__icontains='"key": "%s"'%x).exists(): return x
+    if not User_Keys.objects.filter(properties__shas="$.key="+x).exists(): return x
    else: return id_generator(size,chars)
 def getUserAgent(request):
@@ -58,13 +57,12 @@ def getCookie(request):
 def add(request):
    context=csrf(request)
    if request.method=="GET":
        context.update({"username":request.GET.get('u',''),"key":request.GET.get('k','')})
        return render(request,"TrustedDevices/Add.html",context)
    else:
        key=request.POST["key"].replace("-","").replace(" ","").upper()
        context["username"] = request.POST["username"]
        context["key"] = request.POST["key"]
-        trusted_keys=User_Keys.objects.filter(username=request.POST["username"],properties__icontains='"key": "%s"'%key)
+        trusted_keys=User_Keys.objects.filter(username=request.POST["username"],properties__has="$.key="+key)
        cookie=False
        if trusted_keys.exists():
            tk=trusted_keys[0]
@@ -99,7 +97,7 @@ def start(request):
        request.session["td_id"]=td.id
    try:
        if td==None: td=User_Keys.objects.get(id=request.session["td_id"])
-        context={"key":td.properties["key"],"url":request.scheme+"://"+request.get_host() + reverse('add_trusted_device')}
+        context={"key":td.properties["key"]}
    except:
        del request.session["td_id"]
        return start(request)
@@ -126,14 +124,12 @@ def verify(request):
        json= jwt.decode(request.COOKIES.get('deviceid'),settings.SECRET_KEY)
        if json["username"].lower()== request.session['base_username'].lower():
            try:
-                uk = User_Keys.objects.get(username=request.POST["username"].lower(), properties__icontains='"key": "%s"'%json["key"])
+                uk = User_Keys.objects.get(username=request.POST["username"].lower(), properties__has="$.key=" + json["key"])
                if uk.enabled and uk.properties["status"] == "trusted":
                    uk.last_used=timezone.now()
                    uk.save()
                    request.session["mfa"] = {"verified": True, "method": "Trusted Device","id":uk.id}
                    return True
            except:
                import traceback
                print(traceback.format_exc())
                return False
    return False
--- a/mfa/U2F.py
+++ b/mfa/U2F.py
@@ -12,7 +12,6 @@ from django.conf import settings
 from django.http import HttpResponse
 from .models import *
 from .views import login
 from .Common import get_redirect_url
 import datetime
 from django.utils import timezone
@@ -52,29 +51,25 @@ def validate(request,username):
    challenge = request.session.pop('_u2f_challenge_')
    device, c, t = complete_authentication(challenge, data, [settings.U2F_APPID])
    try:
        key=User_Keys.objects.get(username=username,properties__icontains='"publicKey": "%s"'%device["publicKey"])
        key.last_used=timezone.now()
        key.save()
        mfa = {"verified": True, "method": "U2F","id":key.id}
        if getattr(settings, "MFA_RECHECK", False):
            mfa["next_check"] = datetime.datetime.timestamp((datetime.datetime.now()
                                     + datetime.timedelta(
                        seconds=random.randint(settings.MFA_RECHECK_MIN, settings.MFA_RECHECK_MAX))))
        request.session["mfa"] = mfa
        return True
    except:
        return False
    key=User_Keys.objects.get(username=username,properties__shas="$.device.publicKey=%s"%device["publicKey"])
    key.last_used=timezone.now()
    key.save()
    mfa = {"verified": True, "method": "U2F","id":key.id}
    if getattr(settings, "MFA_RECHECK", False):
        mfa["next_check"] = datetime.datetime.timestamp((datetime.datetime.now()
                                 + datetime.timedelta(
                    seconds=random.randint(settings.MFA_RECHECK_MIN, settings.MFA_RECHECK_MAX))))
    request.session["mfa"] = mfa
    return True
 def auth(request):
    context=csrf(request)
    s=sign(request.session["base_username"])
    request.session["_u2f_challenge_"]=s[0]
    context["token"]=s[1]
-    context["method"] = {"name": getattr(settings, "MFA_RENAME_METHODS", {}).get("U2F", "Classical Security Key")}
+
-    return render(request,"U2F/Auth.html",context)
+    return render(request,"U2F/Auth.html")
 def start(request):
    enroll = begin_registration(settings.U2F_APPID, [])
@@ -82,8 +77,6 @@ def start(request):
    context=csrf(request)
    context["token"]=simplejson.dumps(enroll.data_for_client)
    context.update(get_redirect_url())
    context["method"] = {"name": getattr(settings, "MFA_RENAME_METHODS", {}).get("U2F", "Classical Security Key")}
    context["RECOVERY_METHOD"] = getattr(settings, "MFA_RENAME_METHODS", {}).get("RECOVERY", "Recovery codes")
    return render(request,"U2F/Add.html",context)
@@ -104,11 +97,6 @@ def bind(request):
    uk.properties = {"device":simplejson.loads(device.json),"cert":cert_hash}
    uk.key_type = "U2F"
    uk.save()
    if getattr(settings, 'MFA_ENFORCE_RECOVERY_METHOD', False) and not User_Keys.objects.filter(key_type="RECOVERY",
                                                                                                username=request.user.username).exists():
        request.session["mfa_reg"] = {"method": "U2F",
                                      "name": getattr(settings, "MFA_RENAME_METHODS", {}).get("U2F", "Classical Security Key")}
        return HttpResponse('RECOVERY')
    return HttpResponse("OK")
 def sign(username):
--- a/mfa/init.py
+++ b/mfa/init.py
@@ -1 +1 @@
-__version__="2.2.0"
+__version__="2.2.0b1"
--- a/mfa/helpers.py
+++ b/mfa/helpers.py
@@ -4,14 +4,8 @@ from . import TrustedDevice, U2F, FIDO2, totp
 import simplejson
 from django.shortcuts import HttpResponse
 from mfa.views import verify,goto
 from mfa.recovery import delTokens
 def has_mfa(request,username):
-    uk = User_Keys.objects.filter(username=username,enabled=1)
+    if User_Keys.objects.filter(username=username,enabled=1).count()>0:
    if uk.count()==1: 
        for u in uk:
            if u.key_type == "RECOVERY":
                delTokens(request)
    elif uk.count()>0:
        return verify(request, username)
    return False
--- a/mfa/migrations/0005_auto_20181115_2014.py
+++ b/mfa/migrations/0005_auto_20181115_2014.py
@@ -2,14 +2,7 @@
 from __future__ import unicode_literals
 from django.db import models, migrations
-try:
+import jsonfield.fields
    from django.db.models import JSONField
 except ImportError:
    try:
        from jsonfield.fields import JSONField
    except ImportError:
        raise ImportError("Can't find a JSONField implementation, please install jsonfield if django < 4.0")
 def modify_json(apps, schema_editor):
@@ -31,7 +24,7 @@ class Migration(migrations.Migration):
        migrations.AddField(
            model_name='user_keys',
            name='properties',
-            field=JSONField(null=True),
+            field=jsonfield.fields.JSONField(null=True),
        ),
        migrations.RunPython(modify_json)
    ]
--- a/mfa/migrations/0011_auto_20210530_0622.py
+++ b/mfa/migrations/0011_auto_20210530_0622.py
@@ -1,18 +0,0 @@
 # Generated by Django 2.2 on 2021-05-30 06:22
 from django.db import migrations, models
 class Migration(migrations.Migration):
    dependencies = [
        ('mfa', '0010_auto_20201110_0557'),
    ]
    operations = [
        migrations.AlterField(
            model_name='user_keys',
            name='owned_by_enterprise',
            field=models.BooleanField(blank=True, default=None, null=True),
        ),
    ]
--- a/mfa/models.py
+++ b/mfa/models.py
@@ -1,12 +1,5 @@
 from django.db import models
-try:
+from jsonfield import JSONField
    from django.db.models import JSONField
 except ModuleNotFoundError:
    try:
        from jsonfield import JSONField
    except ModuleNotFoundError:
        raise ModuleNotFoundError("Can't find a JSONField implementation, please install jsonfield if django < 4.0")
 from jose import jwt
 from django.conf import settings
 #from jsonLookup import shasLookup, hasLookup
@@ -22,7 +15,7 @@ class User_Keys(models.Model):
    enabled=models.BooleanField(default=True)
    expires=models.DateTimeField(null=True,default=None,blank=True)
    last_used=models.DateTimeField(null=True,default=None,blank=True)
-    owned_by_enterprise=models.BooleanField(default=None,null=True,blank=True)
+    owned_by_enterprise=models.NullBooleanField(default=None,null=True,blank=True)
    def save(self, force_insert=False, force_update=False, using=None, update_fields=None):
        if self.key_type == "Trusted Device" and self.properties.get("signature","") == "":
--- a/mfa/recovery.py
+++ b/mfa/recovery.py
@@ -1,122 +0,0 @@
 from django.shortcuts import render
 from django.views.decorators.cache import never_cache
 from django.template.context_processors import csrf
 from django.contrib.auth.hashers import make_password, PBKDF2PasswordHasher
 from django.http import HttpResponse
 from .Common import get_redirect_url
 from .models import *
 import simplejson
 import random
 import string
 import datetime
 from django.utils import timezone
 USER_FRIENDLY_NAME = "Recovery Codes"
 class Hash(PBKDF2PasswordHasher):
    algorithm = 'pbkdf2_sha256_custom'
    iterations = getattr(settings,"RECOVERY_ITERATION",1)
 def delTokens(request):
    #Only when all MFA have been deactivated, or to generate new !
    #We iterate only to clean if any error happend and multiple entry of RECOVERY created for one user
    for key in User_Keys.objects.filter(username=request.user.username, key_type = "RECOVERY"):
        if key.username == request.user.username:
            key.delete()
 def randomGen(n):
    return ''.join(random.choice(string.ascii_uppercase + string.ascii_lowercase + string.digits) for _ in range(n))
@never_cache
 def genTokens(request):
    #Delete old ones
    delTokens(request)
    #Then generate new one
    salt = randomGen(15)
    hashedKeys = []
    clearKeys = []
    for i in range(5):
            token = randomGen(5) + "-" + randomGen(5)
            hashedToken = make_password(token, salt, 'pbkdf2_sha256_custom')
            hashedKeys.append(hashedToken)
            clearKeys.append(token)
    uk=User_Keys()
    uk.username = request.user.username
    uk.properties={"secret_keys":hashedKeys, "salt":salt}
    uk.key_type="RECOVERY"
    uk.enabled = True
    uk.save()
    return HttpResponse(simplejson.dumps({"keys":clearKeys}))
 def verify_login(request, username, token):
    for key in User_Keys.objects.filter(username=username, key_type = "RECOVERY"):
        secret_keys = key.properties["secret_keys"]
        salt = key.properties["salt"]
        hashedToken = make_password(token, salt, "pbkdf2_sha256_custom")
        for i,token in enumerate(secret_keys):
            if hashedToken == token:
                secret_keys.pop(i)
                key.properties["secret_keys"] = secret_keys
                key.last_used= timezone.now()
                key.save()
                return [True, key.id, len(secret_keys) == 0]
    return [False]
 def getTokenLeft(request):
    uk = User_Keys.objects.filter(username=request.user.username, key_type = "RECOVERY")
    keyLeft=0
    for key in uk:
        keyLeft += len(key.properties["secret_keys"])
    return HttpResponse(simplejson.dumps({"left":keyLeft}))
 def recheck(request):
    context = csrf(request)
    context["mode"]="recheck"
    if request.method == "POST":
        if verify_login(request,request.user.username, token=request.POST["recovery"])[0]:
            import time
            request.session["mfa"]["rechecked_at"] = time.time()
            return HttpResponse(simplejson.dumps({"recheck": True}), content_type="application/json")
        else:
            return HttpResponse(simplejson.dumps({"recheck": False}), content_type="application/json")
    return render(request,"RECOVERY/recheck.html", context)
@never_cache
 def auth(request):
    from .views import login
    context=csrf(request)
    if request.method=="POST":
        tokenLength = len(request.POST["recovery"])
        if tokenLength == 11 and "RECOVERY" not in settings.MFA_UNALLOWED_METHODS:
            #Backup code check
            resBackup=verify_login(request, request.session["base_username"], token=request.POST["recovery"])
            if resBackup[0]:
                mfa = {"verified": True, "method": "RECOVERY","id":resBackup[1], "lastBackup":resBackup[2]}
                # if getattr(settings, "MFA_RECHECK", False):
                #     mfa["next_check"] = datetime.datetime.timestamp((datetime.datetime.now()
                #                             + datetime.timedelta(
                #                 seconds=random.randint(settings.MFA_RECHECK_MIN, settings.MFA_RECHECK_MAX))))
                request.session["mfa"] = mfa
                if resBackup[2]:
                    #If the last bakup code has just been used, we return a response insead of redirecting to login
                    context["lastBackup"] = True
                    return render(request,"RECOVERY/Auth.html", context)                
                return login(request)
        context["invalid"]=True
    elif request.method=="GET":
        mfa = request.session.get("mfa")
        if mfa and mfa["verified"] and mfa["lastBackup"]:
            return login(request)
    return render(request,"RECOVERY/Auth.html", context)
@never_cache
 def start(request):
    """Start Managing recovery tokens"""
    context = get_redirect_url()
    if "mfa_reg" in request.session:
        context["mfa_redirect"] = request.session["mfa_reg"]["name"]
    return render(request,"RECOVERY/Add.html",context)
--- a/mfa/static/mfa/js/bootstrap-toggle.min.js.map
+++ b/mfa/static/mfa/js/bootstrap-toggle.min.js.map
@@ -1 +0,0 @@
 {"version":3,"file":"bootstrap-toggle.min.js","sources":["bootstrap-toggle.js"],"names":["$","Plugin","option","this","each","$this","data","options","Toggle","element","$element","extend","defaults","render","VERSION","DEFAULTS","on","off","onstyle","offstyle","size","style","width","height","prototype","attr","_onstyle","_offstyle","$toggleOn","html","addClass","$toggleOff","$toggleHandle","$toggleGroup","append","$toggle","prop","wrap","parent","Math","max","outerWidth","outerHeight","css","update","trigger","toggle","silent","removeClass","enable","removeAttr","disable","change","proxy","destroy","remove","removeData","unwrap","old","fn","bootstrapToggle","Constructor","noConflict","document","e","$checkbox","find","preventDefault","jQuery"],"mappings":"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"}
--- a/mfa/static/mfa/js/qrious.min.js.map
+++ b/mfa/static/mfa/js/qrious.min.js.map
--- a/mfa/templates/Email/Add.html
+++ b/mfa/templates/Email/Add.html
@@ -4,12 +4,12 @@
 {% block content %}
 <br/>
 <br/>
-<div class="container d-flex justify-content-center">
+<div class="container">
-  <div class="panel panel-default card">
+  <div class="panel panel-default">
-    <div class="panel-heading card-header">
+    <div class="panel-heading">
      <strong> Activate Token by email</strong>
    </div>
-    <div class="panel-body card-body">
+    <div class="panel-body">
      <FORM METHOD="POST" ACTION="{% url 'start_email' %}" Id="formLogin"  onSubmit="" name="FrontPage_Form1">
        {% csrf_token %}
        {%  if invalid %}
@@ -31,14 +31,14 @@
          <div class="row">
            <div class="col-sm-12 col-md-12">
              <div class="form-group">
-                <div class="input-group mb-3">
+                <div class="input-group">
-                  <span class="input-group-addon input-group-text">
+                  <span class="input-group-addon">
-                  <i class="glyphicon glyphicon-lock bi bi-lock"></i>
+                  <i class="glyphicon glyphicon-lock"></i>
                  </span>
                  <input class="form-control" size="6" MaxLength="6" value="" placeholder="e.g 55552" name="otp" type="text" id="otp" autofocus>
                </div>
              </div>
-              <div class="form-group d-grid gap-2">
+              <div class="form-group">
                <input type="submit" class="btn btn-lg btn-success btn-block" value="Verify">
              </div>
            </div>
@@ -48,4 +48,4 @@
    </div>
  </div>
 </div>
-{% endblock %}
+{% endblock %}
--- a/mfa/templates/Email/recheck.html
+++ b/mfa/templates/Email/recheck.html
@@ -13,15 +13,14 @@
    }
 </script>
 <div class='container'>
 <div class="row">
 <div class="col-sm-10 col-sm-offset-1 col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-<div class="panel panel-default card">
+<div class="panel panel-default">
-      <div class="panel-heading card-header">
+      <div class="panel-heading">
 	      <strong> Email One Time Password </strong>
      </div>
-      <div class="panel-body card-body">
+      <div class="panel-body">
      <FORM METHOD="POST" ACTION="{% url 'email_auth' %}" Id="formLogin" onSubmit="" name="FrontPage_Form1">
@@ -47,16 +46,16 @@
      <div class="row">
 	  <div class="col-sm-12 col-md-12">
 	    <div class="form-group">
-	      <div class="input-group mb-3">
+	      <div class="input-group">
-		<span class="input-group-addon input-group-text">
+		<span class="input-group-addon">
-		<i class="glyphicon glyphicon-lock bi bi-lock"></i>
+		<i class="glyphicon glyphicon-lock"></i>
 		</span>
 		<input class="form-control" size="6" MaxLength="6" value="" placeholder="e.g 55552" name="otp" type="text" id="otp" autofocus>
 	      </div>
 	    </div>
-          <div class="form-group d-grid gap-2">
+          <div class="form-group">
 	      <input type="{% if mode == "auth" %}submit{% elif mode == 'recheck'  %}button{% endif %}" {% if mode == "recheck" %}onclick="send_totp()" {% endif %} class="btn btn-lg btn-success btn-block" value="Sign in">
 	      </div>
@@ -65,7 +64,7 @@
      </FORM>
      </div>
        <div class="row">
-        <div class="col-md-12 mb-3" style="padding-left: 25px">
+        <div class="col-md-6" style="padding-left: 25px">
            {% if request.session.mfa_methods|length > 1 %}
                <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>
            {% endif %}
@@ -75,4 +74,3 @@
              </div>
 	      </div>
 	      </div>
 </div>
--- a/mfa/templates/FIDO2/Add.html
+++ b/mfa/templates/FIDO2/Add.html
@@ -32,23 +32,18 @@
    }).then(function (res)
        {
      if (res["status"] =='OK')
-        $("#res").html("<div class='alert alert-success'>Registered Successfully, <a href='{{redirect_html}}'> {{reg_success_msg}}</a></div>")
+            $("#res").html("<div class='alert alert-success'>Registered Successfully, <a href='{{redirect_html}}'> {{reg_success_msg}}</a></div>")
-      else if (res['status'] = "RECOVERY")
+        else
-      {
+            $("#res").html("<div class='alert alert-danger'>Registeration Failed as " + res["message"] + ", <a href='javascript:void(0)' onclick='begin_reg()'> try again or <a href='{% url 'mfa_home' %}'> Go to Security Home</a></div>")
          setTimeout(function (){location.href="{% url 'manage_recovery_codes' %}"},2500)
        $("#res").html("<div class='alert alert-success'>Registered Successfully, but <a href='{% url 'manage_recovery_codes' %}'>redirecting to {{ RECOVERY_METHOD }} method</a></div>")
      }
      else
        $("#res").html("<div class='alert alert-danger'>Registration Failed as " + res["message"] + ", <a href='javascript:void(0)' onclick='begin_reg()'> try again or <a href='{% url 'mfa_home' %}'> Go to Security Home</a></div>")
    }, function(reason) {
-       $("#res").html("<div class='alert alert-danger'>Registration Failed as " +reason +", <a href='javascript:void(0)' onclick='begin_reg()'> try again </a> or <a href='{% url 'mfa_home' %}'> Go to Security Home</a></div>")
+       $("#res").html("<div class='alert alert-danger'>Registeration Failed as " +reason +", <a href='javascript:void(0)' onclick='begin_reg()'> try again </a> or <a href='{% url 'mfa_home' %}'> Go to Security Home</a></div>")
    })
    }
    $(document).ready(function (){
        ua=new UAParser().getResult()
-        if (ua.browser.name == "Safari" || ua.browser.name == "Mobile Safari" )
+        if (ua.browser.name == "Safari")
        {
                $("#res").html("<button class='btn btn-success' onclick='begin_reg()'>Start...</button>")
        }
@@ -61,24 +56,21 @@
 {% endblock %}
 {% block content %}
-    <div class="col-lg-8 col-md-8 col-12 mx-auto">
+      <br/>
-    <div class="page-header min-height-300 border-radius-xl mt-4" style="background-repeat: no-repeat; background-position: cover; background-size:contain; background-image: url('{% static 'img/keys.jpg'%}');">
+    <br/>
-      <span class="mask  bg-gradient-primary  opacity-6"></span>
+     <div class="container">
     <div class="panel panel-default">
      <div class="panel-heading">
 	      <strong> FIDO2 Security Key</strong>
      </div>
      <div class="panel-body">
    <div class="row alert alert-pr" id="res" align="center">
    <p style="color: green">Your browser should ask you to confirm you identity.</p>
    </div>
    <div class="card mx-3 mx-md-4 mt-n6 h-100 z-index-0 fadeIn3 fadeInBottom "  >
        <div class="card-header pb-0 p-3">
            <h6 class="mb-0"><strong> Adding a New {{ method.name }}</strong></h6>
          </div>
        <div class="card-body">
            <div class="row alert alert-pr" id="res" align="center">
                <p style="color: green">Your browser should ask you to confirm you identity.</p>
            </div>
        </div>
-</div>
+    </div>
    {% include "modal.html" %}
-{% endblock %}
+{% endblock %}
--- a/mfa/templates/FIDO2/fido2_auth.html
+++ b/mfa/templates/FIDO2/fido2_auth.html
@@ -0,0 +1,71 @@
 {%  load static %}
 <script type="application/javascript" src="{% static 'mfa/js/cbor.js' %}"></script>
 <script type="application/javascript" src="{% static 'mfa/js/ua-parser.min.js' %}"></script>
 <script type="text/javascript">
        function authen()
        {
                         fetch('{% url 'fido2_begin_auth' %}', {
      method: 'GET',
    }).then(function(response) {
      if(response.ok) return response.arrayBuffer();
      throw new Error('No credential available to authenticate!');
    }).then(CBOR.decode).then(function(options) {
        console.log(options)
      return navigator.credentials.get(options);
    }).then(function(assertion) {
        res=CBOR.encode({
          "credentialId": new Uint8Array(assertion.rawId),
          "authenticatorData": new Uint8Array(assertion.response.authenticatorData),
          "clientDataJSON": new Uint8Array(assertion.response.clientDataJSON),
          "signature": new Uint8Array(assertion.response.signature)
        });
      return fetch('{% url 'fido2_complete_auth' %}', {
        method: 'POST',
        headers: {'Content-Type': 'application/cbor'},
        body:res,
      }).then(function (response) {if (response.ok) return res = response.json()}).then(function (res) {
          if (res.status=="OK")
          {
              $("#msgdiv").addClass("alert alert-success").removeClass("alert-danger")
             $("#msgdiv").html("Verified....please wait")
          {%  if mode == "auth" %}
          window.location.href=res.redirect;
          {% elif mode == "recheck" %}
              mfa_success_function();
          {% endif %}
          }
          else {
              $("#msgdiv").addClass("alert alert-danger").removeClass("alert-success")
                $("#msgdiv").html("Verification Failed as " + res.message + ", <a href='javascript:void(0)' onclick='authen())'> try again</a> or <a href='javascript:void(0)' onclick='history.back()'> Go Back</a>")
              {%  if mode == "auth" %}
              {% elif mode == "recheck" %}
                mfa_failed_function();
              {% endif %}
          }
      })
                 })
        }
    $(document).ready(function () {
        if (location.protocol != 'https:') {
            $("#main_paragraph").addClass("alert alert-danger")
            $("#main_paragraph").html("FIDO2 must work under secure context")
        } else {
            {% if mfa_invoke %}
            ua=new UAParser().getResult()
            if (ua.browser.name == "Safari")
                $("#res").html("<button class='btn btn-success' onclick='authen()'>Authenticate...</button>")
            else
                authen()
            {% endif %}
        }
    });
 </script>
--- a/mfa/templates/FIDO2/login.html
+++ b/mfa/templates/FIDO2/login.html
@@ -0,0 +1 @@
 {% include 'FIDO2/fido2_auth.html' %}
--- a/mfa/templates/FIDO2/recheck.html
+++ b/mfa/templates/FIDO2/recheck.html
@@ -1,111 +1,48 @@
 {%  load static %}
 <script type="application/javascript" src="{% static 'mfa/js/cbor.js' %}"></script>
 <script type="application/javascript" src="{% static 'mfa/js/ua-parser.min.js' %}"></script>
    <div class="col-lg-8 col-md-8 col-12 mx-auto">
    <div class="page-header min-height-300 border-radius-xl mt-4" style="background-repeat: no-repeat; background-position: cover; background-size:contain; background-image: url('{% static 'img/keys.jpg'%}');">
      <span class="mask  bg-gradient-primary  opacity-6"></span>
    </div>
    <div class="card mx-3 mx-md-4 mt-n6 h-100 z-index-0 fadeIn3 fadeInBottom "  >
        <div class="card-header pb-0 p-3">
            <h6 class="mb-0"><strong> Security Key</strong></h6>
          </div>
        <div class="card-body">
-            <div class="row">
+<div class="row">
-                <div style="padding-left: 15px" class="col-md-10 col-md-offset-1" id="main_paragraph" align="center">
+
-                    {% if mode == "auth" %}
+<div class="col-sm-10 col-sm-offset-1 col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-                       Welcome back {% comment %}<img src="{% url 'getUserImage' request.session.base_username  %}" title="{{ request.session.base_username }}" style="padding: 3px;height: 50px" class="img-circle"/>{% endcomment %} {{ request.session.base_username }}<br/>
+<div class="panel panel-default">
-                        <a href="{% url 'mfa_reset_cookie' %}">Not me</a>
+      <div class="panel-heading">
-                        <br/>
+	      <strong> Security Key</strong>
-                    {% endif %}
+      </div>
-                    <div id="res">
+      <div class="panel-body">
-                        <p style="color: green">please press the button on your security key to prove it is you.</p>
+
                    </div>
                    <div id="msgdiv"></div>
                    {% if mode == "auth" %}
                        <form id="u2f_login" action="{% url 'fido2_complete_auth' %}" method="post" enctype="multipart/form-data">
                    {% elif mode == "recheck" %}
                        <form id="u2f_login" action="{% url 'fido2_recheck' %}" method="post" enctype="multipart/form-data">
                    {% endif %}
                            {% csrf_token %}
                            <input type="hidden" name="response" id="response" value=""/>
                        </form>
                </div>
            </div>
              <div class="row">
-                {% if request.session.mfa_methods|length > 1 %}
+            <div style="padding-left: 15px" class="col-md-10 col-md-offset-1" id="main_paragraph" align="center">
-                   <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>
+                {% if mode == "auth" %}
                   Welcome back {% comment %}<img src="{% url 'getUserImage' request.session.base_username  %}" title="{{ request.session.base_username }}" style="padding: 3px;height: 50px" class="img-circle"/>{% endcomment %} {{ request.session.base_username }}<br/>
                    <a href="{% url 'mfa_reset_cookie' %}">Not me</a>
                    <br/>
            {% endif %}
                <div id="res">
                    <p style="color: green">please press the button on your security key to prove it is you.</p>
                </div>
                <div id="msgdiv"></div>
                {% if mode == "auth" %}
                    <form id="u2f_login" action="{% url 'fido2_complete_auth' %}" method="post" enctype="multipart/form-data">
                {% elif mode == "recheck" %}
                    <form id="u2f_login" action="{% url 'fido2_recheck' %}" method="post" enctype="multipart/form-data">
                {% endif %}
-            </div>
+              {% csrf_token %}
              <input type="hidden" name="response" id="response" value=""/>
          </form>
      </div>
                  </div>
          </div>
          <div class="row">
          <div style="padding-left: 15px">
            {% if request.session.mfa_methods|length > 1 %}
                <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>
            {% endif %}
          </div>
        </div>
      </div>
 </div>
 </div>
 </div>
-    <script type="text/javascript">
+{% include 'FIDO2/fido2_auth.html' %}
        function authen()
        {
                         fetch('{% url 'fido2_begin_auth' %}', {
      method: 'GET',
    }).then(function(response) {
      if(response.ok) return response.arrayBuffer();
      throw new Error('No credential available to authenticate!');
    }).then(CBOR.decode).then(function(options) {
        console.log(options)
      return navigator.credentials.get(options);
    }).then(function(assertion) {
        res=CBOR.encode({
          "credentialId": new Uint8Array(assertion.rawId),
          "authenticatorData": new Uint8Array(assertion.response.authenticatorData),
          "clientDataJSON": new Uint8Array(assertion.response.clientDataJSON),
          "signature": new Uint8Array(assertion.response.signature)
        });
      return fetch('{% url 'fido2_complete_auth' %}', {
        method: 'POST',
        headers: {'Content-Type': 'application/cbor'},
        body:res,
      }).then(function (response) {if (response.ok) return res = response.json()}).then(function (res) {
          if (res.status=="OK")
          {
              $("#msgdiv").addClass("alert alert-success").removeClass("alert-danger")
             $("#msgdiv").html("Verified....please wait")
          {%  if mode == "auth" %}
          window.location.href=res.redirect;
          {% elif mode == "recheck" %}
              mfa_success_function();
          {% endif %}
          }
          else {
              $("#msgdiv").addClass("alert alert-danger").removeClass("alert-success")
                $("#msgdiv").html("Verification Failed as " + res.message + ", <a href='javascript:void(0)' onclick='authen())'> try again</a> or <a href='javascript:void(0)' onclick='history.back()'> Go Back</a>")
              {%  if mode == "auth" %}
              {% elif mode == "recheck" %}
                mfa_failed_function();
              {% endif %}
          }
      })
                 })
        }
    $(document).ready(function () {
        if (location.protocol != 'https:') {
            $("#main_paragraph").addClass("alert alert-danger")
            $("#main_paragraph").html("FIDO2 must work under secure context")
        } else {
            ua=new UAParser().getResult()
            if (ua.browser.name == "Safari" || ua.browser.name == "Mobile Safari" || ua.os.name == "iOS" || ua.os.name == "iPadOS")
                $("#res").html("<button class='btn btn-success' onclick='authen()'>Authenticate...</button>")
            else
                authen()
        }
    });
    </script>
--- a/mfa/templates/MFA.html
+++ b/mfa/templates/MFA.html
@@ -1,7 +1,6 @@
-{% extends "mfa_base.html" %}
+{% extends "base.html" %}
 {% load static %}
 {% block head %}
 {{block.super}}
    <script type="text/javascript">
    function confirmDel(id) {
        $.ajax({
@@ -19,7 +18,7 @@
        $("#modal-body").html("Are you sure you want to delete '"+name+"'? you may lose access to your system if this your only 2FA.");
        $("#actionBtn").remove()
        $("#modal-footer").prepend("<button id='actionBtn' class='btn btn-danger' onclick='confirmDel("+id+")'>Confirm Deletion</button>")
-        $("#popUpModal").modal('show')
+        $("#popUpModal").modal()
    }
    function toggleKey(id) {
@@ -40,92 +39,71 @@
    <script src="{% static 'mfa/js/bootstrap-toggle.min.js'%}"></script>
 {% endblock %}
 {% block content %}
-
+    <br/>
-
+    <br/>
-    <div class="col-lg-10 col-md-10 col-12 mx-auto">
+    <div class="container">
-    <div class="page-header min-height-300 border-radius-xl mt-4" style="background-repeat: no-repeat; background-position: cover; background-size:contain; background-image: url('{% static 'img/keys.jpg'%}');">
+    <div class="row">
-      <span class="mask  bg-gradient-primary  opacity-6"></span>
+        <div align="center">
-    </div>
+            <div class="btn-group">
-    <div class="card mx-3 mx-md-4 mt-n6 h-100 z-index-0 fadeIn3 fadeInBottom "  >
+            <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
-                <div class="card-body">
+                Add Method&nbsp;<span class="caret"></span>
-                        <div class="" style="text-align: center">
+            </button>
-                            <div class="btn-group">
+            <ul class="dropdown-menu">
-                            <button class="btn btn-success dropdown-toggle" data-toggle="dropdown" data-bs-toggle="dropdown">
+                {% if not 'TOTP' in UNALLOWED_AUTHEN_METHODS %}
-                                Add Method&nbsp;<span class="caret"></span>
+                    <li><a href="{% url 'start_new_otop' %}">Authenticator app</a></li>
-                            </button>
+                {% endif %}
-                            <ul class="dropdown-menu">
+                {% if not 'Email' in UNALLOWED_AUTHEN_METHODS %}
-                                {% if not 'TOTP' in UNALLOWED_AUTHEN_METHODS %}
+                    <li><a href="{% url 'start_email' %}">Email Token</a></li>
-                                    <li><a class="dropdown-item" href="{% url 'start_new_otop' %}">{% if 'TOTP' in RENAME_METHODS.keys %}{{ RENAME_METHODS.TOTP }}{% else %}Authenticator app{% endif %}</a></li>
+                {% endif %}
-                                {% endif %}
+                {% if not 'U2F' in UNALLOWED_AUTHEN_METHODS %}
-                                {% if not 'Email' in UNALLOWED_AUTHEN_METHODS %}
+                    <li><a href="{% url 'start_u2f' %}">Security Key</a></li>
-                                    <li><a class="dropdown-item" href="{% url 'start_email' %}">{% if 'Email' in RENAME_METHODS.keys %}{{ RENAME_METHODS.Email }}{% else %}Email Token{% endif %}</a></li>
+                {% endif %}
-                                {% endif %}
+            {% if not 'FIDO2' in UNALLOWED_AUTHEN_METHODS %}
-                                {% if not 'U2F' in UNALLOWED_AUTHEN_METHODS %}
+                    <li><a href="{% url 'start_fido2' %}">FIDO2 Security Key</a></li>
-                                    <li><a class="dropdown-item" href="{% url 'start_u2f' %}">{% if 'U2F' in RENAME_METHODS.keys %}{{ RENAME_METHODS.U2F }}{% else %}Security Key{% endif %}</a></li>
+                {% endif %}
-                                {% endif %}
+            {% if not 'Trusted_Devices' in UNALLOWED_AUTHEN_METHODS %}
-                                {% if not 'FIDO2' in UNALLOWED_AUTHEN_METHODS %}
+                    <li><a href="{% url 'start_td' %}">Trusted Device</a></li>
-                                    <li><a class="dropdown-item" href="{% url 'start_fido2' %}">{% if 'FIDO2' in RENAME_METHODS.keys %}{{ RENAME_METHODS.FIDO2 }}{% else %}FIDO2 Security Key{% endif %}</a></li>
+                {% endif %}
-                                {% endif %}
+            </ul>
                                {% if not 'Trusted_Devices' in UNALLOWED_AUTHEN_METHODS %}
                                    <li><a class="dropdown-item" href="{% url 'start_td' %}">{% if 'Trusted_Devices' in  RENAME_METHODS.keys %}{{ RENAME_METHODS.Trusted_Devices }}{% else %}Trusted Device{% endif %}</a></li>
                                {% endif %}
                            </ul>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                       <table class="table table-responsive table-striped">
                            <tr>
                                <th>Type</th>
                                <th>Date Added</th>
                                <th>Expires On</th>
                                <th>Device</th>
                                <th>Last Used</th>
                                <th>Status</th>
                                <th>Delete</th>
                            </tr>
                            {% if keys %}
                                {% for key in keys %}
                                    <tr>
                                        <td>{{ key.name }}</td>
                                        <td>{{ key.added_on }}</td>
                                        <td>{% if key.expires %}{{ key.expires }}{% else %}N/A{% endif %}</td>
                                        <td>{% if key.device %}{{ key.device }}{% endif %}</td>
                                        <td>{% if key.last_used %}{{ key.last_used }}{% else %}Never{% endif %}</td>
                                        {% if key.key_type in HIDE_DISABLE %}
                                            <td>{% if key.enabled %}On{% else %} Off{% endif %}</td>
                                        {% else %}
                                            <td><input type="checkbox" id="toggle_{{ key.id }}" {% if key.enabled %}checked{% endif %} data-onstyle="success" data-offstyle="danger"  onchange="toggleKey({{ key.id }})" data-toggle="toggle" class="status_chk"></td>
                                        {% endif %}
                                        <td>{% if key.key_type in HIDE_DISABLE %}
                                        ----
                                        {% else %}
                                            <a href="javascript:void(0)" onclick="deleteKey({{ key.id }},'{{ key.key_type }}')"> <span class="fa fa-trash fa-solid fa-trash-can bi bi-trash-fill"></span></a></td>
                                        {% endif %}
                                    </tr>
                                {% endfor %}
                            {% if "RECOVERY" not in UNALLOWED_AUTHEN_METHODS %}
                            <tr>
                                <td>{{ recovery.name }}</td>
                                <td>{{ recovery.added_on }}</td>
                                <td>N/A</td>
                                <td>N/A</td>
                                <td>{% if recovery.last_used %}{{ recovery.last_used }}{% else %}Never{% endif %}</td>
                                <td>On</td>
                                <td><a href="{% url 'manage_recovery_codes' %}"> <span class="fa fa-wrench fa-solid fa-wrench bi bi-wrench-fill"></span></a></td>
                            </tr>
                            {% endif %}
                        {% else %}
                           <tr><td colspan="7" align="center">You didn't have any keys yet.</td> </tr>
                       {% endif %}
                        </table>
                    </div>
                </div>          
            </div>
        </div>
    <br/>
    <br/>
       <table class="table table-striped">
           <tr>
-</div>
+               <th>Type</th>
               <th>Date Added</th>
               <th>Expires On</th>
               <th>Device</th>
               <th>Last Used</th>
               <th>Status</th>
               <th>Delete</th>
           </tr>
        {% for key in keys %}
           <tr>
-{% include "modal.html" %}
+               <td>{{ key.key_type }}</td>
-{% endblock %}
+               <td>{{ key.added_on }}</td>
               <td>{{ key.expires }}</td>
               <td>{% if key.device %}{{ key.device }}{% endif %}</td>
               <td>{{ key.last_used }}</td>
                {% if key.key_type in HIDE_DISABLE %}
                    <td>{% if key.enabled %}On{% else %} Off{% endif %}</td>
                {% else %}
                    <td><input type="checkbox" id="toggle_{{ key.id }}" {% if key.enabled %}checked{% endif %} data-onstyle="success" data-offstyle="danger"  onchange="toggleKey({{ key.id }})" data-toggle="toggle" class="status_chk"></td>
                {% endif %}
               <td>{% if key.key_type in HIDE_DISABLE %}
                   ----
                   {% else %}
                    <a href="javascript:void(0)" onclick="deleteKey({{ key.id }},'{{ key.key_type }}')"> <span class="fa fa-trash"></span></a></td>
                    {% endif %}
           </tr>
       {% empty %}
           <tr><td colspan="7" align="center">You didn't have any keys yet.</td> </tr>
       {% endfor %}
        </table>
    </div>
    </div>
    {% include "modal.html" %}
 {% endblock %}
--- a/mfa/templates/RECOVERY/Add.html
+++ b/mfa/templates/RECOVERY/Add.html
@@ -1,123 +0,0 @@
 {% extends "base.html" %}
 {% load static %}
 {% block head %}
 <style>
    #two-factor-steps {
 	border: 1px solid #ccc;
 	border-radius: 3px;
 	padding: 15px;
    }
    .tokenrow{
        margin-top: 10px;
        margin-left: 5px;
    }
    .row{
        margin: 3px;
    }
    .toolbtn {
        border-radius: 7px;
        cursor: pointer;
    }
    .toolbtn:hover {
        background-color: gray;
        transition: 0.2s;
    }
    .toolbtn:active {
        background-color: green;
        transition: 0.2s;
    }
 </style>
 <script src="{% static 'mfa/js/qrious.min.js' %}" type="text/javascript"></script>
 <script type="text/javascript">
    var clearCodes;
    $(document).ready(function checkTokenLeft() {
        $.ajax({"url":"{% url 'get_recovery_token_left' %}", dataType:"JSON",
        success:function (data) {
            tokenLeft = data.left
            html = ""
            {% if mfa_redirect %}
                html += "<div class='alert alert-success'>You have enrolled successfully in {{ mfa_redirect }} method, please generate recovery codes so that you can use in case you lost access to all your verification methods.</div>"
            {% endif %}
            if (tokenLeft == 0) {
                html += "<h6>You don't have any backup code linked to your account, please generate new ones !</h6>"
            }
            else {
                html += "<p>You still have "+tokenLeft+" backup code left."
            }
            document.getElementById('tokens').innerHTML = html
        }})
    });
    function confirmRegenerateTokens() {
        htmlModal = "<h6>Caution! you can only view these token now, else you will need to generate new ones.</h6><div align='center'><button onclick='regenerateTokens()' class='btn btn-success'>Regenerate</button></div>"
        $("#modal-title").html("Regenerate your recovery Codes?")
        $("#modal-body").html(htmlModal)
        $("#popUpModal").modal('show')
    }
    function copy() {
        navigator.clipboard.writeText($("#recovery_codes").text());
    }
    function regenerateTokens() {
        $.ajax({
            "url":"{% url 'regen_recovery_tokens' %}", dataType:"JSON",
            success:function (data) {
                let htmlkey=`<p>Here are the recovery codes, you have to save them now as you won't able to view them again.</p>
                <div class='row'><div class='offset-4 col-md-4' style='background-color:#f0f0f0;padding: 10px'>
                    <div class='row'>
                    <div class="col-6 offset-6">
                    <span onclick='download_recovery()' class='fa fa-download toolbtn' title="Download"></span>&nbsp;&nbsp;
                    <span class='fa fa-clipboard toolbtn' title="Copy" onclick="copy()"></span>
                    </div></div><div id='recovery_codes'><pre>`;
                for (let i = 0; i < data.keys.length; i++) {
                        htmlkey +="- " +data.keys[i] + "\n"
                }
                document.getElementById('tokens').innerHTML = htmlkey+"</pre></div></div></div>"
                $("#popUpModal").modal('hide')
                clearCodes = data.keys
            }
        })
    }
    function download_recovery() {
        var element = document.createElement('a');
        var text = "";
        for(let i = 0; i < clearCodes.length; i++)
        {
            text = text + clearCodes[i] 
            if (i < clearCodes.length - 1) { text = text + "\n"}
        }
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
        element.setAttribute('download', 'Recovery Codes.txt');
        element.style.display = 'none';
        document.body.appendChild(element);
        element.click();
        console.log(element.innerHTML)
        document.body.removeChild(element);
    }
    </script>
 {% endblock %}
 {% block content %}
    <div class="col-lg-8 col-md-8 col-12 mx-auto">
    <div class="page-header min-height-300 border-radius-xl mt-4" style="background-repeat: no-repeat; background-position: cover; background-size:contain; background-image: url('{% static 'img/keys.jpg'%}');">
      <span class="mask  bg-gradient-primary  opacity-6"></span>
    </div>
    <div class="card mx-3 mx-md-4 mt-n6 h-100 z-index-0 fadeIn3 fadeInBottom "  >
        <div class="card-header pb-0 p-3">
            <h6 class="mb-0">
                Recovery Codes List
            </h6>
          </div>
        <div class="card-body">
            <div class="tokenrow mb-4" id="tokens">
            </div>
            <div class="row">
                <div class="col-md-4 col-md-offset-4" style="padding-left: 0px" align="center">
                    <button onclick="confirmRegenerateTokens()" class="btn btn-success">Regenerate</button>
                </div>
                <div class="col-md-6"  align="right" style="padding-right: 30px">
                    <a href="{{redirect_html}}" class="btn btn-default btn-secondary" role="button"> {{reg_success_msg}}</a>
                </div>
        </div>
 </div>
 {% include "modal.html" %}
 {% endblock %}
--- a/mfa/templates/RECOVERY/Auth.html
+++ b/mfa/templates/RECOVERY/Auth.html
@@ -1,14 +0,0 @@
 {% extends "mfa_auth_base.html" %}
 {% block head %}
    <style>
    .row{
        margin-left: 15px;
    }
    </style>
 {% endblock %}
 {% block content %}
 <br/>
 <br/>
 {% include "RECOVERY/recheck.html" with mode='auth' %}
  {% endblock %}
--- a/mfa/templates/RECOVERY/recheck.html
+++ b/mfa/templates/RECOVERY/recheck.html
@@ -1,76 +0,0 @@
 <script type="application/javascript">
    $(document).ready(function showWarningLastBackup() {
        {% if lastBackup %}
        $("#modal-title").html("Last backup code used !")
        $("#modal-body").html("Don't forget to regenerate new backup code after login !")
        $('#modal-footer').html(`<FORM METHOD="GET" ACTION="{% url 'recovery_auth' %}" Id="confirmLogin" onSubmit="" name="recoveryLastBackupConfirm">
        <input type='submit'class='btn btn-lg btn-success btn-block' value='Continue'>`)
        $("#popUpModal").modal('show')
        {% endif %}
        return
    });
    function send_recovery() {
        $.ajax({"url":"{% url 'recovery_recheck' %}", method:"POST",dataType:"JSON",
            data:{"csrfmiddlewaretoken":"{{ csrf_token }}","recovery":$("#recovery").val()},
         success:function (data) {
                            if (data["recheck"])
                                mfa_success_function();
                            else {
                                mfa_failed_function();
                            }
                        }
        })
    }
 </script>
    <div class="col-lg-8 col-md-8 col-12 mx-auto">
    <div class="page-header min-height-300 border-radius-xl mt-4" style="background-repeat: no-repeat; background-position: cover; background-size:contain; background-image: url('{% static 'img/keys.jpg'%}');">
      <span class="mask  bg-gradient-primary  opacity-6"></span>
    </div>
    <div class="card mx-3 mx-md-4 mt-n6 h-100 z-index-0 fadeIn3 fadeInBottom "  >
        <div class="card-header pb-0 p-3">
            <h6 class="mb-0">
                Recovery code
            </h6>
          </div>
        <div class="card-body">
            <form METHOD="POST" ACTION="{% url 'recovery_auth' %}" Id="formLogin" onSubmit="" name="FrontPage_Form1">
                {% csrf_token %}
                    {%  if invalid %}
                        <div class="alert alert-danger">
                            Sorry, The provided code is not valid, or has already been used.
                        </div>
                    {% endif %}
                {% if quota %}
                    <div class="alert alert-warning">
                        {{ quota }}
                    </div>
                {% endif %}
                <fieldset>
                    <div class="row">
                          <p>Enter the 11-digits on your authenticator. Or input a recovery code</p>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="input-group input-group-static mb-3">
                                <span class="input-group-addon input-group-text">
                                    <i class="glyphicon glyphicon-lock bi bi-lock"></i>
                                </span>
                                <input class="form-control" size="11" MaxLength="11" value="" placeholder="e.g abcde-fghij" name="recovery" type="text" id="recovery" autofocus>
                            </div>
                            <div class="form-group d-grid gap-2">
                                <input type="{% if mode == "auth" %}submit{% elif mode == 'recheck'  %}button{% endif %}" {% if mode == "recheck" %}onclick="send_recovery()" {% endif %} class="btn btn-lg btn-success btn-block" value="Sign in">
                            </div>
                        </div>
                    </div>
                </fieldset>
            </form>
            <div class="row">
                {% if request.session.mfa_methods|length > 1 %}
                    <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>
                {% endif %}
            </div>
        </div>
 </div>
 {% include "modal.html" %}
--- a/mfa/templates/TOTP/Add.html
+++ b/mfa/templates/TOTP/Add.html
@@ -1,23 +1,16 @@
 {% extends "base.html" %}
 {% load static %}
 {% block head %}
 <style>
-
+    #two-factor-steps {
 	border: 1px solid #ccc;
 	border-radius: 3px;
 	padding: 15px;
 }
    .row{
        margin: 0px;
    }
    .toolbtn {
        border-radius: 7px;
        cursor: pointer;
    }
    .toolbtn:hover {
        background-color: gray;
        transition: 0.2s;
    }
    .toolbtn:active {
        background-color: green;
        transition: 0.2s;
    }
    </style>
 <script src="{% static 'mfa/js/qrious.min.js' %}" type="text/javascript"></script>
 <script type="text/javascript">
@@ -36,17 +29,8 @@
        })
    });
    function showKey() {
        const htmlkey = `
            <div class="row">
                <div class="col-11">
                    <pre id="totp_secret">`+window.key+`</pre>
                </div>
                <div class="col-1">
                    <span onclick=navigator.clipboard.writeText($("#totp_secret").text()) class="fa fa-clipboard toolbtn"></span>
                </div>
            </div>`
        $("#modal-title").html("Your Secret Key")
-        $("#modal-body").html(htmlkey)
+        $("#modal-body").html("<pre>"+window.key+"</pre")
        $("#popUpModal").modal('show')
    }
    function verify() {
@@ -54,16 +38,13 @@
        $.ajax({
            "url":"{% url 'verify_otop' %}?key="+key+ "&answer="+answer,
            success:function (data) {
-            if (data =='Success')
+                if (data == "Error")
-                $("#res").html("<div class='alert alert-success'>Your authenticator is registered successfully, <a href='{{redirect_html}}'> {{reg_success_msg}}</a></div>")
+                    alert("You entered wrong numbers, please try again")
-      else if (data == "RECOVERY")
+                else
-      {
+                {
-         setTimeout(function (){location.href="{% url 'manage_recovery_codes' %}"},2500)
+                    alert("Your authenticator is added successfully.")
-        $("#res").html("<div class='alert alert-success'>Your authenticator is registered successfully, but <a href='{% url 'manage_recovery_codes' %}'>redirecting to {{ RECOVERY_METHOD }} method</a></div>")
+                    window.location.href="{{ redirect_html }}"
-      }
+                }
      else
        $("#res").html("<div class='alert alert-danger'>The code provided doesn't match the key, please try again or <a href='{% url 'mfa_home' %}'> Go to Security Home</a></div>")
            }
        })
    }
@@ -82,59 +63,47 @@
 {% block content %}
 <br/>
 <br/>
-<div class="container-fluid px-2 px-md-4">
+<div class="container">
-  <div class="page-header min-height-300 border-radius-xl mt-4" style="background-repeat: no-repeat; background-position: cover; background-size:contain; background-image: url('{% static 'img/keys.jpg'%}');">
+    <div class="col-md-6 col-md-offset-3" id="two-factor-steps">
-    <span class="mask  bg-gradient-primary  opacity-6"></span>
+        <div class="row" align="center">
-  </div>
+            <h4>Adding Authenticator</h4>
-  
+        </div>
        <div class="row">
            <p>Scan the image below with the two-factor authentication app on your <a href="javascript:void(0)" onclick="showTOTP()">phone/PC</a>. If you can’t use a barcode,
                <a href="javascript:void(0)" onclick="showKey()">enter this text</a> instead. </p>
        </div>
        <div class="row">
            <div align="center" style="display: none" id="second_step">
                <img id="qr"/>
            </div>
            <div class="row">
                <p><b>Enter the six-digit code from the application</b></p>
                <p style="color: #333333;font-size: 10px">After scanning the barcode image, the app will display a six-digit code that you can enter below. </p>
            </div>
            <div class="row">
                <input style="display: inline;width: 95%" maxlength="6" size="6" class="form-control" id="answer" placeholder="e.g 785481"/>
-            <div class="card mx-3 mx-md-4 mt-n6 h-100" id="two-factor-steps" >
+            </div>
-                <div class="card-header pb-0 p-3">
+            <div class="row" style="padding-top: 10px;">
-                    <h6 class="mb-0">Adding a new {{ method.name }}</h6>
+                <div class="col-md-6" style="padding-left: 0px">
                    <button class="btn btn-success" onclick="verify()">Enable</button>
                </div>
-                <div class="card-body p-3">
+                <div class="col-md-6" align="right" style="padding-right: 30px">
-                    <div class="row">
+                    <a href="{% url 'mfa_home' %}"><button class="btn btn-default">Cancel</button></a>
                        <p>Scan the image below with the two-factor authentication app on your <a href="javascript:void(0)" onclick="showTOTP()">phone/PC</a>. If you can’t use a barcode,
                            <a href="javascript:void(0)" onclick="showKey()">enter this text</a> instead. </p>
                    </div>
                        <div id="res">
                        </div>
                        <div class="row" style="text-align: center">
                        <div align="center" style="display: none;text-align: center;align-content: center" id="second_step">
                            <img id="qr"/>
                        </div>
                        </div>
                        <div class="row">
                            <p><b>Enter the six-digit code from the application</b></p>
                            <p >After scanning the barcode image, the app will display a six-digit code that you can enter below. </p>
                        </div>
                        <div class="row">
                            <div class="offset-md-4 col-md-4">
                                <div class="input-group input-group-static">
                            <input style="display: inline;width: 95%" maxlength="6" size="6" class="form-control" id="answer" placeholder="e.g 785481"/>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="padding-top: 10px;">
                            <div class="offset-md-4 col-md-4">
                                <button class="btn btn-success" onclick="verify()">Enable</button>
                                <a href="{% url 'mfa_home' %}" class="btn btn-default btn-secondary" role="button">Cancel</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
-
+    </div>
 </div>
 {% include "modal.html" %}
-{% endblock %}
+{% endblock %}
--- a/mfa/templates/TOTP/Auth.html
+++ b/mfa/templates/TOTP/Auth.html
@@ -1,10 +1,10 @@
 {% extends "mfa_auth_base.html" %}
 {% block head %}
-    <!--<style>
+    <style>
    .row{
        margin-left: 15px;
    }
-    </style>-->
+    </style>
 {% endblock %}
 {% block content %}
 <br/>
--- a/mfa/templates/TOTP/recheck.html
+++ b/mfa/templates/TOTP/recheck.html
@@ -1,64 +1,76 @@
-{% extends "mfa_auth_base.html" %}
+<script type="application/javascript">
-{% load static %}
+    function send_totp() {
        $.ajax({"url":"{% url 'totp_recheck' %}", method:"POST",dataType:"JSON",
            data:{"csrfmiddlewaretoken":"{{ csrf_token }}","otp":$("#otp").val()},
         success:function (data) {
                            if (data["recheck"])
                                mfa_success_function();
                            else {
                                mfa_failed_function();
                            }
                        }
        })
-{% block content %}
+    }
 </script>
 <div class="row">
 <div class="col-sm-10 col-sm-offset-1 col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
 <div class="panel panel-default">
      <div class="panel-heading">
 	      <strong> One Time Password</strong>
      </div>
      <div class="panel-body">
      <FORM METHOD="POST" ACTION="{% url 'totp_auth' %}" Id="formLogin" onSubmit="" name="FrontPage_Form1">
-    <div class="col-lg-8 col-md-8 col-12 mx-auto">
+      {% csrf_token %}
-    <div class="page-header min-height-300 border-radius-xl mt-4" style="background-repeat: no-repeat; background-position: cover; background-size:contain; background-image: url('{% static 'img/keys.jpg'%}');">
+          {%  if invalid %}
-      <span class="mask  bg-gradient-primary  opacity-6"></span>
+          <div class="alert alert-danger">
-    </div>
+              Sorry, The provided token is not valid.
-    <div class="card mx-3 mx-md-4 mt-n6 h-100 z-index-0 fadeIn3 fadeInBottom "  >
+          </div>
-                <div class="card-header pb-0 p-3 ">
+          {% endif %}
-                    <h6 class="mb-0">One Time Password</h6>
+      {% if quota %}
-                </div>
+          <div class="alert alert-warning">
-                <div class="card-body">
+              {{ quota }}
-                    <form METHOD="POST" ACTION="{% url 'totp_auth' %}" Id="formLogin" onSubmit="" name="FrontPage_Form1">
+          </div>
-                        {% csrf_token %}
+      {% endif %}
-                            {%  if invalid %}
+      <fieldset>
-                            <div class="alert alert-danger">
+      <div class="row">
-                                Sorry, The provided token is not valid.
+      <div class="col-sm-12 col-md-12">
-                            </div>
+        <p>Enter the 6-digits on your authenticator.</p>
-                            {% endif %}
+      </div>
-                        {% if quota %}
+      </div>
                            <div class="alert alert-warning">
                                {{ quota }}
                            </div>
                        {% endif %}
                        <fieldset>
-                            <div class=" text-left">
+      <div class="row">
-                              <p>Enter the 6-digits on your authenticator</p>
+	  <div class="col-sm-12 col-md-12">
-                            </div>
+	    <div class="form-group">
 	      <div class="input-group">
 		<span class="input-group-addon">
 		<i class="glyphicon glyphicon-lock"></i>
 		</span>
 		<input class="form-control" size="6" MaxLength="6" value="" placeholder="e.g 55552" name="otp" type="text" id="otp" autofocus>
 	      </div>
 	    </div>
-                                  <div class="form-group">
+          <div class="form-group">
                                    <div class="input-group input-group-dynamic mb-3">
                                        <span class="input-group-addon input-group-text">
                                            <i class="glyphicon glyphicon-lock bi bi-lock"></i>
                                        </span>
                                        <input class="form-control" size="6" MaxLength="6" value="" placeholder="e.g 55552" name="otp"  type="text"  id="otp" autofocus>
                                    </div>
                                  </div>
                                  <div class="form-group d-grid gap-2">
                                      <input type="{% if mode == "auth" %}submit{% elif mode == 'recheck'  %}button{% endif %}" {% if mode ==       "recheck" %}onclick="send_totp()" {% endif %} class="btn btn-lg btn-success btn-block" value="Sign in">
                                  </div>
-
+	      <input type="{% if mode == "auth" %}submit{% elif mode == 'recheck'  %}button{% endif %}" {% if mode == "recheck" %}onclick="send_totp()" {% endif %} class="btn btn-lg btn-success btn-block" value="Sign in">
-                        </fieldset>
+	      </div>
-                    </form>
+      </div>
-                    
+      </fieldset>
-
+      </FORM>
-                    <div class="">
+      </div>
-                        {% if request.session.mfa_methods|length > 1 %}
+        <div class="row">
-                            <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>
+        <div class="col-md-6" style="padding-left: 25px">
-                        {% endif %}
+            {% if request.session.mfa_methods|length > 1 %}
-                    </div>
+                <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>
-
+            {% endif %}
-                </div>
+        </div>
-    </div>
+        </div>
-</div>
+	      </div>
-
+              </div>
-{% include "modal.html" %}
+	      </div>
-{% endblock %}
+	      </div>
--- a/mfa/templates/TrustedDevices/Add.html
+++ b/mfa/templates/TrustedDevices/Add.html
@@ -25,88 +25,101 @@
    </script>
 {% endblock %}
 {% block content %}
-    <div class="col-lg-8 col-md-8 col-12 mx-auto">
+    <br/>
-    <div class="page-header min-height-300 border-radius-xl mt-4" style="background-repeat: no-repeat; background-position: cover; background-size:contain; background-image: url('{% static 'img/keys.jpg'%}');">
+    <br/>
      <span class="mask  bg-gradient-primary  opacity-6"></span>
    </div>
    <div class="card mx-3 mx-md-4 mt-n6 h-100 z-index-0 fadeIn3 fadeInBottom "  >
        <div class="card-header pb-0 p-3">
            <h6 class="mb-0">
                <strong> Add Trusted Device</strong>
            </h6>
          </div>
        <div class="card-body">
            {%  if success %}
                <div class="alert alert-warning">
                    Please check your PC window, to continue the process.
                </div>
            {% elif added %}
                <div class="alert alert-success">
                    Your device is now trusted, please try to <a href="{% url 'login' %}"> login</a>
                </div>
            {% else %}
                <div class="alert alert-warning text-white">Please make sure you are not in private (incognito) mode <i class="fa fa-user-secret"></i></div>
                <form METHOD="POST" ACTION="{% url 'add_td' %}" Id="formLogin" onSubmit="return checkFlag()" name="FrontPage_Form1">
                {% csrf_token %}
                {%  if invalid %}
                    <div class="alert alert-danger">
                        {{ invalid }}
                    </div>
                {% endif %}
                {% if quota %}
                    <div class="alert alert-warning">
                        {{ quota }}
                    </div>
                {% endif %}
                    <fieldset>
-                        <div class="row">
+<div class="row">
-                            <div>
+
-                                <div class="form-group">
+<div class="col-sm-10 col-sm-offset-1 col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-                                    <div class="input-group input-group-static mb-3">
+<div class="panel panel-default">
-                                        <span class="input-group-addon input-group-text">
+      <div class="panel-heading">
-                                            <i class="glyphicon glyphicon-user bi bi-person"></i>
+	      <strong> Add Trusted Device</strong>
-                                        </span>
+      </div>
-                                        <input class="form-control" id="username" size="30" MaxLength="30" placeholder="Username" name="username" value="{{ username }}" type="text" autofocus autocomplete="on">
+      <div class="panel-body">
-                                    </div>
+        {%  if success %}
-                                </div>
+            <div class="alert alert-warning">
-                                <div class="form-group">
+                Please check your PC window, to continue the process.
-                                    <div class="input-group input-group-static mb-3">
+            </div>
-                                        <span class="input-group-addon input-group-text">
+        {% elif added %}
-                                            <i class="fa fa-key"></i>
+            <div class="alert alert-success">
-                                        </span>
+                Your device is now trusted, please try to <a href="{% url 'login' %}"> login</a>
-                                        <input class="form-control" placeholder="e.g GAK-Y2M" id='key' style="text-transform: uppercase" name="key" type="text" size="9" MaxLength="9" value="{{ key }}">
+            </div>
-                                    </div>
+
-                                </div>
+      {% else %}
-                                <div class="form-group">
+            <div class="alert alert-warning">Please make sure you are not in private (incognito) mode <i class="fal fa-user-secret"></i></div>
-                                    <span class=" form-check ">
+      <FORM METHOD="POST" ACTION="{% url 'add_td' %}" Id="formLogin" onSubmit="return checkFlag()" name="FrontPage_Form1">
-                                        <input class="form-check-input" id='agree' name="agree" type="checkbox">
+      {% csrf_token %}
-                                            <span style="color: red"> I confirm that this device is mine and it is only used by me.
+          {%  if invalid %}
-                                            </span>
+          <div class="alert alert-danger">
-                                </div>
+              {{ invalid }}
-                                {% comment %}
+          </div>
-                                <div class="form-group">
+          {% endif %}
-                                    <div class="input-group mb-3">
+      {% if quota %}
-                                        <span class="input-group-addon input-group-text">
+          <div class="alert alert-warning">
-                                            <select size="1" name="Institution_Code" style="font-size: 10pt; font-family: Calibri; height: 34px;width: 230px">
+              {{ quota }}
-                                                {%  for ins in institutes %}
+          </div>
-                                                  <option value="{{ ins.institution_code }}">{{ ins.alias }}</option>
+      {% endif %}
-                                                {% endfor %}
+      <fieldset>
-                                            </select>
+      <div class="row">
-                                        </span>
+      <div class="col-sm-12 col-md-12">
-                                    </div>
+      </div>
-                                </div>
+      </div>
-                                {% endcomment %}
+      <div class="row">
-                                <div class="form-group d-grid gap-2 mt-2">
+	  <div class="col-sm-12 col-md-12">
-                                    <input type="submit" class="btn btn-lg btn-success btn-block" value="Trust Device">
+	    <div class="form-group">
-                                </div>
+	      <div class="input-group">
-                            </div>
+		<span class="input-group-addon">
-                        </div>
+		<i class="glyphicon glyphicon-user"></i>
-                    </fieldset>
+		</span>
-                </form>
+		<input class="form-control" id="username" size="30" MaxLength="30" placeholder="Username" name="username" value="{{ username }}" type="text" autofocus autocomplete="on">
-                {% endif %}
+
-        </div>
+	      </div>
-</div>
+	    </div>
-    {% include "modal.html" %}
+	    <div class="form-group">
-{% endblock %}
+		<div class="input-group">
 		<span class="input-group-addon">
 		<i class="fa fa-key"></i>
 		</span>
 		<input class="form-control" placeholder="e.g GAK-Y2M" id='key' style="text-transform: uppercase" name="key" type="text" size="9" MaxLength="9" value="{{ key }}">
 		</div>
 	    </div>
           <div class="form-group">
 		<span class="input-group">
            <input id='agree' name="agree" type="checkbox"><span style="color: red"> I confirm that this device is mine and it is only used by me.</span>
 	    </div>
      {% comment %}
 	    <div class="form-group">
 	      <div class="input-group">
 	      <span class="input-group-addon">
 	      <select size="1" name="Institution_Code" style="font-size: 10pt; font-family: Calibri; height: 34px;width: 230px">
              {%  for ins in institutes %}
                <option value="{{ ins.institution_code }}">{{ ins.alias }}</option>
              {% endfor %}
 		</select>
 	      </span>
 	      </div>
 	      </div>
 	      {% endcomment %}
 	      <div class="form-group">
 	      <input type="submit" class="btn btn-lg btn-success btn-block" value="Trust Device">
 	      </div>
 	      </div>
 	      </div>
 	      </fieldset>
 	      </form>
      {% endif %}
 	      </div>
 	      <div class="panel-footer ">
 	      </div>
              </div>
 	      </div>
 	      </div>
  {% endblock %}
--- a/mfa/templates/TrustedDevices/Done.html
+++ b/mfa/templates/TrustedDevices/Done.html
@@ -7,17 +7,17 @@
 <div class="row">
 <div class="col-sm-10 col-sm-offset-1 col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-<div class="panel panel-default card">
+<div class="panel panel-default">
-      <div class="panel-heading card-header">
+      <div class="panel-heading">
 	      <strong> Add Trusted Device</strong>
      </div>
-      <div class="panel-body card-body">
+      <div class="panel-body">
            <div class="alert alert-success">
                Your device is now trusted, please try to <a href="{{ HOST }}{{ BASE_URL }}accounts/login/"> login</a>
            </div>
 	      </div>
-	      <div class="panel-footer card-footer">
+	      <div class="panel-footer ">
 	      </div>
--- a/mfa/templates/TrustedDevices/start.html
+++ b/mfa/templates/TrustedDevices/start.html
@@ -1,7 +1,5 @@
 {% extends "base.html" %}
 {% load static %}
 {% block head %}
    <script src="{% static 'mfa/js/qrious.min.js' %}" type="text/javascript"></script>
    <style>
    #two-factor-steps {
 	border: 1px solid #ccc;
@@ -14,16 +12,10 @@
    </style>
    <script type="text/javascript">
    $(document).ready(function (){
        var qr = new QRious({
          element: document.getElementById('qr'),
          value: "{{ url }}?u={{ request.user.username }}&k={{ key }}"
        });
    })
    function sendEmail() {
        $("#modal-title").html("Send Link")
        $("#modal-body").html("Sending Email, Please wait....");
-        $("#popUpModal").modal('show');
+        $("#popUpModal").modal();
        $.ajax({
            "url":"{% url 'td_sendemail' %}",
            success:function (data) {
@@ -68,7 +60,7 @@
                    $("#actionBtn").remove();
                    $("#modal-footer").prepend("<button id='actionBtn' class='btn btn-success' onclick='checkMFA()'>Trust Device</button>")
                    $("#modal-body").html(data)
-                    $("#popUpModal").modal('show');
+                    $("#popUpModal").modal()
                }
            }
        })
@@ -78,58 +70,33 @@
    </script>
 {% endblock %}
 {% block content %}
-<div class="col-lg-8 col-md-8 col-12 mx-auto">
+      <br/>
-    <div class="page-header min-height-300 border-radius-xl mt-4" style="background-repeat: no-repeat; background-position: cover; background-size:contain; background-image: url('{% static 'img/keys.jpg'%}');">
+    <br/>
-      <span class="mask  bg-gradient-primary  opacity-6"></span>
+    <div class="container">
        <div class="col-md-6 col-md-offset-3" id="two-factor-steps">
            <div class="row" align="center">
                <h4>Add Trusted Device</h4>
            </div>
    <div class="row" >
        {%  if not_allowed %}
            <div class="alert alert-danger">You can't add any more devices, you need to remove previously trusted devices first.</div>
        {% else %}
    <p style="color: green">Allow access from mobile phone and tables.</p>
    <h5>Steps:</h5>
        <ol>
            <li>Using your mobile/table, open Chrome/Firefox.</li>
            <li>Go to <b>{{ HOST }}{{ BASE_URL }}devices/add</b>&nbsp;&nbsp;<a href="javascript:void(0)" onclick="sendEmail()" title="Send to my email"><i class="fas fa-paper-plane"></i></a></li>
            <li>Enter your username & following 6 digits<br/>
                <span style="font-size: 16px;font-weight: bold; margin-left: 50px">{{ key|slice:":3" }} - {{ key|slice:"3:" }}</span>
            </li>
            <li>This window will ask to confirm the device.</li>
        </ol>
    {% endif %}
    </div>
    <div class="card mx-3 mx-md-4 mt-n6 h-100 z-index-0 fadeIn3 fadeInBottom "  >
        <div class="card-header pb-0 p-3">
            <h6 class="mb-0">
                Add Trusted Device
            </h6>
          </div>
        <div class="card-body">
            {%  if not_allowed %}
                <div class="alert alert-danger">You can't add any more devices, you need to remove previously trusted devices first.</div>
            {% else %}
                <p style="color: green">Allow access from mobile phone and tables.</p><br/>
                <br/>
            <div class="row">
                <h5>Steps:</h5>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <h5>Using Camera</h5>
                    <ol>
                        <li>Using your mobile/table, open Chrome/Firefox.</li>
                        <li>Scan the following barcode <br/>
                            <img id="qr"/> <br/>
                        </li>
                        <li>Confirm the consent and submit form.</li>
                    </ol>
                </div>
                <div class="col-md-6">
                    <h5>Manual</h5>
                    <ol>
                        <li>Using your mobile/table, open Chrome/Firefox.</li>
                        <li>Go to <b>{{ url }}</b>&nbsp;&nbsp;</li>
                        <li>Enter your username & following 6 digits<br/>
                            <span style="font-size: 16px;font-weight: bold; margin-left: 50px">{{ key|slice:":3" }} - {{ key|slice:"3:" }}</span>
                        </li>
                        <li>Confirm the consent and submit form.</li>
                </div>
            </div>
            <div class="row">
                This window will ask to confirm the device.
            </div>
            {% endif %}           
        </div>
-</div>           
+    </div>
        </div>
 </div>
    {% include "modal.html" %}
    {% include 'mfa_check.html' %}
 {% endblock %}
--- a/mfa/templates/U2F/Add.html
+++ b/mfa/templates/U2F/Add.html
@@ -1,10 +1,19 @@
 {% extends "base.html" %}
 {% load static %}
 {% block head %}
-
+    <style>
    #two-factor-steps {
 	border: 1px solid #ccc;
 	border-radius: 3px;
 	padding: 15px;
 }
    .row{
        margin: 0px;
    }
    </style>
    <script src="{% static 'mfa/js/u2f-api.js' %}" type="text/javascript"></script>
    <script type="text/javascript">
-    function addToken() {
+    $(document).ready(function addToken() {
                data=JSON.parse('{{ token|safe }}')
                console.log(data)
                u2f.register(data.appId,data.registerRequests,data.registeredKeys,function (response) {
@@ -12,51 +21,31 @@
                        "url":"{% url 'bind_u2f' %}",method:"POST",
                        data:{"csrfmiddlewaretoken":"{{ csrf_token }}","response":JSON.stringify(response)},
                        success:function (data) {
-                        if (data =='OK')
+                            if (data == "OK")
-                            $("#res").html("<div class='alert alert-success'>Your device is registered successfully, <a href='{{redirect_html}}'> {{reg_success_msg}}</a></div>")
+                            {
-                        else if (data == "RECOVERY")
+                                alert("Your device is added successfully.")
-                        {
+                                window.location.href="{{ redirect_html }}"
-                            setTimeout(function (){location.href="{% url 'manage_recovery_codes' %}"},2500)
+                            }
                            $("#res").html("<div class='alert alert-success'>Your device is registered successfully, but <a href='{% url 'manage_recovery_codes' %}'>redirecting to {{ RECOVERY_METHOD }} method</a></div>")
                        }
                        else
                            $("#res").html("<div class='alert alert-danger'>Registration failed, please <a href='javascript:void(0)' onclick='addToken()'>try again</a> or <a href='{% url 'mfa_home' %}'> Go to Security Home</a></div>")
                    },
                        error: function (data)
                        {
                             $("#res").html("<div class='alert alert-danger'>Registration failed, please <a href='javascript:void(0)' onclick='addToken()'>try again</a> or <a href='{% url 'mfa_home' %}'> Go to Security Home</a></div>")
                        }
                    })
                },5000)
-            }
+            })
    $(document).ready(addToken())
    </script>
 {% endblock %}
 {% block content %}
-    <div class="col-lg-8 col-md-8 col-12 mx-auto">
+      <br/>
-    <div class="page-header min-height-300 border-radius-xl mt-4" style="background-repeat: no-repeat; background-position: cover; background-size:contain; background-image: url('{% static 'img/keys.jpg'%}');">
+    <br/>
-      <span class="mask  bg-gradient-primary  opacity-6"></span>
+    <div class="container">
-    </div>
+        <div class="col-md-6 col-md-offset-3" id="two-factor-steps">
-    <div class="card mx-3 mx-md-4 mt-n6 h-100 z-index-0 fadeIn3 fadeInBottom "  >
+            <div class="row" align="center">
-                <div class="card-body">
+                <h4>Adding Security Key</h4>
                    <br/>
                    <br/>
                    <div class="container">
                        <div id="two-factor-steps">
                            <div id="res"></div>
                            <div class="row" align="center">
                                <h4>Adding {{ method.name}}</h4>
                            </div>
                            <div class="row" align="center">
                                <p style="color: green">Your secure Key should be flashing now, please press on button.</p>
                            </div>
                        </div>
                    </div>
            </div>
    <div class="row">
    <p style="color: green">Your secure Key should be flashing now, please press on button.</p>
-</div>
+    </div>
        </div>
    </div>
    {% include "modal.html" %}
 {% endblock %}
--- a/mfa/templates/U2F/recheck.html
+++ b/mfa/templates/U2F/recheck.html
@@ -1,39 +1,39 @@
 {% load static %}
-<    <div class="col-lg-8 col-md-8 col-12 mx-auto">
+<div class="row">
-    <div class="page-header min-height-300 border-radius-xl mt-4" style="background-repeat: no-repeat; background-position: cover; background-size:contain; background-image: url('{% static 'img/keys.jpg'%}');">
+
-      <span class="mask  bg-gradient-primary  opacity-6"></span>
+<div class="col-sm-10 col-sm-offset-1 col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-    </div>
+<div class="panel panel-default">
-    <div class="card mx-3 mx-md-4 mt-n6 h-100 z-index-0 fadeIn3 fadeInBottom "  >
+      <div class="panel-heading">
-        <div class="card-header pb-0 p-3">
+	      <strong> Security Key</strong>
-            <h6 class="mb-0">Verify your identity using {{ method.name }}</h6>
+      </div>
      <div class="panel-body">
              <div class="row">
            <div style="padding-left: 15px" class="col-md-10 col-md-offset-1" id="main_paragraph" align="center">
                <p style="color: green">Your key should be flashing now, please press the button.</p>
                {% if mode == "auth" %}
                    <form id="u2f_login" action="{% url 'u2f_verify' %}" method="post">
                {% elif mode == "recheck" %}
                    <form id="u2f_login" action="{% url 'u2f_recheck' %}" method="post">
                {% endif %}
              {% csrf_token %}
              <input type="hidden" name="response" id="response" value=""/>
          </form>
      </div>
                  </div>
          </div>
        <div class="card-body">
-            <div class="row">
+          <div class="row">
-                <div id="main_paragraph" align="center">
+          <div style="padding-left: 15px">
                    <p style="color: green">Your key should be flashing now, please press the button.</p>
                    {% if mode == "auth" %}
                        <form id="u2f_login" action="{% url 'u2f_verify' %}" method="post">
                    {% elif mode == "recheck" %}
                        <form id="u2f_login" action="{% url 'u2f_recheck' %}" method="post">
                    {% endif %}
                    {% csrf_token %}
                        <input type="hidden" name="response" id="response" value=""/>
                        </form>
                </div>
            </div>
            <div class="row">
                    {% if request.session.mfa_methods|length > 1 %}
                        <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>
                    {% endif %}
            </div>
            {% if request.session.mfa_methods|length > 1 %}
                <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>
            {% endif %}
          </div>
        </div>
      </div>
 </div>
 </div>
 </div>
    <script src="{% static 'mfa/js/u2f-api.js' %}" type="text/javascript"></script>
@@ -95,4 +95,4 @@
        })
-    </script>
+    </script>
--- a/mfa/templates/mfa_base.html
+++ b/mfa/templates/mfa_base.html
@@ -1,7 +0,0 @@
 {% extends 'base.html' %}
 {% block head %}
 {{ block.super }}
 {% endblock %}
 {% block content %}
 {{ block.super }}
 {% endblock %}
--- a/mfa/templates/mfa_check.html
+++ b/mfa/templates/mfa_check.html
@@ -24,7 +24,7 @@
                {
                    $("#modal-title").html("Recheck Indentity")
                    $("#modal-body").html(data["html"])
-                    $("#popUpModal").modal('show')
+                    $("#popUpModal").modal()
                }
--- a/mfa/templates/modal.html
+++ b/mfa/templates/modal.html
@@ -2,15 +2,15 @@
  <div class="modal-dialog" style="height: 80%;width: 80%;">
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="modal-title"></h4>
          <button type="button" class="close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body" id="modal-body" >
          </div>
      <div class="modal-footer" id="modal-footer">
-        <button type="button" class="btn btn-default btn-secondary" id='btnModalClose' data-dismiss="modal" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-default" id='btnModalClose' data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
--- a/mfa/templates/select_mfa_method.html
+++ b/mfa/templates/select_mfa_method.html
@@ -1,31 +1,29 @@
 {% extends "mfa_auth_base.html" %}
 {% block content %}
    <br/>
 <br/>
 <div class="row">
-<div class="container-fluid px-2 px-md-4 mt-6">
+<div class="col-sm-10 col-sm-offset-1 col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-  <div class="page-header min-height-300 border-radius-xl mt-4" style="background-repeat: no-repeat; background-position: cover; background-size:contain; background-image: url('{% static 'img/keys.jpg'%}');">
+<div class="panel panel-default">
-    <span class="mask  bg-gradient-primary  opacity-6"></span>
+      <div class="panel-heading">
-  </div>
+	      <strong> Select Second Verification Method</strong>
-              <div class="card mx-3 mx-md-4 mt-n6 h-100"  >
+      </div>
-                <div class="card-header pb-0 p-3">
+      <div class="panel-body">
-                    <h6 class="mb-0">Select Second Verification Method</h6>
+          <ul>
-                </div>
+              {% for method in request.session.mfa_methods %}
-                <div class="card-body p-3">
+
-                    <div class="panel-body card-body">
+              <li><a href="{% url "mfa_goto" method %}">
-                        <ul>
+                  {% if method == "TOTP" %}Authenticator App
-                            {% for method in request.session.mfa_methods %}
+                  {% elif method == "Email" %}Send OTP by Email
-              
+                  {% elif method == "U2F" %}Secure Key
-                            <li  style="list-style-type: none;"><a class="btn btn-sm btn-outline-primary" href="{% url 'mfa_goto' method %}" >
+                  {% elif method == "FIDO2" %}FIDO2 Secure Key
-                                {% if method == "TOTP" %}{% if 'TOTP' in RENAME_METHODS %}{{ RENAME_METHODS.TOTP }}{% else %}Authenticator App{% endif %}
+                  {% endif %}
-                                {% elif method == "Email" %}{% if 'Email' in RENAME_METHODS %}{{ RENAME_METHODS.Email }}{% else %}Send OTP by Email{% endif %}
+              </a> </li>
-                                {% elif method == "U2F" %}{% if 'U2F' in RENAME_METHODS %}{{ RENAME_METHODS.U2F }}{% else %}Secure Key{% endif %}
+              {% endfor %}
-                                {% elif method == "FIDO2" %}{% if 'FIDO2' in RENAME_METHODS %}{{ RENAME_METHODS.FIDO2 }}{% else %}FIDO2 Secure Key{% endif %}
+          </ul>
-                                {% elif method == "RECOVERY" %}{% if 'RECOVERY' in RENAME_METHODS %}{{ RENAME_METHODS.RECOVERY }}{% else %}Recovery Code{% endif %}
+      </div>
                                {% endif %}
                            </a> </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
 </div>
-{% endblock %}
+</div>
 </div>
 {% endblock %}
--- a/mfa/totp.py
+++ b/mfa/totp.py
@@ -1,18 +1,16 @@
 from django.shortcuts import render
 from django.views.decorators.cache import never_cache
 from django.http import HttpResponse
 from .Common import get_redirect_url
 from .models import *
 from django.template.context_processors import csrf
 import simplejson
 from django.template.context import RequestContext
 from django.conf import settings
 import pyotp
 from .views import login
 import datetime
 from django.utils import timezone
 import random
 def verify_login(request,username,token):
    for key in User_Keys.objects.filter(username=username,key_type = "TOTP"):
        totp = pyotp.TOTP(key.properties["secret_key"])
@@ -26,7 +24,7 @@ def recheck(request):
    context = csrf(request)
    context["mode"]="recheck"
    if request.method == "POST":
-        if verify_login(request,request.user.username, token=request.POST["otp"])[0]:
+        if verify_login(request,request.user.username, token=request.POST["otp"]):
            import time
            request.session["mfa"]["rechecked_at"] = time.time()
            return HttpResponse(simplejson.dumps({"recheck": True}), content_type="application/json")
@@ -38,18 +36,15 @@ def recheck(request):
 def auth(request):
    context=csrf(request)
    if request.method=="POST":
-        tokenLength = len(request.POST["otp"])
+        res=verify_login(request,request.session["base_username"],token = request.POST["otp"])
-        if tokenLength == 6:
+        if res[0]:
-            #TOTO code check
+            mfa = {"verified": True, "method": "TOTP","id":res[1]}
-            res=verify_login(request,request.session["base_username"],token = request.POST["otp"])
+            if getattr(settings, "MFA_RECHECK", False):
-            if res[0]:
+                mfa["next_check"] = datetime.datetime.timestamp((datetime.datetime.now()
-                mfa = {"verified": True, "method": "TOTP","id":res[1]}
+                                         + datetime.timedelta(
-                if getattr(settings, "MFA_RECHECK", False):
+                            seconds=random.randint(settings.MFA_RECHECK_MIN, settings.MFA_RECHECK_MAX))))
-                    mfa["next_check"] = datetime.datetime.timestamp((datetime.datetime.now()
+            request.session["mfa"] = mfa
-                                            + datetime.timedelta(
+            return login(request)
                                seconds=random.randint(settings.MFA_RECHECK_MIN, settings.MFA_RECHECK_MAX))))
                request.session["mfa"] = mfa
                return login(request)
        context["invalid"]=True
    return render(request,"TOTP/Auth.html", context)
@@ -72,19 +67,10 @@ def verify(request):
        #uk.name="Authenticatior #%s"%User_Keys.objects.filter(username=user.username,type="TOTP")
        uk.key_type="TOTP"
        uk.save()
-        if getattr(settings, 'MFA_ENFORCE_RECOVERY_METHOD', False) and not User_Keys.objects.filter(key_type="RECOVERY",
+        return HttpResponse("Success")
                                                                                                    username=request.user.username).exists():
            request.session["mfa_reg"] = {"method": "TOTP",
                                          "name": getattr(settings, "MFA_RENAME_METHODS", {}).get("TOTP", "TOTP")}
            return HttpResponse("RECOVERY")
        else:
            return HttpResponse("Success")
    else: return HttpResponse("Error")
@never_cache
 def start(request):
    """Start Adding Time One Time Password (TOTP)"""
-    context = get_redirect_url()
+    return render(request,"TOTP/Add.html",get_redirect_url())
    context["RECOVERY_METHOD"] = getattr(settings, "MFA_RENAME_METHODS", {}).get("RECOVERY", "Recovery codes")
    context["method"] = {"name":getattr(settings,"MFA_RENAME_METHODS",{}).get("TOTP","Authenticator")}
    return render(request,"TOTP/Add.html",context)
--- a/mfa/urls.py
+++ b/mfa/urls.py
@@ -1,4 +1,4 @@
-from . import views,totp,U2F,TrustedDevice,helpers,FIDO2,Email,recovery
+from . import views,totp,U2F,TrustedDevice,helpers,FIDO2,Email
 #app_name='mfa'
 try:
@@ -12,12 +12,6 @@ urlpatterns = [
    url(r'totp/auth', totp.auth, name="totp_auth"),
    url(r'totp/recheck', totp.recheck, name="totp_recheck"),
    url(r'recovery/start', recovery.start, name="manage_recovery_codes"),
    url(r'recovery/getTokenLeft', recovery.getTokenLeft, name="get_recovery_token_left"),
    url(r'recovery/genTokens', recovery.genTokens, name="regen_recovery_tokens"),
    url(r'recovery/auth', recovery.auth, name="recovery_auth"),
    url(r'recovery/recheck', recovery.recheck, name="recovery_recheck"),
    url(r'email/start/', Email.start , name="start_email"),
    url(r'email/auth/', Email.auth , name="email_auth"),
--- a/mfa/views.py
+++ b/mfa/views.py
@@ -1,5 +1,3 @@
 import importlib
 from django.shortcuts import render
 from django.http import HttpResponse,HttpResponseRedirect
 from .models import *
@@ -18,16 +16,12 @@ from user_agents import parse
 def index(request):
    keys=[]
    context={"keys":User_Keys.objects.filter(username=request.user.username),"UNALLOWED_AUTHEN_METHODS":settings.MFA_UNALLOWED_METHODS
-             ,"HIDE_DISABLE":getattr(settings,"MFA_HIDE_DISABLE",[]),'RENAME_METHODS':getattr(settings,'MFA_RENAME_METHODS',{})}
+             ,"HIDE_DISABLE":getattr(settings,"MFA_HIDE_DISABLE",[])}
    for k in context["keys"]:
-        k.name = getattr(settings,'MFA_RENAME_METHODS',{}).get(k.key_type,k.key_type)
+        if k.key_type =="Trusted Device" :
        if k.key_type =="Trusted Device":
            setattr(k,"device",parse(k.properties.get("user_agent","-----")))
        elif k.key_type == "FIDO2":
            setattr(k,"device",k.properties.get("type","----"))
        elif k.key_type == "RECOVERY":
            context["recovery"] = k
            continue
        keys.append(k)
    context["keys"]=keys
    return render(request,"MFA.html",context)
@@ -43,23 +37,17 @@ def verify(request,username):
            return login(request)
        methods.remove("Trusted Device")
    request.session["mfa_methods"] = methods
    if len(methods)==1:
        return HttpResponseRedirect(reverse(methods[0].lower()+"_auth"))
    if getattr(settings,"MFA_ALWAYS_GO_TO_LAST_METHOD",False):
        keys = keys.exclude(last_used__isnull=True).order_by("last_used")
        if keys.count()>0:
            return HttpResponseRedirect(reverse(keys[0].key_type.lower() + "_auth"))
    return show_methods(request)
 def show_methods(request):
-    return render(request,"select_mfa_method.html", {'RENAME_METHODS':getattr(settings,'MFA_RENAME_METHODS',{})})
+    return render(request,"select_mfa_method.html", {})
 def reset_cookie(request):
    response=HttpResponseRedirect(settings.LOGIN_URL)
    response.delete_cookie("base_username")
    return response
 def login(request):
    from django.contrib import auth
    from django.conf import settings
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,4 +1,4 @@
-django >= 2.2
+django >= 2.0
 jsonfield
 simplejson
 pyotp
@@ -6,5 +6,5 @@ python-u2flib-server
 ua-parser
 user-agents
 python-jose
-fido2 == 1.0.0
+fido2 == 0.9.1
 jsonLookup
--- a/setup.py
+++ b/setup.py
@@ -4,7 +4,7 @@ from setuptools import find_packages, setup
 setup(
    name='django-mfa2',
-    version='2.8.0',
+    version='2.2.0b2    ',
    description='Allows user to add 2FA to their accounts',
    long_description=open("README.md").read(),
    long_description_content_type="text/markdown",
@@ -17,30 +17,26 @@ setup(
    packages=find_packages(),
    install_requires=[
        'django >= 2.0',
        'jsonfield',
        'simplejson',
        'pyotp',
        'python-u2flib-server',
        'ua-parser',
        'user-agents',
        'python-jose',
-        'fido2 == 1.0.0',
+        'fido2 == 0.9.1',
        'jsonLookup'
      ],
    python_requires=">=3.5",
    include_package_data=True,
    zip_safe=False, # because we're including static files
    classifiers=[
-        "Development Status :: 5 - Production/Stable",
+        "Development Status :: 4 - Beta",
        #"Development Status :: 4 - Beta",
        "Environment :: Web Environment",
        "Framework :: Django",
        "Framework :: Django :: 2.0",
        "Framework :: Django :: 2.1",
        "Framework :: Django :: 2.2",
        "Framework :: Django :: 3.0",
        "Framework :: Django :: 3.1",
        "Framework :: Django :: 3.2",
        "Framework :: Django :: 4.0",
        "Framework :: Django :: 4.1",
        "Intended Audience :: Developers",
        "Operating System :: OS Independent",
        "Programming Language :: Python",
@@ -49,9 +45,6 @@ setup(
        "Programming Language :: Python :: 3.6",
        "Programming Language :: Python :: 3.7",
        "Programming Language :: Python :: 3.8",
        "Programming Language :: Python :: 3.9",
        "Programming Language :: Python :: 3.10",
        "Programming Language :: Python :: 3.11",
        "Topic :: Software Development :: Libraries :: Python Modules",
 ]
 )
		`@@ -1 +0,0 @@`
			{"version":3,"file":"bootstrap-toggle.min.js","sources":["bootstrap-toggle.js"],"names":["$","Plugin","option","this","each","$this","data","options","Toggle","element","$element","extend","defaults","render","VERSION","DEFAULTS","on","off","onstyle","offstyle","size","style","width","height","prototype","attr","_onstyle","_offstyle","$toggleOn","html","addClass","$toggleOff","$toggleHandle","$toggleGroup","append","$toggle","prop","wrap","parent","Math","max","outerWidth","outerHeight","css","update","trigger","toggle","silent","removeClass","enable","removeAttr","disable","change","proxy","destroy","remove","removeData","unwrap","old","fn","bootstrapToggle","Constructor","noConflict","document","e","$checkbox","find","preventDefault","jQuery"],"mappings":"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"}