diff --git a/src/features/footer/components/Footer.vue b/src/features/footer/components/Footer.vue index b397207..8d9b8be 100644 --- a/src/features/footer/components/Footer.vue +++ b/src/features/footer/components/Footer.vue @@ -40,8 +40,20 @@ const copyrightPeriod = -
- © {{ copyrightPeriod }} Seekra +
+
+
+ © {{ copyrightPeriod }} Seekra +
+
+ + {{ t('legal.notice.title') }} + +
@@ -63,4 +75,31 @@ const copyrightPeriod = .global-footer a { color: var(--dark); } + +.legal-segment { + display: grid; + grid-template-columns: 1fr auto 1fr; + text-align: center; +} + +.copyright-notice { + justify-self: center; +} + +.legal-links { + justify-self: end; +} + +@media (max-width: 48rem) { + .legal-segment { + display: flex; + flex-direction: column; + justify-content: center; + gap: 0; + } + + .legal-links { + margin-top: 0.8em; + } +} \ No newline at end of file diff --git a/src/features/legal/errors.js b/src/features/legal/errors.js new file mode 100644 index 0000000..52405c4 --- /dev/null +++ b/src/features/legal/errors.js @@ -0,0 +1,22 @@ +/* +Copyright 2026 Seekra + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +export class FetchError extends Error { + constructor (message) { + super(message); + this.name = 'FetchError'; + }; +}; diff --git a/src/features/legal/services/__tests__/fetchLegalContent.test.js b/src/features/legal/services/__tests__/fetchLegalContent.test.js new file mode 100644 index 0000000..4b4604f --- /dev/null +++ b/src/features/legal/services/__tests__/fetchLegalContent.test.js @@ -0,0 +1,110 @@ +/* +Copyright 2026 Seekra + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import { FetchError } from '../../errors'; +import { getLegalNotice } from '../fetchLegalContent'; +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'; + +let fetchSpy; + +beforeEach(() => { + fetchSpy = vi.spyOn(globalThis, 'fetch'); +}); + +afterEach(() => { + fetchSpy.mockRestore(); +}); + +const exampleHtml = `

Heading

+

+ ... +

`; + +const exampleHtmlWithLinkClass = `

Heading

+

+ ... +

`; +const exampleHtmlDocument = ` + + Legal Notice + + + ${exampleHtml} + +`; +const exampleHtmlDocumentWithMain = ` + + Legal Notice + + +
+ ${exampleHtml} +
+ +`; + +describe('fetchLegalContent', () => { + describe('getLegalNotice', () => { + describe('success', () => { + test('returns HTML body', async () => { + fetchSpy.mockResolvedValue( + new Response(exampleHtmlDocument) + ); + + expect( + (await getLegalNotice()).trim() + ).toBe(exampleHtmlWithLinkClass); + }); + + test('returns HTML
', async () => { + fetchSpy.mockResolvedValue( + new Response(exampleHtmlDocumentWithMain) + ); + + expect( + (await getLegalNotice()).trim() + ).toBe(exampleHtmlWithLinkClass); + }); + + test('does not fail on success status code', async () => { + fetchSpy.mockResolvedValue( + new Response(null, { status: 206 }) + ); + + await getLegalNotice(); + }); + }); + + describe('error', () => { + test('throws FetchError when fetch fails', async () => { + fetchSpy.mockRejectedValue(new TypeError()); + await expect(getLegalNotice()).rejects.toThrow(FetchError); + }); + + test('throws FetchError on HTTP error', async () => { + fetchSpy.mockResolvedValue( + new Response(null, { status: 404 }) + ) + await expect(getLegalNotice()).rejects.toThrow(FetchError); + }); + + test('does not throw FetchError when fetch throws another error than TypeError', async () => { + fetchSpy.mockRejectedValue(new Error()); + await expect(getLegalNotice()).rejects.toThrow(Error); + }); + }); + }); +}); diff --git a/src/features/legal/services/fetchLegalContent.js b/src/features/legal/services/fetchLegalContent.js new file mode 100644 index 0000000..663ce9d --- /dev/null +++ b/src/features/legal/services/fetchLegalContent.js @@ -0,0 +1,44 @@ +/* +Copyright 2026 Seekra + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import { FetchError } from '../errors'; +import { getAssetsUrl } from '@/config/env'; + +const fetchHtml = async function fetchHtml (url, options) { + let response; + try { + response = await fetch(url, options); + } catch (err) { + if (err instanceof TypeError) throw new FetchError(err); + else throw err; + } + if (response.ok) return await response.text(); + else throw new FetchError(); +}; + +export const getLegalNotice = async function getLegalNotice () { + const legalNoticeUrl = new URL('legal/legal_notice.html', getAssetsUrl()).href; + const html = await fetchHtml(legalNoticeUrl); + + const parser = new DOMParser(); + const doc = parser.parseFromString(html, 'text/html'); + + const legalNoticeContainer = doc.querySelector('main') ?? doc.body; + legalNoticeContainer.querySelectorAll('a').forEach( + (link) => link.classList.add('link') + ); + return legalNoticeContainer.innerHTML; +}; diff --git a/src/features/legal/views/LegalNoticeView.vue b/src/features/legal/views/LegalNoticeView.vue new file mode 100644 index 0000000..360a394 --- /dev/null +++ b/src/features/legal/views/LegalNoticeView.vue @@ -0,0 +1,61 @@ + + + + + + + diff --git a/src/features/legal/views/__tests__/LegalNoticeView.test.js b/src/features/legal/views/__tests__/LegalNoticeView.test.js new file mode 100644 index 0000000..745a690 --- /dev/null +++ b/src/features/legal/views/__tests__/LegalNoticeView.test.js @@ -0,0 +1,78 @@ +/* +Copyright 2026 Seekra + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import { FetchError } from '../../errors.js'; +import LegalNoticeView from '../LegalNoticeView.vue'; +import { mountComponent } from '@/test-utils/mountComponent'; +import { flushPromises } from '@vue/test-utils'; +import { afterEach, describe, expect, test, vi } from 'vitest'; + +const getLegalNotice = vi.hoisted(() => vi.fn().mockResolvedValue('legal notice')); +vi.mock('../../services/fetchLegalContent', async (importOriginal) => { + const actual = await importOriginal(); + return { + ...actual, + getLegalNotice + }; +}); + +afterEach(() => getLegalNotice.mockRestore()); + +describe('LegalNoticeView', () => { + test('shows loading indicator', () => { + const wrapper = mountComponent(LegalNoticeView); + + const legalNoticeLoading = wrapper.find('.legal-notice-loading'); + const legalNoticeError = wrapper.find('.error'); + const legalNotice = wrapper.find('.legal-notice'); + + expect(legalNoticeLoading.exists()).toBe(true); + expect(legalNoticeError.exists()).toBe(false); + expect(legalNotice.exists()).toBe(false); + }); + + test('shows error', async () => { + getLegalNotice.mockRejectedValue(new FetchError()); + + const wrapper = mountComponent(LegalNoticeView); + + await flushPromises(); + await wrapper.vm.$nextTick(); + + const legalNoticeLoading = wrapper.find('.legal-notice-loading'); + const legalNoticeError = wrapper.find('.error'); + const legalNotice = wrapper.find('.legal-notice'); + + expect(legalNoticeLoading.exists()).toBe(false); + expect(legalNoticeError.exists()).toBe(true); + expect(legalNotice.exists()).toBe(false); + }); + + test('shows legal notice', async () => { + const wrapper = mountComponent(LegalNoticeView); + + await flushPromises(); + await wrapper.vm.$nextTick(); + + const legalNoticeLoading = wrapper.find('.legal-notice-loading'); + const legalNoticeError = wrapper.find('.error'); + const legalNotice = wrapper.find('.legal-notice'); + + expect(legalNoticeLoading.exists()).toBe(false); + expect(legalNoticeError.exists()).toBe(false); + expect(legalNotice.exists()).toBe(true); + }); +}); diff --git a/src/locales/de.json b/src/locales/de.json index 1b82c31..bc632a9 100644 --- a/src/locales/de.json +++ b/src/locales/de.json @@ -61,5 +61,11 @@ "ariaLabel": "Wählt die Option {option} aus" } } + }, + "legal": { + "notice": { + "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 c47a8c1..6b8dd0e 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -61,5 +61,11 @@ "ariaLabel": "Selects option {option}" } } + }, + "legal": { + "notice": { + "title": "Legal Notice", + "loadError": "The legal notice could not be loaded." + } } } \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 18fe434..28fccfe 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -18,6 +18,7 @@ import { createRouter, createWebHistory } from 'vue-router'; import { i18n } from '@/i18n'; import SearchView from '../views/SearchView.vue'; +import LegalNoticeView from '@/features/legal/views/LegalNoticeView.vue'; import SearchResultsView from '@/features/search/views/SearchResultsView.vue'; import SettingsView from '@/features/settings/views/SettingsView.vue'; import NotFound from '../views/NotFound.vue'; @@ -39,6 +40,14 @@ const routes = [ title: (route) => route.query.q } }, + { + path: '/legal/notice', + name: 'legalNotice', + component: LegalNoticeView, + meta: { + title: () => i18n.global.t('legal.notice.title') + } + }, { path: '/settings/:rest(.*)*', name: 'settings', diff --git a/src/styles/common.css b/src/styles/common.css index 5c1fddd..2100f66 100644 --- a/src/styles/common.css +++ b/src/styles/common.css @@ -24,6 +24,7 @@ body { .link { text-decoration: none; + color: var(--dark); } .link:hover:not(.button-link), .link:focus-visible:not(.button-link) { @@ -91,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) {