@@ -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);
}
diff --git a/src/components/auth/register/steps/the-register-second-step.vue b/src/components/auth/register/steps/the-register-second-step.vue
index 1f4af97e..685c2c71 100644
--- a/src/components/auth/register/steps/the-register-second-step.vue
+++ b/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')"
/>
!v$.value.$invalid && emit('next'));
+
async function setProp(payload) {
return store.dispatch('auth/SET_PROPERTY', payload);
};
diff --git a/src/components/auth/register/steps/the-register-third-step.vue b/src/components/auth/register/steps/the-register-third-step.vue
index 049bfdd0..f0fbe951 100644
--- a/src/components/auth/register/steps/the-register-third-step.vue
+++ b/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')"
/>
@@ -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() });
diff --git a/src/components/auth/register/the-register.vue b/src/components/auth/register/the-register.vue
index a3aa58ef..8454ba9b 100644
--- a/src/components/auth/register/the-register.vue
+++ b/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();
},
};
diff --git a/src/composables/useNextOnEnter.js b/src/composables/useNextOnEnter.js
new file mode 100644
index 00000000..88a48a52
--- /dev/null
+++ b/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);
+ });
+};