feat: add functionality to create discord invites by superusers n times

discord-invite/index.html

@@ -25,6 +25,10 @@ <h1>Create Discord invite for RDS Server</h1>
           Create Invite
         </button>
       </div>
+      <div class="show-data-wrapper hidden">
+        <p class="invite-purpose"></p>
+        <p class="discord-invite-link" />
+      </div>
     </div>
   </body>
 </html>

discord-invite/script.js

@@ -1,5 +1,9 @@
 // Script file for discord-invite feature.
-import { createElement, getIsSuperUser, showToast } from './utils.js';
+import {
+  createElement,
+  getIsSuperUser,
+  generateDiscordInviteLink,
+} from './utils.js';
 
 const discordInviteDescription = document.querySelector(
   '#discord-invite-link-description',
@@ -8,6 +12,9 @@ const createInviteButton = document.querySelector('#create-discord-invite');
 const loader = document.querySelector('.loader');
 const mainContainer = document.querySelector('.container');
 const subContainer = document.querySelector('.wrapper');
+const showDataWrapper = document.querySelector('.show-data-wrapper');
+const invitePurpose = document.querySelector('.invite-purpose');
+const discordInviteLink = document.querySelector('.discord-invite-link');
 
 function changeLoaderVisibility({ hide }) {
   if (hide) loader.classList.add('hidden');
@@ -21,7 +28,7 @@ function changeLoaderVisibility({ hide }) {
 
   if (!isSuperUser) {
     const unAuthorizedText = createElement({
-      type: 'h1',
+      type: 'h2',
       attributes: { class: 'unauthorized-text' },
       innerText: 'You are not authorized to view this page.',
     });
@@ -36,6 +43,10 @@ function changeLoaderVisibility({ hide }) {
   changeLoaderVisibility({ hide: true });
 })();
 
-createInviteButton.addEventListener('click', () => {
-  console.log('Invite button clicked', discordInviteDescription.value);
+createInviteButton.addEventListener('click', async () => {
+  const data = await generateDiscordInviteLink(discordInviteDescription.value);
+  subContainer.classList.add('hidden');
+  showDataWrapper.classList.remove('hidden');
+  invitePurpose.innerHTML = data.purpose;
+  discordInviteLink.innerHTML = data.inviteLink;
 });

discord-invite/style.css

@@ -43,7 +43,7 @@ body {
 }
 
 .hidden {
-  visibility: collapse;
+  visibility: hidden;
 }
 
 #toast {
@@ -54,3 +54,16 @@ body {
   padding: 15px;
   border-radius: 5px;
 }
+
+.success {
+  background: var(--color-green);
+}
+
+.failure {
+  background: var(--color-red-variant1);
+}
+
+.animated_toast {
+  animation: slideIn 0.5s ease-in-out forwards,
+    slideOut 0.5s ease-in-out 2.5s forwards;
+}

discord-invite/utils.js

@@ -2,6 +2,7 @@ const BASE_URL =
   window.location.hostname === 'localhost'
     ? 'https://staging-api.realdevsquad.com'
     : window.API_BASE_URL;
+
 const toast = document.getElementById('toast');
 
 function createElement({ type, attributes = {}, innerText }) {
@@ -31,6 +32,28 @@ async function getIsSuperUser() {
   }
 }
 
+async function generateDiscordInviteLink(purpose) {
+  const body = {
+    purpose,
+  };
+  try {
+    const res = await fetch(`${BASE_URL}/discord-actions/invite?dev=true`, {
+      method: 'POST',
+      credentials: 'include',
+      body: JSON.stringify(body),
+      headers: {
+        'Content-type': 'application/json',
+      },
+    });
+    const data = await res.json();
+    return data;
+  } catch (error) {
+    console.error(error);
+    const errorMessage = error?.message || 'Something went wrong!';
+    showToast({ message: errorMessage, type: 'error' });
+  }
+}
+
 function showToast({ message, type }) {
   toast.innerText = message;
 
@@ -51,4 +74,4 @@ function showToast({ message, type }) {
   }, 3000);
 }
 
-export { createElement, getIsSuperUser, showToast };
+export { createElement, getIsSuperUser, showToast, generateDiscordInviteLink };

index.html

@@ -148,7 +148,7 @@
       </a>
       <a
         id="discord-invite-button"
-        href="/discord-invite"
+        href="/discord-invite?dev=true"
         class="action-button"
       >
         Create Discord Invite