Skip to content

Update contact modal #2657

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
styrix560 wants to merge 22 commits into
base: main
Choose a base branch
from
Open

Update contact modal #2657

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
9345a4c
wip
styrix560 Feb 2, 2026
56b7fcd
wip
styrix560 Feb 16, 2026
316d9df
wip
styrix560 Feb 23, 2026
4ea8c78
wip
styrix560 Mar 2, 2026
7853fa8
wip
styrix560 Mar 2, 2026
e04c54e
Change contact modals to new variant
styrix560 Mar 2, 2026
2ec8bd9
Remove console.log
styrix560 Mar 2, 2026
481cec5
Remove unused code
styrix560 Mar 2, 2026
76e3aac
Add success message
styrix560 Mar 16, 2026
5c267b2
Add whitespace
styrix560 Mar 16, 2026
93d7c3c
Fix tests
styrix560 Mar 16, 2026
507fa15
Fix whitespace
styrix560 Mar 16, 2026
24d97fe
More whitespace
styrix560 Mar 16, 2026
b4632f2
Add label and placeholder to contact modal textarea
styrix560 Mar 16, 2026
013b600
Fix text in profile contact_modal
styrix560 Mar 16, 2026
49c3235
stuff :)
styrix560 Mar 16, 2026
4f21711
whitespace
styrix560 Mar 16, 2026
6ab887d
Add modals block back in
styrix560 Apr 13, 2026
6287dd9
Fix ids
styrix560 Apr 13, 2026
6a8d1b4
Fix ids
styrix560 Apr 13, 2026
b945b30
Remove custom JS from contact modal
styrix560 Apr 13, 2026
01e7afd
Fix button UI
styrix560 Apr 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 8 additions & 18 deletions evap/contributor/templates/contributor_evaluation_form.html
View file
Open in desktop
Comment thread
styrix560 marked this conversation as resolved.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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' %}

Expand Down
2 changes: 1 addition & 1 deletion evap/contributor/tests/test_views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@ def test_contact_modal_escape(self):
self.evaluation.save()
page = self.app.get(self.url, user=self.responsible, status=200)

self.assertIn("changeEvaluationRequestModalLabel", page)
Copy link
Copy Markdown
Member

@niklasmohrin niklasmohrin Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why?

Copy link
Copy Markdown
Collaborator Author

@styrix560 styrix560 Apr 13, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before, this was the code <h5 class="modal-title" id="{{ modal_id }}Label">{{ title }}</h5>. Now, the id also reflects, that this is the title and not some kind of label: <span slot="title" id="{{ modal_id }}Title">{{ title }}</span>

Copy link
Copy Markdown
Member

@niklasmohrin niklasmohrin Apr 13, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

but the "change evaluation" part changed too, I think this is the more interesting change

Copy link
Copy Markdown
Collaborator Author

@styrix560 styrix560 Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I know why this is happening and the reason is a bit hilarious.

Our test was (kinda) supposed to fail always. Before, we included the modals unconditionally and only showed the show-buttons conditionally. Now, we also show modals conditionally. Where before both modals lay in the DOM, now only the createContributorAccountRequestModal appears.

self.assertIn("createContributorAccountRequestModalTitle", page)

self.assertNotIn("Adam &amp;amp; Eve", page)
self.assertIn("Adam &amp; Eve", page)
Expand Down
5 changes: 0 additions & 5 deletions evap/evaluation/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,6 @@
{% include "custom_elements.html" %}

{% block modals %}
Comment thread
styrix560 marked this conversation as resolved.
{% 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">
Expand Down
79 changes: 30 additions & 49 deletions evap/evaluation/templates/contact_modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,36 @@
{% 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 id="contact-modal-form-{{ modal_id }}" method="POST" action="{% url 'evaluation:contact' %}">
Copy link
Copy Markdown
Member

@richardebeling richardebeling Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like this ID is now unused -- can we remove it?

Copy link
Copy Markdown
Collaborator Author

@styrix560 styrix560 Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, it is required for the test test_contact_modal_escape in contributor:test_views

Copy link
Copy Markdown
Member

@richardebeling richardebeling Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It does not use contact-modal-form-...?

{% csrf_token %}
<input hidden name="title" value="{{ title }}"/>
Copy link
Copy Markdown
Member

@richardebeling richardebeling Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before, we passed the title to a hidden input with id="{{ modal_id }}Subject" and no name. We still have the corresponding input below, but now we also have name="title". Is this intended and required?

Copy link
Copy Markdown
Collaborator Author

@styrix560 styrix560 Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before, we had custom logic to fire the http request, that passed the title value with key 'title' as body parameters. Because we now use html forms for this, name="title" submits the title the same way as before.
The input you mention was only for UI and was never submitted, because it had no name.

Copy link
Copy Markdown
Member

@richardebeling richardebeling Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But then let's just use one input instead of having two of them? I'd propose to remove this one here and juts add name="title" to the one below in line 26


<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="title" id="{{ modal_id }}Title">{{ title }}</span>
<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 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>
Copy link
Copy Markdown
Member

@niklasmohrin niklasmohrin Apr 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

German text here and below, should be translate

<textarea autofocus class="form-control modal-textfield my-4" id="{{ modal_id }}MessageText" name="message" placeholder="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>
7 changes: 4 additions & 3 deletions evap/evaluation/templates/contribution_formset.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Comment thread
styrix560 marked this conversation as resolved.
{% 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"%}
Comment thread
richardebeling marked this conversation as resolved.
</div>
{% endif %}
</div>
Expand Down
9 changes: 4 additions & 5 deletions evap/evaluation/templates/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,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>
Expand Down
32 changes: 12 additions & 20 deletions evap/evaluation/templates/profile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
4 changes: 2 additions & 2 deletions evap/evaluation/tests/test_live.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ def test_contact_modal(self) -> None:
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()
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.",
)
)
Expand Down
1 change: 1 addition & 0 deletions evap/evaluation/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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())
Expand Down
69 changes: 0 additions & 69 deletions evap/static/ts/src/contact_modal.ts
View file
Open in desktop

This file was deleted.