Secure payment design

app/views/public/header.blade.php

@@ -161,28 +161,247 @@
         </ul>
       </div> 
 
+
+
+
+
+
+
+
+
       <div class="col-md-4">
         <h3><span class="glyphicon glyphicon-share-alt"></span>Connect with Us</h3>
         <div class="social">
           <div class="row1">
-                    <a href="https://www.facebook.com/invoiceninja"><img src="{{ asset('images/hex-facebook.png') }}"></a>
-                    <a href="https://www.facebook.com/invoiceninja"><img src="{{ asset('images/hex-twitter.png') }}"></a>
-                    <a href="https://www.facebook.com/invoiceninja"><img src="{{ asset('images/hex-linkedin.png') }}"></a>
-                    <a href="https://www.facebook.com/invoiceninja"><img src="{{ asset('images/hex-gplus.png') }}"></a>
+            <a href="https://www.facebook.com/invoiceninja" target="_blank"><img src="{{ asset('images/hex-facebook.png') }}"></a>
+            <a href="https://twitter.com/invoiceninja" target="_blank"><img src="{{ asset('images/hex-twitter.png') }}"></a>
+            <a href="https://www.linkedin.com/company/invoice-ninja" target="_blank"><img src="{{ asset('images/hex-linkedin.png') }}"></a>
+            <a href="https://plus.google.com/104031016152831072143" target="_blank"><img src="{{ asset('images/hex-gplus.png') }}"></a>
           </div>
           <div class="row2">
-                    <a href="https://www.facebook.com/invoiceninja"><img src="{{ asset('images/hex-github.png') }}"></a>
-                    <a href="https://www.facebook.com/invoiceninja"><img src="{{ asset('images/hex-pinterest.png') }}"></a>
-                    <a href="https://www.facebook.com/invoiceninja"><img src="{{ asset('images/hex-rss.png') }}"></a>
-                   
+            <a href="https://github.com/hillelcoren/invoice-ninja" target="_blank"><img src="{{ asset('images/hex-github.png') }}"></a>
+            <a href="https://www.pinterest.com/invoiceninja" target="_blank"><img src="{{ asset('images/hex-pinterest.png') }}"></a>
+            <a href="http://blog.invoiceninja.com/feed/rss2" target="_blank"><img src="{{ asset('images/hex-rss.png') }}"></a>            
           </div>
         </div>
-                <h3><span class="glyphicon glyphicon-envelope"></span>Join Our Free Newsletter</h3>
-                <form id="newsletter">
+        <!--<h3><span class="glyphicon glyphicon-envelope"></span>Join Our Free Newsletter</h3>-->
           <div class="form-group">
+          
+            <!--
+
             <input type="email" class="form-control" id="email" name="email" placeholder="Email Address">
             {{ Button::submit('')->append_with_icon('chevron-right') }}
             <span class="help-block" style="display: none;">Please enter a valid e-mail address.</span>
+            -->
+
+            <!--
+            <form accept-charset="UTF-8" action="https://madmimi.com/signups/subscribe/107799" id="mad_mimi_signup_form" method="post" target="_blank">
+             <div style="margin:0;padding:0;display:inline">
+              <input name="utf8" type="hidden" value="✓"/>
+              <input name="authenticity_token" type="hidden" value="jLAaWeg+Ew4gkbOUnMq+lv/Lt76bPCI/IGAWVitkFJ0="/>
+            </div>
+            <div class="mimi_field required">
+              <input id="signup_email" placeholder="Email" class="form-control" name="signup[email]" type="text" data-required-field="This field is required" placeholder="you@example.com"/>
+              <br/>
+            </div>            
+            <div>
+              <input id="signup_first_name" placeholder="First Name" class="form-control" name="signup[first_name]" type="text" data-required-field="This field is required"/>
+              <br/>
+            </div>
+            <div>
+              <input id="signup_last_name" placeholder="Last Name" class="form-control" name="signup[last_name]" type="text" data-required-field="This field is required"/>
+              <br/>
+            </div>
+            <div>
+              <input type="submit" class="btn-lg btn-block submit" value="Subscribe" id="webform_submit_button" data-default-text="Subscribe" data-submitting-text="Sending…" data-invalid-text="↑ You forgot some required fields" data-choose-list="↑ Choose a list">
+            </input>
+            </div>
+          </form>
+          -->
+
+
+<script type="text/javascript">
+(function() {
+  var form = document.getElementById('mad_mimi_signup_form'),
+      submit = document.getElementById('webform_submit_button'),
+      validEmail = /.+@.+\..+/,
+      isValid;
+      
+  form.onsubmit = function(event) {
+    validate();
+    if(!isValid) {
+      revalidateOnChange();
+      return false;
+    }
+  };
+  
+  function validate() {
+    isValid = true;
+    emailValidation();
+    fieldAndListValidation();
+    updateFormAfterValidation();
+  }
+
+  function emailValidation() {
+    var email = document.getElementById('signup_email');
+    if(!validEmail.test(email.value)) {
+      textFieldError(email);
+      isValid = false;
+    } else {
+      removeTextFieldError(email);
+    }
+  }
+
+  function fieldAndListValidation() {
+    var fields = form.querySelectorAll('.mimi_field.required');
+    for(var i = 0; i < fields.length; ++i) {
+      var field = fields[i],
+          type  = fieldType(field);
+      if(type == 'checkboxes' || type == 'radio_buttons') {
+        checkboxAndRadioValidation(field);
+      } else {
+        textAndDropdownValidation(field, type);
+      }
+    }
+  }
+
+  function fieldType(field) {
+    var type = field.querySelectorAll('.field_type');
+    if(type.length > 0) {
+      return type[0].getAttribute('data-field-type');
+    } else if(field.className.indexOf('checkgroup') >= 0) {
+      return 'checkboxes';
+    } else {
+      return 'text_field';
+    }
+  }
+
+  function checkboxAndRadioValidation(field) {
+    var inputs   = field.getElementsByTagName('input'),
+        selected = false;
+    for(var i = 0; i < inputs.length; ++i) {
+      var input = inputs[i];
+      if((input.type == 'checkbox' || input.type == 'radio') && input.checked) selected = true;
+    }
+    if(selected) {
+      field.className = field.className.replace(/ invalid/g, '');
+    } else {
+      if(field.className.indexOf('invalid') == -1) field.className += ' invalid';
+      isValid = false;
+    }
+  }
+
+  function textAndDropdownValidation(field, type) {
+    var inputs = field.getElementsByTagName('input');
+    for(var i = 0; i < inputs.length; ++i) {
+      var input = inputs[i];
+      if(input.name.indexOf('signup') >= 0) {
+        if(type == 'text_field') {
+          textValidation(input);
+        } else {
+          dropdownValidation(field, input);
+        }
+      }
+    }
+    htmlEmbedDropdownValidation(field);
+  }
+
+  function textValidation(input) {
+    if(input.id == 'signup_email') return;
+    var val = input.value;
+    if(val == '') {
+      textFieldError(input);
+      isValid = false;
+      return;
+    } else {
+      removeTextFieldError(input)
+    }
+  }
+
+  function dropdownValidation(field, input) {
+    var val = input.value;
+    if(val == '') {
+      if(field.className.indexOf('invalid') == -1) field.className += ' invalid';
+      onSelectCallback(input);
+      isValid = false;
+      return;
+    } else {
+      field.className = field.className.replace(/ invalid/g, '');
+    }
+  }
+
+  function htmlEmbedDropdownValidation(field) {
+    var dropdowns = field.querySelectorAll('.mimi_html_dropdown');
+    for(var i = 0; i < dropdowns.length; ++i) {
+      var dropdown = dropdowns[i],
+          val      = dropdown.value;
+      if(val == '') {
+        if(field.className.indexOf('invalid') == -1) field.className += ' invalid';
+        isValid = false;
+        dropdown.onchange = validate;
+        return;
+      } else {
+        field.className = field.className.replace(/ invalid/g, '');
+      }
+    }
+  }
+
+  function textFieldError(input) {
+    input.className   = 'required invalid';
+    input.placeholder = input.getAttribute('data-required-field');
+  }
+
+  function removeTextFieldError(input) {
+    input.className   = 'required';
+    input.placeholder = '';
+  }
+
+  function onSelectCallback(input) {
+    if(typeof Widget != 'undefined' && Widget.BasicDropdown != undefined) {
+      var dropdownEl = input.parentNode,
+          instances  = Widget.BasicDropdown.instances;
+      for(var i = 0; i < instances.length; ++i) {
+        var instance = instances[i];
+        if(instance.wrapperEl == dropdownEl) {
+          instance.onSelect = validate;
+        }
+      }
+    }
+  }
+
+  function updateFormAfterValidation() {
+    form.className   = isValid ? '' : 'mimi_invalid';
+    submit.value     = submitButtonText();
+    submit.disabled  = !isValid;
+    submit.className = isValid ? 'submit' : 'disabled';
+  }
+
+  function submitButtonText() {
+    var invalidFields = document.querySelectorAll('.invalid'),
+        text;
+    if(isValid || invalidFields == undefined) {
+      text = submit.getAttribute('data-default-text');
+    } else {
+      if(invalidFields.length > 1 || invalidFields[0].className.indexOf('checkgroup') == -1) {
+        text = submit.getAttribute('data-invalid-text');
+      } else {
+        text = submit.getAttribute('data-choose-list');
+      }
+    }
+    return text;
+  }
+
+  function revalidateOnChange() {
+    var fields = form.querySelectorAll(".mimi_field.required");
+    for(var i = 0; i < fields.length; ++i) {
+      var inputs = fields[i].getElementsByTagName('input');
+      for(var j = 0; j < inputs.length; ++j) {
+        inputs[j].onchange = validate;
+      }
+    }
+  }
+})();
+</script>
 
           </div>
         </form>

