From 4063a40db0355f85edf1313151d51a9ba809f554 Mon Sep 17 00:00:00 2001
From: Richard Ebeling <dev@richardebeling.de>
Date: Mon, 25 Sep 2023 20:29:31 +0200
Subject: [PATCH 01/12] Add mozilla-django-csp. Add CSP-nonces to everything.
 Inline-code is still a problem

---
 .../contributor_evaluation_form.html          |  4 ++--
 .../templates/contributor_index.html          |  2 +-
 evap/evaluation/templates/base.html           | 22 +++++++++----------
 .../templates/bootstrap_datetimepicker.html   |  8 +++----
 .../templates/confirmation_modal.html         |  2 +-
 .../templates/confirmation_text_modal.html    |  2 +-
 evap/evaluation/templates/contact_modal.html  |  2 +-
 .../templates/evap_evaluation_edit_js.html    |  6 ++---
 evap/evaluation/templates/faq.html            |  2 +-
 evap/evaluation/templates/infobox.html        |  4 ++--
 .../templatetags/infotext_templatetags.py     | 11 +++++++---
 evap/grades/templates/grades_course_view.html |  2 +-
 .../templates/grades_semester_view.html       |  6 ++---
 evap/results/templates/results_index.html     |  2 +-
 ...ewards_reward_point_redemption_events.html |  3 +--
 evap/settings.py                              |  9 ++++++++
 .../templates/staff_course_type_index.html    |  4 ++--
 evap/staff/templates/staff_degree_index.html  |  4 ++--
 .../staff_evaluation_person_management.html   | 18 +++++++--------
 .../staff_evaluation_textanswers_full.html    |  2 +-
 .../staff_evaluation_textanswers_quick.html   |  2 +-
 evap/staff/templates/staff_faq_index.html     |  4 ++--
 evap/staff/templates/staff_faq_section.html   |  4 ++--
 .../templates/staff_questionnaire_form.html   |  4 ++--
 .../templates/staff_questionnaire_index.html  |  6 ++---
 .../templates/staff_semester_export.html      |  4 ++--
 .../templates/staff_semester_import.html      |  4 ++--
 .../staff_semester_preparation_reminder.html  |  2 +-
 evap/staff/templates/staff_semester_view.html | 20 ++++++++---------
 evap/staff/templates/staff_template_form.html |  2 +-
 .../templates/staff_text_answer_warnings.html |  4 ++--
 evap/staff/templates/staff_user_form.html     |  4 ++--
 evap/staff/templates/staff_user_import.html   |  6 ++---
 evap/staff/templates/staff_user_list.html     |  2 +-
 evap/student/templates/student_vote.html      |  6 ++---
 requirements.txt                              |  1 +
 36 files changed, 102 insertions(+), 88 deletions(-)

