Make sure config and version are loaded before app runs to avoid null checks.

frontend/src/components/nodes/NodeDeleteConfirmationForm.vue

@@ -19,7 +19,7 @@ interface Props {
 const props = defineProps<Props>();
 const nodeStore = useNodeStore();
 const configStore = useConfigStore();
-const email = computed(() => configStore.getConfig?.community.contactEmail);
+const email = computed(() => configStore.getConfig.community.contactEmail);
 
 const errorDeletingNode = ref<boolean>(false);
 
@@ -70,7 +70,7 @@ async function onAbort() {
             Beim Löschen des Knotens ist ein Fehler aufgetreten. Bitte probiere
             es später nochmal. Sollte dieses Problem weiter bestehen, so wende
             dich bitte per E-Mail an
-            <a v-if="email" :href="`mailto:${email}`">{{ email }}</a
+            <a :href="`mailto:${email}`">{{ email }}</a
             >.
         </ErrorCard>
 

frontend/src/components/nodes/NodeDeleteForm.vue

@@ -15,7 +15,7 @@ import RouteButton from "@/components/form/RouteButton.vue";
 import { ApiError } from "@/utils/Api";
 
 const configStore = useConfigStore();
-const email = computed(() => configStore.getConfig?.community.contactEmail);
+const email = computed(() => configStore.getConfig.community.contactEmail);
 
 const nodeStore = useNodeStore();
 
@@ -67,7 +67,7 @@ async function onSubmit() {
                 <strong>
                     Solltest Du den Token nicht mehr haben, wende Dich einfach
                     per E-Mail an
-                    <a v-if="email" :href="`mailto:${email}`">{{ email }}</a
+                    <a :href="`mailto:${email}`">{{ email }}</a
                     >.
                 </strong>
             </p>
@@ -80,7 +80,7 @@ async function onSubmit() {
                 Beim Abrufen des Knotens ist ein Fehler aufgetreten. Bitte
                 probiere es später nochmal. Sollte dieses Problem weiter
                 bestehen, so wende dich bitte per E-Mail an
-                <a v-if="email" :href="`mailto:${email}`">{{ email }}</a
+                <a :href="`mailto:${email}`">{{ email }}</a
                 >.
             </ErrorCard>
 

frontend/src/components/nodes/NodeDeletedPanel.vue

@@ -8,8 +8,8 @@ import RouteButton from "@/components/form/RouteButton.vue";
 import { route, RouteName } from "@/router";
 
 const configStore = useConfigStore();
-const email = computed(() => configStore.getConfig?.community.contactEmail);
-const mapUrl = computed(() => configStore.getConfig?.map.mapUrl);
+const email = computed(() => configStore.getConfig.community.contactEmail);
+const mapUrl = computed(() => configStore.getConfig.map.mapUrl);
 
 interface Props {
     hostname: Hostname;

frontend/src/components/nodes/NodePreviewCard.vue

@@ -21,7 +21,8 @@ const props = defineProps<Props>();
         </h3>
 
         <div class="field">
-            <strong>Token:</strong> <code>{{ props.node.token }}</code>
+            <strong>Token: </strong>
+            <code>{{ props.node.token }}</code>
         </div>
 
         <div class="field">
@@ -30,16 +31,17 @@ const props = defineProps<Props>();
         </div>
 
         <div class="field">
-            <strong>MAC-Adresse:</strong> <code>{{ props.node.mac }}</code>
+            <strong>MAC-Adresse: </strong>
+            <code>{{ props.node.mac }}</code>
         </div>
 
         <div class="field">
-            <strong>VPN-Schlüssel:</strong>
+            <strong>VPN-Schlüssel: </strong>
             <code>{{ props.node.key || "nicht angegeben" }}</code>
         </div>
 
         <div class="field">
-            <strong>Monitoring:</strong>
+            <strong>Monitoring: </strong>
             <span v-if="props.node.monitoringState === MonitoringState.PENDING">
                 Bestätigung ausstehend
             </span>

frontend/src/components/nodes/NodesFilterPanel.vue

@@ -91,8 +91,8 @@ function pushFilter(filterGroup: Filter[], filter: Filter): void {
 
 const suggestedFilters = computed<Filter[][]>(() => {
     const cfg = configStore.getConfig;
-    const sites = cfg?.community.sites || [];
-    const domains = cfg?.community.domains || [];
+    const sites = cfg.community.sites;
+    const domains = cfg.community.domains;
 
     const filterGroups: Filter[][] = [];
 

frontend/src/components/page/PageFooter.vue

@@ -7,7 +7,7 @@ const versionStore = useVersionStore();
 </script>
 
 <template>
-    <footer v-if="configStore.getConfig">
+    <footer>
         ffffng ({{ versionStore.getVersion }})
         <a href="https://github.com/freifunkhamburg/ffffng" target="_blank">
             <i class="fa fa-code" aria-hidden="true" /> Source Code

frontend/src/components/page/PageHeader.vue

@@ -6,7 +6,7 @@ const configStore = useConfigStore();
 </script>
 
 <template>
-    <header v-if="configStore.getConfig">
+    <header>
         <nav>
             <RouterLink class="logo" :to="route(RouteName.HOME)">
                 <img

frontend/src/main.ts

@@ -6,16 +6,19 @@ import router from "./router";
 import { useConfigStore } from "@/stores/config";
 import { useVersionStore } from "@/stores/version";
 
-const app = createApp(App);
+async function main() {
+    const app = createApp(App);
 
-app.use(createPinia());
-app.use(router);
+    app.use(createPinia());
+    app.use(router);
 
-useConfigStore()
-    .refresh()
-    .catch((err) => console.error(err));
-useVersionStore()
-    .refresh()
-    .catch((err) => console.error(err));
+    const configLoaded = useConfigStore().refresh();
+    const versionLoaded = useVersionStore().refresh();
 
-app.mount("#app");
+    await configLoaded;
+    await versionLoaded;
+
+    app.mount("#app");
+}
+
+main().catch((error) => console.error("Unhandled error:", error));

frontend/src/stores/config.ts

@@ -3,18 +3,19 @@ import { type ClientConfig, isClientConfig } from "@/types";
 import { api } from "@/utils/Api";
 
 interface ConfigStoreState {
-    config: ClientConfig | null;
+    config: ClientConfig;
 }
 
 export const useConfigStore = defineStore({
     id: "config",
     state(): ConfigStoreState {
         return {
-            config: null,
+            // Initialized in main.ts before mounting app.
+            config: undefined as unknown as ClientConfig,
         };
     },
     getters: {
-        getConfig(state: ConfigStoreState): ClientConfig | null {
+        getConfig(state: ConfigStoreState): ClientConfig {
             return state.config;
         },
     },

frontend/src/stores/version.ts

@@ -11,18 +11,19 @@ function isVersionResponse(arg: unknown): arg is VersionResponse {
 }
 
 interface VersionStoreState {
-    version: Version | null;
+    version: Version;
 }
 
 export const useVersionStore = defineStore({
     id: "version",
     state(): VersionStoreState {
         return {
-            version: null,
+            // Initialized in main.ts before mounting app.
+            version: undefined as unknown as Version,
         };
     },
     getters: {
-        getVersion(state: VersionStoreState): Version | null {
+        getVersion(state: VersionStoreState): Version {
             return state.version;
         },
     },