Display config values in header and footer.

frontend/src/components/PageFooter.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import { useConfigStore } from "@/stores/config";
 import { useVersionStore } from "@/stores/version";
 
+const config = useConfigStore();
 const version = useVersionStore();
 
 function refresh(): void {
+    config.refresh();
     version.refresh();
 }
 
@@ -11,9 +14,29 @@ refresh();
 </script>
 
 <template>
-    <footer>
-        {{ version.getVersion }}
+    <footer v-if="config.getConfig">
+        ffffng ({{ version.getVersion }})
+        <a href="https://github.com/freifunkhamburg/ffffng" target="_blank">Source Code</a>
+        <a href="https://github.com/freifunkhamburg/ffffng/issues" target="_blank">Fehler melden</a>
+        <a
+            v-if="config.getConfig.legal.privacyUrl"
+            :href="config.getConfig.legal.privacyUrl"
+            target="_blank">Datenschutz</a>
+        <a
+            v-if="config.getConfig.legal.imprintUrl"
+            :href="config.getConfig.legal.imprintUrl"
+            target="_blank">Impressum</a>
     </footer>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@import "../scss/variables";
+
+footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    text-align: center;
+}
+</style>

frontend/src/components/PageHeader.vue

@@ -1,15 +1,39 @@
 <script setup lang="ts">
+import { useConfigStore } from "@/stores/config";
+
+const config = useConfigStore();
+
+function refresh(): void {
+    config.refresh();
+}
+
+refresh();
 </script>
 
 <template>
-    <header>
-        <div class="wrapper">
-            <nav>
-                <RouterLink to="/">Home</RouterLink> |
-                <RouterLink to="/admin">Admin</RouterLink>
-            </nav>
-        </div>
+    <header v-if="config.getConfig">
+        <nav>
+            <RouterLink to="/">
+                <img src="icon.svg" alt="Symbol: Gelbes Zahnrad in zwei konzentrischen Kreisen (hellgrau und magenta)"/>
+                {{ config.getConfig.community.name }} – Knotenverwaltung
+            </RouterLink>
+            <RouterLink to="/admin">Admin-Panel</RouterLink>
+        </nav>
     </header>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@import "../scss/variables";
+
+header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+
+    img {
+        width: 2em;
+        height: 2em;
+    }
+}
+</style>