Fix dynamic visibility page content when selecting wallets and mnemonic/seed value...

diff --git a/nemo-wallet.html b/nemo-wallet.html
index 961003eab7b7666eb324ebc7a99ba898ea6ec928..464c944b0833a8b4041ffd28f61febd39fcaa2ec 100644 (file)
--- a/nemo-wallet.html
+++ b/nemo-wallet.html
@@ -213,6 +213,9 @@
                                }
                                default: {
                                        try {
+                                               document.getElementById('wallet-new').classList.add('hide')
+                                               document.getElementById('wallet-import').classList.add('hide')
+                                               document.querySelector(location.hash).classList.remove('hide')
                                                await reloadAccountSelect()
                                                document.getElementById('account').value = ''
                                        } catch (err) {
@@ -293,17 +296,21 @@
                        const algorithm = document.getElementById(`${id}-algorithm-select`)
                        const typeContainer = document.getElementById(`${id}-type`)
                        const type = document.getElementById(`${id}-type-select`)
+                       const importValueContainer = document.getElementById(`${id}-value`)
+                       const importValue = document.getElementById(`${id}-value-input`)
+                       const importValueLabel = document.getElementById(`${id}-value-label`)
                        const saltContainer = document.getElementById(`${id}-salt`)
                        const salt = document.getElementById(`${id}-salt-input`)
-                       if (algorithm.value === 'bip44' && type?.value !== 'seed') {
+                       if (algorithm.value === 'bip44' && type?.value === 'mnemonic') {
                                saltContainer.classList.remove('hide')
                        } else {
                                saltContainer.classList.add('hide')
                        }
-                       const importValue = document.getElementById(`${id}-value-input`)
-                       const importValueLabel = document.querySelector(`${id}-value label`)
+                       if (type?.value != null && type?.value !== '') {
+                               importValueContainer.classList.remove('hide')
+                       }
                        if (importValueLabel) {
-                               importValueLabel.innerText = type.value
+                               importValueLabel.textContent = type.value
                        }
                }
 
@@ -377,6 +384,7 @@
                        const accountOptions = accounts.map(a => {
                                return { text: a.name, value: a.index }
                        })
+                       resetQrCode()
                        await resetSelectOptions('account', accountOptions)
                }
 
@@ -500,6 +508,7 @@
                        const account = document.getElementById('account')
                        if (wallet.value === '' || account.value.substring(0, 1) === '_') {
                                account.value = ''
+                               resetQrCode()
                        }
                }
 
@@ -637,10 +646,6 @@
                h1 {
                        text-align: center;
                }
-               hr {
-                       border: 10px solid var(--theme-content) !important;
-                       height: 10px !important;
-               }
                label {
                        margin-right: 0.5em;
                }
@@ -836,12 +841,12 @@
                        <h1>New Wallet</h1>
                        <div class="flex-y stretch">
                                <div id="wallet-new-name" class="flex-x left mid">
-                                       <label for="wallet-new-name-input">Name</label>
+                                       <label id="wallet-new-name-label" for="wallet-new-name-input">Name</label>
                                        <input id="wallet-new-name-input" name="wallet-new-name" autocomplete="off" maxlength="80" pattern="[^_].*"
                                                placeholder="My Wallet" />
                                </div>
                                <div id="wallet-new-algorithm" class="flex-x left mid">
-                                       <label for="wallet-new-algorithm-select">Algorithm</label>
+                                       <label id="wallet-new-algorithm-label" for="wallet-new-algorithm-select">Algorithm</label>
                                        <select id="wallet-new-algorithm-select" name="wallet-new-algorithm" autocomplete="off"
                                                onchange="updateWalletForm('wallet-new')" required>
                                                <option disabled selected value>Choose...</option>
@@ -850,12 +855,12 @@
                                        </select>
                                </div>
                                <div id="wallet-new-salt" class="flex-x left mid hide">
-                                       <label for="wallet-new-salt-input">Salt</label>
+                                       <label id="wallet-new-salt-label" for="wallet-new-salt-input">Salt</label>
                                        <input id="wallet-new-salt-input" name="wallet-new-salt" type="password" autocomplete="off"
                                                placeholder="Optional" />
                                </div>
                                <div id="wallet-new-password" class="flex-x left mid">
