From 378f19d3b71de2c33f03444f0d120d291f5f0d77 Mon Sep 17 00:00:00 2001
From: Jakob Scheid
 <jakob.scheid@developers.internal.seekra.jcloud-services.ddns.net>
Date: Wed, 5 Aug 2026 14:38:09 +0200
Subject: [PATCH] feat(legal): add legal notice error handling

The legal notice view now shows an error box if the legal notice could
not be loaded.
---
 src/features/legal/views/LegalNoticeView.vue | 12 ++++++++++--
 src/locales/de.json                          |  3 ++-
 src/locales/en.json                          |  3 ++-
 src/styles/common.css                        | 10 +++++++++-
 src/styles/variables/colors.css              |  3 +++
 5 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/features/legal/views/LegalNoticeView.vue b/src/features/legal/views/LegalNoticeView.vue
index 196a9f7..889343b 100644
--- a/src/features/legal/views/LegalNoticeView.vue
+++ b/src/features/legal/views/LegalNoticeView.vue
@@ -21,9 +21,14 @@ import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 
+const legalNoticeError = ref(null);
 const legalNoticeHtml = ref(null);
 onMounted(async () => {
-    legalNoticeHtml.value = await getLegalNotice();
+    try {
+        legalNoticeHtml.value = await getLegalNotice();
+    } catch {
+        legalNoticeError.value = 'legal.notice.loadError';
+    }
 });
 </script>
 
@@ -35,7 +40,10 @@ onMounted(async () => {
             </h1>
         </header>
         <main>
-            <div class="legal-notice" v-html="legalNoticeHtml"></div>
+            <div class="error" v-if="legalNoticeError">
+                {{ t(legalNoticeError) }}
+            </div>
+            <div class="legal-notice" v-html="legalNoticeHtml" v-else></div>
         </main>
     </div>
 </template>
diff --git a/src/locales/de.json b/src/locales/de.json
index 111e0aa..bc632a9 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -64,7 +64,8 @@
     },
     "legal": {
         "notice": {
-            "title": "Impressum"
+            "title": "Impressum",
+            "loadError": "Das Impressum konnte nicht geladen werden."
         }
     }
 }
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index db158af..6b8dd0e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -64,7 +64,8 @@
     },
     "legal": {
         "notice": {
-            "title": "Legal Notice"
+            "title": "Legal Notice",
+            "loadError": "The legal notice could not be loaded."
         }
     }
 }
\ No newline at end of file
diff --git a/src/styles/common.css b/src/styles/common.css
index 4932a55..2100f66 100644
--- a/src/styles/common.css
+++ b/src/styles/common.css
@@ -92,4 +92,12 @@ input {
 /* Temporary until a custom tap highlight is implemented. */
 * {
     -webkit-tap-highlight-color: transparent;
-}
\ No newline at end of file
+}
+
+.error {
+    background-color: var(--color-negative-bg);
+    border: 1px solid var(--color-negative-border);
+    padding: 1em 2em;
+    border-radius: 1.2em;
+    color: var(--white);
+}
diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css
index 7e7e71a..bf7f8a0 100644
--- a/src/styles/variables/colors.css
+++ b/src/styles/variables/colors.css
@@ -84,6 +84,9 @@ body {
     --light-hover:          var(--light-d-2);
 
     --invert: invert(0);
+
+    --color-negative-bg:     oklch(59% 0.22706 29.244);
+    --color-negative-border: oklch(51% 0.22706 29.244);
 }
 
 @media (prefers-color-scheme: dark) {