fix: on mobile, must be directly triggered from user event

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

Hide file tree

Showing 4 changed files with 37 additions and 13 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+/bin
+Caddyfile
diff --git a/app.js b/app.js
@@ -15,14 +15,16 @@ function getDomElements() {
   return {
     messageContainer: document.getElementById("message-container"),
     encryptMessageButton: document.getElementById("encrypt-message"),
-    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"),
+    copyEncryptedMessageButton: document.getElementById("copy-encrypted-message-url"),
+    encryptedMessageUrl: document.getElementById("encrypted-message-url"),
     feedbackElement: document.getElementById("feedback"),
     keyRegenerationWarning: document.getElementById("key-regeneration-warning"),
+    encryptedMessageContainer: document.getElementById("encrypted-message-container")
   };
 }
 
@@ -33,6 +35,7 @@ async function handleEncryptedMessageFromUrl(elements) {
   if (encryptedMessage) {
     elements.messageInput.style.display = "none";
     elements.encryptMessageButton.style.display = "none";
+    elements.encryptedMessageContainer.display = "none";
     await decryptMessage(encryptedMessage, elements);
   }
 }
@@ -58,6 +61,13 @@ function attachEventListeners(elements) {
       elements.feedbackElement,
     ),
   );
+  elements.copyEncryptedMessageButton.addEventListener("click", () =>
+    copyToClipboard(
+      elements.encryptedMessageUrl.textContent,
+      "Encrypted message URL copied to clipboard.",
+      elements.feedbackElement,
+    ),
+  );
 }
 
 async function encryptMessageHandler(elements) {
@@ -85,7 +95,8 @@ async function encryptMessageHandler(elements) {
 
     // Convert encrypted data to Base64URL and create the link
     const base64URLEncryptedData = base64URLEncode(new Uint8Array(encryptedData));
-    copyToClipboard(`${window.location.origin}${window.location.pathname}?encryptedMessage=${base64URLEncryptedData}`,"Encrypted message URL copied to clipboard.", elements.feedbackElement)
+    elements.encryptedMessageUrl.textContent = `${window.location.origin}${window.location.pathname}?encryptedMessage=${base64URLEncryptedData}`
+    elements.encryptedMessageContainer.style.display = "flex";
   } catch (e) {
     showFeedback(elements.feedbackElement, "Encryption failed: " + e.message, false);
   }

diff --git a/index.html b/index.html
@@ -3,14 +3,19 @@
   <head>
     <title>Raven</title>
     <link rel="stylesheet" href="styles.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   </head>
   <body>
     <div class="container">
       <h1 id="title">Raven</h1>
       <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">
+      <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
@@ -34,11 +39,15 @@ <h2>Heads Up!</h2>
       </div>
       <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>
+        <button id="encrypt-message" class="form-button">Encrypt Message</button>
+      </div>
+      <div id="encrypted-message-container" class="url-container" style="display: none">
+        <span id="encrypted-message-url" class="url-textbox"></span>
+        <button class="copy-button" id="copy-encrypted-message-url">Copy</button>
       </div>
       <div id="decrypted-message-container" style="display: none">
         <h3>Decrypted Message</h3>
-        <textarea rows="4" id="decrypted-message" readonly></textarea>
+        <textarea rows="8" id="decrypted-message" readonly></textarea>
       </div>
     </div>
 

diff --git a/styles.css b/styles.css
@@ -1,9 +1,8 @@
 @font-face {
-    font-family: 'heavy_dataregular';
-    src: url('heavy_data-webfont.woff') format('woff'),
+  font-family: 'heavy_dataregular';
+  src: url('heavy_data-webfont.woff') format('woff'),
     font-weight: normal;
-    font-style: normal;
-
+  font-style: normal;
 }
 
 *,
@@ -88,7 +87,7 @@ textarea {
   font-family: "Fira Code", monospace;
   padding: 12px;
   margin: 20px 0;
-  /* border: 1px solid #e2e8f0; */
+  font-size: 16px;
   border: none;
   outline: none;
   border-radius: 8px;
@@ -140,7 +139,8 @@ textarea {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
 
-#decrypted-message-container, #message-container {
+#decrypted-message-container,
+#message-container {
   /* background-color: #f1f1f1; */
   color: #fff;
   /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
@@ -150,9 +150,11 @@ textarea {
   /* font-family: "Fira Code", monospace; */
   font-size: 16px;
   font-weight: 500;
+  margin-bottom: 20px;
 }
 
-#decrypted-message-container h3, #message-container h3 {
+#decrypted-message-container h3,
+#message-container h3 {
   text-align: center;
   text-transform: uppercase;
 }