From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 4 Jul 2025 16:03:46 +0000 (+0000)
Subject: frontend: Show an icon in the navigation if we are disconnected
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=09870c569e4a41773ba334210ce2a2f976435e66;p=pbs.git

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 0fcc303d..307f5af9 100644
--- 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 9235414d..45568acd 100644
--- 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 03f8f539..67d5acf0 100644
--- 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,
 )