aboutsummaryrefslogtreecommitdiff
path: root/javascript/demo
diff options
context:
space:
mode:
authordec05eba <dec05eba@protonmail.com>2020-11-05 01:45:06 +0100
committerdec05eba <dec05eba@protonmail.com>2020-11-05 01:45:06 +0100
commit2a8202e74846d191a321cca1202175af9db6107d (patch)
treea6f455caf07da1186851f343a237a4c4e4484f46 /javascript/demo
parent8efa0ec17d8c262f9c3fd7603e8074f74a053708 (diff)
Convert to sibs projectHEADmaster
Diffstat (limited to 'javascript/demo')
-rw-r--r--javascript/demo/demo.css8
-rw-r--r--javascript/demo/group_demo.html112
-rw-r--r--javascript/demo/group_demo.js506
-rw-r--r--javascript/demo/one_to_one_demo.html147
4 files changed, 0 insertions, 773 deletions
diff --git a/javascript/demo/demo.css b/javascript/demo/demo.css
deleted file mode 100644
index bf07df1..0000000
--- a/javascript/demo/demo.css
+++ /dev/null
@@ -1,8 +0,0 @@
-div.user {
- width: 500px;
- float: left;
- overflow: scroll;
- margin: 0px 20px 0px 0px;
- border: 1px solid black;
- padding: 5px;
-} \ No newline at end of file
diff --git a/javascript/demo/group_demo.html b/javascript/demo/group_demo.html
deleted file mode 100644
index d93a7cd..0000000
--- a/javascript/demo/group_demo.html
+++ /dev/null
@@ -1,112 +0,0 @@
-<html>
- <head>
- <link rel="stylesheet" type="text/css" href="demo.css"/>
- <script src="../olm.js"></script>
- <script src="group_demo.js"></script>
- </head>
-<body>
-<div id="user1" class="user">
- <h1>User1</h1>
-
- <textarea class="user_plain_input"></textarea>
- <button class="user_encrypt">Encrypt</button>
-
- <h2>Outgoing</h2>
-
- <h3>One-to-one output</h3>
- <div class="user_cipher_output"></div>
-
- <h3>Group output</h3>
- <div class="group_output"></div>
-
- <h2>Incoming</h2>
-
- <h3>One-to-one Received</h3>
- <div class="user_cipher_input"></div>
-
- <h3>Group received</h3>
- <div class="group_input"></div>
-
- <h2>Tasks</h2>
- <div class="user_progress"></div>
-</div>
-
-<div id="user2" class="user">
- <h1>User 2</h1>
-
- <textarea class="user_plain_input"></textarea>
- <button class="user_encrypt">Encrypt</button>
-
- <h2>Outgoing</h2>
-
- <h3>One-to-one output</h3>
- <div class="user_cipher_output"></div>
-
- <h3>Group output</h3>
- <div class="group_output"></div>
-
- <h2>Incoming</h2>
-
- <h3>One-to-one Received</h3>
- <div class="user_cipher_input"></div>
-
- <h3>Group received</h3>
- <div class="group_input"></div>
-
- <h2>Tasks</h2>
- <div class="user_progress"></div>
-</div>
-
-<div id="user3" class="user">
- <h1>User 3</h1>
-
- <textarea class="user_plain_input"></textarea>
- <button class="user_encrypt">Encrypt</button>
-
- <h2>Outgoing</h2>
-
- <h3>One-to-one output</h3>
- <div class="user_cipher_output"></div>
-
- <h3>Group output</h3>
- <div class="group_output"></div>
-
- <h2>Incoming</h2>
-
- <h3>One-to-one Received</h3>
- <div class="user_cipher_input"></div>
-
- <h3>Group received</h3>
- <div class="group_input"></div>
-
- <h2>Tasks</h2>
- <div class="user_progress"></div>
-</div>
-
-<div id="user4" class="user">
- <h1>User 4</h1>
-
- <textarea class="user_plain_input"></textarea>
- <button class="user_encrypt">Encrypt</button>
-
- <h2>Outgoing</h2>
-
- <h3>One-to-one output</h3>
- <div class="user_cipher_output"></div>
-
- <h3>Group output</h3>
- <div class="group_output"></div>
-
- <h2>Incoming</h2>
-
- <h3>One-to-one Received</h3>
- <div class="user_cipher_input"></div>
-
- <h3>Group received</h3>
- <div class="group_input"></div>
-
- <h2>Tasks</h2>
- <div class="user_progress"></div>
-</div>
-</body>
-</html>
diff --git a/javascript/demo/group_demo.js b/javascript/demo/group_demo.js
deleted file mode 100644
index 44b8166..0000000
--- a/javascript/demo/group_demo.js
+++ /dev/null
@@ -1,506 +0,0 @@
-/* Javascript parts of the group demo. To use, load group_demo.html in your
- * browser.
- */
-
-function buttonElement(buttonLabel, clickHandler) {
- var button = document.createElement("button");
- button.appendChild(document.createTextNode(buttonLabel));
- button.addEventListener("click", clickHandler, false);
- return button;
-}
-
-function buttonsAndText(textContent, buttonLabelToHandlerMap) {
- var el = document.createElement("div");
- for (var label in buttonLabelToHandlerMap) {
- if (!buttonLabelToHandlerMap.hasOwnProperty(label)) {
- continue;
- }
- var handler = buttonLabelToHandlerMap[label];
- var button = buttonElement(label, handler);
- el.appendChild(button);
- }
-
- var message_element = document.createElement("tt");
- el.appendChild(message_element);
-
- var content = document.createTextNode(textContent);
- message_element.appendChild(content);
-
- return el;
-}
-
-function buttonAndTextElement(buttonLabel, textContent, clickHandler) {
- var buttonMap = {};
- buttonMap[buttonLabel] = clickHandler;
- return buttonsAndText(textContent, buttonMap);
-}
-
-function DemoUser(name) {
- this.name = name;
- this.olmAccount = new Olm.Account();
- this.olmAccount.create();
-
- this.idKey = this.getIdKeys()["curve25519"];
-
- /* the people in our chat, indexed by their Curve25519 identity key.
- */
- this.peers = {};
-
- /* the Ed25519 signing key for each peer, indexed by their Curve25519 id key
- */
- this.peerSigningKeys = {};
-
- /* for each peer, a one-to-one session - indexed by id key and created on
- * demand */
- this.peerSessions = {};
-
- /* for each peer, info on their sender session - indexed by id key and
- * session id */
- this.peerGroupSessions = {};
-
- /* our outbound group session */
- this.groupSession = undefined;
-
- /* a list of pending tasks */
- this.tasks = [];
- this.taskWorker = undefined;
-
- /* the operations our peers are allowed to do on us */
- var publicOps = [
- "getIdKeys", "getOneTimeKey",
- "receiveOneToOne", "receiveGroup",
- ];
-
- this.remoteOps = {};
- for (var i=0; i<publicOps.length; i++) {
- var op = publicOps[i];
- this.remoteOps[op] = this[op].bind(this);
- }
-}
-
-DemoUser.prototype._progress = function(message) {
- var progress = this.progressElement;
-
- var message_element = document.createElement("pre");
- var start_content = document.createTextNode(message + "...");
- function start() {
- message_element.appendChild(start_content);
- progress.appendChild(message_element);
- }
- function done(res) {
- var done_content = document.createTextNode(message + "..." + res);
- message_element.replaceChild(done_content, start_content);
- }
- return {start:start, done:done};
-};
-
-DemoUser.prototype._do_tasks = function() {
- var self = this;
- var task = self.tasks.shift();
- var desc = task[0];
- var func = task[1];
- var callback = task[2];
-
- var p = self._progress(desc);
- p.start();
-
- function done() {
- p.done("Done");
-
- if (callback) {
- try {
- callback.apply(undefined, arguments)
- } catch (e) {
- console.error("Uncaught exception in callback", e.stack || e);
- }
- }
-
- start_tasks();
- }
-
- // sleep 50ms before actually doing the task
- self.taskWorker = window.setTimeout(function() {
- try {
- task[1](done);
- } catch (e) {
- console.error("Uncaught exception in task", e.stack || e);
- p.done("Failed: "+e);
- start_tasks();
- }
- }, 50);
-
-
- function start_tasks() {
- if (self.tasks.length == 0) {
- self.taskWorker = undefined;
- return;
- }
-
- self.taskWorker = window.setTimeout(self._do_tasks.bind(self), 50);
- }
-}
-
-/**
- * add a function "task" to this user's queue of things to do.
- *
- * task is called with a single argument 'done' which is a function to call
- * once the task is complete.
- *
- * 'callback' is called once the task is complete, with any arguments that
- * were passed to 'done'.
- */
-DemoUser.prototype.addTask = function(description, task, callback) {
- this.tasks.push([description, task, callback]);
- if(!this.taskWorker) {
- this._do_tasks();
- }
-};
-
-DemoUser.prototype.addPeer = function(peerOps) {
- var keys = peerOps.getIdKeys();
- var id = keys["curve25519"];
- this.peers[id] = peerOps;
- this.peerSigningKeys[id] = keys["ed25519"];
-};
-
-DemoUser.prototype.getIdKeys = function() {
- return JSON.parse(this.olmAccount.identity_keys());
-};
-
-DemoUser.prototype.getOneTimeKey = function() {
- var self = this;
- self.olmAccount.generate_one_time_keys(1);
- var keys = JSON.parse(self.olmAccount.one_time_keys()).curve25519;
- for (key_id in keys) {
- if (keys.hasOwnProperty(key_id)) {
- self.olmAccount.mark_keys_as_published();
- return keys[key_id];
- }
- }
- throw new Error("No one-time-keys generated");
-};
-
-/* ************************************************************************
- *
- * one-to-one messaging
- */
-
-/**
- * retrieve, or initiate, a one-to-one session to a given peer
- */
-DemoUser.prototype.getPeerSession = function(peerId, callback) {
- var self = this;
-
- if (this.peerSessions[peerId]) {
- callback(this.peerSessions[peerId]);
- return;
- }
-
- var peer = this.peers[peerId];
- this.addTask("get peer keys", function(done) {
- key = peer.getOneTimeKey();
- done(key);
- }, function(ot_key) {
- self.addTask("create peer session", function(done) {
- var session = new Olm.Session();
- session.create_outbound(self.olmAccount, peerId, ot_key);
- self.peerSessions[peerId] = session;
- done(session);
- }, callback);
- });
-};
-
-/**
- * encrypt a one-to-one message and prepare it for sending to a peer
- */
-DemoUser.prototype.sendToPeer = function(peerId, message, callback) {
- var self = this;
- this.getPeerSession(peerId, function(session) {
- self.addTask("encrypt one-to-one message", function(done) {
- var encrypted = session.encrypt(message);
- var packet = {
- sender_key: self.idKey,
- ciphertext: encrypted,
- };
- var json = JSON.stringify(packet);
-
- var el = buttonAndTextElement("send", json, function(ev) {
- self.peers[peerId].receiveOneToOne(json);
- });
- self.cipherOutputDiv.appendChild(el);
- done();
- }, callback);
- });
-};
-
-/**
- * handler for receiving a one-to-one message
- */
-DemoUser.prototype.receiveOneToOne = function(jsonpacket) {
- var self = this;
- var el = buttonAndTextElement("decrypt", jsonpacket, function(ev) {
- var sender = JSON.parse(jsonpacket).sender_key;
- self.decryptOneToOne(jsonpacket, function(result) {
-
- var el2 = document.createElement("tt");
- el.appendChild(el2);
-
- var content = document.createTextNode(" -> "+result);
- el2.appendChild(content);
-
- var body = JSON.parse(result);
-
- // create a new inbound session if we don't yet have one
- if (!self.peerGroupSessions[sender] ||
- !self.peerGroupSessions[sender][body.session_id]) {
- self.createInboundSession(
- sender, body.session_id, body.session_key
- );
- }
- });
- });
- this.cipherInputDiv.appendChild(el);
-};
-
-/**
- * add a task to decrypt a one-to-one message. Calls the callback with the
- * decrypted plaintext
- */
-DemoUser.prototype.decryptOneToOne = function(jsonpacket, callback) {
- var self = this;
- self.addTask("decrypt one-to-one message", function(done) {
- var packet = JSON.parse(jsonpacket);
- var peerId = packet.sender_key;
-
- var session = self.peerSessions[peerId];
- var plaintext;
- if (session) {
- plaintext = session.decrypt(packet.ciphertext.type, packet.ciphertext.body);
- done(plaintext);
- return;
- }
-
- if (packet.ciphertext.type != 0) {
- throw new Error("Unknown one-to-one session");
- }
-
- session = new Olm.Session();
- session.create_inbound(self.olmAccount, packet.ciphertext.body);
- self.peerSessions[peerId] = session;
- plaintext = session.decrypt(packet.ciphertext.type, packet.ciphertext.body);
- done(plaintext);
- }, callback)
-};
-
-/* ************************************************************************
- *
- * group messaging
- */
-
-
-/**
- * retrieve, or initiate, an outbound group session
- */
-DemoUser.prototype.getGroupSession = function() {
- if (this.groupSession) {
- return this.groupSession;
- }
-
- this.groupSession = new Olm.OutboundGroupSession();
- this.groupSession.create();
-
- var keymsg = {
- "session_id": this.groupSession.session_id(),
- "session_key": this.groupSession.session_key(),
- "message_index": this.groupSession.message_index(),
- };
- var jsonmsg = JSON.stringify(keymsg);
-
- for (var peer in this.peers) {
- if (!this.peers.hasOwnProperty(peer)) {
- continue;
- }
- this.sendToPeer(peer, jsonmsg);
- }
-
- return this.groupSession;
-};
-
-/**
- * add a task to create an inbound group session
- */
-DemoUser.prototype.createInboundSession = function(
- peer_id, session_id, session_key, callback
-) {
- var self = this;
- this.addTask("init inbound session", function(done) {
- session = new Olm.InboundGroupSession();
- session.create(session_key);
- if (!self.peerGroupSessions[peer_id]) {
- self.peerGroupSessions[peer_id] = {};
- }
- if (session_id != session.session_id()) {
- throw new Error("Mismatched session_ids");
- }
- self.peerGroupSessions[peer_id][session_id] = session;
- done(session);
- }, callback);
-};
-
-/**
- * handler for receiving a group message
- */
-DemoUser.prototype.receiveGroup = function(jsonpacket) {
- var self = this;
- var el = buttonAndTextElement("decrypt", jsonpacket, function(ev) {
- self.decryptGroup(jsonpacket, function(result) {
- var el2 = document.createElement("tt");
- el.appendChild(el2);
-
- var content = document.createTextNode(" -> "+result);
- el2.appendChild(content);
- });
- });
- this.groupInputDiv.appendChild(el);
-};
-
-/**
- * add a task to decrypt a received group message. Calls the callback with the
- * decrypted plaintext
- */
-DemoUser.prototype.decryptGroup = function(jsonpacket, callback) {
- var self = this;
- this.addTask("decrypt group message", function(done) {
- var packet = JSON.parse(jsonpacket);
-
- var sender = packet.sender_key;
- var session_id = packet.session_id;
-
- var sender_signing_key = self.peerSigningKeys[sender];
- if (!sender_signing_key) {
- throw new Error("No known signing key for sender "+sender);
- }
-
- var olmUtility = new Olm.Utility();
- olmUtility.ed25519_verify(
- sender_signing_key, packet.body, packet.signature
- );
-
- var peer_sessions = self.peerGroupSessions[sender];
- if (!peer_sessions) {
- throw new Error("No sessions for sender "+sender);
- }
-
- var session = peer_sessions[session_id];
- if (!session) {
- throw new Error("Unknown session id " + session_id);
- }
-
- var result = session.decrypt(packet.body);
- done(result.plaintext);
- }, callback);
-};
-
-
-
-/**
- * add a task to encrypt, and prepare for sending, a group message.
- *
- * Will create a group session if necessary
- */
-DemoUser.prototype.encrypt = function(message) {
- var self = this;
- var session = this.getGroupSession();
-
- function sendJsonToPeers(json) {
- for (var peer in self.peers) {
- if (!self.peers.hasOwnProperty(peer)) {
- continue;
- }
- self.peers[peer].receiveGroup(json);
- }
- }
-
-
- self.addTask("encrypt group message", function(done) {
- var encrypted = session.encrypt(message);
- var signature = self.olmAccount.sign(encrypted);
-
- var packet = {
- sender_key: self.idKey,
- session_id: session.session_id(),
- body: encrypted,
- signature: signature,
- };
- var json = JSON.stringify(packet);
-
- var el = buttonsAndText(json, {
- send: function(ev) {
- sendJsonToPeers(json);
- },
- "send corrupted": function(ev) {
- var p = JSON.parse(json);
- p.body += " ";
- sendJsonToPeers(JSON.stringify(p));
- },
- });
- self.groupOutputDiv.appendChild(el);
- done();
- });
-};
-
-
-/* ************************************************************************** */
-
-function initUserDiv(demoUser, div) {
- demoUser.progressElement = div.getElementsByClassName("user_progress")[0];
- demoUser.cipherOutputDiv = div.getElementsByClassName("user_cipher_output")[0];
- demoUser.cipherInputDiv = div.getElementsByClassName("user_cipher_input")[0];
- demoUser.groupOutputDiv = div.getElementsByClassName("group_output")[0];
- demoUser.groupInputDiv = div.getElementsByClassName("group_input")[0];
-
- var plain_input = div.getElementsByClassName("user_plain_input")[0];
- var encrypt = div.getElementsByClassName("user_encrypt")[0];
-
- encrypt.addEventListener("click", function() {
- demoUser.encrypt(plain_input.value);
- }, false);
-
-}
-
-function startDemo() {
- var user1 = new DemoUser();
- initUserDiv(user1, document.getElementById("user1"));
-
- var user2 = new DemoUser();
- initUserDiv(user2, document.getElementById("user2"));
-
- var user3 = new DemoUser();
- initUserDiv(user3, document.getElementById("user3"));
-
- var user4 = new DemoUser();
- initUserDiv(user4, document.getElementById("user4"));
-
- user1.addPeer(user2.remoteOps);
- user1.addPeer(user3.remoteOps);
- user1.addPeer(user4.remoteOps);
-
- user2.addPeer(user1.remoteOps);
- user2.addPeer(user3.remoteOps);
- user2.addPeer(user4.remoteOps);
-
- user3.addPeer(user1.remoteOps);
- user3.addPeer(user2.remoteOps);
- user3.addPeer(user4.remoteOps);
-
- user4.addPeer(user1.remoteOps);
- user4.addPeer(user2.remoteOps);
- user4.addPeer(user3.remoteOps);
-}
-
-
-document.addEventListener("DOMContentLoaded", function() {
- Olm.init().then(function() {
- startDemo();
- });
-}, false);
diff --git a/javascript/demo/one_to_one_demo.html b/javascript/demo/one_to_one_demo.html
deleted file mode 100644
index a225e4a..0000000
--- a/javascript/demo/one_to_one_demo.html
+++ /dev/null
@@ -1,147 +0,0 @@
-<html>
-<head>
-<script src="../olm.js"></script>
-<script>
-document.addEventListener("DOMContentLoaded", function() {
- Olm.init().then(function() {
- demo();
- });
-}, false);
-
-function demo() {
- function progress(who, message) {
- var message_element = document.createElement("pre");
- var progress = document.getElementById(who + "_progress");
- var start_content = document.createTextNode(message + "...");
- var done_content = document.createTextNode(message + "... Done");
- function start() {
- message_element.appendChild(start_content);
- progress.appendChild(message_element);
- }
- function done() {
- message_element.replaceChild(done_content, start_content);
- }
- return {start:start, done:done};
- }
-
- window.alice = new Olm.Account();
- window.bob = new Olm.Account();
- var a_session = new Olm.Session();
- var b_session = new Olm.Session();
- var message_1;
- var tasks = [];
-
- tasks.push(["alice", "Creating account", function() { alice.create() }]);
- tasks.push(["bob", "Creating account", function() { bob.create() }]);
- tasks.push(["bob", "Generate one time keys", function() {
- bob.generate_one_time_keys(1);
- }]);
- tasks.push(["alice", "Create outbound session", function() {
- var bobs_id_keys = JSON.parse(bob.identity_keys());
- var bobs_id_key = bobs_id_keys.curve25519;
- var bobs_ot_keys = JSON.parse(bob.one_time_keys());
- var bobs_ot_key;
- for (key in bobs_ot_keys.curve25519) {
- bobs_ot_key = bobs_ot_keys.curve25519[key];
- }
- a_session.create_outbound(alice, bobs_id_key, bobs_ot_key);
- }]);
- tasks.push(["alice", "Encrypt first message", function() {
- message_1 = a_session.encrypt("");
- }]);
- tasks.push(["bob", "Create inbound session", function() {
- b_session.create_inbound(bob, message_1.body);
- }]);
- tasks.push(["bob", "Decrypt first message", function() {
- b_session.decrypt(message_1.type, message_1.body);
- }]);
-
- function glue_encrypt(from, to, from_session) {
- var plain_input = document.getElementById(from + "_plain_input");
- var cipher_output = document.getElementById(from + "_cipher_output");
- var cipher_input = document.getElementById(to + "_cipher_input");
- var encrypt = document.getElementById(from + "_encrypt");
-
- encrypt.addEventListener("click", function() {
- var message = from_session.encrypt(plain_input.value);
- var message_element = document.createElement("pre");
- var content = document.createTextNode(JSON.stringify(message));
- message_element.appendChild(content);
- cipher_output.appendChild(message_element);
- message_element.addEventListener("click", function() {
- cipher_input.value = JSON.stringify(message);
- }, false);
- }, false);
- }
-
- function glue_decrypt(to, to_session) {
- var cipher_input = document.getElementById(to + "_cipher_input");
- var plain_output = document.getElementById(to + "_plain_output");
- var decrypt = document.getElementById(to + "_decrypt");
-
- decrypt.addEventListener("click", function() {
- var message = JSON.parse(cipher_input.value);
- try {
- var plaintext = to_session.decrypt(message.type, message.body);
- } catch (e) {
- var plaintext = "ERROR: " + e.message;
- }
- var message_element = document.createElement("pre");
- var message_content = document.createTextNode(plaintext);
- message_element.appendChild(message_content);
- plain_output.appendChild(message_element);
- }, false);
- }
-
- function do_tasks(next) {
- if (tasks.length > 0) {
- var task = tasks.shift();
- var p = progress(task[0], task[1])
- p.start();
- window.setTimeout(function() {
- task[2]();
- p.done();
- window.setTimeout(do_tasks, 50, next);
- }, 50)
- } else {
- next();
- }
- }
-
- do_tasks(function() {
- glue_encrypt("alice", "bob", a_session);
- glue_decrypt("bob", b_session);
-
- glue_encrypt("bob", "alice", b_session);
- glue_decrypt("alice", a_session);
- });
-}
-
-</script>
-<body>
-<div id="alice">
- <h1>Alice</h1>
- <div id="alice_progress"></div>
- <h2>Encryption</h2>
- <textarea id="alice_plain_input"></textarea>
- <button id="alice_encrypt">Encrypt</button>
- <div id="alice_cipher_output"></div>
- <h2>Decryption</h2>
- <textarea id="alice_cipher_input"></textarea>
- <button id="alice_decrypt">Decrypt</button>
- <div id="alice_plain_output"></div>
-</div>
-<div id="bob">
- <h1>Bob</h1>
- <div id="bob_progress"></div>
- <h2>Encryption</h2>
- <textarea id="bob_plain_input"></textarea>
- <button id="bob_encrypt">Encrypt</button>
- <div id="bob_cipher_output"></div>
- <h2>Decryption</h2>
- <textarea id="bob_cipher_input"></textarea>
- <button id="bob_decrypt">Decrypt</button>
- <div id="bob_plain_output"></div>
-</div>
-</body>
-</html>