BAN address in the setup page should be validated

tigwyk commented 3 years ago

I found an elegant one-liner regex for validating the address format, but it doesn't seem to prevent Vue from allowing the user to continue to the next step.

In Setup.vue, in the step for Banano Address, under the Banano Address q-input, I added: :rules="[val => val.match(/^ban_[13][0-13-9a-km-uw-z]{59}$/) || 'Invalid BAN address']"

This tries to match the filled-in value to the regex and it correctly pops up some text under the address field saying "Invalid BAN Address" if the formatting is wrong:

Unfortunately I'm not sure how to make it so this validation failure actually halts the process. Right now, even if the user enters a badly formatted address they're still able to click "Continue" on this form.

wrap-that-potassium commented 3 years ago

Cool! I'll have a look at this and let you know what's missing. I'll probably fix the font issue (color and size) of the error messages on this page as well.

wrap-that-potassium commented 3 years ago

@tigwyk fyi, only a small amount of changes were needed on top of what you tried:

<q-form @submit="step = 2">
  <q-input
    v-model="banAddress"
    label="Banano Address"
    class="banano-address"
    dense
    autofocus
    :rules="[
      val => !!val || 'Banano address is required',
      val => val.match(/^ban_[13][0-13-9a-km-uw-z]{59}$/) || 'Invalid Banano address'
    ]"
  />
  <q-stepper-navigation>
    <q-btn type="submit" color="primary" text-color="black" label="Continue" />
  </q-stepper-navigation>
</q-form>

Mostly wrapping the <q-input> within a <q-form> and calling the "action" (step = 2) from the form submit instead of a click on the submit button.

wBanano / wban-dApp

BAN address in the setup page should be validated #8