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:
parent
e782290eeb
commit
920e7669dc
8 changed files with 140 additions and 46 deletions
|
@ -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
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -672,4 +672,4 @@ a#forgotpassword {
|
||||||
}
|
}
|
||||||
.form-300{
|
.form-300{
|
||||||
width: 300px;
|
width: 300px;
|
||||||
}
|
}
|
||||||
|
|
12
datacenterlight/static/datacenterlight/js/form.js
Normal file
12
datacenterlight/static/datacenterlight/js/form.js
Normal file
File diff suppressed because one or more lines are too long
27
datacenterlight/templates/datacenterlight/beta_access.html
Normal file
27
datacenterlight/templates/datacenterlight/beta_access.html
Normal 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>
|
47
datacenterlight/templates/datacenterlight/beta_success.html
Normal file
47
datacenterlight/templates/datacenterlight/beta_success.html
Normal 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">×</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>
|
|
@ -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 %}
|
</div>
|
||||||
{{ 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">×</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>
|
||||||
|
|
||||||
|
|
|
@ -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'),
|
||||||
]
|
]
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in a new issue