generated from Seekra/repository-template
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
  jakob.scheidandGitea
|
cfcc36b912
|
||
|
jakob.scheidandGitea
|
b2a1662534
|
||
|
jakob.scheidandGitea
|
46ba0577a9
|
||
|
jakob.scheidandGitea
|
05e17d949b
|
||
|
jakob.scheidandGitea
|
21704a439b
|
||
|
jakob.scheidandGitea
|
39c22058cf
|
||
|
jakob.scheidandGitea
|
7ce1e8e266
|
||
|
jakob.scheidandGitea
|
0aece17906
|
@@ -40,8 +40,20 @@ const copyrightPeriod =
|
|||||||
</RouterLink>
|
</RouterLink>
|
||||||
<LanguageSwitchButton />
|
<LanguageSwitchButton />
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-segment">
|
<div class="footer-segment legal-segment">
|
||||||
© {{ copyrightPeriod }} Seekra
|
<div></div>
|
||||||
|
<div class="copyright-notice">
|
||||||
|
© {{ copyrightPeriod }} Seekra
|
||||||
|
</div>
|
||||||
|
<div class="legal-links">
|
||||||
|
<RouterLink
|
||||||
|
:to="{ name: 'legalNotice' }"
|
||||||
|
class="link"
|
||||||
|
:title="t('legal.notice.title')"
|
||||||
|
>
|
||||||
|
{{ t('legal.notice.title') }}
|
||||||
|
</RouterLink>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</template>
|
</template>
|
||||||
@@ -54,7 +66,6 @@ const copyrightPeriod =
|
|||||||
.footer-segment {
|
.footer-segment {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
|
||||||
gap: 32px;
|
gap: 32px;
|
||||||
padding: var(--padding-y);
|
padding: var(--padding-y);
|
||||||
background-color: var(--light-bg);
|
background-color: var(--light-bg);
|
||||||
@@ -64,4 +75,31 @@ const copyrightPeriod =
|
|||||||
.global-footer a {
|
.global-footer a {
|
||||||
color: var(--dark);
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -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';
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -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 = `<h1>Heading</h1>
|
||||||
|
<p>
|
||||||
|
<a>...</a>
|
||||||
|
</p>`;
|
||||||
|
|
||||||
|
const exampleHtmlWithLinkClass = `<h1>Heading</h1>
|
||||||
|
<p>
|
||||||
|
<a class="link">...</a>
|
||||||
|
</p>`;
|
||||||
|
const exampleHtmlDocument = `<html>
|
||||||
|
<head>
|
||||||
|
<title>Legal Notice</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
${exampleHtml}
|
||||||
|
</body>
|
||||||
|
</html>`;
|
||||||
|
const exampleHtmlDocumentWithMain = `<html>
|
||||||
|
<head>
|
||||||
|
<title>Legal Notice</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
${exampleHtml}
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>`;
|
||||||
|
|
||||||
|
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 <main>', 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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -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;
|
||||||
|
};
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
<!--
|
||||||
|
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.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { getLegalNotice } from '../services/fetchLegalContent';
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const loading = ref(true);
|
||||||
|
const legalNoticeError = ref(null);
|
||||||
|
const legalNoticeHtml = ref(null);
|
||||||
|
onMounted(async () => {
|
||||||
|
try {
|
||||||
|
legalNoticeHtml.value = await getLegalNotice();
|
||||||
|
} catch {
|
||||||
|
legalNoticeError.value = 'legal.notice.loadError';
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="main-content-padding legal-notice-container">
|
||||||
|
<header class="header">
|
||||||
|
<h1>
|
||||||
|
{{ t('legal.notice.title') }}
|
||||||
|
</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="legal-notice-loading" v-if="loading">
|
||||||
|
{{ t('loading') }}
|
||||||
|
</div>
|
||||||
|
<div class="error" v-else-if="legalNoticeError">
|
||||||
|
{{ t(legalNoticeError) }}
|
||||||
|
</div>
|
||||||
|
<div class="legal-notice" v-html="legalNoticeHtml" v-else></div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.header h1 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -61,5 +61,11 @@
|
|||||||
"ariaLabel": "Wählt die Option {option} aus"
|
"ariaLabel": "Wählt die Option {option} aus"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"legal": {
|
||||||
|
"notice": {
|
||||||
|
"title": "Impressum",
|
||||||
|
"loadError": "Das Impressum konnte nicht geladen werden."
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -61,5 +61,11 @@
|
|||||||
"ariaLabel": "Selects option {option}"
|
"ariaLabel": "Selects option {option}"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"legal": {
|
||||||
|
"notice": {
|
||||||
|
"title": "Legal Notice",
|
||||||
|
"loadError": "The legal notice could not be loaded."
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -18,6 +18,7 @@ import { createRouter, createWebHistory } from 'vue-router';
|
|||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
|
|
||||||
import SearchView from '../views/SearchView.vue';
|
import SearchView from '../views/SearchView.vue';
|
||||||
|
import LegalNoticeView from '@/features/legal/views/LegalNoticeView.vue';
|
||||||
import SearchResultsView from '@/features/search/views/SearchResultsView.vue';
|
import SearchResultsView from '@/features/search/views/SearchResultsView.vue';
|
||||||
import SettingsView from '@/features/settings/views/SettingsView.vue';
|
import SettingsView from '@/features/settings/views/SettingsView.vue';
|
||||||
import NotFound from '../views/NotFound.vue';
|
import NotFound from '../views/NotFound.vue';
|
||||||
@@ -39,6 +40,14 @@ const routes = [
|
|||||||
title: (route) => route.query.q
|
title: (route) => route.query.q
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/legal/notice',
|
||||||
|
name: 'legalNotice',
|
||||||
|
component: LegalNoticeView,
|
||||||
|
meta: {
|
||||||
|
title: () => i18n.global.t('legal.notice.title')
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/settings/:rest(.*)*',
|
path: '/settings/:rest(.*)*',
|
||||||
name: 'settings',
|
name: 'settings',
|
||||||
|
|||||||
@@ -24,6 +24,7 @@ body {
|
|||||||
|
|
||||||
.link {
|
.link {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
color: var(--dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.link:hover:not(.button-link), .link:focus-visible:not(.button-link) {
|
.link:hover:not(.button-link), .link:focus-visible:not(.button-link) {
|
||||||
@@ -92,3 +93,11 @@ input {
|
|||||||
* {
|
* {
|
||||||
-webkit-tap-highlight-color: transparent;
|
-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);
|
||||||
|
}
|
||||||
|
|||||||
@@ -84,6 +84,9 @@ body {
|
|||||||
--light-hover: var(--light-d-2);
|
--light-hover: var(--light-d-2);
|
||||||
|
|
||||||
--invert: invert(0);
|
--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) {
|
@media (prefers-color-scheme: dark) {
|
||||||
|
|||||||
Reference in New Issue
Block a user