frontend: Show an icon in the navigation if we are disconnected

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 0fcc303dff2fca10d19b29f5ad2cc7e218a9c0a4..307f5af906e1c005a0e280ba290889fffb5a2e07 100644 (file)
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
        import { RouterLink, RouterView } from "vue-router"
 
+       // Components
+       import Icon from "@/components/Icon.vue";
+
        // Authentication
        import { useAuth } from "@/composables/auth";
        const auth = useAuth();
@@ -37,7 +40,7 @@
 
                                <div class="navbar-end">
                                        <div class="navbar-item" v-if="!isConnected">
-                                               DISCONNECTED
+                                               <Icon icon="plug-circle-xmark" is-danger :title="$t('Disconnected' )" />
                                        </div>
 
                                        <RouterLink to="/login" class="navbar-item" v-if="!auth.isLoggedIn.value">

diff --git a/frontend/src/components/Icon.vue b/frontend/src/components/Icon.vue
index 9235414d46e74237a5f5eec73f40e660e4fc37d0..45568acd760e46da8c80e5405a5577d721ff223b 100644 (file)
--- a/frontend/src/components/Icon.vue
+++ b/frontend/src/components/Icon.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
        defineProps<{
                icon: string,
+               title?: string,
 
+               isDanger?: boolean,
                isSmall?: boolean,
                isLeft?: boolean,
        }>()
 </script>
 
 <template>
-       <span class="icon" :class="{ 'is-small' : isSmall, 'is-left' : isLeft, }">
+       <span class="icon" :title="title"
+                       :class="{ 'has-text-danger' : isDanger, 'is-small' : isSmall, 'is-left' : isLeft, }">
                <FontAwesomeIcon :icon="icon" />
        </span>
 </template>

diff --git a/frontend/src/icons.ts b/frontend/src/icons.ts
index 03f8f5391b96ac0b1c9f5a437e678c2c33941534..67d5acf00787a365bc6ee875571b9336700ef578 100644 (file)
--- a/frontend/src/icons.ts
+++ b/frontend/src/icons.ts
@@ -4,11 +4,13 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 // Only import the icons we actually need
 import {
        faLock,
+       faPlugCircleXmark,
        faUser,
 } from "@fortawesome/free-solid-svg-icons";
 
 // Add them all to the library
 library.add(
        faLock,
+       faPlugCircleXmark,
        faUser,
 )