Merge branch 'main' of git.0x2620.org:0x2620/aab21 into main

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,11 +1,57 @@
 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 {
             caret.innerHTML = ''
         }
     })
+})
+
+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>`
 })