From fe937465bd3512eb7bc6dfe7dd47eb9307b8b486 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Sat, 14 Aug 2021 14:54:13 +0200
Subject: [PATCH] Working in browser

---
 index.html | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 56 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
index 7acad20..e7823f2 100644
--- a/index.html
+++ b/index.html
@@ -15,10 +15,9 @@
 </head>
 
 <body>
-	<h1>LinkyLinky</h1>
-
 	<div class="p-8 flex items-center justify-center bg-white">
 		<div class="w-full max-w-xs mx-auto">
+			<h1 class="text-lg text-center">LinkyLinky</h1>
 			<div>
 				<label for="company_website" class="block text-sm font-medium text-gray-700">
 					Custom Shorturl
@@ -28,14 +27,68 @@
 						class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
 						https://kauf.es/
 					</span>
-					<input type="text" name="company_website" id="company_website"
+					<input type="text" name="shortcode" id="shortcode"
 						class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300"
 						placeholder="custom url" />
 				</div>
+				<div class="hidden" name="shorturl_container" id="shorturl_container">
+					<div class="inline-flex" id="shorturl_copy" data-clipboard-target="#shorturl">
+						<p name="shorturl" id="shorturl" class:bg-green-200={copied}
+							class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2">
+							link
+						</p>
+						<div
+							class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 mt-1 cursor-pointer">
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+								<path fill="none" d="M0 0h24v24H0z" />
+								<path fill="currentColor"
+									d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z" />
+							</svg>
+						</div>
+					</div>
+					<p class="text-gray-500 text-xs">
+						Click to copy url to keyboard
+					</p>
+				</div>
+				<button type="button" onclick="createUrl()"
+					class="items-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+					Create
+				</button>
 			</div>
 		</div>
 	</div>
 
+	<script src="./clipboard.min.js"></script>
+	<script>
+		//Clipboard stuff
+		const baseurl = "https://kauft.es";
+		const btn = document.getElementById("shorturl_copy");
+		const clipboard = new ClipboardJS(btn);
+
+		// Calls the api to create a new short url
+		function createUrl() {
+			shorturl = {
+				target: window.location.href,
+				shortcode: document.getElementById("shortcode").value
+			};
+			if (shorturl.shortcode == "" | !shorturl.shortcode) {
+				delete shorturl.shortcode;
+			}
+
+			fetch(`${baseurl}/api`, {
+				method: "POST",
+				body: JSON.stringify(shorturl),
+				headers: new Headers({
+					'Content-Type': 'application/json'
+				})
+			})
+				.then(res => res.json())
+				.then(res => {
+					document.getElementById("shorturl").innerText=res.url;
+					document.getElementById("shorturl_container").className="";
+				});
+		}
+	</script>
 </body>
 
 </html>
\ No newline at end of file
