feat: implement invite modal in guild options menu

components/Banner.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+
+</style>

components/GuildOptionsMenu.vue

@@ -4,11 +4,13 @@
       <button class="guild-option-button" @click="setting.action">{{ setting.name }}</button>
     </div>
   </div>
+  <InviteModal ref="modal" v-if="showInviteModal" />
 </template>
 
 <script lang="ts" setup>
-import { InvitePopup } from '#components';
+import { InviteModal } from '#components';
 
+const modal = ref<HTMLDialogElement>();
 
 const showInviteModal = ref(false);
 
@@ -17,16 +19,33 @@ const settings = [
   { name: "Invite", icon: "lucide:letter", action: openInviteModal }
 ]
 
+onMounted(() => {
+  if (modal.value) {
+    modal.value.addEventListener("close", () => {
+      console.log("MODAL CLOSED");
+      showInviteModal.value = false;
+    });
+
+    modal.value.addEventListener("cancel", () => {
+      console.log("MODAL CANCELED");
+      showInviteModal.value = false;
+    });
+  }
+});
+
 function openInviteModal() {
-  //showInviteModal.value = !showInviteModal.value;
-  //const invitePopup = createApp(InvitePopup);
-  //invitePopup
+  showInviteModal.value = true;
+  const invitePopup = h(InviteModal);
+}
+
+function toggleInviteModal(e: Event) {
+  e.preventDefault();
+  showInviteModal.value = !showInviteModal.value;
 }
 
 </script>
 
 <style>
-
 #guild-options-container {
   display: flex;
   flex-direction: column;
@@ -54,5 +73,4 @@ function openInviteModal() {
   background-color: transparent;
   color: var(--main-text-color);
 }
-
 </style>

components/InviteModal.vue

@@ -1,13 +1,15 @@
 <template>
-  <div id="invite-popup">
-    <div v-if="invite">
-      <p>{{ invite }}</p>
-      <button @click="copyInvite">Copy Link</button>
+  <Modal title="Create an invite">
+    <div id="invite-popup">
+      <div v-if="invite">
+        <p>{{ invite }}</p>
+        <button @click="copyInvite">Copy Link</button>
+      </div>
+      <div v-else>
+        <button @click="generateInvite">Generate Invite</button>
+      </div>
     </div>
-    <div v-else>
-      <button @click="generateInvite">Generate Invite</button>
-    </div>
-  </div>
+  </Modal>
 </template>
 
 <script lang="ts" setup>
@@ -19,9 +21,14 @@ const invite = ref<string>();
 const route = useRoute();
 
 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/${route.params.serverId}/invites`,
-    { method: "POST", body: { custom_id: "oijewfoiewf" } }
+    { method: "POST", body: { custom_id: randCode } }
   );
 
   invite.value = createdInvite?.id;

components/Modal.vue

@@ -0,0 +1,51 @@
+<template>
+  <dialog ref="dialog" class="modal">
+    <h1 class="modal-title">{{ title }}</h1>
+    <slot />
+  </dialog>
+</template>
+
+<script lang="ts" setup>
+
+const props = defineProps<{ title: string, heavy?: boolean }>();
+const dialog = ref<HTMLDialogElement>();
+
+onMounted(() => {
+  if (dialog) {
+    dialog.value?.showModal();
+  }
+});
+
+
+</script>
+
+<style>
+.modal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  opacity: 100%;
+  padding: 1%;
+  background-color: var(--background-color);
+  color: var(--main-text-color);
+}
+
+.modal::backdrop {
+  background-color: rgb(50, 50, 50);
+  opacity: 70%;
+}
+
+.modal-top-container {
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+
+.modal-title {
+  font-size: 1.5rem;
+}
+</style>

pages/servers/[serverId]/channels/[channelId].vue

@@ -7,7 +7,6 @@
 					<Icon id="server-settings-icon" name="lucide:chevron-down" />
 				</button>
 				<GuildOptionsMenu v-if="showGuildSettings" />
-				<InvitePopup v-if="showInvitePopup" />
 			</div>
 			<div id="channels-list">
 				<Channel v-for="channel of channels" :name="channel.name"
@@ -77,7 +76,6 @@ function toggleInvitePopup(e: Event) {
 </script>
 
 <style>
-
 #middle-left-column {
 	padding-left: 1dvw;
 	padding-right: 1dvw;
@@ -108,7 +106,7 @@ function toggleInvitePopup(e: Event) {
 	gap: 1em;
 	align-items: center;
 	text-align: left;
-	
+
 }
 
 #channels-list {
@@ -147,5 +145,4 @@ function toggleInvitePopup(e: Event) {
 	border: none;
 	padding: 0%;
 }
-
 </style>