Skip to content

Commit

Permalink
Merge pull request #1361 from yogeshojha/1357-feat-make-startscan-ui-…
Browse files Browse the repository at this point in the history
…consistent-all-types-of-scan-such-as-schedule-scan-organization-scan-multiple-scans-etc

feat: Consistent start scan ui across schedule scan, multiple scans. Now supports import, out of scope subdomains, starting path, excluded path for all types of scan #1357
  • Loading branch information
yogeshojha authored Aug 8, 2024
2 parents 47d7b0f + f237f43 commit fc3fcdf
Show file tree
Hide file tree
Showing 11 changed files with 463 additions and 550 deletions.
89 changes: 89 additions & 0 deletions web/startScan/static/startScan/js/schedule-scan-wizard.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
function schedulerChanged(selectObject) {
selectedValue = selectObject.value;
if (selectedValue == "periodic") {
var clockedDiv = document.getElementById("clocked-div");
clockedDiv.classList.remove("show");
clockedDiv.classList.remove("active");
var periodicDiv = document.getElementById("periodic-div");
periodicDiv.classList.add("show");
periodicDiv.classList.add("active");
} else if (selectedValue == "clocked") {
var periodicDiv = document.getElementById("periodic-div");
periodicDiv.classList.remove("show");
periodicDiv.classList.remove("active");
var clockedDiv = document.getElementById("clocked-div");
clockedDiv.classList.add("show");
clockedDiv.classList.add("active");
}
}

var buttonEnabled = true;
var globalTimeout = 0;

function disableNext() {
var nextButton = $(".actions ul li:nth-child(2) a");
nextButton.attr("href", "#");
buttonEnabled = $(".actions ul li:nth-child(2)")
.addClass("disabled")
.attr("aria-disabled", "true");
}

function enableNext() {
var nextButton = $(".actions ul li:nth-child(2) a");
nextButton.attr("href", "#next");
buttonEnabled = $(".actions ul li:nth-child(2)")
.removeClass("disabled")
.attr("aria-disabled", "false");
}

function updateButton() {
var text = $("input[type=radio][name=scan_mode]").val();
if (text === "") {
disableNext();
return false;
} else {
enableNext();
return true;
}
}

function initTimer() {
if (globalTimeout) clearTimeout(globalTimeout);
globalTimeout = setTimeout(updateButton, 400);
}

$("#schedule_scan_steps").steps({
headerTag: "h3",
bodyTag: "div",
transitionEffect: "slide",
cssClass: "pill wizard",
enableKeyNavigation: false,
onStepChanging: updateButton,
labels: { finish: "Schedule Scan" },
onInit: function (event, current) {
$('a[role="menuitem"]').addClass("text-white");
$(".actions ul li:nth-child(3) a").attr(
"onclick",
`$(this).closest('form').submit()`
);
flatpickr(document.getElementById("clockedTime"), {
enableTime: true,
dateFormat: "Y-m-d H:i",
});
// $(".basic").select2({
// minimumResultsForSearch: -1
// });
},
onStepChanged: function (event, currentIndex, priorIndex) {
if (currentIndex == 1) {
$("input[type=radio][name=scan_mode]").change(initTimer).keyup(initTimer);
disableNext();
}
},
});

$("#excludedPaths").selectize({
persist: false,
createOnBlur: true,
create: true,
});
59 changes: 59 additions & 0 deletions web/startScan/static/startScan/js/start-scan-wizard-init.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
var buttonEnabled = true;
var globalTimeout = 0;

$("#select_engine").steps({
headerTag: "h4",
bodyTag: "div",
transitionEffect: "slide",
cssClass: "pill wizard",
enableKeyNavigation: false,
onStepChanging: updateButton,
labels: { finish: "Start Scan" },
onInit: function (event, current) {
$(".actions ul li:nth-child(3) a").attr(
"onclick",
`$(this).closest('form').submit()`
);
},
});
$("input[type=radio][name=scan_mode]").change(initTimer).keyup(initTimer);
disableNext();
$('a[role="menuitem"]').addClass("text-white");

function initTimer() {
if (globalTimeout) clearTimeout(globalTimeout);
globalTimeout = setTimeout(updateButton, 400);
}
function disableNext() {
var nextButton = $(".actions ul li:nth-child(2) a");
nextButton.attr("href", "#");
buttonEnabled = $(".actions ul li:nth-child(2)")
.addClass("disabled")
.attr("aria-disabled", "true");
}

