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)
})
}
}
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')
}
}
case '_new': {
try {
- await document.getElementById('wallet-new').showModal()
+ document.getElementById('wallet-new').classList.add('show')
} catch (err) {
walletSelect.value = ''
console.error(err)
}
case '_import': {
try {
- await document.getElementById('wallet-import').showModal()
+ document.getElementById('wallet-import').classList.add('show')
} catch (err) {
walletSelect.value = ''
console.error(err)
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)
}
}
- 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 () {
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);
}
grid-column-start: auto;
grid-column-end: span 12;
}
- header {
- padding: 0.5rem;
- }
hr {
margin: revert !important;
}
.page.show {
display: initial;
}
+ .page.form {
+ z-index: 10;
+ }
.hide {
display: none;
}
: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;
</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">
<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 -->
projects / nemo-wallet.git / commitdiff