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

@@ -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>

src/locales/de.json

@@ -64,7 +64,8 @@
     },
     "legal": {
         "notice": {
-            "title": "Impressum"
+            "title": "Impressum",
+            "loadError": "Das Impressum konnte nicht geladen werden."
         }
     }
 }

src/locales/en.json

@@ -64,7 +64,8 @@
     },
     "legal": {
         "notice": {
-            "title": "Legal Notice"
+            "title": "Legal Notice",
+            "loadError": "The legal notice could not be loaded."
         }
     }
 }

src/styles/common.css

@@ -92,4 +92,12 @@ input {
 /* Temporary until a custom tap highlight is implemented. */
 * {
     -webkit-tap-highlight-color: transparent;
-}
+}
+
+.error {
+    background-color: var(--color-negative-bg);
+    border: 1px solid var(--color-negative-border);
+    padding: 1em 2em;
+    border-radius: 1.2em;
+    color: var(--white);
+}

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) {