diff --git a/evap/contributor/templates/contributor_evaluation_form.html b/evap/contributor/templates/contributor_evaluation_form.html
index ecd2e22c51..2ee67c2b99 100644
--- a/evap/contributor/templates/contributor_evaluation_form.html
+++ b/evap/contributor/templates/contributor_evaluation_form.html
@@ -125,7 +125,7 @@ <h5 class="modal-title" id="previewModalLabel">{% trans 'Preview' %}</h5>
     {% blocktrans asvar question%}Do you want to approve this evaluation? This will allow the evaluation team to proceed with the preparation, but you won't be able to make any further changes.{% endblocktrans %}
     {% trans 'Approve evaluation' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='approveEvaluationModal' title=title question=question action_text=action_text btn_type='primary' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function approveEvaluationModalAction(dataId) {
             const input = document.createElement("input");
             input.type = "hidden";
@@ -151,7 +151,7 @@ <h5 class="modal-title" id="previewModalLabel">{% trans 'Preview' %}</h5>
     {% include 'evap_evaluation_edit_js.html' %}
 
     {% if preview_html %}
-        <script type="text/javascript">
+        <script type="text/javascript" nonce="{{ CSP_NONCE }}">
             var previewModal = new bootstrap.Modal(document.getElementById('previewModal'));
             previewModal.show();
         </script>
diff --git a/evap/contributor/templates/contributor_index.html b/evap/contributor/templates/contributor_index.html
index e61132d2cc..9edcb30ba1 100644
--- a/evap/contributor/templates/contributor_index.html
+++ b/evap/contributor/templates/contributor_index.html
@@ -226,7 +226,7 @@ <h5 class="modal-title" id="{{ modal_id }}Label">{% trans 'Delegate preparation'
             </div>
         </div>
 
-        <script type="text/javascript">
+        <script type="text/javascript" nonce="{{ CSP_NONCE }}">
             function {{ modal_id }}Show(evaluationName, action) {
                 const modal = document.getElementById("{{ modal_id }}");
                 // set form's action location
diff --git a/evap/evaluation/templates/base.html b/evap/evaluation/templates/base.html
index bcb058690c..7be3e6f1ef 100644
--- a/evap/evaluation/templates/base.html
+++ b/evap/evaluation/templates/base.html
@@ -26,7 +26,7 @@
         {% endblock %}
     </head>
     <body>
-        <script type="text/javascript" src="{% static 'bootstrap/dist/js/bootstrap.bundle.min.js' %}"></script>
+        <script type="text/javascript" src="{% static 'bootstrap/dist/js/bootstrap.bundle.min.js' %}" nonce="{{ CSP_NONCE }}"></script>
 
         {% block modals %}
             {% if user.is_authenticated %}
@@ -71,18 +71,18 @@
 
         {% include 'footer.html' %}
 
-        <script src="{% url 'javascript-catalog' %}"></script>
+        <script src="{% url 'javascript-catalog' %}" nonce="{{ CSP_NONCE }}"></script>
 
-        <script type="text/javascript" src="{% static 'js/jquery-2.1.3.min.js' %}"></script>
-        <script type="text/javascript" src="{% static 'js/tom-select.complete.min.js' %}"></script>
-        <script type="text/javascript" src="{% static 'js/plugins/jquery.formset.js' %}"></script>
-        <script type="text/javascript" src="{% static 'js/Sortable.min.js' %}"></script>
+        <script type="text/javascript" src="{% static 'js/jquery-2.1.3.min.js' %}" nonce="{{ CSP_NONCE }}"></script>
+        <script type="text/javascript" src="{% static 'js/tom-select.complete.min.js' %}" nonce="{{ CSP_NONCE }}"></script>
+        <script type="text/javascript" src="{% static 'js/plugins/jquery.formset.js' %}" nonce="{{ CSP_NONCE }}"></script>
+        <script type="text/javascript" src="{% static 'js/Sortable.min.js' %}" nonce="{{ CSP_NONCE }}"></script>
 
-        <script type="module" src="{% static 'js/csrf-utils.js' %}"></script>
-        <script type="module" src="{% static 'js/utils.js' %}"></script>
+        <script type="module" src="{% static 'js/csrf-utils.js' %}" nonce="{{ CSP_NONCE }}"></script>
+        <script type="module" src="{% static 'js/utils.js' %}" nonce="{{ CSP_NONCE }}"></script>
 
-        <script type="module" src="{% static 'js/base-template.js' %}"></script>
-        <script type="text/javascript">
+        <script type="module" src="{% static 'js/base-template.js' %}" nonce="{{ CSP_NONCE }}"></script>
+        <script type="text/javascript" nonce="{{ CSP_NONCE }}">
             activateTooltips = function(selector = "") {
                 var tooltipTriggerList = [].slice.call(document.querySelectorAll(selector + ' [data-bs-toggle="tooltip"]'))
                 var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
@@ -207,7 +207,7 @@
             };
 
         </script>
-        <script type="module">
+        <script type="module" nonce="{{ CSP_NONCE }}">
             import  { NotebookLogic } from "{% static 'js/notebook.js' %}"
 
             new NotebookLogic("#notebook").attach();
diff --git a/evap/evaluation/templates/bootstrap_datetimepicker.html b/evap/evaluation/templates/bootstrap_datetimepicker.html
index f72177f2a9..1e75a1b2fd 100644
--- a/evap/evaluation/templates/bootstrap_datetimepicker.html
+++ b/evap/evaluation/templates/bootstrap_datetimepicker.html
@@ -1,11 +1,11 @@
 {% load static %}
 {% get_current_language as LANGUAGE_CODE %}
 
-<script type="text/javascript" src="{% static 'js/moment.min.js' %}"></script>
-<script type="text/javascript" src="{% static 'js/moment_de.js' %}"></script>
-<script type="text/javascript" src="{% static 'js/bootstrap-datetimepicker.min.js' %}"></script>
+<script type="text/javascript" src="{% static 'js/moment.min.js' %}" nonce="{{ CSP_NONCE }}"></script>
+<script type="text/javascript" src="{% static 'js/moment_de.js' %}" nonce="{{ CSP_NONCE }}"></script>
+<script type="text/javascript" src="{% static 'js/bootstrap-datetimepicker.min.js' %}" nonce="{{ CSP_NONCE }}"></script>
 
-<script type="text/javascript">
+<script type="text/javascript" nonce="{{ CSP_NONCE }}">
     // run the bootstrap datepicker plugin
     $("input[name$='date']:not([readonly='True'])").datetimepicker({
         locale: "{{ LANGUAGE_CODE }}",
diff --git a/evap/evaluation/templates/confirmation_modal.html b/evap/evaluation/templates/confirmation_modal.html
index e8e089e52d..cb50aa7750 100644
--- a/evap/evaluation/templates/confirmation_modal.html
+++ b/evap/evaluation/templates/confirmation_modal.html
@@ -20,7 +20,7 @@ <h5 class="modal-title" id="{{ modal_id }}Label">{{ title }}</h5>
     </div>
 </div>
 
-<script type="text/javascript">
+<script type="text/javascript" nonce="{{ CSP_NONCE }}">
     function {{ modal_id }}Show(dataId, dataLabel) {
         // call the modal's action function when action button was pressed and give dataId as parameter
         $('#btn-action-{{ modal_id }}').unbind().click(function(){ {{ modal_id }}Action(dataId); });
diff --git a/evap/evaluation/templates/confirmation_text_modal.html b/evap/evaluation/templates/confirmation_text_modal.html
index 11aed8fd54..6c89f56e38 100644
--- a/evap/evaluation/templates/confirmation_text_modal.html
+++ b/evap/evaluation/templates/confirmation_text_modal.html
@@ -23,7 +23,7 @@ <h5 class="modal-title" id="{{ modal_id }}Label">{{ title }}</h5>
     </div>
 </div>
 
-<script type="text/javascript">
+<script type="text/javascript" nonce="{{ CSP_NONCE }}">
     function {{ modal_id }}Show(dataId, dataLabel) {
         // call the modal's action function when action button was pressed and give dataId as parameter
         $('#{{ modal_id }} #{{ modal_id }}ActionButton').unbind().click(function(){ {{ modal_id }}Action(dataId); });
diff --git a/evap/evaluation/templates/contact_modal.html b/evap/evaluation/templates/contact_modal.html
index 7566c4ed26..26601b6215 100644
--- a/evap/evaluation/templates/contact_modal.html
+++ b/evap/evaluation/templates/contact_modal.html
@@ -48,7 +48,7 @@ <h5 class="modal-title" id="{{ modal_id }}Label">{{ title }}</h5>
         </div>
     </div>
 </div>
-<script type="module">
+<script type="module" nonce="{{ CSP_NONCE }}">
     import { ContactModalLogic } from "{% static 'js/contact_modal.js' %}";
 
     new ContactModalLogic("{{ modal_id }}", "{{ title|escapejs }}").attach();
diff --git a/evap/evaluation/templates/evap_evaluation_edit_js.html b/evap/evaluation/templates/evap_evaluation_edit_js.html
index 601252c6d6..ca1227945b 100644
--- a/evap/evaluation/templates/evap_evaluation_edit_js.html
+++ b/evap/evaluation/templates/evap_evaluation_edit_js.html
@@ -1,8 +1,8 @@
 {% load static %}
 
 {% if editable %}
-    <script src="{% static 'js/sortable_form.js' %}"></script>
-    <script type="text/javascript">
+    <script src="{% static 'js/sortable_form.js' %}" nonce="{{ CSP_NONCE }}"></script>
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         rowChanged = function(row) {
             name = $(row.find("select[id$=-contributor]")).find(":selected").text();
             nameChanged = name && name != "---------";
@@ -30,7 +30,7 @@
     </script>
 {% endif %}
 
-<script type="text/javascript">
+<script type="text/javascript" nonce="{{ CSP_NONCE }}">
     function makeDoesNotContributeChangeHandler(i) {
         return () => {
             const doesNotContributeInput = document.querySelector("input[name=contributions-" + i + "-does_not_contribute]");
diff --git a/evap/evaluation/templates/faq.html b/evap/evaluation/templates/faq.html
index 582558f48e..bcef8a7799 100644
--- a/evap/evaluation/templates/faq.html
+++ b/evap/evaluation/templates/faq.html
@@ -27,7 +27,7 @@ <h2 id="faq-{{ question.id }}-q" class="accordion-header">
 {% endblock %}
 
 {% block additional_javascript %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         const anchor = window.location.hash.replace("#", "").split('-');
         const id = anchor[1];
         const type = anchor[2];
diff --git a/evap/evaluation/templates/infobox.html b/evap/evaluation/templates/infobox.html
index 08ad9b92a4..3ae9b3830a 100644
--- a/evap/evaluation/templates/infobox.html
+++ b/evap/evaluation/templates/infobox.html
@@ -10,7 +10,7 @@
         </div>
         <div class="callout-content small">
             {# Inline script to interrupt loading of the page, so the content does not jump up. #}
-            <script>
+            <script nonce="{{ request.csp_nonce }}">
                 if (localStorage["infobox-{{ infotext.page }}"] === "hide")
                     document.querySelector("#infobox-{{ infotext.page }}").classList.add("closed");
             </script>
@@ -18,7 +18,7 @@
         </div>
     </div>
 
-    <script type="module">
+    <script type="module" nonce="{{ request.csp_nonce }}">
         import { InfoboxLogic } from "{% static 'js/infobox.js' %}";
 
         new InfoboxLogic("{{ infotext.page }}").attach();
diff --git a/evap/evaluation/templatetags/infotext_templatetags.py b/evap/evaluation/templatetags/infotext_templatetags.py
index c85b5065aa..55799302f6 100644
--- a/evap/evaluation/templatetags/infotext_templatetags.py
+++ b/evap/evaluation/templatetags/infotext_templatetags.py
@@ -5,12 +5,17 @@
 register = Library()
 
 
-@register.inclusion_tag("infobox.html")
-def show_infotext(page_name):
+@register.inclusion_tag("infobox.html", takes_context=True)
+def show_infotext(context, page_name):
     to_page_id = {
         "contributor_index": Infotext.Page.CONTRIBUTOR_INDEX,
         "grades_pages": Infotext.Page.GRADES_PAGES,
         "student_index": Infotext.Page.STUDENT_INDEX,
     }
 
-    return {"infotext": Infotext.objects.get(page=to_page_id[page_name])}
+    print(context["request"].csp_nonce)
+
+    return {
+        "request": context["request"],
+        "infotext": Infotext.objects.get(page=to_page_id[page_name])
+    }
diff --git a/evap/grades/templates/grades_course_view.html b/evap/grades/templates/grades_course_view.html
index 1bf12162c8..7e9768183a 100644
--- a/evap/grades/templates/grades_course_view.html
+++ b/evap/grades/templates/grades_course_view.html
@@ -56,7 +56,7 @@ <h3 class="mb-3">{{ course.name }} ({{ semester.name }})</h3>
     {% trans 'Do you really want to delete the grade document <strong data-label=""></strong>?' as question %}
     {% trans 'Delete grade document' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='deleteGradedocumentModal' title=title question=question action_text=action_text btn_type='danger' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function deleteGradedocumentModalAction(dataId) {
             fetch("{% url 'grades:delete_grades' %}", {
                 body: new URLSearchParams({grade_document_id: dataId}),
diff --git a/evap/grades/templates/grades_semester_view.html b/evap/grades/templates/grades_semester_view.html
index 73ed72cd0c..c296f29332 100644
--- a/evap/grades/templates/grades_semester_view.html
+++ b/evap/grades/templates/grades_semester_view.html
@@ -106,7 +106,7 @@ <h3 class="col-8 mb-0">
     {% trans 'Please confirm that the final grades for the course <strong data-label=""></strong> have been submitted but will not be uploaded.' as question %}
     {% trans 'Confirm' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='confirmNouploadModal' title=title question=question action_text=action_text btn_type='primary' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function confirmNouploadModalAction(dataId) {
             updateGradeStatusOfCourse(dataId, true);
         }
@@ -126,7 +126,7 @@ <h3 class="col-8 mb-0">
     {% trans 'Please confirm that a grade document for the course <strong data-label=""></strong> will be uploaded later on.' as question %}
     {% trans 'Confirm' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='confirmLateruploadModal' title=title question=question action_text=action_text btn_type='primary' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function confirmLateruploadModalAction(dataId) {
             updateGradeStatusOfCourse(dataId, false);
         };
@@ -134,7 +134,7 @@ <h3 class="col-8 mb-0">
 {% endblock %}
 
 {% block additional_javascript %}
-    <script type="module">
+    <script type="module" nonce="{{ CSP_NONCE }}">
         import {TableGrid} from "{% static 'js/datagrid.js' %}";
         const table = document.querySelector(".grade-course-table");
         if (table) {
diff --git a/evap/results/templates/results_index.html b/evap/results/templates/results_index.html
index 4ad621c7e6..d14957ce3b 100644
--- a/evap/results/templates/results_index.html
+++ b/evap/results/templates/results_index.html
@@ -127,7 +127,7 @@ <h5 class="card-title mb-lg-0">
 {% endblock %}
 
 {% block additional_javascript %}
-    <script type="module">
+    <script type="module" nonce="{{ CSP_NONCE }}">
         import {ResultGrid} from "{% static 'js/datagrid.js' %}";
 
         new ResultGrid({
diff --git a/evap/rewards/templates/rewards_reward_point_redemption_events.html b/evap/rewards/templates/rewards_reward_point_redemption_events.html
index afda183798..a3c6e59edd 100644
--- a/evap/rewards/templates/rewards_reward_point_redemption_events.html
+++ b/evap/rewards/templates/rewards_reward_point_redemption_events.html
@@ -33,8 +33,7 @@
     {% trans 'Do you really want to delete the event <strong data-label=""></strong>?' as question %}
     {% trans 'Delete event' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='deleteEventModal' title=title question=question action_text=action_text btn_type='danger' %}
-
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function deleteEventModalAction(dataId) {
             fetch("{% url 'rewards:reward_point_redemption_event_delete' %}", {
                 body: new URLSearchParams({event_id: dataId}),
diff --git a/evap/settings.py b/evap/settings.py
index 9fa6190e5a..bf82a3bb00 100644
--- a/evap/settings.py
+++ b/evap/settings.py
@@ -237,6 +237,7 @@ class ManifestStaticFilesStorageWithJsReplacement(ManifestStaticFilesStorage):
     "django.contrib.auth.middleware.AuthenticationMiddleware",
     "django.contrib.messages.middleware.MessageMiddleware",
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
+    "csp.middleware.CSPMiddleware",
     "mozilla_django_oidc.middleware.SessionRefresh",
     "evap.middleware.RequireLoginMiddleware",
     "evap.middleware.user_language_middleware",
@@ -252,6 +253,7 @@ class ManifestStaticFilesStorageWithJsReplacement(ManifestStaticFilesStorage):
         "django.template.context_processors.static",
         "django.template.context_processors.request",
         "django.contrib.messages.context_processors.messages",
+        "csp.context_processors.nonce",
         "evap.context_processors.slogan",
         "evap.context_processors.debug",
         "evap.context_processors.notebook_form",
@@ -402,6 +404,13 @@ def CHARACTER_ALLOWED_IN_NAME(character):  # pylint: disable=invalid-name
 OIDC_OP_JWKS_ENDPOINT = "https://example.com/certs"
 
 
+### Content Security Policy
+# settings from https://csp.withgoogle.com/docs/strict-csp.html#example
+CSP_OBJECT_SRC = ("'none'", )
+CSP_SCRIPT_SRC = ("'unsafe-inline'", "'strict-dynamic'", "https:", "http:")
+CSP_BASE_URI = ("'none'", )
+CSP_INCLUDE_NONCE_IN=['script-src']
+
 ### Other
 
 # Create a localsettings.py if you want to locally override settings
diff --git a/evap/staff/templates/staff_course_type_index.html b/evap/staff/templates/staff_course_type_index.html
index 95c7909c61..6dea355afb 100644
--- a/evap/staff/templates/staff_course_type_index.html
+++ b/evap/staff/templates/staff_course_type_index.html
@@ -73,9 +73,9 @@
 {% endblock %}
 
 {% block additional_javascript %}
-    <script src="{% static 'js/sortable_form.js' %}"></script>
+    <script src="{% static 'js/sortable_form.js' %}" nonce="{{ CSP_NONCE }}"></script>
 
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         rowChanged = function(row) {
             nameDe = $(row.find('input[id$=-name_de]')).val();
             nameEn = $(row.find('input[id$=-name_en]')).val();
diff --git a/evap/staff/templates/staff_degree_index.html b/evap/staff/templates/staff_degree_index.html
index 2aa2782ea5..b266c3793b 100644
--- a/evap/staff/templates/staff_degree_index.html
+++ b/evap/staff/templates/staff_degree_index.html
@@ -69,9 +69,9 @@
 {% endblock %}
 
 {% block additional_javascript %}
-    <script src="{% static 'js/sortable_form.js' %}"></script>
+    <script src="{% static 'js/sortable_form.js' %}" nonce="{{ CSP_NONCE }}"></script>
 
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         rowChanged = function(row) {
             nameDe = $(row.find('input[id$=-name_de]')).val();
             nameEn = $(row.find('input[id$=-name_en]')).val();
diff --git a/evap/staff/templates/staff_evaluation_person_management.html b/evap/staff/templates/staff_evaluation_person_management.html
index 55ad0ab6d5..9d0e81a908 100644
--- a/evap/staff/templates/staff_evaluation_person_management.html
+++ b/evap/staff/templates/staff_evaluation_person_management.html
@@ -134,7 +134,7 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
     {% blocktrans asvar question %}Do you really want to import the Excel file with participant data?{% endblocktrans %}
     {% trans 'Import participants' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='importParticipantsModal' title=title question=question action_text=action_text btn_type='primary' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function importParticipantsModalAction(dataId) {
             const input = document.createElement("input");
             input.type = "hidden";
@@ -151,7 +151,7 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
     {% blocktrans asvar question %}Do you really want to delete all existing participants and replace them with participant data from the Excel file?{% endblocktrans %}
     {% trans 'Replace participants' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='replaceParticipantsModal' title=title question=question action_text=action_text btn_type='danger' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function replaceParticipantsModalAction(dataId) {
             const input = document.createElement("input");
             input.type = "hidden";
@@ -168,7 +168,7 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
     {% blocktrans asvar question %}Do you really want to copy the participants?{% endblocktrans %}
     {% trans 'Copy participants' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='copyParticipantsModal' title=title question=question action_text=action_text btn_type='primary' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function copyParticipantsModalAction(dataId) {
             const input = document.createElement("input");
             input.type = "hidden";
@@ -185,7 +185,7 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
     {% blocktrans asvar question %}Do you really want to delete all existing participants and copy the participants into the evaluation?{% endblocktrans %}
     {% trans 'Replace participants' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='copyReplaceParticipantsModal' title=title question=question action_text=action_text btn_type='danger' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function copyReplaceParticipantsModalAction(dataId) {
             const input = document.createElement("input");
             input.type = "hidden";
@@ -202,7 +202,7 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
     {% blocktrans asvar question %}Do you really want to import the Excel file with contributor data?{% endblocktrans %}
     {% trans 'Import contributors' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='importContributorsModal' title=title question=question action_text=action_text btn_type='primary' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function importContributorsModalAction(dataId) {
             const input = document.createElement("input");
             input.type = "hidden";
@@ -219,7 +219,7 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
     {% blocktrans asvar question %}Do you really want to delete all existing contributors and replace them with contributor data from the Excel file?{% endblocktrans %}
     {% trans 'Replace contributors' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='replaceContributorsModal' title=title question=question action_text=action_text btn_type='danger' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function replaceContributorsModalAction(dataId) {
             const input = document.createElement("input");
             input.type = "hidden";
@@ -236,7 +236,7 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
     {% blocktrans asvar question %}Do you really want to copy the contributors?{% endblocktrans %}
     {% trans 'Copy contributors' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='copyContributorsModal' title=title question=question action_text=action_text btn_type='primary' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function copyContributorsModalAction(dataId) {
             const input = document.createElement("input");
             input.type = "hidden";
@@ -253,7 +253,7 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
     {% blocktrans asvar question %}Do you really want to delete all existing contributors and copy the contributors into the evaluation?{% endblocktrans %}
     {% trans 'Replace contributors' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='copyReplaceContributorsModal' title=title question=question action_text=action_text btn_type='danger' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function copyReplaceContributorsModalAction(dataId) {
             const input = document.createElement("input");
             input.type = "hidden";
@@ -269,5 +269,5 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
 {% endblock %}
 
 {% block additional_javascript %}
-    <script type="text/javascript" src="{% static 'js/copy-to-clipboard.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/copy-to-clipboard.js' %}" nonce="{{ CSP_NONCE }}"></script>
 {% endblock %}
diff --git a/evap/staff/templates/staff_evaluation_textanswers_full.html b/evap/staff/templates/staff_evaluation_textanswers_full.html
index c891b55ddd..7d19841df1 100644
--- a/evap/staff/templates/staff_evaluation_textanswers_full.html
+++ b/evap/staff/templates/staff_evaluation_textanswers_full.html
@@ -35,7 +35,7 @@
 {% endblock %}
 
 {% block additional_javascript %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         document
             .querySelectorAll(".full-update-textanswer-form input[type='radio'], .full-textanswer-flag-form input[type='radio']")
             .forEach(input => input.addEventListener("change", () => input.form.requestSubmit()));
diff --git a/evap/staff/templates/staff_evaluation_textanswers_quick.html b/evap/staff/templates/staff_evaluation_textanswers_quick.html
index 92dd3a355e..9b0d7ccaa9 100644
--- a/evap/staff/templates/staff_evaluation_textanswers_quick.html
+++ b/evap/staff/templates/staff_evaluation_textanswers_quick.html
@@ -191,7 +191,7 @@ <h5 class="modal-title" id="hotkeys-modal-title">Hotkeys</h5>
 {% endblock %}
 
 {% block additional_javascript %}
-    <script type="module">
+    <script type="module" nonce="{{ CSP_NONCE }}">
         import { QuickReviewSlider } from "{% static 'js/quick-review-slider.js' %}";
 
         const slider = new QuickReviewSlider(
diff --git a/evap/staff/templates/staff_faq_index.html b/evap/staff/templates/staff_faq_index.html
index 93b5032976..1c7f77cc48 100644
--- a/evap/staff/templates/staff_faq_index.html
+++ b/evap/staff/templates/staff_faq_index.html
@@ -59,9 +59,9 @@
 {% endblock %}
 
 {% block additional_javascript %}
-    <script src="{% static 'js/sortable_form.js' %}"></script>
+    <script src="{% static 'js/sortable_form.js' %}" nonce="{{ CSP_NONCE }}"></script>
 
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         rowChanged = function(row) {
             nameDe = $(row.find('input[id$=-title_de]')).val();
             nameEn = $(row.find('input[id$=-title_en]')).val();
diff --git a/evap/staff/templates/staff_faq_section.html b/evap/staff/templates/staff_faq_section.html
index e687ce8e42..cdf7933558 100644
--- a/evap/staff/templates/staff_faq_section.html
+++ b/evap/staff/templates/staff_faq_section.html
@@ -59,9 +59,9 @@
 {% endblock %}
 
 {% block additional_javascript %}
-    <script src="{% static 'js/sortable_form.js' %}"></script>
+    <script src="{% static 'js/sortable_form.js' %}" nonce="{{ CSP_NONCE }}"></script>
 
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         rowChanged = function(row) {
             qDe = $(row.find('input[id$=-question_de]')).val();
             qEn = $(row.find('input[id$=-question_en]')).val();
diff --git a/evap/staff/templates/staff_questionnaire_form.html b/evap/staff/templates/staff_questionnaire_form.html
index 0f968f76c9..6766d197a9 100644
--- a/evap/staff/templates/staff_questionnaire_form.html
+++ b/evap/staff/templates/staff_questionnaire_form.html
@@ -81,8 +81,8 @@ <h5 class="card-title">{% trans 'Questions' %}</h5>
 
 {% block additional_javascript %}
     {% if editable %}
-        <script src="{% static 'js/sortable_form.js' %}"></script>
-        <script type="text/javascript">
+        <script src="{% static 'js/sortable_form.js' %}" nonce="{{ CSP_NONCE }}"></script>
+        <script type="text/javascript" nonce="{{ CSP_NONCE }}">
             rowChanged = function(row) {
                 nameDe = $(row.find('textarea[id$=-text_de]')).val();
                 nameEn = $(row.find('textarea[id$=-text_en]')).val();
diff --git a/evap/staff/templates/staff_questionnaire_index.html b/evap/staff/templates/staff_questionnaire_index.html
index 8a83c00656..b3811ad06e 100644
--- a/evap/staff/templates/staff_questionnaire_index.html
+++ b/evap/staff/templates/staff_questionnaire_index.html
@@ -51,7 +51,7 @@
     {% trans 'Do you really want to delete the questionnaire <strong data-label=""></strong>?' as question %}
     {% trans 'Delete questionnaire' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='deleteQuestionnaireModal' title=title question=question action_text=action_text btn_type='danger' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function deleteQuestionnaireModalAction(dataId) {
             fetch("{% url 'staff:questionnaire_delete' %}", {
                 body: new URLSearchParams({questionnaire_id: dataId}),
@@ -66,7 +66,7 @@
 {% endblock %}
 
 {% block additional_javascript %}
-    <script type="module">
+    <script type="module" nonce="{{ CSP_NONCE }}">
         import {QuestionnaireGrid} from "{% static 'js/datagrid.js' %}";
         document.querySelectorAll(".questionnaire-table").forEach(table => {
             new QuestionnaireGrid({
@@ -79,7 +79,7 @@
         });
     </script>
 
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function changeVisibility(element) {
             const questionnaire = element.closest(".questionnaire");
             const visibility = element.dataset.visibility;
diff --git a/evap/staff/templates/staff_semester_export.html b/evap/staff/templates/staff_semester_export.html
index 912a4162b4..917c71d08b 100644
--- a/evap/staff/templates/staff_semester_export.html
+++ b/evap/staff/templates/staff_semester_export.html
@@ -72,9 +72,9 @@ <h3>{% trans 'Export' %} {{ semester.name }}</h3>
 {% endblock %}
 
 {% block additional_javascript %}
-    <script src="{% static 'js/sortable_form.js' %}"></script>
+    <script src="{% static 'js/sortable_form.js' %}" nonce="{{ CSP_NONCE }}"></script>
 
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         rowChanged = function(row) {
             id = row.find("input[id$=-id]").val();
             return id;
diff --git a/evap/staff/templates/staff_semester_import.html b/evap/staff/templates/staff_semester_import.html
index c1d3b4ed27..0cf0b96cff 100644
--- a/evap/staff/templates/staff_semester_import.html
+++ b/evap/staff/templates/staff_semester_import.html
@@ -47,7 +47,7 @@ <h3>{% trans 'Import semester data' %}</h3>
     {% trans 'Do you really want to import semester data from the Excel file?' as question %}
     {% trans 'Import semester data' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='importSemesterModal' title=title question=question action_text=action_text btn_type='primary' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function importSemesterModalAction(dataId) {
             const input = document.createElement("input");
             input.type = "hidden";
@@ -64,5 +64,5 @@ <h3>{% trans 'Import semester data' %}</h3>
 
 {% block additional_javascript %}
     {% include 'bootstrap_datetimepicker.html' %}
-    <script type="text/javascript" src="{% static 'js/copy-to-clipboard.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/copy-to-clipboard.js' %}" nonce="{{ CSP_NONCE }}"></script>
 {% endblock %}
diff --git a/evap/staff/templates/staff_semester_preparation_reminder.html b/evap/staff/templates/staff_semester_preparation_reminder.html
index 053ec93032..860b8e58e6 100644
--- a/evap/staff/templates/staff_semester_preparation_reminder.html
+++ b/evap/staff/templates/staff_semester_preparation_reminder.html
@@ -76,7 +76,7 @@
     {% trans 'Do you really want to remind everyone?' as question %}
     {% trans 'Remind all' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='remindAllModal' title=title question=question action_text=action_text btn_type='primary' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function remindAllModalAction() {
             const remindAllButton = document.getElementById('remindAllButton');
             remindAllButton.disabled = true;
diff --git a/evap/staff/templates/staff_semester_view.html b/evap/staff/templates/staff_semester_view.html
index f586e5f83f..36aee5d470 100644
--- a/evap/staff/templates/staff_semester_view.html
+++ b/evap/staff/templates/staff_semester_view.html
@@ -448,7 +448,7 @@ <h3>
     {% trans 'Do you want to make this the active semester?' as question %}
     {% trans 'Make active' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='makeActiveSemesterModal' title=title question=question action_text=action_text btn_type='primary' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function makeActiveSemesterModalAction(dataId) {
             const makeActiveSemesterButton = document.getElementById('makeActiveSemesterButton');
             makeActiveSemesterButton.disabled = true;
@@ -468,7 +468,7 @@ <h3>
     {% blocktrans asvar question %}Do you really want to delete the semester <strong data-label=""></strong>? All courses and evaluations will be deleted as well as all results. If you are sure, enter the name of the semester below.{% endblocktrans %}
     {% trans 'Delete semester' as action_text %}
     {% include 'confirmation_text_modal.html' with modal_id='deleteSemesterModal' title=title question=question action_text=action_text btn_type='danger' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function deleteSemesterModalAction(dataId) {
             const deleteButton = document.getElementById('deleteSemesterButton');
             deleteButton.disabled = true;
@@ -488,7 +488,7 @@ <h3>
     {% blocktrans asvar question %}Do you really want to archive all participations in the semester <strong data-label=""></strong>? Further changes to the evaluations won't be possible and you can't undo this action.{% endblocktrans %}
     {% trans 'Archive participations' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='archiveParticipationsModal' title=title question=question action_text=action_text btn_type='danger' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function archiveParticipationsModalAction(dataId) {
             fetch("{% url 'staff:semester_archive_participations' %}", {
                 body: new URLSearchParams({semester_id: dataId}),
@@ -504,7 +504,7 @@ <h3>
     {% blocktrans asvar question %}Do you really want to delete the grade documents in the semester <strong data-label=""></strong>? This will delete all existing grade documents for this semester's courses and will disable new uploads. You can't undo this action.{% endblocktrans %}
     {% trans 'Delete grade documents' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='deleteGradeDocumentsModal' title=title question=question action_text=action_text btn_type='danger' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function deleteGradeDocumentsModalAction(dataId) {
             fetch("{% url 'staff:semester_delete_grade_documents' %}", {
                 body: new URLSearchParams({semester_id: dataId}),
@@ -520,7 +520,7 @@ <h3>
     {% blocktrans asvar question %}Do you really want to archive the results in the semester <strong data-label=""></strong>? This will make the results of all evaluations inaccessible for all users except their contributors and managers. You can't undo this action.{% endblocktrans %}
     {% trans 'Archive results' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='archiveResultsModal' title=title question=question action_text=action_text btn_type='danger' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function archiveResultsModalAction(dataId) {
             fetch("{% url 'staff:semester_archive_results' %}", {
                 body: new URLSearchParams({semester_id: dataId}),
@@ -536,7 +536,7 @@ <h3>
     {% trans 'Do you really want to delete the evaluation <strong data-label=""></strong>?' as question %}
     {% trans 'Delete evaluation' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='deleteEvaluationModal' title=title question=question action_text=action_text btn_type='danger' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function deleteEvaluationModalAction(dataId) {
             fetch("{% url 'staff:evaluation_delete' %}", {
                 body: new URLSearchParams({evaluation_id: dataId}),
@@ -552,7 +552,7 @@ <h3>
     {% trans 'Do you really want to delete the course <strong data-label=""></strong>?' as question %}
     {% trans 'Delete course' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='deleteCourseModal' title=title question=question action_text=action_text btn_type='danger' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function deleteCourseModalAction(dataId) {
             fetch("{% url 'staff:course_delete' %}", {
                 body: new URLSearchParams({course_id: dataId}),
@@ -568,7 +568,7 @@ <h3>
     {% blocktrans asvar question %}Do you want to activate the reward points for the semester <strong data-label=""></strong>? The activation will allow participants to receive reward points when voting and will also grant all eligible points for participants who have already voted so far. The process will take a while.{% endblocktrans %}
     {% trans 'Activate reward points' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='activateRewardPointsModal' title=title question=question action_text=action_text btn_type='primary' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function activateRewardPointsModalAction() {
             document.getElementById("form_activation_status").requestSubmit();
         }
@@ -576,7 +576,7 @@ <h3>
 {% endblock %}
 
 {% block additional_javascript %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         var overviewCard = document.getElementById('overviewCard');
         var overviewCardCollapse = new bootstrap.Collapse(overviewCard, {
             toggle: localStorage['show_overview'] === 'true'
@@ -601,7 +601,7 @@ <h3>
             document.querySelectorAll('#evaluation_operation_form input[type=checkbox]').forEach(checkbox => {checkbox.checked = false;}); // prevent wrong autofills
         });
     </script>
-    <script type="module">
+    <script type="module" nonce="{{ CSP_NONCE }}">
         import {EvaluationGrid, TableGrid} from "{% static 'js/datagrid.js' %}";
         const evaluationTable = document.querySelector("#evaluation-table");
         if (evaluationTable) {
diff --git a/evap/staff/templates/staff_template_form.html b/evap/staff/templates/staff_template_form.html
index b4146ec445..3e67e51be2 100644
--- a/evap/staff/templates/staff_template_form.html
+++ b/evap/staff/templates/staff_template_form.html
@@ -40,5 +40,5 @@
 {% endblock %}
 
 {% block additional_javascript %}
-    <script type="text/javascript" src="{% static 'js/copy-to-clipboard.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/copy-to-clipboard.js' %}" nonce="{{ CSP_NONCE }}"></script>
 {% endblock %}
diff --git a/evap/staff/templates/staff_text_answer_warnings.html b/evap/staff/templates/staff_text_answer_warnings.html
index 380101e58c..d078b15787 100644
--- a/evap/staff/templates/staff_text_answer_warnings.html
+++ b/evap/staff/templates/staff_text_answer_warnings.html
@@ -93,11 +93,11 @@
 {% endblock %}
 
 {% block additional_javascript %}
-    <script src="{% static 'js/sortable_form.js' %}"></script>
+    <script src="{% static 'js/sortable_form.js' %}" nonce="{{ CSP_NONCE }}"></script>
 
     {{ text_answer_warnings|text_answer_warning_trigger_strings|json_script:'text-answer-warnings' }}
 
-    <script type="module">
+    <script type="module" nonce="{{ CSP_NONCE }}">
         import {initTextAnswerWarnings} from "{% static 'js/text-answer-warnings.js' %}";
 
         initTextAnswerWarnings([document.querySelector("#preview-textarea")], JSON.parse(document.getElementById("text-answer-warnings").textContent));
diff --git a/evap/staff/templates/staff_user_form.html b/evap/staff/templates/staff_user_form.html
index e0df5146df..966840a1f1 100644
--- a/evap/staff/templates/staff_user_form.html
+++ b/evap/staff/templates/staff_user_form.html
@@ -123,7 +123,7 @@ <h5 class="card-title me-auto">{% trans 'Export evaluation results' %}</h5>
     {% trans 'Do you really want to delete the user <strong data-label=""></strong>?<br/>This person will also be removed from every other user having this person as a delegated or CC-user.' as question %}
     {% trans 'Delete user' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='deleteModal' title=title question=question action_text=action_text btn_type='danger' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function deleteModalAction(dataId) {
             fetch("{% url 'staff:user_delete' %}", {
                 body: new URLSearchParams({user_id: dataId}),
@@ -140,7 +140,7 @@ <h5 class="card-title me-auto">{% trans 'Export evaluation results' %}</h5>
         {% trans 'The email will notify the user about all their due evaluations. Do you want to send the email now?' as question %}
         {% trans 'Send email' as action_text %}
         {% include 'confirmation_modal.html' with modal_id='resendEmailModal' title=title question=question action_text=action_text btn_type='success' %}
-        <script type="text/javascript">
+        <script type="text/javascript" nonce="{{ CSP_NONCE }}">
             function resendEmailModalAction(dataId) {
                 fetch("{% url 'staff:user_resend_email' %}", {
                     body: new URLSearchParams({user_id: dataId}),
diff --git a/evap/staff/templates/staff_user_import.html b/evap/staff/templates/staff_user_import.html
index b316052145..bf1263df96 100644
--- a/evap/staff/templates/staff_user_import.html
+++ b/evap/staff/templates/staff_user_import.html
@@ -41,12 +41,12 @@ <h3>{% trans 'Import users' %}</h3>
 {% endblock %}
 
 {% block modals %}
-{{ block.super }}
+    {{ block.super }}
     {% trans 'Import Users' as title %}
     {% blocktrans asvar question %}Do you really want to import the users from the Excel file?{% endblocktrans %}
     {% trans 'Import Users' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='importUserModal' title=title question=question action_text=action_text btn_type='primary' %}
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function importUserModalAction(dataId) {
             const input = document.createElement("input");
             input.type = "hidden";
@@ -62,5 +62,5 @@ <h3>{% trans 'Import users' %}</h3>
 {% endblock %}
 
 {% block additional_javascript %}
-    <script type="text/javascript" src="{% static 'js/copy-to-clipboard.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/copy-to-clipboard.js' %}" nonce="{{ CSP_NONCE }}"></script>
 {% endblock %}
diff --git a/evap/staff/templates/staff_user_list.html b/evap/staff/templates/staff_user_list.html
index 174cca33ac..ad0e87fb01 100644
--- a/evap/staff/templates/staff_user_list.html
+++ b/evap/staff/templates/staff_user_list.html
@@ -65,7 +65,7 @@
 {% endblock %}
 
 {% block additional_javascript %}
-    <script type="module">
+    <script type="module" nonce="{{ CSP_NONCE }}">
         import {TableGrid} from "{% static 'js/datagrid.js' %}";
         new TableGrid({
             storageKey: "user-index-data-grid",
diff --git a/evap/student/templates/student_vote.html b/evap/student/templates/student_vote.html
index 30411076cf..3af3476d28 100644
--- a/evap/student/templates/student_vote.html
+++ b/evap/student/templates/student_vote.html
@@ -171,11 +171,11 @@ <h3 class="mb-3">{{ evaluation.full_name }} ({{ evaluation.course.semester.name
 
 {% block additional_javascript %}
     {% if not preview %}
-        <script type="text/javascript" src="{% static 'js/sisyphus.min.js' %}"></script>
+        <script type="text/javascript" src="{% static 'js/sisyphus.min.js' %}" nonce="{{ CSP_NONCE }}"></script>
 
         {{ text_answer_warnings|text_answer_warning_trigger_strings|json_script:'text-answer-warnings' }}
 
-        <script type="module">
+        <script type="module" nonce="{{ CSP_NONCE }}">
             import {initTextAnswerWarnings} from "{% static 'js/text-answer-warnings.js' %}";
             const lastSavedStorageKey = "student-vote-last-saved-at-{{ evaluation.id }}-{{ request.user.id }}";
             const textResultsPublishConfirmation = {
@@ -378,6 +378,6 @@ <h3 class="mb-3">{{ evaluation.full_name }} ({{ evaluation.course.semester.name
                 });
             }
         </script>
-        <script type="module" src="{% static 'js/student-vote.js' %}"></script>
+        <script type="module" src="{% static 'js/student-vote.js' %}" nonce="{{ CSP_NONCE }}"></script>
     {% endif %}
 {% endblock %}
diff --git a/requirements.txt b/requirements.txt
index 0bb2ad2022..c50038ec4f 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,6 +1,7 @@
 django-extensions==3.2.3
 django-fsm==2.8.1
 django~=5.0
+django-csp==3.7
 mozilla-django-oidc==3.0.0
 openpyxl==3.1.2
 psycopg2-binary==2.9.9

From 111e100ce8e98ca0402fd41b7c0be45d4e70d158 Mon Sep 17 00:00:00 2001
From: Richard Ebeling <dev@richardebeling.de>
Date: Mon, 13 Nov 2023 20:22:10 +0100
Subject: [PATCH 02/12] CSP-compliant navbar

---
 evap/evaluation/templates/navbar.html             | 15 ++++++++++++---
 .../templatetags/navbar_templatetags.py           |  5 +++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/evap/evaluation/templates/navbar.html b/evap/evaluation/templates/navbar.html
index 5f6a7c49fa..6c27448f17 100644
--- a/evap/evaluation/templates/navbar.html
+++ b/evap/evaluation/templates/navbar.html
@@ -91,7 +91,7 @@
                         <form class="d-flex" method="post" action="{% url 'evaluation:set_lang' %}">
                             {% csrf_token %}
                             <input name="language" type="hidden" value="{{ language_code }}">
-                            <button data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ language_name }}" type="submit" onclick="setSpinnerIcon('span-set-language-{{ language_code }}')"
+                            <button data-bs-toggle="tooltip" data-bs-placement="bottom" id="button-set-language-{{ language_code }}" title="{{ language_name }}" type="submit"
                                 class="btn btn-sm{% if current_language == language_code %} active{% endif %}">
                                 <span id="span-set-language-{{ language_code }}">{{ language_code|upper }}</span>
                             </button>
@@ -105,13 +105,13 @@
                         <div class="btn-group">
                             <form class="d-flex" method="post" action="{% url 'staff:exit_staff_mode' %}">
                                 {% csrf_token %}
-                                <button data-bs-toggle="tooltip" data-bs-placement="bottom" title="{% trans 'Regular mode' %}" type="submit" class="btn btn-sm {% if user.is_staff == False %}active{% endif %}" onclick="setSpinnerIcon('span-exit-staff-mode')">
+                                <button data-bs-toggle="tooltip" data-bs-placement="bottom" id="button-exit-staff-mode" title="{% trans 'Regular mode' %}" type="submit" class="btn btn-sm{% if user.is_staff == False %} active{% endif %}">
                                     <span id="span-exit-staff-mode" class="fas fa-user"></span>
                                 </button>
                             </form>
                             <form id="enter-staff-mode-form" class="d-flex" method="post" action="{% url 'staff:enter_staff_mode' %}">
                                 {% csrf_token %}
-                                <button data-bs-toggle="tooltip" data-bs-placement="bottom" title="{% trans 'Staff mode' %}" type="submit" class="btn btn-sm {% if user.is_staff %}active{% endif %}" onclick="setSpinnerIcon('span-enter-staff-mode')">
+                                <button data-bs-toggle="tooltip" data-bs-placement="bottom" id="button-enter-staff-mode" title="{% trans 'Staff mode' %}" type="submit" class="btn btn-sm{% if user.is_staff %} active{% endif %}">
                                     <span id="span-enter-staff-mode" class="fas fa-briefcase"></span>
                                 </button>
                             </form>
@@ -132,3 +132,12 @@
         </ul>
     </div>
 </nav>
+
+<script type="text/javascript" nonce="{{ request.csp_nonce }}">
+    {% for language_code, language_name in languages %}
+        document.getElementById("button-set-language-{{ language_code }}").addEventListener("click", () => { setSpinnerIcon('span-set-language-{{ language_code }}'); });
+    {% endfor %}
+
+    document.getElementById("button-exit-staff-mode").addEventListener("click", () => { setSpinnerIcon('span-exit-staff-mode'); });
+    document.getElementById("button-enter-staff-mode").addEventListener("click", () => { setSpinnerIcon('span-enter-staff-mode'); });
+</script>
diff --git a/evap/evaluation/templatetags/navbar_templatetags.py b/evap/evaluation/templatetags/navbar_templatetags.py
index 563583bbbc..201f33bb4b 100644
--- a/evap/evaluation/templatetags/navbar_templatetags.py
+++ b/evap/evaluation/templatetags/navbar_templatetags.py
@@ -7,8 +7,8 @@
 register = Library()
 
 
-@register.inclusion_tag("navbar.html")
-def include_navbar(user, language):
+@register.inclusion_tag("navbar.html", takes_context=True)
+def include_navbar(context, user, language):
     semesters_with_unarchived_results_or_grade_documents = Semester.objects.filter(
         Q(results_are_archived=False) | Q(grade_documents_are_deleted=False)
     )
@@ -25,6 +25,7 @@ def include_navbar(user, language):
     ]
 
     return {
+        "request": context["request"],
         "user": user,
         "current_language": language,
         "languages": LANGUAGES,

From 03e92f7bef594743b9383e6993cb249113868178 Mon Sep 17 00:00:00 2001
From: Richard Ebeling <dev@richardebeling.de>
Date: Wed, 29 Nov 2023 16:57:51 +0100
Subject: [PATCH 03/12] rewrite onclick-attributes of modal buttons

---
 .../contributor_evaluation_form.html          |  3 +-
 .../templates/contributor_index.html          | 14 ++++--
 evap/evaluation/templates/base.html           | 16 +++----
 .../templates/confirmation_text_modal.html    |  4 +-
 evap/grades/templates/grades_course_view.html |  5 ++-
 .../templates/grades_semester_view.html       | 12 ++++--
 ...ds_reward_point_redemption_event_list.html |  2 +-
 ...ewards_reward_point_redemption_events.html |  3 ++
 .../staff_evaluation_person_management.html   | 43 +++++++++++--------
 .../templates/staff_questionnaire_index.html  |  3 ++
 .../staff_questionnaire_index_list.html       |  2 +-
 .../templates/staff_semester_import.html      |  4 +-
 .../staff_semester_preparation_reminder.html  |  3 +-
 evap/staff/templates/staff_semester_view.html | 42 ++++++++++++------
 .../staff_semester_view_evaluation.html       |  5 ++-
 evap/staff/templates/staff_user_form.html     | 12 +++---
 evap/staff/templates/staff_user_import.html   |  5 ++-
 17 files changed, 116 insertions(+), 62 deletions(-)

diff --git a/evap/contributor/templates/contributor_evaluation_form.html b/evap/contributor/templates/contributor_evaluation_form.html
index 2ee67c2b99..a1e3cda450 100644
--- a/evap/contributor/templates/contributor_evaluation_form.html
+++ b/evap/contributor/templates/contributor_evaluation_form.html
@@ -92,7 +92,7 @@ <h5 class="card-title me-auto">{% trans 'Evaluation data' %}</h5>
                     <button name="operation" value="save" type="submit" class="btn btn-primary">{% trans 'Save' %}</button>
                     {# webtest does not allow submission with value "approve" if no such button exists #}
                     <button style="display: none" name="operation" value="approve" type="submit"></button>
-                    <button type="button" onclick="approveEvaluationModalShow(0, '');" class="btn btn-success">{% trans 'Save and approve' %}</button>
+                    <button type="button" id="approve-button" class="btn btn-success">{% trans 'Save and approve' %}</button>
                 {% endif %}
                 <a href="{% url 'contributor:index' %}" class="btn btn-light">{% if edit %}{% trans 'Cancel' %}{% else %}{% trans 'Back' %}{% endif %}</a>
             </div>
@@ -136,6 +136,7 @@ <h5 class="modal-title" id="previewModalLabel">{% trans 'Preview' %}</h5>
             form.appendChild(input);
             form.requestSubmit();
         };
+        document.getElementById("approve-button").addEventListener("click", () => approveEvaluationModalShow(0, ''));
     </script>
 
     {% blocktrans asvar title with evaluation_name=evaluation.full_name %}Request account creation for {{ evaluation_name }}{% endblocktrans %}
diff --git a/evap/contributor/templates/contributor_index.html b/evap/contributor/templates/contributor_index.html
index 9edcb30ba1..18b9f14680 100644
--- a/evap/contributor/templates/contributor_index.html
+++ b/evap/contributor/templates/contributor_index.html
@@ -157,9 +157,13 @@
                                                         <span class="fas fa-pencil"></span>
                                                     </a>
                                                     {% if not evaluation|has_nonresponsible_editor %}
-                                                        <a href="#" class="btn btn-sm btn-dark" data-bs-toggle="tooltip"
-                                                            data-bs-placement="top" title="{% trans 'Delegate preparation' %}"
-                                                            onclick="delegateSelectionModalShow(`{{ evaluation.full_name }}`, `{% url 'contributor:evaluation_direct_delegation' evaluation.id %}`);return false;"
+                                                        <a href="#"
+                                                            class="btn btn-sm btn-dark delegate-button"
+                                                            data-bs-toggle="tooltip"
+                                                            data-bs-placement="top"
+                                                            title="{% trans 'Delegate preparation' %}"
+                                                            data-evaluation-name="{{ evaluation.full_name }}"
+                                                            data-delegation-url="{% url 'contributor:evaluation_direct_delegation' evaluation.id %}"
                                                         >
                                                             <span class="fas fa-hand-point-left"></span>
                                                         </a>
@@ -242,6 +246,10 @@ <h5 class="modal-title" id="{{ modal_id }}Label">{% trans 'Delegate preparation'
                 var {{ modal_id }} = new bootstrap.Modal(document.getElementById('{{ modal_id }}'));
                 {{ modal_id }}.show();
             }
+
+            for (const button of document.querySelectorAll(".delegate-button")) {
+                button.addEventListener("click", () => delegateSelectionModalShow(button.dataset.evaluationName, button.dataset.delegationUrl));
+            }
         </script>
     {% endwith %}
 {% endblock %}
diff --git a/evap/evaluation/templates/base.html b/evap/evaluation/templates/base.html
index 7be3e6f1ef..f037af6494 100644
--- a/evap/evaluation/templates/base.html
+++ b/evap/evaluation/templates/base.html
@@ -28,14 +28,6 @@
     <body>
         <script type="text/javascript" src="{% static 'bootstrap/dist/js/bootstrap.bundle.min.js' %}" nonce="{{ CSP_NONCE }}"></script>
 
-        {% block modals %}
-            {% if user.is_authenticated %}
-                {% trans 'Feedback' as title %}
-                {% trans 'You are welcome to submit feedback regarding the evaluation platform or specific evaluations. Please let us know how we can improve your experience on EvaP.' as teaser %}
-                {% include 'contact_modal.html' with modal_id='feedbackModal' user=request.user title=title teaser=teaser %}
-            {% endif %}
-        {% endblock %}
-
         <div class="sticky-top d-print-none z-over-fixed">
             {% include_navbar user LANGUAGE_CODE %}
 
@@ -71,6 +63,14 @@
 
         {% include 'footer.html' %}
 
+        {% block modals %}
+            {% if user.is_authenticated %}
+                {% trans 'Feedback' as title %}
+                {% trans 'You are welcome to submit feedback regarding the evaluation platform or specific evaluations. Please let us know how we can improve your experience on EvaP.' as teaser %}
+                {% include 'contact_modal.html' with modal_id='feedbackModal' user=request.user title=title teaser=teaser %}
+            {% endif %}
+        {% endblock %}
+
         <script src="{% url 'javascript-catalog' %}" nonce="{{ CSP_NONCE }}"></script>
 
         <script type="text/javascript" src="{% static 'js/jquery-2.1.3.min.js' %}" nonce="{{ CSP_NONCE }}"></script>
diff --git a/evap/evaluation/templates/confirmation_text_modal.html b/evap/evaluation/templates/confirmation_text_modal.html
index 6c89f56e38..36514686cc 100644
--- a/evap/evaluation/templates/confirmation_text_modal.html
+++ b/evap/evaluation/templates/confirmation_text_modal.html
@@ -11,7 +11,7 @@ <h5 class="modal-title" id="{{ modal_id }}Label">{{ title }}</h5>
                 <div class="modal-body">
                     {{ question|safe }}
                     <div class="my-4">
-                        <input type="text" class="form-control" id="{{ modal_id }}ConfirmationText" oninput="{{ modal_id }}CheckValue();" />
+                        <input type="text" class="form-control check-value-input" id="{{ modal_id }}ConfirmationText"/>
                     </div>
                     <div class="modal-submit-group">
                         <button type="button" class="btn btn-light" data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
@@ -41,4 +41,6 @@ <h5 class="modal-title" id="{{ modal_id }}Label">{{ title }}</h5>
             $('#{{ modal_id }}ActionButton').prop('disabled', true);
         }
     }
+
+    document.querySelectorAll(".check-value-input").forEach(input => input.addEventListener("input", {{modal_id}}CheckValue));
 </script>
diff --git a/evap/grades/templates/grades_course_view.html b/evap/grades/templates/grades_course_view.html
index 7e9768183a..3e401974bd 100644
--- a/evap/grades/templates/grades_course_view.html
+++ b/evap/grades/templates/grades_course_view.html
@@ -30,7 +30,7 @@ <h3 class="mb-3">{{ course.name }} ({{ semester.name }})</h3>
                                     <a href="{% url 'grades:download_grades' grade_document.id %}" class="btn btn-sm btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Download' %}"><span class="fas fa-download"></span></a>
                                     {% if user.is_grade_publisher %}
                                         <a href="{% url 'grades:edit_grades' grade_document.id %}" class="btn btn-sm btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Edit' %}"><span class="fas fa-pencil"></span></a>
-                                        <button type="button" onclick="deleteGradedocumentModalShow({{ grade_document.id }}, '{{ grade_document.description|escapejs }}');" class="btn btn-sm btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delete' %}">
+                                        <button type="button" class="btn btn-sm btn-danger delete-grade-document-button" data-grade-document-id="{{ grade_document.id }}" data-grade-document-description="{{ grade_document.description }}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delete' %}">
                                             <span class="fas fa-trash"></span>
                                         </button>
                                     {% endif %}
@@ -67,5 +67,8 @@ <h3 class="mb-3">{{ course.name }} ({{ semester.name }})</h3>
                 fadeOutThenRemove(document.getElementById('grade_document-row-'+dataId));
             }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         };
+        for (const button of document.querySelectorAll("delete-grade-document-button")) {
+            button.addEventListener("click", () => deleteGradedocumentModalShow(button.dataset.gradeDocumentId, button.dataset.gradeDocumentDescription));
+        }
     </script>
 {% endblock %}
diff --git a/evap/grades/templates/grades_semester_view.html b/evap/grades/templates/grades_semester_view.html
index c296f29332..6aeebf6b78 100644
--- a/evap/grades/templates/grades_semester_view.html
+++ b/evap/grades/templates/grades_semester_view.html
@@ -64,7 +64,7 @@ <h3 class="col-8 mb-0">
                                     {% if num_final_grades > 0 %}
                                         <span class="fas fa-file"></span> {{ num_final_grades }}
                                     {% elif course.gets_no_grade_documents %}
-                                       <a href="#" onclick="confirmLateruploadModalShow({{ course.id }}, '{{ course.name|escapejs }}');">
+                                        <a href="#" class="confirm-later-upload-button" data-course-id="{{ course.id }}" data-course-name="{{ course.name }}">
                                             <span class="fas fa-xmark light-link" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Grade documents for this course will not be uploaded. Click to change.' %}"></span>
                                         </a>
                                     {% endif %}
@@ -72,7 +72,7 @@ <h3 class="col-8 mb-0">
                                 <td class="text-end" style="min-width:72px">
                                     {% if not course.gets_no_grade_documents %}
                                         {% if num_final_grades == 0 %}
-                                            <button type="button" onclick="confirmNouploadModalShow({{ course.id }}, '{{ course.name|escapejs }}');" class="btn btn-sm btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Confirm that final grades have been submitted but will not be uploaded.' %}">
+                                            <button type="button" class="btn btn-sm btn-secondary confirm-noupload-button" data-bs-toggle="tooltip" data-bs-placement="top" data-course-id="{{ course.id }}" data-course-name="{{ course.name }}" title="{% trans 'Confirm that final grades have been submitted but will not be uploaded.' %}">
                                                 <span class="fas fa-xmark"></span>
                                             </button>
                                             <div class="btn-group" role="group" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Upload grade document' %}">
@@ -110,6 +110,9 @@ <h3 class="col-8 mb-0">
         function confirmNouploadModalAction(dataId) {
             updateGradeStatusOfCourse(dataId, true);
         }
+        for(const button of document.querySelectorAll(".confirm-noupload-button")) {
+            button.addEventListener("click", () => confirmNouploadModalShow(button.dataset.courseId, button.dataset.courseName));
+        }
 
         function updateGradeStatusOfCourse(dataId, status) {
             fetch("{% url 'grades:set_no_grades'%}", {
@@ -129,7 +132,10 @@ <h3 class="col-8 mb-0">
     <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         function confirmLateruploadModalAction(dataId) {
             updateGradeStatusOfCourse(dataId, false);
-        };
+        }
+        for (const button of document.querySelectorAll(".confirm-later-upload-button")) {
+            button.addEventListener("click", () => confirmLateruploadModalShow(button.dataset.courseId, button.dataset.courseName));
+        }
     </script>
 {% endblock %}
 
diff --git a/evap/rewards/templates/rewards_reward_point_redemption_event_list.html b/evap/rewards/templates/rewards_reward_point_redemption_event_list.html
index 3648befacf..e4f6738e2b 100644
--- a/evap/rewards/templates/rewards_reward_point_redemption_event_list.html
+++ b/evap/rewards/templates/rewards_reward_point_redemption_event_list.html
@@ -24,7 +24,7 @@
                             <a href="{% url 'rewards:reward_point_redemption_event_export' event.id %}" class="btn btn-sm btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Export Redemptions' %}"><span class="fas fa-download"></span></a>
                             <a href="{% url 'rewards:reward_point_redemption_event_edit' event.id %}" class="btn btn-sm btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Edit' %}"><span class="fas fa-pencil"></span></a>
                             {% if event.can_delete %}
-                                <button type="button" onclick="deleteEventModalShow({{ event.id }}, '{{ event.name|escapejs }}');" class="btn btn-sm btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delete' %}">
+                                <button type="button" class="btn btn-sm btn-danger delete-event-button" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delete' %}" data-event-id="{{ event.id }}" data-event-name="{{ event.name }}">
                                     <span class="fas fa-trash"></span>
                                 </button>
                             {% else %}
diff --git a/evap/rewards/templates/rewards_reward_point_redemption_events.html b/evap/rewards/templates/rewards_reward_point_redemption_events.html
index a3c6e59edd..2082f95dda 100644
--- a/evap/rewards/templates/rewards_reward_point_redemption_events.html
+++ b/evap/rewards/templates/rewards_reward_point_redemption_events.html
@@ -44,5 +44,8 @@
                 fadeOutThenRemove(document.querySelector('#event-row-'+dataId));
             }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         };
+        for(const button of document.querySelectorAll(".delete-event-button")) {
+            button.addEventListener("click", () => deleteEventModalShow(button.dataset.eventId, button.dataset.eventName));
+        }
     </script>
 {% endblock %}
diff --git a/evap/staff/templates/staff_evaluation_person_management.html b/evap/staff/templates/staff_evaluation_person_management.html
index 9d0e81a908..94bb0568d6 100644
--- a/evap/staff/templates/staff_evaluation_person_management.html
+++ b/evap/staff/templates/staff_evaluation_person_management.html
@@ -28,8 +28,8 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'From Excel file' %}</h6>
                         {% else %}
                             <button name="operation" value="test-participants" type="submit" class="btn btn-sm btn-light form-submit-btn">{% trans 'Upload and test' %}</button>
                             <div class="mt-2">
-                                <button name="operation" value="import-participants" type="button" onclick="importParticipantsModalShow('import-participants');" class="btn btn-sm btn-primary me-1 form-submit-btn";>{% trans 'Import previously uploaded file' %}</button>
-                                <button name="operation" value="import-replace-participants" type="button" onclick="replaceParticipantsModalShow('import-replace-participants');" class="btn btn-sm btn-danger form-submit-btn">{% trans 'Replace participants' %}</button>
+                                <button name="operation" value="import-participants" type="button" id="import-participants-button" class="btn btn-sm btn-primary me-1 form-submit-btn";>{% trans 'Import previously uploaded file' %}</button>
+                                <button name="operation" value="import-replace-participants" type="button" id="import-replace-participants-button" class="btn btn-sm btn-danger form-submit-btn">{% trans 'Replace participants' %}</button>
                             </div>
                         {% endif %}
                     </div>
@@ -47,8 +47,8 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'From other evaluation' %}</h
                         {% include 'bootstrap_form.html' with form=participant_copy_form wide=True %}
                     </div>
                     <div class="card-footer text-center">
-                        <button name="operation" value="copy-participants" type="button" onclick="copyParticipantsModalShow('copy-participants');" class="btn btn-sm btn-primary form-submit-btn">{% trans 'Copy participants' %}</button>
-                        <button name="operation" value="copy-replace-participants" type="button" onclick="copyReplaceParticipantsModalShow('copy-replace-participants');" class="btn btn-sm btn-danger ms-1 form-submit-btn">{% trans 'Replace participants' %}</button>
+                        <button name="operation" value="copy-participants" type="button" id="copy-participants-button" class="btn btn-sm btn-primary form-submit-btn">{% trans 'Copy participants' %}</button>
+                        <button name="operation" value="copy-replace-participants" type="button" id="copy-replace-participants-button" class="btn btn-sm btn-danger ms-1 form-submit-btn">{% trans 'Replace participants' %}</button>
                     </div>
                 </div>
             </form>
@@ -77,8 +77,8 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'From Excel file' %}</h6>
                         {% else %}
                             <button name="operation" value="test-contributors" type="submit" class="btn btn-sm btn-light form-submit-btn">{% trans 'Upload and test' %}</button>
                             <div class="mt-2">
-                                <button name="operation" value="import-contributors" type="button" onclick="importContributorsModalShow('import-contributors');" class="btn btn-sm btn-primary form-submit-btn">{% trans 'Import previously uploaded file' %}</button>
-                                <button name="operation" value="import-replace-contributors" type="button" onclick="replaceContributorsModalShow('import-replace-contributors');" class="btn btn-sm btn-danger ms-1 form-submit-btn">{% trans 'Replace contributors' %}</button>
+                                <button name="operation" value="import-contributors" type="button" id="import-contributors-button" class="btn btn-sm btn-primary form-submit-btn">{% trans 'Import previously uploaded file' %}</button>
+                                <button name="operation" value="import-replace-contributors" type="button" id="import-replace-contributors-button" class="btn btn-sm btn-danger ms-1 form-submit-btn">{% trans 'Replace contributors' %}</button>
                             </div>
                         {% endif %}
                     </div>
@@ -96,8 +96,8 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'From other evaluation' %}</h
                         {% include 'bootstrap_form.html' with form=contributor_copy_form wide=True %}
                     </div>
                     <div class="card-footer text-center">
-                        <button name="operation" value="copy-contributors" type="button" onclick="copyContributorsModalShow('copy-contributors');" class="btn btn-sm btn-primary form-submit-btn">{% trans 'Copy contributors' %}</button>
-                        <button name="operation" value="copy-replace-contributors" type="button" onclick="copyReplaceContributorsModalShow('copy-replace-contributors');" class="btn btn-sm btn-danger ms-1 form-submit-btn">{% trans 'Replace contributors' %}</button>
+                        <button name="operation" value="copy-contributors" type="button" id="copy-contributors-button" class="btn btn-sm btn-primary form-submit-btn">{% trans 'Copy contributors' %}</button>
+                        <button name="operation" value="copy-replace-contributors" type="button" id="copy-replace-contributors-button" class="btn btn-sm btn-danger ms-1 form-submit-btn">{% trans 'Replace contributors' %}</button>
                     </div>
                 </div>
             </form>
@@ -129,7 +129,7 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
 {% endblock %}
 
 {% block modals %}
-{{ block.super }}
+    {{ block.super }}
     {% trans 'Import participants' as title %}
     {% blocktrans asvar question %}Do you really want to import the Excel file with participant data?{% endblocktrans %}
     {% trans 'Import participants' as action_text %}
@@ -144,7 +144,8 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
             const form = document.getElementById("participant-import-form");
             form.appendChild(input);
             form.requestSubmit();
-        };
+        }
+        document.getElementById("import-participants-button").addEventListener("click", () => importParticipantsModalShow('import-participants'));
     </script>
 
     {% trans 'Replace participants' as title %}
@@ -161,7 +162,8 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
             const form = document.getElementById("participant-import-form");
             form.appendChild(input);
             form.requestSubmit();
-        };
+        }
+        document.getElementById("import-replace-participants-button").addEventListener("click", () => replaceParticipantsModalShow('import-replace-participants'));
     </script>
 
     {% trans 'Copy participants' as title %}
@@ -178,7 +180,8 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
             const form = document.getElementById("participant-copy-form");
             form.appendChild(input);
             form.requestSubmit();
-        };
+        }
+        document.getElementById("copy-participants-button").addEventListener("click", () => copyParticipantsModalShow('copy-participants'));
     </script>
 
     {% trans 'Replace participants' as title %}
@@ -195,7 +198,8 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
             const form = document.getElementById("participant-copy-form");
             form.appendChild(input);
             form.requestSubmit();
-        };
+        }
+        document.getElementById("copy-replace-participants-button").addEventListener("click", () => copyReplaceParticipantsModalShow('copy-replace-participants'));
     </script>
 
     {% trans 'Import contributors' as title %}
@@ -212,7 +216,8 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
             const form = document.getElementById("contributor-import-form");
             form.appendChild(input);
             form.requestSubmit();
-        };
+        }
+        document.getElementById("import-contributors-button").addEventListener("click", () => importContributorsModalShow('import-contributors'));
     </script>
 
     {% trans 'Replace contributors' as title %}
@@ -229,7 +234,8 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
             const form = document.getElementById("contributor-import-form");
             form.appendChild(input);
             form.requestSubmit();
-        };
+        }
+        document.getElementById("import-replace-contributors-button").addEventListener("click", () => replaceContributorsModalShow('import-replace-contributors'));
     </script>
 
     {% trans 'Copy contributors' as title %}
@@ -246,7 +252,8 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
             const form = document.getElementById("contributor-copy-form");
             form.appendChild(input);
             form.requestSubmit();
-        };
+        }
+        document.getElementById("copy-contributors-button").addEventListener("click", () => copyContributorsModalShow('copy-contributors'));
     </script>
 
     {% trans 'Replace contributors' as title %}
@@ -263,9 +270,9 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
             const form = document.getElementById("contributor-copy-form");
             form.appendChild(input);
             form.requestSubmit();
-        };
+        }
+        document.getElementById("copy-replace-contributors-button").addEventListener("click", () => copyReplaceContributorsModalShow('copy-replace-contributors'));
     </script>
-
 {% endblock %}
 
 {% block additional_javascript %}
diff --git a/evap/staff/templates/staff_questionnaire_index.html b/evap/staff/templates/staff_questionnaire_index.html
index b3811ad06e..b159afc9c6 100644
--- a/evap/staff/templates/staff_questionnaire_index.html
+++ b/evap/staff/templates/staff_questionnaire_index.html
@@ -62,6 +62,9 @@
                 fadeOutThenRemove(document.querySelector('#questionnaire-row-'+dataId));
             }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         };
+        for (const button of document.querySelectorAll(".delete-questionnaire-button")) {
+            button.addEventListener("click", () => deleteQuestionnaireModalShow(button.dataset.questionnaireId, button.dataset.questionnaireName));
+        }
     </script>
 {% endblock %}
 
diff --git a/evap/staff/templates/staff_questionnaire_index_list.html b/evap/staff/templates/staff_questionnaire_index_list.html
index c4f0331e3b..d00de8a710 100644
--- a/evap/staff/templates/staff_questionnaire_index_list.html
+++ b/evap/staff/templates/staff_questionnaire_index_list.html
@@ -52,7 +52,7 @@
                                 <a href="{% url 'staff:questionnaire_copy' questionnaire.id %}" class="btn btn-sm btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Copy' %}"><span class="fas fa-copy fa-fw"></span></a>
                                 <a href="{% url 'staff:questionnaire_view' questionnaire.id %}" class="btn btn-sm btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Preview' %}"><span class="fas fa-eye fa-fw"></span></a>
                                 {% if questionnaire.can_be_deleted_by_manager %}
-                                    <button type="button" onclick="deleteQuestionnaireModalShow({{ questionnaire.id }}, '{{ questionnaire.name|escapejs }}');" class="btn btn-sm btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delete' %}">
+                                <button type="button" class="btn btn-sm btn-danger delete-questionnaire-button" data-questionnaire-id="{{ questionnaire.id }}" data-questionnaire-name="{{ questionnaire.name }}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delete' %}">
                                         <span class="fas fa-trash"></span>
                                     </button>
                                 {% else %}
diff --git a/evap/staff/templates/staff_semester_import.html b/evap/staff/templates/staff_semester_import.html
index 0cf0b96cff..4bf6ab49ce 100644
--- a/evap/staff/templates/staff_semester_import.html
+++ b/evap/staff/templates/staff_semester_import.html
@@ -34,7 +34,7 @@ <h3>{% trans 'Import semester data' %}</h3>
                     <button name="operation" value="test" type="submit" class="btn btn-light form-submit-btn">{% trans 'Upload and test' %}</button>
                 {% else %}
                     <button name="operation" value="test" type="submit" class="btn btn-light form-submit-btn">{% trans 'Upload and test' %}</button>
-                    <button name="operation" value="import" type="button" onclick="importSemesterModalShow('import');" class="btn btn-primary form-submit-btn">{% trans 'Import previously uploaded file' %}</button>
+                    <button name="operation" value="import" type="button" id="button-show-import-modal" class="btn btn-primary form-submit-btn">{% trans 'Import previously uploaded file' %}</button>
                 {% endif %}
             </div>
         </div>
@@ -58,8 +58,8 @@ <h3>{% trans 'Import semester data' %}</h3>
             form.appendChild(input);
             form.requestSubmit();
         };
+        document.getElementById("button-show-import-modal").addEventListener("click", () => importSemesterModalShow('import'));
     </script>
-
 {% endblock %}
 
 {% block additional_javascript %}
diff --git a/evap/staff/templates/staff_semester_preparation_reminder.html b/evap/staff/templates/staff_semester_preparation_reminder.html
index 860b8e58e6..c9b5f0be9f 100644
--- a/evap/staff/templates/staff_semester_preparation_reminder.html
+++ b/evap/staff/templates/staff_semester_preparation_reminder.html
@@ -13,7 +13,7 @@
     {% if responsible_list %}
         <div class="d-flex mb-3">
             <div class="me-auto">
-                <button type="button" id="remindAllButton" onClick="remindAllModalShow()" class="btn btn-sm btn-light">{% trans 'Remind all' %}</button>
+                <button type="button" id="remindAllButton" class="btn btn-sm btn-light">{% trans 'Remind all' %}</button>
             </div>
         </div>
     {% endif %}
@@ -90,5 +90,6 @@
                 location.reload();
             }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         }
+        document.getElementById("remindAllButton").addEventListener("click", () => remindAllModalShow());
     </script>
 {% endblock %}
diff --git a/evap/staff/templates/staff_semester_view.html b/evap/staff/templates/staff_semester_view.html
index 36aee5d470..325f66b955 100644
--- a/evap/staff/templates/staff_semester_view.html
+++ b/evap/staff/templates/staff_semester_view.html
@@ -16,7 +16,7 @@ <h3>
             &nbsp;
             <a href="{% url 'staff:semester_edit' semester.id %}" class="btn btn-sm btn-secondary">{% trans 'Edit' %}</a>
             <button
-                onClick="makeActiveSemesterModalShow({{ semester.id }})" class="btn btn-sm btn-light"
+                class="btn btn-sm btn-light"
                 id="makeActiveSemesterButton" type="button"
                 {% if semester.is_active %}
                     disabled
@@ -25,7 +25,7 @@ <h3>
                 {% endif %}>
                 {% trans 'Make active' %}
             </button>
-            <button type="button" id="deleteSemesterButton"{% if not semester.can_be_deleted_by_manager %} disabled{% endif %} onclick="deleteSemesterModalShow({{ semester.id }}, '{{ semester.name|escapejs }}');" class="btn btn-sm btn-danger">{% trans 'Delete' %}</button>
+            <button type="button" id="deleteSemesterButton"{% if not semester.can_be_deleted_by_manager %} disabled{% endif %} class="btn btn-sm btn-danger">{% trans 'Delete' %}</button>
         {% endif %}
     </h3>
 
@@ -37,7 +37,7 @@ <h3>
             <div class="collapse{% if semester.participations_are_archived or semester.grade_documents_are_deleted or semester.results_are_archived %} show{% endif %}" id="archivingCard">
                 <div class="card-body">
                     {% if semester.participations_can_be_archived %}
-                        <button type="button" onclick="archiveParticipationsModalShow({{ semester.id }}, '{{ semester.name|escapejs }}');" class="btn btn-sm btn-warning">{% trans 'Archive participations' %}</button>
+                        <button type="button" id="archiveParticipationsButton" class="btn btn-sm btn-warning">{% trans 'Archive participations' %}</button>
                     {% elif semester.participations_are_archived %}
                         <button type="button" disabled class="btn btn-sm btn-success">{% trans 'Participations have been archived' %}</button>
                     {% else %}
@@ -46,12 +46,12 @@ <h3>
                             {% trans 'Archive participations' %}</button>
                     {% endif %}
                     {% if semester.grade_documents_can_be_deleted %}
-                        <button type="button" onclick="deleteGradeDocumentsModalShow({{ semester.id }}, '{{ semester.name|escapejs }}');" class="btn btn-sm btn-warning">{% trans 'Delete grade documents' %}</button>
+                        <button type="button" id="deleteGradeDocumentsButton" class="btn btn-sm btn-warning">{% trans 'Delete grade documents' %}</button>
                     {% elif semester.grade_documents_are_deleted %}
                         <button type="button" class="btn btn-sm btn-success disabled">{% trans 'Grade documents have been deleted' %}</button>
                     {% endif %}
                     {% if semester.results_can_be_archived %}
-                        <button type="button" onclick="archiveResultsModalShow({{ semester.id }}, '{{ semester.name|escapejs }}');" class="btn btn-sm btn-warning">{% trans 'Archive results' %}</button>
+                        <button type="button" id="archiveResultsButton" class="btn btn-sm btn-warning">{% trans 'Archive results' %}</button>
                     {% elif semester.results_are_archived %}
                         <button type="button" disabled class="btn btn-sm btn-success">{% trans 'Results have been archived' %}</button>
                     {% endif %}
@@ -72,7 +72,7 @@ <h3>
                     <div class="btn-switch ms-2">
                         <div class="btn-switch-label">{% trans 'Reward points active' %}</div>
                         <div class="btn-switch btn-group icon-buttons">
-                            <button type="button" onclick="activateRewardPointsModalShow({{ semester.id }}, '{{ semester.name|escapejs }}');" class="btn btn-sm btn-light{% if rewards_active %} active{% endif %}"><span class="fas fa-check" aria-hidden="true"></span></button>
+                            <button type="button" id="activateRewardPointsButton" class="btn btn-sm btn-light{% if rewards_active %} active{% endif %}"><span class="fas fa-check" aria-hidden="true"></span></button>
                             <button type="submit" name="activation_status" value="off" form="form_activation_status" class="btn btn-sm btn-light{% if not rewards_active %} active{% endif %}"><span class="fas fa-xmark" aria-hidden="true"></span></button>
                         </div>
                     </div>
@@ -421,7 +421,7 @@ <h3>
                                             </a>
                                         {% endif %}
                                         {% if course.can_be_deleted_by_manager %}
-                                            <button type="button" onclick="deleteCourseModalShow({{ course.id }}, '{{ course.name|escapejs }}');" class="btn btn-sm btn-outline-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delete' %}">
+                                            <button type="button" data-course-id="{{ course.id }}" data-course-name="{{ course.name }}" class="btn btn-sm btn-outline-danger delete-course-button" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delete' %}">
                                                 <span class="fas fa-trash" aria-hidden="true"></span>
                                             </button>
                                         {% endif %}
@@ -463,14 +463,15 @@ <h3>
                 location.reload();
             }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         }
+        makeActiveSemesterButton.addEventListener("click", () => makeActiveSemesterModalShow({{ semester.id }}));
     </script>
     {% trans 'Delete semester' as title %}
     {% blocktrans asvar question %}Do you really want to delete the semester <strong data-label=""></strong>? All courses and evaluations will be deleted as well as all results. If you are sure, enter the name of the semester below.{% endblocktrans %}
     {% trans 'Delete semester' as action_text %}
     {% include 'confirmation_text_modal.html' with modal_id='deleteSemesterModal' title=title question=question action_text=action_text btn_type='danger' %}
     <script type="text/javascript" nonce="{{ CSP_NONCE }}">
+        const deleteButton = document.getElementById('deleteSemesterButton');
         function deleteSemesterModalAction(dataId) {
-            const deleteButton = document.getElementById('deleteSemesterButton');
             deleteButton.disabled = true;
             deleteButton.textContent = "{% trans 'Deleting...' %}";
 
@@ -482,8 +483,10 @@ <h3>
                 assert(response.ok);
                 location.replace("{% url 'staff:index' %}");
             }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
-        };
+        }
+        deleteButton.addEventListener("click", () => deleteSemesterModalShow({{ semester.id }}, '{{ semester.name|escapejs }}'));
     </script>
+
     {% trans 'Archive participations' as title %}
     {% blocktrans asvar question %}Do you really want to archive all participations in the semester <strong data-label=""></strong>? Further changes to the evaluations won't be possible and you can't undo this action.{% endblocktrans %}
     {% trans 'Archive participations' as action_text %}
@@ -498,8 +501,13 @@ <h3>
                 assert(response.ok);
                 location.reload();
             }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
-        };
+        }
+        const archiveButton = document.getElementById("archiveParticipationsButton");
+        if(archiveButton !== null) {
+            archiveButton.addEventListener("click", () => archiveParticipationsModalShow({{ semester.id }}, '{{ semester.name|escapejs }}'));
+        }
     </script>
+
     {% trans 'Delete grade documents' as title %}
     {% blocktrans asvar question %}Do you really want to delete the grade documents in the semester <strong data-label=""></strong>? This will delete all existing grade documents for this semester's courses and will disable new uploads. You can't undo this action.{% endblocktrans %}
     {% trans 'Delete grade documents' as action_text %}
@@ -514,7 +522,8 @@ <h3>
                 assert(response.ok);
                 location.reload();
             }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
-        };
+        }
+        document.getElementById("deleteGradeDocumentsButton").addEventListener("click", () => deleteGradeDocumentsModalShow({{ semester.id }}, '{{ semester.name|escapejs }}'));
     </script>
     {% trans 'Archive results' as title %}
     {% blocktrans asvar question %}Do you really want to archive the results in the semester <strong data-label=""></strong>? This will make the results of all evaluations inaccessible for all users except their contributors and managers. You can't undo this action.{% endblocktrans %}
@@ -530,7 +539,8 @@ <h3>
                 assert(response.ok);
                 location.reload();
             }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
-        };
+        }
+        document.getElementById("archiveResultsButton").addEventListener("click", () => archiveResultsModalShow({{ semester.id }}, '{{ semester.name|escapejs }}'));
     </script>
     {% trans 'Delete evaluation' as title %}
     {% trans 'Do you really want to delete the evaluation <strong data-label=""></strong>?' as question %}
@@ -546,7 +556,7 @@ <h3>
                 assert(response.ok);
                 fadeOutThenRemove(document.getElementById('evaluation-row-'+dataId))
             }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
-        };
+        }
     </script>
     {% trans 'Delete course' as title %}
     {% trans 'Do you really want to delete the course <strong data-label=""></strong>?' as question %}
@@ -562,7 +572,10 @@ <h3>
                 assert(response.ok);
                 fadeOutThenRemove(document.getElementById('#course-row-'+dataId))
             }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
-        };
+        }
+        for (const button of document.querySelectorAll(".delete-course-button")) {
+            button.addEventListener("click", () => deleteCourseModalShow(button.dataset.courseId, button.dataset.courseName));
+        }
     </script>
     {% trans 'Activate reward points' as title %}
     {% blocktrans asvar question %}Do you want to activate the reward points for the semester <strong data-label=""></strong>? The activation will allow participants to receive reward points when voting and will also grant all eligible points for participants who have already voted so far. The process will take a while.{% endblocktrans %}
@@ -572,6 +585,7 @@ <h3>
         function activateRewardPointsModalAction() {
             document.getElementById("form_activation_status").requestSubmit();
         }
+        document.getElementById("activateRewardPointsButton").addEventListener("click", () => activateRewardPointsModalShow({{ semester.id }}, '{{ semester.name|escapejs }}'));
     </script>
 {% endblock %}
 
diff --git a/evap/staff/templates/staff_semester_view_evaluation.html b/evap/staff/templates/staff_semester_view_evaluation.html
index fc3626b7d8..511856ae6b 100644
--- a/evap/staff/templates/staff_semester_view_evaluation.html
+++ b/evap/staff/templates/staff_semester_view_evaluation.html
@@ -208,9 +208,12 @@
             </a>
         {% endif %}
         {% if request.user.is_manager and evaluation.can_be_deleted_by_manager %}
-            <button type="button" onclick="deleteEvaluationModalShow({{ evaluation.id }}, '{{ evaluation.full_name|escapejs }}');" class="btn btn-sm btn-outline-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delete' %}">
+            <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delete' %}">
                 <span class="fas fa-trash" aria-hidden="true"></span>
             </button>
+            <script type="text/javascript" nonce="{{ CSP_NONCE }}">
+                document.currentScript.previousSibling.addEventListener("click", () => deleteEvaluationModalShow({{ evaluation.id }}, '{{ evaluation.full_name|escapejs }}'));
+            </script>
         {% endif %}
     {% endif %}
 </td>
diff --git a/evap/staff/templates/staff_user_form.html b/evap/staff/templates/staff_user_form.html
index 966840a1f1..3c9e0fe1e7 100644
--- a/evap/staff/templates/staff_user_form.html
+++ b/evap/staff/templates/staff_user_form.html
@@ -21,7 +21,7 @@ <h3>{% if form.instance.id %}{% trans 'Edit user' %}{% else %}{% trans 'Create u
             <div class="ms-auto d-print-none">
                 {% if has_due_evaluations %}
                     <div>
-                        <button type="button" class="btn btn-sm btn-light" onclick="resendEmailModalShow({{ form.instance.id }}, '{{ form.instance.full_name|escapejs }}');">{% trans 'Resend evaluation started email' %}</button>
+                        <button type="button" class="btn btn-sm btn-light" id="resend-email-button">{% trans 'Resend evaluation started email' %}</button>
                     </div>
                 {% else %}
                     <div title="{% trans 'This user currently has no due evaluations.' %}" data-bs-toggle="tooltip" data-bs-placement="bottom">
@@ -103,9 +103,7 @@ <h5 class="card-title me-auto">{% trans 'Export evaluation results' %}</h5>
             <div class="card-body">
                 <button type="submit" class="btn btn-primary">{% trans 'Save user' %}</button>
                 {% if form.instance and form.instance.can_be_deleted_by_manager %}
-                    <button type="button" class="btn btn-danger" onclick="deleteModalShow({{ form.instance.id }}, '{{ form.instance.full_name|escapejs }}');">
-                        {% trans 'Delete user' %}
-                    </button>
+                    <button type="button" class="btn btn-danger" id="delete-button">{% trans 'Delete user' %}</button>
                 {% else %}
                     <span tabindex="0" data-bs-toggle="tooltip" title="{% blocktrans %}This user contributes to an evaluation, participates in an evaluation whose participations haven't been archived yet or has special rights and as such cannot be deleted.{% endblocktrans %}">
                     <button type="button" disabled class="btn btn-danger">
@@ -134,6 +132,8 @@ <h5 class="card-title me-auto">{% trans 'Export evaluation results' %}</h5>
                 window.location="{% url 'staff:user_index' %}"
             }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         }
+
+        document.getElementById("delete-button").addEventListener("click", () => deleteModalShow({{ form.instance.id }}, '{{ form.instance.full_name|escapejs }}'));
     </script>
     {% if form.instance.id %}
         {% trans 'Send notification email' as title %}
@@ -150,7 +150,9 @@ <h5 class="card-title me-auto">{% trans 'Export evaluation results' %}</h5>
                     assert(response.ok);
                     window.location="{% url 'staff:user_edit' user_id %}"
                 }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
-            };
+            }
+
+            document.getElementById("resend-email-button").addEventListener("click", () => copyReplaceContributorsModalShow('copy-replace-contributors'));
         </script>
     {% endif %}
 {% endblock %}
diff --git a/evap/staff/templates/staff_user_import.html b/evap/staff/templates/staff_user_import.html
index bf1263df96..3477403cd2 100644
--- a/evap/staff/templates/staff_user_import.html
+++ b/evap/staff/templates/staff_user_import.html
@@ -33,7 +33,7 @@ <h3>{% trans 'Import users' %}</h3>
                     <button name="operation" value="test" type="submit" class="btn btn-light form-submit-btn">{% trans 'Upload and test' %}</button>
                 {% else %}
                     <button name="operation" value="test" type="submit" class="btn btn-light form-submit-btn">{% trans 'Upload and test' %}</button>
-                    <button name="operation" value="import" type="button" onclick="importUserModalShow('import');" class="btn btn-primary form-submit-btn">{% trans 'Import previously uploaded file' %}</button>
+                    <button name="operation" value="import" type="button" id="import-users-button" class="btn btn-primary form-submit-btn">{% trans 'Import previously uploaded file' %}</button>
                 {% endif %}
             </div>
         </div>
@@ -56,7 +56,8 @@ <h3>{% trans 'Import users' %}</h3>
             const form = document.getElementById("user-import-form");
             form.appendChild(input);
             form.requestSubmit();
-        };
+        }
+        document.getElementById("import-users-button").addEventListener("click", () => importUserModalShow("import"));
     </script>
 
 {% endblock %}

From 9d167f162f630b1c5c1ca91c79393781050d404a Mon Sep 17 00:00:00 2001
From: Richard Ebeling <dev@richardebeling.de>
Date: Wed, 29 Nov 2023 17:04:23 +0100
Subject: [PATCH 04/12] Rewrite non-modal onclick handlers

---
 .../templates/startpage_button.html           |  5 +++-
 .../templates/staff_email_preview_form.html   |  6 +++--
 .../staff_evaluation_person_management.html   | 10 ++++++--
 .../templates/staff_questionnaire_index.html  |  6 +++++
 .../staff_questionnaire_index_list.html       | 10 ++++----
 .../templates/staff_semester_import.html      |  9 ++++++-
 evap/staff/templates/staff_semester_view.html | 25 +++++++++++--------
 evap/staff/templates/staff_template_form.html |  8 +++++-
 evap/staff/templates/staff_user_import.html   |  5 +++-
 9 files changed, 60 insertions(+), 24 deletions(-)

diff --git a/evap/evaluation/templates/startpage_button.html b/evap/evaluation/templates/startpage_button.html
index fd6a8cbb56..9d4cce0d76 100644
--- a/evap/evaluation/templates/startpage_button.html
+++ b/evap/evaluation/templates/startpage_button.html
@@ -6,8 +6,11 @@
     <form id="startpage-form" class="d-flex" method="post" action="{% url 'evaluation:set_startpage' %}">
         {% csrf_token %}
         <input name="page" type="hidden" value="{{ page }}">
-        <button type="submit" class="btn {{ btnClass }} btn-light" onclick="setSpinnerIcon('span-set-startpage')" data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'Make this my startpage' %}">
+        <button type="submit" class="btn {{ btnClass }} btn-light" id="set-startpage-button" data-bs-toggle="tooltip" data-bs-placement="left" title="{% trans 'Make this my startpage' %}">
             <span id="span-set-startpage" class="fas fa-house"></span>
         </button>
     </form>
+    <script type="script/javascript" nonce="{{ CSP_NONCE }}">
+        document.getElementById("set-startpage-button").addEventListener("click", () => setSpinnerIcon("span-set-startpage"));
+    </script>
 {% endif %}
diff --git a/evap/staff/templates/staff_email_preview_form.html b/evap/staff/templates/staff_email_preview_form.html
index 09b4219048..47ed3edfea 100644
--- a/evap/staff/templates/staff_email_preview_form.html
+++ b/evap/staff/templates/staff_email_preview_form.html
@@ -2,8 +2,7 @@
     <div class="card-body">
          {% if heading %}<h4 class="card-title">{{ heading }}</h4>{% endif %}
         <div class="form-check mb-2">
-            <input class="form-check-input" id="send_email{{ id_suffix }}" type="checkbox" name="send_email{{ id_suffix }}"
-                checked onclick="document.getElementById('email_form').classList.toggle('d-none');" />
+            <input class="form-check-input" id="send_email{{ id_suffix }}" type="checkbox" name="send_email{{ id_suffix }}" checked/>
             <label class="form-check-label" for="send_email{{ id_suffix }}">{% trans 'Send email notifications' %}</label>
         </div>
         <div class="email-form" id="email_form{{ id_suffix}}">
@@ -34,3 +33,6 @@
         </div>
     </div>
 </div>
+<script type="text/javascript" nonce="{{ CSP_NONCE }}">
+    document.getElementById("send_email{{ id_suffix }}").addEventListener("click", () => document.getElementById("email_form").classList.toggle("d-none"));
+</script>
diff --git a/evap/staff/templates/staff_evaluation_person_management.html b/evap/staff/templates/staff_evaluation_person_management.html
index 94bb0568d6..f6c15f6bc9 100644
--- a/evap/staff/templates/staff_evaluation_person_management.html
+++ b/evap/staff/templates/staff_evaluation_person_management.html
@@ -17,7 +17,7 @@ <h4 class="card-title">{% trans 'Import participants' %}</h4>
                         <h6 class="card-subtitle mb-2 text-muted">{% trans 'From Excel file' %}</h6>
                         <p class="card-text">
                             {% trans 'Upload Excel file with participant data' %} (<a href="{% url 'staff:download_sample_file' 'sample_user.xlsx' %}">{% trans 'Download sample file' %}</a>,
-                            <button type="button" class="btn btn-link" onclick="copyHeaders(['Title', 'First name', 'Last name', 'Email'])">{% trans 'Copy headers to clipboard' %}</button>).
+                            <button type="button" class="btn btn-link copy-user-headers-button">{% trans 'Copy headers to clipboard' %}</button>).
                             {% trans 'This will create all containing users.' %}
                         </p>
                         {% include 'bootstrap_form.html' with form=participant_excel_form wide=True %}
@@ -66,7 +66,7 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'From Excel file' %}</h6>
                         <p class="card-text">
                             {% trans 'Upload Excel file with contributor data' %}
                             (<a href="{% url 'staff:download_sample_file' 'sample_user.xlsx' %}">{% trans 'Download sample file' %}</a>,
-                            <button type="button" class="btn btn-link" onclick="copyHeaders(['Title', 'First name', 'Last name', 'Email'])">{% trans 'Copy headers to clipboard' %}</button>).
+                            <button type="button" class="btn btn-link copy-user-headers-button">{% trans 'Copy headers to clipboard' %}</button>).
                             {% trans 'This will create all containing users.' %}
                         </p>
                         {% include 'bootstrap_form.html' with form=contributor_excel_form wide=True %}
@@ -277,4 +277,10 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
 
 {% block additional_javascript %}
     <script type="text/javascript" src="{% static 'js/copy-to-clipboard.js' %}" nonce="{{ CSP_NONCE }}"></script>
+
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
+        for(const button of document.querySelectorAll(".copy-user-headers-button")) {
+            button.addEventListener("click", () => copyHeaders(['Title', 'First name', 'Last name', 'Email']));
+        }
+    </script>
 {% endblock %}
diff --git a/evap/staff/templates/staff_questionnaire_index.html b/evap/staff/templates/staff_questionnaire_index.html
index b159afc9c6..7aa8f194ab 100644
--- a/evap/staff/templates/staff_questionnaire_index.html
+++ b/evap/staff/templates/staff_questionnaire_index.html
@@ -97,6 +97,9 @@
                 questionnaire.querySelectorAll(`button[data-visibility="${visibility}"]`).forEach(button => {button.classList.add("active");});
             }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         }
+        for (const button of document.querySelectorAll(".change-visibility-button")) {
+            button.addEventListener("click", () => changeVisibility(button));
+        }
 
         function changeLocked(element) {
             const questionnaire = element.closest(".questionnaire");
@@ -112,5 +115,8 @@
                 questionnaire.querySelectorAll(`button[data-is-locked="${is_locked}"]`).forEach(button => {button.classList.add("active");});
             }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         }
+        for (const button of document.querySelectorAll(".change-is-locked-button")) {
+            button.addEventListener("click", () => changeLocked(button));
+        }
     </script>
 {% endblock %}
diff --git a/evap/staff/templates/staff_questionnaire_index_list.html b/evap/staff/templates/staff_questionnaire_index_list.html
index d00de8a710..972fb7edb7 100644
--- a/evap/staff/templates/staff_questionnaire_index_list.html
+++ b/evap/staff/templates/staff_questionnaire_index_list.html
@@ -34,16 +34,16 @@
                             <td>
                                 {% if type != 'contributor' %}
                                     <div class="btn-switch btn-group icon-buttons">
-                                        <button data-is-locked="0" type="button" onclick="changeLocked(this);" class="btn btn-sm btn-light{% if questionnaire.is_locked == False %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Allow editors to change the selection of this questionnaire' %}"><span class="fas fa-fw fa-lock-open" aria-hidden="true"></span></button>
-                                        <button data-is-locked="1" type="button" onclick="changeLocked(this);" class="btn btn-sm btn-light{% if questionnaire.is_locked == True %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Prevent editors from changing the selection of this questionnaire' %}"><span class="fas fa-fw fa-lock" aria-hidden="true"></span></button>
+                                        <button data-is-locked="0" type="button" class="btn btn-sm change-is-locked-button btn-light{% if questionnaire.is_locked == False %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Allow editors to change the selection of this questionnaire' %}"><span class="fas fa-fw fa-lock-open" aria-hidden="true"></span></button>
+                                        <button data-is-locked="1" type="button" class="btn btn-sm change-is-locked-button btn-light{% if questionnaire.is_locked == True %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Prevent editors from changing the selection of this questionnaire' %}"><span class="fas fa-fw fa-lock" aria-hidden="true"></span></button>
                                     </div>
                                 {% endif %}
                             </td>
                             <td>
                                 <div class="btn-group icon-buttons">
-                                    <button data-visibility="0" type="button" onclick="changeVisibility(this);" class="btn btn-sm btn-light{% if questionnaire.visibility == 0 %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% blocktrans %}Hide in lists{% endblocktrans %}"><span class="fas fa-fw fa-eye-slash" aria-hidden="true"></span></button>
-                                    <button data-visibility="1" type="button" onclick="changeVisibility(this);" class="btn btn-sm btn-light{% if questionnaire.visibility == 1 %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Show only for managers' %}"><span class="fas fa-fw fa-briefcase" aria-hidden="true"></span></button>
-                                    <button data-visibility="2" type="button" onclick="changeVisibility(this);" class="btn btn-sm btn-light{% if questionnaire.visibility == 2 %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Show for managers and editors' %}"><span class="fas fa-fw fa-person-chalkboard" aria-hidden="true"></span></button>
+                                    <button data-visibility="0" type="button" class="btn btn-sm change-visibility-button btn-light{% if questionnaire.visibility == 0 %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% blocktrans %}Hide in lists{% endblocktrans %}"><span class="fas fa-fw fa-eye-slash" aria-hidden="true"></span></button>
+                                    <button data-visibility="1" type="button" class="btn btn-sm change-visibility-button btn-light{% if questionnaire.visibility == 1 %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Show only for managers' %}"><span class="fas fa-fw fa-briefcase" aria-hidden="true"></span></button>
+                                    <button data-visibility="2" type="button" class="btn btn-sm change-visibility-button btn-light{% if questionnaire.visibility == 2 %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Show for managers and editors' %}"><span class="fas fa-fw fa-person-chalkboard" aria-hidden="true"></span></button>
                                 </div>
                             </td>
                             <td class="text-end">
diff --git a/evap/staff/templates/staff_semester_import.html b/evap/staff/templates/staff_semester_import.html
index 4bf6ab49ce..db933147b3 100644
--- a/evap/staff/templates/staff_semester_import.html
+++ b/evap/staff/templates/staff_semester_import.html
@@ -19,7 +19,7 @@ <h3>{% trans 'Import semester data' %}</h3>
                 <p>
                     {% trans 'Upload Excel file' %}
                     (<a href="{% url 'staff:download_sample_file' 'sample.xlsx' %}">{% trans 'Download sample file' %}</a>,
-                    <button type="button" class="btn btn-link" onClick="copyHeaders(['Degree', 'Participant last name', 'Participant first name', 'Participant email address', 'Course kind', 'Course is graded', 'Course name (de)', 'Course name (en)', 'Responsible title', 'Responsible last name', 'Responsible first name', 'Responsible email address'])">
+                    <button type="button" class="btn btn-link" id="copy-headers-button">
                         {% trans 'Copy headers to clipboard' %}</button>).
                     {% trans 'This will create all containing participants, contributors and courses and connect them. It will also set the entered values as default for all evaluations.' %}
                 </p>
@@ -65,4 +65,11 @@ <h3>{% trans 'Import semester data' %}</h3>
 {% block additional_javascript %}
     {% include 'bootstrap_datetimepicker.html' %}
     <script type="text/javascript" src="{% static 'js/copy-to-clipboard.js' %}" nonce="{{ CSP_NONCE }}"></script>
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
+        document.getElementById("copy-headers-button").addEventListener("click", () => copyHeaders([
+            'Degree', 'Participant last name', 'Participant first name', 'Participant email address', 'Course kind',
+            'Course is graded', 'Course name (de)', 'Course name (en)', 'Responsible title', 'Responsible last name',
+            'Responsible first name', 'Responsible email address'])
+        );
+    </script>
 {% endblock %}
diff --git a/evap/staff/templates/staff_semester_view.html b/evap/staff/templates/staff_semester_view.html
index 325f66b955..decaf86f75 100644
--- a/evap/staff/templates/staff_semester_view.html
+++ b/evap/staff/templates/staff_semester_view.html
@@ -62,7 +62,7 @@ <h3>
 
     <div class="card collapsible mb-3">
         <div class="card-header d-flex">
-            <a class="collapse-toggle collapsed" data-bs-toggle="collapse" href="#overviewCard" aria-expanded="false" aria-controls="overviewCard" onclick="saveCollapseState()">{% trans 'Overview' %}</a>
+            <a id="collapseButton" class="collapse-toggle collapsed" data-bs-toggle="collapse" href="#overviewCard" aria-expanded="false" aria-controls="overviewCard">{% trans 'Overview' %}</a>
             {% if request.user.is_manager %}
                 <div class="ms-auto">
                     {% if not semester.participations_are_archived %}
@@ -123,12 +123,12 @@ <h3>
         <div class="card-header d-flex">
             <ul class="nav nav-pills" role="tablist">
                 <li class="nav-item">
-                    <a class="nav-link active" id="evaluationsTab" data-bs-toggle="pill" href="#evaluations" role="tab" onclick="saveSelectedTab('evaluations');">
+                    <a class="nav-link active" id="evaluationsTab" data-bs-toggle="pill" href="#evaluations" role="tab">
                         <span class="fas fa-clipboard-check"></span> {% trans 'Evaluations' %}
                     </a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" id="coursesTab" data-bs-toggle="pill" href="#courses" role="tab" onclick="saveSelectedTab('courses');">
+                    <a class="nav-link" id="coursesTab" data-bs-toggle="pill" href="#courses" role="tab">
                         <span class="fas fa-chalkboard-user"></span> {% trans 'Courses' %}
                     </a>
                 </li>
@@ -304,14 +304,8 @@ <h3>
 
                     {% if request.user.is_manager and not semester.participations_are_archived %}
                         <div class="my-2">
-                            <button type="button" class="btn btn-sm btn-secondary"
-                                onclick="document.querySelectorAll('#evaluation_operation_form input[type=checkbox][name=evaluation]').forEach(c => {c.checked = true;})">
-                                {% trans 'Select all' %}
-                            </button>
-                            <button type="button" class="btn btn-sm btn-secondary"
-                                onclick="document.querySelectorAll('#evaluation_operation_form input[type=checkbox][name=evaluation]').forEach(c => {c.checked = false;})">
-                                {% trans 'Select none' %}
-                            </button>
+                            <button type="button" class="btn btn-sm btn-secondary" id="selectAllButton">{% trans 'Select all' %}</button>
+                            <button type="button" class="btn btn-sm btn-secondary" id="selectNoneButton">{% trans 'Select none' %}</button>
                         </div>
                         <div>
                             <button name="target_state" value="{{ Evaluation.State.PREPARED }}" type="submit" class="btn btn-sm btn-light"
@@ -600,6 +594,7 @@ <h3>
             var state = localStorage['show_overview'] === 'true';
             localStorage['show_overview'] = (!state).toString();
         }
+        document.getElementById("collapseButton").addEventListener("click", saveCollapseState);
 
         if(localStorage['selected_tab'] === 'courses') {
             var coursesTab = document.getElementById('coursesTab');
@@ -610,10 +605,18 @@ <h3>
         function saveSelectedTab(tab) {
             localStorage['selected_tab'] = tab;
         }
+        document.getElementById("evaluationsTab").addEventListener("click", () => saveSelectedTab("evaluations"));
+        document.getElementById("coursesTab").addEventListener("click", () => saveSelectedTab("courses"));
 
         window.addEventListener("pageshow", () => {
             document.querySelectorAll('#evaluation_operation_form input[type=checkbox]').forEach(checkbox => {checkbox.checked = false;}); // prevent wrong autofills
         });
+
+        document.getElementById("selectAllButton").addEventListener("click", () =>
+            document.querySelectorAll('#evaluation_operation_form input[type=checkbox][name=evaluation]').forEach(c => {c.checked = true;}));
+
+        document.getElementById("selectNoneButton").addEventListener("click", () =>
+            document.querySelectorAll('#evaluation_operation_form input[type=checkbox][name=evaluation]').forEach(c => {c.checked = false;}));
     </script>
     <script type="module" nonce="{{ CSP_NONCE }}">
         import {EvaluationGrid, TableGrid} from "{% static 'js/datagrid.js' %}";
diff --git a/evap/staff/templates/staff_template_form.html b/evap/staff/templates/staff_template_form.html
index 3e67e51be2..d48999a2dc 100644
--- a/evap/staff/templates/staff_template_form.html
+++ b/evap/staff/templates/staff_template_form.html
@@ -21,7 +21,7 @@
                 <div class="col-3">
                     <p>{% trans 'The following variables are available for this email template:' %}</p>
                     {% for variable in available_variables %}
-                        <button type="button" class="btn btn-sm btn-link text-dark pe-1" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Copy to clipboard' %}" onClick="copyToClipboard('{{ variable }}')">
+                        <button type="button" class="btn btn-sm btn-link text-dark pe-1 copy-to-clipboard-btn" data-variable="{{ variable }}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Copy to clipboard' %}">
                             <span class="fas fa-clipboard"></span>
                         </button>
                         <code>{{ variable }}</code>
@@ -41,4 +41,10 @@
 
 {% block additional_javascript %}
     <script type="text/javascript" src="{% static 'js/copy-to-clipboard.js' %}" nonce="{{ CSP_NONCE }}"></script>
+
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
+        for(const button of document.querySelectorAll(".copy-to-clipboard-btn")) {
+            button.addEventListener("click", (event) => copyToClipboard(event.srcElement.dataset.variable));
+        }
+    </script>
 {% endblock %}
diff --git a/evap/staff/templates/staff_user_import.html b/evap/staff/templates/staff_user_import.html
index 3477403cd2..03313fa03c 100644
--- a/evap/staff/templates/staff_user_import.html
+++ b/evap/staff/templates/staff_user_import.html
@@ -21,7 +21,7 @@ <h3>{% trans 'Import users' %}</h3>
                 <p>
                     {% trans 'Upload Excel file' %}
                     (<a href="{% url 'staff:download_sample_file' 'sample_user.xlsx' %}">{% trans 'Download sample file' %}</a>,
-                    <button type="button" class="btn btn-link" onclick="copyHeaders(['Title', 'First name', 'Last name', 'Email'])">{% trans 'Copy headers to clipboard' %}</button>).
+                    <button type="button" class="btn btn-link" id="copy-user-headers-button">{% trans 'Copy headers to clipboard' %}</button>).
                     {% trans 'This will create all contained users.' %}
                 </p>
                 {% include 'bootstrap_form.html' with form=excel_form %}
@@ -64,4 +64,7 @@ <h3>{% trans 'Import users' %}</h3>
 
 {% block additional_javascript %}
     <script type="text/javascript" src="{% static 'js/copy-to-clipboard.js' %}" nonce="{{ CSP_NONCE }}"></script>
+    <script type="text/javascript" nonce="{{ CSP_NONCE }}">
+        document.getElementById("copy-user-headers-button").addEventListener("click", () => copyHeaders(['Title', 'First name', 'Last name', 'Email']));
+    </script>
 {% endblock %}

From 26865355de1829ac6fd2cde868d61769bd0110b5 Mon Sep 17 00:00:00 2001
From: Richard Ebeling <dev@richardebeling.de>
Date: Wed, 29 Nov 2023 17:50:40 +0100
Subject: [PATCH 05/12] Use utility classes instead of inline width styles

---
 .../templates/contributor_index.html          | 10 +++++-----
 .../templates/development_components.html     | 20 +++++++++----------
 .../templates/contribution_formset.html       |  8 ++++----
 evap/evaluation/templates/footer.html         | 10 +++++-----
 evap/evaluation/templates/progress_bar.html   |  2 +-
 evap/grades/templates/grades_course_view.html |  8 ++++----
 .../templates/grades_semester_view.html       | 12 +++++------
 evap/rewards/templates/rewards_index.html     | 16 +++++++--------
 ...ds_reward_point_redemption_event_list.html | 10 +++++-----
 .../templates/staff_course_type_index.html    |  8 ++++----
 evap/staff/templates/staff_degree_index.html  |  8 ++++----
 evap/staff/templates/staff_faq_index.html     |  6 +++---
 evap/staff/templates/staff_faq_section.html   |  6 +++---
 .../templates/staff_questionnaire_form.html   |  8 ++++----
 .../staff_questionnaire_index_list.html       | 10 +++++-----
 .../templates/staff_semester_export.html      |  6 +++---
 .../staff_semester_preparation_reminder.html  |  6 +++---
 evap/staff/templates/staff_semester_view.html | 10 +++++-----
 .../templates/staff_text_answer_warnings.html |  4 ++--
 evap/staff/templates/staff_user_list.html     |  8 ++++----
 evap/staff/templates/staff_user_merge.html    |  8 ++++----
 evap/static/scss/_utilities.scss              |  6 ++++++
 ...udent_index_semester_evaluations_list.html |  6 +++---
 ...ent_index_unfinished_evaluations_list.html |  6 +++---
 24 files changed, 104 insertions(+), 98 deletions(-)

diff --git a/evap/contributor/templates/contributor_index.html b/evap/contributor/templates/contributor_index.html
index 18b9f14680..a75115c2db 100644
--- a/evap/contributor/templates/contributor_index.html
+++ b/evap/contributor/templates/contributor_index.html
@@ -46,11 +46,11 @@
                 <table class="table table-seamless-links table-vertically-aligned">
                     <thead>
                     <tr>
-                        <th style="width: 35%">{% trans 'Name' %}</th>
-                        <th style="width: 15%">{% trans 'State' %}</th>
-                        <th style="width: 17%">{% trans 'Evaluation period' %}</th>
-                        <th style="width: 15%">{% trans 'Participants' %}</th>
-                        <th style="width: 18%"></th>
+                        <th class="width-percent-35">{% trans 'Name' %}</th>
+                        <th class="width-percent-15">{% trans 'State' %}</th>
+                        <th class="width-percent-17">{% trans 'Evaluation period' %}</th>
+                        <th class="width-percent-15">{% trans 'Participants' %}</th>
+                        <th class="width-percent-18"></th>
                     </tr>
                     </thead>
                     <tbody>
diff --git a/evap/development/templates/development_components.html b/evap/development/templates/development_components.html
index 303da8149f..a79f8f1ee0 100644
--- a/evap/development/templates/development_components.html
+++ b/evap/development/templates/development_components.html
@@ -398,11 +398,11 @@ <h6>Special rows</h6>
                                 {% spaceless %}
                                     <div class="distribution-bar-container">
                                         <div class="distribution-bar">
-                                            <div class="vote-bg-green" style="width: 52%;">&nbsp;</div>
-                                            <div class="vote-bg-lime" style="width: 26%;">&nbsp;</div>
-                                            <div class="vote-bg-yellow" style="width: 13%;">&nbsp;</div>
-                                            <div class="vote-bg-orange" style="width: 6%;">&nbsp;</div>
-                                            <div class="vote-bg-red" style="width: 3%;">&nbsp;</div>
+                                            <div class="vote-bg-green width-percent-52">&nbsp;</div>
+                                            <div class="vote-bg-lime width-percent-26">&nbsp;</div>
+                                            <div class="vote-bg-yellow width-percent-13">&nbsp;</div>
+                                            <div class="vote-bg-orange width-percent-6">&nbsp;</div>
+                                            <div class="vote-bg-red width-percent-3">&nbsp;</div>
                                         </div>
                                     </div>
                                 {% endspaceless %}
@@ -449,11 +449,11 @@ <h6>Special rows</h6>
                                 {% spaceless %}
                                     <div class="distribution-bar-container">
                                         <div class="distribution-bar">
-                                            <div class="vote-bg-green" style="width: 52%;">&nbsp;</div>
-                                            <div class="vote-bg-lime" style="width: 26%;">&nbsp;</div>
-                                            <div class="vote-bg-yellow" style="width: 13%;">&nbsp;</div>
-                                            <div class="vote-bg-orange" style="width: 6%;">&nbsp;</div>
-                                            <div class="vote-bg-red" style="width: 3%;">&nbsp;</div>
+                                            <div class="vote-bg-green width-percent-52">&nbsp;</div>
+                                            <div class="vote-bg-lime width-percent-26">&nbsp;</div>
+                                            <div class="vote-bg-yellow width-percent-13">&nbsp;</div>
+                                            <div class="vote-bg-orange width-percent-6">&nbsp;</div>
+                                            <div class="vote-bg-red width-percent-3">&nbsp;</div>
                                         </div>
                                     </div>
                                 {% endspaceless %}
diff --git a/evap/evaluation/templates/contribution_formset.html b/evap/evaluation/templates/contribution_formset.html
index d1ca88545a..c3d6001442 100644
--- a/evap/evaluation/templates/contribution_formset.html
+++ b/evap/evaluation/templates/contribution_formset.html
@@ -18,10 +18,10 @@ <h5 class="card-title me-auto">{% trans 'Contributors' %}</h5>
         <thead>
             <tr>
                 <th></th>
-                <th style="width: 30%">{% trans 'Contributor' %}</th>
-                <th style="width: 30%">{% trans 'Questionnaires' %}</th>
-                <th style="width: 30%">{% trans 'Options' %}</th>
-                <th style="width: 10%"></th>
+                <th class="width-percent-30">{% trans 'Contributor' %}</th>
+                <th class="width-percent-30">{% trans 'Questionnaires' %}</th>
+                <th class="width-percent-30">{% trans 'Options' %}</th>
+                <th class="width-percent-10"></th>
             </tr>
         </thead>
         <tbody>
diff --git a/evap/evaluation/templates/footer.html b/evap/evaluation/templates/footer.html
index 2c747d68e6..8fc830b07e 100644
--- a/evap/evaluation/templates/footer.html
+++ b/evap/evaluation/templates/footer.html
@@ -1,10 +1,10 @@
 <div class="footer d-print-none">
     <div class="color-bar">
-        <div class="vote-bg-green" style="width: 52%;"></div>
-        <div class="vote-bg-lime" style="width: 26%;"></div>
-        <div class="vote-bg-yellow" style="width: 13%;"></div>
-        <div class="vote-bg-orange" style="width: 6%;"></div>
-        <div class="vote-bg-red" style="width: 3%;"></div>
+        <div class="vote-bg-green width-percent-52"></div>
+        <div class="vote-bg-lime width-percent-26"></div>
+        <div class="vote-bg-yellow width-percent-13"></div>
+        <div class="vote-bg-orange width-percent-6"></div>
+        <div class="vote-bg-red width-percent-3"></div>
     </div>
     <nav class="navbar navbar-expand">
         <div class="collapse navbar-collapse justify-content-between">
diff --git a/evap/evaluation/templates/progress_bar.html b/evap/evaluation/templates/progress_bar.html
index 814a5e2dd7..4f3196b945 100644
--- a/evap/evaluation/templates/progress_bar.html
+++ b/evap/evaluation/templates/progress_bar.html
@@ -3,7 +3,7 @@
 <span class="progress-container{% if warning %} progress-container-warning{% endif %} d-flex">
     {% spaceless %}
         <span class="progress">
-            <span class="progress-bar" style="width: {% widthratio done total 100 %}%;"></span>
+            <span class="progress-bar width-percent-{% widthratio done total 100 %}"></span>
             <span class="progress-bartext">
                 {% if icon %}
                     <small><span class="fas fa-{{ icon }}"></span></small>&nbsp;
diff --git a/evap/grades/templates/grades_course_view.html b/evap/grades/templates/grades_course_view.html
index 3e401974bd..3f6de779ac 100644
--- a/evap/grades/templates/grades_course_view.html
+++ b/evap/grades/templates/grades_course_view.html
@@ -14,10 +14,10 @@ <h3 class="mb-3">{{ course.name }} ({{ semester.name }})</h3>
                 <table class="table table-striped table-vertically-aligned">
                     <thead>
                         <tr>
-                            <th style="width: 40%">{% trans 'Description' %}</th>
-                            <th style="width: 20%">{% trans 'Type' %}</th>
-                            <th style="width: 25%">{% trans 'Last edited' %}</th>
-                            <th style="width: 15%">{% trans 'Actions' %}</th>
+                            <th class="width-percent-40">{% trans 'Description' %}</th>
+                            <th class="width-percent-20">{% trans 'Type' %}</th>
+                            <th class="width-percent-25">{% trans 'Last edited' %}</th>
+                            <th class="width-percent-15">{% trans 'Actions' %}</th>
                         </tr>
                     </thead>
                     <tbody>
diff --git a/evap/grades/templates/grades_semester_view.html b/evap/grades/templates/grades_semester_view.html
index 6aeebf6b78..cdf03d663d 100644
--- a/evap/grades/templates/grades_semester_view.html
+++ b/evap/grades/templates/grades_semester_view.html
@@ -35,12 +35,12 @@ <h3 class="col-8 mb-0">
                 <table class="table table-striped grade-course-table table-vertically-aligned">
                     <thead>
                         <tr>
-                            <th style="width: 35%" class="col-order" data-col="name">{% trans 'Name' %}</th>
-                            <th style="width: 20%" class="col-order" data-col="responsible">{% trans 'Responsible' %}</th>
-                            <th style="width: 10%" class="col-order" data-col="complete">{% trans 'Evaluation completed' %}</th>
-                            <th style="width: 10%" class="col-order" data-col="midterm-grades">{% trans 'Midterm grade documents' %}</th>
-                            <th style="width: 10%" class="col-order" data-col="final-grades">{% trans 'Final grade documents' %}</th>
-                            <th style="width: 15%" class="text-end">{% trans 'Actions' %}</th>
+                            <th class="width-percent-35 col-order" data-col="name">{% trans 'Name' %}</th>
+                            <th class="width-percent-20 col-order" data-col="responsible">{% trans 'Responsible' %}</th>
+                            <th class="width-percent-10 col-order" data-col="complete">{% trans 'Evaluation completed' %}</th>
+                            <th class="width-percent-10 col-order" data-col="midterm-grades">{% trans 'Midterm grade documents' %}</th>
+                            <th class="width-percent-10 col-order" data-col="final-grades">{% trans 'Final grade documents' %}</th>
+                            <th class="width-percent-15 text-end">{% trans 'Actions' %}</th>
                         </tr>
                     </thead>
                     <tbody>
diff --git a/evap/rewards/templates/rewards_index.html b/evap/rewards/templates/rewards_index.html
index 4ad138271b..f2ea055aec 100644
--- a/evap/rewards/templates/rewards_index.html
+++ b/evap/rewards/templates/rewards_index.html
@@ -26,10 +26,10 @@
                         <table class="table table-striped table-vertically-aligned mb-3">
                             <thead>
                                 <tr>
-                                    <th style="width: 20%">{% trans 'Date' %}</th>
-                                    <th style="width: 40%">{% trans 'Event' %}</th>
-                                    <th style="width: 20%">{% trans 'Available until' %}</th>
-                                    <th style="width: 20%">{% trans 'Redeem points' %}</th>
+                                    <th class="width-percent-20">{% trans 'Date' %}</th>
+                                    <th class="width-percent-40">{% trans 'Event' %}</th>
+                                    <th class="width-percent-20">{% trans 'Available until' %}</th>
+                                    <th class="width-percent-20">{% trans 'Redeem points' %}</th>
                                 </tr>
                             </thead>
                             <tbody>
@@ -67,10 +67,10 @@
                 <table class="table table-striped">
                     <thead>
                         <tr>
-                            <th style="width: 20%">{% trans 'Date' %}</th>
-                            <th style="width: 40%">{% trans 'Action' %}</th>
-                            <th style="width: 20%" class="text-end">{% trans 'Granted points' %}</th>
-                            <th style="width: 20%" class="text-end">{% trans 'Redeemed points' %}</th>
+                            <th class="width-percent-20">{% trans 'Date' %}</th>
+                            <th class="width-percent-40">{% trans 'Action' %}</th>
+                            <th class="width-percent-20 text-end">{% trans 'Granted points' %}</th>
+                            <th class="width-percent-20 text-end">{% trans 'Redeemed points' %}</th>
                         </tr>
                     </thead>
                     <tbody>
diff --git a/evap/rewards/templates/rewards_reward_point_redemption_event_list.html b/evap/rewards/templates/rewards_reward_point_redemption_event_list.html
index e4f6738e2b..89e53a6aa4 100644
--- a/evap/rewards/templates/rewards_reward_point_redemption_event_list.html
+++ b/evap/rewards/templates/rewards_reward_point_redemption_event_list.html
@@ -6,11 +6,11 @@
         <table class="table table-striped">
             <thead>
                 <tr>
-                    <th style="width: 20%">{% trans 'Event date' %}</th>
-                    <th style="width: 20%">{% trans 'Redemption end date' %}</th>
-                    <th style="width: 30%">{% trans 'Event name' %}</th>
-                    <th style="width: 15%">{% trans 'Redemptions' %}</th>
-                    <th class="text-end" style="width: 15%">{% trans 'Actions' %}</th>
+                    <th class="width-percent-20">{% trans 'Event date' %}</th>
+                    <th class="width-percent-20">{% trans 'Redemption end date' %}</th>
+                    <th class="width-percent-30">{% trans 'Event name' %}</th>
+                    <th class="width-percent-15">{% trans 'Redemptions' %}</th>
+                    <th class="width-percent-15 text-end">{% trans 'Actions' %}</th>
                 </tr>
             </thead>
             <tbody>
diff --git a/evap/staff/templates/staff_course_type_index.html b/evap/staff/templates/staff_course_type_index.html
index 6dea355afb..9c5fb5485f 100644
--- a/evap/staff/templates/staff_course_type_index.html
+++ b/evap/staff/templates/staff_course_type_index.html
@@ -24,10 +24,10 @@
                     <thead>
                         <tr>
                             <th class="movable"></th>
-                            <th style="width: 30%">{% trans 'Name (German)' %}</th>
-                            <th style="width: 30%">{% trans 'Name (English)' %}</th>
-                            <th style="width: 30%">{% trans 'Import names' %}</th>
-                            <th class="text-end" style="width: 10%">{% trans 'Actions' %}</th>
+                            <th class="width-percent-30">{% trans 'Name (German)' %}</th>
+                            <th class="width-percent-30">{% trans 'Name (English)' %}</th>
+                            <th class="width-percent-30">{% trans 'Import names' %}</th>
+                            <th class="width-percent-10 text-end">{% trans 'Actions' %}</th>
                         </tr>
                     </thead>
                     <tbody>
diff --git a/evap/staff/templates/staff_degree_index.html b/evap/staff/templates/staff_degree_index.html
index b266c3793b..328a4da1db 100644
--- a/evap/staff/templates/staff_degree_index.html
+++ b/evap/staff/templates/staff_degree_index.html
@@ -20,10 +20,10 @@
                     <thead>
                         <tr>
                             <th class="movable"></th>
-                            <th style="width: 25%">{% trans 'Name (German)' %}</th>
-                            <th style="width: 25%">{% trans 'Name (English)' %}</th>
-                            <th style="width: 40%">{% trans 'Import names' %}</th>
-                            <th class="text-end" style="width: 10%">{% trans 'Actions' %}</th>
+                            <th class="width-percent-25">{% trans 'Name (German)' %}</th>
+                            <th class="width-percent-25">{% trans 'Name (English)' %}</th>
+                            <th class="width-percent-40">{% trans 'Import names' %}</th>
+                            <th class="width-percent-10 text-end">{% trans 'Actions' %}</th>
                         </tr>
                     </thead>
                     <tbody>
diff --git a/evap/staff/templates/staff_faq_index.html b/evap/staff/templates/staff_faq_index.html
index 1c7f77cc48..e6c1fe089c 100644
--- a/evap/staff/templates/staff_faq_index.html
+++ b/evap/staff/templates/staff_faq_index.html
@@ -20,9 +20,9 @@
                     <thead>
                         <tr>
                             <th class="movable"></th>
-                            <th style="width: 45%">{% trans 'Section title (German)' %}</th>
-                            <th style="width: 45%">{% trans 'Section title (English)' %}</th>
-                            <th class="text-end" style="width: 10%">{% trans 'Actions' %}</th>
+                            <th class="width-percent-45">{% trans 'Section title (German)' %}</th>
+                            <th class="width-percent-45">{% trans 'Section title (English)' %}</th>
+                            <th class="width-percent-10 text-end">{% trans 'Actions' %}</th>
                         </tr>
                     </thead>
                     <tbody>
diff --git a/evap/staff/templates/staff_faq_section.html b/evap/staff/templates/staff_faq_section.html
index cdf7933558..2deaae1c1c 100644
--- a/evap/staff/templates/staff_faq_section.html
+++ b/evap/staff/templates/staff_faq_section.html
@@ -21,9 +21,9 @@
                     <thead>
                         <tr>
                             <th class="movable"></th>
-                            <th style="width: 45%">{% trans 'Question/Answer (German)' %}</th>
-                            <th style="width: 45%">{% trans 'Question/Answer (English)' %}</th>
-                            <th class="text-end" style="width: 10%">{% trans 'Actions' %}</th>
+                            <th class="width-percent-45">{% trans 'Question/Answer (German)' %}</th>
+                            <th class="width-percent-45">{% trans 'Question/Answer (English)' %}</th>
+                            <th class="width-percent-10 text-end">{% trans 'Actions' %}</th>
                         </tr>
                     </thead>
                     <tbody>
diff --git a/evap/staff/templates/staff_questionnaire_form.html b/evap/staff/templates/staff_questionnaire_form.html
index 6766d197a9..0ffa8825be 100644
--- a/evap/staff/templates/staff_questionnaire_form.html
+++ b/evap/staff/templates/staff_questionnaire_form.html
@@ -30,10 +30,10 @@ <h5 class="card-title">{% trans 'Questions' %}</h5>
                         <thead>
                             <tr>
                                 <th></th>
-                                <th style="width: 37%">{% trans 'Question text (German)' %}</th>
-                                <th style="width: 37%">{% trans 'Question text (English)' %}</th>
-                                <th style="width: 20%">{% trans 'Question type' %}</th>
-                                <th style="width: 6%"></th>
+                                <th class="width-percent-37">{% trans 'Question text (German)' %}</th>
+                                <th class="width-percent-37">{% trans 'Question text (English)' %}</th>
+                                <th class="width-percent-20">{% trans 'Question type' %}</th>
+                                <th class="width-percent-6"></th>
                             </tr>
                         </thead>
                         <tbody>
diff --git a/evap/staff/templates/staff_questionnaire_index_list.html b/evap/staff/templates/staff_questionnaire_index_list.html
index 972fb7edb7..1cd884eacc 100644
--- a/evap/staff/templates/staff_questionnaire_index_list.html
+++ b/evap/staff/templates/staff_questionnaire_index_list.html
@@ -10,15 +10,15 @@
                 <table class="table table-vertically-aligned table-striped questionnaire-table">
                     <thead>
                         <tr class="table-header">
-                            <th class="movable" style="width: 3%"></th>
-                            <th style="width: 52%">{% trans 'Questionnaire' %}</th>
-                            <th style="width: 10%">
+                            <th class="width-percent-3 movable"></th>
+                            <th class="width-percent-52">{% trans 'Questionnaire' %}</th>
+                            <th class="width-percent-10">
                                 {% if type != 'contributor' %}
                                     {% trans 'Locked' %}
                                 {% endif %}
                             </th>
-                            <th style="width: 15%">{% trans 'Visibility' %}</th>
-                            <th class="text-end" style="width: 20%">{% trans 'Actions' %}</th>
+                            <th class="width-percent-15">{% trans 'Visibility' %}</th>
+                            <th class="width-percent-20 text-end">{% trans 'Actions' %}</th>
                         </tr>
                     </thead>
                     <tbody>
diff --git a/evap/staff/templates/staff_semester_export.html b/evap/staff/templates/staff_semester_export.html
index 917c71d08b..9152f947ab 100644
--- a/evap/staff/templates/staff_semester_export.html
+++ b/evap/staff/templates/staff_semester_export.html
@@ -22,9 +22,9 @@ <h3>{% trans 'Export' %} {{ semester.name }}</h3>
                 <table id="exportsheets-table" class="table">
                     <thead>
                         <tr>
-                            <th style="width: 25%">{% trans 'Degrees' %}</th>
-                            <th style="width: 65%">{% trans 'Course types' %}</th>
-                            <th style="width: 10%"></th>
+                            <th class="width-percent-25">{% trans 'Degrees' %}</th>
+                            <th class="width-percent-65">{% trans 'Course types' %}</th>
+                            <th class="width-percent-10"></th>
                         </tr>
                     </thead>
                     <tbody>
diff --git a/evap/staff/templates/staff_semester_preparation_reminder.html b/evap/staff/templates/staff_semester_preparation_reminder.html
index c9b5f0be9f..00fa2777c4 100644
--- a/evap/staff/templates/staff_semester_preparation_reminder.html
+++ b/evap/staff/templates/staff_semester_preparation_reminder.html
@@ -37,9 +37,9 @@
                 <table class="table table-striped">
                     <thead>
                         <tr>
-                            <th style="width: 57%">{% trans 'Name' %}</th>
-                            <th style="width: 18%">{% trans 'Start of evaluation' %}</th>
-                            <th style="width: 25%">{% trans 'Last modified by' %}</th>
+                            <th class="width-percent-57">{% trans 'Name' %}</th>
+                            <th class="width-percent-18">{% trans 'Start of evaluation' %}</th>
+                            <th class="width-percent-25">{% trans 'Last modified by' %}</th>
                        </tr>
                     </thead>
                     <tbody>
diff --git a/evap/staff/templates/staff_semester_view.html b/evap/staff/templates/staff_semester_view.html
index decaf86f75..52507955e9 100644
--- a/evap/staff/templates/staff_semester_view.html
+++ b/evap/staff/templates/staff_semester_view.html
@@ -84,11 +84,11 @@ <h3>
                 <table class="table">
                     <thead>
                         <tr>
-                            <th style="width: 19%">{% trans 'Degree' %}</th>
-                            <th style="width: 30%">{% trans 'Evaluation period' %}</th>
-                            <th style="width: 17%">{% trans 'Finished evaluations' %}</th>
-                            <th style="width: 17%">{% trans 'Reviewed text answers' %}</th>
-                            <th style="width: 17%">{% trans 'Participation' %}</th>
+                            <th class="width-percent-19">{% trans 'Degree' %}</th>
+                            <th class="width-percent-30">{% trans 'Evaluation period' %}</th>
+                            <th class="width-percent-17">{% trans 'Finished evaluations' %}</th>
+                            <th class="width-percent-17">{% trans 'Reviewed text answers' %}</th>
+                            <th class="width-percent-17">{% trans 'Participation' %}</th>
                         </tr>
                     </thead>
                     <tbody>
diff --git a/evap/staff/templates/staff_text_answer_warnings.html b/evap/staff/templates/staff_text_answer_warnings.html
index d078b15787..068dfdb64b 100644
--- a/evap/staff/templates/staff_text_answer_warnings.html
+++ b/evap/staff/templates/staff_text_answer_warnings.html
@@ -21,8 +21,8 @@
                     <colgroup>
                         <col />
                         <col />
-                        <col style="width: 30%" />
-                        <col style="width: 30%" />
+                        <col class="width-percent-30" />
+                        <col class="width-percent-30" />
                         <col />
                     </colgroup>
                     <thead>
diff --git a/evap/staff/templates/staff_user_list.html b/evap/staff/templates/staff_user_list.html
index ad0e87fb01..b2fbb90fa0 100644
--- a/evap/staff/templates/staff_user_list.html
+++ b/evap/staff/templates/staff_user_list.html
@@ -41,10 +41,10 @@
             <table class="table table-vertically-aligned table-seamless-links user-table">
                 <thead>
                     <tr>
-                        <th style="width: 25%">{% trans 'Name' %}</th>
-                        <th style="width: 35%">{% trans 'Email' %}</th>
-                        <th style="width: 30%">{% trans 'Information' %}</th>
-                        <th style="width: 10%"></th>
+                        <th class="width-percent-25">{% trans 'Name' %}</th>
+                        <th class="width-percent-35">{% trans 'Email' %}</th>
+                        <th class="width-percent-30">{% trans 'Information' %}</th>
+                        <th class="width-percent-10"></th>
                     </tr>
                 </thead>
                 <tbody>
diff --git a/evap/staff/templates/staff_user_merge.html b/evap/staff/templates/staff_user_merge.html
index f266c7f35c..fcbc7391ca 100644
--- a/evap/staff/templates/staff_user_merge.html
+++ b/evap/staff/templates/staff_user_merge.html
@@ -21,10 +21,10 @@ <h3>{% trans 'Merge users' %}</h3>
             <table class="table mb-3">
                 <thead>
                     <tr>
-                        <th style="width: 25%"></th>
-                        <th style="width: 25%">{% trans 'Main user' %}</th>
-                        <th style="width: 25%">{% trans 'Other user' %}</th>
-                        <th style="width: 25%">{% trans 'Merged user' %}</th>
+                        <th class="width-percent-25"></th>
+                        <th class="width-percent-25">{% trans 'Main user' %}</th>
+                        <th class="width-percent-25">{% trans 'Other user' %}</th>
+                        <th class="width-percent-25">{% trans 'Merged user' %}</th>
                     </tr>
                 </thead>
                 <tbody>
diff --git a/evap/static/scss/_utilities.scss b/evap/static/scss/_utilities.scss
index dd91f2ce3e..bca6d0e458 100644
--- a/evap/static/scss/_utilities.scss
+++ b/evap/static/scss/_utilities.scss
@@ -71,3 +71,9 @@ a.no-underline:hover {
 .z-over-fixed {
     z-index: $zindex-fixed + 1;
 }
+
+@for $i from 1 through 100 {
+    .width-percent-#{$i} {
+        width: $i * 1%;
+    }
+}
diff --git a/evap/student/templates/student_index_semester_evaluations_list.html b/evap/student/templates/student_index_semester_evaluations_list.html
index 5e8147972c..66ebd5bd39 100644
--- a/evap/student/templates/student_index_semester_evaluations_list.html
+++ b/evap/student/templates/student_index_semester_evaluations_list.html
@@ -17,9 +17,9 @@
                 <table class="table table-seamless-links table-vertically-aligned table-headerless">
                     <colgroup>
                         <col />
-                        <col style="width: 60%" />
-                        <col style="width: 20%" />
-                        <col style="width: 20%" />
+                        <col class="width-percent-60" />
+                        <col class="width-percent-20" />
+                        <col class="width-percent-20" />
                     </colgroup>
                     <tbody>
                         {% regroup semester.evaluations by course as course_evaluations %}
diff --git a/evap/student/templates/student_index_unfinished_evaluations_list.html b/evap/student/templates/student_index_unfinished_evaluations_list.html
index 55b40fe996..f72f63f4c0 100644
--- a/evap/student/templates/student_index_unfinished_evaluations_list.html
+++ b/evap/student/templates/student_index_unfinished_evaluations_list.html
@@ -6,7 +6,7 @@
             <tr{% if evaluation.state == evaluation.State.IN_EVALUATION and not evaluation.voted_for and evaluation.is_in_evaluation_period %}
                     class="hover-row hover-row-info" data-url="{% url 'student:vote' evaluation.id %}"
                 {% else %} class="deactivate"{% endif %}>
-                <td style="width: 62%">
+                <td class="width-percent-62">
                     <div>
                         <span class="evaluation-name fw-bold {% if evaluation.state == evaluation.State.IN_EVALUATION and not evaluation.voted_for %} text-primary{% endif %}">
                             {{ evaluation.full_name }}
@@ -20,10 +20,10 @@
                     </span>
                     <i class="small">{{ evaluation.course.responsibles_names }}</i>
                 </td>
-                <td style="width: 18%">
+                <td class="width-percent-18">
                     {% include 'student_index_evaluation_period.html' %}
                 </td>
-                <td style="width: 20%" class="text-end">
+                <td class="width-percent-20 text-end">
                     {% if evaluation.state == evaluation.State.IN_EVALUATION and not evaluation.voted_for and evaluation.is_in_evaluation_period  %}
                         <a class="btn btn-sm btn-primary btn-row-hover" href="{% url 'student:vote' evaluation.id %}">{% trans 'Evaluate' %}</a>
                     {% endif %}

From 179317470cd62f49e5d369387e7240bb2585d908 Mon Sep 17 00:00:00 2001
From: Richard Ebeling <dev@richardebeling.de>
Date: Wed, 29 Nov 2023 17:57:14 +0100
Subject: [PATCH 06/12] Use d-none over inline display: none

---
 evap/contributor/templates/contributor_evaluation_form.html | 2 +-
 evap/student/templates/student_vote.html                    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/evap/contributor/templates/contributor_evaluation_form.html b/evap/contributor/templates/contributor_evaluation_form.html
index a1e3cda450..96fba66fe6 100644
--- a/evap/contributor/templates/contributor_evaluation_form.html
+++ b/evap/contributor/templates/contributor_evaluation_form.html
@@ -91,7 +91,7 @@ <h5 class="card-title me-auto">{% trans 'Evaluation data' %}</h5>
                     <button name="operation" value="preview" type="submit" class="btn btn-light">{% trans 'Preview' %}</button>
                     <button name="operation" value="save" type="submit" class="btn btn-primary">{% trans 'Save' %}</button>
                     {# webtest does not allow submission with value "approve" if no such button exists #}
-                    <button style="display: none" name="operation" value="approve" type="submit"></button>
+                    <button class="d-none" name="operation" value="approve" type="submit"></button>
                     <button type="button" id="approve-button" class="btn btn-success">{% trans 'Save and approve' %}</button>
                 {% endif %}
                 <a href="{% url 'contributor:index' %}" class="btn btn-light">{% if edit %}{% trans 'Cancel' %}{% else %}{% trans 'Back' %}{% endif %}</a>
diff --git a/evap/student/templates/student_vote.html b/evap/student/templates/student_vote.html
index 3af3476d28..64855363cd 100644
--- a/evap/student/templates/student_vote.html
+++ b/evap/student/templates/student_vote.html
@@ -158,7 +158,7 @@ <h3 class="mb-3">{{ evaluation.full_name }} ({{ evaluation.course.semester.name
                             <span class="fas fa-circle-info" data-bs-toggle="tooltip" title="{% trans 'The evaluation can be continued later using the same device and the same browser. But you have to submit it to send it to the server and make it count. After submitting, you can not edit the evaluation anymore.' %}"></span>
                         </div>
                         <button id="vote-submit-btn" type="submit" class="btn btn-success tab-selectable">{% trans 'Submit questionnaire' %}</button>
-                        <p id="submit-error-warning" style="display: none" class="text-danger">
+                        <p id="submit-error-warning" class="text-danger d-none">
                             <span class="fas fa-triangle-exclamation"></span>
                             {% blocktrans %}The server can't be reached. Your answers have been stored in your browser and it's safe to leave the page. Please try again later to submit the questionnaire.{% endblocktrans %}
                         </p>
@@ -283,7 +283,7 @@ <h3 class="mb-3">{{ evaluation.full_name }} ({{ evaluation.course.semester.name
                     }
                 }).catch(error => {
                     // show a warning if the post isn't successful
-                    document.getElementById('submit-error-warning').style.display = 'block';
+                    document.getElementById('submit-error-warning').classList.remove("d-none");
                     submitButton.innerText = originalText;
                     submitButton.disabled = false;
                 });

From 28f83c99e13c4c538ba9c53353ee85cec0b9f77c Mon Sep 17 00:00:00 2001
From: Richard Ebeling <dev@richardebeling.de>
Date: Mon, 18 Dec 2023 19:31:19 +0100
Subject: [PATCH 07/12] Fix JS error on login page

---
 evap/evaluation/templates/navbar.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/evap/evaluation/templates/navbar.html b/evap/evaluation/templates/navbar.html
index 6c27448f17..7d6b21ac3c 100644
--- a/evap/evaluation/templates/navbar.html
+++ b/evap/evaluation/templates/navbar.html
@@ -138,6 +138,8 @@
         document.getElementById("button-set-language-{{ language_code }}").addEventListener("click", () => { setSpinnerIcon('span-set-language-{{ language_code }}'); });
     {% endfor %}
 
-    document.getElementById("button-exit-staff-mode").addEventListener("click", () => { setSpinnerIcon('span-exit-staff-mode'); });
-    document.getElementById("button-enter-staff-mode").addEventListener("click", () => { setSpinnerIcon('span-enter-staff-mode'); });
+    {% if user.has_staff_permission %}
+        document.getElementById("button-exit-staff-mode").addEventListener("click", () => { setSpinnerIcon('span-exit-staff-mode'); });
+        document.getElementById("button-enter-staff-mode").addEventListener("click", () => { setSpinnerIcon('span-enter-staff-mode'); });
+    {% endif %}
 </script>

From 3368115d8fed82d27fc90a1c50397671388b3a07 Mon Sep 17 00:00:00 2001
From: Richard Ebeling <dev@richardebeling.de>
Date: Mon, 8 Jan 2024 21:14:45 +0100
Subject: [PATCH 08/12] Allow inline images and inline style for now

---
 evap/settings.py | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/evap/settings.py b/evap/settings.py
index bf82a3bb00..6b390a4663 100644
--- a/evap/settings.py
+++ b/evap/settings.py
@@ -405,9 +405,10 @@ def CHARACTER_ALLOWED_IN_NAME(character):  # pylint: disable=invalid-name
 
 
 ### Content Security Policy
-# settings from https://csp.withgoogle.com/docs/strict-csp.html#example
 CSP_OBJECT_SRC = ("'none'", )
-CSP_SCRIPT_SRC = ("'unsafe-inline'", "'strict-dynamic'", "https:", "http:")
+CSP_SCRIPT_SRC = ("'strict-dynamic'", )  # scripts require a correct nonce or to be loaded by a trusted script
+CSP_STYLE_SRC = ("'unsafe-inline'", "'self'") # inline-styles are allowed
+CSP_IMG_SRC = ("'self'", "data:") # images from same host or as data: url are allowed
 CSP_BASE_URI = ("'none'", )
 CSP_INCLUDE_NONCE_IN=['script-src']
 

From 216edd7fa3d292d47dbf5fd5cd1560e64c458827 Mon Sep 17 00:00:00 2001
From: Richard Ebeling <dev@richardebeling.de>
Date: Mon, 22 Jan 2024 18:11:40 +0100
Subject: [PATCH 09/12] fixup! Add mozilla-django-csp. Add CSP-nonces to
 everything. Inline-code is still a problem

---
 evap/evaluation/templates/infobox.html                | 4 ++--
 evap/evaluation/templates/navbar.html                 | 2 +-
 evap/evaluation/templatetags/infotext_templatetags.py | 4 +---
 evap/evaluation/templatetags/navbar_templatetags.py   | 2 +-
 4 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/evap/evaluation/templates/infobox.html b/evap/evaluation/templates/infobox.html
index 3ae9b3830a..7ac16e45ff 100644
--- a/evap/evaluation/templates/infobox.html
+++ b/evap/evaluation/templates/infobox.html
@@ -10,7 +10,7 @@
         </div>
         <div class="callout-content small">
             {# Inline script to interrupt loading of the page, so the content does not jump up. #}
-            <script nonce="{{ request.csp_nonce }}">
+            <script nonce="{{ CSP_NONCE }}">
                 if (localStorage["infobox-{{ infotext.page }}"] === "hide")
                     document.querySelector("#infobox-{{ infotext.page }}").classList.add("closed");
             </script>
@@ -18,7 +18,7 @@
         </div>
     </div>
 
-    <script type="module" nonce="{{ request.csp_nonce }}">
+    <script type="module" nonce="{{ CSP_NONCE }}">
         import { InfoboxLogic } from "{% static 'js/infobox.js' %}";
 
         new InfoboxLogic("{{ infotext.page }}").attach();
diff --git a/evap/evaluation/templates/navbar.html b/evap/evaluation/templates/navbar.html
index 7d6b21ac3c..836b2d523a 100644
--- a/evap/evaluation/templates/navbar.html
+++ b/evap/evaluation/templates/navbar.html
@@ -133,7 +133,7 @@
     </div>
 </nav>
 
-<script type="text/javascript" nonce="{{ request.csp_nonce }}">
+<script type="text/javascript" nonce="{{ CSP_NONCE }}">
     {% for language_code, language_name in languages %}
         document.getElementById("button-set-language-{{ language_code }}").addEventListener("click", () => { setSpinnerIcon('span-set-language-{{ language_code }}'); });
     {% endfor %}
diff --git a/evap/evaluation/templatetags/infotext_templatetags.py b/evap/evaluation/templatetags/infotext_templatetags.py
index 55799302f6..08378c2b9e 100644
--- a/evap/evaluation/templatetags/infotext_templatetags.py
+++ b/evap/evaluation/templatetags/infotext_templatetags.py
@@ -13,9 +13,7 @@ def show_infotext(context, page_name):
         "student_index": Infotext.Page.STUDENT_INDEX,
     }
 
-    print(context["request"].csp_nonce)
-
     return {
-        "request": context["request"],
+        "CSP_NONCE": context["request"].csp_nonce,
         "infotext": Infotext.objects.get(page=to_page_id[page_name])
     }
diff --git a/evap/evaluation/templatetags/navbar_templatetags.py b/evap/evaluation/templatetags/navbar_templatetags.py
index 201f33bb4b..576ad57b49 100644
--- a/evap/evaluation/templatetags/navbar_templatetags.py
+++ b/evap/evaluation/templatetags/navbar_templatetags.py
@@ -25,7 +25,7 @@ def include_navbar(context, user, language):
     ]
 
     return {
-        "request": context["request"],
+        "CSP_NONCE": context["request"].csp_nonce,
         "user": user,
         "current_language": language,
         "languages": LANGUAGES,

From a20173e357aac1429e85af28ed97721184c0ee6f Mon Sep 17 00:00:00 2001
From: Richard Ebeling <dev@richardebeling.de>
Date: Mon, 22 Jan 2024 18:16:11 +0100
Subject: [PATCH 10/12] fixup! Use utility classes instead of inline width
 styles

---
 evap/static/scss/_utilities.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/evap/static/scss/_utilities.scss b/evap/static/scss/_utilities.scss
index bca6d0e458..54ae56f3a6 100644
--- a/evap/static/scss/_utilities.scss
+++ b/evap/static/scss/_utilities.scss
@@ -72,8 +72,8 @@ a.no-underline:hover {
     z-index: $zindex-fixed + 1;
 }
 
-@for $i from 1 through 100 {
+@for $i from 0 through 100 {
     .width-percent-#{$i} {
-        width: $i * 1%;
+        width: $i * 1% !important;
     }
 }

From 2aec3696184a7775cd6129c14a1bb6174426bf88 Mon Sep 17 00:00:00 2001
From: Richard Ebeling <dev@richardebeling.de>
Date: Mon, 22 Jan 2024 18:17:57 +0100
Subject: [PATCH 11/12] fixup! Rewrite non-modal onclick handlers

---
 evap/staff/templates/staff_template_form.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/evap/staff/templates/staff_template_form.html b/evap/staff/templates/staff_template_form.html
index d48999a2dc..86836bd234 100644
--- a/evap/staff/templates/staff_template_form.html
+++ b/evap/staff/templates/staff_template_form.html
@@ -44,7 +44,7 @@
 
     <script type="text/javascript" nonce="{{ CSP_NONCE }}">
         for(const button of document.querySelectorAll(".copy-to-clipboard-btn")) {
-            button.addEventListener("click", (event) => copyToClipboard(event.srcElement.dataset.variable));
+            button.addEventListener("click", event => copyToClipboard(button.dataset.variable));
         }
     </script>
 {% endblock %}

From 799063f44d80b6757a77226aa1eb37b314118dcd Mon Sep 17 00:00:00 2001
From: Richard Ebeling <dev@richardebeling.de>
Date: Mon, 22 Jan 2024 19:53:59 +0100
Subject: [PATCH 12/12] Formatting

---
 .../evaluation/templatetags/infotext_templatetags.py |  5 +----
 evap/settings.py                                     | 12 ++++++------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/evap/evaluation/templatetags/infotext_templatetags.py b/evap/evaluation/templatetags/infotext_templatetags.py
index 08378c2b9e..553683d8fc 100644
--- a/evap/evaluation/templatetags/infotext_templatetags.py
+++ b/evap/evaluation/templatetags/infotext_templatetags.py
@@ -13,7 +13,4 @@ def show_infotext(context, page_name):
         "student_index": Infotext.Page.STUDENT_INDEX,
     }
 
-    return {
-        "CSP_NONCE": context["request"].csp_nonce,
-        "infotext": Infotext.objects.get(page=to_page_id[page_name])
-    }
+    return {"CSP_NONCE": context["request"].csp_nonce, "infotext": Infotext.objects.get(page=to_page_id[page_name])}
diff --git a/evap/settings.py b/evap/settings.py
index 6b390a4663..f80dfd8b79 100644
--- a/evap/settings.py
+++ b/evap/settings.py
@@ -405,12 +405,12 @@ def CHARACTER_ALLOWED_IN_NAME(character):  # pylint: disable=invalid-name
 
 
 ### Content Security Policy
-CSP_OBJECT_SRC = ("'none'", )
-CSP_SCRIPT_SRC = ("'strict-dynamic'", )  # scripts require a correct nonce or to be loaded by a trusted script
-CSP_STYLE_SRC = ("'unsafe-inline'", "'self'") # inline-styles are allowed
-CSP_IMG_SRC = ("'self'", "data:") # images from same host or as data: url are allowed
-CSP_BASE_URI = ("'none'", )
-CSP_INCLUDE_NONCE_IN=['script-src']
+CSP_OBJECT_SRC = ("'none'",)
+CSP_SCRIPT_SRC = ("'strict-dynamic'",)  # scripts require a correct nonce or to be loaded by a trusted script
+CSP_STYLE_SRC = ("'unsafe-inline'", "'self'")  # inline-styles are allowed
+CSP_IMG_SRC = ("'self'", "data:")  # images from same host or as data: url are allowed
+CSP_BASE_URI = ("'none'",)
+CSP_INCLUDE_NONCE_IN = ["script-src"]
 
 ### Other