Fix channels

wasm/clients/assets/utils.js

@@ -55,6 +55,10 @@ async function sleepUntil(f, timeoutMs) {
 // error messages to an element.
 function newHtmlConsole(elem) {
     return {
+        overwrite: function (message) {
+            console.log(message)
+            elem.innerHTML = message
+        },
         log: function (message) {
             console.log(message)
             elem.innerHTML += "<p>" + message + "</p>"

wasm/clients/channels/channels.js

@@ -47,39 +47,6 @@ async function Channels(htmlConsole, messageConsole, stopNetworkFollowerBtn, ndf
     htmlConsole.log("Loaded Cmix.")
     console.log("Loaded Cmix: " + JSON.stringify(net))
 
-    // Get reception identity (automatically created if one does not exist)
-    const identityStorageKey = "identityStorageKey";
-    let identity;
-    try {
-        htmlConsole.log("Getting reception identity.")
-        identity = LoadReceptionIdentity(identityStorageKey, net.GetID());
-    } catch (e) {
-        htmlConsole.log("No reception identity found. Generating a new one.")
-
-        // If no extant xxdk.ReceptionIdentity, generate and store a new one
-        identity = await net.MakeReceptionIdentity();
-
-        StoreReceptionIdentity(identityStorageKey, identity, net.GetID());
-    }
-
-    let authCallbacks = {
-        Confirm: function (contact, receptionId, ephemeralId, roundId) {
-            htmlConsole.log("Confirm: from " + Uint8ArrayToBase64(receptionId) + " on round " + roundId)
-        },
-        Request: async function (contact, receptionId, ephemeralId, roundId) {
-            htmlConsole.log("Request: from " + Uint8ArrayToBase64(receptionId) + " on round " + roundId)
-        },
-        Reset: function (contact, receptionId, ephemeralId, roundId) {
-            htmlConsole.log("Reset: from " + Uint8ArrayToBase64(receptionId) + " on round " + roundId)
-        }
-    }
-
-
-    // Create an E2E client
-    // Pass in auth object which controls auth callbacks for this client
-    htmlConsole.log("Logging in E2E")
-    let e2eClient = Login(net.GetID(), authCallbacks, identity, new Uint8Array(null));
-    htmlConsole.log("Logged in E2E")
 
     ////////////////////////////////////////////////////////////////////////////
     // Start network threads                                                  //
@@ -143,7 +110,7 @@ async function Channels(htmlConsole, messageConsole, stopNetworkFollowerBtn, ndf
 
         const username = usernameInput1.value
 
-        joinChannel(htmlConsole, messageConsole, e2eClient, username,
+        joinChannel(htmlConsole, messageConsole, net, username,
             chanGen.Channel, chanNameOutput, chanDescriptionOutput,
             chanIdOutput, prettyPrintOutput)
     })
@@ -152,7 +119,7 @@ async function Channels(htmlConsole, messageConsole, stopNetworkFollowerBtn, ndf
 
     joinChannelSubmit.addEventListener("click", () => {
         const username = usernameInput2.value
-        joinChannel(htmlConsole, messageConsole, e2eClient, username,
+        joinChannel(htmlConsole, messageConsole, net, username,
             prettyPrintInput.value, chanNameOutput, chanDescriptionOutput,
             chanIdOutput, prettyPrintOutput)
     })
@@ -160,28 +127,47 @@ async function Channels(htmlConsole, messageConsole, stopNetworkFollowerBtn, ndf
 
 }
 
-async function joinChannel(htmlConsole, messageConsole, e2eClient, username,
+async function joinChannel(htmlConsole, messageConsole, net, username,
                            prettyPrint, nameOutput, descriptionOutput, idOutput,
                            prettyPrintOutput) {
    document.getElementById("makeChannel").style.display = "none";
    document.getElementById("joinChannel").style.display = "none";
-   document.getElementById("messageLabel").innerHTML += " as " + username;
+   document.getElementById("messageLabel").innerHTML += " as <em>" + username + "</em>";
 
+   // The eventModel is used only without the database
     let eventModel = {
         JoinChannel: function (channel){},
         LeaveChannel: function (channelID){},
         ReceiveMessage: function (channelID, messageID, senderUsername, text, timestamp, lease, roundId, status){
-            messageConsole.log("<em>" + senderUsername + " said: </em>" + text)
-            htmlConsole.log(senderUsername + ": " + text)
+            messageConsole.overwrite(text)
+            // htmlConsole.log(senderUsername + ": " + text)
         },
         ReceiveReply: function (channelID, messageID, reactionTo, senderUsername, text, timestamp, lease, roundId, status){},
         ReceiveReaction: function (channelID, messageID, reactionTo, senderUsername, reaction, timestamp, lease, roundId, status){},
         UpdateSentStatus: function (messageID, status){},
     }
 
-    let chanManager = NewChannelsManagerDummyNameService(e2eClient.GetID(), username, eventModel)
+    // This is for use without the database
+    let chanManager = NewChannelsManagerDummyNameService(net.GetID(), username, eventModel)
+
+    // Use this when using the database
+    // let chanManager = NewChannelsManagerWithIndexedDbDummyNameService(net.GetID(), username)
+
+    // let chanInfo = JSON.parse(dec.decode(chanManager.JoinChannel(prettyPrint)))
+    let chanInfo;
+
+    try {
+        chanInfo = JSON.parse(dec.decode(chanManager.JoinChannel(prettyPrint)))
+    } catch (e) {
+        console.log(e)
+        if (e.toString().includes("the channel cannot be added because it already exists")) {
+            chanManager.ReplayChannelFromPrettyPrint(prettyPrint)
+            chanInfo = JSON.parse(dec.decode(GetChannelInfo(prettyPrint)))
+        } else {
+            throw e
+        }
+    }
 
-    let chanInfo = JSON.parse(dec.decode(chanManager.JoinChannel(prettyPrint)))
 
     nameOutput.value = chanInfo.Name
     descriptionOutput.value = chanInfo.Description
@@ -195,9 +181,23 @@ async function joinChannel(htmlConsole, messageConsole, e2eClient, username,
     messageInput.disabled = false
     sendMessageSubmit.addEventListener("click", async () => {
         let message = messageInput.value
-        messageInput.value = ""
-        let chanSendReportJson = await chanManager.SendMessage(
-            Base64ToUint8Array(chanInfo.ChannelID), message, 30000, new Uint8Array(null))
-        htmlConsole.log("chanSendReport: " + dec.decode(chanSendReportJson))
+        if (message !== "") {
+            messageInput.value = ""
+            let chanSendReportJson = await chanManager.SendMessage(
+                Base64ToUint8Array(chanInfo.ChannelID), message, 30000, new Uint8Array(null))
+            htmlConsole.log("chanSendReport: " + dec.decode(chanSendReportJson))
+        }
+    })
+
+    messageInput.addEventListener("keypress", async e => {
+        if (e.key === "Enter") {
+            let message = messageInput.value
+            if (message !== "") {
+                messageInput.value = ""
+                let chanSendReportJson = await chanManager.SendMessage(
+                    Base64ToUint8Array(chanInfo.ChannelID), message, 30000, new Uint8Array(null))
+                htmlConsole.log("chanSendReport: " + dec.decode(chanSendReportJson))
+            }
+        }
     })
 }
\ No newline at end of file

wasm/clients/channels/index.html

@@ -9,14 +9,16 @@
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
-	<title>Channel Client</title>
+	<title>The Internet Speakeasy Client</title>
 
 	<link rel="stylesheet" type="text/css" href="../assets/styles.css">
+	<link rel="icon" type="image/x-icon" href="favicon.ico">
 
 
 	<script type="text/javascript" src="channels.js"></script>
 	<script type="text/javascript" src="../assets/utils.js"></script>
 	<script type="text/javascript" src="../assets/wasm_exec.js"></script>
+	<script type="text/javascript" src="../assets/ndf.js"></script>
 	<script>
         const go = new Go();
         const binPath = '../assets/xxdk.wasm'
@@ -44,34 +46,46 @@
             const statePath = 'channelPath';
             const statePass = 'password';
 
-            document.getElementById('ndfInput').addEventListener('change', e => {
-                let reader = new FileReader();
-                reader.onload = async function (e) {
-                    try {
-                        await Channels(htmlConsole, messageConsole, stopNetworkFollowerBtn,
-                            e.target.result, statePath, statePass);
-                    } catch (e) {
-                        htmlConsole.error(e)
-                    }
-                };
-                reader.readAsText(e.target.files[0]);
+            // document.getElementById('ndfInput').addEventListener('change', e => {
+            //     let reader = new FileReader();
+            //     reader.onload = async function (e) {
+            //         try {
+            //             await Channels(htmlConsole, messageConsole, stopNetworkFollowerBtn,
+            //                 e.target.result, statePath, statePass);
+            //         } catch (e) {
+            //             htmlConsole.error(e)
+            //         }
+            //     };
+            //     reader.readAsText(e.target.files[0]);
+            // }, false);
+
+            document.getElementById('startNetwork').addEventListener('click', async e => {
+                try {
+                    await Channels(htmlConsole, messageConsole, stopNetworkFollowerBtn,
+                        ndf, statePath, statePass);
+                } catch (e) {
+                    htmlConsole.error(e)
+                }
             }, false);
 
         });
 	</script>
 </head>
 <body>
-<h1 style="margin-top: 0">Channel Client</h1>
+<h1 style="margin-top: 0">The Internet Speakeasy Client</h1>
 <div class="toolbar">
 	<input type="button" value="Clear localStorage" onclick="localStorage.clear();">
 	<input type="button" value="Download Log File" id="logFileDownload">
 	<input type="button" value="Stop Network Follower" id="stopNetworkFollowerBtn" style="display:none;" >
 </div>
-<p>Selecting an NDF will start the client.</p>
 <form id="startCmix">
-	<div>
+<!--	<div>
 		<label for="ndfInput">Select NDF file to use <code>ndf</code> variable in JS:</label><br/>
 		<input type="file" id="ndfInput" required/>
+	</div>-->
+	<div>
+		<p>Click on the button below to connect to the network and start the client.</p>
+		<input type="button" id="startNetwork" value="Connect to Network"/>
 	</div>
 </form>
 <form id="makeChannel">
@@ -80,14 +94,14 @@
 		<input type="text" id="username1" disabled/>
 	</div>
 	<div>
-		<label for="chanName">Channel Name</label><br/>
+		<label for="chanName">Speakeasy Name</label><br/>
 		<input type="text" id="chanName" required disabled/>
 	</div>
 	<div>
-		<label for="chanDescription">Channel Description</label><br/>
+		<label for="chanDescription">Speakeasy Description</label><br/>
 		<input type="text" id="chanDescription" required disabled/>
 	</div>
-	<input type="button" value="Make Channel" id="makeChannelSubmit" disabled />
+	<input type="button" value="Make Speakeasy" id="makeChannelSubmit" disabled />
 </form>
 <form id="joinChannel">
 	<div>
@@ -95,26 +109,26 @@
 		<input type="text" id="username2" disabled/>
 	</div>
 	<div>
-		<label for="prettyPrintInput">Channel to Join</label><br/>
+		<label for="prettyPrintInput">Speakeasy to Join</label><br/>
 		<input type="text" id="prettyPrintInput" required disabled/>
-		<input type="button" value="Join Channel" id="joinChannelSubmit" disabled/>
+		<input type="button" value="Join Speakeasy" id="joinChannelSubmit" disabled/>
 	</div>
 </form>
 <form id="channelInfo">
 <div>
-	<label for="chanNameOutput">Channel Name</label><br/>
+	<label for="chanNameOutput">Speakeasy Name</label><br/>
 	<input type="text" id="chanNameOutput" disabled/>
 </div>
 <div>
-	<label for="chanDescriptionOutput">Channel Description</label><br/>
+	<label for="chanDescriptionOutput">Speakeasy Description</label><br/>
 	<input type="text" id="chanDescriptionOutput" disabled/>
 </div>
 <div>
-	<label for="chanIdOutput">Channel ID</label><br/>
+	<label for="chanIdOutput">Speakeasy ID</label><br/>
 	<input type="text" id="chanIdOutput" disabled/>
 </div>
 <div>
-	<label for="prettyPrintOutput">Channel Share</label><br/>
+	<label for="prettyPrintOutput">Speakeasy Share</label><br/>
 	<input type="text" id="prettyPrintOutput" disabled/>
 </div>
 </form>