Show modal after beta access signup

The beta access form is now in it's own html page. this makes it easier
to work with djangos form validation with reloading the whole page.

datacenterlight/forms.py

@@ -7,7 +7,7 @@ class BetaAccessForm(forms.ModelForm):
     email = forms.CharField(widget=forms.EmailInput())
 
     class Meta:
-        fields = ['email']
+        fields = ['name', 'email']
         model = BetaAccess
 
 

datacenterlight/templates/datacenterlight/beta_access.html

@@ -0,0 +1,27 @@
+{% load i18n %}
+
+<form novalidate id ="beta_access" class="form-beta" method="POST" action="{% url 'datacenterlight:beta_access'%}">
+  {% csrf_token %}
+  {{ form.non_field_errors }}
+  <div>
+	{% for message in messages %}
+		<strong>{{ message }}</strong>
+	{% endfor %}
+  </div>
+ <div class="inputs">
+	 <div class="form-group">
+		<input type="text" name="name" class="form-control" id="name" placeholder="Enter name">
+		<span style="color: white">{{ form.name.errors|striptags}}</span>
+	  </div>
+	  <div class="form-group">
+		<input type="email" name="email" class="form-control" id="email" placeholder="Enter email">
+		<span style="color: white">{{ form.email.errors|striptags}}</span>
+	  </div>
+ </div>
+  <button type="submit" class="btn btn-default btn-transparent btn-lg">{% trans "Request Beta Access" %}</button>
+</form>
+<script>
+	$('#beta_access').ajaxForm({
+		target: '#beta_access_form', success: function(response) { }
+	});
+</script>

datacenterlight/templates/datacenterlight/beta_success.html

@@ -0,0 +1,47 @@
+{% load i18n %}
+
+<div class="modal fade bs-example-modal-sm" style="color:black;"  id="successModal" tabindex="-1" role="dialog">
+    <div class="vertical-alignment-helper">
+        <div class="modal-dialog vertical-align-center">
+			<div class="modal-content">
+			  <div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+				<h4 class="modal-title">{% trans "Request Sent" %}</h4>
+			  </div>
+			  <div class="modal-body">
+				<p>{% trans "Thank you, we will contact you as soon as possible" %}</p>
+			  </div>
+			</div><!-- /.modal-content -->
+		</div>
+	</div>
+</div><!-- /.modal -->
+<script>
+	// Show modal
+	$('#successModal').modal('show');
+	// close the modal after 3 seconds
+	setTimeout(function() {
+	    $('#successModal').modal('hide');
+	}, 5000);	
+</script>
+<style>
+.vertical-alignment-helper {
+    display:table;
+    height: 100%;
+    width: 100%;
+    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
+}
+.vertical-align-center {
+    /* To center vertically */
+    display: table-cell;
+    vertical-align: middle;
+    pointer-events:none;
+}
+.modal-content {
+    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
+    width:inherit;
+    height:inherit;
+    /* To center horizontally */
+    margin: 0 auto;
+    pointer-events: all;
+}
+</style>

datacenterlight/templates/datacenterlight/index.html

@@ -261,43 +261,9 @@
                     </div>
                 </div>
                 <div class="col-sm-6 col-md-6">
-                    <div class="form">
+					<!-- Beta access form, will be loaded via ajax -->
-                        <form class="form-beta" method="POST" action="">
+                    <div class="form" id="beta_access_form">
-                          {% csrf_token %}
-                          {{ form.non_field_errors }}
-                          {{ form.email.errors|striptags}}
-                          <div>
-                            {% for message in messages %}
-                                <strong>{{ message }}</strong>
-                            {% endfor %}                  
 					</div>
