Updated readme

README.md

@@ -25,7 +25,8 @@ TODO: -->
     - [x] Notify on copy
     - [x] Generate another url
 - [ ] Project Logo™
-- [ ] Finalize styling
+- [x] Basic error handling
+- [x] Finalize styling
 
 ## Credits
 * ClipboardJS by Zeno Rocha licensed under MIT - Website: https://clipboardjs.com/ - Repo: https://github.com/zenorocha/clipboard.js

index.html

@@ -18,7 +18,39 @@
 	<div class="p-4 flex items-center justify-center bg-white">
 		<div class="w-full mx-auto">
 			<h1 class="text-lg text-center">LinkyLinky</h1>
-			<div>
+
+			<div class="rounded-md bg-red-100 p-4 hidden" id="error_container">
+				<div class="flex">
+					<div class="flex-shrink-0">
+						<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-600" viewBox="0 0 20 20"
+							fill="currentColor">
+							<path fill-rule="evenodd"
+								d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+								clip-rule="evenodd" />
+						</svg>
+					</div>
+					<div class="ml-3">
+						<p class="text-sm font-medium text-red-800" id="error_text">
+							
+						</p>
+					</div>
+					<div class="ml-auto pl-3">
+						<div class="-mx-1.5 -my-1.5">
+							<button
+								id="error_dismiss"
+								class="inline-flex bg-red-100 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600">
+								<span class="sr-only">Dismiss</span>
+								<svg class="h-5 w-5" x-description="Heroicon name: x" xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+									<path fill-rule="evenodd"
+										d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+										clip-rule="evenodd"></path>
+								</svg>
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
 			<div id="target_container">
 				<div class="mt-1 flex rounded-md shadow-sm">
 					<input type="url" name="target" id="target" required

main.js

@@ -11,13 +11,17 @@ clipboard.on('success', function (e) {
     });
 });
 
-//Set default url
+//Set default url as current tab
 chrome.tabs.query({ active: true, lastFocusedWindow: true }, tabs => {
     document.getElementById("target").value = tabs[0].url;
 });
 
-// Calls the api to create a new short url
+// Create button click handler calls the api to create a new short url
 document.getElementById("create").onclick = createUrl;
+
+/**
+ * Calls the api to create a new short url and handels displaying the ui for "created" urls
+ */
 function createUrl() {
     let shorturl = {
         target: document.getElementById("target").value,
@@ -35,7 +39,14 @@ function createUrl() {
             'Content-Type': 'application/json'
         })
     })
-            .then(res => res.json())
+        .then(res => {
+            if (!res.ok) {
+                handleError(res);
+            }
+            else {
+                res.json()
+            }
+        })
         .then(res => {
             document.getElementById("shorturl").innerText = res.url;
             document.getElementById("shorturl_container").className = "";
@@ -47,16 +58,43 @@ function createUrl() {
 
 }
 
-//Resets the UI
+//Add error dismiss event handler
+document.getElementById("error_dismiss").onclick = () => {
+    document.getElementById("error_container").classList.add("hidden");
+};
+
+/**
+ * Display alerts for errors (only handling 400 correctly r/n)
+ * @param {response} res The fetch response object
+ */
+function handleError(res) {
+    if (res.status == 400) {
+        res.text().then((body) => {
+            document.getElementById("error_text").innerText = body;
+            document.getElementById("error_container").classList.remove("hidden");
+        })
+    }
+    else {
+        console.log(res);
+        document.getElementById("error_text").innerText = "An unknown error occured (see console for more details)";
+        document.getElementById("error_container").classList.remove("hidden");
+    }
+}
+
+//Add ui reset error handler
 document.getElementById("reset").onclick = reset;
+
+/**
+ * Resets the ui by emtying/resetting all inputs and showing the "default" home ui containers again.
+ */
 function reset() {
     document.getElementById("shorturl").innerText = "";
-    document.getElementById("target_container").className = "";
-    document.getElementById("shortcode_container").className = "";
     document.getElementById("shorturl_container").className = "hidden";
     document.getElementById("reset").classList.add("hidden");
-    document.getElementById("create").classList.remove("hidden");
     chrome.tabs.query({ active: true, lastFocusedWindow: true }, tabs => {
         document.getElementById("target").value = tabs[0].url;
+        document.getElementById("target_container").className = "";
+        document.getElementById("shortcode_container").className = "";
+        document.getElementById("create").classList.remove("hidden");
     });
 }