From f7d923b6f5065c1761ec042a322c5975ae7a4f38 Mon Sep 17 00:00:00 2001 From: Chris Duncan Date: Mon, 4 Nov 2024 14:40:20 -0800 Subject: [PATCH] Create modal function for requesting password to unlock wallet. Style dialog modals. Restrict notification width to fraction of max body. --- nemo-wallet.html | 94 ++++++++++++++++++++++++++++++++++++------------ 1 file changed, 72 insertions(+), 22 deletions(-) diff --git a/nemo-wallet.html b/nemo-wallet.html index b9e4790..aed506d 100644 --- a/nemo-wallet.html +++ b/nemo-wallet.html @@ -72,7 +72,13 @@ const exportMnemonicButton = document.getElementById('export-mnemonic-button') exportMnemonicButton.addEventListener('click', async (event) => { if (event.detail === 1) { - await exportMnemonic() + requestPassword(exportMnemonic) + } + }) + const exportSeedButton = document.getElementById('export-seed-button') + exportSeedButton.addEventListener('click', async (event) => { + if (event.detail === 1) { + requestPassword(exportSeed) } }) setTimeout(() => { @@ -167,6 +173,8 @@ } async function selectWallet () { + document.getElementById('export-mnemonic-button').disabled = true + document.getElementById('export-seed-button').disabled = true const walletSelect = document.getElementById('wallet') switch (walletSelect.value) { case undefined: @@ -221,6 +229,8 @@ try { document.getElementById('wallet-new').classList.add('hide') document.getElementById('wallet-import').classList.add('hide') + document.getElementById('export-mnemonic-button').disabled = false + document.getElementById('export-seed-button').disabled = false document.querySelector(location.hash).classList.remove('hide') await reloadAccountSelect() document.getElementById('account').value = '' @@ -585,39 +595,63 @@ qrCode.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDgAAAQ4AQMAAADW3v7MAAAABlBMVEUAAAD///+l2Z/dAAAC0klEQVR42u3cPQ6CMBiAYYWFjStwE6+mN+Mq3oCVxKQO4k8N6ABNWvK8G1+HPuuXNBzDIYuOHBwcHBwcHBwcHBwcHMU6rt3cyanf/raxmZu2AwcHBwcHBwcHBwcHR3GOdoiPLudUjvoWj6bLOTg4ODg4ODg4ODg4ynO8d62Q2BGqj52Rg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4Oj986Rg4ODg4ODg4ODg4NjlWMm///g4ODg4ODg4ODg4OBYcuQQBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHB8e+Hdcu/g4cHBwcHBwcHBwcHBz5Otrhaag4ODg4ODg4ODg4ODjKdnzvWo9O/faOsTnUNw4ODg4ODg4ODg4Ojj04XrvW1OWcxPF3n+Pg4ODg4ODg4ODg4CjIMTbPWUjjiOLg4ODg4ODg4ODg4OBYFwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHB8feHVEcHBwcHBwcHBwcHBwcvx0zcXBwcHBwcHBwcHBwcCw5coiDg4ODg4ODg4ODg4ODY013wW3C00//4ZIAAAAASUVORK5CYII=' } - async function exportMnemonic (password) { + async function requestPassword (callback) { const dialog = document.createElement('dialog') + dialog.classList.add('flex-y', 'center', 'mid') document.body.appendChild(dialog) - const form = document.createElement('form') - form.method = 'dialog' - dialog.appendChild(form) + const label = document.createElement('label') + label.textContent = 'Unlock wallet to continue' + label.id = 'unlock-modal-password-label' + label.for = 'unlock-modal-password-input' + dialog.appendChild(label) const input = document.createElement('input') + input.type = 'password' input.placeholder = 'Password' - form.appendChild(input) + input.id = 'unlock-modal-password-input' + dialog.appendChild(input) - const submit = document.createElement('input') - submit.type = 'submit' - submit.textContent = 'OK' - form.appendChild(submit) + const buttons = document.createElement('div') + buttons.classList.add('flex-x', 'center') + dialog.appendChild(buttons) - dialog.addEventListener('close', async () => { - const password = dialog.returnValue - try { - const wallet = await loadWallet() - await wallet.unlock(password) - const mnemonic = wallet.mnemonic - await wallet.lock(password) - notify.info(mnemonic) - } catch (err) { - console.error(err) - notify.error(`Error exporting mnemonic`) + const cancel = document.createElement('button') + cancel.textContent = 'Cancel' + cancel.addEventListener('click', (event) => { + input.value = '' + dialog.close() + dialog.remove() + }) + buttons.appendChild(cancel) + + const ok = document.createElement('button') + ok.textContent = 'OK' + ok.addEventListener('click', (event) => { + if (event.detail === 1) { + const password = input.value + cancel.click() + callback(password) } }) + buttons.appendChild(ok) + dialog.showModal() } + async function exportMnemonic (password) { + try { + const wallet = await loadWallet() + await wallet.unlock(password) + const mnemonic = wallet.mnemonic + await wallet.lock(password) + notify.info(mnemonic) + } catch (err) { + console.error(err) + notify.error(`Error exporting mnemonic`) + } + } + async function exportSeed (password) { try { const wallet = await loadWallet() @@ -699,6 +733,14 @@ h1 { text-align: center; } + dialog { + background-color: var(--theme-primary); + color: var(--theme-content); + margin: auto; + } + dialog::backdrop { + background-color: rgba(0, 0, 0, 0.5); + } label { margin-right: 0.5em; } @@ -724,6 +766,7 @@ display: flex; justify-content: center; margin: 0.5rem 0; + max-width: calc(var(--max-width) * 0.8); pointer-events: auto; position: relative; padding: 0.5rem; @@ -749,6 +792,10 @@ color: var(--theme-content); cursor: pointer; } + button[disabled] { + background-color: var(--theme-secondary); + cursor: not-allowed; + } a:hover, button:hover { filter: brightness(120%); @@ -1056,9 +1103,12 @@ - +

Licenses

-- 2.34.1