Merged more fixes and fix the order on model-title and close btn

modal('show') should work for all versions of bootstrap.

CHANGELOG.md

@@ -1,4 +1,11 @@
 # Change Log
+## 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
+
 ## 2.4.0
 
    * Fixed: issue in the 'Authorize' button don't show on Safari Mobile.

README.md

@@ -12,7 +12,7 @@ A Django app that handles MFA, it supports TOTP, U2F, FIDO2 U2F (Web Authn), Ema
 
 Web Authencation API (WebAuthn) is state-of-the art techology that is expected to replace passwords.
 
-![Android Fingerprint](https://cdn-images-1.medium.com/max/800/1*1FWkRE8D7NTA2Kn1DrPjPA.png)
+![Andriod Fingerprint](https://cdn-images-1.medium.com/max/800/1*1FWkRE8D7NTA2Kn1DrPjPA.png)
 
 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+),
@@ -75,7 +75,6 @@ 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_RESIDENT_KEY = None    # Use Resident Key (Only supported in Chromimum based browsers)
    MFA_HIDE_DISABLE=('FIDO2',)     # Can the user disable his key (Added in 1.2.0).
    MFA_OWNED_BY_ENTERPRISE = FALSE  # Who owns security keys   
 
@@ -188,6 +187,7 @@ function some_func() {
 * [willingham](https://github.com/willingham)
 * [AndreasDickow](https://github.com/AndreasDickow)
 * [mnelson4](https://github.com/mnelson4)
+* [ezrajrice](https://github.com/ezrajrice)
 
 
  # Security contact information

example/example/auth.py

@@ -3,7 +3,6 @@ from django.http import HttpResponseRedirect
 from django.urls import reverse
 from django.contrib.auth import authenticate,login,logout
 from django.contrib.auth.models import User
-
 def loginView(request):
     context={}
     if request.method=="POST":

example/example/settings.py

@@ -142,10 +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_RESIDENT_KEY = True
 
 TOKEN_ISSUER_NAME="PROJECT_NAME"      #TOTP Issuer name
 
 U2F_APPID="https://localhost"    #URL For U2F
-FIDO_SERVER_ID=u"localhost"      # Server rp id for FIDO2, it the full domain of your project
+FIDO_SERVER_ID="localhost"      # Server rp id for FIDO2, it the full domain of your project
-FIDO_SERVER_NAME=u"TestApp"
+FIDO_SERVER_NAME="TestApp"

example/example/templates/base.html

@@ -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">
+      <div class="input-group mb-3">
         <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">

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">
+      <div class="input-group mb-3">
         <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">

example/example/templates/login.html

@@ -45,10 +45,6 @@
           </div>
 
           <button class="btn btn-primary btn-block" type="submit">Login</button>
-            <br/>
-            OR
-            <br/>
-            <a href="{% url 'fido2_auth' %}"><button class="btn btn-primary btn-block" type="button">Login By Security Key</button></a>
         </form>
       </div>
     </div>

mfa/FIDO2.py

@@ -1,6 +1,6 @@
-from fido2.client import ClientData
+from fido2.client import Fido2Client
 from fido2.server import Fido2Server, PublicKeyCredentialRpEntity
-from fido2.ctap2 import AttestationObject, AuthenticatorData
+from fido2.webauthn import AttestationObject, AuthenticatorData, CollectedClientData
 from django.template.context_processors import csrf
 from django.views.decorators.csrf import csrf_exempt
 from django.shortcuts import render
@@ -11,7 +11,7 @@ from django.http import HttpResponse
 from django.conf import settings
 from .models import *
 from fido2.utils import websafe_decode, websafe_encode
-from fido2.ctap2 import AttestedCredentialData
+from fido2.webauthn import AttestedCredentialData
 from .views import login, reset_cookie
 import datetime
 from .Common import get_redirect_url
@@ -28,7 +28,7 @@ def recheck(request):
 
 def getServer():
     """Get Server Info from settings and returns a Fido2Server"""
-    rp = PublicKeyCredentialRpEntity(settings.FIDO_SERVER_ID, settings.FIDO_SERVER_NAME)
+    rp = PublicKeyCredentialRpEntity(id=settings.FIDO_SERVER_ID, name=settings.FIDO_SERVER_NAME)
     return Fido2Server(rp)
 
 
@@ -39,7 +39,7 @@ def begin_registeration(request):
         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),resident_key=getattr(settings,'MFA_RESIDENT_KEY',None))
+    }, getUserCredentials(request.user.username))
     request.session['fido_state'] = state
 
     return HttpResponse(cbor.encode(registration_data), content_type = 'application/octet-stream')
@@ -51,7 +51,7 @@ def complete_reg(request):
     try:
         data = cbor.decode(request.body)
 
-        client_data = ClientData(data['clientDataJSON'])
+        client_data = CollectedClientData(data['clientDataJSON'])
         att_obj = AttestationObject((data['attestationObject']))
         server = getServer()
         auth_data = server.register_complete(
@@ -63,13 +63,13 @@ def complete_reg(request):
         uk = User_Keys()
         uk.username = request.user.username
         uk.properties = {"device": encoded, "type": att_obj.fmt, }
-        if data.get('userHandle'):
-            uk.properties["userHandle"] = data['userHandle']
         uk.owned_by_enterprise = getattr(settings, "MFA_OWNED_BY_ENTERPRISE", False)
         uk.key_type = "FIDO2"
         uk.save()
         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()
@@ -99,9 +99,7 @@ def auth(request):
 
 def authenticate_begin(request):
     server = getServer()
-    credentials=None
+    credentials = getUserCredentials(request.session.get("base_username", request.user.username))
-    if not getattr(settings,'MFA_RESIDENT_KEY',None):
-        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")
@@ -111,26 +109,13 @@ def authenticate_begin(request):
 def authenticate_complete(request):
     try:
         credentials = []
-        data = cbor.decode(request.body)
+        username = request.session.get("base_username", request.user.username)
-
-        if data.get("userHandle"):
-            keys = User_Keys.objects.filter(key_type="FIDO2", properties__icontains='"userHandle": "%s"'%data["userHandle"])
-            if keys.count()==1:
-                username = keys[0].username
-                request.session["base_username"]=username
-                request.session.update = 1
-
-        else:
-            username = request.session.get("base_username", request.user.username)
-
-
         server = getServer()
         credentials = getUserCredentials(username)
-        auth_data = AuthenticatorData(data['authenticatorData'])
+        data = cbor.decode(request.body)
-
         credential_id = data['credentialId']
-        client_data = ClientData(data['clientDataJSON'])
+        client_data = CollectedClientData(data['clientDataJSON'])
-        
+        auth_data = AuthenticatorData(data['authenticatorData'])
         signature = data['signature']
         try:
             cred = server.authenticate_complete(

mfa/templates/Email/Add.html

@@ -4,12 +4,12 @@
 {% block content %}
 <br/>
 <br/>
-<div class="container">
+<div class="container d-flex justify-content-center">
-  <div class="panel panel-default">
+  <div class="panel panel-default card">
-    <div class="panel-heading">
+    <div class="panel-heading card-header">
       <strong> Activate Token by email</strong>
     </div>
-    <div class="panel-body">
+    <div class="panel-body card-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">
+                <div class="input-group mb-3">
-                  <span class="input-group-addon">
+                  <span class="input-group-addon input-group-text">
-                  <i class="glyphicon glyphicon-lock"></i>
+                  <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">
+              <div class="form-group d-grid gap-2">
                 <input type="submit" class="btn btn-lg btn-success btn-block" value="Verify">
               </div>
             </div>

mfa/templates/Email/recheck.html

@@ -13,14 +13,15 @@
 
     }
 </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">
+<div class="panel panel-default card">
-      <div class="panel-heading">
+      <div class="panel-heading card-header">
 	      <strong> Email One Time Password </strong>
       </div>
-      <div class="panel-body">
+      <div class="panel-body card-body">
 
       <FORM METHOD="POST" ACTION="{% url 'email_auth' %}" Id="formLogin" onSubmit="" name="FrontPage_Form1">
 
@@ -46,16 +47,16 @@
       <div class="row">
 	  <div class="col-sm-12 col-md-12">
 	    <div class="form-group">
-	      <div class="input-group">
+	      <div class="input-group mb-3">
-		<span class="input-group-addon">
+		<span class="input-group-addon input-group-text">
-		<i class="glyphicon glyphicon-lock"></i>
+		<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">
+          <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>
@@ -64,7 +65,7 @@
       </FORM>
       </div>
         <div class="row">
-        <div class="col-md-6" style="padding-left: 25px">
+        <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 %}
@@ -74,3 +75,4 @@
               </div>
 	      </div>
 	      </div>
+</div>

mfa/templates/FIDO2/Add.html

@@ -17,12 +17,10 @@
 
       return navigator.credentials.create(options);
     }).then(function(attestation) {
-        console.log(attestation)
       return fetch('{% url 'fido2_complete_reg' %}', {
         method: 'POST',
         headers: {'Content-Type': 'application/cbor'},
         body: CBOR.encode({
-            "userHandle":attestation.id,
           "attestationObject": new Uint8Array(attestation.response.attestationObject),
           "clientDataJSON": new Uint8Array(attestation.response.clientDataJSON),
         })
@@ -61,11 +59,11 @@
       <br/>
     <br/>
      <div class="container">
-     <div class="panel panel-default">
+     <div class="panel panel-default card">
-      <div class="panel-heading">
+      <div class="panel-heading card-header">
 	      <strong> FIDO2 Security Key</strong>
       </div>
-      <div class="panel-body">
+      <div class="panel-body card-body">
 
 
     <div class="row alert alert-pr" id="res" align="center">

mfa/templates/FIDO2/recheck.html

@@ -4,11 +4,11 @@
 <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 panel-default card">
-      <div class="panel-heading">
+      <div class="panel-heading card-header">
 	      <strong> Security Key</strong>
       </div>
-      <div class="panel-body">
+      <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">
@@ -35,7 +35,7 @@
           </div>
 
           <div class="row">
-          <div style="padding-left: 15px">
+          <div class="col-md-12 mb-3" style="padding-left: 15px">
 
             {% if request.session.mfa_methods|length > 1 %}
                 <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>
@@ -58,11 +58,8 @@
     }).then(CBOR.decode).then(function(options) {
         console.log(options)
       return navigator.credentials.get(options);
-
     }).then(function(assertion) {
-        console.log(assertion)
         res=CBOR.encode({
-            "userHandle":assertion.id,
           "credentialId": new Uint8Array(assertion.rawId),
           "authenticatorData": new Uint8Array(assertion.response.authenticatorData),
           "clientDataJSON": new Uint8Array(assertion.response.clientDataJSON),
@@ -108,7 +105,7 @@
             $("#main_paragraph").html("FIDO2 must work under secure context")
         } else {
             ua=new UAParser().getResult()
-            if (ua.browser.name == "Safari" || ua.browser.name == "Mobile Safari" )
+            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()

mfa/templates/MFA.html

@@ -19,7 +19,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()
+        $("#popUpModal").modal('show')
     }
 
     function toggleKey(id) {
@@ -47,24 +47,24 @@
     <div class="row">
         <div align="center">
             <div class="btn-group">
-            <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
+            <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 href="{% url 'start_new_otop' %}">Authenticator app</a></li>
+                    <li><a class="dropdown-item" href="{% url 'start_new_otop' %}">Authenticator app</a></li>
                 {% endif %}
                 {% if not 'Email' in UNALLOWED_AUTHEN_METHODS %}
-                    <li><a href="{% url 'start_email' %}">Email Token</a></li>
+                    <li><a class="dropdown-item" href="{% url 'start_email' %}">Email Token</a></li>
                 {% endif %}
                 {% if not 'U2F' in UNALLOWED_AUTHEN_METHODS %}
-                    <li><a href="{% url 'start_u2f' %}">Security Key</a></li>
+                    <li><a class="dropdown-item" href="{% url 'start_u2f' %}">Security Key</a></li>
                 {% endif %}
             {% if not 'FIDO2' in UNALLOWED_AUTHEN_METHODS %}
-                    <li><a href="{% url 'start_fido2' %}">FIDO2 Security Key</a></li>
+                    <li><a class="dropdown-item" href="{% url 'start_fido2' %}">FIDO2 Security Key</a></li>
                 {% endif %}
             {% if not 'Trusted_Devices' in UNALLOWED_AUTHEN_METHODS %}
-                    <li><a href="{% url 'start_td' %}">Trusted Device</a></li>
+                    <li><a class="dropdown-item" href="{% url 'start_td' %}">Trusted Device</a></li>
                 {% endif %}
             </ul>
             </div>
@@ -98,7 +98,7 @@
                <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>
+                    <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>
        {% empty %}

mfa/templates/TOTP/Add.html

@@ -63,7 +63,7 @@
 {% block content %}
 <br/>
 <br/>
-<div class="container">
+<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 Authenticator</h4>
@@ -98,7 +98,7 @@
                     <button class="btn btn-success" onclick="verify()">Enable</button>
                 </div>
                 <div class="col-md-6" align="right" style="padding-right: 30px">
-                    <a href="{% url 'mfa_home' %}"><button class="btn btn-default">Cancel</button></a>
+                    <a href="{% url 'mfa_home' %}" class="btn btn-default btn-secondary" role="button">Cancel</a>
                 </div>
             </div>
         </div>

mfa/templates/TOTP/recheck.html

@@ -13,14 +13,15 @@
 
     }
 </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">
+<div class="panel panel-default card">
-      <div class="panel-heading">
+      <div class="panel-heading card-header">
 	      <strong> One Time Password</strong>
       </div>
-      <div class="panel-body">
+      <div class="panel-body card-body">
 
       <FORM METHOD="POST" ACTION="{% url 'totp_auth' %}" Id="formLogin" onSubmit="" name="FrontPage_Form1">
 
@@ -46,16 +47,16 @@
       <div class="row">
 	  <div class="col-sm-12 col-md-12">
 	    <div class="form-group">
-	      <div class="input-group">
+	      <div class="input-group mb-3">
-		<span class="input-group-addon">
+		<span class="input-group-addon input-group-text">
-		<i class="glyphicon glyphicon-lock"></i>
+		<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">
+          <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>
@@ -64,7 +65,7 @@
       </FORM>
       </div>
         <div class="row">
-        <div class="col-md-6" style="padding-left: 25px">
+        <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 %}
@@ -74,3 +75,4 @@
               </div>
 	      </div>
 	      </div>
+</div>

mfa/templates/TrustedDevices/Add.html

@@ -31,11 +31,11 @@
 <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 panel-default card">
-      <div class="panel-heading">
+      <div class="panel-heading card-header">
 	      <strong> Add Trusted Device</strong>
       </div>
-      <div class="panel-body">
+      <div class="panel-body card-body">
         {%  if success %}
             <div class="alert alert-warning">
                 Please check your PC window, to continue the process.
@@ -67,31 +67,31 @@
       <div class="row">
 	  <div class="col-sm-12 col-md-12">
 	    <div class="form-group">
-	      <div class="input-group">
+	      <div class="input-group mb-3">
-		<span class="input-group-addon">
+		<span class="input-group-addon input-group-text">
-		<i class="glyphicon glyphicon-user"></i>
+		<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">
+		<div class="input-group mb-3">
-		<span class="input-group-addon">
+		<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">
+		<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">
+	      <div class="input-group mb-3">
-	      <span class="input-group-addon">
+	      <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">
@@ -104,7 +104,7 @@
 	      </div>
 	      </div>
 	      {% endcomment %}
-	      <div class="form-group">
+	      <div class="form-group d-grid gap-2">
 	      <input type="submit" class="btn btn-lg btn-success btn-block" value="Trust Device">
 	      </div>
 	      </div>
@@ -113,7 +113,7 @@
 	      </form>
       {% endif %}
 	      </div>
-	      <div class="panel-footer ">
+	      <div class="panel-footer card-footer">
 
 
 	      </div>

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">
+<div class="panel panel-default card">
-      <div class="panel-heading">
+      <div class="panel-heading card-header">
 	      <strong> Add Trusted Device</strong>
       </div>
-      <div class="panel-body">
+      <div class="panel-body card-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 ">
+	      <div class="panel-footer card-footer">
 
 
 	      </div>

mfa/templates/TrustedDevices/start.html

@@ -15,7 +15,7 @@
     function sendEmail() {
         $("#modal-title").html("Send Link")
         $("#modal-body").html("Sending Email, Please wait....");
-        $("#popUpModal").modal();
+        $("#popUpModal").modal('show');
         $.ajax({
             "url":"{% url 'td_sendemail' %}",
             success:function (data) {
@@ -60,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()
+                    $("#popUpModal").modal('show');
                 }
             }
         })

mfa/templates/U2F/recheck.html

@@ -2,11 +2,11 @@
 <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 panel-default card">
-      <div class="panel-heading">
+      <div class="panel-heading card-header">
 	      <strong> Security Key</strong>
       </div>
-      <div class="panel-body">
+      <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">
@@ -24,7 +24,7 @@
           </div>
 
           <div class="row">
-          <div style="padding-left: 15px">
+          <div class="col-md-12 mb-3" style="padding-left: 15px">
 
             {% if request.session.mfa_methods|length > 1 %}
                 <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>

mfa/templates/mfa_check.html

@@ -24,7 +24,7 @@
                 {
                     $("#modal-title").html("Recheck Indentity")
                     $("#modal-body").html(data["html"])
-                    $("#popUpModal").modal()
+                    $("#popUpModal").modal('show')
                 }
 
 

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" id='btnModalClose' data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-default btn-secondary" id='btnModalClose' data-dismiss="modal" data-bs-dismiss="modal">Close</button>
       </div>
 
     </div><!-- /.modal-content -->

mfa/templates/select_mfa_method.html

@@ -2,14 +2,15 @@
 {% block content %}
     <br/>
 <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">
-<div class="panel panel-default">
+<div class="panel panel-default card">
-      <div class="panel-heading">
+      <div class="panel-heading card-header">
 	      <strong> Select Second Verification Method</strong>
       </div>
-      <div class="panel-body">
+      <div class="panel-body card-body">
           <ul>
               {% for method in request.session.mfa_methods %}
 
@@ -24,6 +25,8 @@
           </ul>
       </div>
 </div>
+</div>
+
 </div>
 </div>
 {% endblock %}

setup.py

@@ -4,7 +4,7 @@ from setuptools import find_packages, setup
 
 setup(
     name='django-mfa2',
-    version='2.4.0',
+    version='2.5.0b2',
     description='Allows user to add 2FA to their accounts',
     long_description=open("README.md").read(),
     long_description_content_type="text/markdown",
@@ -24,14 +24,14 @@ setup(
         'ua-parser',
         'user-agents',
         'python-jose',
-        'fido2 == 0.9.2',
+        '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",
@@ -39,6 +39,8 @@ setup(
         "Framework :: Django :: 2.2",
         "Framework :: Django :: 3.0",
         "Framework :: Django :: 3.1",
+        "Framework :: Django :: 3.2",
+        "Framework :: Django :: 4.0",
         "Intended Audience :: Developers",
         "Operating System :: OS Independent",
         "Programming Language :: Python",
@@ -47,6 +49,8 @@ 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",
         "Topic :: Software Development :: Libraries :: Python Modules",
 ]
 )