-                                       <label for="wallet-new-password-input">Lock</label>
+                                       <label id="wallet-new-password-label" for="wallet-new-password-input">Lock</label>
                                        <input id="wallet-new-password-input" name="wallet-new-password" type="password" autocomplete="off"
                                                placeholder="Password" required />
                                </div>
@@ -874,12 +879,12 @@
                        <h1>Import Wallet</h1>
                        <div class="flex-y stretch">
                                <div id="wallet-import-name" class="flex-x left mid">
-                                       <label for="wallet-import-name-input">Name</label>
+                                       <label id="wallet-import-name-label" for="wallet-import-name-input">Name</label>
                                        <input id="wallet-import-name-input" name="wallet-import-name" autocomplete="off" maxlength="80"
                                                pattern="[^_].*" placeholder="My Wallet" />
                                </div>
                                <div id="wallet-import-algorithm" class="flex-x left mid">
-                                       <label for="wallet-import-algorithm-select">Algorithm</label>
+                                       <label id="wallet-import-algorithm-label" for="wallet-import-algorithm-select">Algorithm</label>
                                        <select id="wallet-import-algorithm-select" name="wallet-import-algorithm" autocomplete="off"
                                                onchange="updateWalletForm('wallet-import')" required>
                                                <option disabled selected value>Choose...</option>
@@ -887,8 +892,8 @@
                                                <option value="blake2b">BLAKE2b</option>
                                        </select>
                                </div>
-                               <div id="wallet-import-type" class="flex-x left mid hide">
-                                       <label for="wallet-import-type-select">Type</label>
+                               <div id="wallet-import-type" class="flex-x left mid">
+                                       <label id="wallet-import-type-label" for="wallet-import-type-select">Type</label>
                                        <select id="wallet-import-type-select" name="wallet-import-type" autocomplete="off"
                                                onchange="updateWalletForm('wallet-import')" required>
                                                <option disabled selected value>Choose...</option>
@@ -897,17 +902,18 @@
                                        </select>
                                </div>
                                <div id="wallet-import-value" class="flex-x left mid hide">
-                                       <label for="wallet-import-value-input" style="text-transform:capitalize"></label>
+                                       <label id="wallet-import-value-label" for="wallet-import-value-input"
+                                               style="text-transform:capitalize"></label>
                                        <input id="wallet-import-value-input" name="wallet-import-value" type="password" autocomplete="off"
-                                               placeholder="Password" required />
+                                               placeholder="" required />
                                </div>
                                <div id="wallet-import-salt" class="flex-x left mid hide">
-                                       <label for="wallet-import-salt-input">Salt</label>
+                                       <label id="wallet-import-salt-label" for="wallet-import-salt-input">Salt</label>
                                        <input id="wallet-import-salt-input" name="wallet-import-salt" type="password" autocomplete="off"
                                                placeholder="Optional" />
                                </div>
                                <div id="wallet-import-password" class="flex-x left mid">
-                                       <label for="wallet-import-password-input">Lock</label>
+                                       <label id="wallet-import-password-label" for="wallet-import-password-input">Lock</label>
                                        <input id="wallet-import-password-input" name="wallet-import-password" type="password" autocomplete="off"
                                                placeholder="Password" required />
                                </div>
@@ -926,17 +932,17 @@
                        <h1>New Account</h1>
                        <div class="flex-y stretch">
                                <div id="account-new-name" class="flex-x left mid">
-                                       <label for="account-new-name-input">Name</label>
+                                       <label id="account-new-name-label" for="account-new-name-input">Name</label>
                                        <input id="account-new-name-input" name="account-new-name" autocomplete="off" maxlength="80" pattern="[^_].*"
                                                placeholder="My Account" />
                                </div>
                                <div id="account-new-index" class="flex-x left mid">
-                                       <label for="account-new-index-input">Index</label>
+                                       <label id="account-new-index-label" for="account-new-index-input">Index</label>
                                        <input id="account-new-index-input" name="account-new-index" type="number" autocomplete="off" min="0"
                                                max="2147483647" required value="0" />
                                </div>
                                <div id="account-new-password" class="flex-x left mid">
-                                       <label for="account-new-password-input">Unlock</label>
+                                       <label id="account-new-password-label" for="account-new-password-input">Unlock</label>
                                        <input id="account-new-password-input" name="account-new-password" autocomplete="off" type="password"
                                                placeholder="Password" required />
                                </div>