forked from hoppscotch/hoppscotch
-
Notifications
You must be signed in to change notification settings - Fork 1
/
InviteModal.vue
68 lines (61 loc) 路 1.31 KB
/
InviteModal.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<template>
<HoppSmartModal
v-if="show"
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();
withDefaults(
defineProps<{
show: boolean;
}>(),
{
show: false,
}
);
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>