From a761bdb2098ceee67d56e575921106a404b61efd Mon Sep 17 00:00:00 2001 From: Sam Hadow Date: Tue, 18 Feb 2025 14:05:51 +0100 Subject: [PATCH] click to copy privkey and pubkey --- src/controllers/main.js | 6 ++++++ src/public/popups.js | 4 ++++ src/public/pubkey.js | 16 +++++++++++++++ src/public/register.js | 8 ++++++-- src/public/registertext.js | 42 ++++++++++++++++++++++++++++++++++++++ src/public/style.css | 34 ++++++++++++++++++++++++++++++ src/routes/root.js | 8 ++++++++ src/views/index.pug | 6 +++++- 8 files changed, 121 insertions(+), 3 deletions(-) create mode 100644 src/public/pubkey.js create mode 100644 src/public/registertext.js diff --git a/src/controllers/main.js b/src/controllers/main.js index c9e440a..8d97ff5 100644 --- a/src/controllers/main.js +++ b/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')); } }; diff --git a/src/public/popups.js b/src/public/popups.js index 1b786b9..abbd762 100644 --- a/src/public/popups.js +++ b/src/public/popups.js @@ -42,3 +42,7 @@ document.getElementById("logincancel").addEventListener("click", function () { document.getElementById("loginconfirm").addEventListener("click", async () => { await loginConfirm(); }); + + + + diff --git a/src/public/pubkey.js b/src/public/pubkey.js new file mode 100644 index 0000000..02bc275 --- /dev/null +++ b/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); + }); +} diff --git a/src/public/register.js b/src/public/register.js index 7df5c38..b7e6bef 100644 --- a/src/public/register.js +++ b/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); } } diff --git a/src/public/registertext.js b/src/public/registertext.js new file mode 100644 index 0000000..a244ffe --- /dev/null +++ b/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"; +} diff --git a/src/public/style.css b/src/public/style.css index 1377136..3ba6ddf 100644 --- a/src/public/style.css +++ b/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; +} diff --git a/src/routes/root.js b/src/routes/root.js index 08a118e..50f8f2e 100644 --- a/src/routes/root.js +++ b/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; diff --git a/src/views/index.pug b/src/views/index.pug index b75b44f..f16176e 100644 --- a/src/views/index.pug +++ b/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