Update contact modal

evap/contributor/templates/contributor_evaluation_form.html

@@ -66,15 +66,17 @@ <h5 class="card-title">{% translate 'Course data' %}</h5>
                     <h5 class="card-title me-auto">{% translate 'Evaluation data' %}</h5>
                     {% if evaluation.allow_editors_to_edit %}
                         <div>
-                            <button type="button" class="btn btn-sm btn-light mb-3 createAccountRequestModalShowButton">
-                                {% translate 'Request creation of new account' %}
-                            </button>
+                            {% blocktranslate asvar title with evaluation_name=evaluation.full_name %}Request account creation for {{ evaluation_name }}{% endblocktranslate %}
+                            {% translate 'Please tell us which new account we should create. We need the name and email for all new accounts.' as teaser %}
+                            {% translate 'Request creation of new account' as show_button_text %}
+                            {% include 'contact_modal.html' with modal_id='createParticipantAccountRequestModal' user=request.user title=title teaser=teaser show_button_text=show_button_text show_button_class="btn btn-sm btn-light mb-3" %}
                         </div>
                     {% else %}
                         <div>
-                            <button type="button" class="btn btn-sm btn-light changeEvaluationRequestModalShowButton">
-                                {% translate 'Request changes' %}
-                            </button>
+                            {% blocktranslate asvar title with evaluation_name=evaluation.full_name %}Request evaluation changes for {{ evaluation_name }}{% endblocktranslate %}
+                            {% translate 'Please tell us what changes to the evaluation we should make.' as teaser %}
+                            {% translate 'Request changes' as show_button_text %}
+                            {% include 'contact_modal.html' with modal_id='changeEvaluationRequestModal' user=request.user title=title teaser=teaser show_button_text=show_button_text show_button_class="btn btn-sm btn-light" %}
                         </div>
                     {% endif %}
                 </div>
@@ -130,18 +132,6 @@ <h5 class="modal-title" id="previewModalLabel">{% translate 'Preview' %}</h5>
     {% endif %}
 {% endblock %}
 
-{% block modals %}
-    {{ block.super }}
-
-    {% blocktranslate asvar title with evaluation_name=evaluation.full_name %}Request account creation for {{ evaluation_name }}{% endblocktranslate %}
-    {% translate 'Please tell us which new account we should create. We need the name and email for all new accounts.' as teaser %}
-    {% include 'contact_modal.html' with modal_id='createAccountRequestModal' user=request.user title=title teaser=teaser %}
-
-    {% blocktranslate asvar title with evaluation_name=evaluation.full_name %}Request evaluation changes for {{ evaluation_name }}{% endblocktranslate %}
-    {% translate 'Please tell us what changes to the evaluation we should make.' as teaser %}
-    {% include 'contact_modal.html' with modal_id='changeEvaluationRequestModal' user=request.user title=title teaser=teaser %}
-{% endblock %}
-
 {% block additional_javascript %}
     {% include 'evap_evaluation_edit_js.html' %}
 

evap/contributor/tests/test_views.py