-                         <div class="inputs">
-                             <div class="form-group">
-                                <input type="text" name="name" class="form-control" id="name" placeholder="Enter name">
-                              </div>
-                              <div class="form-group">
-                                <input type="email" name="email" class="form-control" id="email" placeholder="Enter email">
-                              </div>
-                         </div>
-                          <button type="submit" class="btn btn-default btn-transparent btn-lg">{% trans "Request Beta Access" %}</button>
-                        </form>
-                    </div>
-                     <div class="modal fade bs-example-modal-sm" style="color:black;"  id="sucessModal" tabindex="-1" role="dialog">
-                          <div class="modal-dialog" role="document">
-                            <div class="modal-content">
-                              <div class="modal-header">
-                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                                <h4 class="modal-title">{% trans "Request Sent" %}</h4>
-                              </div>
-                              <div class="modal-body">
-                                <p>{% trans "Thank you, we will contact you as soon as possible" %}</p>
-                              </div>
-                              <div class="modal-footer text-center">
-                                <button type="submit" class="btn btn-primary" data-dismiss="modal">Ok</button>
-                              </div>
-                            </div><!-- /.modal-content -->
-                          </div><!-- /.modal-dialog -->
-                        </div><!-- /.modal -->
                 </div>
             </div>
 
@@ -389,12 +355,12 @@
              windowPadding: 10,
         });
 
-        var hash = window.location.hash.substr(1);
+  		$.ajax({
-        console.log(hash);
+	        url: "{% url 'datacenterlight:beta_access' %}",
-        if (hash == 'requestform'){
+				context: document.body
-            $('#reques-success-message').modal('show');
+			}).done(function(response) {
-        }
+				$('#beta_access_form').html(response);
-
+			});
        };
 </script>
 
@@ -403,6 +369,8 @@
     <!-- Bootstrap Core JavaScript -->
     <script src="{% static 'datacenterlight/js/bootstrap.min.js' %}"></script>
     <script src="{% static 'datacenterlight/js/main.js' %}"></script>
+    <!-- Load form js -->
+    <script src="{% static 'datacenterlight/js/form.js' %}"></script>
 
 </body>
 

datacenterlight/urls.py

@@ -1,10 +1,12 @@
 from django.conf.urls import url
 
-from .views import IndexView, BetaProgramView, LandingProgramView
+from .views import IndexView, BetaProgramView, LandingProgramView, \
+                   BetaAccessView
 
 
 urlpatterns = [
     url(r'^/?$', IndexView.as_view(), name='index'),
     url(r'^/beta-program/?$', BetaProgramView.as_view(), name='beta'),
     url(r'^/landing/?$', LandingProgramView.as_view(), name='landing'),
+    url(r'^/beta_access?$', BetaAccessView.as_view(), name='beta_access'),
 ]

datacenterlight/views.py

@@ -5,6 +5,7 @@ from .models import BetaAccess, BetaAccessVMType, BetaAccessVM
 from django.contrib import messages
 from django.core.urlresolvers import reverse_lazy, reverse
 from utils.mailer import BaseEmail
+from django.shortcuts import render
 
 from opennebula_api.models import OpenNebulaManager
 from opennebula_api.serializers import VirtualMachineTemplateSerializer
@@ -12,6 +13,43 @@ from opennebula_api.serializers import VirtualMachineTemplateSerializer
 class LandingProgramView(TemplateView):
     template_name = "datacenterlight/landing.html"
 
+class BetaAccessView(FormView):
+    template_name = "datacenterlight/beta_access.html"
+    form_class = BetaAccessForm  
+    success_message = "Thank you, we will contact you as soon as possible"
+
+    def form_valid(self, form):
+
+        context = {
+            'base_url': "{0}://{1}".format(self.request.scheme, self.request.get_host())
+        }
+
+        email_data = {
+            'subject': 'DatacenterLight Beta Access Request',
+            'to': form.cleaned_data.get('email'),
+            'context': context,
+            'template_name': 'request_access_confirmation',
+            'template_path': 'datacenterlight/emails/'
+        }
+        email = BaseEmail(**email_data)
+        email.send()
+
+        context.update({
+            'email': form.cleaned_data.get('email')
+        })
+
+        email_data = {
+            'subject': 'DatacenterLight Beta Access Request',
+            'to': 'info@ungleich.ch',
+            'context': context,
+            'template_name': 'request_access_notification',
+            'template_path': 'datacenterlight/emails/'
+        }
+        email = BaseEmail(**email_data)
+        email.send()
+
+        messages.add_message(self.request, messages.SUCCESS, self.success_message)
+        return render(self.request, 'datacenterlight/beta_success.html', {})
 
 class BetaProgramView(CreateView):
     template_name = "datacenterlight/beta.html"