Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 12 Pull requests Projects Releases 18 Packages Wiki Activity Actions

move pwa manifest to backend

Browse source
This commit is contained in:
Julian Krauser 2025-04-24 16:49:14 +02:00
parent 916e61897a
commit 20a2a3ccd0
23 changed files with 95 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.env.example
View file

@ -1,5 +1 @@
VITE_SERVER_ADDRESS = backend_url #ohne pfad VITE_SERVER_ADDRESS = backend_url #ohne pfad
VITE_APP_NAME_OVERWRITE = Mitgliederverwaltung # overwrites FF Admin
VITE_IMPRINT_LINK = https://mywebsite-imprint-url
VITE_PRIVACY_LINK = https://mywebsite-privacy-url
VITE_CUSTOM_LOGIN_MESSAGE = betrieben von xy

6
.env.production
View file

@ -1,5 +1 @@
VITE_SERVER_ADDRESS = __SERVERADDRESS__ VITE_SERVER_ADDRESS = __SERVERADDRESS__
VITE_APP_NAME_OVERWRITE = __APPNAMEOVERWRITE__
VITE_IMPRINT_LINK = __IMPRINTLINK__
VITE_PRIVACY_LINK = __PRIVACYLINK__
VITE_CUSTOM_LOGIN_MESSAGE = __CUSTOMLOGINMESSAGE__

9
entrypoint.sh
View file

@ -1,7 +1,7 @@
#!/bin/sh #!/bin/sh
keys="SERVERADDRESS APPNAMEOVERWRITE IMPRINTLINK PRIVACYLINK CUSTOMLOGINMESSAGE" keys="SERVERADDRESS"
files="/usr/share/nginx/html/assets/config-*.js /usr/share/nginx/html/manifest.webmanifest" files="/usr/share/nginx/html/assets/config-*.js"
# Replace env vars in files served by NGINX # Replace env vars in files served by NGINX
for file in $files for file in $files
@ -12,11 +12,6 @@ do
# Get environment variable # Get environment variable
value=$(eval echo "\$$key") value=$(eval echo "\$$key")
# Set default value for APPNAMEOVERWRITE if empty
if [ "$key" = "APPNAMEOVERWRITE" ] && [ -z "$value" ]; then
value="FF Admin"
fi
echo "replace $key by $value" echo "replace $key by $value"
# replace __[variable_name]__ value with environment variable # replace __[variable_name]__ value with environment variable

7
index.html
View file

@ -2,11 +2,14 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/favicon.png" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- icon and manifest are provided by App.vue -->
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
<script>
// screen.orientation.lock("portrait-primary").catch(() => {});
</script>
</body> </body>
</html> </html>

7
package-lock.json generated
View file

