From: Chris Duncan <chris@zoso.dev>
Date: Sun, 27 Oct 2024 05:09:59 +0000 (-0700)
Subject: Rename some variables and functions for clarity of usage. Convert dialogs to forms... 
X-Git-Url: https://zoso.dev/?a=commitdiff_plain;h=d67d03013955efe77521d7df8b65dff65e3dce86;p=nemo-wallet.git

Rename some variables and functions for clarity of usage. Convert dialogs to forms and start converting them to full content pages that display on top of other main pages so that URL hash doesn't need to change when creating wallets and accounts.
---

diff --git a/app/pages/nemo-wallet.html b/app/pages/nemo-wallet.html
index 3ce1d32..e4e0e3d 100644
--- a/app/pages/nemo-wallet.html
+++ b/app/pages/nemo-wallet.html
@@ -51,12 +51,12 @@
 
 		async function loadUi () {
 			console.log('loading ui')
-			const dialogs = document.querySelectorAll('dialog')
-			for (const dialog of dialogs) {
-				const cancelButtons = dialog.querySelectorAll('button.cancel')
+			const forms = document.querySelectorAll('form')
+			for (const form of forms) {
+				const cancelButtons = form.querySelectorAll('button.cancel')
 				for (const cancelButton of cancelButtons) {
 					cancelButton.addEventListener('click', (event) => {
-						cancelDialog(dialog.id)
+						cancelForm(form.parentElement.id)
 					})
 				}
 			}
@@ -72,10 +72,9 @@
 			console.log('loaded ui')
 		}
 
-		function switchPage (evt) {
-			console.log(evt)
-			const oldHash = new URL(evt.oldURL)?.hash
-			const newHash = new URL(evt.newURL)?.hash
+		function switchPage (event) {
+			const oldHash = new URL(event.oldURL)?.hash
+			const newHash = new URL(event.newURL)?.hash
 			if (oldHash) {
 				document.querySelector(oldHash)?.classList.remove('show')
 			}
@@ -163,7 +162,7 @@
 				}
 				case '_new': {
 					try {
-						await document.getElementById('wallet-new').showModal()
+						document.getElementById('wallet-new').classList.add('show')
 					} catch (err) {
 						walletSelect.value = ''
 						console.error(err)
@@ -174,7 +173,7 @@
 				}
 				case '_import': {
 					try {
-						await document.getElementById('wallet-import').showModal()
+						document.getElementById('wallet-import').classList.add('show')
 					} catch (err) {
 						walletSelect.value = ''
 						console.error(err)
@@ -302,7 +301,7 @@
 			switch (accountSelect.value) {
 				case '_new': {
 					try {
-						return await document.getElementById('account-new').showModal()
+						document.getElementById('account-new').classList.add('show')
 					} catch (err) {
 						accountSelect.value = ''
 						console.error(err)
@@ -410,9 +409,9 @@
 			}
 		}
 
-		async function cancelDialog (id) {
+		async function cancelForm (id) {
 			await resetDialogInputs()
-			await document.getElementById(id).close()
+			await document.getElementById(id).classList.remove('show')
 		}
 
 		async function resetDialogInputs () {
@@ -461,15 +460,29 @@
 		body {
 			background-color: var(--color-dark);
 			color: var(--color-light);
+			display: flex;
 			fill: var(--color-blue);
 			font-family: var(--text-body);
-			font-size: 16px;  /* required to prevent zoom on input focus on mobile */
-			height: 100vh;
-			margin: 0;
+			font-size: 16px !important;  /* prevents input focus zoom on mobile */
+			height: 100vh !important;
+			margin: 0 !important;
+			min-height: 100vh !important;
+			max-height: 100vh !important;
+		}
+		header {
+			padding: 0.5rem;
 		}
 		main {
 			height: 100%;
 		}
+		nav {
+			align-items: flex-end;
+			bottom: 0;
+			display: flex;
+			justify-content: space-evenly;
+			position: absolute;
+			width: 100%;
+		}
 		h1, h2, h3, h4, h5, h6 {
 			font-family: var(--text-heading);
 		}
@@ -610,9 +623,6 @@
 			grid-column-start: auto;
 			grid-column-end: span 12;
 		}
-		header {
-			padding: 0.5rem;
-		}
 		hr {
 			margin: revert !important;
 		}
@@ -650,6 +660,9 @@
 		.page.show {
 			display: initial;
 		}
+		.page.form {
+			z-index: 10;
+		}
 		.hide {
 			display: none;
 		}
@@ -671,14 +684,6 @@
 		:required:invalid {
 			border: 1px solid red;
 		}
-		nav {
-			align-items: flex-end;
-			bottom: 0;
-			display: flex;
-			justify-content: space-evenly;
-			position: absolute;
-			width: 100%;
-		}
 		nav > a {
 			border: 0;
 			display: flex;
@@ -725,95 +730,6 @@
 			</select>
 		</div>
 
-		<!-- New Wallet Form -->
-
-		<dialog id="wallet-new">
-			<div class="flex y-stretch">
-				<div id="wallet-new-name" class="flex x-left x-mid">
-					<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 x-mid">
-					<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>
-						<option value="bip44">BIP-44</option>
-						<option value="blake2b">BLAKE2b</option>
-					</select>
-				</div>
-				<div id="wallet-new-salt" class="flex x-left x-mid hide">
-					<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 x-mid">
-					<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>
-				<hr />
-				<div class="grid-x">
-					<div class="grid x-4"></div>
-					<button id="wallet-new-cancel" class="cancel grid x-4">Cancel</button>
-					<button id="wallet-new-ok" class="grid x-4" onclick="createWallet().then(w => { console.log(w) })">OK</button>
-				</div>
-			</div>
-		</dialog>
-
-		<!-- Import Wallet Form -->
-
-		<dialog id="wallet-import">
-			<div class="flex y-stretch">
-				<div id="wallet-import-name" class="flex x-left x-mid">
-					<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 x-mid">
-					<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>
-						<option value="bip44">BIP-44</option>
-						<option value="blake2b">BLAKE2b</option>
-					</select>
-				</div>
-				<div id="wallet-import-type" class="flex x-left x-mid hide">
-					<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>
-						<option value="mnemonic">Import mnemonic</option>
-						<option value="seed">Import seed</option>
-					</select>
-				</div>
-				<div id="wallet-import-value" class="flex x-left x-mid hide">
-					<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 />
-				</div>
-				<div id="wallet-import-salt" class="flex x-left x-mid hide">
-					<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 x-mid">
-					<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>
-				<hr />
-				<div class="grid-x">
-					<div class="grid x-4"></div>
-					<button id="wallet-import-cancel" class="cancel grid x-4">Cancel</button>
-					<button id="wallet-import-ok" class="grid x-4"
-						onclick="importWallet().then(w => { console.log(w) })">OK</button>
-				</div>
-			</div>
-		</dialog>
-
 		<!-- Account Select -->
 
 		<div id="accounts" class="grid-x">
@@ -825,39 +741,135 @@
 				<hr />
 			</select>
 		</div>
+	</header>
 
-		<!-- New Account Form -->
+	<!-- Main Content Pages -->
 
-		<dialog id="account-new">
-			<div class="flex y-stretch">
-				<div id="account-new-name" class="flex x-left x-mid">
-					<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 x-mid">
-					<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 x-mid">
-					<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 />
+	<main>
+
+		<!-- New Wallet Form -->
+
+		<div id="wallet-new" class="page">
+			<form>
+				<div class="flex y-stretch">
+					<div id="wallet-new-name" class="flex x-left x-mid">
+						<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 x-mid">
+						<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>
+							<option value="bip44">BIP-44</option>
+							<option value="blake2b">BLAKE2b</option>
+						</select>
+					</div>
+					<div id="wallet-new-salt" class="flex x-left x-mid hide">
+						<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 x-mid">
+						<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>
+					<hr />
+					<div class="grid-x">
+						<div class="grid x-4"></div>
+						<button id="wallet-new-cancel" class="cancel grid x-4">Cancel</button>
+						<button id="wallet-new-ok" class="grid x-4"
+							onclick="createWallet().then(w => { console.log(w) })">OK</button>
+					</div>
 				</div>
-				<div class="grid-x">
-					<div class="grid x-4"></div>
-					<button id="account-new-cancel" class="cancel grid x-4">Cancel</button>
-					<button id="account-new-ok" class="grid x-4"
-						onclick="createAccount().then(a => { console.log(a) })">OK</button>
+			</form>
+		</div>
+
+		<!-- Import Wallet Form -->
+
+		<div id="wallet-import" class="page">
+			<form>
+				<div class="flex y-stretch">
+					<div id="wallet-import-name" class="flex x-left x-mid">
+						<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 x-mid">
+						<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>
+							<option value="bip44">BIP-44</option>
+							<option value="blake2b">BLAKE2b</option>
+						</select>
+					</div>
+					<div id="wallet-import-type" class="flex x-left x-mid hide">
+						<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>
+							<option value="mnemonic">Import mnemonic</option>
+							<option value="seed">Import seed</option>
+						</select>
+					</div>
+					<div id="wallet-import-value" class="flex x-left x-mid hide">
+						<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 />
+					</div>
+					<div id="wallet-import-salt" class="flex x-left x-mid hide">
+						<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 x-mid">
+						<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>
+					<hr />
+					<div class="grid-x">
+						<div class="grid x-4"></div>
+						<button id="wallet-import-cancel" class="cancel grid x-4">Cancel</button>
+						<button id="wallet-import-ok" class="grid x-4"
+							onclick="importWallet().then(w => { console.log(w) })">OK</button>
+					</div>
 				</div>
-			</div>
-		</dialog>
-	</header>
+			</form>
+		</div>
 
-	<!-- Main Content Pages -->
+		<!-- New Account Form -->
 
-	<main>
+		<div id="account-new" class="page">
+			<form>
+				<div class="flex y-stretch">
+					<div id="account-new-name" class="flex x-left x-mid">
+						<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 x-mid">
+						<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 x-mid">
+						<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>
+					<div class="grid-x">
+						<div class="grid x-4"></div>
+						<button id="account-new-cancel" class="cancel grid x-4">Cancel</button>
+						<button id="account-new-ok" class="grid x-4"
+							onclick="createAccount().then(a => { console.log(a) })">OK</button>
+					</div>
+				</div>
+			</form>
+		</div>
 
 		<!-- Exchange Page -->