From c5c8514bab9615c90de8b5fb1f9a5925f752b28b Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Sat, 21 Aug 2021 10:47:13 +0200
Subject: [PATCH] Added basics for error handling on url creation

---
 src/lib/CreateUrl.svelte | 50 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/src/lib/CreateUrl.svelte b/src/lib/CreateUrl.svelte
index 9048e1f..5053e19 100644
--- a/src/lib/CreateUrl.svelte
+++ b/src/lib/CreateUrl.svelte
@@ -2,9 +2,57 @@
 	$: targetUrl = '';
 	$: customShortcode = '';
 	$: shortcode = '';
+    $: error = '';
+
+    function createUrl() {
+        
+    }
+
+    function reset() {
+        error = '';
+        shortcode = '';
+        customShortcode = '';
+        targetUrl = '';
+    }
 </script>
 
 <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-100 pb-3">Create new url</h2>
+{#if error != ""}
+<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">
+                {error}
+            </p>
+        </div>
+        <div class="ml-auto pl-3">
+            <div class="-mx-1.5 -my-1.5">
+                <button
+                    on:click={()=>{
+                        error='';
+                    }}
+                    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>
+{/if}
 {#if shortcode == ''}
 	<div>
 		<div class="mx-auto lg:w-1/3 w-full mt-1 flex rounded-md shadow-sm">
@@ -34,12 +82,14 @@
 <div class="mt-3 mx-auto text-center lg:w-1/3 w-full">
 	{#if shortcode == ''}
 		<button
+        on:click={createUrl}
 			class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md dark:bg-gray-900 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700"
 		>
 			Create shorturl
 		</button>
 	{:else}
 		<button
+        on:click={reset}
 			class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md dark:bg-gray-900 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700"
 		>
 			Add another url