git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/_sql/demos/customers/customers.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   2
   3 <html>
   4         <head>
   5             <script type="text/javascript"
   6                     src="../../../../dojo/dojo.js" djConfig="isDebug: false"></script>
   7                 <script type="text/javascript" src="../../../../dojox/off/offline.js"></script>
   8
   9                 <style type="text/css">
  10                         body{
  11                                 padding: 2em;
  12                         }
  13
  14                         #dataTable{
  15                                 margin-top: 2em;
  16                         }
  17
  18                         button{
  19                                 margin-left: 1em;
  20                         }
  21
  22                         th, tr, td{
  23                                 text-align: left;
  24                         }
  25
  26                         table{
  27                                 text-align: center;
  28                                 clear: both;
  29                         }
  30
  31                         #cryptoContainer{
  32                                 float: left;
  33                                 width: 60%;
  34                         }
  35
  36                         #numRowsContainer{
  37                                 float: right;
  38                                 width: 40%;
  39                         }
  40
  41                         #numRowsContainer input{
  42                                 margin-left: 1.5em;
  43                                 width: 5em;
  44                         }
  45
  46                         .table-columns{
  47                                 font-weight: bold;
  48                         }
  49                 </style>
  50
  51                 <script>
  52                         dojo.require("dojox.sql");
  53
  54                         dojo.connect(window, "onload", function(){
  55                                 // draw our customer table on the screen
  56                                 createTable();
  57
  58                                 // create our customer table in the database
  59                                 dojox.sql("DROP TABLE IF EXISTS CUSTOMERS");
  60                                 dojox.sql("CREATE TABLE CUSTOMERS ("
  61                                                                 + "last_name TEXT, "
  62                                                                 + "first_name TEXT, "
  63                                                                 + "social_security TEXT"
  64                                                                 + ")"
  65                                                         );
  66                         });
  67
  68                         function createTable(){
  69                                 // get number of rows to create
  70                                 var NUM_ROWS = document.getElementById("numRows").value;
  71                                 if(!NUM_ROWS){
  72                                         alert("Please enter the number of "
  73                                                         + "customer rows the table should have");
  74                                         return;
  75                                 }
  76
  77                                 var table = document.getElementById("dataTable");
  78                                 if(table){
  79                                         table.parentNode.removeChild(table);
  80                                 }
  81
  82                                 table = document.createElement("table");
  83                                 table.setAttribute("id", "dataTable");
  84                                 table.setAttribute("border", 1);
  85
  86                                 // if we don't use IE's craptacular proprietary table methods
  87                                 // we get strange display glitches
  88                                 var tr = (dojo.isIE) ? table.insertRow() : document.createElement("tr");
  89                                 tr.className = "table-columns";
  90                                 var th = (dojo.isIE) ? tr.insertCell() : document.createElement("th");
  91                                 th.appendChild(document.createTextNode("Last Name"));
  92                                 if(!dojo.isIE){
  93                                         tr.appendChild(th);
  94                                 }
  95                                 th = (dojo.isIE) ? tr.insertCell() : document.createElement("th");
  96                                 th.appendChild(document.createTextNode("First Name"));
  97                                 if(!dojo.isIE){
  98                                         tr.appendChild(th);
  99                                 }
 100                                 th = (dojo.isIE) ? tr.insertCell() : document.createElement("th");
 101                                 th.appendChild(document.createTextNode("Social Security"));
 102                                 if(!dojo.isIE){
 103                                         tr.appendChild(th);
 104
 105                                         table.appendChild(tr);
 106                                 }
 107
 108                                 for(var i = 1; i <= NUM_ROWS; i++){
 109                                         tr = (dojo.isIE) ? table.insertRow() : document.createElement("tr");
 110                                         tr.className = "data-item";
 111
 112                                         var elem = (dojo.isIE) ? tr.insertCell() : document.createElement("td");
 113                                         elem.className = "last-name";
 114                                         var lastName = "Doe" + i;
 115                                         elem.appendChild(document.createTextNode(lastName));
 116                                         if(!dojo.isIE){
 117                                                 tr.appendChild(elem);
 118                                         }
 119
 120                                         elem = (dojo.isIE) ? tr.insertCell() : document.createElement("td");
 121                                         elem.className = "first-name";
 122                                         var firstName = "John" + i;
 123                                         elem.appendChild(document.createTextNode(firstName));
 124                                         if(!dojo.isIE){
 125                                                 tr.appendChild(elem);
 126                                         }
 127
 128                                         elem = elem = (dojo.isIE) ? tr.insertCell() : document.createElement("td");
 129                                         elem.className = "social-security";
 130                                         var ss = 513121500 + i;
 131                                         ss = new String(ss);
 132                                         ss = ss.slice(0, 3) + "-" + ss.slice(3, 5) + "-" + ss.slice(5);
 133                                         elem.appendChild(document.createTextNode(ss));
 134                                         if(!dojo.isIE){
 135                                                 tr.appendChild(elem);
 136
 137                                                 table.appendChild(tr);
 138                                         }
 139                                 }
 140
 141                                 document.body.appendChild(table);
 142
 143                                 // reset button state
 144                                 dojo.byId("encrypt").disabled = false;
 145                                 dojo.byId("decrypt").disabled = true;
 146                         }
 147
 148                         function readTable(){
 149                                 var data = [];
 150                                 var rows = dojo.query(".data-item");
 151                                 dojo.forEach(rows, function(row){
 152                                         var td = row.getElementsByTagName("td");
 153
 154                                         var lastName = td[0].childNodes[0].nodeValue;
 155                                         var firstName = td[1].childNodes[0].nodeValue;
 156                                         var ssNumber = td[2].childNodes[0].nodeValue;
 157
 158                                         data.push({lastName: lastName, firstName: firstName, ssNumber: ssNumber,
 159                                                                 toString: function(){
 160                                                                         return "{lastName: " + lastName
 161                                                                                                 + ", firstName: " + firstName
 162                                                                                                 + ", ssNumber: " + ssNumber
 163                                                                                                 + "}";
 164                                                                 }});
 165                                 });
 166
 167                                 return data;
 168                         }
 169
 170                         function setData(data){
 171                                 var rows = document.getElementsByTagName("tr");
 172                                 for(var i = 1; i < rows.length; i++){
 173                                         var customer = data[i - 1];
 174                                         var td = rows[i].getElementsByTagName("td");
 175                                         td[2].childNodes[0].nodeValue = customer.social_security;
 176                                 }
 177                         }
 178
 179                         function encrypt(){
 180                                 // disable our buttons
 181                                 dojo.byId("encrypt").disabled = true;
 182                                 dojo.byId("decrypt").disabled = true;
 183
 184                                 var data = readTable();
 185
 186                                 var password = document.getElementById("password").value;
 187
 188                                 // delete any old data
 189                                 dojox.sql("DELETE FROM CUSTOMERS");
 190
 191                                 // insert new data
 192                                 insertCustomers(data, 0, password);
 193                         }
 194
 195                         function insertCustomers(data, i, password){
 196                                 var nextIndex = i + 1;
 197
 198                                 if(i >= data.length){
 199                                         var savedRows = dojox.sql("SELECT * FROM CUSTOMERS");
 200                                         setData(savedRows);
 201                                         return;
 202                                 }
 203                                 dojox.sql("INSERT INTO CUSTOMERS VALUES (?, ?, ENCRYPT(?))",
 204                                                         data[i].lastName, data[i].firstName,
 205                                                         data[i].ssNumber,
 206                                                         password,
 207                                                         function(results, error, errorMsg){
 208                                                                 // enable our buttons
 209                                                                 dojo.byId("encrypt").disabled = true;
 210                                                                 dojo.byId("decrypt").disabled = false;
 211
 212                                                                 if(error == true){
 213                                                                         alert(errorMsg);
 214                                                                         return;
 215                                                                 }
 216
 217                                                                 insertCustomers(data, nextIndex, password);
 218                                                         }
 219                                                 );
 220                         }
 221
 222                         function decrypt(){
 223                                 // disable our buttons
 224                                 dojo.byId("encrypt").disabled = true;
 225                                 dojo.byId("decrypt").disabled = true;
 226
 227                                 var password = document.getElementById("password").value;
 228
 229                                 dojox.sql("SELECT last_name, first_name, DECRYPT(social_security) FROM CUSTOMERS",
 230                                                         password,
 231                                                         function(results, error, errorMsg){
 232                                                                 // enable our buttons
 233                                                                 dojo.byId("encrypt").disabled = false;
 234                                                                 dojo.byId("decrypt").disabled = true;
 235
 236                                                                 if(error == true){
 237                                                                         alert(errorMsg);
 238                                                                         return;
 239                                                                 }
 240
 241                                                                 setData(results);
 242                                                         }
 243                                                 );
 244                         }
 245                 </script>
 246         </head>
 247
 248         <body>
 249                 <h1>Dojo SQL Cryptography</h1>
 250
 251                 <h2>Instructions</h2>
 252
 253                 <p>This demo shows Dojo Offline's SQL encryption technologies. In the table below, we have a
 254                         sample SQL table that has three columns of data: a last name, a first name, and
 255                         a social security number. We don't want to store the social security numbers
 256                         in the clear, just in case they are downloaded for offline use to a laptop and the
 257                         laptop is stolen.</p>
 258
 259                 <p>To use this demo, enter a password and press the ENCRYPT button to see the Social Security column encrypt. Enter
 260                         the same password and press DECRYPT to see it decrypt. If you enter an incorrect password and
 261                         press DECRYPT, the Social Security column will remain encrypted and only show gibberish.</p>
 262
 263                 <p>Under the covers we use 256-bit AES encryption and your password to derive the crypto key; we use
 264                         a facility in Google Gears to do the cryptography in such a way that the browser does not lock up
 265                         during processing. Dojo Offline ties this cryptography into Dojo SQL, providing convenient ENCRYPT()
 266                         and DECRYPT() SQL keywords you can use to easily have this functionality in your
 267                         own offline applications. To learn how you can use this feature
 268                         <a href="http://docs.google.com/View?docid=dhkhksk4_8gdp9gr#crypto" target="_blank">see here</a>.</p>
 269
 270                 <div id="cryptoContainer">
 271                         <label for="password">
 272                                 Password:
 273                         </label>
 274
 275                         <input type="input" name="password" id="password" value="sample_password">
 276
 277                         <button id="encrypt" onclick="window.setTimeout(encrypt, 1)">Encrypt</button>
 278
 279                         <button id="decrypt" onclick="window.setTimeout(decrypt, 1)" disabled="true">Decrypt</button>
 280                 </div>
 281
 282                 <div id="numRowsContainer">
 283                         <label for="numRows">
 284                                 Number of Customer Rows in Table:
 285                         </label>
 286
 287                         <input id="numRows" type="input" value="30">
 288
 289                         <button onclick="createTable()">Update</button>
 290                 </div>
 291         </body>
 292 </html>