Make testnet faucet page more efficient by adding input validation #259

src/pages/testnet/DevelopersPage.vue

@@ -16,6 +16,27 @@
             submitting: false,
         };
     },
+    computed: {
+      isCreateAccountButtonDisabled() {
+        return (
+            !this.form.account_name ||
+            !this.form.owner_key ||
+            !this.form.active_key ||
+            this.submitting
+        );
+      },
+      isAnyInputInvalid() {
+        return (
+          !this.form.account_name ||
+          (!/^EOS[0-9A-Za-z]{50}$|^PUB_K1_[0-9A-Za-z]{50}$/i.test(
+            this.form.owner_key
+          )) ||
+          (!/^EOS[0-9A-Za-z]{50}$|^PUB_K1_[0-9A-Za-z]{50}$/i.test(
+            this.form.active_key
+          ))
+        );
+      },
+    },
     methods: {
         ...mapActions('testnet', ['faucet', 'evmFaucet', 'account']),
         async onFaucet() {
@@ -85,13 +106,16 @@
         ref="owner_key"
         v-model="form.owner_key"
         color="accent"
+        :rules="[ val => (/^EOS[0-9A-Za-z]{50}$|^PUB_K1_[0-9A-Za-z]{50}$/i.test(val)) || 'Please provide a valid Owner key']"
         label="Owner key"
         outlined
       )
       q-input.q-mb-lg(
         ref="active_key"
         v-model="form.active_key"
         color="accent"
+        :rules="[ val => (/^EOS[0-9A-Za-z]{50}$|^PUB_K1_[0-9A-Za-z]{50}$/i.test(val)) || 'Please provide a valid Active key']"
+
         label="Active key"
         outlined
       )
@@ -101,6 +125,7 @@
         size="lg"
         unelevated
         :loading="submitting"
+        :disable="isAnyInputInvalid"
         @click="onAccount"
       )