Merge pull request 'POST contact form via javascript' (#35) from contact-js into main

Reviewed-on: 0x2620/aab21#35

app/contact/views.py

@@ -1,13 +1,12 @@
 from django.conf import settings
 from django.core.mail import EmailMessage
 from django.shortcuts import render
-
+from app.video.utils import render_to_json_response
 from . import forms
 from . import models
 
 def index(request):
-    context = {
+    success = True
-    }
     if request.method == 'POST':
         form = forms.ContactForm(request.POST)
         if form.is_valid():
@@ -17,7 +16,8 @@ def index(request):
             to = [settings.CONTACT_TO_EMAIL]
             msg = EmailMessage(subject, message, from_, to, reply_to=[form.cleaned_data['email']])
             msg.send(fail_silently=True)
-            context['submitted'] = True
         else:
-            context['form'] = form
+            success = False
-    return render(request, 'contact.html', context)
+    else:
+        success = False
+    return render_to_json_response({'success': success})

app/static/css/partials/_about.scss

@@ -103,8 +103,18 @@
         display: block;
     }
   }
+
+  .alert {
+    @media screen and (min-width: 800px) {
+      width: 50%;
+    }
+  }
 }
 
 .accordion-checkbox:checked + .accordion-content {
   display: block; 
 }
+
+.alert {
+  padding: var(--spacing) 0;
+}

app/static/css/partials/_contact.scss

@@ -48,6 +48,7 @@
     display: block;
     background-size: 400% 100%;
     animation: background_animation 60s ease-in-out infinite, text_animation 60s ease-in-out infinite;
+    cursor: pointer;
   }
 
 }

app/static/js/about.js

@@ -1,7 +1,7 @@
 document.querySelectorAll('.accordion-checkbox').forEach(cbox => {
     cbox.addEventListener('change', function() {
         const label = this.previousElementSibling
-        const caret = label.querySelector('.text')
+        const caret = label.querySelector('.text-about')
         if (cbox.checked) {
             caret.innerHTML = ''
         } else {
@@ -9,3 +9,49 @@ document.querySelectorAll('.accordion-checkbox').forEach(cbox => {
         }
     })
 })
+
+function getCookie(name) {
+    var cookieValue = null;
+    if (document.cookie && document.cookie !== '') {
+        var cookies = document.cookie.split(';');
+        for (var i = 0; i < cookies.length; i++) {
+            var cookie = cookies[i].trim()
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    if (!cookieValue && name === 'csrftoken') {
+        var input = document.querySelector('input[name="csrfmiddlewaretoken"]')
+        if (input) {
+            cookieValue = input.value
+        }
+    }
+    return cookieValue;
+}
+
+document.getElementById('contact-form').addEventListener('submit', async function(event) {
+    // console.log('foobar')
+    event.preventDefault()
+    let data = new FormData()
+    data.append('email', document.getElementById('input-email').value)
+    data.append('message', document.getElementById('input-msg').value)
+    data.append('csrfmiddlewaretoken', getCookie('csrftoken'))
+    document.getElementById('contact-container').innerHTML = '...'
+    let success;
+    try {
+        const response = await fetch('/polis+contact/', {
+            method: 'POST',
+            body: data
+        })
+        let resData = await response.json()
+        success = resData.success
+    } catch (e) {
+        console.log('error', e)
+        success = false
+    }
+    const thanksMsg = success ? 'Thanks for your message 謝謝您的訊息' : 'Failed to send message. Try again later.'
+    document.getElementById('contact-container').innerHTML = `<div class="alert">${thanksMsg}</div>`
+})

app/templates/about.html

@@ -130,11 +130,8 @@
                 </label>
                 <input type="checkbox" id="bio-contact" class="accordion-checkbox">
                 <div class="accordion-content">
-                  <div class="contact">
+                  <div class="contact" id="contact-container">
-                    {% if submitted %}
+                    <form id="contact-form" method="post">
-                        Thanks for your message
-                    {% else %}
-                    <form method="post">
                         <label for="input-email">Your Email</label>
                         <input name="email" type="email" id="input-email" required>
                         
@@ -144,7 +141,6 @@
                         <input type="submit" value="Send Message 傳送訊息">
                         {% csrf_token %}
                     </form>
-                    {% endif %}
                   </div>
                 </div>
             </li>