Merge pull request #263 from Modulos/beta_modal
Show modal after beta access signup
This commit is contained in:
		
				commit
				
					
						21d37ffca4
					
				
			
		
					 8 changed files with 140 additions and 46 deletions
				
			
		| 
						 | 
				
			
			@ -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
									
								
							
							
						
						
									
										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 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">×</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>
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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'),
 | 
			
		||||
]
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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"
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue