Icontem

File: example.html

Recommend this page to a friend!
  Classes of Jason Gerfen  >  jQuery.pidCrypt  >  example.html  >  Download  
File: example.html
Role: Example script
Content type: text/plain
Description: Sample output
Class: jQuery.pidCrypt
Encrypt form values using RSA and AES
Author: By
Last change: Fri Jun 1 08:36:57 MDT 2012 - Added screenshot
Date: 7 years ago
Size: 4,556 bytes
 

Contents

Class file image Download
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>jQuery.pidCrypt plugin demo</title>

 <!-- this stylesheet was ripped from an article on net tuts -->
 <link rel="stylesheet" href="libs/css/style.css" type="text/css" media="screen" />

 <!-- load jQuery -->
 <script src="http://code.jquery.com/jquery.min.js"></script>

 <!-- pidCrypt RSA libraries (minified versions) -->
 <script src="libs/js/pidCrypt/javascripts/compressed/pidcrypt_c.js"></script>
 <script src="libs/js/pidCrypt/javascripts/compressed/pidcrypt_util_c.js"></script>
 <script src="libs/js/pidCrypt/javascripts/compressed/md5_c.js"></script>
 <script src="libs/js/pidCrypt/javascripts/compressed/sha512_c.js"></script>
 <script src="libs/js/pidCrypt/javascripts/compressed/asn1_c.js"></script>
 <script src="libs/js/pidCrypt/javascripts/compressed/jsbn_c.js"></script>
 <script src="libs/js/pidCrypt/javascripts/compressed/rng_c.js"></script>
 <script src="libs/js/pidCrypt/javascripts/compressed/prng4_c.js"></script>
 <script src="libs/js/pidCrypt/javascripts/compressed/rsa_c.js"></script>

 <!-- pidCrypt AES-CBC libraries (minified versions) -->
 <script src="libs/js/pidCrypt/javascripts/compressed/aes_core_c.js"></script>
 <script src="libs/js/pidCrypt/javascripts/compressed/aes_cbc_c.js"></script>

 <!-- jQuery.pidCrypt plugin library -->
 <script src="libs/js/jquery.pidCrypt.min.js"></script>
</head>
<body>
 <div style="width:70%; word-wrap:break-word">
  <h2><strong>jQuery pidCrypt plugin demo's</strong></h2>
  <p style="text-align:center">
   <blockquote>
    Uses the <a href="https://www.pidder.com/pidcrypt/" target="_blank">
    pidCrypt encryption</a> libraries along with the
    <a href="http://php.net/manual/en/book.openssl.php" target="_blank">
     PHP OpenSSL</a> functionality to encrypt form data, sign emails and
     encrypt and sign emails using RSA encryption.
   </blockquote>
  </p>

  <!-- example using default method -->
  <script>
   var $j = jQuery.noConflict();
   $j(document).ready(function() {
    function _details(data) {
     if (typeof data=='object') {
      //data = JSON.parse(data);
      $j('#message').html('<p><b>Server response...</b></p><p><i>(decrypted data is used in this as a demo only!)</i>. Please use implementation guide associated with this project.</p>');
      $j.each(data, function(k, v){
       if (typeof v=='object') {
        $j('#message').append('<b>'+k+'</b>:<br/>');
        $j.each(v, function(x, y){
         $j('#message').append('<b>'+x+'</b>: '+y+'<br/>');
        });
       } else {
        $j('#message').append('<b>'+k+'</b>: '+v+'<br/>');
       }
      });
     }
    }
    $j('#cc').pidCrypt({callback: function(){ _details(this); }});
   });
  </script>
  <div id="contact-form" class="clearfix">
   <h3>Public key encryption example</h3>
   <div id="message"></div>
   <form id="cc" name="cc" style="cc" method="post" action="tests/default.php">
    <label for="name">Name: <span class="required">*</span></label>
     <input type="text" id="name" name="name" value="" placeholder="John Doe" required="required" />
    <label for="email">Email Address: <span class="required">*</span></label>
     <input type="email" id="email" name="email" value="" placeholder="johndoe@example.com" required="required" />
    <label for="type">Visa: </label>
     <input name="type" id="type" value="visa" type="radio" class="data" checked="checked" required="required" />
    <label for="type">Mastercard: </label>
     <input name="type" id="type" value="mastercard" type="radio" class="data" required="required" />
    <label for="type">American Express: </label>
     <input name="type" id="type" value="americanexpress" type="radio" class="data" required="required" />
    <label for="card-number">Card number: <span class="required">*</span></label>
     <input type="text" name="card-number" id="card-number" value="" placeholder="1234567890" required="required" />
    <label for="message">Message: <span class="required">*</span></label>
     <textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>
    <span id="loading"></span>
     <input type="submit" value="Encrypt &amp; Send" id="submit-button" />
     <p id="req-field-desc"></p>
   </form>
  </div>

</body>
</html>