CIRCL
/
lookyloo
mirror of https://github.com/CIRCL/lookyloo
2
0
Fork 0
Code Issues Releases Wiki Activity

Merge branch 'AntoniaBK-report-form'

pull/919/head
Raphaël Vinot 2024-05-16 14:30:31 +02:00
parent f3ae54968e 98f505b0ff
commit 8fb2e2e695
5 changed files with 294 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lookyloo/lookyloo.py
View File

@ -72,7 +72,7 @@ class CaptureSettings(CaptureSettingsCore, total=False):
'''The capture settings that can be passed to Lookyloo''' '''The capture settings that can be passed to Lookyloo'''
listing: int | None listing: int | None
not_queued: int | None not_queued: int | None
auto_report: bool | str | dict[str, str] | None auto_report: bool | str | dict[str, str] | None # {'email': , 'comment': , 'recipient_mail':}
dnt: str | None dnt: str | None
browser_name: str | None browser_name: str | None
os: str | None os: str | None

9
website/web/__init__.py
View File

@ -1574,6 +1574,15 @@ def capture_web() -> str | Response | WerkzeugResponse:
else: else:
flash('Invalid proxy: Check that you entered a scheme, a hostname and a port.', 'error') flash('Invalid proxy: Check that you entered a scheme, a hostname and a port.', 'error')
# auto report
if flask_login.current_user.is_authenticated:
if request.form.get('auto-report'):
capture_query['auto_report'] = {
'email': request.form.get('email', ""),
'comment': request.form.get('comment', ""),
'recipient_mail': request.form.get('recipient-mail', "")
}
if request.form.get('url'): if request.form.get('url'):
capture_query['url'] = request.form['url'] capture_query['url'] = request.form['url']
perma_uuid = lookyloo.enqueue_capture(capture_query, source='web', user=user, authenticated=flask_login.current_user.is_authenticated) perma_uuid = lookyloo.enqueue_capture(capture_query, source='web', user=user, authenticated=flask_login.current_user.is_authenticated)

2
website/web/sri.txt
View File

