0

The field is email, and it's the last field the user has to complete in order to send an invitation to an external user to join the platform.

the validation checks if the email is already being used, basically ⇒ if the email is already registered ⇒ throw error. This maintains the submit button disabled. The issue I'm having here is that until the promise resolves (for this punctual validation), which is about 1/2sec the field turns ok validated and the submit button becomes enable. If the user is quick (and you know, there's connection speed and other factors in the equation...) he can send an invitation and cause trouble/ terrific user excperience.

how can i make it work backwards => field not approved until promise finished?

Here's the code:

<template>
        <Input
          id="invite-email"
          name="invite-email"
          class="w-full"
          :errors="v$.email.$errors"
          v-model="v$.email.$model"
          :invitePlayer="true"
        >
          {{ t('placeholder.email') }}
        </Input>
</template>

<script lang="ts">
import { useVuelidate } from '@vuelidate/core'
import { required, email, minLength, helpers } from '@vuelidate/validators'
import { checkEmail } from '@/utils/validators'

const v$ = useVuelidate(rules, form)
    const invite = async (): Promise<void> => {
      loading.value = true
      try {
        const invitedUserResult: Guest = await store.dispatch('inviteUser', {
          ...Object.fromEntries(
            Object.entries(form).filter(([_, v]) => v !== '')
          ),
          fromUserID: store.state.user._id
        })
        console.log('invitedUserResult', invitedUserResult)

        invitedUser.value = invitedUserResult
        invitationLink.value = invitedUserResult.shortLink
        showInviteSuccess.value = true
      } catch (err) {
        console.log(err)
      }
      loading.value = false
    }


</script>

I tried to keep only the relevant code, tell me if you need more, thanks a lot!

1 Answer 1

1

I think you should use loading value to keep field disabled when promise hasn't been resolved yet. You can pass it as a prop to the component.

I also recommed to wrap loading.value = false with finally to be sure it's always executed, even if there is an error thrown.

try {...}
catch (err) {
  console.log(err)
} finally {
  loading.value = false
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.