From 473bc6f76a7c57d918ddba7fbff099bfc3687aa6 Mon Sep 17 00:00:00 2001
From: Chris Duncan <chris@zoso.dev>
Date: Sun, 3 Nov 2024 01:10:24 -0700
Subject: [PATCH] Fix dynamic visibility page content when selecting wallets
 and mnemonic/seed value when selecting import type. Remove hr styling added
 for testing. Reset QR code when reloading to no account. Add id for label
 elements in forms.

---
 nemo-wallet.html | 52 +++++++++++++++++++++++++++---------------------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/nemo-wallet.html b/nemo-wallet.html
index 961003e..464c944 100644
--- 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>
-- 
2.34.1