@ -1,7 +1,7 @@
{ {
"static": { "static": {
"bomb.svg": "Tro3+kCLzfBNBve2gPnsmXsl+tHUQVrFz77zfrWwnAuTraehZaoAfVJgGOYdG8zceXdGLEKzXVi3GdtEXw0sYQ==", "bomb.svg": "Tro3+kCLzfBNBve2gPnsmXsl+tHUQVrFz77zfrWwnAuTraehZaoAfVJgGOYdG8zceXdGLEKzXVi3GdtEXw0sYQ==",
"capture.js": "wdtRc1v2F4NwxeXo5UqHmiKB2vHNptTM0tLCxuIN5HdjgV2ITVNP5Zva0T5fQx00HGIefs5jBcUdjIl7LMb3vQ==", "capture.js": "BjMPL5W9nMRQOX6ZtcGAMVQyJOkhllg8thUCcq1oD9mMB1fH4pk+lR0Alc3XuIvtYyKbLyYBVG7VcSpUSATYNg==",
"check.svg": "CRqUAM/yXxgJwpfg3TeoKD+CIqQj62lxqS3zeCmdPaV3dKftk4jk5Mqc1TGxL7i61X1sgV0/f+KJLEOKTw01ww==", "check.svg": "CRqUAM/yXxgJwpfg3TeoKD+CIqQj62lxqS3zeCmdPaV3dKftk4jk5Mqc1TGxL7i61X1sgV0/f+KJLEOKTw01ww==",
"cookie_in_url.png": "hs/oNPnrR2DkDX9Yp6Daug/QqpWJHemJE6lXpxNafjgOYooezp3DpbqKqADT7QcfcTxxUfe1iPDZJlHOrNMAcw==", "cookie_in_url.png": "hs/oNPnrR2DkDX9Yp6Daug/QqpWJHemJE6lXpxNafjgOYooezp3DpbqKqADT7QcfcTxxUfe1iPDZJlHOrNMAcw==",
"cookie_read.png": "mdXCeuNFPvshSwIXAJLoR1xFjXb+K2Mgu47Q1fnUAO8j1N2c/uJuE8sGuBHHbS8HOyr/CbOC6Uf3zsm9KvAs8Q==", "cookie_read.png": "mdXCeuNFPvshSwIXAJLoR1xFjXb+K2Mgu47Q1fnUAO8j1N2c/uJuE8sGuBHHbS8HOyr/CbOC6Uf3zsm9KvAs8Q==",

219
website/web/static/capture.js
View File

@ -1,33 +1,194 @@
$("#os").change(function(){ // scripts for the submission type
var os_name = $(this).find(":selected").val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_");
var first_browser_name = $("[id='" + os_name + "']").find('select option:first-child').val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_");
// Hide and disable everything
$("#os > option").removeAttr('selected');
$(".style-sub-1").hide();
$(".style-sub-1 > div > select").attr('disabled', true);
$(".style-sub-1 > div > select").removeAttr('selected');
$(".style-sub-2").hide();
$(".style-sub-2 > div > select").attr('disabled', true);
$(".style-sub-2 > div > select").removeAttr('selected');
$("[id='" + os_name + "']").show(); document.getElementById('nav-url-tab').addEventListener('click', function (e) {
$("[id='" + os_name + "'] > div > select").removeAttr('disabled'); // switch to tab for capture of URL(s)
$("[id='" + os_name + "'] > div > select option:first").prop('selected',true);
$("[id='" + os_name + '_' + first_browser_name + "']").show(); // default: single capture field
$("[id='" + os_name + '_' + first_browser_name + "'] > div > select").removeAttr('disabled'); document.getElementById("singleCaptureField").required = true;
$("[id='" + os_name + '_' + first_browser_name + "'] > div > select option:first").prop('selected',true); document.getElementById("singleCaptureField").classList.remove("d-none");
// hide multiple captures field
document.getElementById('multipleCaptures').checked = false;
document.getElementById("multipleCapturesField").required = false;
document.getElementById("multipleCapturesField").classList.add("d-none");
document.getElementById("document").required = false;
}); });
$('select[name="browser"]').change(function(){ document.getElementById('nav-doc-tab').addEventListener('click', function (e) {
var browser_name = $(this).find(":selected").val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_"); // switch to tab for capture of document
var os_name = $(this).parent().parent().attr("id").replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_"); document.getElementById("document").required = true;
document.getElementById("multipleCapturesField").required = false;
// Hide what makes sense document.getElementById("singleCaptureField").required = false;
$(".style-sub-1 > div > select").removeAttr('selected');
$(".style-sub-2").hide();
$(".style-sub-2 > div > select").attr('disabled', true);
$(".style-sub-2 > div > select").removeAttr('selected');
$("[id='" + os_name + '_' + browser_name + "']").show();
$("[id='" + os_name + '_' + browser_name + "'] > div > select").removeAttr('disabled');
}); });
document.getElementById('multipleCaptures').addEventListener('click', function (e) {
// switch input-fields between multiple and single capture
if (document.getElementById('multipleCaptures').checked === true) {
// enable multiple captures
document.getElementById('singleCaptureField').value = '';
document.getElementById("singleCaptureField").classList.add("d-none");
document.getElementById("singleCaptureField").required = false;
document.getElementById("multipleCapturesField").classList.remove("d-none");
document.getElementById("multipleCapturesField").required = true;
} else {
// disable multiple captures
document.getElementById('multipleCapturesField').value = '';
document.getElementById("multipleCapturesField").classList.add("d-none");
document.getElementById("multipleCapturesField").required = false;
document.getElementById("singleCaptureField").classList.remove("d-none");
document.getElementById("singleCaptureField").required = true;
}
});
// scripts for browser configuration of the capture
document.getElementById("os").addEventListener("change", function () {
let osSelect = document.getElementById("os");
let os_name = osSelect.options[osSelect.selectedIndex].value.replace(/(:|\.|\[|\]|,|=|\\)/g, "\\$1").replace(/ /g, "_");
let first_browser_name = document.querySelector(`[id='${os_name}'] select option:first-child`).value.replace(/(:|\.|\[|\]|,|=|\\)/g, "\\$1").replace(/ /g, "_");
// Hide and disable everything
document.querySelectorAll("#os option").forEach(function (option) {
option.removeAttribute('selected');
});
document.querySelectorAll(".style-sub-1").forEach(function (element) {
element.style.display = 'none';
});
document.querySelectorAll(".style-sub-1 > label > span > select").forEach(function (select) {
select.disabled = true;
select.querySelectorAll('option').forEach(function (option) {
option.removeAttribute('selected');
});
});
document.querySelectorAll(".style-sub-2").forEach(function (element) {
element.style.display = 'none';
});
document.querySelectorAll(".style-sub-2 > label > span > select").forEach(function (select) {
select.disabled = true;
select.querySelectorAll('option').forEach(function (option) {
option.removeAttribute('selected');
});
});
// Re-enable and show what makes sense
document.querySelector(`[id='${os_name}']`).style.display = 'block';
document.querySelectorAll(`[id='${os_name}'] > label > span > select`).forEach(function (select) {
select.disabled = false;
select.querySelector('option:first-child').selected = true;
});
document.querySelector(`[id='${os_name}_${first_browser_name}']`).style.display = 'block';
document.querySelectorAll(`[id='${os_name}_${first_browser_name}'] > label > span > select`).forEach(function (select) {
select.disabled = false;
select.querySelector('option:first-child').selected = true;
});
});
document.querySelectorAll('select[name="browser"]').forEach( function(element)
{
element.addEventListener('change', function (e) {
let browser_name = element.options[element.selectedIndex].value.replace(/(:|\.|\[|\]|,|=|\\)/g, "\\$1").replace(/ /g, "_");
let osSelect = document.getElementById("os");
let os_name = osSelect.options[osSelect.selectedIndex].value.replace(/(:|\.|\[|\]|,|=|\\)/g, "\\$1").replace(/ /g, "_");
// Hide and disable every useragent
document.querySelectorAll(".style-sub-2").forEach(function (element) {
element.style.display = 'none';
});
document.querySelectorAll(".style-sub-2 > label > span > select").forEach(function (select) {
select.disabled = true;
select.querySelectorAll('option').forEach(function (option) {
option.removeAttribute('selected');
});
});
// Show only the correct user-agent
document.querySelector(`[id='${os_name}_${browser_name}']`).style.display = 'block';
document.querySelectorAll(`[id='${os_name}_${browser_name}'] > label > span > select`).forEach(function (select) {
select.disabled = false;
select.querySelector('option:first-child').selected = true;
});
});
});
document.getElementById('personal_ua_select').addEventListener('click', function (e) {
//disable select fields when personal useragent (ua) selected etc...
document.getElementById('personal_ua').disabled = false;
document.getElementById('freetext_ua').disabled = true;
disablePredefinedUA();
});
document.getElementById('predefined_ua_select').addEventListener('click', function (e) {
document.getElementById('os-type').value = 'desktop';
document.getElementById('os-type').dispatchEvent(new Event('change'));
document.getElementById('freetext_ua').disabled = true;
document.getElementById('personal_ua').disabled = true;
// Enable predefinded user-agent
let os_type = document.getElementById('os-type');
os_type.value = 'desktop';
os_type.dispatchEvent(new Event('change'))
});
document.getElementById('freetext_ua_select').addEventListener('click', function (e) {
// Enable freetext user-agent
document.getElementById('freetext_ua').disabled = false;
document.getElementById('personal_ua').disabled = true;
disablePredefinedUA()
})
const disablePredefinedUA = function () {
document.getElementById('os-type').disabled = true;
document.getElementById('device-name-mobile').disabled = true;
document.getElementById('os').disabled = true;
document.querySelectorAll('select[name="browser"]').forEach(function (element) {
element.disabled = true;
});
document.querySelectorAll('select[name="user_agent"]').forEach(function (element) {
element.disabled = true;
});
};
document.getElementById('os-type').addEventListener('change', function () {
document.getElementById('os-type').disabled = false;
if (this.value === "mobile") {
document.getElementById("mobiles-list").style.display = 'block';
document.getElementById('device-name-mobile').disabled = false;
document.getElementById("desktops-list").style.display = 'none';
document.getElementById('os').disabled = true;
document.querySelectorAll('select[name="browser"]').forEach(function (element) {
element.disabled = true;
});
document.querySelectorAll('select[name="user_agent"]').forEach(function (element) {
element.disabled = true;
});
} else { // os-type is desktop
document.getElementById("desktops-list").style.display = 'block';
document.getElementById('os').disabled = false;
document.querySelectorAll('select[name="browser"]:not([hidden])').forEach(function (element) {
element.disabled = false;
});
document.querySelectorAll('select[name="user_agent"]:not([hidden])').forEach(function (element) {
element.disabled = false;
});
document.getElementById("mobiles-list").style.display = 'none';
document.getElementById('device-name-mobile').disabled = true;
}
});
// admin-only report-form
let report_form = document.getElementById("auto-report");
if (report_form) { // admin is logged in
report_form.addEventListener('change', function() {
let show_form = document.getElementById("auto-report").checked;
if(show_form) {
document.getElementById("collapseMailConfiguration").style.display = "block";
} else {
document.getElementById("collapseMailConfiguration").style.display = "none";
}
});
}

232
website/web/templates/capture.html
View File

@ -22,7 +22,7 @@
{% block content %} {% block content %}
<div class="container"> <div class="container">
<center> <center>
<a href="{{ url_for('index') }}" title="Go back to index"> <a href="{{ url_for('index') }}" title="Go back to index">
<img src="{{ url_for('static', filename='lookyloo.jpeg') }}" <img src="{{ url_for('static', filename='lookyloo.jpeg') }}"
alt="Lookyloo" width="25%"> alt="Lookyloo" width="25%">
@ -33,7 +33,7 @@
<div class="row mb-3"> <div class="row mb-3">
<div class="col-sm-10"> <div class="col-sm-10">
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" name="listing" {% if default_public %}checked="true"{% endif %}></input> <input class="form-check-input" type="checkbox" id="listing" name="listing" {% if default_public %}checked="checked"{% endif %}>
<label for="listing" class="form-check-label">Display results on public page</label> <label for="listing" class="form-check-label">Display results on public page</label>
</div> </div>
</div> </div>
@ -48,7 +48,7 @@
</nav> </nav>
<div class="tab-content" id="nav-tabContent"> <div class="tab-content" id="nav-tabContent">
</br> <br>
<div class="tab-pane fade show active" id="nav-url" role="tabpanel" aria-labelledby="nav-url-tab"> <div class="tab-pane fade show active" id="nav-url" role="tabpanel" aria-labelledby="nav-url-tab">
<div class="row input-group mb-3"> <div class="row input-group mb-3">
<label for="url" class="col-sm-1 col-form-label">URL:</label> <label for="url" class="col-sm-1 col-form-label">URL:</label>
@ -58,13 +58,13 @@
<textarea class="form-control col-auto d-none" placeholder="URLs to capture, one per line" <textarea class="form-control col-auto d-none" placeholder="URLs to capture, one per line"
name="urls" id=multipleCapturesField></textarea> name="urls" id=multipleCapturesField></textarea>
<span class="col-sm-2 input-group-text"> <div class="col-sm-2 input-group-text">
<div class="form-check"> <div class="form-check">
<input class="form-check-input" name="multipleCaptures" id="multipleCaptures" type="checkbox" <input class="form-check-input" name="multipleCaptures" id="multipleCaptures" type="checkbox"
value="" aria-label="tick to enable multiple captures"> value="" aria-label="tick to enable multiple captures">
<label for="multipleCaptures" class="form-check-label">Multiple captures</label> <label for="multipleCaptures" class="form-check-label">Multiple captures</label>
</div> </div>
</span> </div>
</div> </div>
</div> </div>
@ -83,26 +83,26 @@
<div> <div>
<button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConfigBrowser" <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConfigBrowser"
aria-expanded="false" aria-controls="collapseConfigBrowser"> aria-expanded="false" aria-controls="collapseConfigBrowser">
<p style="margin-left: -12px; margin-top: 12px; font-size: x-large; color: black; text-decoration: underline; text-decoration-color: blue;"> <p style="margin-left: -12px; margin-top: 12px; font-size: x-large; color: black; text-decoration: underline; text-decoration-color: blue;">
<b>Browser Configuration</b> <b>Browser Configuration</b>
</p> </p>
</button> </button>
<div class="help-tip" title="Lookyloo uses an emulated browser for all captures, click to configure the User-Agent"></div> <div class="help-tip" title="Lookyloo uses an emulated browser for all captures, click to configure the User-Agent"></div>
</div> </div>
<div id="collapseConfigBrowser" class="collapse d-xl-block"> <div id="collapseConfigBrowser" class="collapse show">
<div class="card card-body"> <div class="card card-body">
{% if personal_ua %} {% if personal_ua %}
<div class="row mb-3"> <div class="row mb-3">
<div class="col-sm-10"> <div class="col-sm-10">
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="radio" id="personal_ua_select" name="user_agent_select"></input> <input class="form-check-input" type="radio" id="personal_ua_select" name="user_agent_select">
<label for="personal_ua_select" class="form-check-label"> <label for="personal_ua_select" class="form-check-label">
Use the current <a href="https://en.wikipedia.org/wiki/User_agent">user-agent</a> of your own browser:</br> Use the current <a href="https://en.wikipedia.org/wiki/User_agent">user-agent</a> of your own browser:<br>
{{ personal_ua }} {{ personal_ua }}
</label> </label>
<input class="visually-hidden" type="text" id="personal_ua" name="personal_ua" value="{{ personal_ua }}" disabled></input> <input class="visually-hidden" type="text" id="personal_ua" name="personal_ua" value="{{ personal_ua }}" disabled>
</div> </div>
</div> </div>
</div> </div>
@ -112,7 +112,7 @@
<div class="row mb-3"> <div class="row mb-3">
<div class="col-sm-10"> <div class="col-sm-10">
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="radio" id="predefined_ua_select" name="user_agent_select" checked></input> <input class="form-check-input" type="radio" id="predefined_ua_select" name="user_agent_select" checked>
<label for="predefined_ua_select" class="form-check-label">Pick the <a href="https://en.wikipedia.org/wiki/User_agent">user-agent</a> of your choice:</label> <label for="predefined_ua_select" class="form-check-label">Pick the <a href="https://en.wikipedia.org/wiki/User_agent">user-agent</a> of your choice:</label>
</div> </div>
</div> </div>
@ -144,31 +144,35 @@
{% for os, browsers in user_agents.items() %} {% for os, browsers in user_agents.items() %}
<!-- Hide the browsers that aren't part of the default os --> <!-- Hide the browsers that aren't part of the default os -->
<div id="{{os.replace(' ', '_')}}" class="style-sub-1 row mb-3" {% if not os==default['os'] %}style="display: none;"{%endif%}> <div id="{{os.replace(' ', '_')}}" class="style-sub-1" {% if not os==default['os'] %}style="display: none;"{%endif%}>
<label for="browser" class="col-sm-2 col-form-label">Browser Type:</label> <label class="row mb-3">
<div class="col-sm-10"> <span class="col-sm-2 col-form-label">Browser Type:</span>
<!-- Disable all the selects not related to the default os --> <span class="col-sm-10">
<select class="form-select" name="browser" {% if not os==default['os'] %}disabled{%endif%}> <!-- Disable all the selects not related to the default os -->
{% for browser in browsers.keys()|sort(reverse=True) %} <select class="form-select" name="browser" {% if not os==default['os'] %}disabled{%endif%}>
<!-- Select the default browser --> {% for browser in browsers.keys()|sort(reverse=True) %}
<option value="{{ browser }}" {% if browser==default['browser'] %}selected{% endif %}>{{ browser }}</option> <!-- Select the default browser -->
{% endfor%} <option value="{{ browser }}" {% if browser==default['browser'] %}selected{% endif %}>{{ browser }}</option>
</select> {% endfor%}
</div> </select>
</span>
</label>
</div> </div>
{% for browser, user_agents in browsers.items() %} {% for browser, user_agents in browsers.items() %}
<!-- Hide the user agents that aren't part of the default OS and browsers that aren't part of the default os --> <!-- Hide the user agents that aren't part of the default OS and browsers that aren't part of the default os -->
<div id="{{os.replace(' ', '_')}}_{{browser.replace(' ', '_')}}" class="style-sub-2 row mb-3" {% if not os==default['os'] or not browser==default['browser']%} style="display: none;"{%endif%}> <div id="{{os.replace(' ', '_')}}_{{browser.replace(' ', '_')}}" class="style-sub-2" {% if not os==default['os'] or not browser==default['browser']%} style="display: none;"{%endif%}>
<label for="user_agent" class="col-sm-2 col-form-label">User-Agent:</label> <label class="row mb-3">
<div class="col-sm-10"> <span class="col-sm-2 col-form-label">User-Agent:</span>
<!-- Disable all the selects, unless it is in default os and browser --> <span class="col-sm-10">
<select class="form-select" name="user_agent" {% if not os==default['os'] or not browser==default['browser'] %}disabled{%endif%}> <!-- Disable all the selects, unless it is in default os and browser -->
{% for user_agent in user_agents %} <select class="form-select" name="user_agent" {% if not os==default['os'] or not browser==default['browser'] %}disabled{%endif%}>
<!-- Select the default ua --> {% for user_agent in user_agents %}
<option value="{{ user_agent }}" {% if user_agent==default['useragent'] %}selected{% endif %}>{{ user_agent }}</option> <!-- Select the default ua -->
{% endfor%} <option value="{{ user_agent }}" {% if user_agent==default['useragent'] %}selected{% endif %}>{{ user_agent }}</option>
</select> {% endfor%}
</div> </select>
</span>
</label>
</div> </div>
{% endfor%} {% endfor%}
{% endfor%} {% endfor%}
@ -179,7 +183,7 @@
<!-- Mobiles --> <!-- Mobiles -->
<div id="mobiles-list" style="display:none"> <div id="mobiles-list" style="display:none">
<div class="row mb-3"> <div class="row mb-3">
<label for="os" class="col-sm-2 col-form-label">Device name:</label> <label for="device-name-mobile" class="col-sm-2 col-form-label">Device name:</label>
<div class="col-sm-10"> <div class="col-sm-10">
<select class="form-select" name="device_name" id="device-name-mobile" disabled> <select class="form-select" name="device_name" id="device-name-mobile" disabled>
{% for device_name in devices['mobile']['default'].keys() %} {% for device_name in devices['mobile']['default'].keys() %}
@ -195,7 +199,7 @@
<div class="row mb-3"> <div class="row mb-3">
<div class="col-sm-10"> <div class="col-sm-10">
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="radio" id="freetext_ua_select" name="user_agent_select"></input> <input class="form-check-input" type="radio" id="freetext_ua_select" name="user_agent_select">
<label for="freetext_ua_select" class="form-check-label">Type the <a href="https://en.wikipedia.org/wiki/User_agent">user-agent</a> of your choice:</label> <label for="freetext_ua_select" class="form-check-label">Type the <a href="https://en.wikipedia.org/wiki/User_agent">user-agent</a> of your choice:</label>
</div> </div>
</div> </div>
@ -214,9 +218,9 @@
<div> <div>
<button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConfigCapture" aria-expanded="false" aria-controls="collapseConfigCapture"> <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConfigCapture" aria-expanded="false" aria-controls="collapseConfigCapture">
<p style="margin-left: -12px; margin-top: 12px; font-size: x-large; color: black; text-decoration: underline; text-decoration-color: blue;"> <p style="margin-left: -12px; margin-top: 12px; font-size: x-large; color: black; text-decoration: underline; text-decoration-color: blue;">
<b>Capture Configuration</b> <b>Capture Configuration</b>
</p> </p>
</button> </button>
<div class="help-tip" title="Edit configuration options for the capture."></div> <div class="help-tip" title="Edit configuration options for the capture."></div>
</div> </div>
@ -227,7 +231,7 @@
<label for="allow_tracking" class="col-sm-2 col-form-check-label">Allow tracking:</label> <label for="allow_tracking" class="col-sm-2 col-form-check-label">Allow tracking:</label>
<div class="col-sm-10"> <div class="col-sm-10">
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" name="allow_tracking" aria-describedby="allow_tracking_help"></input> <input class="form-check-input" type="checkbox" id="allow_tracking" name="allow_tracking" aria-describedby="allow_tracking_help">
<div id="allow_tracking_help" class="form-text">We'll attempt to click on the button allowing the website captured to violate your privacy.</div> <div id="allow_tracking_help" class="form-text">We'll attempt to click on the button allowing the website captured to violate your privacy.</div>
</div> </div>
</div> </div>
@ -246,7 +250,7 @@
<label for="dnt" class="col-sm-2 col-form-label"><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/DNT">Do not Track</a>:</label> <label for="dnt" class="col-sm-2 col-form-label"><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/DNT">Do not Track</a>:</label>
<div class="col-sm-10"> <div class="col-sm-10">
<select class="form-select" name="dnt" id="dnt" aria-label="Select a value for the Do Not Track HTTP Header"> <select class="form-select" name="dnt" id="dnt" aria-label="Select a value for the Do Not Track HTTP Header">
<option value="" selected>Select a value for the DNT header (header not set otherwise)</button> <option value="" selected>Select a value for the DNT header (header not set otherwise)</option>
<option value="0">0 (The user prefers to allow tracking on the target site.)</option> <option value="0">0 (The user prefers to allow tracking on the target site.)</option>
<option value="1">1 (The user prefers not to be tracked on the target site.)</option> <option value="1">1 (The user prefers not to be tracked on the target site.)</option>
<option value="null">null (The user has not specified a preference about tracking.)</option> <option value="null">null (The user has not specified a preference about tracking.)</option>
@ -356,16 +360,53 @@
<hr> <hr>
{% if current_user.is_authenticated %}
<!-- admin only checkbox for autoreport -->
<div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="auto-report" name="auto-report" >
<label for="auto-report" class="form-check-label">Automatically submit to investigation team</label>
</div>
<div id="collapseMailConfiguration" class="collapse">
<div class="card card-body">
<div class="row mb-3">
<label class="col-sm-3 col-form-label" for="email">Email of the sender (optional): </label>
<div class="col-sm-9">
<input class="form-control" type="text" id="email"
name="email" placeholder="myself@example.com">
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label" for="recipient-mail">
Email of the recipient (optional): </label>
<div class="col-sm-9">
<input class="form-control" type="text" id="recipient-mail"
name="recipient-mail" placeholder="to-someone@example.com">
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label" for="comment">Comment (optional): </label>
<div class="col-sm-9">
<textarea class="form-control" id="comment" name="comment" rows="3"></textarea>
</div>
</div>
</div>
</div>
</div>
<hr>
{% endif %}
<center> <center>
<b> <b>
{% if default_public %} {% if default_public %}
By default, the capture is public. If you do not want that, untick the box at the top of the form. By default, the capture is public. If you do not want that, untick the box at the top of the form.
{% else %} {% else %}
By default, the capture is private (not visible on the index page). If you want it to be public tick the box at the top of the form. By default, the capture is private (not visible on the index page). If you want it to be public tick the box at the top of the form.
{% endif %} {% endif %}
</b> </b>
</br> <br>
</br> <br>
<button type="submit" class="new-capture-button btn btn-primary" id="btn-looking">Start looking!</button> <button type="submit" class="new-capture-button btn btn-primary" id="btn-looking">Start looking!</button>
</center> </center>
</form> </form>
@ -375,94 +416,7 @@
{% block scripts %} {% block scripts %}
{{ super() }} {{ super() }}
<script src='{{ url_for('static', filename='capture.js') }}' <script src='{{ url_for('static', filename='capture.js') }}'
{{get_sri('static', 'capture.js')}} {{get_sri('static', 'capture.js')}}
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<script>
$('#nav-url-tab').on('click', function(e) {
document.getElementById("singleCaptureField").required = true;
document.getElementById("document").required = false;
$("#singleCaptureField").removeClass("d-none");
document.getElementById('multipleCaptures').checked = false;
$("#multipleCapturesField").addClass("d-none");
});
$('#nav-doc-tab').on('click', function(e) {
document.getElementById("document").required = true;
document.getElementById("multipleCapturesField").required = false;
document.getElementById("singleCaptureField").required = false;
});
</script>
<script>
$('#multipleCaptures').on('click', function(e) {
if (document.getElementById('multipleCaptures').checked == true) {
document.getElementById('singleCaptureField').value = '';
$("#singleCaptureField").addClass("d-none");
document.getElementById("singleCaptureField").required = false;
$("#multipleCapturesField").removeClass("d-none");
document.getElementById("multipleCapturesField").required = true;
}
else {
document.getElementById('multipleCapturesField').value = '';
$("#singleCaptureField").removeClass("d-none");
document.getElementById("singleCaptureField").required = true;
$("#multipleCapturesField").addClass("d-none");
document.getElementById("multipleCapturesField").required = false;
}
})
</script>
<script>
$('#personal_ua_select').on('click', function(e) {
$('#personal_ua').prop("disabled", false);
$('#freetext_ua').prop("disabled", true);
disablePredefinedUA();
});
$('#predefined_ua_select').on('click', function(e) {
$('#os-type').val('desktop').trigger('change');
$('#freetext_ua').prop("disabled", true);
$('#personal_ua').prop("disabled", true);
});
$('#freetext_ua_select').on('click', function(e) {
$('#freetext_ua').prop("disabled", false);
$('#personal_ua').prop("disabled", true);
disablePredefinedUA();
});
const disablePredefinedUA = function() {
$('#os-type').prop("disabled", true);
$('#device-name-mobile').prop("disabled", true);
$('#os').prop("disabled", true);
$('select[name="browser"]').prop("disabled", true);
$('select[name="user_agent"]').prop("disabled", true);
};
$('#os-type').on('change', function() {
$('#os-type').prop("disabled", false);
if ( this.value == "mobile")
{
$("#mobiles-list").show();
$('#device-name-mobile').prop("disabled", false);
$("#desktops-list").hide();
$('#os').prop("disabled", true);
$('select[name="browser"]').prop("disabled", true);
$('select[name="user_agent"]').prop("disabled", true);
}
else
{
$("#desktops-list").show();
$('#os').prop("disabled", false);
$('select[name="browser"]:visible').prop("disabled", false);
$('select[name="user_agent"]:visible').prop("disabled", false);
$("#mobiles-list").hide();
$('#device-name-mobile').prop("disabled", true);
}
});
</script>
{% endblock %} {% endblock %}