senaduka/old-riskletpy
1
0
Fork 0
Code Issues 5 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge branch '19-napraviti-progres-kod-pitanja' into 'master'

Browse Source 
Added progress bar

Closes #19

See merge request kbr4/riskletpy!22
This commit was merged in pull request #71.
This commit is contained in:
amir sabani
2025-05-13 13:07:48 +00:00
parent 993d2f31bb 99805df8ec
commit bcb89e16c7
2 changed files with 80 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
backend/core/static/js/formHandling.js
View File

@@ -80,7 +80,6 @@ function setUpNavigation() {
}
async function setNextButtonAvailability() {
console.log('Setting next button availability');
// check if current question is answered
// and then enable the next button, disable it otherwise
const currentQuestion = document.getElementById(`q${document.currentQuestion}`);
@@ -176,6 +175,7 @@ function hideNavElementsAndQuestions() {
function showQuestion(questionId) {
const question = document.getElementById(questionId);
question.classList.remove('d-none');
progressBar();
}
function setButtonVisiblity(buttonId, visible) {
@@ -207,3 +207,46 @@ async function validateFormFields(nextBtn, errorDiv) {
}
function progressBar() {
const basic = Array.from(document.querySelectorAll('.basic-section'));
const advanced = Array.from(document.querySelectorAll('.advanced-section'));
const basicProgress = document.getElementById('basic-progress');
const advancedProgress = document.getElementById('advanced-progress');
const basicBar = document.getElementById('basic-progress-bar');
const advancedBar = document.getElementById('advanced-progress-bar');
const basicBarWrap = document.getElementById('basic-progress-bar-wrap');
const advancedBarWrap = document.getElementById('advanced-progress-bar-wrap');
let currentId = `q${document.currentQuestion}`;
let idxBasic = basic.findIndex(q => q.id === currentId);
let idxAdvanced = advanced.findIndex(q => q.id === currentId);
if (idxBasic !== -1) {
basicProgress.classList.remove('d-none');
basicBarWrap.classList.remove('d-none');
advancedProgress.classList.add('d-none');
advancedBarWrap.classList.add('d-none');
if (idxBasic + 1 === basic.length) {
basicProgress.innerHTML = `<span class="text-success fw-bold">Basic question &#10003;</span>`;
basicBarWrap.classList.add('d-none');
} else {
basicProgress.innerText = `Question ${idxBasic + 1} / ${basic.length -1 }`;
}
let percent = ((idxBasic + 1) / basic.length) * 100;
basicBar.style.width = percent + "%";
basicBar.setAttribute('aria-valuenow', percent);
} else if (idxAdvanced !== -1) {
advancedProgress.classList.remove('d-none');
advancedBarWrap.classList.remove('d-none');
basicBarWrap.classList.add('d-none');
advancedProgress.innerText = `Advanced Question ${idxAdvanced + 1} / ${advanced.length}`;
let percent = ((idxAdvanced + 1) / advanced.length) * 100;
advancedBar.style.width = percent + "%";
advancedBar.setAttribute('aria-valuenow', percent);
} else {
basicProgress.classList.add('d-none');
advancedProgress.classList.add('d-none');
basicBarWrap.classList.add('d-none');
advancedBarWrap.classList.add('d-none');
}
}

62
backend/core/templates/signup.html
View File

@@ -8,6 +8,16 @@
</div>
<h1 class="pt-4 mb-4">Risk Assessment Questions</h1>
<hr>
<div id="basic-progress" class="mb-3 text-center fw-bold"></div>
<div id="advanced-progress" class="mb-3 text-center fw-bold d-none"></div>
<div class="progress mb-3" id="basic-progress-bar-wrap">
<div id="basic-progress-bar" class="progress-bar" role="progressbar" style="width: 0%"></div>
</div>
<div class="progress mb-3 d-none" id="advanced-progress-bar-wrap">
<div id="advanced-progress-bar" class="progress-bar bg-success" role="progressbar" style="width: 0%"></div>
</div>
<hr>
<form method="post">
{% if form.errors %}
<div class="alert alert-danger">
@@ -26,7 +36,7 @@
{% csrf_token %}
<!-- Organization Name & Email -->
<div class="mb-3 question" id="q0">
<div class="mb-3 question basic-section" id="q0">
<label class="form-label mt-3">Organization Name and Your Email:</label>
<hr>
<div class="pb-3">
@@ -40,7 +50,7 @@
</div>
<!-- Employee Headcount -->
<div class="mb-3 question" id="q1">
<div class="mb-3 question basic-section" id="q1">
<label class="form-label mt-3">Employee Headcount:</label>
<small class="form-text text-muted">
Select one range - Scale factor for internal user base & potential insider risk
@@ -77,7 +87,7 @@
</div>
<!-- Annual Revenue -->
<div class="mb-3 question" id="q2">
<div class="mb-3 question basic-section" id="q2">
<label class="form-label mt-3">
Annual Revenue Range:
<br>
@@ -118,7 +128,7 @@
</div>
<!-- Critical Business Applications -->
<div class="mb-3 question" id="q3">
<div class="mb-3 question basic-section" id="q3">
<label class="form-label mt-3">How many critical business applications do your employees use
daily?</label>
<hr>
@@ -149,7 +159,7 @@
</div>
<!-- Regulatory Frameworks -->
<div class="mb-3 question" id="q4">
<div class="mb-3 question basic-section" id="q4">
<label class="form-label mt-3">
Applicable Regulatory / Compliance Frameworks:
<br>
@@ -216,7 +226,7 @@
</div>
<!-- Industry Sector -->
<div class="mb-3 question" id="q5">
<div class="mb-3 question basic-section" id="q5">
<label class="form-label mt-3">
Primary Industry Sector:
<br>
@@ -288,7 +298,7 @@
</div>
<!-- IT Dependency -->
<div class="mb-3 question" id="q6">
<div class="mb-3 question basic-section" id="q6">
<label class="form-label mt-3">
Business Operations Dependence on Technology:
<br>
@@ -329,7 +339,7 @@
</div>
<!-- Sensitive Data Level -->
<div class="mb-3 question" id="q7">
<div class="mb-3 question basic-section" id="q7">
<label class="form-label mt-3">
Sensitive Data Handled:
<br>
@@ -386,7 +396,7 @@
</div>
<!-- Overall Sensitivity Level of Data Processed -->
<div class="mb-3 question" id="q8">
<div class="mb-3 question basic-section" id="q8">
<label class="form-label mt-3">
Overall Sensitivity Level of Data Processed:
<br>
@@ -427,7 +437,7 @@
</div>
<!-- Intellectual Property (IP) Value -->
<div class="mb-3 question" id="q9">
<div class="mb-3 question basic-section" id="q9">
<label class="form-label mt-3">
Intellectual Property (IP) Value:
<br>
@@ -468,7 +478,7 @@
</div>
<!-- Remote Workforce Percentage -->
<div class="mb-3 question" id="q10">
<div class="mb-3 question basic-section" id="q10">
<label class="form-label mt-3">What percentage of your workforce operates remotely?</label>
<hr>
<div class="pb-3">
@@ -498,7 +508,7 @@
</div>
<!-- Third-Party Vendor Access -->
<div class="mb-3 question" id="q11">
<div class="mb-3 question basic-section" id="q11">
<label class="form-label mt-3">How many third-party vendors have access to your systems?</label>
<hr>
<div class="pb-3">
@@ -528,7 +538,7 @@
</div>
<!-- Internal Software Development -->
<div class="mb-3 question" id="q12">
<div class="mb-3 question basic-section" id="q12">
<label class="form-label mt-3">
Internal Software Development for Critical Applications:
<br>
@@ -556,7 +566,7 @@
</div>
<!-- IT Infrastructure Model -->
<div class="mb-3 question" id="q13">
<div class="mb-3 question basic-section" id="q13">
<label class="form-label mt-3">What is your primary IT infrastructure model?</label>
<hr>
<div class="pb-3">
@@ -591,7 +601,7 @@
<div class="mb-3 question" id="q14">
<div class="mb-3 question basic-section" id="q14">
<label class="form-label mt-3">We currently have sufficient information to prepare a basic report. However, providing additional details will help enhance the accuracy and depth of the final report. Would you like to share more information?</label>
@@ -611,7 +621,7 @@
<!-- skip rest if needed -->
<!-- Network Infrastructure Model -->
<div class="mb-3 question" id="q15">
<div class="mb-3 question advanced-section" id="q15">
<label class="form-label mt-3">
Network Infrastructure Model:
<br>
@@ -648,7 +658,7 @@
</div>
<!-- Geographic Operational Scope -->
<div class="mb-3 question" id="q16">
<div class="mb-3 question advanced-section" id="q16">
<label class="form-label mt-3">
Geographic Operational Scope:
<br>
@@ -680,7 +690,7 @@
</div>
<!--Customer Base Distribution -->
<div class="mb-3 question" id="q17">
<div class="mb-3 question advanced-section" id="q17">
<label class="form-label mt-3">
Customer Base Distribution:
<br>
@@ -708,7 +718,7 @@
<!-- Primary Customer Type -->
<div class="mb-3 question" id="q18">
<div class="mb-3 question advanced-section" id="q18">
<label class="form-label mt-3">
Primary Customer Type:
<br>
@@ -744,7 +754,7 @@
<!-- Product/Service Portfolio -->
<div class="mb-3 question" id="q19">
<div class="mb-3 question advanced-section" id="q19">
<label class="form-label mt-3">
Product/Service Portfolio Diversity:
<br>
@@ -772,7 +782,7 @@
</div>
<!-- Supplier Base Structure -->
<div class="mb-3 question" id="q20">
<div class="mb-3 question advanced-section" id="q20">
<label class="form-label mt-3">
Dependency on Critical Suppliers:
<br>
@@ -799,7 +809,7 @@
</div>
<!-- Intellectual Property Protection -->
<div class="mb-3 question" id="q21">
<div class="mb-3 question advanced-section" id="q21">
<label class="form-label mt-3">How does your organization protect and manage intellectual
property?</label>
<hr>
@@ -835,7 +845,7 @@
</div>
<!-- Sensitive Data -->
<div class="mb-3 question" id="q22">
<div class="mb-3 question advanced-section" id="q22">
<label class="form-label mt-3">What type of sensitive data does your organization handle?</label>
<hr>
<div class="pb-3">
@@ -874,7 +884,7 @@
</div>
<!-- Critical Business Systems -->
<div class="mb-3 question" id="q23">
<div class="mb-3 question advanced-section" id="q23">
<label class="form-label mt-3">
Integration of Critical Business Systems:
<br>
@@ -913,7 +923,7 @@
</div>
<!-- Rate of Technology / Business Change -->
<div class="mb-3 question" id="q24">
<div class="mb-3 question advanced-section" id="q24">
<label class="form-label mt-3">
Rate of Technology / Business Change:
<br>
@@ -948,7 +958,7 @@
</div>
<!-- Relevant Threat Actors -->
<div class="mb-3 question" id="q25">
<div class="mb-3 question advanced-section" id="q25">
<label class="form-label mt-3">
Relevant Threat Actors:
<br>