From: Chris Duncan Date: Thu, 24 Oct 2024 21:25:01 +0000 (-0700) Subject: Assign some button handlers during page load instead of defining inline. Fix notifica... X-Git-Url: https://zoso.dev/?a=commitdiff_plain;h=39e355e495c19008714dadf792fdb9687f80d886;p=nemo-wallet.git Assign some button handlers during page load instead of defining inline. Fix notifications. Update CSS. --- diff --git a/app/pages/nemo-wallet.html b/app/pages/nemo-wallet.html index b055ac5..dde8479 100644 --- a/app/pages/nemo-wallet.html +++ b/app/pages/nemo-wallet.html @@ -66,6 +66,21 @@ async function loadUi () { console.log('loading ui') + const dialogs = document.querySelectorAll('dialog') + for (const dialog of dialogs) { + const cancelButtons = dialog.querySelectorAll('button.cancel') + for (const cancelButton of cancelButtons) { + cancelButton.addEventListener('click', (event) => { + cancelDialog(dialog.id) + }) + } + } + const clearStorageButton = document.querySelector('#clear-storage-button') + clearStorageButton.addEventListener('click', (event) => { + if (event.detail === 1) { + clearStorage() + } + }) setTimeout(() => { document.getElementsByTagName('body')[0].style.visibility = 'visible' }, 250) @@ -92,15 +107,17 @@ _show: (msg, color) => { const container = document.querySelector('#notifications') const notification = document.createElement('dialog') - notification.innerText = msg notification.style.color = color ?? notification.style.color - + notification.addEventListener('click', (event) => { + notification.close() + notification.remove() + }) container.appendChild(notification) notification.show() }, info: (msg) => notify._show(`ℹ️ ${msg}`), - ok: (msg) => notify._show(`☑️ ${msg}`, 'Cyan'), + ok: (msg) => notify._show(`☑️ ${msg}`), error: (msg) => notify._show(`⚠️ ${msg}`, 'Gold') } @@ -155,7 +172,7 @@ const select = document.querySelector('#wallet') switch (select.value) { case '': { - await updateAccountSelect(null) + await updateAccountSelect('') return } case '_new': { @@ -188,48 +205,34 @@ } } default: { - const wallets = await getFromStorage('wallets') - const walletData = wallets.find(w => { - const { id, algorithm } = JSON.parse(w) - return id === select.value - }) - const { id, algorithm } = JSON.parse(walletData) - const walletClass = getWalletClass(algorithm) - const wallet = await walletClass.restore(id) - await updateAccountSelect(wallet) - return wallet - } - } - } - - async function updateAccountSelect (wallet) { - const accountSelect = document.querySelector('#account') - if (wallet == null || wallet === '') { - accountSelect.value = '' - accountSelect.setAttribute('disabled', '') - return - } - switch (accountSelect.value) { - case '': { - accountSelect.removeAttribute('disabled') - return - } - case '_new': { try { - return await document.querySelector('#account-new').showModal() + const wallet = await loadWallet(select.value) + await updateAccountSelect(wallet) } catch (err) { - accountSelect.value = '' - notify.error(`Error creating account: ${err}`) + select.value = '' + notify.error(`Error loading wallet: ${err}`) return } } - default: { - accountSelect.removeAttribute('disabled') - return await wallet.accounts(accountSelect.value) - } } } + async function loadWallet (walletId) { + walletId ??= document.querySelector('#wallet')?.value + if (!walletId) { + throw new TypeError(`Wallet ID not found`) + } + const wallets = await getFromStorage('wallets') + const walletData = wallets.find(w => { + const { id, algorithm } = JSON.parse(w) + return id === walletId + }) + const { id, algorithm } = JSON.parse(walletData) + const walletClass = getWalletClass(algorithm) + const wallet = await walletClass.restore(id) + return wallet + } + async function createWallet () { const walletSelect = document.querySelector('#wallet') const form = document.querySelector('#wallet-new') @@ -269,9 +272,67 @@ } } - async function createAccount () { - const wallet = await updateWalletSelect() + function updateWalletForm (id) { + const form = document.querySelector(id) + if (!form) { + notify.error(`Form ID not found, contact developer`) + return + } + const algorithmContainer = document.querySelector(`${id} -algorithm`) + const algorithm = document.querySelector(`${id} -algorithm select`) + const typeContainer = document.querySelector(`${id} -type`) + const type = document.querySelector(`${id} -type select`) + const saltContainer = document.querySelector(`${id} -salt`) + const salt = document.querySelector(`${id} -salt input`) + if (algorithm.value === 'bip44' && type?.value !== 'seed') { + saltContainer.classList.remove('hide') + } else { + saltContainer.classList.add('hide') + } + const importValue = document.querySelector(`${id} -value input`) + const importValueLabel = document.querySelector(`${id} -value label`) + if (importValueLabel) { + importValueLabel.innerText = type.value + } + } + + async function updateAccountSelect (wallet) { + const accountSelect = document.querySelector('#account') + wallet ??= loadWallet() + if (wallet == null || wallet === '') { + accountSelect.value = '' + accountSelect.setAttribute('disabled', '') + return + } + switch (accountSelect.value) { + case '': { + accountSelect.removeAttribute('disabled') + return + } + case '_new': { + try { + return await document.querySelector('#account-new').showModal() + } catch (err) { + accountSelect.value = '' + notify.error(`Error creating account: ${err}`) + return + } + } + default: { + accountSelect.removeAttribute('disabled') + return await wallet.accounts(accountSelect.value) + } + } + } + + async function createAccount (wallet) { const accountSelect = document.querySelector('#account') + try { + wallet ??= await loadWallet() + } catch (err) { + notify.error(`Error creating account: ${err}`) + return + } const form = document.querySelector('#account-new') const name = form.querySelector('#account-new-name input').value if (name.substring(0, 1) === '_') { @@ -280,19 +341,21 @@ } const index = form.querySelector('#account-new-index input')?.value const password = form.querySelector('#account-new-password input')?.value - let account try { - console.log('locking') - console.log(await wallet.unlock(password)) - account = await wallet.accounts(index) - console.log('locking') - console.log(await wallet.lock(password)) + console.log(`locked wallet: ${wallet}`) + const unlockResult = await wallet.unlock(password) + console.log(`unlockResult: ${unlockResult}`) + console.log(`unlocked wallet: ${wallet}`) + const account = await wallet.accounts(index) + console.log(`account: ${account}`) + const lockResult = await wallet.lock(password) + console.log(`lockResult: ${lockResult}`) + console.log(`locked wallet: ${wallet}`) const accountData = { id: index, name: name || index } await addToStorage(`accounts`, JSON.stringify(accountData)) - const select = document.querySelector('#account') const option = new Option(accountData.name, accountData.id, false, true) select.add(option) await updateAccountSelect(wallet) @@ -305,41 +368,21 @@ } } - function updateWalletForm (id) { - const form = document.querySelector(id) - if (!form) { - notify.error(`Form ID not found, contact developer`) - return - } - const algorithmContainer = document.querySelector(`${id}-algorithm`) - const algorithm = document.querySelector(`${id}-algorithm select`) - const typeContainer = document.querySelector(`${id}-type`) - const type = document.querySelector(`${id}-type select`) - const saltContainer = document.querySelector(`${id}-salt`) - const salt = document.querySelector(`${id}-salt input`) - if (algorithm.value === 'bip44' && type?.value !== 'seed') { - saltContainer.classList.remove('hide') - } else { - saltContainer.classList.add('hide') - } - const importValue = document.querySelector(`${id}-value input`) - const importValueLabel = document.querySelector(`${id}-value label`) - if (importValueLabel) { - importValueLabel.innerText = type.value - } - } - - async function formCancel (id) { - const form = document.querySelector(id) - const inputs = form.querySelectorAll('input') - for (const input of inputs) { - input.value = '' + async function cancelDialog (id) { + const dialog = document.getElementById(id) + const fields = dialog.querySelectorAll('input, select') + for (const field of fields) { + field.value = '' } const wallet = document.querySelector('#wallet') if (wallet.value.substring(0, 1) === '_') { wallet.value = '' } - await form.close() + const account = document.querySelector('#account') + if (account.value.substring(0, 1) === '_') { + account.value = '' + } + await dialog.close() } async function showWallets () { @@ -358,7 +401,7 @@ for (const wallet of wallets) { const walletElement = document.createElement('label') await wallet.unlock('password') - walletElement.innerText = `${wallet.name}: ${wallet.mnemonic}` + walletElement.innerText = `${wallet.name}: ${wallet.mnemonic} ` await wallet.lock('password') walletElements.push(walletElement) } @@ -366,6 +409,8 @@ } async function clearStorage () { + const btn = document.querySelector('#clear-storage-button') + btn.setAttribute('disabled', '') sessionStorage.clear() const options = document.querySelectorAll('#wallet option, #account option') for (const option of options) { @@ -376,7 +421,8 @@ document.querySelector('#wallet').value = '' document.querySelector('#account').value = '' await updateWalletSelect() - notify.info(`Session storage cleared`) + notify.ok(`Session storage cleared`) + btn.removeAttribute('disabled') }