Update bootstrap & add light mode

fir_abuse/static/fir_abuse/js/abuse.js

@@ -2,7 +2,7 @@ $(function () {
 
   // Contextmenu on ROW
   // Trigger action when the contextual menu is about to be shown
-  $(".artifacts-table a").bind("contextmenu", function (e) {
+  $(document).ready(function() { $(".artifacts-table a").bind("contextmenu", function (e) {
 
     artifact_id = $(this).data('id')
     abuse_link = $("#send_abuse_link").data('urltemplate')
@@ -11,11 +11,11 @@ $(function () {
     url = "/abuse/task/" + artifact_id + "/";
 
     state = {
-      SUCCESS: '"glyphicon glyphicon-ok" style="color:#00FF00;"',
-      FAILURE: '"glyphicon glyphicon-remove" style="color:#FF0000;"',
-      PENDING: '"glyphicon glyphicon-time"',
-      UNKNOWN: '"glyphicon glyphicon-question-sign"',
-      ERROR: '"glyphicon glyphicon-warning-sign" style="color:#FF0000"'
+      SUCCESS: '"bi bi-check-circle" style="color:#00FF00;"',
+      FAILURE: '"bi bi-x-circle" style="color:#FF0000;"',
+      PENDING: '"bi bi-clock"',
+      UNKNOWN: '"bi bi-question-circle"',
+      ERROR: '"bi bi-exclamation-triangle" style="color:#FF0000"'
     }
 
     if ($(".custom-menu #visualIndicator")) {
@@ -47,7 +47,7 @@ $(function () {
         top: e.pageY + "px",
         left: e.pageX + "px"
       });
-  });
+  });});
 
   // Discard contextual menu if click happen else where
   $(document).bind("mousedown", function (e) {

fir_abuse/templates/fir_abuse/emailform.html

@@ -3,42 +3,42 @@
 	<div class="modal-dialog modal-lg">
 		<div class="modal-content">
 			<div class="modal-header">
-				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 				<h4 id="sendEmailLabel" class="modal-title">{% trans "Send abuse email" %}</h4>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
 			</div>
 
 			<form id="abuse_email_form" action="{% url 'abuse:send_email' %}" method="POST" class='form-horizontal'>
 				<div class="modal-body">
 					{% csrf_token %}
-					<div class='form-group nomargin'>
+					<div class='form-group nomargin mb-3 row'>
 						<label for="abuse_to" class="col-sm-1 text-right">{% trans "To:" %}</label>
 						<div class='col-sm-11'>
 							{{ form.to }}
 						</div>
 					</div>
-					<div class='form-group nomargin'>
+					<div class='form-group nomargin mb-3 row'>
 						<label for="abuse_cc" class="col-sm-1 text-right">{% trans "CC:" %}</label>
 						<div class='col-sm-11'>
 							{{ form.cc }}
 						</div>
 					</div>
-					<div class='form-group nomargin'>
+					<div class='form-group nomargin mb-3 row'>
 						<label for="abuse_bcc" class="col-sm-1 text-right">{% trans "BCC:" %}</label>
 						<div class='col-sm-11'>
 							{{ form.bcc }}
 						</div>
 					</div>
-					<div class='form-group'>
+					<div class='form-group mb-3 row'>
 						<label for="abuse_subject" class="col-sm-1 text-right">{% trans "Subject" %}</label>
 						<div class='col-sm-11'>
 							{{ form.subject|safe }}
 						</div>
 					</div>
-					<div class='form-group'>
-                        <div class='col-sm-11 col-sm-offset-1'>
-                            <ul class="nav nav-pills" role="tablist">
-                                <li class="active"><a href="#abuse_tab_body" data-toggle="pill">{% trans "Body" %}</a></li>
-                                <li><a id="abuse_tab_enrichment_link" href="#abuse_tab_enrichment" data-toggle="pill">{% trans "Enrichment" %}</a></li>
+					<div class='form-group mb-3 row'>
+                        <div class='col-sm-12 col-sm-offset-1'>
+                            <ul class="nav nav-pills mb-2" role="tablist">
+                                <li class="nav-item"><a class="nav-link active" href="#abuse_tab_body" data-bs-toggle="pill">{% trans "Body" %}</a></li>
+                                <li class="nav-item"><a class="nav-link" id="abuse_tab_enrichment_link" href="#abuse_tab_enrichment" data-bs-toggle="pill"> {% trans "Enrichment" %}</a></li>
                             </ul>
 
                             <div class="tab-content">
@@ -58,7 +58,7 @@ <h4>{% trans "Raw" %}</h4>
 			</form>
 
 			<div class="modal-footer">
-				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">{% trans "Close" %}</button>
+				<button class="btn btn-default" data-bs-dismiss="modal" aria-hidden="true">{% trans "Close" %}</button>
 				<button data-sent-text="Message sent" data-loading-text="Sending..." id='send_abuse_email' class="btn btn-primary">{% trans "Send email" %}</button>
 			</div>
 		</div>

fir_abuse/templates/fir_abuse/plugins/details_tab_content.html

@@ -4,7 +4,7 @@
 <ul class='custom-menu'>
   <li data-action="first">
     <a id="send_abuse_link" href="#" data-urltemplate="{% url 'abuse:get_template' event.id 0 %}">
-    <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> {% trans "Send Abuse" %}
+    <span class="bi bi-eye" aria-hidden="true"></span> {% trans "Send Abuse" %}
     </a>
   </li>
 </ul>

fir_alerting/templates/fir_alerting/emailform.html

@@ -4,44 +4,44 @@
 	<div class="modal-dialog modal-lg">
 		<div class="modal-content">
 			<div class="modal-header">
-				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 				<h4 id="sendEmailLabel" class="modal-title">{% trans "Send email" %}</h4>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
 			</div>
 
 			<form id="email_form" action="{% url 'alerting:send_email' %}" method="POST" class='form-horizontal'>
 				<div class="modal-body">
 					{% csrf_token %}
-					<div class='form-group nomargin'>
+					<div class='form-group nomargin mb-3 row'>
 						<label for="id_behalf" class="col-sm-1 text-right">{% trans "From:" %}</label>
 						<div class='col-sm-11'>
 							{{ form.behalf }}
 						</div>
 					</div>
-					<div class='form-group nomargin'>
+					<div class='form-group nomargin mb-3 row'>
 						<label for="id_to" class="col-sm-1 text-right">{% trans "To:" %}</label>
 						<div class='col-sm-11'>
 							{{ form.to }}
 						</div>
 					</div>
-					<div class='form-group nomargin'>
+					<div class='form-group nomargin mb-3 row'>
 						<label for="id_cc" class="col-sm-1 text-right">{% trans "CC:" %}</label>
 						<div class='col-sm-11'>
 							{{ form.cc }}
 						</div>
 					</div>
-					<div class='form-group nomargin'>
+					<div class='form-group nomargin mb-3 row'>
 						<label for="id_bcc" class="col-sm-1 text-right">{% trans "BCC:" %}</label>
 						<div class='col-sm-11'>
 							{{ form.bcc }}
 						</div>
 					</div>
-					<div class='form-group'>
+					<div class='form-group mb-3 row'>
 						<label for="id_subject" class="col-sm-1 text-right">{% trans "Subject" %}</label>
 						<div class='col-sm-11'>
 							{{ form.subject|safe }}
 						</div>
 					</div>
-					<div class='form-group'>
+					<div class='form-group mb-3 row'>
 						<label for="id_body" class="col-sm-1 text-right">{% trans "Body" %}</label>
 						<div class='col-sm-11'>
 							{% rich_edit form.body %}
@@ -51,7 +51,7 @@ <h4 id="sendEmailLabel" class="modal-title">{% trans "Send email" %}</h4>
 			</form>
 
 			<div class="modal-footer">
-				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">{% trans "Close" %}</button>
+				<button class="btn btn-default" data-bs-dismiss="modal" aria-hidden="true">{% trans "Close" %}</button>
 				<button data-sent-text="Message sent" data-loading-text="Sending..." id='send_email' class="btn btn-primary">{% trans "Send email" %}</button>
 			</div>
 		</div>

fir_alerting/templates/fir_alerting/plugins/details_actions.html

@@ -6,7 +6,7 @@
         {% if can_handle_incident %}
 		<li>
 			<a href='#' id='details-actions-alert' data-type='alerting' data-url="{% url 'alerting:get_template' event.id 'alerting' bl.id %}">
-				<i class="glyphicon glyphicon-send"></i>{% trans "Alert" %}
+				<i class="bi bi-send"></i> {% trans "Alert" %}
 			</a>
 		</li>
         {% endif %}
@@ -16,12 +16,12 @@
 	{% if can_handle_incident %}
 		<li>
 			<a href="#" id='details-actions-alert' data-type='alerting'>
-				<i class="glyphicon glyphicon-send"></i>{% trans "Alert" %}
+				<i class="bi bi-send"></i> {% trans "Alert" %}
 			</a>
 		</li>
 	{% endif %}
 {% endif %}
 {% has_perm 'incidents.handle_incidents' obj=event as can_handle_incident %}
 {% if can_handle_incident %}
-<li><a href="#" class='details-alert-bl' data-type='takedown' data-url="{% url 'alerting:get_template' event.id 'takedown' %}"><i class="glyphicon glyphicon-screenshot"></i>{% trans "Takedown" %}</a></li>
+<li><a href="#" class='details-alert-bl' data-type='takedown' data-url="{% url 'alerting:get_template' event.id 'takedown' %}"><i class="bi bi-bullseye"></i> {% trans "Takedown" %}</a></li>
 {% endif %}

fir_alerting/templates/fir_alerting/plugins/details_actions_menu.html

@@ -1,12 +1,12 @@
 {% load authorization %}
-<div class="details-actions-supmenu" id="details-actions-alert-bls" data-url="{% url 'alerting:emailform' %}">
+<div class="details-actions-supmenu bg-info-subtle" id="details-actions-alert-bls" data-url="{% url 'alerting:emailform' %}">
 	<ul class="list-unstyled">
 		{% for bl in event.concerned_business_lines.all %}
             {% has_perm 'incidents.handle_incidents' obj=bl as can_handle_incident %}
             {% if can_handle_incident %}
 							<li>
 								<a href="#" class='details-alert-bl' data-target='#sendEmail' data-type='alerting' data-toggle='modal' data-url="{% url 'alerting:get_template' event.id 'alerting' bl.id %}">
-									<i class="glyphicon glyphicon-send"></i>{{bl.name}}
+									<i class="bi bi-send"></i>{{bl.name}}
 								</a>
 							</li>
             {% endif %}

fir_artifacts/static/fir_artifacts/js/tooltips.js

@@ -42,33 +42,33 @@ function virustotal_tooltip(hash) {
 function find_hostnames(node) {
 	$(node).each(function(){
 		pattern = /((([\w\-]+\.)+)([a-zA-Z]{2,6}))(?!([^<]+)?>)/ig
-		$(this).html($(this).html().replace(pattern,'<span data-toggle="tooltip" title class="hostname">\$1</span>'))
+		$(this).html($(this).html().replace(pattern,'<span data-bs-toggle="tooltip" data-bs-html="true" data-bs-delay="500" title class="hostname">\$1</span>'))
 	})
 
 	$('span.hostname').each(function(){
-		$(this).attr('data-original-title', centralops_tooltip($(this).text()))
+		$(this).attr('data-bs-original-title', centralops_tooltip($(this).text()))
 	})
 }
 
 function find_ips(node) {
 	$(node).each(function(){
 		pattern = /((((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))|(((([0-9a-fA-F]){1,4}):){1,4}:(((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])))|(::(ffff(:0{1,4}){0,1}:){0,1}(((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])))|(fe80:(:(([0-9a-fA-F]){1,4})){0,4}%[0-9a-zA-Z]{1,})|(:((:(([0-9a-fA-F]){1,4})){1,7}|:))|((([0-9a-fA-F]){1,4}):((:(([0-9a-fA-F]){1,4})){1,6}))|(((([0-9a-fA-F]){1,4}):){1,2}(:(([0-9a-fA-F]){1,4})){1,5})|(((([0-9a-fA-F]){1,4}):){1,3}(:(([0-9a-fA-F]){1,4})){1,4})|(((([0-9a-fA-F]){1,4}):){1,4}(:(([0-9a-fA-F]){1,4})){1,3})|(((([0-9a-fA-F]){1,4}):){1,5}(:(([0-9a-fA-F]){1,4})){1,2})|(((([0-9a-fA-F]){1,4}):){1,6}:(([0-9a-fA-F]){1,4}))|(((([0-9a-fA-F]){1,4}):){1,7}:)|(((([0-9a-fA-F]){1,4}):){7,7}(([0-9a-fA-F]){1,4})))(?!([^<]+)?>)/ig
-		$(this).html($(this).html().replace(pattern,'<span data-toggle="tooltip" title class="ip-addr">\$1</span>'))
+		$(this).html($(this).html().replace(pattern,'<span data-bs-toggle="tooltip" data-bs-html="true" data-bs-delay="500" title class="ip-addr">\$1</span>'))
 	})
 
 	$('span.ip-addr').each(function(){
-		$(this).attr('data-original-title', centralops_tooltip($(this).text()))
+		$(this).attr('data-bs-original-title', centralops_tooltip($(this).text()))
 	})
 }
 
 function find_hashes(node) {
 	$(node).each(function(){
 		pattern = /([a-fA-F0-9]{32,64})(?!([^<]+)?>)/ig
-		$(this).html($(this).html().replace(pattern,'<span data-toggle="tooltip" title class="hash">\$1</span>'))
+		$(this).html($(this).html().replace(pattern,'<span data-bs-toggle="tooltip" data-bs-html="true" data-bs-delay="500"title class="hash">\$1</span>'))
 	})
 
 	$('span.hash').each(function(){
-		$(this).attr('data-original-title', virustotal_tooltip($(this).text()))
+		$(this).attr('data-bs-original-title', virustotal_tooltip($(this).text()))
 	})
 }
 
@@ -77,48 +77,6 @@ $(function () {
 	find_ips('.artifacts')
 	find_hashes('.artifacts')
 
-	$('span.hostname').tooltip({'html':true, 'trigger':'manual', 'delay': {'show':100, 'hide':200} })
-	$('span.ip-addr').tooltip({'html':true, 'trigger':'manual', 'delay': {'show':100, 'hide':200} })
-	$('span.hash').tooltip({'html':true, 'trigger':'manual', 'delay': {'show':100, 'hide':200} })
-
-	var tooltipTimer = false;
-	timeout = 500
-
-	function sticky_tooltip(){
-		tooltip = $('.tooltip')
-		tooltip.on('mouseover', function() { clearTimeout(tooltipTimer) })
-		.on('mouseleave', function() {
-			setTimeout(function(){
-				tooltip.prev().tooltip('hide')
-			}, timeout);
-		})
-	}
-
-	$('span.hostname').on('mouseover',function(){
-		clearTimeout(tooltipTimer)
-		$(this).tooltip('show');
-		sticky_tooltip();
-	})
-	.on('mouseleave', function() {
-		tooltipTimer = setTimeout(function(){$('.tooltip').prev().tooltip('hide')}, timeout)
-	})
-
-	$('span.ip-addr').on('mouseover',function(){
-		clearTimeout(tooltipTimer)
-		$(this).tooltip('show');
-		sticky_tooltip();
-	})
-	.on('mouseleave', function() {
-		tooltipTimer = setTimeout(function(){$('.tooltip').prev().tooltip('hide')}, timeout)
-	});
-
-
-	$('span.hash').on('mouseover',function(){
-		clearTimeout(tooltipTimer)
-		$(this).tooltip('show');
-		sticky_tooltip();
-	})
-	.on('mouseleave', function() {
-		tooltipTimer = setTimeout(function(){$('.tooltip').prev().tooltip('hide')}, timeout)
-	});
+	const tooltipTriggerList = document.querySelectorAll('span.hostname, span.ip-addr, span.hash')
+	const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
 });

fir_artifacts/templates/fir_artifacts/correlation_list.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% load i18n %}
 {% load fir_plugins %}
-{% block header%}<h1>{% blocktrans with artifact_display=artifact.get_type_display artifact_value=artifact.value %}List of correlations including {{artifact_display}} {{artifact_value}}{% endblocktrans %}</h1>{%endblock%}
+{% block header%}<h1 class="text-break">{% blocktrans with artifact_display=artifact.get_type_display artifact_value=artifact.value %}List of correlations including {{artifact_display}} {{artifact_value}}{% endblocktrans %}</h1>{%endblock%}
 {% block content %}
 	{% plugin_point 'correlation_list' %}
 	<a class="btn" href="javascript:history.back()">{% trans "Back" %}</a>

fir_artifacts/templates/fir_artifacts/default.html

@@ -16,8 +16,8 @@
                 {% if can_handle_incident %}
 				<form class='icon' action="{% url 'artifacts:detach' a.id event|relation_name event.id %}" method='POST'>
 					{% csrf_token %}
-					<button type="submit" class='btn btn-xs btn-link icon'>
-						<i class='glyphicon glyphicon-remove'></i>
+					<button type="submit" class='btn btn-sm btn-link icon'>
+						<i class='bi bi-x-circle'></i>
 					</button>
 				</form>
                 {% endif %}

fir_artifacts/templates/fir_artifacts/plugins/details_sidebar.html

@@ -3,8 +3,8 @@
 {% load fir_artifacts %}
 {% load authorization %}
 {%  has_perm 'incidents.handle_incidents' obj=event as can_handle_incident %}
-<div class='widget {% if event.file_set.count == 0 %}hidden{% endif%}' id='details-files'>
-<h4 class='widget'>{%  trans "Related files" %}</h4>
+<div class='widget border border-info-subtle {% if event.file_set.count == 0 %}visually-hidden{% endif%}' id='details-files'>
+<h4 class='widget text-info-emphasis bg-info-subtle border border-info-subtle'>{%  trans "Related files" %}</h4>
     {% if event.file_set.count > 0 %}
         <table class='table table-condensed files fixed'>
             <thead>
@@ -28,8 +28,8 @@ <h4 class='widget'>{%  trans "Related files" %}</h4>
                         {% if can_handle_incident %}
                         <form id='details-file-delete' action="{% url 'artifacts:remove_file' file.id %}" method='POST'>
                             {% csrf_token %}
-                            <button type="submit" class="btn btn-link btn-xs icon">
-                                <i class="glyphicon glyphicon-trash"></i>
+                            <button type="submit" class="btn btn-link btn-sm icon">
+                                <i class="bi bi-trash"></i>
                             </button>
                         </form>
                         {% endif %}
@@ -48,23 +48,23 @@ <h4 class='widget'>{%  trans "Related files" %}</h4>
         <table id='filetable' class='table table-condensed'></table>
     </form>
     <a class="btn btn-sm btn-default" href="#" onclick='javascript:$("#id_file").click();'>
-        <i class="glyphicon glyphicon-file"></i> {%  trans "Browse..." %}
+        <i class="bi bi-file-earmark"></i> {%  trans "Browse..." %}
     </a>
     <a class="btn btn-sm btn-default" href="#" onclick='javascript:$("#upload_form").submit();'>
-        <i class="glyphicon glyphicon-upload"></i> {%  trans "Upload files" %}
+        <i class="bi bi-upload"></i> {%  trans "Upload files" %}
     </a>
     {% endif %}
     {% if event.file_set.count > 0 %}
         <a class="btn btn-sm btn-default" href="{% url 'artifacts:download_archive' event|content_type event.id %}">
-            <i class="glyphicon glyphicon-download-alt"></i> {%  trans "Download archive" %}
+            <i class="bi bi-download"></i> {%  trans "Download archive" %}
         </a>
     {% endif %}
 </div>
 
 
 {% if correlated_count > 0 %}
-	<div class="widget">
-		<h4 class='widget'>{%  trans "Correlated Artifacts" %}</h4>
+	<div class="widget border border-info-subtle">
+		<h4 class='widget text-info-emphasis bg-info-subtle border border-info-subtle'>{%  trans "Correlated Artifacts" %}</h4>
 
 		<div class='' id='sidebar_artifacts'>
 			<table class='table table-condensed artifacts-table artifacts fixed'>

fir_artifacts/templates/fir_artifacts/plugins/details_static.html

@@ -1,2 +1,3 @@
 {% load static %}
 <script src="{% static "fir_artifacts/js/tooltips.js" %}"></script>
+<script src="{% static "js/popper.min.js" %}"></script>

fir_artifacts/templates/fir_artifacts/plugins/details_tab.html

@@ -1,9 +1,9 @@
 {% load i18n %}
 
 {% if artifacts_count > 0 %}
-	<li>
-		<a href='#tab_artifacts' data-toggle='tab'>
+	<li class="nav-item">
+		<button class="nav-link" data-bs-target='#tab_artifacts' data-bs-toggle='tab'>
 			{% trans "Artifacts" %} ({{ artifacts_count }})
-		</a>
+		</button>
 	</li>
 {% endif %}

fir_auth_2fa/templates/fir_auth_2fa/plugins/user_profile_actions.html

@@ -1,2 +1,2 @@
 {% load i18n %}
-<li><a href="{% url 'two_factor:profile' %}" id="user_manage_2fa"><i class="glyphicon glyphicon-phone"></i>{%  trans "Manage 2FA" %}</a></li>
+<li><a href="{% url 'two_factor:profile' %}" id="user_manage_2fa"><i class="bi bi-phone"></i>{%  trans "Manage 2FA" %}</a></li>