aboutsummaryrefslogtreecommitdiff
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, 0 insertions, 292 deletions
diff --git a/includes/js/dojox/_sql/demos/customers/customers.html b/includes/js/dojox/_sql/demos/customers/customers.html
deleted file mode 100644
index a4c0c03..0000000
--- a/includes/js/dojox/_sql/demos/customers/customers.html
+++ /dev/null
@@ -1,292 +0,0 @@
-<!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