function enableNext() {
var nextButton = $(".actions ul li:nth-child(2) a");
nextButton.attr("href", "#next");
buttonEnabled = $(".actions ul li:nth-child(2)")
.removeClass("disabled")
.attr("aria-disabled", "false");
}

function updateButton() {
$('a[role="menuitem"]').addClass("btn btn-primary waves-effect waves-light");
var text = $("input[type=radio][name=scan_mode]").val();
if (text === "") {
disableNext();
return false;
} else {
enableNext();
return true;
}
}

$("#excludedPaths").selectize({
persist: false,
createOnBlur: true,
create: true,
});
161 changes: 4 additions & 157 deletions web/startScan/templates/organization/schedule_scan_ui.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<link href="{% static 'plugins/jquery-step/jquery.steps.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'plugins/accordions/custom-accordions.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'plugins/flatpickr/flatpickr.min.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'plugins/selectize/css/selectize.bootstrap3.css' %}" rel="stylesheet" type="text/css" />
{% endblock custom_js_css_link %}

{% block breadcrumb_title %}
Expand All @@ -23,167 +24,13 @@
{% endblock page_title %}

{% block main_content %}
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="heading-title">{{ domain_list|length }} Domains associated with organization {{organization.name}}</h4>
{% for domain in domain_list %}
<span class="badge bg-dark m-1">{{domain.name}}</span>
{% endfor %}
<form method="POST" id="start-scan-form" class="mt-2">
{% csrf_token %}
<div id="schedule_scan_steps">
<h4>Choose the scheduler</h4>
<div class="">
<div class="form-row">
<select class="form-select" onchange="schedulerChanged(this)" name="scheduled_mode" style="line-height: 2.0;">
<option value="periodic">Periodic Scan</option>
<option value="clocked">Clocked Scan</option>
</select>
</div>
<div class="tab-content" id="animateLineContent-4">
<div class="tab-pane fade show active" id="periodic-div" role="tabpanel" aria-labelledby="periodic-tab-tab">
<div class="mb-4">
<h5>Run scan every</h5>
<div class="row">
<div class='col-4'>
<input id="t-text" type="number" name="frequency" value="30" class="form-control form-control-lg">
</div>
<div class="col-8">
<select class="form-select" name="frequency_type" style="line-height: 2.0;">
<option value="minutes">Minutes</option>
<option value="hours">Hours</option>
<option value="days">Days</option>
<option value="weeks">Weeks</option>
<option value="months">Months</option>
</select>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="clocked-div" role="tabpanel" aria-labelledby="clocked-tab-tab">
<div class="mb-4">
<h5>Run scan exactly at</h5>
<div class="row">
<div class="col-12">
<div class="form-group mb-0">
<input type="text" id="clockedTime" class="form-control form-control-lg flatpickr flatpickr-input active" placeholder="Select Scheduler Date and time" name="scheduled_time">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h4>Choose Scan Engine</h4>
<div class="">
<h4>Select Scan Engine</h4>
{% if custom_engine_count == 0 %}
<div class="alert bg-soft-primary border-0 mb-4" role="alert">
<span><b>Tips! </b> You do not have any custom scan engines. Would you like to create your own scan engine?</span>
<a href="{% url 'add_engine' current_project.slug %}" class="text-primary">Create Custom Scan Engine</a>
</div>
{% endif %}
{% include "startScan/_items/scanEngine_select.html" %}
</div>
</div>
</form>
</div>
</div>
</div>
</div>
{% include "startScan/_items/schedule_scan_wizard.html" %}
{% endblock main_content %}


{% block page_level_script %}
<script src="{% static 'plugins/jquery-step/jquery.steps.min.js' %}"></script>
<script src="{% static 'plugins/flatpickr/flatpickr.min.js' %}"></script>
<script type="text/javascript">

function schedulerChanged(selectObject){
selectedValue = selectObject.value;
if (selectedValue == 'periodic') {
var clockedDiv = document.getElementById("clocked-div");
clockedDiv.classList.remove("show");
clockedDiv.classList.remove("active");
var periodicDiv = document.getElementById("periodic-div");
periodicDiv.classList.add("show");
periodicDiv.classList.add("active");
}
else if (selectedValue == 'clocked') {
var periodicDiv = document.getElementById("periodic-div");
periodicDiv.classList.remove("show");
periodicDiv.classList.remove("active");
var clockedDiv = document.getElementById("clocked-div");
clockedDiv.classList.add("show");
clockedDiv.classList.add("active");
}
}


