alpha2

Thomascountz · Jan 28, 2024 · 95606d7 · 95606d7
1 parent 53eabba
commit 95606d7
Show file tree

Hide file tree

Showing 4 changed files with 257 additions and 125 deletions.
diff --git a/app.js b/app.js
@@ -8,20 +8,21 @@ async function initializeApp() {
 
   await checkAndDisplayKeys(elements);
   await handleEncryptedMessageFromUrl(elements);
+  await handlePublicKeyFromUrl(elements);
 }
 
 function getDomElements() {
   return {
+    messageContainer: document.getElementById("message-container"),
     encryptMessageButton: document.getElementById("encrypt-message"),
-    encryptedUrlElement: document.getElementById("encrypted-url"),
-    encryptedMessageContainer: document.getElementById("encrypted-message-info"),
     copyEncryptedMessageButton: document.getElementById("copy-encrypted-url"),
     messageInput: document.getElementById("message"),
     decryptedMessageElement: document.getElementById("decrypted-message"),
     publicKeyElement: document.getElementById("public-key-url"),
     generateKeysButton: document.getElementById("generate-keys"),
     copyPublicKeyButton: document.getElementById("copy-public-key-url"),
     feedbackElement: document.getElementById("feedback"),
+    keyRegenerationWarning: document.getElementById("key-regeneration-warning"),
   };
 }
 
@@ -30,10 +31,21 @@ async function handleEncryptedMessageFromUrl(elements) {
   const encryptedMessage = urlParams.get("encryptedMessage");
 
   if (encryptedMessage) {
+    elements.messageInput.style.display = "none";
+    elements.encryptMessageButton.style.display = "none";
     await decryptMessage(encryptedMessage, elements);
   }
 }
 