@ -35,6 +35,7 @@
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"pdf-dist": "^1.0.0", "pdf-dist": "^1.0.0",
"pinia": "^3.0.2", "pinia": "^3.0.2",
"pwacompat": "^2.0.17",
"qrcode": "^1.5.3", "qrcode": "^1.5.3",
"qs": "^6.11.2", "qs": "^6.11.2",
"socket.io-client": "^4.5.0", "socket.io-client": "^4.5.0",
@ -8752,6 +8753,12 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/pwacompat": {
"version": "2.0.17",
"resolved": "https://registry.npmjs.org/pwacompat/-/pwacompat-2.0.17.tgz",
"integrity": "sha512-6Du7IZdIy7cHiv7AhtDy4X2QRM8IAD5DII69mt5qWibC2d15ZU8DmBG1WdZKekG11cChSu4zkSUGPF9sweOl6w==",
"license": "Apache-2.0"
},
"node_modules/qrcode": { "node_modules/qrcode": {
"version": "1.5.4", "version": "1.5.4",
"resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz", "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",

1
package.json
View file

@ -50,6 +50,7 @@
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"pdf-dist": "^1.0.0", "pdf-dist": "^1.0.0",
"pinia": "^3.0.2", "pinia": "^3.0.2",
"pwacompat": "^2.0.17",
"qrcode": "^1.5.3", "qrcode": "^1.5.3",
"qs": "^6.11.2", "qs": "^6.11.2",
"socket.io-client": "^4.5.0", "socket.io-client": "^4.5.0",

BIN
public/Logo.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 34 KiB

BIN
public/favicon.ico
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9.4 KiB

BIN
public/favicon.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 29 KiB

22
src/App.vue
View file

@ -8,6 +8,11 @@
</div> </div>
<Footer @contextmenu.prevent /> <Footer @contextmenu.prevent />
<Notification /> <Notification />
<Teleport to="head">
<link rel="icon" type="image/ico" :href="config.server_address + '/api/public/favicon.ico'" />
<link rel="manifest" :href="config.server_address + '/api/public/manifest.webmanifest'" />
</Teleport>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -15,20 +20,32 @@ import { defineComponent } from "vue";
import { RouterView } from "vue-router"; import { RouterView } from "vue-router";
import Header from "./components/Header.vue"; import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue"; import Footer from "./components/Footer.vue";
import { mapState } from "pinia"; import { mapActions, mapState } from "pinia";
import { useAuthStore } from "./stores/auth"; import { useAuthStore } from "./stores/auth";
import { isAuthenticatedPromise } from "./router/authGuard"; import { isAuthenticatedPromise } from "./router/authGuard";
import ContextMenu from "./components/ContextMenu.vue"; import ContextMenu from "./components/ContextMenu.vue";
import Modal from "./components/Modal.vue"; import Modal from "./components/Modal.vue";
import Notification from "./components/Notification.vue"; import Notification from "./components/Notification.vue";
import { config } from "./config";
import { useConfigurationStore } from "@/stores/configuration";
</script> </script>
<script lang="ts"> <script lang="ts">
export default defineComponent({ export default defineComponent({
watch: {
clubName() {
document.title = this.clubName;
},
},
computed: { computed: {
...mapState(useAuthStore, ["authCheck"]), ...mapState(useAuthStore, ["authCheck"]),
...mapState(useConfigurationStore, ["clubName"]),
}, },
mounted() { mounted() {
this.configure();
document.title = this.clubName;
if (!this.authCheck && localStorage.getItem("access_token")) { if (!this.authCheck && localStorage.getItem("access_token")) {
isAuthenticatedPromise().catch(() => { isAuthenticatedPromise().catch(() => {
localStorage.removeItem("access_token"); localStorage.removeItem("access_token");
@ -36,5 +53,8 @@ export default defineComponent({
}); });
} }
}, },
methods: {
...mapActions(useConfigurationStore, ["configure"]),
},
}); });
</script> </script>

7
src/components/AppLogo.vue Normal file
View file

@ -0,0 +1,7 @@
<template>
<img :src="url + '/api/public/applogo.png'" alt="LOGO" class="h-full w-auto" />
</template>
<script setup lang="ts">
import { url } from "@/serverCom";
</script>

3
src/components/Header.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<header class="flex flex-row h-16 min-h-16 justify-between p-3 md:px-5 bg-white shadow-xs"> <header class="flex flex-row h-16 min-h-16 justify-between p-3 md:px-5 bg-white shadow-xs">
<RouterLink to="/" class="flex flex-row gap-2 align-bottom w-fit h-full"> <RouterLink to="/" class="flex flex-row gap-2 align-bottom w-fit h-full">
<img src="/Logo.png" alt="LOGO" class="h-full w-auto" /> <AppLogo />
<h1 v-if="false" class="font-bold text-3xl w-fit whitespace-nowrap"> <h1 v-if="false" class="font-bold text-3xl w-fit whitespace-nowrap">
{{ config.app_name_overwrite || "FF Admin" }} {{ config.app_name_overwrite || "FF Admin" }}
</h1> </h1>
@ -42,6 +42,7 @@ import { config } from "@/config";
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import AppLogo from "./AppLogo.vue";
export default defineComponent({ export default defineComponent({
computed: { computed: {
...mapState(useAuthStore, ["authCheck"]), ...mapState(useAuthStore, ["authCheck"]),

3
src/main.ts
View file

@ -9,6 +9,9 @@ import "../node_modules/nprogress/nprogress.css";
import { http } from "./serverCom"; import { http } from "./serverCom";
import "./main.css"; import "./main.css";
// auto generates splash screen for iOS
import "pwacompat";
NProgress.configure({ showSpinner: false }); NProgress.configure({ showSpinner: false });
const app = createApp(App); const app = createApp(App);

6
src/router/index.ts
View file

@ -2,14 +2,12 @@ import { createRouter, createWebHistory } from "vue-router";
import Login from "@/views/Login.vue"; import Login from "@/views/Login.vue";
import { isAuthenticated } from "./authGuard"; import { isAuthenticated } from "./authGuard";
import { loadAccountData } from "./accountGuard";
import { isSetup } from "./setupGuard"; import { isSetup } from "./setupGuard";
import { abilityAndNavUpdate } from "./adminGuard"; import { abilityAndNavUpdate } from "./adminGuard";
import type { PermissionType, PermissionSection, PermissionModule } from "@/types/permissionTypes"; import type { PermissionType, PermissionSection, PermissionModule } from "@/types/permissionTypes";
import { resetMemberStores, setMemberId } from "./memberGuard"; import { resetMemberStores, setMemberId } from "./memberGuard";
import { resetProtocolStores, setProtocolId } from "./protocolGuard"; import { resetProtocolStores, setProtocolId } from "./protocolGuard";
import { resetNewsletterStores, setNewsletterId } from "./newsletterGuard"; import { resetNewsletterStores, setNewsletterId } from "./newsletterGuard";
import { config } from "../config";
import { setBackupPage } from "./backupGuard"; import { setBackupPage } from "./backupGuard";
const router = createRouter({ const router = createRouter({
@ -777,10 +775,6 @@ const router = createRouter({
], ],
}); });
router.afterEach((to, from) => {
document.title = config.app_name_overwrite || "FF Admin";
});
export default router; export default router;
declare module "vue-router" { declare module "vue-router" {

2
src/serverCom.ts
View file

@ -135,4 +135,4 @@ async function* streamingFetch(path: string, abort?: AbortController) {
} }
} }
export { http, newEventSource, streamingFetch, host }; export { http, newEventSource, streamingFetch, host, url };

30
src/stores/configuration.ts Normal file
View file

@ -0,0 +1,30 @@
import { defineStore } from "pinia";
import { http } from "../serverCom";
export const useConfigurationStore = defineStore("configuration", {
state: () => {
return {
clubName: "",
clubImprint: "",
clubPrivacy: "",
clubWebsite: "",
appCustom_login_message: "",
appShow_link_to_calendar: "",
};
},
actions: {
configure() {
http
.get("/public/configuration")
.then((res) => {
this.clubName = res.data["club.name"];
this.clubImprint = res.data["club.imprint"];
this.clubPrivacy = res.data["club.privacy"];
this.clubWebsite = res.data["club.website"];
this.appCustom_login_message = res.data["app.custom_login_message"];
this.appShow_link_to_calendar = res.data["app.show_link_to_calendar"];
})
.catch(() => {});
},
},
});

3
src/views/Login.vue
View file

@ -2,7 +2,7 @@
<div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"> <div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8 pb-20"> <div class="max-w-md w-full space-y-8 pb-20">
<div class="flex flex-col items-center gap-4"> <div class="flex flex-col items-center gap-4">
<img src="/Logo.png" alt="LOGO" class="h-auto w-full" /> <AppLogo />
<h2 class="text-center text-4xl font-extrabold text-gray-900"> <h2 class="text-center text-4xl font-extrabold text-gray-900">
{{ config.app_name_overwrite || "FF Admin" }} {{ config.app_name_overwrite || "FF Admin" }}
</h2> </h2>
@ -51,6 +51,7 @@ import FailureXMark from "@/components/FailureXMark.vue";
import { resetAllPiniaStores } from "@/helpers/piniaReset"; import { resetAllPiniaStores } from "@/helpers/piniaReset";
import FormBottomBar from "@/components/FormBottomBar.vue"; import FormBottomBar from "@/components/FormBottomBar.vue";
import { config } from "@/config"; import { config } from "@/config";
import AppLogo from "@/components/AppLogo.vue";
</script> </script>
<script lang="ts"> <script lang="ts">

3
src/views/invite/Verify.vue
View file

@ -2,7 +2,7 @@
<div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"> <div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8 pb-20"> <div class="max-w-md w-full space-y-8 pb-20">
<div class="flex flex-col items-center gap-4"> <div class="flex flex-col items-center gap-4">
<img src="/Logo.png" alt="LOGO" class="h-auto w-full" /> <AppLogo />
<h2 class="text-center text-4xl font-extrabold text-gray-900">Einrichtung</h2> <h2 class="text-center text-4xl font-extrabold text-gray-900">Einrichtung</h2>
</div> </div>
@ -49,6 +49,7 @@ import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue"; import FailureXMark from "@/components/FailureXMark.vue";
import FormBottomBar from "@/components/FormBottomBar.vue"; import FormBottomBar from "@/components/FormBottomBar.vue";
import TextCopy from "@/components/TextCopy.vue"; import TextCopy from "@/components/TextCopy.vue";
import AppLogo from "@/components/AppLogo.vue";
</script> </script>
<script lang="ts"> <script lang="ts">

3
src/views/reset/Reset.vue
View file

@ -2,7 +2,7 @@
<div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"> <div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8 pb-20"> <div class="max-w-md w-full space-y-8 pb-20">
<div class="flex flex-col items-center gap-4"> <div class="flex flex-col items-center gap-4">
<img src="/Logo.png" alt="LOGO" class="h-auto w-full" /> <AppLogo />
<h2 class="text-center text-4xl font-extrabold text-gray-900">TOTP zurücksetzen</h2> <h2 class="text-center text-4xl font-extrabold text-gray-900">TOTP zurücksetzen</h2>
</div> </div>
@ -49,6 +49,7 @@ import FailureXMark from "@/components/FailureXMark.vue";
import { RouterLink } from "vue-router"; import { RouterLink } from "vue-router";
import FormBottomBar from "@/components/FormBottomBar.vue"; import FormBottomBar from "@/components/FormBottomBar.vue";
import TextCopy from "@/components/TextCopy.vue"; import TextCopy from "@/components/TextCopy.vue";
import AppLogo from "@/components/AppLogo.vue";
</script> </script>
<script lang="ts"> <script lang="ts">

3
src/views/reset/Start.vue
View file

@ -2,7 +2,7 @@
<div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"> <div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8 pb-20"> <div class="max-w-md w-full space-y-8 pb-20">
<div class="flex flex-col items-center gap-4"> <div class="flex flex-col items-center gap-4">
<img src="/Logo.png" alt="LOGO" class="h-auto w-full" /> <AppLogo />
<h2 class="text-center text-4xl font-extrabold text-gray-900">TOTP zurücksetzen</h2> <h2 class="text-center text-4xl font-extrabold text-gray-900">TOTP zurücksetzen</h2>
</div> </div>
@ -36,6 +36,7 @@ import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue"; import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue"; import FailureXMark from "@/components/FailureXMark.vue";
import FormBottomBar from "@/components/FormBottomBar.vue"; import FormBottomBar from "@/components/FormBottomBar.vue";
import AppLogo from "@/components/AppLogo.vue";
</script> </script>
<script lang="ts"> <script lang="ts">

3
src/views/setup/Setup.vue
View file

@ -2,7 +2,7 @@
<div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"> <div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8 pb-20"> <div class="max-w-md w-full space-y-8 pb-20">
<div class="flex flex-col items-center gap-4"> <div class="flex flex-col items-center gap-4">
<img src="/Logo.png" alt="LOGO" class="h-auto w-full" /> <AppLogo />
<h2 class="text-center text-4xl font-extrabold text-gray-900">Einrichtung</h2> <h2 class="text-center text-4xl font-extrabold text-gray-900">Einrichtung</h2>
</div> </div>
@ -44,6 +44,7 @@ import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue"; import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue"; import FailureXMark from "@/components/FailureXMark.vue";
import FormBottomBar from "@/components/FormBottomBar.vue"; import FormBottomBar from "@/components/FormBottomBar.vue";
import AppLogo from "@/components/AppLogo.vue";
</script> </script>
<script lang="ts"> <script lang="ts">

3
src/views/setup/Verify.vue
View file

@ -2,7 +2,7 @@
<div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"> <div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8 pb-20"> <div class="max-w-md w-full space-y-8 pb-20">
<div class="flex flex-col items-center gap-4"> <div class="flex flex-col items-center gap-4">
<img src="/Logo.png" alt="LOGO" class="h-auto w-full" /> <AppLogo />
<h2 class="text-center text-4xl font-extrabold text-gray-900">Einrichtung</h2> <h2 class="text-center text-4xl font-extrabold text-gray-900">Einrichtung</h2>
</div> </div>
@ -50,6 +50,7 @@ import FailureXMark from "@/components/FailureXMark.vue";
import { RouterLink } from "vue-router"; import { RouterLink } from "vue-router";
import FormBottomBar from "@/components/FormBottomBar.vue"; import FormBottomBar from "@/components/FormBottomBar.vue";
import TextCopy from "@/components/TextCopy.vue"; import TextCopy from "@/components/TextCopy.vue";
import AppLogo from "@/components/AppLogo.vue";
</script> </script>
<script lang="ts"> <script lang="ts">

22
vite.config.ts
View file

@ -39,27 +39,9 @@ export default defineConfig({
VitePWA({ VitePWA({
registerType: "autoUpdate", registerType: "autoUpdate",
injectRegister: "auto", injectRegister: "auto",
includeAssets: ["favicon.png", "favicon.ico"], manifest: false,
manifest: {
name: "__APPNAMEOVERWRITE__",
short_name: "__APPNAMEOVERWRITE__",
theme_color: "#990b00",
display: "standalone",
start_url: "/",
icons: [
{
src: "favicon.ico",
sizes: "48x48",
type: "image/ico",
},
{
src: "favicon.png",
sizes: "512x512",
type: "image/png",
},
],
},
workbox: { workbox: {
navigateFallbackDenylist: [/^\/api*/],
runtimeCaching: [ runtimeCaching: [
{ {
urlPattern: /^\/api\//, urlPattern: /^\/api\//,