From dc729cefac7d907a00b23d0ebb5ee521ff3350f5 Mon Sep 17 00:00:00 2001
From: "Abdulmhsen B. A. A." <admin@arabcoders.org>
Date: Mon, 10 Jun 2024 20:09:00 +0300
Subject: [PATCH] Update localStorage only when a successful connection is
 established to the API. Hide console when the API connection is not
 configured.

---
 frontend/components/NoApi.vue | 20 +++++++++++-----
 frontend/layouts/default.vue  | 45 +++++++++++++++++++++++++----------
 2 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/frontend/components/NoApi.vue b/frontend/components/NoApi.vue
index da2399e5..ac06fcb3 100644
--- a/frontend/components/NoApi.vue
+++ b/frontend/components/NoApi.vue
@@ -1,14 +1,22 @@
 <template>
-  <div class="notification is-warning">
-    <h1 class="title is-5">There is no <em class="is-bold">{{ api_var }}</em> configured.</h1>
-    <p>Please configure the API connection using the button <i class="fa fa-cog"></i> in the top right corner of the
-      page.</p>
+  <div class="notification has-text-dark is-background-warning-80">
+    <h5 class="title is-5 is-unselectable">
+      <span class="icon-text">
+        <span class="icon"><i class="fas fa-exclamation-triangle"></i></span>
+        <span>Warning</span>
+      </span>
+    </h5>
+    <div class="content">
+      <p>There is no <em class="is-bold">{{ api_var }}</em> configured.</p>
+      <p>Please configure the API connection using the button <i class="fa fa-cog"></i> in the top right corner of the
+        page.</p>
+    </div>
   </div>
 </template>
 
 <script setup>
 import {useStorage} from "@vueuse/core";
 
-const api_url = useStorage('api_url', '')
-const api_var = computed(() => (!api_url.value) ? 'API URL' : 'API token')
+const api_token = useStorage('api_token', '')
+const api_var = computed(() => (!api_token.value) ? 'API Token' : 'API URL')
 </script>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 62a1d767..cf8964f3 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -87,7 +87,7 @@
 
         </div>
         <div class="navbar-end pr-3">
-          <NuxtLink class="navbar-item" to="/console" @click.native="showMenu=false">
+          <NuxtLink class="navbar-item" to="/console" @click.native="showMenu=false" v-if="hasAPISettings">
             <span class="icon-text">
               <span class="icon"><i class="fas fa-terminal"></i></span>
               <span>Console</span>
@@ -277,9 +277,13 @@ import Markdown from "~/components/Markdown.vue";
 const selectedTheme = useStorage('theme', (() => window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')())
 const showConnection = ref(false)
 
-const api_url = useStorage('api_url', window.location.origin)
-const api_path = useStorage('api_path', '/v1/api')
-const api_token = useStorage('api_token', '')
+const real_api_url = useStorage('api_url', '')
+const real_api_path = useStorage('api_path', '/v1/api')
+const real_api_token = useStorage('api_token', '')
+
+const api_url = ref(toRaw(real_api_url.value))
+const api_path = ref(toRaw(real_api_path.value))
+const api_token = ref(toRaw(real_api_token.value))
 
 const api_status = ref(false)
 const api_response = ref('Status: Unknown')
@@ -336,10 +340,11 @@ onMounted(async () => {
 
     applyPreferredColorScheme(selectedTheme.value)
 
-    if ('' === api_token.value) {
+    if ('' === api_token.value || '' === api_url.value) {
       showConnection.value = true
       return
     }
+
     await getVersion()
   } catch (e) {
   }
@@ -362,7 +367,13 @@ watch(api_token, value => {
 
 const testApi = async () => {
   try {
-    const response = await request('/backends')
+    const response = await fetch(`${api_url.value}${api_path.value}/backends`, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+        'Authorization': `Bearer ${api_token.value}`
+      }
+    })
     const json = await response.json()
 
     if (json.error) {
@@ -371,18 +382,22 @@ const testApi = async () => {
       return
     }
 
+    if (200 === response.status) {
+      real_api_url.value = api_url.value
+      real_api_path.value = api_path.value
+      real_api_token.value = api_token.value
+      await getVersion(false)
+    }
+
     api_status.value = 200 === response.status;
     api_response.value = 200 === response.status ? `Status: OK` : `Status: ${response.status} - ${response.statusText}`;
-
-    await getVersion()
-
   } catch (e) {
     api_status.value = false;
-    api_response.value = `Error: ${e.message}`;
+    api_response.value = `Request error. ${e.message}`;
   }
 }
 
-const getVersion = async () => {
+const getVersion = async (updateStatus = true) => {
   if (api_version.value) {
     return;
   }
@@ -391,6 +406,11 @@ const getVersion = async () => {
     const response = await request('/system/version')
     const json = await response.json()
     api_version.value = json.version
+    if (updateStatus) {
+      api_status.value = true
+      api_response.value = 'Status: OK'
+    }
+
   } catch (e) {
     return 'Unknown'
   }
@@ -398,9 +418,10 @@ const getVersion = async () => {
 
 const setOrigin = () => api_url.value = window.location.origin;
 
-const hasAPISettings = computed(() => '' !== api_token.value && '' !== api_url.value)
+const hasAPISettings = computed(() => '' !== real_api_token.value && '' !== real_api_url.value)
 
 const closeOverlay = () => {
   loadFile.value = ''
 }
+
 </script>