fix: on-enter key submit validation [WTEL-4384]

src/components/auth/login/steps/the-login-first-step.vue

@@ -3,7 +3,6 @@
     v-model.trim="domain"
     :label="$t('auth.domain')"
     :v="v$.domain"
-    @keyup.enter="emit('next')"
   />
 
   <div class="auth-form-actions">
@@ -27,6 +26,7 @@ import { required } from '@vuelidate/validators';
 import { computed, onMounted } from 'vue';
 import { useStore } from 'vuex';
 import domainValidator from '@webitel/ui-sdk/src/validators/domainValidator';
+import { useNextOnEnter } from '../../../../composables/useNextOnEnter.js';
 
 const props = defineProps({
   isSubmitting: {
@@ -55,11 +55,13 @@ const v$ = useVuelidate(
   { $autoDirty: true },
 );
 
-async function setProp(payload) {
-  return store.dispatch('auth/SET_PROPERTY', payload);
-}
-
 onMounted(() => {
   v$.value.$touch();
 });
+
+useNextOnEnter(() => !v$.value.$invalid && emit('next'));
+
+async function setProp(payload) {
+  return store.dispatch('auth/SET_PROPERTY', payload);
+}
 </script>

src/components/auth/login/steps/the-login-second-step.vue

@@ -12,7 +12,6 @@
         v-model.trim="username"
         :label="$t('vocabulary.login')"
         :v="v$.username"
-        @keyup.enter="emit('next')"
       />
 
       <wt-input
@@ -21,7 +20,6 @@
         :v="v$.password"
         type="password"
         has-show-password
-        @keyup.enter="emit('next')"
       />
 
       <wt-checkbox
@@ -56,6 +54,7 @@ import { required } from '@vuelidate/validators';
 import { computed, onMounted } from 'vue';
 import { useStore } from 'vuex';
 import LoginProviders from '../providers/the-login-providers.vue';
+import { useNextOnEnter } from '../../../../composables/useNextOnEnter.js';
 
 const emit = defineEmits(['back', 'next']);
 
@@ -90,6 +89,8 @@ const v$ = useVuelidate(
 
 onMounted(() => { v$.value.$touch() });
 
+useNextOnEnter(() => !v$.value.$invalid && emit('next'));
+
 async function setProp(payload) {
   return store.dispatch('auth/SET_PROPERTY', payload);
 }

src/components/auth/login/the-login.vue

@@ -94,23 +94,9 @@ export default {
         this.$emit('submit');
       }
     },
-
-    handleGlobalKeypress(event) {
-      if (event.key === 'Enter') {
-        if (event.ctrlKey) {
-          this.$emit('submit');
-        }
-        this.goNextStep();
-      }
-    },
-  },
-
-  mounted() {
-    window.addEventListener('keypress', this.handleGlobalKeypress);
   },
 
   unmounted() {
-    window.removeEventListener('keypress', this.handleGlobalKeypress);
     this.resetState();
   },
 };

src/components/auth/register/steps/the-register-first-step.vue

@@ -4,7 +4,6 @@
       v-model.trim="domain"
       :label="$t('auth.domain')"
       :v="v$.domain"
-      @keyup.enter="emit('next')"
     />
 
     <div class="auth-form-actions">
@@ -30,6 +29,7 @@ import { required } from '@vuelidate/validators';
 import { computed, onMounted } from 'vue';
 import { useStore } from 'vuex';
 import domainValidator from '@webitel/ui-sdk/src/validators/domainValidator';
+import { useNextOnEnter } from '../../../../composables/useNextOnEnter.js';
 
 const props = defineProps({
   isSubmitting: {
@@ -58,6 +58,8 @@ const v$ = useVuelidate(
   { $autoDirty: true },
 );
 
+useNextOnEnter(() => !v$.value.$invalid && emit('next'));
+
 async function setProp(payload) {
   return store.dispatch('auth/SET_PROPERTY', payload);
 }

src/components/auth/register/steps/the-register-second-step.vue

@@ -5,7 +5,6 @@
         v-model.trim="username"
         :label="$t('vocabulary.login')"
         :v="v$.username"
-        @keyup.enter="emit('next')"
       />
 
       <wt-input
@@ -53,6 +52,7 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, sameAs } from '@vuelidate/validators';
 import { computed, onMounted } from 'vue';
 import { useStore } from 'vuex';
+import { useNextOnEnter } from '../../../../composables/useNextOnEnter.js';
 
 const emit = defineEmits(['back', 'next']);
 
@@ -91,6 +91,8 @@ const v$ = useVuelidate(
   { $autoDirty: true },
 );
 
+useNextOnEnter(() => !v$.value.$invalid && emit('next'));
+
 async function setProp(payload) {
   return store.dispatch('auth/SET_PROPERTY', payload);
 };

src/components/auth/register/steps/the-register-third-step.vue

@@ -5,7 +5,6 @@
       :label="$t('auth.key')"
       :v="v$.certificate"
       @input="setProp({ prop: 'certificate', value: $event })"
-      @keyup.enter="emit('next')"
     />
 
     <div class="auth-form-actions">
@@ -29,6 +28,7 @@ import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { computed, onMounted } from 'vue';
 import { useStore } from 'vuex';
+import { useNextOnEnter } from '../../../../composables/useNextOnEnter.js';
 
 const emit = defineEmits(['back', 'next']);
 
@@ -46,9 +46,11 @@ const v$ = useVuelidate(
   { $autoDirty: true },
 );
 
+useNextOnEnter(() => !v$.value.$invalid && emit('next'));
+
 async function setProp(payload) {
   return store.dispatch('auth/SET_PROPERTY', payload);
-};
+}
 
 onMounted(() => { v$.value.$touch() });
 </script>

src/components/auth/register/the-register.vue

@@ -114,20 +114,9 @@ export default {
         this.$emit('submit');
       }
     },
-
-    handleGlobalKeypress(event) {
-      if (event.key === 'Enter') {
-        this.goNextStep();
-      }
-    },
-  },
-
-  mounted() {
-    window.addEventListener('keypress', this.handleGlobalKeypress);
   },
 
   unmounted() {
-    window.removeEventListener('keypress', this.handleGlobalKeypress);
     this.resetState();
   },
 };

src/composables/useNextOnEnter.js

@@ -0,0 +1,17 @@
+import { onMounted, onUnmounted } from 'vue';
+
+export const useNextOnEnter = (callback) => {
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      callback();
+    }
+  };
+
+  onMounted(() => {
+    window.addEventListener('keydown', handleKeyDown);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('keydown', handleKeyDown);
+  });
+};