Create modal function for requesting password to unlock wallet. Style dialog modals...

diff --git a/nemo-wallet.html b/nemo-wallet.html
index b9e4790072db0f52468bc6580c42d1013e770235..aed506d52a8461c2b60c46f6e56b3e81bf00f375 100644 (file)
--- 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 @@
                                <button id="clear-storage-button">
                                        Clear Storage
                                </button>
-                               <button id="export-mnemonic-button">
+                               <button id="export-mnemonic-button" disabled>
                                        Export Mnemonic
                                </button>
+                               <button id="export-seed-button" disabled>
+                                       Export Seed
+                               </button>
                        </div>
                        <article>
                                <h2>Licenses</h2>