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

Reviewed-on: 0x2620/aab21#35
This commit is contained in:
sanj 2021-10-28 11:30:22 +00:00
commit 381842d09c
5 changed files with 67 additions and 14 deletions

View file

@ -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
return render(request, 'contact.html', context)
success = False
else:
success = False
return render_to_json_response({'success': success})

View file

@ -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;
}

View file

@ -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;
}
}

View file

@ -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>`
})

View file

@ -130,11 +130,8 @@
</label>
<input type="checkbox" id="bio-contact" class="accordion-checkbox">
<div class="accordion-content">
<div class="contact">
{% if submitted %}
Thanks for your message
{% else %}
<form method="post">
<div class="contact" id="contact-container">
<form id="contact-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>