diff --git a/src/components/auth/login/steps/the-login-first-step.vue b/src/components/auth/login/steps/the-login-first-step.vue index 07ced415..c1ab961d 100644 --- a/src/components/auth/login/steps/the-login-first-step.vue +++ b/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')" />
@@ -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); +} diff --git a/src/components/auth/login/steps/the-login-second-step.vue b/src/components/auth/login/steps/the-login-second-step.vue index 2cd8ca4d..e28a41a7 100644 --- a/src/components/auth/login/steps/the-login-second-step.vue +++ b/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')" /> { v$.value.$touch() }); +useNextOnEnter(() => !v$.value.$invalid && emit('next')); + async function setProp(payload) { return store.dispatch('auth/SET_PROPERTY', payload); } diff --git a/src/components/auth/login/the-login.vue b/src/components/auth/login/the-login.vue index 219e6dd5..f5fb7917 100644 --- a/src/components/auth/login/the-login.vue +++ b/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(); }, }; diff --git a/src/components/auth/register/steps/the-register-first-step.vue b/src/components/auth/register/steps/the-register-first-step.vue index 7d2ba2a8..d5c7ae9d 100644 --- a/src/components/auth/register/steps/the-register-first-step.vue +++ b/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')" />
@@ -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); + }); +};