amal
/
dynamicweb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
datacenterlight/forms.py
View File

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

2
datacenterlight/static/datacenterlight/css/landing-page.css
View File

@ -672,4 +672,4 @@ a#forgotpassword {
}
.form-300{
width: 300px;
}
}

12
datacenterlight/static/datacenterlight/js/form.js Normal file
View File

File diff suppressed because one or more lines are too long

27
datacenterlight/templates/datacenterlight/beta_access.html Normal file
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>

47
datacenterlight/templates/datacenterlight/beta_success.html Normal file
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>

54
datacenterlight/templates/datacenterlight/index.html
View File

@ -261,43 +261,9 @@
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="form">
<form class="form-beta" method="POST" action="">
{% 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 -->
<!-- Beta access form, will be loaded via ajax -->
<div class="form" id="beta_access_form">
</div>
</div>
</div>
@ -389,12 +355,12 @@
windowPadding: 10,
});
var hash = window.location.hash.substr(1);
console.log(hash);
if (hash == 'requestform'){
$('#reques-success-message').modal('show');
}
$.ajax({
url: "{% url 'datacenterlight:beta_access' %}",
context: document.body
}).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>

4
datacenterlight/urls.py
View File

@ -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'),
]

38
datacenterlight/views.py
View File

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