Add sentry user feedback modal

website/thaliawebsite/settings/settings.py

@@ -296,6 +296,9 @@ GOOGLE_MAPS_API_KEY = os.environ.get('GOOGLE_MAPS_API_KEY', '')
 GOOGLE_MAPS_API_SECRET = os.environ.get('GOOGLE_MAPS_API_SECRET', '')
 GOOGLE_PLACES_API_KEY = os.environ.get('GOOGLE_PLACES_API_KEY', '')
 
+# Sentry settings
+SENTRY_API_ROOT = os.environ.get('SENTRY_API_ROOT', '')
+
 # Photos settings
 PHOTO_UPLOAD_SIZE = 1920, 1080
 

website/thaliawebsite/static/css/_modals.scss

+.modal {
+    .modal-content {
+        border: none;
+        border-radius: 0;
+    }
+}

website/thaliawebsite/static/css/main.scss

@@ -12,6 +12,7 @@
 @import "alerts";
 @import "navs";
 @import "progress";
+@import "modals";
 
 @import "./base.scss";
 @import "../../announcements/static/announcements/css/style.scss";

website/thaliawebsite/static/js/sentry.js

+$(function () {
+    $('#feedback-modal').modal('show');
+
+    $('#feedback-form').on('submit', function (e) {
+        e.preventDefault();
+
+        const formEl = document.getElementById('feedback-form');
+
+        $.ajax({
+            url: formEl.dataset.api + 'user-feedback/',
+            type: 'POST',
+            mode: "no-cors",
+            data: JSON.stringify({
+                "comments": $('#feedback-body').val(),
+                "email": formEl.dataset.email,
+                "event_id": formEl.dataset.event,
+                "name": formEl.dataset.name
+            }),
+            headers: {
+                'Authorization': 'DSN ' + formEl.dataset.dsn,
+                'Content-Type': 'application/json'
+            },
+        });
+
+        $(this).modal('dispose');
+    });
+});

website/thaliawebsite/templates/500.html

 {% extends "error.html" %}
-{% load i18n %}
+{% load i18n static %}
 
-{% block error_message %}{% trans "500: Internal server error. Thalia's website committee has been notified." %}{% endblock %}
+{% block error_message %}
+    {% trans "500: Internal server error. Thalia's website committee has been notified." %}{% endblock %}
+
+{% block body %}
+    {{ block.super }}
+
+    {% if request.user.is_authenticated %}
+    <div class="modal fade" id="feedback-modal">
+        <div class="modal-dialog" role="document">
+            <form
+                id="feedback-form" data-dsn="{{ sentry_dsn }}"
+                data-event="{{ sentry_event_id }}"
+                data-api="{{ sentry_api_root }}"
+                data-name="{{ request.user.username }}"
+                data-email="{{ request.user.email }}"
+                method="post">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title"
+                            id="exampleModalLabel">{% trans 'Help us fix this problem' %}</h5>
+                    </div>
+                    <div class="modal-body">
+                        <p>
+                            {% blocktrans trimmed %}
+                                Please provide us with some information so that
+                                we can easily fix the problem that you just
+                                encountered.
+                                Any description of the steps you took to get
+                                into this situation would be of tremendous
+                                worth.
+                            {% endblocktrans %}
+                        </p>
+                        <div class="form-group">
+                            <textarea
+                                class="form-control"
+                                id="feedback-body"
+                                rows="5"
+                                placeholder="{% trans "Jot down your feedback here" %}..."
+                            ></textarea>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button
+                            type="button" class="btn btn-secondary"
+                            data-dismiss="modal">
+                            {% trans 'Close' %}
+                        </button>
+                        <input type="submit"
+                               value="{% trans 'Send feedback' %}"
+                               class="btn btn-primary"/>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+    {% endif %}
+{% endblock %}
+
+{% block js_body %}
+    {{ block.super }}
+    <script src="{% static 'js/sentry.js' %}" type="text/javascript"></script>
+{% endblock %}

website/thaliawebsite/urls.py

@@ -48,6 +48,7 @@ from members.sitemaps import sitemap as members_sitemap
 from members.views import ObtainThaliaAuthToken
 from partners.sitemaps import sitemap as partners_sitemap
 from thabloid.sitemaps import sitemap as thabloid_sitemap
+from thaliawebsite import views
 from thaliawebsite.forms import AuthenticationForm
 from thaliawebsite.views import (
     PrivacyPolicyView, EventTermsView,
@@ -72,10 +73,13 @@ THALIA_SITEMAP.update(partners_sitemap)
 THALIA_SITEMAP.update(education_sitemap)
 THALIA_SITEMAP.update(events_sitemap)
 
+handler500 = 'thaliawebsite.views.sentry_500handler'
+
 # pragma pylint: disable=line-too-long
 urlpatterns = [  # pylint: disable=invalid-name
     url(r'^admin/', admin.site.urls),
     path('', IndexView.as_view(), name='index'),
+    path('500/', views.sentry_500handler, name='500error'),
     path('privacy-policy/', PrivacyPolicyView.as_view(), name='privacy-policy'),
     path('event-registration-terms/', EventTermsView.as_view(), name='event-registration-terms'),
     path('alumni/', AlumniEventsView.as_view(), name='alumni'),

website/thaliawebsite/views.py

 """General views for the website"""
+import os
 
 from django.contrib.admin.views.decorators import staff_member_required
 from django.contrib.auth.decorators import login_required
 from django.http import (HttpResponseForbidden, HttpResponse)
+from django.shortcuts import render
 from django.utils.decorators import method_decorator
 from django.views.generic import TemplateView
 from django.views.generic.base import View
+from django.conf import settings
+from sentry_sdk import last_event_id
 
 
 class IndexView(TemplateView):
@@ -51,3 +55,11 @@ class TestCrashView(View):
         if not request.user.is_superuser:
             return HttpResponseForbidden("This is not for you")
         raise Exception("Test exception")
+
+
+def sentry_500handler(request, *args, **argv):
+    return render(request, "500.html", {
+        'sentry_event_id': '213', #last_event_id(),
+        'sentry_dsn': 'https://f5dc3689093e438eb574a090c7cae63d@sentry.io/1463433', #os.environ.get('SENTRY_DSN'),
+        'sentry_api_root': settings.SENTRY_API_ROOT
+    }, status=500)