From 7eecd759f7316b95efa966a9dd496f30caeefb50 Mon Sep 17 00:00:00 2001
From: Nathan Swain <nswain@aquaveo.com>
Date: Thu, 2 Jun 2022 12:53:41 -0600
Subject: [PATCH] Additional tweaks for bootstrap5 support btn-default ->
 btn-secondary use mb-3 to add margin to bottom of input-groups use
 $.modal('show') to show modals use bi bi-trash icon (font-awesome doesn't
 seem to be included with bs5 data-bs-dismiss on the modal close buttons put
 recheck templates in container divs add input-group-text class to addon icons
 for input fields

---
 example/example/templates/base.html     |  2 +-
 example/example/templates/blank.html    |  2 +-
 mfa/templates/Email/Add.html            |  6 +++---
 mfa/templates/Email/recheck.html        |  8 +++++---
 mfa/templates/FIDO2/recheck.html        |  2 +-
 mfa/templates/MFA.html                  |  3 ++-
 mfa/templates/TOTP/Add.html             |  4 ++--
 mfa/templates/TOTP/recheck.html         |  8 +++++---
 mfa/templates/TrustedDevices/Add.html   | 14 +++++++-------
 mfa/templates/TrustedDevices/start.html |  2 ++
 mfa/templates/U2F/recheck.html          |  2 +-
 mfa/templates/mfa_check.html            |  1 +
 mfa/templates/modal.html                |  4 ++--
 mfa/templates/select_mfa_method.html    |  3 +++
 14 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/example/example/templates/base.html b/example/example/templates/base.html
index 786d08b..e5b1a6e 100644
--- a/example/example/templates/base.html
+++ b/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">
diff --git a/example/example/templates/blank.html b/example/example/templates/blank.html
index 9907bc2..7748996 100644
--- a/example/example/templates/blank.html
+++ b/example/example/templates/blank.html
@@ -34,7 +34,7 @@
 
     <!-- Navbar Search -->
     <form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
-      <div class="input-group">
+      <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">
diff --git a/mfa/templates/Email/Add.html b/mfa/templates/Email/Add.html
index a1a5bfe..f8c66e5 100644
--- a/mfa/templates/Email/Add.html
+++ b/mfa/templates/Email/Add.html
@@ -4,7 +4,7 @@
 {% block content %}
 <br/>
 <br/>
-<div class="container">
+<div class="container d-flex justify-content-center">
   <div class="panel panel-default card">
     <div class="panel-heading card-header">
       <strong> Activate Token by email</strong>
@@ -31,8 +31,8 @@
           <div class="row">
             <div class="col-sm-12 col-md-12">
               <div class="form-group">
-                <div class="input-group">
-                  <span class="input-group-addon">
+                <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>
diff --git a/mfa/templates/Email/recheck.html b/mfa/templates/Email/recheck.html
index 37e3f0d..be342f1 100644
--- a/mfa/templates/Email/recheck.html
+++ b/mfa/templates/Email/recheck.html
@@ -13,6 +13,7 @@
 
     }
 </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">
@@ -46,8 +47,8 @@
       <div class="row">
 	  <div class="col-sm-12 col-md-12">
 	    <div class="form-group">
-	      <div class="input-group">
-		<span class="input-group-addon">
+	      <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>
@@ -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>
diff --git a/mfa/templates/FIDO2/recheck.html b/mfa/templates/FIDO2/recheck.html
index 22696f0..e73626e 100644
--- a/mfa/templates/FIDO2/recheck.html
+++ b/mfa/templates/FIDO2/recheck.html
@@ -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>
diff --git a/mfa/templates/MFA.html b/mfa/templates/MFA.html
index 2c1a68a..996d3ee 100644
--- a/mfa/templates/MFA.html
+++ b/mfa/templates/MFA.html
@@ -20,6 +20,7 @@
         $("#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) {
@@ -98,7 +99,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 fa-solid fa-trash-can"></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 %}
diff --git a/mfa/templates/TOTP/Add.html b/mfa/templates/TOTP/Add.html
index 60b9f69..7bd2ce6 100644
--- a/mfa/templates/TOTP/Add.html
+++ b/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' %}" class="btn btn-default" role="button">Cancel</a>
+                    <a href="{% url 'mfa_home' %}" class="btn btn-default btn-secondary" role="button">Cancel</a>
                 </div>
             </div>
         </div>
diff --git a/mfa/templates/TOTP/recheck.html b/mfa/templates/TOTP/recheck.html
index 2581f01..e172b0e 100644
--- a/mfa/templates/TOTP/recheck.html
+++ b/mfa/templates/TOTP/recheck.html
@@ -13,6 +13,7 @@
 
     }
 </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">
