70 lines
No EOL
1.8 KiB
Vue
70 lines
No EOL
1.8 KiB
Vue
<template>
|
|
<ModalBase v-bind="props" :title="props.title || 'Create an invite'">
|
|
<div v-if="invite" id="invite-body">
|
|
<div id="invite-label">{{ invite }}</div>
|
|
<div id="invite-buttons">
|
|
<Button text="Copy as link" variant="neutral" :callback="() => copyInvite('link')" />
|
|
<Button text="Copy as code" variant="neutral" :callback="() => copyInvite('code')" />
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<Button text="Generate Invite" variant="normal" :callback="generateInvite">Generate Invite</Button>
|
|
</div>
|
|
</ModalBase>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import type { InviteResponse, ModalProps } from '~/types/interfaces';
|
|
import Button from '~/components/UserInterface/Button.vue';
|
|
|
|
const props = defineProps<ModalProps & { guildId: string }>();
|
|
|
|
const invite = ref<string>();
|
|
|
|
async function generateInvite(): Promise<void> {
|
|
const chars = "ABCDEFGHIJKLMNOQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890"
|
|
let randCode = "";
|
|
for (let i = 0; i < 6; i++) {
|
|
randCode += chars[Math.floor(Math.random() * chars.length)];
|
|
}
|
|
const createdInvite: InviteResponse | undefined = await fetchWithApi(
|
|
`/guilds/${props.guildId}/invites`,
|
|
{ method: "POST", body: { custom_id: randCode } }
|
|
);
|
|
|
|
invite.value = createdInvite?.id;
|
|
return;
|
|
}
|
|
|
|
function copyInvite(type: "link" | "code") {
|
|
if (!invite.value) return;
|
|
|
|
if (type == "link") {
|
|
const inviteUrl = URL.parse(`invite/${invite.value}`, `${window.location.protocol}//${window.location.host}`);
|
|
if (inviteUrl) {
|
|
navigator.clipboard.writeText(inviteUrl.href);
|
|
}
|
|
} else {
|
|
navigator.clipboard.writeText(invite.value);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
#invite-body, #invite-buttons {
|
|
display: flex;
|
|
gap: 1em;
|
|
}
|
|
|
|
#invite-body {
|
|
flex-direction: column;
|
|
}
|
|
|
|
#invite-label {
|
|
text-align: center;
|
|
color: aquamarine;
|
|
}
|
|
|
|
</style> |