Add custom slug functionality

adhirajpandey · Mar 26, 2024 · a12271a · a12271a
1 parent a298f27
commit a12271a
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ Check it out - https://clipper.adhirajpandey.me/
 -   [x] Rate Limiting
 -   [x] Password Protect Clips
 -   [x] Google Auth
--   [ ] Auto Expire Clips
--   [ ] Custom Slug for Clip
+-   [x] Custom Slug for Clip
 -   [x] QR Code for Clip
 -   [x] User Dashboard
+-   [ ] Auto Expire Clip
diff --git a/controllers/premium.js b/controllers/premium.js
@@ -3,6 +3,7 @@ const { HTML_DIR } = require("../configs/index")
 const Clipboard = require("../models/clip")
 const generateClipId = require("../utils/generateClipId")
 const generateQR = require("../utils/generateQR")
+const ifSlugAvailable = require("../utils/customSlug")
 
 async function premiumClipper(req, resp) {
 	try {
@@ -16,9 +17,22 @@ async function premiumClipper(req, resp) {
 async function premiumClipSave(req, resp) {
 	try {
 		const clipboardText = req.body.clipboardText
-		const clipId = generateClipId(8)
 		const password = req.body.clipPassword || null
 		const userId = req.headers.id
+		const customSlug = req.body.customSlug || null
+		let clipId
+
+		if (customSlug) {
+			const slugAvailable = await ifSlugAvailable(customSlug)
+			if (!slugAvailable) {
+				resp.status(400).json({ message: "Slug already exists" })
+				return
+			} else {
+				clipId = customSlug
+			}
+		} else {
+			clipId = generateClipId(8)
+		}
 
 		let newClipboardItem = new Clipboard({
 			clipId: clipId,

diff --git a/public/html/premium.html b/public/html/premium.html
@@ -67,20 +67,40 @@
 			<!-- First Half -->
 			<div class="p-2 text-center order-2">
 				<h2 class="text-2xl font-bold mb-2">Clip Controls</h2>
-				<div class="flex flex row justify-center items-center">
-					<h3 class="text-xl font-base whitespace-nowrap">
-						🔒Protect Clip:
-					</h3>
-					<input
-						id="clip-password"
-						type="password"
-						class="rounded bg-gray-200 text-black px-1 h-[4vh] m-1"
-						placeholder="Password"
-					/>
-				</div>
+				<form
+					id="clip-controls-form"
+					class="flex flex-col items-center"
+				>
+					<div class="flex items-center mb-2">
+						<label
+							for="clip-password"
+							class="text-xl font-base mr-4 whitespace-nowrap"
+							>🔒Protect Clip</label
+						>
+						<input
+							id="clip-password"
+							type="password"
+							class="rounded bg-gray-200 text-black px-1 h-[4vh] m-1"
+							placeholder="Password"
+						/>
+					</div>
+					<div class="flex items-center mb-2">
+						<label
+							for="custom-slug"
+							class="text-xl font-base mr-1 whitespace-nowrap"
+							>👻Custom Slug</label
+						>
+						<input
+							id="custom-slug"
+							type="text"
+							class="rounded bg-gray-200 text-black px-1 h-[4vh] m-1"
+							placeholder="Slug"
+						/>
+					</div>
+				</form>
 				<div
 					id="qrcode-div"
-					class="my-4 py-2 flex flex row justify-center items-center hidden"
+					class="my-4 py-2 flex justify-center items-center hidden"
 				>
 					<img id="qrcode-img" class="w-1/2 h-1/2" src="" />
 				</div>

diff --git a/public/js/premium.js b/public/js/premium.js
@@ -4,51 +4,54 @@ const savePremiumClipData = async function () {
 	try {
 		const clipboardText = document.getElementById("paste-area").value
 		const clipPassword = document.getElementById("clip-password").value
+		const customSlug = document.getElementById("custom-slug").value
 		let payload = {}
 
 		if (clipboardText.length < 1) {
 			alert("Clip content cannot be empty")
 		} else {
-			if (clipPassword.length < 1) {
-				payload = {
-					clipboardText: clipboardText,
-				}
-			} else {
-				payload = {
-					clipboardText: clipboardText,
-					clipPassword: clipPassword,
-				}
+			payload.clipboardText = clipboardText
+			if (clipPassword.length >= 1) {
+				payload.clipPassword = clipPassword
+			}
+			if (customSlug.length >= 1) {
+				payload.customSlug = customSlug
 			}
 
+			console.log(payload)
+
 			const response = await fetch(
 				BASE_BACKEND_URL + "premium" + "/clip" + "/save",
 				{
 					method: "POST",
 					headers: {
 						"Content-Type": "application/json",
-						// Authorization:
-						// 	"Bearer " + localStorage.getItem("token"),
 					},
 					body: JSON.stringify(payload),
 				}
 			)
 
 			const result = await response.json()
 
-			document.getElementById("output-div").innerHTML = ""
+			if (response.status != 200) {
+				alert(result.message)
+			} else {
+				document.getElementById("output-div").innerHTML = ""
 
-			const outputElem = document.createElement("div")
-			outputElem.classList.add("text-xl", "font-bold")
+				const outputElem = document.createElement("div")
+				outputElem.classList.add("text-xl", "font-bold")
 
-			outputElem.innerHTML = `Clip Link: <a href="${window.location.origin}/clip/${result.clip.clipId}" target="_blank">${window.location.origin}/clip/${result.clip.clipId}</a>`
-			document.getElementById("output-div").appendChild(outputElem)
+				outputElem.innerHTML = `Clip Link: <a href="${window.location.origin}/clip/${result.clip.clipId}" target="_blank">${window.location.origin}/clip/${result.clip.clipId}</a>`
+				document.getElementById("output-div").appendChild(outputElem)
 
-			document.getElementById("qrcode-img").src =
-				`${window.location.origin}/images/qrcodes/${result.clip.clipId}.png`
-			document.getElementById("qrcode-div").classList.remove("hidden")
+				document.getElementById("qrcode-img").src =
+					`${window.location.origin}/images/qrcodes/${result.clip.clipId}.png`
+				document.getElementById("qrcode-div").classList.remove("hidden")
 
-			document.getElementById("paste-area").value = ""
-			document.getElementById("clip-password").value = ""
+				document.getElementById("paste-area").value = ""
+				document.getElementById("clip-password").value = ""
+				document.getElementById("custom-slug").value = ""
+			}
 		}
 	} catch (error) {
 		alert("Error saving premium clip")

diff --git a/utils/customSlug.js b/utils/customSlug.js
@@ -0,0 +1,17 @@
+const Clipboard = require("../models/clip")
+
+async function ifSlugAvailable(slug) {
+	try {
+		const clip = await Clipboard.findOne({ clipId: slug })
+		if (clip) {
+			return false
+		} else {
+			return true
+		}
+	} catch (error) {
+		console.error("Error checking if slug is available:", error)
+		return false
+	}
+}
+
+module.exports = ifSlugAvailable