4 files changed, 90 insertions(+), 21 deletions(-)

M content/chat.md
M layouts/shortcodes/chat.html
M static/css/chat.css
M static/js/chat.js

@@ 5,11 5,5 @@ chat: true
 
 Here's a live chat app, with digital signatures and optional symmetric key encryption.
 
-Your ephemeral public key is:
-
-<div id="pubkey-shown"></div>
-
-To set or update the key for symmetric encryption, use this text box:
-
 {{< chat >}}
 

@@ 1,6 1,25 @@
-<input id="passwd-input" type="text">
-<button id="passwd-button">Update Key</button>
+<div id="identity">
+  <button onclick="toggleIdentity()">Identity</button>
+  <div id="identity-content" class="hidden">
+    <p>Your ephemeral public key is:</p>
+
+    <div id="identity-pubkey"></div>
+  </div>
+</div>
+
+<div id="passwd">
+  <button onclick="togglePassword()">Password</button>
+  <div id="passwd-content" class="hidden">
+    <p>To enable symmetric encryption, enter a password into this text box.</p>
+    <input id="passwd-input" type="text">
+    <button id="passwd-button">Update Key</button>
+
+    <p>The intended recipients of your messages need to put the same password into this text box, too.</p>
+
+    <p>You can only have one password at a time.</p>
+  </div>
+</div>
+
 <ul id="chat-room"></ul>
 <input id="chat-input" type="text">
 <button id="chat-button">Send</button>
-

@@ 1,13 1,59 @@
-#pubkey-shown {
-  width: 90%;
-  padding: .25em;
+input {
+  padding: 0.5em;
+  border-radius: 1.25em;
+}
+
+button {
+  width: 6em;
+  padding: 0.5em;
+  border-radius: 1.25em;
+  border-color: #f8f9fa;
+}
+
+#identity {
+  display: inline-block;
+  margin: 0 0 0.5em 0;
+  border-radius: 1.25em;
+  background-color: #f8f9fa;
+}
+
+#identity-content {
+  display: block;
   margin: 0 0 1em 0;
+}
+
+#identity-pubkey {
+  margin: 0 0.5em 0 0.5em;
   font-family: monospace;
-  background-color: #f8f9fa;
+  background-color: #ffffff;
   word-break: break-all;
   border-radius: .5em;
 }
 
+#passwd {
+  display: inline-block;
+  margin: 0 0 0.5em 0;
+  border-radius: 1.25em;
+  background-color: #f8f9fa;
+}
+
+#passwd-content {
+  display: block;
+  margin: 0 0 1em 0;
+}
+
+#passwd-button {
+  width: 8em;
+}
+
+.resized {
+  display: block !important;
+}
+
+.hidden {
+  display: none !important;
+}
+
 ul#chat-room {
   margin: 0;
   padding: 2em;


@@ 67,13 113,9 @@ ul#chat-room li.own::after {
 }
 
 input#chat-input {
-  width: 88%;
-  padding: 0.5em;
-  border-radius: 1.25em;
+  width: calc(100% - 6em);
 }
 
 button#chat-button {
-  width: 9%;
-  padding: 0.5em;
-  border-radius: 1.25em;
+  width: 4em;
 }

@@ 192,9 192,23 @@ function connect() {
 var socket;
 connect();
 
+// buttons
+function toggleIdentity() {
+  const identityInner = document.getElementById("identity-content");
+  identityInner.classList.toggle("hidden");
+  const identityOuter = document.getElementById("identity");
+  identityOuter.classList.toggle("resized");
+};
+function togglePassword() {
+  const passwdInner = document.getElementById("passwd-content");
+  passwdInner.classList.toggle("hidden");
+  const passwdOuter = document.getElementById("passwd");
+  passwdOuter.classList.toggle("resized");
+};
+
 document.addEventListener("DOMContentLoaded", () => {
-  // key interface
-  const pubkeyShown = document.getElementById('pubkey-shown');
+  // identity interface
+  const pubkeyShown = document.getElementById('identity-pubkey');
   initializeKeyChain(pubkeyShown);
 
   // chat interface