contact form

app/contact/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

app/contact/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class ContactConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'app.contact'

app/contact/models.py

@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.

app/contact/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

app/contact/views.py

@@ -0,0 +1,45 @@
+import json
+
+from django.conf import settings
+from django.core.mail import EmailMessage
+from django.http import HttpResponse
+from django.shortcuts import render, redirect, get_object_or_404
+
+
+def render_to_json_response(dictionary, content_type="application/json; charset=utf-8", status=200):
+    try:
+        response = json.dumps(dictionary, ensure_ascii=False) + '\n'
+    except TypeError:
+        logger.error('failed to serialize to JSON: %s', dictionary)
+        raise
+    if not isinstance(response, bytes):
+        response = response.encode('utf-8')
+    return HttpResponse(response, content_type=content_type, status=status)
+
+
+def index(request):
+    
+    if request.method == 'POST':
+        try:
+            data = json.loads(request.body.decode())
+        except:
+            response = {}
+            return render_to_json_response(response)
+
+        for key in ('email', 'name', 'message'):
+            if not data.get(key):
+                print(key, 'msising', data)
+                return render_to_json_response({})
+
+        name = data['name']
+        email = data['email']
+        message = data['message']
+        subject = '{} has left a message on brixton-timeline'.format(name)
+        from_ = settings.CONTACT_FROM_EMAIL
+        to = settings.CONTACT_TO_EMAIL
+        if not isinstance(to, list):
+            to = [to]
+        msg = EmailMessage(subject, message, from_, to, reply_to=[email])
+        msg.send(fail_silently=True)
+        return render_to_json_response({"sent": True})
+    return redirect('/')

app/settings.py

@@ -152,6 +152,7 @@ GEOIP_PATH = BASE_DIR / 'geo'
 
 URL_PREFIX = ''
 
+
 try:
     from .local_settings import *
 except ImportError:

app/static/css/partials/_layout.scss

@@ -40,6 +40,31 @@ p {
     }
   }
 }
+
+#contact {
+  .content {
+    padding-top: 5%;
+    width: 640px;
+    height: 480px;
+    margin: auto;
+  }
+  input, textarea {
+    width: 600px;
+    border-radius: 4px;
+    border: 1px solid black;
+  }
+  input[type="submit"] {
+    background: none;
+  }
+  input[type="submit"]:hover {
+    background: red;
+    cursor: pointer;
+  }
+  textarea {
+    height: 320px
+  }
+
+}
 @media screen and (max-width: 799px) {
   #intro {
     margin: 16px;

app/templates/timeline.html

@@ -42,15 +42,48 @@
 	</div>
     <div id="timeline"></div>
     <div id="contact">
-		<form method="post">
-			<input type="text" placeholder="Subject"/><br>
-			<textarea placeholder="Message"></textarea><br>
-			<input type="submit" value="Send message">
+		<div class="content">
+		<form class="contact-form" action="/disabled" method="post">
+			<input type="text" placeholder="Your name" name="name" required><br>
+			<input type="text" placeholder="Your email" name="email" required><br>
+			<textarea placeholder="Message" name="message" required></textarea><br>
+			<input type="submit" value="Send message" />
+			{% csrf_token %}
 		</form>
-		{{ contact.body | safe }}
+		</div>
 	</div>
 	<script src="{% static 'timeline/js/timeline.js' %}"></script>
     <script>
+		function submitContact(event) {
+			event.preventDefault()
+			event.stopPropagation()
+			var data = {}
+			var form = document.querySelector('.contact-form')
+			form.querySelectorAll('input,textarea').forEach(input => {
+				if (input.name) {
+					data[input.name] = input.value
+				}
+			})
+			fetch('/contact/', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					'X-CSRFToken': data.csrfmiddlewaretoken,
+				},
+				body: JSON.stringify(data)
+			}).then(response => response.json()).then(response => {
+				if (response.sent) {
+					var content = document.querySelector('#contact .content')
+					content.innerHTML = `
+						Thank you for taking the time to send us a message, we will get back to you soon.
+						<br><br>
+						<a href="/" target="_self">Back to Timeline</a>
+					`
+				}
+			})
+		}
+		document.querySelector('#contact .contact-form').addEventListener('submit', submitContact)
+
 		var data = {{ timeline_json | safe }};
 		var timeline
 

app/urls.py

@@ -19,9 +19,11 @@ from django.conf import settings
 from django.conf.urls.static import static
 
 from .event import views as event_views
+import app.contact.views
 
 urlpatterns = [
     path(settings.URL_PREFIX + 'admin/', admin.site.urls),
+    path(settings.URL_PREFIX + 'contact/', app.contact.views.index, name='contact'),
     path(settings.URL_PREFIX + 'events/<str:slug>', event_views.events, name='event'),
     path(settings.URL_PREFIX + 'events/', event_views.events, name='events'),
     path(settings.URL_PREFIX + '', event_views.timeline, name='timeline'),