feat: create Modal component, rename InvitePopup to InviteModal and add invite generation

components/InviteModal.vue

@@ -1,13 +1,15 @@
 <template>
-  <div id="invite-popup">
+  <Modal title="Create an invite">
-    <div v-if="invite">
+    <div id="invite-popup">
-      <p>{{ invite }}</p>
+      <div v-if="invite">
-      <button @click="copyInvite">Copy Link</button>
+        <p>{{ invite }}</p>
+        <button @click="copyInvite">Copy Link</button>
+      </div>
+      <div v-else>
+        <button @click="generateInvite">Generate Invite</button>
+      </div>
     </div>
-    <div v-else>
+  </Modal>
-      <button @click="generateInvite">Generate Invite</button>
-    </div>
-  </div>
 </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

@@ -1,41 +1,39 @@
 <template>
-  <div class="modal-top-container">
+  <dialog ref="dialog" class="modal">
-    <div v-if="heavy" class="modal-container modal-heavy">
+    <h1 class="modal-title">{{ title }}</h1>
-    </div>
+    <slot />
-    <div v-else class="modal-container modal-light">
+  </dialog>
-    </div>
-    <div class="modal-div">
-      <slot />
-    </div>
-  </div>
 </template>
 
 <script lang="ts" setup>
 
-const props = defineProps<{ heavy?: boolean }>();
+const props = defineProps<{ title: string, heavy?: boolean }>();
+const dialog = ref<HTMLDialogElement>();
+
+onMounted(() => {
+  if (dialog) {
+    dialog.value?.showModal();
+  }
+});
+
 
 </script>
 
 <style>
-
+.modal {
-.modal-container {
-  position: fixed;
-  border: 1px solid cyan;
-  height: 100%;
-  width: 100%;
-  opacity: 70%;
-  z-index: 10;
-  background-color: var(--background-color);
-}
-
-.modal-div {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: rgb(50, 50, 50);
+  flex-direction: column;
   opacity: 100%;
-  z-index: 11;
   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 {
@@ -47,4 +45,7 @@ const props = defineProps<{ heavy?: boolean }>();
   width: 100%;
 }
 
+.modal-title {
+  font-size: 1.5rem;
+}
 </style>