summaryrefslogtreecommitdiff
path: root/includes/js/dojox/_sql/demos/customers/customers.html
diff options
context:
space:
mode:
Diffstat (limited to 'includes/js/dojox/_sql/demos/customers/customers.html')
-rw-r--r--includes/js/dojox/_sql/demos/customers/customers.html292
1 files changed, 292 insertions, 0 deletions
diff --git a/includes/js/dojox/_sql/demos/customers/customers.html b/includes/js/dojox/_sql/demos/customers/customers.html
new file mode 100644
index 0000000..a4c0c03
--- /dev/null
+++ b/includes/js/dojox/_sql/demos/customers/customers.html
@@ -0,0 +1,292 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+
+<html>
+ <head>
+ <script type="text/javascript"
+ src="../../../../dojo/dojo.js" djConfig="isDebug: false"></script>
+ <script type="text/javascript" src="../../../../dojox/off/offline.js"></script>
+
+ <style type="text/css">
+ body{
+ padding: 2em;
+ }
+
+ #dataTable{
+ margin-top: 2em;
+ }
+
+ button{
+ margin-left: 1em;
+ }
+
+ th, tr, td{
+ text-align: left;
+ }
+
+ table{
+ text-align: center;
+ clear: both;
+ }
+
+ #cryptoContainer{
+ float: left;
+ width: 60%;
+ }
+
+ #numRowsContainer{
+ float: right;
+ width: 40%;
+ }
+
+ #numRowsContainer input{
+ margin-left: 1.5em;
+ width: 5em;
+ }
+
+ .table-columns{
+ font-weight: bold;
+ }
+ </style>
+
+ <script>
+ dojo.require("dojox.sql");
+
+ dojo.connect(window, "onload", function(){
+ // draw our customer table on the screen
+ createTable();
+
+ // create our customer table in the database
+ dojox.sql("DROP TABLE IF EXISTS CUSTOMERS");
+ dojox.sql("CREATE TABLE CUSTOMERS ("
+ + "last_name TEXT, "
+ + "first_name TEXT, "
+ + "social_security TEXT"
+ + ")"
+ );
+ });
+
+ function createTable(){
+ // get number of rows to create
+ var NUM_ROWS = document.getElementById("numRows").value;
+ if(!NUM_ROWS){
+ alert("Please enter the number of "
+ + "customer rows the table should have");
+ return;
+ }
+
+ var table = document.getElementById("dataTable");
+ if(table){
+ table.parentNode.removeChild(table);
+ }
+
+ table = document.createElement("table");
+ table.setAttribute("id", "dataTable");
+ table.setAttribute("border", 1);
+
+ // if we don't use IE's craptacular proprietary table methods
+ // we get strange display glitches
+ var tr = (dojo.isIE) ? table.insertRow() : document.createElement("tr");
+ tr.className = "table-columns";
+ var th = (dojo.isIE) ? tr.insertCell() : document.createElement("th");
+ th.appendChild(document.createTextNode("Last Name"));
+ if(!dojo.isIE){
+ tr.appendChild(th);
+ }
+ th = (dojo.isIE) ? tr.insertCell() : document.createElement("th");
+ th.appendChild(document.createTextNode("First Name"));
+ if(!dojo.isIE){
+ tr.appendChild(th);
+ }
+ th = (dojo.isIE) ? tr.insertCell() : document.createElement("th");
+ th.appendChild(document.createTextNode("Social Security"));
+ if(!dojo.isIE){
+ tr.appendChild(th);
+
+ table.appendChild(tr);
+ }
+
+ for(var i = 1; i <= NUM_ROWS; i++){
+ tr = (dojo.isIE) ? table.insertRow() : document.createElement("tr");
+ tr.className = "data-item";
+
+ var elem = (dojo.isIE) ? tr.insertCell() : document.createElement("td");
+ elem.className = "last-name";
+ var lastName = "Doe" + i;
+ elem.appendChild(document.createTextNode(lastName));
+ if(!dojo.isIE){
+ tr.appendChild(elem);
+ }
+
+ elem = (dojo.isIE) ? tr.insertCell() : document.createElement("td");
+ elem.className = "first-name";
+ var firstName = "John" + i;
+ elem.appendChild(document.createTextNode(firstName));
+ if(!dojo.isIE){
+ tr.appendChild(elem);
+ }
+
+ elem = elem = (dojo.isIE) ? tr.insertCell() : document.createElement("td");
+ elem.className = "social-security";
+ var ss = 513121500 + i;
+ ss = new String(ss);
+ ss = ss.slice(0, 3) + "-" + ss.slice(3, 5) + "-" + ss.slice(5);
+ elem.appendChild(document.createTextNode(ss));
+ if(!dojo.isIE){
+ tr.appendChild(elem);
+
+ table.appendChild(tr);
+ }
+ }
+
+ document.body.appendChild(table);
+
+ // reset button state
+ dojo.byId("encrypt").disabled = false;
+ dojo.byId("decrypt").disabled = true;
+ }
+
+ function readTable(){
+ var data = [];
+ var rows = dojo.query(".data-item");
+ dojo.forEach(rows, function(row){
+ var td = row.getElementsByTagName("td");
+
+ var lastName = td[0].childNodes[0].nodeValue;
+ var firstName = td[1].childNodes[0].nodeValue;
+ var ssNumber = td[2].childNodes[0].nodeValue;
+
+ data.push({lastName: lastName, firstName: firstName, ssNumber: ssNumber,
+ toString: function(){
+ return "{lastName: " + lastName
+ + ", firstName: " + firstName
+ + ", ssNumber: " + ssNumber
+ + "}";
+ }});
+ });
+
+ return data;
+ }
+
+ function setData(data){
+ var rows = document.getElementsByTagName("tr");
+ for(var i = 1; i < rows.length; i++){
+ var customer = data[i - 1];
+ var td = rows[i].getElementsByTagName("td");
+ td[2].childNodes[0].nodeValue = customer.social_security;
+ }
+ }
+
+ function encrypt(){
+ // disable our buttons
+ dojo.byId("encrypt").disabled = true;
+ dojo.byId("decrypt").disabled = true;
+
+ var data = readTable();
+
+ var password = document.getElementById("password").value;
+
+ // delete any old data
+ dojox.sql("DELETE FROM CUSTOMERS");
+
+ // insert new data
+ insertCustomers(data, 0, password);
+ }
+
+ function insertCustomers(data, i, password){
+ var nextIndex = i + 1;
+
+ if(i >= data.length){
+ var savedRows = dojox.sql("SELECT * FROM CUSTOMERS");
+ setData(savedRows);
+ return;
+ }
+ dojox.sql("INSERT INTO CUSTOMERS VALUES (?, ?, ENCRYPT(?))",
+ data[i].lastName, data[i].firstName,
+ data[i].ssNumber,
+ password,
+ function(results, error, errorMsg){
+ // enable our buttons
+ dojo.byId("encrypt").disabled = true;
+ dojo.byId("decrypt").disabled = false;
+
+ if(error == true){
+ alert(errorMsg);
+ return;
+ }
+
+ insertCustomers(data, nextIndex, password);
+ }
+ );
+ }
+
+ function decrypt(){
+ // disable our buttons
+ dojo.byId("encrypt").disabled = true;
+ dojo.byId("decrypt").disabled = true;
+
+ var password = document.getElementById("password").value;
+
+ dojox.sql("SELECT last_name, first_name, DECRYPT(social_security) FROM CUSTOMERS",
+ password,
+ function(results, error, errorMsg){
+ // enable our buttons
+ dojo.byId("encrypt").disabled = false;
+ dojo.byId("decrypt").disabled = true;
+
+ if(error == true){
+ alert(errorMsg);
+ return;
+ }
+
+ setData(results);
+ }
+ );
+ }
+ </script>
+ </head>
+
+ <body>
+ <h1>Dojo SQL Cryptography</h1>
+
+ <h2>Instructions</h2>
+
+ <p>This demo shows Dojo Offline's SQL encryption technologies. In the table below, we have a
+ sample SQL table that has three columns of data: a last name, a first name, and
+ a social security number. We don't want to store the social security numbers
+ in the clear, just in case they are downloaded for offline use to a laptop and the
+ laptop is stolen.</p>
+
+ <p>To use this demo, enter a password and press the ENCRYPT button to see the Social Security column encrypt. Enter
+ the same password and press DECRYPT to see it decrypt. If you enter an incorrect password and
+ press DECRYPT, the Social Security column will remain encrypted and only show gibberish.</p>
+
+ <p>Under the covers we use 256-bit AES encryption and your password to derive the crypto key; we use
+ a facility in Google Gears to do the cryptography in such a way that the browser does not lock up
+ during processing. Dojo Offline ties this cryptography into Dojo SQL, providing convenient ENCRYPT()
+ and DECRYPT() SQL keywords you can use to easily have this functionality in your
+ own offline applications. To learn how you can use this feature
+ <a href="http://docs.google.com/View?docid=dhkhksk4_8gdp9gr#crypto" target="_blank">see here</a>.</p>
+
+ <div id="cryptoContainer">
+ <label for="password">
+ Password:
+ </label>
+
+ <input type="input" name="password" id="password" value="sample_password">
+
+ <button id="encrypt" onclick="window.setTimeout(encrypt, 1)">Encrypt</button>
+
+ <button id="decrypt" onclick="window.setTimeout(decrypt, 1)" disabled="true">Decrypt</button>
+ </div>
+
+ <div id="numRowsContainer">
+ <label for="numRows">
+ Number of Customer Rows in Table:
+ </label>
+
+ <input id="numRows" type="input" value="30">
+
+ <button onclick="createTable()">Update</button>
+ </div>
+ </body>
+</html> \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-08 15:23:20 +0000