From 5877c86b1da4eb4e9e74378709c546933dc63cf4 Mon Sep 17 00:00:00 2001
From: vnugent <public@vaughnnugent.com>
Date: Tue, 9 Apr 2024 17:37:41 -0400
Subject: Squashed commit of the following:

commit 56e0a38b2ca246e8beeaef3c6c4b9c0ce7d0f09b
Author: vnugent <public@vaughnnugent.com>
Date:   Tue Apr 9 17:35:13 2024 -0400

    chore(app): Update deps, login spinner, curl msg, view prep

commit 0945210c0492dd8a8de99ccd8e5e66cf05e3a1c1
Merge: 24fac82 3c15d54
Author: vnugent <public@vaughnnugent.com>
Date:   Tue Apr 2 14:58:59 2024 -0400

    Merge branch 'master' into develop

commit 24fac82efe9e5c18e86ed535678640e7401472db
Author: vnugent <public@vaughnnugent.com>
Date:   Tue Apr 2 14:54:20 2024 -0400

    ci: Configure manual dep versions

commit d2ae31ec919d72e66d8b40db8394b55efd6ea6d3
Author: vnugent <public@vaughnnugent.com>
Date:   Sun Mar 31 22:19:53 2024 -0400

    ci: Native compression support for win

commit fa7fdef79c6d468022b77f81314ac129fe0cdc32
Merge: 308092d a01220a
Author: vnugent <public@vaughnnugent.com>
Date:   Wed Mar 13 21:26:55 2024 -0400

    Merge branch 'master' into develop

commit 308092d6d743d0ba8f7ca86fd77e9c837dc46e88
Merge: 48637a8 9134093
Author: vnugent <public@vaughnnugent.com>
Date:   Wed Mar 13 21:01:02 2024 -0400

    Merge branch 'master' into develop

commit 48637a8781fc951c307216f604fc1610e68691c3
Merge: 1e08c6d e326736
Author: vnugent <public@vaughnnugent.com>
Date:   Wed Mar 13 16:20:35 2024 -0400

    Merge branch 'master' into develop

commit 1e08c6d2112459dc02a0ab873123c4a363b01d21
Author: vnugent <public@vaughnnugent.com>
Date:   Wed Mar 13 16:17:58 2024 -0400

    ci: verified container build ready for next release

commit 85a1e5b7cc5c99e97a2d4e99bbceb0d2139742ff
Author: vnugent <public@vaughnnugent.com>
Date:   Tue Mar 12 22:05:16 2024 -0400

    ci: exciting bare-metal build process, os support, smaller packages

commit 748cdbf4880d830fd794e92856e8c35a46e4f884
Author: vnugent <public@vaughnnugent.com>
Date:   Mon Mar 11 21:21:18 2024 -0400

    feat(app): #1 update libs & add curl support
---
 .../src/components/Boomarks/AddOrUpdateForm.vue    | 53 ++++++++++++++--------
 1 file changed, 35 insertions(+), 18 deletions(-)

(limited to 'front-end/src/components/Boomarks/AddOrUpdateForm.vue')

diff --git a/front-end/src/components/Boomarks/AddOrUpdateForm.vue b/front-end/src/components/Boomarks/AddOrUpdateForm.vue
index 0370e0c..d6ea4bc 100644
--- a/front-end/src/components/Boomarks/AddOrUpdateForm.vue
+++ b/front-end/src/components/Boomarks/AddOrUpdateForm.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { computed, toRefs } from 'vue';
-import { isEmpty, join, split } from 'lodash-es';
+import { computed, shallowRef, toRefs } from 'vue';
+import { set, watchDebounced } from '@vueuse/core'
+import { isEmpty, join, noop, split } from 'lodash-es';
 import { useStore } from '../../store';
-import { useWait } from '@vnuge/vnlib.browser';
+import { WebMessage, useWait } from '@vnuge/vnlib.browser';
+import { AxiosError } from 'axios';
 
 const emit = defineEmits(['submit'])
 const props = defineProps<{
@@ -20,6 +22,8 @@ const tags = computed({
 const { websiteLookup:lookup } = useStore()
 const { setWaiting, waiting } = useWait()
 
+const errMessage = shallowRef();
+
 const execLookup = async () => {
     //url must be valid before searching
     if(v$.value.Url.$invalid) return
@@ -45,9 +49,10 @@ const execLookup = async () => {
             v$.value.Tags.$dirty = true;
         }
     }
-    catch(e){
-        //Mostly ignore errors
+    catch(e){       
         console.error(e)
+        const res = (e as AxiosError).response?.data;
+        set(errMessage, (res as WebMessage)?.result);
     }
     finally{
         setWaiting(false)
@@ -56,6 +61,9 @@ const execLookup = async () => {
 
 const showSearchButton = computed(() => lookup.isSupported && !isEmpty(v$.value.Url.$model))
 
+//Clear error message after 5 seconds
+watchDebounced(errMessage, v => v ? setTimeout(() => set(errMessage, ''), 5000) : noop())
+
 </script>
 <template>
     <form id="bm-add-or-update-form" class="grid grid-cols-1 gap-4 p-4" @submit.prevent="emit('submit')">
@@ -67,22 +75,31 @@ const showSearchButton = computed(() => lookup.isSupported && !isEmpty(v$.value.
                 <input type="text" id="url" class="input" placeholder="https://www.example.com" v-model="v$.Url.$model"
                     :class="{'dirty': v$.Url.$dirty, 'error': v$.Url.$invalid}" required>
 
-                <div class="">
-                    <button 
-                        type="button"
-                        :disabled="!showSearchButton || waiting" 
-                        @click.self.prevent="execLookup"
-                        id="search-btn"
-                        class="btn blue search-btn"
-                    >
-                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
-                            viewBox="0 0 20 20">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
-                        </svg>
+                <div class="my-auto">
+                    <button type="button" :disabled="!showSearchButton || waiting" @click.prevent="execLookup"
+                        id="search-btn" class="btn blue search-btn">
+                        <span v-if="waiting" class="mx-auto">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 animate-spin" viewBox="0 0 15 15">
+                                <path fill="currentColor" fill-rule="evenodd"
+                                    d="M8 .5V5H7V.5h1ZM5.146 5.854l-3-3l.708-.708l3 3l-.708.708Zm4-.708l3-3l.708.708l-3 3l-.708-.708Zm.855 1.849L14.5 7l-.002 1l-4.5-.006l.002-1Zm-9.501 0H5v1H.5v-1Zm5.354 2.859l-3 3l-.708-.708l3-3l.708.708Zm6.292 3l-3-3l.708-.708l3 3l-.708.708ZM8 10v4.5H7V10h1Z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                        </span>
+                        <span v-else>
+                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                                viewBox="0 0 20 20">
+                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                    stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
+                            </svg>
+                        </span>
                     </button>
                 </div>
             </div>
+            <div v-if="errMessage" class="pl-2">
+                <p class="text-xs italic text-red-800 dark:text-red-500">
+                    {{ errMessage }}
+                </p>
+            </div>
         </fieldset>
         <fieldset>
             <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Title</label>
-- 
cgit 

