updated and changed some details in the code

DavidSM100 · Oct 25, 2024 · dc5e974 · dc5e974
1 parent da858ba
commit dc5e974
Show file tree

Hide file tree

Showing 8 changed files with 223 additions and 141 deletions.
diff --git a/src/css/basic.css b/src/css/basic.css
diff --git a/src/index.html b/src/index.html
@@ -1,21 +1,23 @@
 <!doctype html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <link rel="stylesheet" href="./css/basic.css" />
-    <link rel="stylesheet" href="./css/main.css" />
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <script src="webxdc.js"></script>
-  </head>
-  <body>
-    <div id="headerDiv">
-      <button id="sendRequestBtn">Send request to chat</button>
-    </div>
+  <link rel="stylesheet" href="style.css" />
 
-    <div id="chatsDiv"></div>
+  <script src="webxdc.js"></script>
+</head>
 
-    <script type="module" src="./js/main.js"></script>
-  </body>
-</html>
+<body>
+  <div id="headerDiv" style="text-align: center;">
+    <button id="sendRequestBtn">Send chat request</button>
+  </div>
+
+  <div id="chatsDiv"></div>
+
+  <script type="module" src="js/main.js"></script>
+</body>
+
+</html>
diff --git a/src/js/crypto.js b/src/js/crypto.js
@@ -1,55 +1,71 @@
-let rsaAlgorithm = () => {
-  return {
-    name: "RSA-OAEP",
-    modulusLength: 2048,
-    publicExponent: new Uint8Array([1, 0, 1]),
-    hash: "SHA-256",
-  };
-};
+const rsaAlgorithm = {
+  name: "RSA-OAEP",
+  modulusLength: 2048,
+  publicExponent: new Uint8Array([1, 0, 1]),
+  hash: "SHA-256",
+}
 
-export let randomId = () => crypto.randomUUID();
+export const randomId = () => crypto.randomUUID();
 
