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.
This commit is contained in:
modulos 2017-05-22 18:03:33 +02:00
parent e782290eeb
commit 920e7669dc
8 changed files with 140 additions and 46 deletions

View file

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

File diff suppressed because one or more lines are too long

View file

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

View file

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

View file

@ -261,43 +261,9 @@
</div> </div>
</div> </div>
<div class="col-sm-6 col-md-6"> <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>
<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>
</div> </div>
@ -389,12 +355,12 @@
windowPadding: 10, 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> </script>
@ -403,6 +369,8 @@
<!-- Bootstrap Core JavaScript --> <!-- Bootstrap Core JavaScript -->
<script src="{% static 'datacenterlight/js/bootstrap.min.js' %}"></script> <script src="{% static 'datacenterlight/js/bootstrap.min.js' %}"></script>
<script src="{% static 'datacenterlight/js/main.js' %}"></script> <script src="{% static 'datacenterlight/js/main.js' %}"></script>
<!-- Load form js -->
<script src="{% static 'datacenterlight/js/form.js' %}"></script>
</body> </body>

View file

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

View file

@ -5,6 +5,7 @@ from .models import BetaAccess, BetaAccessVMType, BetaAccessVM
from django.contrib import messages from django.contrib import messages
from django.core.urlresolvers import reverse_lazy, reverse from django.core.urlresolvers import reverse_lazy, reverse
from utils.mailer import BaseEmail from utils.mailer import BaseEmail
from django.shortcuts import render
from opennebula_api.models import OpenNebulaManager from opennebula_api.models import OpenNebulaManager
from opennebula_api.serializers import VirtualMachineTemplateSerializer from opennebula_api.serializers import VirtualMachineTemplateSerializer
@ -12,6 +13,43 @@ from opennebula_api.serializers import VirtualMachineTemplateSerializer
class LandingProgramView(TemplateView): class LandingProgramView(TemplateView):
template_name = "datacenterlight/landing.html" 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): class BetaProgramView(CreateView):
template_name = "datacenterlight/beta.html" template_name = "datacenterlight/beta.html"