+async function handlePublicKeyFromUrl(elements) {
+  const urlParams = new URLSearchParams(window.location.search);
+  const publicKey = urlParams.get("publicKey");
+
+  if (publicKey) {
+    elements.messageContainer.style.display = "block";
+  }
+}
+
 function attachEventListeners(elements) {
   elements.encryptMessageButton.addEventListener("click", () =>
     encryptMessageHandler(elements),
@@ -46,13 +58,6 @@ function attachEventListeners(elements) {
       elements.feedbackElement,
     ),
   );
-  elements.copyEncryptedMessageButton.addEventListener("click", () =>
-    copyToClipboard(
-      elements.encryptedUrlElement.textContent,
-      "Encrypted message URL copied to clipboard.",
-      elements.feedbackElement,
-    ),
-  );
 }
 
 async function encryptMessageHandler(elements) {
@@ -80,34 +85,43 @@ async function encryptMessageHandler(elements) {
 
     // Convert encrypted data to Base64URL and create the link
     const base64URLEncryptedData = base64URLEncode(new Uint8Array(encryptedData));
-    elements.encryptedUrlElement.textContent = `${window.location.origin}${window.location.pathname}?encryptedMessage=${base64URLEncryptedData}`;
-    elements.encryptedMessageContainer.style.display = "block"; // Ensure this ID matches the one in the HTML
+    copyToClipboard(`${window.location.origin}${window.location.pathname}?encryptedMessage=${base64URLEncryptedData}`,"Encrypted message URL copied to clipboard.", elements.feedbackElement)
   } catch (e) {
-    showFeedback(elements.feedbackElement, "Encryption failed: " + e.message, false)
+    showFeedback(elements.feedbackElement, "Encryption failed: " + e.message, false);
   }
 }
 
 async function regenerateKeysHandler(elements) {
+  // Hide the human-centric alert if it's already visible
+  if (elements.keyRegenerationWarning.style.display == "block") {
+    elements.keyRegenerationWarning.style.display = "none";
+    return;
+  }
+
   // Check if keys exist
   const privateKeyExists = localStorage.getItem("privateKey");
   const publicKeyExists = localStorage.getItem("publicKey");
 
   if (privateKeyExists && publicKeyExists) {
-    // Confirm with the user before regenerating keys
-    const userConfirmed = confirm(
-      "Are you sure you want to generate new keys? This will invalidate your previous keys.",
-    );
+    // Display the human-centric alert to the user before regenerating keys
+    elements.keyRegenerationWarning.style.display = "block";
 
-    if (userConfirmed) {
+    // Event handler for the "I Understand, Continue" button
+    window.confirmKeyRegeneration = async () => {
+      // Hide the warning message
+      elements.keyRegenerationWarning.style.display = "none";
       // User confirmed, proceed to regenerate keys
       const newBase64URLPublicKey = await generateKeys();
       if (newBase64URLPublicKey) {
         updatePublicKeyURL(elements.publicKeyElement, newBase64URLPublicKey);
+        showFeedback(elements.feedbackElement, "Keys successfully regenerated!");
       }
-    } else {
-      // User canceled, do nothing
-      return;
-    }
+    };
+
+    // Event handler for the "Cancel" button
+    window.cancelKeyRegeneration = () => {
+      elements.keyRegenerationWarning.style.display = "none";
+    };
   } else {
     // No keys were found, generate without confirmation
     const newBase64URLPublicKey = await generateKeys();
@@ -125,9 +139,17 @@ function copyToClipboard(textToCopy, successMessage, feedbackElement) {
 }
 
 function showFeedback(feedbackElement, message, isSuccess = true) {
+  className = isSuccess ? "success" : "error";
+  feedbackElement.classList.add(className);
   feedbackElement.textContent = message;
-  feedbackElement.className = `feedback-message ${isSuccess ? "success" : "error"}`;
-  feedbackElement.style.display = "block";
+
+  // Show the toast
+  feedbackElement.classList.add("show");
+
+  // Hide the toast after 3 seconds
+  setTimeout(function () {
+    feedbackElement.classList.remove("success", "error", "show");
+  }, 3000);
 }
 
 // Base64URL encoding and decoding utility functions
@@ -224,7 +246,7 @@ async function decryptMessage(encryptedMessage, elements) {
   const base64URLPrivateKey = localStorage.getItem("privateKey");
 
   if (!base64URLPrivateKey) {
-    showFeedback(elements.feedbackElement, "No private key available for decryption", false)
+    showFeedback(elements.feedbackElement, "No private key available for decryption", false);
     return;
   }
 
@@ -247,7 +269,7 @@ async function decryptMessage(encryptedMessage, elements) {
     elements.decryptedMessageElement.textContent = dec.decode(decryptedData);
     document.getElementById("decrypted-message-container").style.display = "block";
   } catch (e) {
-    showFeedback(elements.feedbackElement, "Decryption Failed: ", false)
+    showFeedback(elements.feedbackElement, "Decryption Failed: ", false);
   }
 }
 

diff --git a/heavy_data-webfont.woff b/heavy_data-webfont.woff
diff --git a/index.html b/index.html
@@ -8,25 +8,36 @@
   <body>
     <div class="container">
       <h1 id="title">Raven</h1>
-      <div id="key-info" class="url-container">
-        <span id="public-key-url">Your public key URL will appear here</span>
-        <span class="copy-icon" id="copy-public-key-url" title="Copy Public Key URL"></span>
+      <button id="generate-keys">⚠ Revoke & Regenerate Keys</button>
+      <div id="feedback" class="toast"></div>
+      <div id="key-regeneration-warning" class="human-centric-alert" role="alert" style="display: none">
+        <h2>Heads Up!</h2>
+        <p>
+          Revoking and regenerating your keys will permanently disable your current encryption
+          keys and create new ones. This means:
+        </p>
+        <ul>
+          <li>Any previous messages encrypted with your old keys won't be readable anymore.</li>
+          <li>
+            You'll need to share your new public key with others to receive encrypted messages.
+          </li>
+        </ul>
+        <p>Only proceed if you're sure you want to start fresh with a new set of keys.</p>
+        <button onclick="confirmKeyRegeneration()">I Understand, Continue</button>
+        <button onclick="cancelKeyRegeneration()">Cancel</button>
       </div>
-      <textarea rows="4" id="message" placeholder="Enter your message"></textarea>
-      <div class="button-container">
-        <button id="encrypt-message">Encrypt Message</button>
-        <button id="generate-keys">Revoke & Regenerate Keys</button>
+      <div id="key-info" class="url-container">
+        <span id="public-key-url" class="url-textbox"
+          >Your public key URL will appear here</span
+        >
+        <button class="copy-button" id="copy-public-key-url">Copy</button>
       </div>
-      <div id="encrypted-message-info" class="url-container" style="display: none">
-        <span id="encrypted-url">Encrypted message URL will appear here</span>
-        <span
-          class="copy-icon"
-          id="copy-encrypted-url"
-          title="Copy Encrypted Message URL"
-        ></span>
+      <div id="message-container" style="display: none">
+        <textarea rows="8" id="message" placeholder="Enter your message"></textarea>
+        <button id="encrypt-message" class="form-button">Copy Encrypted URL</button>
       </div>
-      <div id="feedback" class="feedback-message"></div>
       <div id="decrypted-message-container" style="display: none">
+        <h3>Decrypted Message</h3>
         <textarea rows="4" id="decrypted-message" readonly></textarea>
       </div>
     </div>