Add Google Autocomplete

website/registrations/static/registrations/js/main.js

@@ -20,4 +20,32 @@ $(function() {
             changeVisiblity(this.value);
         });
     }
+
+    var input = document.querySelector('#id_address_street');
+    var autocomplete = new google.maps.places.Autocomplete(input);
+    autocomplete.addListener('place_changed', function () {
+        var place = autocomplete.getPlace();
+
+        var getAddressItem = function(type, length) {
+            var address = place.address_components;
+            var addressItem = address.find(function (item) {
+                return item.types.includes(type);
+            });
+            var key = length + '_name';
+            return addressItem && addressItem[key] ? addressItem[key] : '';
+        };
+
+        $('#id_address_street').val(
+            getAddressItem('route', 'long') + ' '
+            + getAddressItem('street_number', 'long'));
+
+        $('#id_address_city').val(
+            getAddressItem('locality', 'long'));
+
+        $('#id_address_postal_code').val(
+            getAddressItem('postal_code', 'long'));
+
+        $('#id_address_country').val(
+            getAddressItem('country', 'short').toUpperCase());
+    });
 });

website/registrations/templates/registrations/register_benefactor.html

 {% extends "base.html" %}
 {% load i18n static compress bootstrap4 %}
 
-{% block title %}{% trans "registration"|capfirst %} —
-    {{ block.super }}{% endblock %}
+{% block title %}{% trans "registration"|capfirst %} — {{ block.super }}{% endblock %}
+
+{% block js_body %}
+    {{ block.super }}
+    <script type="text/javascript"
+            src="https://maps.googleapis.com/maps/api/js?key={{ google_api_key }}&libraries=places"></script>
+    {% compress js %}
+        <script type="text/javascript" src="{% static 'registrations/js/main.js' %}"></script>
+    {% endcompress %}
+{% endblock %}
 
 {% block body %}
     <section class="page-section" id="registrations-form">

website/registrations/templates/registrations/register_member.html

@@ -3,6 +3,15 @@
 
 {% block title %}{% trans "registration"|capfirst %} — {{ block.super }}{% endblock %}
 
+{% block js_body %}
+    {{ block.super }}
+    <script type="text/javascript"
+            src="https://maps.googleapis.com/maps/api/js?key={{ google_api_key }}&libraries=places"></script>
+    {% compress js %}
+        <script type="text/javascript" src="{% static 'registrations/js/main.js' %}"></script>
+    {% endcompress %}
+{% endblock %}
+
 {% block body %}
     <section class="page-section" id="registrations-form">
         <div class="container">

website/registrations/tests/test_views.py

@@ -10,7 +10,7 @@ from django.contrib.contenttypes.models import ContentType
 from django.core.exceptions import ValidationError
 from django.http import HttpResponse
 from django.template.defaultfilters import floatformat
-from django.test import Client, TestCase, RequestFactory
+from django.test import Client, TestCase, RequestFactory, override_settings
 from django.urls import reverse
 from django.utils import timezone
 from django.utils.translation import ugettext_lazy as _
@@ -463,14 +463,16 @@ class BaseRegistrationFormViewTest(TestCase):
         self.rf = RequestFactory()
         self.view = views.BaseRegistrationFormView()
 
+    @override_settings(GOOGLE_PLACES_API_KEY='hello')
     def test_get_context_data(self):
         self.view.request = self.rf.post('/')
         context = self.view.get_context_data()
-        self.assertEqual(len(context), 4)
+        self.assertEqual(len(context), 5)
         self.assertEqual(context['year_fees'], floatformat(
             settings.MEMBERSHIP_PRICES[Entry.MEMBERSHIP_YEAR], 2))
         self.assertEqual(context['study_fees'], floatformat(
             settings.MEMBERSHIP_PRICES[Entry.MEMBERSHIP_STUDY], 2))
+        self.assertEqual(context['google_api_key'], 'hello')
 
     @mock.patch('django.views.generic.FormView.get')
     def test_get(self, super_get):

website/registrations/views.py

@@ -127,6 +127,7 @@ class BaseRegistrationFormView(FormView):
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
+        context['google_api_key'] = settings.GOOGLE_PLACES_API_KEY
         context['year_fees'] = floatformat(settings.MEMBERSHIP_PRICES[
                                                Entry.MEMBERSHIP_YEAR], 2)
         context['study_fees'] = floatformat(settings.MEMBERSHIP_PRICES[

website/thaliawebsite/settings/settings.py

@@ -296,6 +296,7 @@ ACTIVEMEMBERS_NEXTCLOUD_API_SECRET = os.environ.get(
 # Google maps API key and secrets
 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', '')
 
 # Photos settings
 PHOTO_UPLOAD_SIZE = 1920, 1080