From 989e9514f6b89807ccd1844ed40e1edbf6c8b21f Mon Sep 17 00:00:00 2001 From: Kuldeep Gupta Date: Fri, 18 Oct 2024 21:16:48 +0530 Subject: [PATCH 1/3] feat: add basic code structure for discord invite feature --- discord-invite/index.html | 27 +++++++++++++++++++++++++++ discord-invite/script.js | 9 +++++++++ discord-invite/style.css | 39 +++++++++++++++++++++++++++++++++++++++ index.html | 7 +++++++ 4 files changed, 82 insertions(+) create mode 100644 discord-invite/index.html create mode 100644 discord-invite/script.js create mode 100644 discord-invite/style.css diff --git a/discord-invite/index.html b/discord-invite/index.html new file mode 100644 index 00000000..fa3775cc --- /dev/null +++ b/discord-invite/index.html @@ -0,0 +1,27 @@ + + + + + + + + + Discord Invite + + + +
+

Create Discord invite for RDS Server

+
+ +
+ + +
+ + diff --git a/discord-invite/script.js b/discord-invite/script.js new file mode 100644 index 00000000..0681bd01 --- /dev/null +++ b/discord-invite/script.js @@ -0,0 +1,9 @@ +// Script file for discord-invite feature. +const discordInviteDescription = document.querySelector( + '#discord-invite-link-description', +); +const createInviteButton = document.querySelector('#create-discord-invite'); + +createInviteButton.addEventListener('click', () => { + console.log('Invite button clicked', discordInviteDescription.value); +}); diff --git a/discord-invite/style.css b/discord-invite/style.css new file mode 100644 index 00000000..6760ce5f --- /dev/null +++ b/discord-invite/style.css @@ -0,0 +1,39 @@ +:root { + font-family: 'Inter', sans-serif; + --color-primary: #1d1283; + --color-primary-hover: #11085c; + --color-button-hover: #2c1bc6; + --white: #fff; + --color-gray: #666; + --black-color: black; + --black-transparent: #000000a8; + --light-gray-color: lightgray; + --red-color: red; + --elevation-1: 0 1px 3px 1px rgba(0, 0, 0, 0.1), + 0 1px 2px 0 rgba(0, 0, 0, 0.1); + --elevation-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), + 0px 4px 8px 3px rgba(0, 0, 0, 0.15); + --color-green: green; + --color-red-variant1: #f43030; +} + +body { + font-family: 'Roboto', sans-serif; + margin: 0; + padding: 0; +} + +.header { + text-align: center; +} + +.container { + display: flex; + justify-content: center; + align-items: center; +} + +.create-discord-invite { + margin: 2rem; + padding: 10px; +} diff --git a/index.html b/index.html index b473a0bf..7743f72a 100644 --- a/index.html +++ b/index.html @@ -146,6 +146,13 @@ Applications + + Create Discord Invite +
+ +
diff --git a/discord-invite/script.js b/discord-invite/script.js index 0681bd01..248cff1f 100644 --- a/discord-invite/script.js +++ b/discord-invite/script.js @@ -1,8 +1,40 @@ // Script file for discord-invite feature. +import { createElement, getIsSuperUser, showToast } from './utils.js'; + const discordInviteDescription = document.querySelector( '#discord-invite-link-description', ); const createInviteButton = document.querySelector('#create-discord-invite'); +const loader = document.querySelector('.loader'); +const mainContainer = document.querySelector('.container'); +const subContainer = document.querySelector('.wrapper'); + +function changeLoaderVisibility({ hide }) { + if (hide) loader.classList.add('hidden'); + else loader.classList.remove('hidden'); +} + +(async function renderCardsInitial() { + changeLoaderVisibility({ hide: false }); + + const isSuperUser = await getIsSuperUser(); + + if (!isSuperUser) { + const unAuthorizedText = createElement({ + type: 'h1', + attributes: { class: 'unauthorized-text' }, + innerText: 'You are not authorized to view this page.', + }); + mainContainer.append(unAuthorizedText); + subContainer.classList.add('hidden'); + changeLoaderVisibility({ hide: true }); + return; + } + + subContainer.classList.remove('hidden'); + + changeLoaderVisibility({ hide: true }); +})(); createInviteButton.addEventListener('click', () => { console.log('Invite button clicked', discordInviteDescription.value); diff --git a/discord-invite/style.css b/discord-invite/style.css index 6760ce5f..add81230 100644 --- a/discord-invite/style.css +++ b/discord-invite/style.css @@ -28,6 +28,10 @@ body { } .container { + text-align: center; +} + +.wrapper { display: flex; justify-content: center; align-items: center; @@ -37,3 +41,16 @@ body { margin: 2rem; padding: 10px; } + +.hidden { + visibility: collapse; +} + +#toast { + position: fixed; + top: 20px; + right: -300px; + color: #fff; + padding: 15px; + border-radius: 5px; +} diff --git a/discord-invite/utils.js b/discord-invite/utils.js new file mode 100644 index 00000000..37ca0518 --- /dev/null +++ b/discord-invite/utils.js @@ -0,0 +1,54 @@ +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 }) { + const element = document.createElement(type); + Object.keys(attributes).forEach((item) => { + element.setAttribute(item, attributes[item]); + }); + element.textContent = innerText; + return element; +} + +async function getIsSuperUser() { + try { + const res = await fetch(`${BASE_URL}/users/self`, { + method: 'GET', + credentials: 'include', + headers: { + 'Content-type': 'application/json', + }, + }); + const self_user = await res.json(); + return self_user?.roles['super_user']; + } catch (error) { + console.error(error); + const errorMessage = error?.message || 'Something went wrong!'; + showToast({ message: errorMessage, type: 'error' }); + } +} + +function showToast({ message, type }) { + toast.innerText = message; + + if (type === 'success') { + toast.classList.add('success'); + toast.classList.remove('failure'); + } else { + toast.classList.add('failure'); + toast.classList.remove('success'); + } + + toast.classList.remove('hidden'); + toast.classList.add('animated_toast'); + + setTimeout(() => { + toast.classList.add('hidden'); + toast.classList.remove('animated_toast'); + }, 3000); +} + +export { createElement, getIsSuperUser, showToast }; From 127fbe4665bee42a69622093299203fe9bd701cc Mon Sep 17 00:00:00 2001 From: Kuldeep Gupta Date: Sat, 26 Oct 2024 03:38:05 +0530 Subject: [PATCH 3/3] feat: add functionality to create discord invites by superusers n times --- discord-invite/index.html | 4 ++++ discord-invite/script.js | 19 +++++++++++++++---- discord-invite/style.css | 15 ++++++++++++++- discord-invite/utils.js | 25 ++++++++++++++++++++++++- index.html | 2 +- 5 files changed, 58 insertions(+), 7 deletions(-) diff --git a/discord-invite/index.html b/discord-invite/index.html index 69463232..8a803912 100644 --- a/discord-invite/index.html +++ b/discord-invite/index.html @@ -25,6 +25,10 @@

Create Discord invite for RDS Server

Create Invite + diff --git a/discord-invite/script.js b/discord-invite/script.js index 248cff1f..834ad365 100644 --- a/discord-invite/script.js +++ b/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; }); diff --git a/discord-invite/style.css b/discord-invite/style.css index add81230..9eeab8e0 100644 --- a/discord-invite/style.css +++ b/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; +} diff --git a/discord-invite/utils.js b/discord-invite/utils.js index 37ca0518..17d815ef 100644 --- a/discord-invite/utils.js +++ b/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 }; diff --git a/index.html b/index.html index 7743f72a..270d9e6d 100644 --- a/index.html +++ b/index.html @@ -148,7 +148,7 @@ Create Discord Invite