Labs feedback form

webapp/home/api.py

@@ -4,7 +4,7 @@
 from django.http import JsonResponse, HttpResponse, HttpResponseBadRequest
 
 from utils.institution import is_institution_email
-from .forms import SupportRequestForm
+from .forms import LabFeedbackForm
 
 SESSION_COUNT_LIMIT = 5
 
@@ -30,13 +30,13 @@ def dismiss_notice(request):
     return HttpResponse('OK', status=201)
 
 
-def subdomain_feedback(request, subdomain):
+def lab_feedback(request, subdomain):
     """Process feedback form for *.usegalaxy.org.au subsites."""
     if request.method != 'POST':
         return HttpResponseBadRequest()
-    form = SupportRequestForm(request.POST)
+    form = LabFeedbackForm(request.POST)
     if form.is_valid():
-        form.dispatch(subject=f"{subdomain.title()} subdomain feedback")
+        form.dispatch(subject=f"{subdomain.title()} Lab feedback")
         return JsonResponse({'success': True})
     return JsonResponse({
         'success': False,

webapp/home/forms.py

@@ -212,6 +212,25 @@ def dispatch(self, subject=None):
         )
 
 
+class LabFeedbackForm(SupportRequestForm):
+
+    to_address = forms.EmailField(required=False)
+
+    def dispatch(self, subject=None):
+        """Dispatch content via the FreshDesk API."""
+        data = self.cleaned_data
+        dispatch_form_mail(
+            to_address=data['to_address'] or settings.EMAIL_TO_ADDRESS,
+            reply_to=data['email'],
+            subject=subject or "Galaxy Australia Lab feedback",
+            text=(
+                f"Name: {data['name']}\n"
+                f"Email: {data['email']}\n\n"
+                + data['message']
+            )
+        )
+
+
 class BaseAccessRequestForm(forms.Form):
     """Abstract form for requesting access to a resource.
 

webapp/home/templates/home/subdomains/components/feedback-modal.html

@@ -0,0 +1,135 @@
+<!-- A modal for collecting user feedback -->
+
+{% load static %}
+
+<div class="modal fade" id="feedbackModal" tabindex="-1">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+      <form id="feedbackForm">
+
+        {% csrf_token %}
+
+        <div class="modal-header">
+          <h5 class="modal-title">Feedback</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
+            onclick="clearFeedbackForm()"></button>
+        </div>
+        <div class="modal-body">
+          <div class="default-content">
+            <p>
+              We'd love to hear your feedback on the Galaxy {{ site_name }} {{ lab_name }}. Please let us know what
+              you think!
+            </p>
+            <div class="mb-3">
+              <label for="nameInput" class="form-label">Name</label>
+
+              <input type="text" class="form-control" id="nameInput" required>
+            </div>
+            <div class="mb-3">
+              <label for="emailInput" class="form-label">Email address</label>
+              <input type="email" class="form-control" id="emailInput" aria-describedby="emailHelp" required>
+              <div id="emailHelp" class="form-text">In case we'd like to contact you for more information.</div>
+            </div>
+            <div class="mb-3">
+              <label for="messageInput" class="form-label">Your feedback</label>
+              <textarea class="form-control" id="messageInput" rows="8" required></textarea>
+            </div>
+          </div>
+
+          <div class="success-content" style="display: none;">
+            <p class="alert alert-success">Thanks for your feedback!</p>
+          </div>
+
+          <div class="loading m-5 text-center" style="display: none;">
+            <img src="{% static '/home/img/spinner.svg' %}" alt="Loading animation" width="150px">
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="clearFeedbackForm();">Close</button>
+          <button type="submit" class="btn btn-primary">Submit</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<script>
+  function clearFeedbackForm() {
+    setTimeout(() => {
+      document.getElementById('feedbackForm').reset();
+      $('#feedbackForm .default-content').show();
+      $('#feedbackForm .success-content').hide();
+      $('#feedbackForm .loading').hide();
+      $('button[type="submit"]').show();
+    }, 500);
+  }
+
+  function submitFeedbackForm(event) {
+    event.preventDefault();
+    $('#feedbackForm .loading').show();
+    $('#feedbackForm .default-content').hide();
+    $('button[type="submit"]').hide();
+
+    // Clear any previous errors
+    $('#feedbackForm .error-message').remove();
+    $('#feedbackForm .invalid').removeClass('invalid');
+
+    let formData = new FormData();
+    formData.append('name', $('#nameInput').val());
+    formData.append('email', $('#emailInput').val());
+    formData.append('message', $('#messageInput').val());
+    formData.append('to_address', '{{ feedback_email }}');
+
+    fetch('/lab/feedback/{{ subdomain }}', {
+      method: 'POST',
+      headers: {
+        'X-CSRFToken': getCsrfToken(),
+      },
+      body: formData,
+    }).then(r => r.json())
+      .then(data => {
+        if (data.success) {
+          showFeedbackSuccess();
+        } else {
+          try {
+            showErrors(JSON.parse(data.errors_json));
+          } catch (e) {
+            console.error(e);
+            alert('An error occurred. Please try again later.');
+          }
+        }
+      })
+      .catch(err => {
+        console.error(err);
+        alert('An error occurred. Please try again later.');
+      });
+  }
+
+  function getCsrfToken() {
+    return document.querySelector('[name=csrfmiddlewaretoken]').value;
+  }
+
+  function showFeedbackSuccess() {
+    console.log("Form success");
+    $('#feedbackForm .loading').hide();
+    $('#feedbackForm .default-content').hide();
+    $('#feedbackForm .success-content').show();
+  }
+
+  function showErrors(errors) {
+    Object.keys(errors).forEach( (field) => {
+      errors[field].forEach( err => {
+        const msg = err.message;
+        $(`#${field}Input`)
+          .addClass('invalid')
+          .parent().append(`<small class="text-danger error-message">${msg}</small>`);
+      })
+    });
+    $('#feedbackForm .loading').hide();
+    $('#feedbackForm .default-content').show();
+    $('button[type="submit"]').show();
+  }
+
+  $('#feedbackForm').submit(submitFeedbackForm);
+
+</script>

webapp/home/templates/home/subdomains/exported.html

@@ -64,6 +64,11 @@
 </main>
 
 
+{% if feedback_email %}
+{% include 'home/subdomains/components/feedback-modal.html' %}
+{% endif %}
+
+
 {% if snippets.footer_md %}
 {{ snippets.footer_md|markdown }}
 {% endif %}