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'''
listing: 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
browser_name: str | None
os: str | None

9
website/web/__init__.py
View File

@ -1574,6 +1574,15 @@ def capture_web() -> str | Response | WerkzeugResponse:
else:
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'):
capture_query['url'] = request.form['url']
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": {
"bomb.svg": "Tro3+kCLzfBNBve2gPnsmXsl+tHUQVrFz77zfrWwnAuTraehZaoAfVJgGOYdG8zceXdGLEKzXVi3GdtEXw0sYQ==",
"capture.js": "wdtRc1v2F4NwxeXo5UqHmiKB2vHNptTM0tLCxuIN5HdjgV2ITVNP5Zva0T5fQx00HGIefs5jBcUdjIl7LMb3vQ==",
"capture.js": "BjMPL5W9nMRQOX6ZtcGAMVQyJOkhllg8thUCcq1oD9mMB1fH4pk+lR0Alc3XuIvtYyKbLyYBVG7VcSpUSATYNg==",
"check.svg": "CRqUAM/yXxgJwpfg3TeoKD+CIqQj62lxqS3zeCmdPaV3dKftk4jk5Mqc1TGxL7i61X1sgV0/f+KJLEOKTw01ww==",
"cookie_in_url.png": "hs/oNPnrR2DkDX9Yp6Daug/QqpWJHemJE6lXpxNafjgOYooezp3DpbqKqADT7QcfcTxxUfe1iPDZJlHOrNMAcw==",
"cookie_read.png": "mdXCeuNFPvshSwIXAJLoR1xFjXb+K2Mgu47Q1fnUAO8j1N2c/uJuE8sGuBHHbS8HOyr/CbOC6Uf3zsm9KvAs8Q==",

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

@ -1,33 +1,194 @@
$("#os").change(function(){
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');
// scripts for the submission type
$("[id='" + os_name + "']").show();
$("[id='" + os_name + "'] > div > select").removeAttr('disabled');
$("[id='" + os_name + "'] > div > select option:first").prop('selected',true);
$("[id='" + os_name + '_' + first_browser_name + "']").show();
$("[id='" + os_name + '_' + first_browser_name + "'] > div > select").removeAttr('disabled');
$("[id='" + os_name + '_' + first_browser_name + "'] > div > select option:first").prop('selected',true);
document.getElementById('nav-url-tab').addEventListener('click', function (e) {
// switch to tab for capture of URL(s)
// default: single capture field
document.getElementById("singleCaptureField").required = 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(){
var browser_name = $(this).find(":selected").val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_");
var os_name = $(this).parent().parent().attr("id").replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_");
// Hide what makes sense
$(".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('nav-doc-tab').addEventListener('click', function (e) {
// switch to tab for capture of document
document.getElementById("document").required = true;
document.getElementById("multipleCapturesField").required = false;
document.getElementById("singleCaptureField").required = false;
});
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 %}
<div class="container">
<center>
<center>
<a href="{{ url_for('index') }}" title="Go back to index">
<img src="{{ url_for('static', filename='lookyloo.jpeg') }}"
alt="Lookyloo" width="25%">
@ -33,7 +33,7 @@
<div class="row mb-3">
<div class="col-sm-10">
<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>
</div>
</div>
@ -48,7 +48,7 @@
</nav>
<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="row input-group mb-3">
<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"
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">
<input class="form-check-input" name="multipleCaptures" id="multipleCaptures" type="checkbox"
value="" aria-label="tick to enable multiple captures">
<label for="multipleCaptures" class="form-check-label">Multiple captures</label>
</div>
</span>
</div>
</div>
</div>
@ -83,26 +83,26 @@
<div>
<button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#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;">
<b>Browser Configuration</b>
</p>
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;">
<b>Browser Configuration</b>
</p>
</button>
<div class="help-tip" title="Lookyloo uses an emulated browser for all captures, click to configure the User-Agent"></div>
</div>
<div id="collapseConfigBrowser" class="collapse d-xl-block">
<div id="collapseConfigBrowser" class="collapse show">
<div class="card card-body">
{% if personal_ua %}
<div class="row mb-3">
<div class="col-sm-10">
<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">
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 }}
</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>
@ -112,7 +112,7 @@
<div class="row mb-3">
<div class="col-sm-10">
<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>
</div>
</div>
@ -144,31 +144,35 @@
{% for os, browsers in user_agents.items() %}
<!-- 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%}>
<label for="browser" class="col-sm-2 col-form-label">Browser Type:</label>
<div class="col-sm-10">
<!-- Disable all the selects not related to the default os -->
<select class="form-select" name="browser" {% if not os==default['os'] %}disabled{%endif%}>
{% for browser in browsers.keys()|sort(reverse=True) %}
<!-- Select the default browser -->
<option value="{{ browser }}" {% if browser==default['browser'] %}selected{% endif %}>{{ browser }}</option>
{% endfor%}
</select>
</div>
<div id="{{os.replace(' ', '_')}}" class="style-sub-1" {% if not os==default['os'] %}style="display: none;"{%endif%}>
<label class="row mb-3">
<span class="col-sm-2 col-form-label">Browser Type:</span>
<span class="col-sm-10">
<!-- Disable all the selects not related to the default os -->
<select class="form-select" name="browser" {% if not os==default['os'] %}disabled{%endif%}>
{% for browser in browsers.keys()|sort(reverse=True) %}
<!-- Select the default browser -->
<option value="{{ browser }}" {% if browser==default['browser'] %}selected{% endif %}>{{ browser }}</option>
{% endfor%}
</select>
</span>
</label>
</div>
{% 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 -->
<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%}>
<label for="user_agent" class="col-sm-2 col-form-label">User-Agent:</label>
<div class="col-sm-10">
<!-- Disable all the selects, unless it is in default os and browser -->
<select class="form-select" name="user_agent" {% if not os==default['os'] or not browser==default['browser'] %}disabled{%endif%}>
{% for user_agent in user_agents %}
<!-- Select the default ua -->
<option value="{{ user_agent }}" {% if user_agent==default['useragent'] %}selected{% endif %}>{{ user_agent }}</option>
{% endfor%}
</select>
</div>
<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 class="row mb-3">
<span class="col-sm-2 col-form-label">User-Agent:</span>
<span class="col-sm-10">
<!-- Disable all the selects, unless it is in default os and browser -->
<select class="form-select" name="user_agent" {% if not os==default['os'] or not browser==default['browser'] %}disabled{%endif%}>
{% for user_agent in user_agents %}
<!-- Select the default ua -->
<option value="{{ user_agent }}" {% if user_agent==default['useragent'] %}selected{% endif %}>{{ user_agent }}</option>
{% endfor%}
</select>
</span>
</label>
</div>
{% endfor%}
{% endfor%}
@ -179,7 +183,7 @@
<!-- Mobiles -->
<div id="mobiles-list" style="display:none">
<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">
<select class="form-select" name="device_name" id="device-name-mobile" disabled>
{% for device_name in devices['mobile']['default'].keys() %}
@ -195,7 +199,7 @@
<div class="row mb-3">
<div class="col-sm-10">
<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>
</div>
</div>
@ -214,9 +218,9 @@
<div>
<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;">
<b>Capture Configuration</b>
</p>
<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>
</p>
</button>
<div class="help-tip" title="Edit configuration options for the capture."></div>
</div>
@ -227,7 +231,7 @@
<label for="allow_tracking" class="col-sm-2 col-form-check-label">Allow tracking:</label>
<div class="col-sm-10">
<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>
</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>
<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">
<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="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>
@ -356,16 +360,53 @@
<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>
<b>
{% if default_public %}
By default, the capture is public. If you do not want that, untick the box at the top of the form.
{% 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.
{% endif %}
{% if default_public %}
By default, the capture is public. If you do not want that, untick the box at the top of the form.
{% 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.
{% endif %}
</b>
</br>
</br>
<br>
<br>
<button type="submit" class="new-capture-button btn btn-primary" id="btn-looking">Start looking!</button>
</center>
</form>
@ -375,94 +416,7 @@
{% block scripts %}
{{ super() }}
<script src='{{ url_for('static', filename='capture.js') }}'
{{get_sri('static', 'capture.js')}}
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>
{{get_sri('static', 'capture.js')}}
crossorigin="anonymous"></script>
{% endblock %}