public/built.public.css

@@ -666,7 +666,7 @@ footer.footer .social .row1 {
     margin-bottom: -8px;
 }
 
-footer.footer form#newsletter button {
+footer.footer form#mad_mimi_signup_form button {
     position: absolute;
     right: 0;
     top: 0;
@@ -679,20 +679,20 @@ footer.footer form#newsletter button {
     text-align: center;
     margin-bottom: 30px;
 }
-footer.footer form#newsletter button:hover {
+footer.footer form#mad_mimi_signup_form button:hover {
     background: #7b7a79;
 }
-footer.footer form#newsletter button .glyphicon {
+footer.footer form#mad_mimi_signup_form button .glyphicon {
     position: static;
         color: #fff;
      font-size: 15px;
 width: auto;
     margin: 0;
 }
-footer.footer form#newsletter .form-group {
+footer.footer form#mad_mimi_signup_form .form-group {
     position: relative;  
 }
-footer.footer form#newsletter input {
+footer.footer form#mad_mimi_signup_form input {
     padding: right: 60px;
     background: #393636;
     border: none;

public/css/splash.css

@@ -648,7 +648,7 @@ footer.footer .social .row1 {
     margin-bottom: -8px;
 }
 
-footer.footer form#newsletter button {
+footer.footer form#mad_mimi_signup_form button {
     position: absolute;
     right: 0;
     top: 0;
@@ -661,20 +661,20 @@ footer.footer form#newsletter button {
     text-align: center;
     margin-bottom: 30px;
 }
-footer.footer form#newsletter button:hover {
+footer.footer form#mad_mimi_signup_form button:hover {
     background: #7b7a79;
 }
-footer.footer form#newsletter button .glyphicon {
+footer.footer form#mad_mimi_signup_form button .glyphicon {
     position: static;
         color: #fff;
      font-size: 15px;
 width: auto;
     margin: 0;
 }
-footer.footer form#newsletter .form-group {
+footer.footer form#mad_mimi_signup_form .form-group {
     position: relative;  
 }
-footer.footer form#newsletter input {
+footer.footer form#mad_mimi_signup_form input {
     padding: right: 60px;
     background: #393636;
     border: none;