Make the report-form look better

pull/914/head
AntoniaBK 2024-05-13 11:33:15 +02:00
parent 33d1677722
commit 6dd71fba1f
1 changed files with 50 additions and 43 deletions

View File

@ -22,18 +22,18 @@
{% block content %}
<div class="container">
<center>
<a href="{{ url_for('index') }}" title="Go back to index">
<img src="{{ url_for('static', filename='lookyloo.jpeg') }}"
alt="Lookyloo" width="25%">
</a>
</center>
{{ render_messages(container=True, dismissible=True) }}
<form role="form" action="{{ url_for('capture_web') }}" method=post enctype=multipart/form-data>
<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,23 +48,24 @@
</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>
<label class="col-sm-1 col-form-label">URL:
<input type="text" class="form-control col-auto" name="url" id=singleCaptureField
placeholder="URL to capture" value="{{predefined_url_to_capture}}" required>
<textarea class="form-control col-auto d-none" placeholder="URLs to capture, one per line"
name="urls" id=multipleCapturesField></textarea>
</label>
<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>
@ -97,12 +98,12 @@
<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 +113,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>
@ -148,7 +149,7 @@
<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%}>
<select class="form-select" id="browser" 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>
@ -162,7 +163,7 @@
<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%}>
<select class="form-select" id="user_agent" 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>
@ -179,7 +180,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 +196,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>
@ -227,7 +228,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 +247,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>
@ -360,34 +361,40 @@
<!-- admin only checkbox for autoreport -->
<div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="auto-report" name="auto-report" checked="false">
<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>
<div id="collapseMailConfiguration" class="collapse d-xl-block">
<div class="card card-body">
<div class="row mb-3">
<label for="email" >Email of the sender (optional): </label>
<div>
<input type="text" id="email" name="email">
<label class="col-sm-5 col-form-label" for="email">Email of the sender (optional): </label>
<div class="col-sm-7">
<input class="form-control" type="text" id="email"
name="email" placeholder="myself@example.com">
</div>
</div>
<div class="row mb-3">
<label for="comment">Comment (optional): </label>
<div>
<input type="text" id="comment" name="comment">
<label class="col-sm-5 col-form-label" for="recipient-mail">
Email of the recipient (optional): </label>
<div class="col-sm-7">
<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 for="recipient-mail">Email of the recipient (optional): </label>
<div>
<input type="text" id="recipient-mail" name="recipient-mail">
</div>
<label class="col-sm-5 col-form-label" for="comment">Comment (optional): </label>
<div class="col-sm-7">
<textarea class="form-control" type="text" 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.
@ -395,10 +402,10 @@
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>
</div>
{% endblock %}