Updated
This commit is contained in:
Éric Lemoine
292
master/examples/customers.html
Normal file
292
master/examples/customers.html
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user