+/**
+ * 
+ * @returns {Promise<CryptoKeyPair>}
+ */
 export async function createKeys() {
-  let keys = await crypto.subtle.generateKey(rsaAlgorithm(), true, [
+  return await crypto.subtle.generateKey(rsaAlgorithm, true, [
     "encrypt",
     "decrypt",
   ]);
-
-  return keys;
 }
 
+/**
+ * 
+ * @param {CryptoKey} key 
+ * @returns {Promise<JsonWebKey>}
+ */
 export async function exportKey(key) {
   return crypto.subtle.exportKey("jwk", key);
 }
 
+/**
+ * 
+ * @param {JsonWebKey} jsonWebKey 
+ * @returns {Promise<CryptoKey>}
+ */
 export async function importKey(jsonWebKey) {
-  let key = await crypto.subtle.importKey(
+  return await crypto.subtle.importKey(
     "jwk",
     jsonWebKey,
-    rsaAlgorithm(),
+    rsaAlgorithm,
     true,
     ["encrypt"],
   );
-
-  return key;
 }
 
-export async function encrypt(arrayBuffer, key) {
-  let encryptedArrayBuffer = await crypto.subtle.encrypt(
+/**
+ * 
+ * @param {ArrayBuffer} data 
+ * @param {CryptoKey} key 
+ * @returns {Promise<ArrayBuffer>}
+ */
+export async function encrypt(data, key) {
+  return await crypto.subtle.encrypt(
     { name: "RSA-OAEP" },
     key,
-    arrayBuffer,
+    data,
   );
-
-  return encryptedArrayBuffer;
 }
 
-export async function decrypt(encryptedArrayBuffer, key) {
-  let decryptedArrayBuffer = await crypto.subtle.decrypt(
+/**
+ * 
+ * @param {ArrayBuffer} encryptedData 
+ * @param {CryptoKey} key 
+ * @returns {Promise<ArrayBuffer>}
+ */
+export async function decrypt(encryptedData, key) {
+  return await crypto.subtle.decrypt(
     { name: "RSA-OAEP" },
     key,
-    encryptedArrayBuffer,
+    encryptedData,
   );
-
-  return decryptedArrayBuffer;
 }
diff --git a/src/js/main.js b/src/js/main.js
@@ -11,29 +11,29 @@ import {
 
 let users = {};
 
-let selfKeys = getSelfKeys();
-let selfId = getSelfId();
-let selfName = getSelfName();
-let selfColor = getSelfColor();
+const selfKeys = getSelfKeys();
+const selfId = getSelfId();
+const selfName = getSelfName();
+const selfColor = getSelfColor();
 
 $("sendRequestBtn").onclick = sendRequest;
 
 window.webxdc.setUpdateListener((update) => handleIncomingUpdate(update));
 
 async function handleIncomingUpdate(update) {
-  let payload = update.payload;
-  let sender = payload.self;
-  let senderId = sender.id;
+  const payload = update.payload;
+  const sender = payload.self;
+  const senderId = sender.id;
 
   users[senderId] = {
     key: sender.key,
     name: sender.name,
     color: sender.color,
   };
 
-  let msgTo = payload.to;
+  const msgTo = payload.to;
   if (payload.type == "msg" && (msgTo == selfId || senderId == selfId)) {
-    let privateKey = (await selfKeys).privateKey;
+    const privateKey = (await selfKeys).privateKey;
 
     let chatId, encryptedMsg, position;
     if (msgTo == selfId) {
@@ -48,7 +48,7 @@ async function handleIncomingUpdate(update) {
 
     getChat(chatId);
 
-    let decryptedMsg = await decryptText(encryptedMsg, privateKey);
+    const decryptedMsg = await decryptText(encryptedMsg, privateKey);
     let msg = newMsg(decryptedMsg);
     msg.style.justifyContent = "flex-" + position;
 
@@ -61,8 +61,8 @@ async function handleIncomingUpdate(update) {
   function getChat(id) {
     let chat = $(id);
     if (!chat) {
-      let user = users[id];
-      chat = newChat(id, user.key, user.name, user.color);  
+      const user = users[id];
+      chat = newChat(id, user.key, user.name, user.color);
       $("chatsDiv").append(chat);
     }
 
@@ -71,11 +71,11 @@ async function handleIncomingUpdate(update) {
 }
 
 async function sendRequest() {
-  let publicKey = (await selfKeys).publicKey;
-  let jsonWebKey = await exportKey(publicKey);
+  const publicKey = (await selfKeys).publicKey;
+  const jsonWebKey = await exportKey(publicKey);
 
-  let descr = selfName + " is requesting a private chat";
-  let update = {
+  const descr = selfName + " is requesting a private chat";
+  const update = {
     payload: {
       type: "request",
       self: {
@@ -93,18 +93,23 @@ async function sendRequest() {
     "<small>Request sent, wait for others to respond.</small>";
 }
 
+/**
+ * 
+ * @param {string} userId 
+ * @param {CryptoKey} userKey 
+ * @param {string} text 
+ */
 export async function sendMsg(userId, userKey, text) {
-  console.log(text)
-  let myPublicKey = (await selfKeys).publicKey;
+  const myPublicKey = (await selfKeys).publicKey;
 
-  let encryptedMsg = await encryptText(text, userKey);
+  const encryptedMsg = await encryptText(text, userKey);
   if (!encryptedMsg) return;
-  let selfEncryptedCopy = await encryptText(text, myPublicKey);
+  const selfEncryptedCopy = await encryptText(text, myPublicKey);
   if (!selfEncryptedCopy) return;
 
-  let myJsonWebKey = await exportKey(myPublicKey);
+  const myJsonWebKey = await exportKey(myPublicKey);
 
-  let update = {
+  const update = {
     payload: {
       type: "msg",
       msg: encryptedMsg,
@@ -119,31 +124,45 @@ export async function sendMsg(userId, userKey, text) {
     },
   };
 
-  let descr = `${selfName} is sending a message`;
+  const descr = `${selfName} is sending a message`;
 
   window.webxdc.sendUpdate(update, descr);
   return true;
 }
 
+/**
+ * 
+ * @param {string} text 
+ * @param {CryptoKey} key 
+ * @returns {string}
+ */
 async function encryptText(text, key) {
   try {
-    let arrayBuffer = textToArrayBuffer(text);
-    let encryptedArrayBuffer = await encrypt(arrayBuffer, key);
-    let base64 = arrayBufferToBase64(encryptedArrayBuffer);
+    const arrayBuffer = textToArrayBuffer(text);
+    const encryptedArrayBuffer = await encrypt(arrayBuffer, key);
+    const base64 = arrayBufferToBase64(encryptedArrayBuffer);
 
     return base64;
-  } catch {
-    alert("Message too long");
+  } catch (err) {
+    console.log(err);
+    alert(err);
   }
 }
 
+/**
+ * 
+ * @param {string} encryptedText 
+ * @param {CryptoKey} key 
+ * @returns {string}
+ */
 async function decryptText(encryptedText, key) {
   try {
-    let encryptedArrayBuffer = base64ToArrayBuffer(encryptedText);
-    let decryptedArrayBuffer = await decrypt(encryptedArrayBuffer, key);
-    let text = arrayBufferToText(decryptedArrayBuffer);
+    const encryptedArrayBuffer = base64ToArrayBuffer(encryptedText);
+    const decryptedArrayBuffer = await decrypt(encryptedArrayBuffer, key);
+    const text = arrayBufferToText(decryptedArrayBuffer);
     return text;
-  } catch {
+  } catch (err){
+    console.log(err)
     return "This message could not be decrypted";
   }
 }
diff --git a/src/js/self.js b/src/js/self.js
@@ -2,20 +2,23 @@ import getRGB from "consistent-color-generation";
 import localforage from "localforage";
 import { createKeys, randomId } from "./crypto.js";
 
-let xdcName = webxdc.selfName;
-let xdcAddr = webxdc.selfAddr;
+const xdcName = webxdc.selfName;
+const xdcAddr = webxdc.selfAddr;
 
 export function getSelfId() {
-  let savedid = localStorage.getItem("id");
-  let newId = () => {
-    let id = randomId();
+  let id = localStorage.getItem("id");
+  if (!id) {
+    id = randomId();
     localStorage.setItem("id", id);
-    return id;
-  };
+  }
 
-  return savedid || newId();
+  return id;
 }
 
+/**
+ * 
+ * @returns {string}
+ */
 export function getSelfName() {
   let name = xdcName;
   if (name == xdcAddr) name = "Anonymous";
@@ -26,13 +29,16 @@ export function getSelfColor() {
   return getRGB(xdcAddr).toString();
 }
 
+/**
+ * 
+ * @returns {Promise<CryptoKeyPair>}
+ */
 export async function getSelfKeys() {
-  let savedKeys = await localforage.getItem("keys");
-  let newKeys = async () => {
-    let keys = await createKeys();
-    localforage.setItem("keys", keys);
-    return keys;
-  };
+  let keys = await localforage.getItem("keys");
+  if (!keys) {
+    keys = await createKeys();
+    await localforage.setItem("keys", keys);
+  }
 
-  return savedKeys || (await newKeys());
+  return keys;
 }