Update mfa/helpers.py

2024-02-14 16:23:53 +00:00 · 2024-02-14 16:16:53 +00:00 · 2024-02-05 11:35:27 +00:00 · 2024-02-05 10:49:54 +00:00 · 2024-02-02 16:08:06 +00:00 · 2024-02-02 16:01:51 +00:00
30 changed files with 670 additions and 698 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,12 @@
 # Change Log
+## 2.8.0
+* Support For Django 4.0+ JSONField
+* Removed jsonfield package from requirements
+
+## 2.7.0 
+* Fixed #70
+* 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)'
--- a/README.md
+++ b/README.md
@@ -22,7 +22,9 @@ For FIDO2, the following are supported
 * **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.
+    * ~~[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.

@@ -32,6 +34,8 @@ 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,8 +47,12 @@ Depends on

 # Installation
 1. using pip 
-
-    `pip install django-mfa2`
+    * For Django >= 4.0
+       
+        `pip install django-mfa2`
+    * For Django < 4.0
+           
+      `pip install django-mfa2 jsonfield`
 2. Using Conda forge 
   
   `conda config --add channels conda-forge`
@@ -90,10 +98,6 @@ Depends on
   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_NAME=u"PROJECT_NAME"
-   MFA_FIDO2_RESIDENT_KEY = mfa.ResidentKey.DISCOURAGED  # Resident Key allows a special User Handle
-   MFA_FIDO2_AUTHENTICATOR_ATTACHMENT = None  # Let the user choose
-   MFA_FIDO2_USER_VERIFICATION = None         # Verify User Presence
-   MFA_FIDO2_ATTESTATION_PREFERENCE = mfa.AttestationPreference.NONE
   ```
   **Method Names**
   * U2F
@@ -108,10 +112,8 @@ Depends on
    * Starting version 1.7.0, Key owners can be specified.
    * Starting version 2.2.0
        * Added: `MFA_SUCCESS_REGISTRATION_MSG` & `MFA_REDIRECT_AFTER_REGISTRATION`
-    * Starting version 2.6.0
+    Start version 2.6.0
        * Added: `MFA_ALWAYS_GO_TO_LAST_METHOD`, `MFA_RENAME_METHODS`, `MFA_ENFORCE_RECOVERY_METHOD` & `RECOVERY_ITERATION`
-    * Starting version 2.7.0
-        * Added: `MFA_FIDO2_RESIDENT_KEY`, `MFA_FIDO2_AUTHENTICATOR_ATTACHMENT`, `MFA_FIDO2_USER_VERIFICATION`, `MFA_FIDO2_ATTESTATION_PREFERENCE`
 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
--- a/example/example/settings.py
+++ b/example/example/settings.py
@@ -13,8 +13,6 @@ https://docs.djangoproject.com/en/2.0/ref/settings/
 import os
 from django.conf.global_settings import PASSWORD_HASHERS as DEFAULT_PASSWORD_HASHERS

-import mfa
-
 # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

@@ -147,10 +145,6 @@ 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_FIDO2_RESIDENT_KEY = mfa.ResidentKey.REQUIRED  # Resident Key allows a special User Handle
-MFA_FIDO2_AUTHENTICATOR_ATTACHMENT = None  # Let the user choose
-MFA_FIDO2_USER_VERIFICATION = None         # Verify User Presence
-MFA_FIDO2_ATTESTATION_PREFERENCE = mfa.AttestationPreference.NONE
 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']
--- a/example/example/templates/login.html
+++ b/example/example/templates/login.html
@@ -44,9 +44,7 @@
            </div>
          </div>

-          <button class="btn btn-primary btn-block" type="submit">Login</button><br/>
-
-            <button class="btn btn-primary btn-block" type="button" onclick="authen()">Login By Security Key</button>
+          <button class="btn btn-primary btn-block" type="submit">Login</button>
        </form>
      </div>
    </div>
@@ -58,7 +56,7 @@

  <!-- Core plugin JavaScript-->
  <script src="{% static 'vendor/jquery-easing/jquery.easing.min.js'%}"></script>
-    {% include 'FIDO2/Auth_JS.html'%}
+
 </body>

 </html>
--- a/example/example/urls.py
+++ b/example/example/urls.py
@@ -16,12 +16,13 @@ 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/mfa/FIDO2.py
+++ b/mfa/FIDO2.py
@@ -28,25 +28,18 @@ def recheck(request):

 def getServer():
    """Get Server Info from settings and returns a Fido2Server"""
-    from mfa import AttestationPreference
    rp = PublicKeyCredentialRpEntity(id=settings.FIDO_SERVER_ID, name=settings.FIDO_SERVER_NAME)
-    attestation= getattr(settings,'MFA_FIDO2_ATTESTATION_PREFERENCE', AttestationPreference.NONE )
-    return Fido2Server(rp,attestation=attestation)
+    return Fido2Server(rp)


 def begin_registeration(request):
    """Starts registering a new FIDO Device, called from API"""
    server = getServer()
-    from mfa import ResidentKey
-    resident_key = getattr(settings,'MFA_FIDO2_RESIDENT_KEY', ResidentKey.DISCOURAGED)
-    auth_attachment = getattr(settings,'MFA_FIDO2_AUTHENTICATOR_ATTACHMENT', None)
-    user_verification = getattr(settings,'MFA_FIDO2_USER_VERIFICATION', None)
    registration_data, state = server.register_begin({
        u'id': request.user.username.encode("utf8"),
        u'name': (request.user.first_name + " " + request.user.last_name),
        u'displayName': request.user.username,
-    }, getUserCredentials(request.user.username),user_verification = user_verification,
-        resident_key_requirement = resident_key, authenticator_attachment = auth_attachment)
+    }, getUserCredentials(request.user.username))
    request.session['fido_state'] = state

    return HttpResponse(cbor.encode(registration_data), content_type = 'application/octet-stream')
@@ -74,8 +67,6 @@ def complete_reg(request):
        uk.properties = {"device": encoded, "type": att_obj.fmt, }
        uk.owned_by_enterprise = getattr(settings, "MFA_OWNED_BY_ENTERPRISE", False)
        uk.key_type = "FIDO2"
-        if auth_data.credential_data.credential_id:
-            uk.user_handle = auth_data.credential_data.credential_id
        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":"FIDO2","name": getattr(settings, "MFA_RENAME_METHODS", {}).get("FIDO2", "FIDO2")}
@@ -116,14 +107,7 @@ def auth(request):

 def authenticate_begin(request):
    server = getServer()
-    credentials=[]
-    username = None
-    if "base_username" in request.session:
-        username = request.session["base_username"]
-    if request.user.is_authenticated:
-        username = request.user.username
-    if username:
-        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)
    request.session['fido_state'] = state
    return HttpResponse(cbor.encode(auth_data), content_type = "application/octet-stream")
@@ -133,22 +117,11 @@ def authenticate_begin(request):
 def authenticate_complete(request):
    try:
        credentials = []
-        username = None
-        keys = None
-        if "base_username" in request.session:
-            username = request.session["base_username"]
-        if request.user.is_authenticated:
-            username = request.user.username
+        username = request.session.get("base_username", request.user.username)
        server = getServer()
+        credentials = getUserCredentials(username)
        data = cbor.decode(request.body)
        credential_id = data['credentialId']
-        if credential_id and username is None:
-            keys = User_Keys.objects.filter(user_handle = credential_id)
-            if keys.exists():
-                credentials=[AttestedCredentialData(websafe_decode(keys[0].properties["device"]))]
-        else:
-            credentials = getUserCredentials(username)
-
        client_data = CollectedClientData(data['clientDataJSON'])
        auth_data = AuthenticatorData(data['authenticatorData'])
        signature = data['signature']
@@ -182,8 +155,7 @@ def authenticate_complete(request):
                                content_type = "application/json")
        else:
            import random
-            if keys is None:
-                keys = User_Keys.objects.filter(username = username, key_type = "FIDO2", enabled = 1)
+            keys = User_Keys.objects.filter(username = username, key_type = "FIDO2", enabled = 1)
            for k in keys:
                if AttestedCredentialData(websafe_decode(k.properties["device"])).credential_id == cred.credential_id:
                    k.last_used = timezone.now()
@@ -198,7 +170,7 @@ def authenticate_complete(request):
                    except:
                        authenticated = request.user.is_authenticated()
                    if not authenticated:
-                        res = login(request,k.username)
+                        res = login(request)
                        if not "location" in res: return reset_cookie(request)
                        return HttpResponse(simplejson.dumps({'status': "OK", "redirect": res["location"]}),
                                            content_type = "application/json")
--- a/mfa/TrustedDevice.py
+++ b/mfa/TrustedDevice.py
@@ -7,10 +7,11 @@ 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__shas="$.key="+x).exists(): return x
+    if not User_Keys.objects.filter(properties__icontains='"key": "%s"'%x).exists(): return x
    else: return id_generator(size,chars)

 def getUserAgent(request):
@@ -57,12 +58,13 @@ 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__has="$.key="+key)
+        trusted_keys=User_Keys.objects.filter(username=request.POST["username"],properties__icontains='"key": "%s"'%key)
        cookie=False
        if trusted_keys.exists():
            tk=trusted_keys[0]
@@ -97,7 +99,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"]}
+        context={"key":td.properties["key"],"url":request.scheme+"://"+request.get_host() + reverse('add_trusted_device')}
    except:
        del request.session["td_id"]
        return start(request)
@@ -124,12 +126,14 @@ 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__has="$.key=" + json["key"])
+                uk = User_Keys.objects.get(username=request.POST["username"].lower(), properties__icontains='"key": "%s"'%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/init.py
+++ b/mfa/init.py
@@ -1,5 +1 @@
-__version__="2.7.1"
-from fido2.webauthn import ResidentKeyRequirement as ResidentKey
-from fido2.webauthn import AuthenticatorAttachment as Attachment
-from fido2.webauthn import UserVerificationRequirement as UserVerification
-from fido2.webauthn import AttestationConveyancePreference as AttestationPreference
+__version__="2.2.0"
--- a/mfa/helpers.py
+++ b/mfa/helpers.py
@@ -4,8 +4,14 @@ 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):
-    if User_Keys.objects.filter(username=username,enabled=1).count()>0:
+    uk = User_Keys.objects.filter(username=username,enabled=1)
+    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,7 +2,14 @@
 from __future__ import unicode_literals

 from django.db import models, migrations
-import jsonfield.fields
+try:
+    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):
@@ -24,7 +31,7 @@ class Migration(migrations.Migration):
        migrations.AddField(
            model_name='user_keys',
            name='properties',
-            field=jsonfield.fields.JSONField(null=True),
+            field=JSONField(null=True),
        ),
        migrations.RunPython(modify_json)
    ]
--- a/mfa/migrations/0012_user_keys_userhandle.py
+++ b/mfa/migrations/0012_user_keys_userhandle.py
@@ -1,17 +0,0 @@
-# Generated by Django 2.2 on 2022-10-16 14:15
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('mfa', '0011_auto_20210530_0622'),
-    ]
-    operations = [
-        migrations.AddField(
-            model_name='user_keys',
-            name='user_handle',
-            field=models.CharField(blank=True, default=None, max_length=255, null=True),
-        ),
-    ]
--- a/mfa/models.py
+++ b/mfa/models.py
@@ -1,5 +1,12 @@
 from django.db import models
-from jsonfield import JSONField
+try:
+    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
@@ -16,7 +23,6 @@ class User_Keys(models.Model):
    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)
-    user_handle = models.CharField(default = None, null = True, blank = True, max_length = 255)

    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/static/mfa/js/bootstrap-toggle.min.js.map
+++ b/mfa/static/mfa/js/bootstrap-toggle.min.js.map
@@ -0,0 +1 @@
+{"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/FIDO2/Add.html
+++ b/mfa/templates/FIDO2/Add.html
@@ -12,7 +12,7 @@
      }
      throw new Error('Error getting registration data!');
    }).then(CBOR.decode).then(function(options) {
-        //options.publicKey.attestation="direct"
+        options.publicKey.attestation="direct"
        console.log(options)

      return navigator.credentials.create(options);
@@ -61,21 +61,24 @@

 {% endblock %}
 {% block content %}
-      <br/>
-    <br/>
-     <div class="container">
-     <div class="panel panel-default card">
-      <div class="panel-heading card-header">
-	      <strong> Adding a New {{ method.name }}</strong>
-      </div>
-      <div class="panel-body 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 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> 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 %}
--- a/mfa/templates/FIDO2/Auth_JS.html
+++ b/mfa/templates/FIDO2/Auth_JS.html
@@ -1,71 +0,0 @@
-{% 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" or mode == None %}
-          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/FIDO2/recheck.html
+++ b/mfa/templates/FIDO2/recheck.html
@@ -1,48 +1,111 @@
 {%  load static %}
-<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 offset-2 col-8">
-<div class="panel panel-default card">
-      <div class="panel-heading card-header">
-	      <strong> Security Key</strong>
-      </div>
-      <div class="panel-body card-body">
-
-              <div class="row">
-            <div style="padding-left: 15px" class="col-md-10 col-md-offset-1" id="main_paragraph" align="center">
-                {% 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 %}
-              {% csrf_token %}
-              <input type="hidden" name="response" id="response" value=""/>
-          </form>
-      </div>
-                  </div>
+<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="col-md-12 mb-3" style="padding-left: 25px">
-
-            {% if request.session.mfa_methods|length > 1 %}
-               <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>
-            {% endif %}
+            <div class="row">
+                <div style="padding-left: 15px" class="col-md-10 col-md-offset-1" id="main_paragraph" align="center">
+                    {% 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 %}
+                            {% 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>
          </div>
        </div>
-      </div>
-</div>
-</div>
 </div>

-    {% include 'FIDO2/Auth_JS.html' %}
+    <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 {
+            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
@@ -40,86 +40,92 @@
    <script src="{% static 'mfa/js/bootstrap-toggle.min.js'%}"></script>
 {% endblock %}
 {% block content %}
-{{block.super}}
-    <br/>
-    <br/>
-    <div class="container">
-    <div class="row">
-        <div class="offset-5 col-2" style="text-align: center">
-            <div class="btn-group">
-            <button class="btn btn-success dropdown-toggle" data-toggle="dropdown" data-bs-toggle="dropdown">
-                Add Method&nbsp;<span class="caret"></span>
-            </button>
-            <ul class="dropdown-menu">
-                {% if not 'TOTP' in UNALLOWED_AUTHEN_METHODS %}
-                    <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 %}
-                {% if not 'Email' in UNALLOWED_AUTHEN_METHODS %}
-                    <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 %}
-                {% if not 'U2F' in UNALLOWED_AUTHEN_METHODS %}
-                    <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 %}
-                {% if not 'FIDO2' in UNALLOWED_AUTHEN_METHODS %}
-                    <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 %}
-                {% 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 class="col-lg-10 col-md-10 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-body">
+                        <div class="" style="text-align: center">
+                            <div class="btn-group">
+                            <button class="btn btn-success dropdown-toggle" data-toggle="dropdown" data-bs-toggle="dropdown">
+                                Add Method&nbsp;<span class="caret"></span>
+                            </button>
+                            <ul class="dropdown-menu">
+                                {% if not 'TOTP' in UNALLOWED_AUTHEN_METHODS %}
+                                    <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 %}
+                                {% if not 'Email' in UNALLOWED_AUTHEN_METHODS %}
+                                    <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 %}
+                                {% if not 'U2F' in UNALLOWED_AUTHEN_METHODS %}
+                                    <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 %}
+                                {% if not 'FIDO2' in UNALLOWED_AUTHEN_METHODS %}
+                                    <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 %}
+                                {% 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>
-    </div>
-    <br/>
-       <table class="table 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>
+</div>

-                <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>
-    {% include "modal.html" %}
+{% include "modal.html" %}
 {% endblock %}
--- a/mfa/templates/RECOVERY/Add.html
+++ b/mfa/templates/RECOVERY/Add.html
@@ -1,4 +1,3 @@
-
 {% extends "base.html" %}
 {% load static %}
 {% block head %}
@@ -98,37 +97,27 @@
    </script>
 {% endblock %}
 {% block content %}
-<br/>
-<br/>
-<div class="container d-flex justify-content-center">
-    <div class="col-md-6 col-md-offset-3" id="two-factor-steps">
-        
-        <div class="row">
-            
-            <h4>Recovery Codes List</h4>
-        
-        </div>
-            
-        <div class="tokenrow" id="tokens">
-        
-        </div>
-         <br/>
-            <br/>
-        <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 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/recheck.html
+++ b/mfa/templates/RECOVERY/recheck.html
@@ -22,64 +22,55 @@
        })
    }
 </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-10 col-lg-offset-1">
-<div class="panel panel-default card">
-      <div class="panel-heading card-header">
-	      <strong> Recovery code</strong>
-      </div>
-      <div class="panel-body 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 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>
-          {% endif %}
-      {% if quota %}
-          <div class="alert alert-warning">
-              {{ quota }}
-          </div>
-      {% endif %}
-      <fieldset>
-      <div class="row">
-      <div class="col-sm-12 col-md-12">
-        <p>Enter the 11-digits on your authenticator. Or input a recovery code</p>
-      </div>
-      </div>
-
-      <div class="row">
-	  <div class="col-sm-12 col-md-12">
-	    <div class="form-group">
-	      <div class="input-group 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>
-
-          <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>
-      </fieldset>
-      </FORM>
-      </div>
-        <div class="row">
-        <div class="col-md-12 mb-3" style="padding-left: 25px">
-            {% if request.session.mfa_methods|length > 1 %}
-                <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>
-            {% endif %}
+        <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>
-	      </div>
-              </div>
-</div>
 </div>
 {% include "modal.html" %}
--- a/mfa/templates/TOTP/Add.html
+++ b/mfa/templates/TOTP/Add.html
@@ -1,13 +1,8 @@
-
 {% extends "base.html" %}
 {% load static %}
 {% block head %}
 <style>
-    #two-factor-steps {
-	border: 1px solid #ccc;
-	border-radius: 3px;
-	padding: 15px;
-    }
+
    .row{
        margin: 0px;
    }
@@ -87,47 +82,59 @@
 {% block content %}
 <br/>
 <br/>
-<div class="container d-flex justify-content-center">
-    <div class="col-md-6 col-md-offset-3" id="two-factor-steps">
-        <div class="row" align="center">
-            <h4>Adding a new {{ method.name }}</h4>
-        </div>
-        <div class="row">
+<div class="container-fluid px-2 px-md-4">
+  <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>
+  

-            <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">
+            <div class="card mx-3 mx-md-4 mt-n6 h-100" id="two-factor-steps" >
+                <div class="card-header pb-0 p-3">
+                    <h6 class="mb-0">Adding a new {{ method.name }}</h6>
+                </div>
+                <div class="card-body p-3">
+                    <div class="row">

-                <img id="qr"/>
-
-            </div>
-        </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">
-                <div class="offset-md-4 col-md-4">
-                <input style="display: inline;width: 95%" maxlength="6" size="6" class="form-control" id="answer" placeholder="e.g 785481"/>
+                        <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 class="row" style="padding-top: 10px;">
-                <div class="col-md-4 offset-md-4" style="padding-left: 0px">
-                    <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>
 {% include "modal.html" %}
 {% 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,77 +1,64 @@
-<script type="application/javascript">
-    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();
-                            }
-                        }
-        })
-    }
-</script>
-<div class='container'>
-<div class="row">
+{% extends "mfa_auth_base.html" %}
+{% load static %}

-<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-heading card-header">
-	      <strong> One Time Password</strong>
-      </div>
-      <div class="panel-body card-body">
-
-      <FORM METHOD="POST" ACTION="{% url 'totp_auth' %}" Id="formLogin" onSubmit="" name="FrontPage_Form1">
+{% block content %}


-      {% csrf_token %}
-          {%  if invalid %}
-          <div class="alert alert-danger">
-              Sorry, The provided token is not valid.
-          </div>
-          {% endif %}
-      {% if quota %}
-          <div class="alert alert-warning">
-              {{ quota }}
-          </div>
-      {% endif %}
-      <fieldset>
-      <div class="row">
-      <div class="col-sm-12 col-md-12">
-        <p>Enter the 6-digits on your authenticator</p>
-      </div>
-      </div>
+    <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">One Time Password</h6>
+                </div>
+                <div class="card-body">
+                    <form METHOD="POST" ACTION="{% url 'totp_auth' %}" Id="formLogin" onSubmit="" name="FrontPage_Form1">
+                        {% csrf_token %}
+                            {%  if invalid %}
+                            <div class="alert alert-danger">
+                                Sorry, The provided token is not valid.
+                            </div>
+                            {% endif %}
+                        {% if quota %}
+                            <div class="alert alert-warning">
+                                {{ quota }}
+                            </div>
+                        {% endif %}
+                        <fieldset>

-      <div class="row">
-	  <div class="col-sm-12 col-md-12">
-	    <div class="form-group">
-	      <div class="input-group 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 class=" text-left">
+                              <p>Enter the 6-digits on your authenticator</p>
+                            </div>

-	      </div>
-	    </div>

-          <div class="form-group d-grid gap-2">
+                                  <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">	      </div>
-      </div>
-      </fieldset>
-      </FORM>
-      </div>
-        <div class="row">
-        <div class="col-md-12 mb-3" style="padding-left: 25px">
-            {% if request.session.mfa_methods|length > 1 %}
-                <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>
-            {% endif %}
-        </div>
-        </div>
-	      </div>
-              </div>
-	      </div>
-	      </div>
+
+                        </fieldset>
+                    </form>
+                    
+
+                    <div class="">
+                        {% if request.session.mfa_methods|length > 1 %}
+                            <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>
+                        {% endif %}
+                    </div>
+
+                </div>
+    </div>
 </div>
-{% include "modal.html" %}
+
+{% include "modal.html" %}
+{% endblock %}
--- a/mfa/templates/TrustedDevices/Add.html
+++ b/mfa/templates/TrustedDevices/Add.html
@@ -25,101 +25,88 @@
    </script>
 {% endblock %}
 {% block content %}
-    <br/>
-    <br/>
-
-<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-heading card-header">
-	      <strong> Add Trusted Device</strong>
-      </div>
-      <div class="panel-body 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">Please make sure you are not in private (incognito) mode <i class="fal 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 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> Add Trusted Device</strong>
+            </h6>
          </div>
-          {% endif %}
-      {% if quota %}
-          <div class="alert alert-warning">
-              {{ quota }}
-          </div>
-      {% endif %}
-      <fieldset>
-      <div class="row">
-      <div class="col-sm-12 col-md-12">
-      </div>
-      </div>
-      <div class="row">
-	  <div class="col-sm-12 col-md-12">
-	    <div class="form-group">
-	      <div class="input-group mb-3">
-		<span class="input-group-addon input-group-text">
-		<i class="glyphicon glyphicon-user bi bi-person"></i>
-		</span>
-		<input class="form-control" id="username" size="30" MaxLength="30" placeholder="Username" name="username" value="{{ username }}" type="text" autofocus autocomplete="on">
+        <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>
-	    </div>
-	    <div class="form-group">
-		<div class="input-group mb-3">
-		<span class="input-group-addon input-group-text">
-		<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 mb-3">
-            <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 mb-3">
-	      <span class="input-group-addon input-group-text">
-
-
-	      <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 d-grid gap-2">
-	      <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 card-footer">
-
-
-	      </div>
-              </div>
-	      </div>
-	      </div>
-
-
-  {% endblock %}
+                        <div class="row">
+                            <div>
+                                <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-user bi bi-person"></i>
+                                        </span>
+                                        <input class="form-control" id="username" size="30" MaxLength="30" placeholder="Username" name="username" value="{{ username }}" type="text" autofocus autocomplete="on">
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <div class="input-group input-group-static mb-3">
+                                        <span class="input-group-addon input-group-text">
+                                            <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=" form-check ">
+                                        <input class="form-check-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 mb-3">
+                                        <span class="input-group-addon input-group-text">
+                                            <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 d-grid gap-2 mt-2">
+                                    <input type="submit" class="btn btn-lg btn-success btn-block" value="Trust Device">
+                                </div>
+                            </div>
+                        </div>
+                    </fieldset>
+                </form>
+                {% endif %}
+        </div>
+</div>
+    {% include "modal.html" %}
+{% endblock %}
--- a/mfa/templates/TrustedDevices/start.html
+++ b/mfa/templates/TrustedDevices/start.html
@@ -1,5 +1,7 @@
 {% 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;
@@ -12,6 +14,12 @@
    </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....");
@@ -70,33 +78,58 @@
    </script>
 {% endblock %}
 {% block content %}
-      <br/>
-    <br/>
-    <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 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">
+                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" >
-        {%  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>
+            <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>

-        </ol>
-    {% endif %}
-    </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,16 +1,7 @@
 {% 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() {
@@ -43,20 +34,29 @@
    </script>
 {% endblock %}
 {% block content %}
-      <br/>
-    <br/>
-    <div class="container">
+    <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-body">
+                    <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 class="col-md-6 col-md-offset-3" id="two-factor-steps">
-            <div id="res"></div>
-            <div class="row" align="center">
-                <h4>Adding {{ method.name}}</h4>
+                        </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="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-heading card-header">
-	      <strong> Verify your identity using {{ method.name }}</strong>
-      </div>
-      <div class="panel-body card-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 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">Verify your identity using {{ method.name }}</h6>
          </div>
+        <div class="card-body">

-          <div class="row">
-          <div class="col-md-12 mb-3" style="padding-left: 15px">
+            <div class="row">
+                <div 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 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>

--- a/mfa/templates/select_mfa_method.html
+++ b/mfa/templates/select_mfa_method.html
@@ -1,32 +1,31 @@
 {% extends "mfa_auth_base.html" %}
 {% block content %}
-<br/>
-<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 offset-2 col-8">
-<div class="panel panel-default card">
-      <div class="panel-heading card-header">
-	      <strong> Select Second Verification Method</strong>
-      </div>
-      <div class="panel-body card-body">
-          <ul>
-              {% for method in request.session.mfa_methods %}
-
-              <li><a href="{% url "mfa_goto" method %}">
-                  {% if method == "TOTP" %}{% if 'TOTP' in RENAME_METHODS %}{{ RENAME_METHODS.TOTP }}{% else %}Authenticator App{% endif %}
-                  {% elif method == "Email" %}{% if 'Email' in RENAME_METHODS %}{{ RENAME_METHODS.Email }}{% else %}Send OTP by Email{% endif %}
-                  {% elif method == "U2F" %}{% if 'U2F' in RENAME_METHODS %}{{ RENAME_METHODS.U2F }}{% else %}Secure Key{% endif %}
-                  {% elif method == "FIDO2" %}{% if 'FIDO2' in RENAME_METHODS %}{{ RENAME_METHODS.FIDO2 }}{% else %}FIDO2 Secure Key{% endif %}
-                  {% elif method == "RECOVERY" %}{% if 'RECOVERY' in RENAME_METHODS %}{{ RENAME_METHODS.RECOVERY }}{% else %}Recovery Code{% endif %}
-                  {% endif %}
-              </a> </li>
-              {% endfor %}
-          </ul>
-      </div>
-</div>
-</div>
-
-</div>
+<div class="container-fluid px-2 px-md-4 mt-6">
+  <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"  >
+                <div class="card-header pb-0 p-3">
+                    <h6 class="mb-0">Select Second Verification Method</h6>
+                </div>
+                <div class="card-body p-3">
+                    <div class="panel-body card-body">
+                        <ul>
+                            {% for method in request.session.mfa_methods %}
+              
+                            <li  style="list-style-type: none;"><a class="btn btn-sm btn-outline-primary" href="{% url 'mfa_goto' method %}" >
+                                {% if method == "TOTP" %}{% if 'TOTP' in RENAME_METHODS %}{{ RENAME_METHODS.TOTP }}{% else %}Authenticator App{% endif %}
+                                {% elif method == "Email" %}{% if 'Email' in RENAME_METHODS %}{{ RENAME_METHODS.Email }}{% else %}Send OTP by Email{% endif %}
+                                {% elif method == "U2F" %}{% if 'U2F' in RENAME_METHODS %}{{ RENAME_METHODS.U2F }}{% else %}Secure Key{% endif %}
+                                {% elif method == "FIDO2" %}{% if 'FIDO2' in RENAME_METHODS %}{{ RENAME_METHODS.FIDO2 }}{% else %}FIDO2 Secure Key{% endif %}
+                                {% elif method == "RECOVERY" %}{% if 'RECOVERY' in RENAME_METHODS %}{{ RENAME_METHODS.RECOVERY }}{% else %}Recovery Code{% endif %}
+                                {% endif %}
+                            </a> </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                </div>
+            </div>
 </div>
 {% endblock %}
--- a/mfa/views.py
+++ b/mfa/views.py
@@ -60,13 +60,11 @@ def reset_cookie(request):
    response.delete_cookie("base_username")
    return response

-def login(request,username = None):
+def login(request):
    from django.contrib import auth
    from django.conf import settings
    callable_func = __get_callable_function__(settings.MFA_LOGIN_CALLBACK)
-    if not username:
-        username = request.session["base_username"]
-    return callable_func(request,username=username)
+    return callable_func(request,username=request.session["base_username"])


@login_required
--- a/setup.py
+++ b/setup.py
@@ -4,7 +4,7 @@ from setuptools import find_packages, setup

 setup(
    name='django-mfa2',
-    version='2.6.1',
+    version='2.8.0',
    description='Allows user to add 2FA to their accounts',
    long_description=open("README.md").read(),
    long_description_content_type="text/markdown",
@@ -17,7 +17,6 @@ setup(
    packages=find_packages(),
    install_requires=[
        'django >= 2.0',
-        'jsonfield',
        'simplejson',
        'pyotp',
        'python-u2flib-server',
@@ -25,13 +24,13 @@ setup(
        'user-agents',
        'python-jose',
        'fido2 == 1.0.0',
-        '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",
        "Environment :: Web Environment",
        "Framework :: Django",
        "Framework :: Django :: 2.0",
@@ -41,6 +40,7 @@ setup(
        "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",
@@ -51,6 +51,7 @@ setup(
        "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",
 ]
 )
Author	SHA1	Message	Date
josh	fa0fd3172c	Update mfa/helpers.py	2024-02-14 16:23:53 +00:00
josh	fcfc6904b6	Update mfa/helpers.py	2024-02-14 16:16:53 +00:00
josh	ace60d7343	Update mfa/helpers.py	2024-02-05 11:35:27 +00:00
josh	aa76553edb	Update mfa/templates/TrustedDevices/start.html	2024-02-05 10:49:54 +00:00
josh	33938ac6e8	Update mfa/templates/MFA.html	2024-02-02 16:08:06 +00:00
josh	5c799f15e9	Update mfa/templates/MFA.html	2024-02-02 16:01:51 +00:00
josh	f33631ab48	Update mfa/templates/RECOVERY/recheck.html	2024-02-02 15:59:11 +00:00
josh	11079528cb	Update mfa/templates/RECOVERY/Add.html	2024-02-02 15:55:59 +00:00
josh	b4ca28479a	Update mfa/templates/TrustedDevices/start.html	2024-02-02 15:52:57 +00:00
josh	e1d2bfa330	Update mfa/templates/TrustedDevices/start.html	2024-02-02 15:51:42 +00:00
josh	a9ac8e7709	Update mfa/templates/TrustedDevices/Add.html	2024-02-02 15:47:47 +00:00
josh	97ba9eeb44	Update mfa/templates/FIDO2/recheck.html	2024-02-02 15:34:22 +00:00
josh	71a0378ef7	Update mfa/templates/FIDO2/Add.html	2024-02-02 15:31:55 +00:00
josh	7055a7da02	Update mfa/templates/U2F/recheck.html	2024-02-02 15:30:39 +00:00
josh	e63e315f29	Update mfa/templates/U2F/Add.html	2024-02-02 15:26:29 +00:00
josh	b381a43927	Update mfa/templates/MFA.html	2024-02-02 15:23:42 +00:00
josh	a31ecff6ef	Update mfa/templates/TOTP/recheck.html	2024-02-02 13:57:11 +00:00
josh	3eab9cbd46	Update mfa/templates/select_mfa_method.html	2024-02-02 12:56:43 +00:00
josh	fc301a5a06	Update mfa/templates/TOTP/Add.html	2024-02-02 12:49:16 +00:00
josh	c71c6d7cab	Update mfa/templates/TOTP/Add.html	2024-02-02 12:40:03 +00:00
josh	79e9e906dd	Update mfa/templates/TOTP/Add.html	2024-02-02 12:20:08 +00:00
josh	fe1e2abd6f	Update mfa/templates/TOTP/Add.html	2024-02-02 12:16:44 +00:00
josh	5db1bdca81	Update mfa/templates/TOTP/Add.html	2024-02-02 12:15:32 +00:00
josh	1c15c74444	Update mfa/templates/TOTP/Add.html	2024-02-02 12:01:06 +00:00
josh	bc59406713	Update mfa/templates/TOTP/recheck.html	2024-02-02 11:29:45 +00:00
josh	3ea974f750	Update mfa/templates/TOTP/recheck.html	2024-02-02 11:26:19 +00:00
josh	37184edfb9	Update mfa/templates/TOTP/recheck.html	2024-02-02 11:22:09 +00:00
josh	62a240ac28	Update mfa/templates/TOTP/recheck.html	2024-02-02 11:19:53 +00:00
josh	aa1d417c08	Update mfa/templates/TOTP/Auth.html	2024-02-02 11:11:08 +00:00
Mohamed El-Kalioby	77905b0e83	Merge pull request #81 from camposmoreira/chore/create-map-for-js Creating .map versions for bootstrap and qrious	2024-01-06 10:44:48 +03:00
Moreira	1fe11273e3	Creating .map versions for bootstrap and qrious	2023-12-26 12:04:05 -03:00
Mohamed ElKalioby	be3cf69956	Merge branch 'master' of https://github.com/mkalioby/django-mfa2	2022-12-19 14:55:48 +03:00
Mohamed ElKalioby	98b9fce1d2	Support for Django4.0+ JSONField	2022-12-19 14:55:37 +03:00
Mohamed ElKalioby	17ef0f4b1e	#70 closed	2022-12-19 14:23:32 +03:00
Mohamed El-Kalioby	669fef84fd	Link to django-passkeys	2022-11-05 10:13:55 +03:00
				`@@ -0,0 +1 @@`
				{"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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"}