ungleich-public/dynamicweb
6
0
Fork 0
Code Issues 1 Pull requests 2 Projects Releases Wiki Activity

Merge pull request #263 from Modulos/beta_modal

Browse source 
Show modal after beta access signup
This commit is contained in:
Levi Velázquez 2017-05-23 11:10:01 -05:00 committed by GitHub
commit 21d37ffca4
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

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>

52
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 %}
<!-- Beta access form, will be loaded via ajax -->
<div class="form" id="beta_access_form">
</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);
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"