var buttonEnabled = true;
var globalTimeout = 0;


function disableNext(){
var nextButton = $(".actions ul li:nth-child(2) a");
nextButton.attr("href", "#");
buttonEnabled = $(".actions ul li:nth-child(2)").addClass("disabled").attr("aria-disabled", "true");
}

function enableNext(){
var nextButton = $(".actions ul li:nth-child(2) a");
nextButton.attr("href", "#next");
buttonEnabled = $(".actions ul li:nth-child(2)").removeClass("disabled").attr("aria-disabled", "false");
}


function updateButton(){
var text = $("input[type=radio][name=scan_mode]").val();
if(text === ''){
disableNext();
return false;
}else{
enableNext();
return true;
}
}

function initTimer() {
if (globalTimeout) clearTimeout(globalTimeout);
globalTimeout = setTimeout(updateButton, 400);
}

$(function(){
$("#schedule_scan_steps").steps({
headerTag: "h4",
bodyTag: "div",
transitionEffect: "slide",
cssClass: 'pill wizard',
enableKeyNavigation: false,
onStepChanging: updateButton,
labels: {finish: "Start Scan"},
onInit :function (event, current) {
$('a[role="menuitem"]').addClass('text-white');
$(".actions ul li:nth-child(3) a").attr('onclick', `$(this).closest('form').submit()`);
flatpickr(document.getElementById('clockedTime'), {
enableTime: true,
dateFormat: "Y-m-d H:i",
});
$(".basic").select2({
minimumResultsForSearch: -1
});
},
onStepChanged: function (event, currentIndex, priorIndex) {
if (currentIndex == 1){
$("input[type=radio][name=scan_mode]").change(initTimer).keyup(initTimer);
disableNext();
}
}
});

});

</script>
<script src="{% static 'plugins/selectize/js/standalone/selectize.min.js' %}"></script>
<script src="{% static 'startScan/js/schedule-scan-wizard.js' %}"></script>
{% endblock page_level_script %}
36 changes: 7 additions & 29 deletions web/startScan/templates/organization/start_scan.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,13 @@


{% block custom_js_css_link %}
<link href="{% static 'plugins/jquery-step/jquery.steps.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'plugins/accordions/custom-accordions.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'plugins/selectize/css/selectize.bootstrap3.css' %}" rel="stylesheet" type="text/css" />
{% endblock custom_js_css_link %}

{% block breadcrumb_title %}
<li class="breadcrumb-item"><a href="{% url 'list_organization' current_project.slug">Organization</a></li>
<li class="breadcrumb-item"><a href="{% url 'list_organization' current_project.slug %}">Organization</a></li>
<li class="breadcrumb-item active">Initiate Scan</li>
<li class="breadcrumb-item active" aria-current="page">{{organization.name}}</li>
{% endblock breadcrumb_title %}
Expand All @@ -21,36 +23,12 @@
{% endblock page_title %}

{% block main_content %}
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="heading-title">{{ domain_list|length }} Domains associated with organization {{organization.name}}</h4>
{% for domain in domain_list %}
<span class="badge bg-soft-dark text-dark m-1">{{domain.name}}</span>
{% endfor %}
<form method="POST">
{% csrf_token %}
<div class="form-row">
<div class="col-md-12 mb-4">
<h4>Select Scan Engine</h4>
{% if custom_engine_count == 0 %}
<div class="alert bg-soft-primary border-0 mb-4" role="alert">
<span><b>Tips! </b> You do not have any custom scan engines. Would you like to create your own scan engine?</span>
<a href="{% url 'add_engine' current_project.slug %}" class="text-primary">Create Custom Scan Engine</a>
</div>
{% endif %}
{% include "startScan/_items/scanEngine_select.html" %}
<button class="btn btn-primary submit-fn mt-2 float-end" type="submit"><i class="fe-zap"></i> Start Scan</button>
</div>
<input type="hidden" name="list_of_domain_id" value="{{domain_ids}}">
</form>
</div>
</div>
</div>
</div>
{% include "startScan/_items/start_scan_wizard.html" %}
{% endblock main_content %}


{% block page_level_script %}
<script src="{% static 'plugins/jquery-step/jquery.steps.min.js' %}"></script>
<script src="{% static 'plugins/selectize/js/standalone/selectize.min.js' %}"></script>
<script src="{% static 'startScan/js/start-scan-wizard-init.js' %}"></script>
{% endblock page_level_script %}
Loading

0 comments on commit fc3fcdf

Please sign in to comment.