@@ -243,10 +243,11 @@ def test_contact_modal_escape(self):
         Regression test for #1060
         """
         self.evaluation.name_en = "Adam & Eve"
+        self.evaluation.allow_editors_to_edit = False
         self.evaluation.save()
         page = self.app.get(self.url, user=self.responsible, status=200)
 
-        self.assertIn("changeEvaluationRequestModalLabel", page)
+        self.assertIn("changeEvaluationRequestModalSubject", page)
 
         self.assertNotIn("Adam & Eve", page)
         self.assertIn("Adam & Eve", page)

evap/evaluation/templates/base.html

@@ -31,11 +31,6 @@
         {% include "custom_elements.html" %}
 
         {% block modals %}
-            {% if user.is_authenticated %}
-                {% translate 'Feedback' as title %}
-                {% translate '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">

evap/evaluation/templates/contact_modal.html

@@ -1,55 +1,34 @@
 {% load static %}
 
-<div class="modal fade" id="successMessageModal_{{ modal_id }}" tabindex="-1" role="dialog" aria-labelledby="successMessageModalLabel_{{ modal_id }}" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="successMessageModalLabel_{{ modal_id }}">{% translate 'Message sent' %}</h5>
-            </div>
-            <div class="modal-body">
-                {% translate 'Your message was successfully sent.' %}
-            </div>
-        </div>
-    </div>
-</div>
+<form reload-on-success method="POST" action="{% url 'evaluation:contact' %}">
+    {% csrf_token %}
 
-<div class="modal fade" id="{{ modal_id }}" tabindex="-1" role="dialog" aria-labelledby="{{ modal_id }}Label" aria-hidden="true">
-    <div class="modal-dialog modal-lg" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="{{ modal_id }}Label">{{ title }}</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <form id="{{ modal_id }}Form">
-                <div class="modal-body">
-                    {{ teaser }}
-                    <div class="modal-grid">
-                        <label for="{{ modal_id }}SenderName" class="control-label my-auto pe-4">{% translate 'Sender' %}</label>
-                        {% if modal_id == "feedbackModal" and allow_anonymous_feedback_messages %}
-                            <div class="btn-group text-wrap" role="group" aria-label="{{ modal_id }} Radio Group">
-                                <input type="radio" class="btn-check" name="{{ modal_id }}RadioGroup" id="{{ modal_id }}SenderName" checked>
-                                <label class="btn btn-sm btn-outline-primary text-break" for="{{ modal_id }}SenderName">{{ user.full_name }}</label>
-                                <input type="radio" class="btn-check" name="{{ modal_id }}RadioGroup" id="{{ modal_id }}AnonymousName">
-                                <label class="btn btn-sm btn-outline-primary text-break" for="{{ modal_id }}AnonymousName">{% translate 'Anonymous' %}</label>
-                            </div>
-                        {% else %}
-                            <input type="text" class="form-control mx-auto text-break" id="{{ modal_id }}SenderName" disabled value="{{ user.full_name }}"/>
-                        {% endif %}
-                        <label for="{{ modal_id }}Subject" class="control-label my-auto pe-4 text-break">{% translate 'Subject' %}</label>
-                        <input type="text" class="form-control mx-auto" id="{{ modal_id }}Subject" disabled value="{{ title }}"/>
-                    </div>
-                    <textarea autofocus class="form-control modal-textfield my-4" id="{{ modal_id }}MessageText"></textarea>
-                    <div class="modal-submit-group">
-                        <button type="button" class="btn btn-light me-1" data-bs-dismiss="modal">{% translate 'Cancel' %}</button>
-                        <button type="submit" id="{{ modal_id }}ActionButton" class="btn btn-primary ms-1">{% translate 'Send Message' %}</button>
+    <confirmation-modal type="submit">
+        <span slot="question">{{ teaser }}</span>
+        <span slot="action-text">{% translate 'Send Message' %}</span>
+
+        <div slot="extra-inputs">
+            <div class="modal-grid">
+                <label for="{{ modal_id }}SenderName" class="control-label my-auto pe-4">{% translate 'Sender' %}</label>
+                {% if modal_id == "feedbackModal" and allow_anonymous_feedback_messages %}
+                    <div class="btn-group text-wrap" role="group" aria-label="{{ modal_id }} Radio Group">
+                        <input type="radio" class="btn-check" name="anonymous" value="false" id="{{ modal_id }}SenderName" checked />
+                        <label class="btn btn-sm btn-outline-primary text-break" for="{{ modal_id }}SenderName">{{ user.full_name }}</label>
+                        <input type="radio" class="btn-check" name="anonymous" value="true" id="{{ modal_id }}AnonymousName"/>
+                        <label class="btn btn-sm btn-outline-primary text-break" for="{{ modal_id }}AnonymousName">{% translate 'Anonymous' %}</label>
                     </div>
-                </div>
-            </form>
+                {% else %}
+                    <input type="text" class="form-control mx-auto text-break" id="{{ modal_id }}SenderName" disabled value="{{ user.full_name }}"/>
+                {% endif %}
+                <label for="{{ modal_id }}Subject" class="control-label my-auto pe-4 text-break">{% translate 'Subject' %}</label>
+                <input name="title" type="text" class="form-control mx-auto" id="{{ modal_id }}Subject" disabled value="{{ title }}"/>
+            </div>
+            <label for="{{ modal_id }}MessageText" class="d-none">Nachricht</label>
+            <textarea autofocus class="form-control modal-textfield my-4" id="{{ modal_id }}MessageText" name="message" placeholder="{% translate 'Nachricht' %}"></textarea>
         </div>
-    </div>
-</div>
-<script type="module">
-    import { ContactModalLogic } from "{% static 'js/contact_modal.js' %}";
 
-    new ContactModalLogic("{{ modal_id }}", "{{ title|escapejs }}").attach();
-</script>
+        <div class="{% if modal_id == "feedbackModal" %}feedback-button{% endif %}" slot="show-button">
+            <button type="button" class="{{ show_button_class }}" id="{{ modal_id }}ShowButton">{{ show_button_text }}</button>
+        </div>
+    </confirmation-modal>
+</form>

evap/evaluation/templates/contribution_formset.html

@@ -5,9 +5,10 @@
         <h5 class="card-title me-auto">{% translate 'Contributors' %}</h5>
         {% if not manager %}
             <div>
-                <button type="button" class="btn btn-sm btn-light" id="createAccountRequestModalShowButton">
-                    {% translate 'Request creation of new account' %}
-                </button>
+                {% blocktranslate asvar title with evaluation_name=evaluation.full_name %}Request account creation for {{ evaluation_name }}{% endblocktranslate %}
+                {% translate 'Please tell us which new account we should create. We need the name and email for all new accounts.' as teaser %}
+                {% translate 'Request creation of new account' as show_button_text %}
+                {% include 'contact_modal.html' with modal_id='createContributorAccountRequestModal' user=request.user title=title teaser=teaser show_button_text=show_button_text show_button_class="btn btn-sm btn-light mb-3"%}
             </div>
         {% endif %}
     </div>

evap/evaluation/templates/footer.html

@@ -26,11 +26,10 @@
             </div>
             <div class="navbar-nav justify-content-end feedback-button-placeholder">
                 {% if user.is_authenticated %}
-                    <span class="feedback-button">
-                        <button id="feedbackModalShowButton" type="button" class="btn btn-dark">
-                            {% translate 'Problems/Feedback' %}
-                        </button>
-                    </span>
+                    {% translate 'Feedback' as title %}
+                    {% translate '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 %}
+                    {% translate "Problems/Feedback" as show_button_text %}
+                    {% include 'contact_modal.html' with modal_id='feedbackModal' user=request.user title=title teaser=teaser show_button_text=show_button_text show_button_class="btn btn-dark" %}
                 {% endif %}
             </div>
         </div>

evap/evaluation/templates/profile.html

@@ -69,27 +69,19 @@ <h4 class="card-title mb-4">{% translate 'Delegates and emails' %}</h4>
                 </div>
             {% endif %}
         </div>
+    </form>
 
-        <div class="row row-cols-1 {% if user.is_editor %}row-cols-md-1{% else %}row-cols-md-2{% endif %} g-4">
-            <div class="col">
-                <div class="card card-submit-area card-submit-area-2 text-center">
-                    <div class="card-body tab-row">
-                        <button type="submit" class="btn btn-primary">
-                            {% translate 'Save' %}
-                        </button>
-                        <button type="button" class="btn btn-light" id="changeRequestModalShowButton">
-                            {% translate 'Request changes' %}
-                        </button>
-                    </div>
-                </div>
+    <div class="row row-cols-1 {% if user.is_editor %}row-cols-md-1{% else %}row-cols-md-2{% endif %} g-4">
+        <div class="card card-submit-area card-submit-area-2">
+            <div class="card-body tab-row d-flex justify-content-center">
+                <button type="submit" class="btn btn-primary">
+                    {% translate 'Save' %}
+                </button>
+                {% translate 'Request user setting changes' as title %}
+                {% translate 'Please tell us which of your settings we should change.' as teaser %}
+                {% translate "Request changes" as show_button_text %}
+                {% include 'contact_modal.html' with modal_id='requestChangesModal' user=request.user title=title teaser=teaser show_button_text=show_button_text show_button_class="btn btn-light"%}
             </div>
         </div>
-    </form>
-{% endblock %}
-
-{% block modals %}
-    {{ block.super }}
-    {% translate 'Request user setting changes' as title %}
-    {% translate 'Please tell us which of your settings we should change.' as teaser %}
-    {% include 'contact_modal.html' with modal_id='changeRequestModal' user=request.user title=title teaser=teaser %}
+    </div>
 {% endblock %}

evap/evaluation/tests/test_live.py

@@ -8,14 +8,15 @@
 class ContactModalTests(LiveServerTest):
     def test_contact_modal(self) -> None:
         self.selenium.get(self.reverse("evaluation:index"))
+        self.wait_until_document_ready()
         self.selenium.find_element(By.ID, "feedbackModalShowButton").click()
-        self.wait.until(visibility_of_element_located((By.ID, "feedbackModalMessageText")))
-        self.selenium.find_element(By.ID, "feedbackModalMessageText").send_keys("Test message")
-        self.selenium.find_element(By.ID, "feedbackModalActionButton").click()
+        text_area = self.wait.until(visibility_of_element_located((By.ID, "feedbackModalMessageText")))
+        text_area.send_keys("Test message")
+        self.selenium.find_element(By.CSS_SELECTOR, "confirmation-modal > span[slot='action-text']").click()
 
         self.wait.until(
             text_to_be_present_in_element(
-                (By.CSS_SELECTOR, "#successMessageModal_feedbackModal .modal-body"),
+                (By.CSS_SELECTOR, ".alert-success"),
                 "Your message was successfully sent.",
             )
         )

evap/evaluation/tests/tools.py

@@ -396,6 +396,10 @@ def wait_until_page_reloads(self):
         yield
         self.wait.until(staleness_of(html_element))
 
+    # wait for all javascript to fully execute, so our click handlers are registered
+    def wait_until_document_ready(self):
+        self.wait.until(lambda driver: driver.execute_script("return document.readyState") == "complete")
+
     @classmethod
     def setUpClass(cls) -> None:
         super().setUpClass()

evap/evaluation/views.py

@@ -189,6 +189,7 @@ def contact(request):
         try:
             mail.send()
             logger.info("Sent contact email: \n%s\n", mail.message())
+            messages.success(request, _("Your message was successfully sent."))
             return HttpResponse()
         except Exception:
             logger.exception("An exception occurred when sending the following contact email:\n%s\n", mail.message())

evap/student/tests/test_live.py

@@ -136,8 +136,7 @@ def test_resolving_submit_errors_clears_warning(self) -> None:
         with self.wait_until_page_reloads():
             self.selenium.find_element(By.ID, "vote-submit-btn").click()
 
-        # wait for all javascript to fully execute, so our click handlers are registered
-        self.wait.until(lambda driver: driver.execute_script("return document.readyState") == "complete")
+        self.wait_until_document_ready()
 
         row = self.selenium.find_element(By.CSS_SELECTOR, "#student-vote-form .row:has(.btn-check)")
         error_marked = row.find_elements(By.CSS_SELECTOR, ".choice-error")