feat: [#619] add demo warning banner

Author: josecelano

app.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="flex flex-col" style="min-height: 100vh;">
+    <DemoBanner />
+
     <Notifications />
 
     <NavigationBar />
@@ -21,6 +23,7 @@
 <script setup lang="ts">
 import { getCategories, getSettings, getTags, getUser, onBeforeMount, onMounted } from "#imports";
 import Notifications from "~/components/Notifications.vue";
+import DemoBanner from "~/components/demo/Banner.vue";
 
 onBeforeMount(() => {
   getUser();

components/demo/Banner.vue

@@ -0,0 +1,44 @@
+<template>
+  <div v-if="isDemoMode" class="demo-banner">
+    {{ warning }}<NuxtLink to="/terms">
+      Read our terms.</NuxtLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type PublicSettings } from "torrust-index-types-lib";
+
+const settings = useSettings();
+const isDemoMode = ref(false);
+const warning = ref("");
+
+onMounted(() => {
+  isDemoMode.value = false;
+});
+
+watch(
+  () => settings.value,
+  (newSettings) => {
+    if (newSettings?.website?.demo?.warning) {
+      isDemoMode.value = true;
+      warning.value = newSettings?.website?.demo?.warning;
+    }
+  },
+  { immediate: true }
+);
+
+</script>
+
+<style scoped>
+.demo-banner {
+  background-color: #f5b14a;
+  color: #000;
+  width: 100%;
+  padding: 10px;
+  text-align: center;
+  /*position: fixed;*/
+  top: 0;
+  left: 0;
+  z-index: 1000;
+}
+</style>