@@ -46,8 +47,8 @@
       <div class="row">
 	  <div class="col-sm-12 col-md-12">
 	    <div class="form-group">
-	      <div class="input-group">
-		<span class="input-group-addon">
+	      <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>
@@ -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>
diff --git a/mfa/templates/TrustedDevices/Add.html b/mfa/templates/TrustedDevices/Add.html
index 290d154..ec74e16 100644
--- a/mfa/templates/TrustedDevices/Add.html
+++ b/mfa/templates/TrustedDevices/Add.html
@@ -67,8 +67,8 @@
       <div class="row">
 	  <div class="col-sm-12 col-md-12">
 	    <div class="form-group">
-	      <div class="input-group">
-		<span class="input-group-addon">
+	      <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">
@@ -76,22 +76,22 @@
 	      </div>
 	    </div>
 	    <div class="form-group">
-		<div class="input-group">
-		<span class="input-group-addon">
+		<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">
+		<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">
-	      <span class="input-group-addon">
+	      <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">
diff --git a/mfa/templates/TrustedDevices/start.html b/mfa/templates/TrustedDevices/start.html
index a95bca4..ab45dc6 100644
--- a/mfa/templates/TrustedDevices/start.html
+++ b/mfa/templates/TrustedDevices/start.html
@@ -16,6 +16,7 @@
         $("#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) {
@@ -61,6 +62,7 @@
                     $("#modal-footer").prepend("<button id='actionBtn' class='btn btn-success' onclick='checkMFA()'>Trust Device</button>")
                     $("#modal-body").html(data)
                     $("#popUpModal").modal()
+                    $("#popUpModal").modal('show')
                 }
             }
         })
diff --git a/mfa/templates/U2F/recheck.html b/mfa/templates/U2F/recheck.html
index 1064151..5f47b44 100644
--- a/mfa/templates/U2F/recheck.html
+++ b/mfa/templates/U2F/recheck.html
@@ -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>
diff --git a/mfa/templates/mfa_check.html b/mfa/templates/mfa_check.html
index a7077b7..3922fdf 100644
--- a/mfa/templates/mfa_check.html
+++ b/mfa/templates/mfa_check.html
@@ -25,6 +25,7 @@
                     $("#modal-title").html("Recheck Indentity")
                     $("#modal-body").html(data["html"])
                     $("#popUpModal").modal()
+                    $("#popUpModal").modal('show')
                 }
 
 
diff --git a/mfa/templates/modal.html b/mfa/templates/modal.html
index 59a3cee..359b294 100644
--- a/mfa/templates/modal.html
+++ b/mfa/templates/modal.html
@@ -2,7 +2,7 @@
   <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>
+        <button type="button" class="close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <h4 class="modal-title" id="modal-title"></h4>
       </div>
       <div class="modal-body" id="modal-body" >
@@ -10,7 +10,7 @@
 
           </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 -->
diff --git a/mfa/templates/select_mfa_method.html b/mfa/templates/select_mfa_method.html
index c6ca2ad..0ee10f6 100644
--- a/mfa/templates/select_mfa_method.html
+++ b/mfa/templates/select_mfa_method.html
@@ -2,6 +2,7 @@
 {% 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">
@@ -24,6 +25,8 @@
           </ul>
       </div>
 </div>
+</div>
+
 </div>
 </div>
 {% endblock %}