* feat: new helper functions for better error management * refactor: new i18n strings * refactor: better error handling in invite modal and members component * refactor: better user management * refactor: better error handling in config handler * refactor: updated logic of dynamic action row * refactor: better naming for computed properties * feat: new error message when an admin tries to invite himself * refactor: updated error message when user is already invited * refactor: reverted i18n string for user already invited back to the old string * refactor: removed show prop from invite modal * refactor: improved implementation for getting the compiled error messages * feat: new error message when email inputted is of an invalid format * refactor: minor optimization --------- Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>
58 lines
1.2 KiB
Vue
58 lines
1.2 KiB
Vue
<template>
|
|
<HoppSmartModal
|
|
dialog
|
|
:title="t('users.invite_user')"
|
|
@close="emit('hide-modal')"
|
|
>
|
|
<template #body>
|
|
<HoppSmartInput
|
|
v-model="email"
|
|
:label="t('users.email_address')"
|
|
input-styles="floating-input"
|
|
@submit="sendInvite"
|
|
/>
|
|
</template>
|
|
<template #footer>
|
|
<span class="flex space-x-2">
|
|
<HoppButtonPrimary
|
|
:label="t('users.send_invite')"
|
|
@click="sendInvite"
|
|
/>
|
|
<HoppButtonSecondary
|
|
:label="t('users.cancel')"
|
|
outline
|
|
filled
|
|
@click="hideModal"
|
|
/>
|
|
</span>
|
|
</template>
|
|
</HoppSmartModal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useI18n } from '~/composables/i18n';
|
|
import { useToast } from '~/composables/toast';
|
|
|
|
const t = useI18n();
|
|
const toast = useToast();
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'hide-modal'): void;
|
|
(event: 'send-invite', email: string): void;
|
|
}>();
|
|
|
|
const email = ref('');
|
|
|
|
const sendInvite = () => {
|
|
if (email.value.trim() === '') {
|
|
toast.error(t('users.valid_email'));
|
|
return;
|
|
}
|
|
emit('send-invite', email.value);
|
|
};
|
|
|
|
const hideModal = () => {
|
|
emit('hide-modal');
|
|
};
|
|
</script>
|