From 5afad8a47c2b980e68c9585d44c2a4a87980a2cd Mon Sep 17 00:00:00 2001 From: jojobyte <184880+jojobyte@users.noreply.github.com> Date: Sat, 10 Feb 2024 06:02:28 -0700 Subject: [PATCH] fix(ui): :children_crossing: improve errors for alias & style of keystore upload & seed phrase --- src/helpers/utils.js | 4 +++ src/rigs/phrase-generate.js | 2 ++ src/rigs/phrase-import.js | 70 +++++++++++++++++++++++++++++-------- src/styles/form.css | 8 +++-- 4 files changed, 67 insertions(+), 17 deletions(-) diff --git a/src/helpers/utils.js b/src/helpers/utils.js index 1b8ce98..d27a0d4 100644 --- a/src/helpers/utils.js +++ b/src/helpers/utils.js @@ -904,6 +904,10 @@ export async function getRandomWords(len = 32) { return await DashPhrase.generate(len) } +export async function verifyPhrase(phrase) { + return await DashPhrase.verify(phrase).catch(_ => false) +} + export function isUniqueAlias(aliases, preferredAlias) { return !aliases[preferredAlias] } diff --git a/src/rigs/phrase-generate.js b/src/rigs/phrase-generate.js index 22f9b95..1c4bac6 100644 --- a/src/rigs/phrase-generate.js +++ b/src/rigs/phrase-generate.js @@ -61,8 +61,10 @@ export let phraseGenerateRig = (async function (globals) { required spellcheck="false" autocomplete="off" + title="Enter a string with one or more characters, that starts & ends with a letter or number and may contain underscores (_), periods (.) & hyphens (-) in between. (E.g. john.doe, jane_doe, 1.dash_fan)" /> +

Name the wallet (similar to a username), shared when connecting with a contact.

diff --git a/src/rigs/phrase-import.js b/src/rigs/phrase-import.js index 116550e..079c7dd 100644 --- a/src/rigs/phrase-import.js +++ b/src/rigs/phrase-import.js @@ -2,6 +2,7 @@ import { lit as html } from '../helpers/lit.js' import { formDataEntries, readFile, + verifyPhrase, } from '../helpers/utils.js' import { ALIAS_REGEX, @@ -163,6 +164,7 @@ export let phraseImportRig = (async function (globals) { required spellcheck="false" autocomplete="off" + title="Enter a string with one or more characters, that starts & ends with a letter or number and may contain underscores (_), periods (.) & hyphens (-) in between. (E.g. john.doe, jane_doe, 1.dash_fan)" />

Name the wallet (similar to a username), shared when connecting with a contact.

@@ -191,20 +193,20 @@ export let phraseImportRig = (async function (globals) { state.render(state) resolve('cancel') } - console.log( - 'DIALOG handleClose', - state.modal.rendered[state.slugs.dialog], - ) + // console.log( + // 'DIALOG handleClose', + // state.modal.rendered[state.slugs.dialog], + // ) setTimeout(t => { state.modal.rendered[state.slugs.dialog] = null event?.target?.remove() - console.log( - 'DIALOG handleClose setTimeout', - state.delay, - // modal.rendered[state.slugs.dialog], - state.modal.rendered, - ) + // console.log( + // 'DIALOG handleClose setTimeout', + // state.delay, + // // modal.rendered[state.slugs.dialog], + // state.modal.rendered, + // ) }, state.delay) }, handleDragOver: state => async event => { @@ -212,7 +214,8 @@ export let phraseImportRig = (async function (globals) { event.stopPropagation() if ( - event.target.classList.contains('updrop') + event.target.classList.contains('updrop') && + !event.target.classList.contains('disabled') ) { console.log( 'PHRASE IMPORT DRAG OVER', @@ -230,7 +233,8 @@ export let phraseImportRig = (async function (globals) { event.stopPropagation() if ( - event.target.classList.contains('updrop') + event.target.classList.contains('updrop') && + !event.target.classList.contains('disabled') ) { console.log( 'PHRASE IMPORT DRAG LEAVE', @@ -248,7 +252,8 @@ export let phraseImportRig = (async function (globals) { event.stopPropagation() if ( - event.target.classList.contains('updrop') + event.target.classList.contains('updrop') && + !event.target.classList.contains('disabled') ) { console.log( 'PHRASE IMPORT DRAG END', @@ -266,7 +271,8 @@ export let phraseImportRig = (async function (globals) { event.stopPropagation() if ( - event.target.classList.contains('updrop') + event.target.classList.contains('updrop') && + !event.target.classList.contains('disabled') ) { console.log( 'PHRASE IMPORT DROP', @@ -313,6 +319,42 @@ export let phraseImportRig = (async function (globals) { state.render(state) } }, + handleInput: state => async event => { + if ( + event.target.name === 'pass' + ) { + event.preventDefault() + event.stopPropagation() + + let testPhrase = PHRASE_REGEX.test(event.target.value) + let updr = state.elements.form.querySelector('.updrop') + let updrField = updr?.querySelector('input[type="file"]') + + // console.log('phrase import handleInput', testPhrase) + + if (testPhrase) { + let tmpWallet = await verifyPhrase(event.target.value) + + state.validPhrase = testPhrase && tmpWallet + + // console.log('phrase import handleInput wallet', tmpWallet) + + if (tmpWallet) { + updr?.classList.add('disabled') + updrField.disabled = true + } else { + updr?.classList.remove('disabled') + updrField.disabled = false + } + } + if (state.validPhrase && !testPhrase) { + updr?.classList.remove('disabled') + updrField.disabled = false + state.validPhrase = testPhrase + } + } + }, + // PHRASE_REGEX handleSubmit: state => async event => { event.preventDefault() event.stopPropagation() diff --git a/src/styles/form.css b/src/styles/form.css index 75e68c2..6249fca 100644 --- a/src/styles/form.css +++ b/src/styles/form.css @@ -582,8 +582,8 @@ label[for], label:has(> input) { cursor: pointer; } -fieldset:not(:disabled) label[for], -fieldset:not(:disabled) label:has(> input) { +fieldset:not(:disabled) label[for]:not(.disabled), +fieldset:not(:disabled) label:has(> input:not(:disabled)) { cursor: pointer; } form[name="network"] { @@ -683,8 +683,10 @@ form[name="network"] { line-height: 2; } -.dropped ~ article { +.dropped ~ article, +.updrop.disabled { opacity: .35; + cursor: default; }