click to copy privkey and pubkey

src/controllers/main.js

@@ -27,6 +27,12 @@ const mainController = {
     },
     register : (req, res) => {
         res.sendFile(path.resolve(__dirname + '/../public/register.js'));
+    },
+    pubkey : (req, res) => {
+        res.sendFile(path.resolve(__dirname + '/../public/pubkey.js'));
+    },
+    registertext : (req, res) => {
+        res.sendFile(path.resolve(__dirname + '/../public/registertext.js'));
     }
 };
 

src/public/popups.js

@@ -42,3 +42,7 @@ document.getElementById("logincancel").addEventListener("click", function () {
 document.getElementById("loginconfirm").addEventListener("click", async () => {
   await loginConfirm();
 });
+
+
+
+

src/public/pubkey.js

@@ -0,0 +1,16 @@
+document.getElementById("copyPubKey").addEventListener("click", function () {
+    copyPubKey();
+});
+
+function copyPubKey() {
+    const pubKeyInput = document.getElementById('pubkey');
+    navigator.clipboard.writeText(pubKeyInput.value)
+    .then(() => {
+        const btn = document.getElementById('copyPubKey');
+        btn.textContent = 'Copied!';
+        setTimeout(() => btn.textContent = 'Copy', 2000);
+    })
+    .catch(err => {
+        console.error('Failed to copy:', err);
+    });
+}

src/public/register.js

@@ -1,5 +1,6 @@
 const currentUrl = window.location.href;
 import { ab2str, exportedKeyToPem, pemToKey, genKey } from "./ecc.js";
+import { add_div_register_text } from "./registertext.js";
 
 export async function registerConfirm() {
     const apiUrl = `${currentUrl}account/register`;
@@ -9,7 +10,8 @@ export async function registerConfirm() {
     if (!inputFieldPublicKey.value) {
         const { privateKey, publicKey } = await genKey();
         pubkey = exportedKeyToPem(publicKey, "public");
-        document.getElementById("registerPopupText").innerText = exportedKeyToPem(privateKey, "private");
+        let privkey = exportedKeyToPem(privateKey, "private");
+        add_div_register_text(privkey);
     } else {
         pubkey = inputFieldPublicKey.value;
     }
@@ -36,7 +38,9 @@ export async function registerConfirm() {
     if (response.ok) {
         console.log(response);
     } else {
-        document.getElementById("registerPopupText").innerText = "Registration failed. Please try again.";
+        registerPopupText = document.getElementById("registerPopupText")
+        registerPopupText.innerHTML = '';
+        registerPopupText.innerText = "Registration failed. Please try again.";
         console.error('Error in server response.', response);
     }
 }

src/public/registertext.js

@@ -0,0 +1,42 @@
+// register privkey text div creation
+export function add_div_register_text(text) {
+    const tooltip = document.createElement('span');
+    tooltip.id = 'registerTooltip'
+    tooltip.classList.add('tooltip');
+    tooltip.textContent = 'Click to copy';
+
+    const copyText = document.createElement('span');
+    copyText.classList.add('copy-text');
+    copyText.textContent = text;
+
+
+    const copyContainer = document.createElement('div');
+    copyContainer.classList.add('copy-container');
+    copyContainer.onclick = function() {
+        const tooltip = document.getElementById('registerTooltip');
+        navigator.clipboard.writeText(copyText.textContent);
+        tooltip.textContent = "Copied!";
+        setTimeout(() => {
+            tooltip.textContent = "Click to copy";
+        }, 2000);
+    };
+    copyContainer.onmouseover = function() {
+        const tooltip = document.getElementById('registerTooltip');
+        tooltipText(tooltip);
+    };
+    copyContainer.onmouseout = function() {
+        const tooltip = document.getElementById('registerTooltip');
+        tooltipText(tooltip);
+    };
+
+    copyContainer.appendChild(tooltip);
+    copyContainer.appendChild(copyText);
+
+    const registerPopupText = document.getElementById('registerPopupText');
+    registerPopupText.innerText = '';
+    registerPopupText.appendChild(copyContainer);
+}
+
+function tooltipText(tooltip) {
+    tooltip.textContent = "Click to copy";
+}

src/public/style.css

@@ -24,3 +24,37 @@ body {
   max-height: 70%;
   max-width: 60%;
 }
+
+.copy-container {
+  position: relative;
+  display: inline-block;
+  padding: 10px;
+  border: 1px solid #ababab;
+  cursor: pointer;
+}
+
+.tooltip {
+  visibility: hidden;
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 5px;
+  border-radius: 3px;
+  font-size: 12px;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.copy-container:hover .tooltip {
+  visibility: visible;
+  opacity: 1;
+}
+
+.copy-text {
+  font-size: 12px;
+  color: #ffffff;
+}

src/routes/root.js

@@ -34,4 +34,12 @@ router
   .route("/register.js")
   .get(mainController.register);
 
+router
+  .route("/pubkey.js")
+  .get(mainController.pubkey);
+
+router
+  .route("/registertext.js")
+  .get(mainController.registertext);
+
 module.exports = router;

src/views/index.pug

@@ -11,9 +11,11 @@ html(lang="en-US")
     if isLoggedIn
       script(src="/chat.js", defer)
       script(src="/ecdh.js", defer)
+      script(src="/pubkey.js", defer)
     else
        script(type="module", src="/popups.js", defer)
        script(type="module", src="/register.js", defer)
+       script(type="module", src="/registertext.js", defer)
     link(rel="stylesheet" href="/css/bootstrap.min.css")
   body
     #mainbody
@@ -47,7 +49,9 @@ html(lang="en-US")
             a#logout.btn.btn-secondary(href="./account/logout") logout
 
 
-        p#pubkey #{pubKey}
+        .d-flex.mb-3
+          input#pubkey.form-control(type="text", value=pubKey, readonly, style="border-right: 0;")
+          button#copyPubKey.btn.btn-outline-secondary(type="button") Copy
 
         ul#messages