Merge pull request #370 from threefoldtech/development_fix_connector_…

…password

Fix password input validation

packages/playground/src/components/dynamic_tabs.vue

@@ -50,12 +50,18 @@ const props = defineProps<{
   destroy?: boolean;
   hideTabs?: boolean;
 }>();
-const emits = defineEmits<{ (event: "update:modelValue", value: number): void }>();
+const emits = defineEmits<{
+  (event: "update:modelValue", value: number): void;
+  (event: "tab:change", value: number): void;
+}>();
 
 const forms = ref<any[]>([]);
 
 const activeTab = ref<number>(props.modelValue ?? 0);
-watch(activeTab, t => emits("update:modelValue", t));
+watch(activeTab, t => {
+  emits("update:modelValue", t);
+  emits("tab:change", t);
+});
 
 const valid = computed(() => forms.value.reduce((r, f) => r && f.valid, true));
 const invalid = computed(() => !valid.value);

packages/playground/src/weblets/profile_manager.vue

@@ -45,6 +45,7 @@
           { title: 'Register', value: 'register' },
         ]"
         v-model="activeTab"
+        @tab:change="passwordInput.validate(password)"
       >
         <v-container>
           <form-validator v-model="isValidForm">
@@ -94,6 +95,7 @@
                   validatePassword,
                 ]"
                 #="{ props: validationProps }"
+                ref="passwordInput"
               >
                 <v-text-field
                   label="Password"
@@ -245,7 +247,7 @@
 import { validateMnemonic } from "bip39";
 import Cryptr from "cryptr";
 import md5 from "md5";
-import { onMounted, ref, watch } from "vue";
+import { onMounted, type Ref, ref, watch } from "vue";
 import { generateKeyPair } from "web-ssh-keygen";
 
 import { useProfileManager } from "../stores";
@@ -271,6 +273,7 @@ const balance = ref<Balance>();
 
 const activeTab = ref(0);
 const password = ref("");
+const passwordInput = ref() as Ref<{ validate(value: string): Promise<boolean> }>;
 
 let interval: any;
 watch(