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

Merge pull request 'minor v1.5.0' (#92) from develop into main

Browse source 
Reviewed-on: #92
This commit is contained in:
Julian Krauser 2025-05-06 07:52:22 +00:00
commit 0be649c3ba
68 changed files with 4363 additions and 1415 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.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

4
.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>

2910
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

61
package.json
View file

@ -24,19 +24,19 @@
"author": "JK Effects", "author": "JK Effects",
"license": "AGPL-3.0-only", "license": "AGPL-3.0-only",
"dependencies": { "dependencies": {
"@fullcalendar/core": "^6.1.15", "@fullcalendar/core": "^6.1.17",
"@fullcalendar/daygrid": "^6.1.15", "@fullcalendar/daygrid": "^6.1.17",
"@fullcalendar/interaction": "^6.1.15", "@fullcalendar/interaction": "^6.1.17",
"@fullcalendar/list": "^6.1.17", "@fullcalendar/list": "^6.1.17",
"@fullcalendar/timegrid": "^6.1.15", "@fullcalendar/timegrid": "^6.1.17",
"@fullcalendar/vue3": "^6.1.15", "@fullcalendar/vue3": "^6.1.17",
"@headlessui/vue": "^1.7.23", "@headlessui/vue": "^1.7.23",
"@heroicons/vue": "^2.1.5", "@heroicons/vue": "^2.2.0",
"@tailwindcss/vite": "^4.1.3", "@tailwindcss/vite": "^4.1.5",
"@vueup/vue-quill": "^1.2.0", "@vueup/vue-quill": "^1.2.0",
"axios": "^1.7.9", "axios": "^1.9.0",
"event-source-polyfill": "^1.0.31", "event-source-polyfill": "^1.0.31",
"grapesjs": "^0.22.4", "grapesjs": "^0.22.7",
"grapesjs-preset-newsletter": "^1.0.2", "grapesjs-preset-newsletter": "^1.0.2",
"highlight.js": "^11.11.1", "highlight.js": "^11.11.1",
"jwt-decode": "^4.0.0", "jwt-decode": "^4.0.0",
@ -50,44 +50,45 @@
"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",
"qrcode": "^1.5.3", "pwacompat": "^2.0.17",
"qs": "^6.11.2", "qrcode": "^1.5.4",
"socket.io-client": "^4.5.0", "qs": "^6.14.0",
"socket.io-client": "^4.8.1",
"unplugin-vue-markdown": "^28.3.1", "unplugin-vue-markdown": "^28.3.1",
"uuid": "^11.1.0", "uuid": "^11.1.0",
"vue": "^3.4.29", "vue": "^3.5.13",
"vue-router": "^4.3.3" "vue-router": "^4.5.1"
}, },
"devDependencies": { "devDependencies": {
"@rushstack/eslint-patch": "^1.8.0", "@rushstack/eslint-patch": "^1.11.0",
"@tailwindcss/postcss": "^4.1.3", "@tailwindcss/postcss": "^4.1.5",
"@tsconfig/node20": "^20.1.4", "@tsconfig/node20": "^20.1.5",
"@types/eslint": "~9.6.0", "@types/eslint": "~9.6.1",
"@types/event-source-polyfill": "^1.0.5", "@types/event-source-polyfill": "^1.0.5",
"@types/lodash.clonedeep": "^4.5.9", "@types/lodash.clonedeep": "^4.5.9",
"@types/lodash.difference": "^4.5.9", "@types/lodash.difference": "^4.5.9",
"@types/lodash.differencewith": "^4.5.9", "@types/lodash.differencewith": "^4.5.9",
"@types/lodash.isequal": "^4.5.8", "@types/lodash.isequal": "^4.5.8",
"@types/markdown-it": "^14.1.2", "@types/markdown-it": "^14.1.2",
"@types/node": "^22.14.0", "@types/node": "^22.15.12",
"@types/nprogress": "^0.2.0", "@types/nprogress": "^0.2.3",
"@types/qrcode": "^1.5.5", "@types/qrcode": "^1.5.5",
"@types/qs": "^6.9.11", "@types/qs": "^6.9.18",
"@types/uuid": "^10.0.0", "@types/uuid": "^10.0.0",
"@vite-pwa/assets-generator": "^1.0.0", "@vite-pwa/assets-generator": "^1.0.0",
"@vitejs/plugin-vue": "^5.0.5", "@vitejs/plugin-vue": "^5.2.3",
"@vue/eslint-config-prettier": "^10.2.0", "@vue/eslint-config-prettier": "^10.2.0",
"@vue/eslint-config-typescript": "^14.5.0", "@vue/eslint-config-typescript": "^14.5.0",
"@vue/tsconfig": "^0.7.0", "@vue/tsconfig": "^0.7.0",
"eslint": "^9.24.0", "eslint": "^9.26.0",
"eslint-plugin-vue": "^10.0.0", "eslint-plugin-vue": "^10.1.0",
"npm-run-all2": "^7.0.2", "npm-run-all2": "^8.0.1",
"prettier": "^3.2.5", "prettier": "^3.5.3",
"tailwindcss": "^4.1.3", "tailwindcss": "^4.1.5",
"typescript": "^5.8.3", "typescript": "^5.8.3",
"vite": "^6.2.6", "vite": "^6.3.5",
"vite-plugin-pwa": "^1.0.0", "vite-plugin-pwa": "^1.0.0",
"vite-plugin-vue-devtools": "^7.6.8", "vite-plugin-vue-devtools": "^7.7.6",
"vue-tsc": "^2.0.21" "vue-tsc": "^2.2.10"
} }
} }

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

16
src/App.vue
View file

@ -8,6 +8,12 @@
</div> </div>
<Footer @contextmenu.prevent /> <Footer @contextmenu.prevent />
<Notification /> <Notification />
<Teleport to="head">
<title>{{ clubName }}</title>
<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 +21,25 @@ 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({
computed: { computed: {
...mapState(useAuthStore, ["authCheck"]), ...mapState(useAuthStore, ["authCheck"]),
...mapState(useConfigurationStore, ["clubName"]),
}, },
mounted() { mounted() {
this.configure();
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 +47,8 @@ export default defineComponent({
}); });
} }
}, },
methods: {
...mapActions(useConfigurationStore, ["configure"]),
},
}); });
</script> </script>

26
src/components/AppIcon.vue Normal file
View file

@ -0,0 +1,26 @@
<template>
<img ref="icon" :src="url + '/api/public/icon.png'" alt="LOGO" class="h-full w-auto" />
</template>
<script setup lang="ts">
import { url } from "@/serverCom";
import { useSettingStore } from "@/stores/admin/management/setting";
import { mapState } from "pinia";
import { defineComponent } from "vue";
</script>
<script lang="ts">
export default defineComponent({
watch: {
icon() {
(this.$refs.icon as HTMLImageElement).src = url + "/api/public/icon.png?" + new Date().getTime();
},
},
computed: {
...mapState(useSettingStore, ["readSetting"]),
icon() {
return this.readSetting("club.icon");
},
},
});
</script>

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

@ -0,0 +1,26 @@
<template>
<img ref="logo" :src="url + '/api/public/applogo.png'" alt="LOGO" class="h-full w-auto" />
</template>
<script setup lang="ts">
import { url } from "@/serverCom";
import { useSettingStore } from "@/stores/admin/management/setting";
import { mapState } from "pinia";
import { defineComponent } from "vue";
</script>
<script lang="ts">
export default defineComponent({
watch: {
logo() {
(this.$refs.logo as HTMLImageElement).src = url + "/api/public/applogo.png?t=" + new Date().getTime();
},
},
computed: {
...mapState(useSettingStore, ["readSetting"]),
logo() {
return this.readSetting("club.logo");
},
},
});
</script>

53
src/components/CheckProgressBar.vue Normal file
View file

@ -0,0 +1,53 @@
<template>
<div class="w-full flex flex-row items-center">
<div class="contents" v-for="(i, index) in total" :key="index">
<div
v-if="index <= successfull && index != step"
class="relative flex items-center justify-center h-8 w-8 border-4 border-success rounded-full"
>
<SuccessCheckmark class="h-8! asolute top-0 m-0!" />
</div>
<div
v-else-if="index <= step"
class="flex items-center justify-center h-8 w-8 border-4 border-success rounded-full"
>
<div class="h-2 w-2 border-4 border-success bg-success rounded-full"></div>
</div>
<div v-else class="h-8 w-8 border-4 border-gray-400 rounded-full"></div>
<div v-if="i != total" class="grow border-2" :class="index < step ? ' border-success' : 'border-gray-400'"></div>
</div>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import SuccessCheckmark from "./SuccessCheckmark.vue";
</script>
<script lang="ts">
export default defineComponent({
props: {
step: {
type: Number,
default: 0,
validator(value: number) {
return value >= 0;
},
},
successfull: {
type: Number,
default: 0,
validator(value: number) {
return value >= 0;
},
},
total: {
type: Number,
default: 1,
validator(value: number) {
return value >= 1;
},
},
},
});
</script>

27
src/components/FormBottomBar.vue
View file

@ -1,10 +1,11 @@
<template> <template>
<div class="flex flex-col text-gray-400 text-sm mt-4 items-center"> <div class="flex flex-col text-gray-400 text-sm mt-4 items-center">
<div class="flex flex-row gap-2 justify-center"> <p v-if="appCustom_login_message">{{ appCustom_login_message }}</p>
<a v-if="config.imprint_link" :href="config.imprint_link" target="_blank">Datenschutz</a> <div class="flex flex-row gap-2 justify-center mb-3">
<a v-if="config.privacy_link" :href="config.privacy_link" target="_blank">Impressum</a> <a v-if="clubWebsite" :href="clubWebsite" target="_blank">Webseite</a>
<a v-if="clubImprint" :href="clubImprint" target="_blank">Datenschutz</a>
<a v-if="clubPrivacy" :href="clubPrivacy" target="_blank">Impressum</a>
</div> </div>
<p v-if="config.custom_login_message">{{ config.custom_login_message }}</p>
<p> <p>
<a href="https://ff-admin.de/admin" target="_blank">FF Admin</a> <a href="https://ff-admin.de/admin" target="_blank">FF Admin</a>
entwickelt von entwickelt von
@ -14,5 +15,21 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { config } from "@/config"; import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import { useConfigurationStore } from "@/stores/configuration";
</script>
<script lang="ts">
export default defineComponent({
computed: {
...mapState(useConfigurationStore, [
"appCustom_login_message",
"appShow_link_to_calendar",
"clubImprint",
"clubPrivacy",
"clubWebsite",
]),
},
});
</script> </script>

8
src/components/Header.vue
View file

@ -1,9 +1,9 @@
<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" }} {{ clubName }}
</h1> </h1>
</RouterLink> </RouterLink>
<div class="flex flex-row gap-2 items-center"> <div class="flex flex-row gap-2 items-center">
@ -37,15 +37,17 @@ import { useAuthStore } from "@/stores/auth";
import { useNavigationStore } from "@/stores/admin/navigation"; import { useNavigationStore } from "@/stores/admin/navigation";
import TopLevelLink from "./admin/TopLevelLink.vue"; import TopLevelLink from "./admin/TopLevelLink.vue";
import UserMenu from "./UserMenu.vue"; import UserMenu from "./UserMenu.vue";
import { config } from "@/config";
</script> </script>
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import AppLogo from "./AppLogo.vue";
import { useConfigurationStore } from "../stores/configuration";
export default defineComponent({ export default defineComponent({
computed: { computed: {
...mapState(useAuthStore, ["authCheck"]), ...mapState(useAuthStore, ["authCheck"]),
...mapState(useNavigationStore, ["topLevel"]), ...mapState(useNavigationStore, ["topLevel"]),
...mapState(useConfigurationStore, ["clubName"]),
routeName() { routeName() {
return typeof this.$route.name == "string" ? this.$route.name : ""; return typeof this.$route.name == "string" ? this.$route.name : "";
}, },

2
src/components/UserMenu.vue
View file

@ -25,7 +25,7 @@
<button button primary @click="close">Mein Account</button> <button button primary @click="close">Mein Account</button>
</RouterLink> </RouterLink>
</MenuItem> </MenuItem>
<MenuItem v-slot="{ close }"> <MenuItem v-if="false" v-slot="{ close }">
<RouterLink to="/docs" target="_blank"> <RouterLink to="/docs" target="_blank">
<button button primary @click="close">Dokumentation</button> <button button primary @click="close">Dokumentation</button>
</RouterLink> </RouterLink>

106
src/components/account/ChangeToPassword.vue Normal file
View file

@ -0,0 +1,106 @@
<template>
<form class="flex flex-col gap-2" @submit.prevent="change">
<div class="-space-y-px">
<div>
<input
id="new"
name="new"
type="password"
required
placeholder="neues Passwort"
autocomplete="new-password"
class="rounded-b-none!"
:class="notMatching ? 'border-red-600!' : ''"
/>
</div>
<div>
<input
id="new_rep"
name="new_rep"
type="password"
required
placeholder="neues Passwort wiederholen"
autocomplete="new-password"
class="rounded-t-none!"
:class="notMatching ? 'border-red-600!' : ''"
/>
</div>
<p v-if="notMatching">Passwörter stimmen nicht überein</p>
</div>
<div class="flex flex-row gap-2">
<button type="submit" primary :disabled="changeStatus == 'loading' || changeStatus == 'success'">
zu Passwort wechseln
</button>
<Spinner v-if="changeStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="changeStatus == 'success'" />
<FailureXMark v-else-if="changeStatus == 'failed'" />
</div>
<p v-if="changeError" class="text-center">{{ changeError }}</p>
</form>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import TextCopy from "@/components/TextCopy.vue";
import { hashString } from "../../helpers/crypto";
</script>
<script lang="ts">
export default defineComponent({
props: {
currentRoutine: {
type: String,
default: "",
},
},
emits: ["updateCurrent"],
data() {
return {
verification: "loading" as "success" | "loading" | "failed",
changeStatus: undefined as undefined | "loading" | "success" | "failed",
changeError: "" as string,
notMatching: false as boolean,
};
},
mounted() {},
methods: {
async change(e: any) {
let formData = e.target.elements;
let new_pw = await hashString(formData.new.value);
let new_rep = await hashString(formData.new_rep.value);
if (new_pw != new_rep) {
this.notMatching = true;
return;
}
this.notMatching = false;
this.changeStatus = "loading";
this.changeError = "";
this.$http
.post(`/user/changeToPW`, {
newpassword: await hashString(formData.new.value),
})
.then((result) => {
this.changeStatus = "success";
})
.catch((err) => {
this.changeStatus = "failed";
this.changeError = err.response.data;
})
.finally(() => {
setTimeout(() => {
this.changeStatus = undefined;
this.$emit("updateCurrent");
}, 2000);
});
},
},
});
</script>

92
src/components/account/ChangeToTOTP.vue Normal file
View file

@ -0,0 +1,92 @@
<template>
<div class="flex flex-col gap-2 grow">
<img :src="image" alt="totp" class="w-56 h-56 self-center" />
<TextCopy :copyText="otp" />
</div>
<form class="flex flex-col gap-2" @submit.prevent="verify">
<div class="-space-y-px">
<div>
<input id="totp" name="totp" type="text" required placeholder="TOTP" />
</div>
</div>
<div class="flex flex-row gap-2">
<button type="submit" primary :disabled="verifyStatus == 'loading' || verifyStatus == 'success'">
zu TOTP wechseln
</button>
<Spinner v-if="verifyStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="verifyStatus == 'success'" />
<FailureXMark v-else-if="verifyStatus == 'failed'" />
</div>
<p v-if="verifyError" class="text-center">{{ verifyError }}</p>
</form>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import TextCopy from "@/components/TextCopy.vue";
</script>
<script lang="ts">
export default defineComponent({
props: {
currentRoutine: {
type: String,
default: "",
},
},
emits: ["updateCurrent"],
data() {
return {
verification: "loading" as "success" | "loading" | "failed",
image: undefined as undefined | string,
otp: undefined as undefined | string,
verifyStatus: undefined as undefined | "loading" | "success" | "failed",
verifyError: "" as string,
};
},
mounted() {
this.$http
.get(`/user/changeToTOTP`)
.then((result) => {
this.verification = "success";
this.image = result.data.dataUrl;
this.otp = result.data.otp;
})
.catch((err) => {
this.verification = "failed";
});
},
methods: {
verify(e: any) {
let formData = e.target.elements;
this.verifyStatus = "loading";
this.verifyError = "";
this.$http
.post(`/user/changeToTOTP`, {
otp: this.otp,
totp: formData.totp.value,
})
.then((result) => {
this.verifyStatus = "success";
})
.catch((err) => {
this.verifyStatus = "failed";
this.verifyError = err.response.data;
})
.finally(() => {
setTimeout(() => {
this.verifyStatus = undefined;
this.$emit("updateCurrent");
}, 2000);
});
},
},
});
</script>

109
src/components/account/PasswordChange.vue Normal file
View file

@ -0,0 +1,109 @@
<template>
<form class="flex flex-col gap-2" @submit.prevent="change">
<div class="-space-y-px">
<div>
<input
id="current"
name="current"
type="password"
required
placeholder="aktuelles Passwort"
autocomplete="current-password"
class="rounded-b-none!"
/>
</div>
<div>
<input
id="new"
name="new"
type="password"
required
placeholder="neues Passwort"
autocomplete="new-password"
class="rounded-none!"
:class="notMatching ? 'border-red-600!' : ''"
/>
</div>
<div>
<input
id="new_rep"
name="new_rep"
type="password"
required
placeholder="neues Passwort wiederholen"
autocomplete="new-password"
class="rounded-t-none!"
:class="notMatching ? 'border-red-600!' : ''"
/>
</div>
<p v-if="notMatching">Passwörter stimmen nicht überein</p>
</div>
<div class="flex flex-row gap-2">
<button type="submit" primary :disabled="changeStatus == 'loading' || changeStatus == 'success'">
Passwort ändern
</button>
<Spinner v-if="changeStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="changeStatus == 'success'" />
<FailureXMark v-else-if="changeStatus == 'failed'" />
</div>
<p v-if="changeError" class="text-center">{{ changeError }}</p>
</form>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { hashString } from "../../helpers/crypto";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
verification: "loading" as "success" | "loading" | "failed",
changeStatus: undefined as undefined | "loading" | "success" | "failed",
changeError: "" as string,
notMatching: false as boolean,
};
},
mounted() {},
methods: {
async change(e: any) {
let formData = e.target.elements;
let new_pw = await hashString(formData.new.value);
let new_rep = await hashString(formData.new_rep.value);
if (new_pw != new_rep) {
this.notMatching = true;
return;
}
this.notMatching = false;
this.changeStatus = "loading";
this.changeError = "";
this.$http
.post(`/user/changepw`, {
current: await hashString(formData.current.value),
newpassword: await hashString(formData.new.value),
})
.then((result) => {
this.changeStatus = "success";
})
.catch((err) => {
this.changeStatus = "failed";
this.changeError = err.response.data;
})
.finally(() => {
setTimeout(() => {
this.changeStatus = undefined;
}, 2000);
});
},
},
});
</script>

83
src/components/account/TotpCheckAndScan.vue Normal file
View file

@ -0,0 +1,83 @@
<template>
<div class="flex flex-col gap-2 grow">
<img :src="image" alt="totp" class="w-56 h-56 self-center" />
<TextCopy :copyText="otp" />
</div>
<form class="flex flex-col gap-2" @submit.prevent="verify">
<div class="-space-y-px">
<div>
<input id="totp" name="totp" type="text" required placeholder="TOTP prüfen" />
</div>
</div>
<div class="flex flex-row gap-2">
<button type="submit" primary :disabled="verifyStatus == 'loading' || verifyStatus == 'success'">
TOTP prüfen
</button>
<Spinner v-if="verifyStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="verifyStatus == 'success'" />
<FailureXMark v-else-if="verifyStatus == 'failed'" />
</div>
<p v-if="verifyError" class="text-center">{{ verifyError }}</p>
</form>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import TextCopy from "@/components/TextCopy.vue";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
verification: "loading" as "success" | "loading" | "failed",
image: undefined as undefined | string,
otp: undefined as undefined | string,
verifyStatus: undefined as undefined | "loading" | "success" | "failed",
verifyError: "" as string,
};
},
mounted() {
this.$http
.get(`/user/totp`)
.then((result) => {
this.verification = "success";
this.image = result.data.dataUrl;
this.otp = result.data.otp;
})
.catch((err) => {
this.verification = "failed";
});
},
methods: {
verify(e: any) {
let formData = e.target.elements;
this.verifyStatus = "loading";
this.verifyError = "";
this.$http
.post(`/user/verify`, {
totp: formData.totp.value,
})
.then((result) => {
this.verifyStatus = "success";
})
.catch((err) => {
this.verifyStatus = "failed";
this.verifyError = err.response.data;
})
.finally(() => {
setTimeout(() => {
this.verifyStatus = undefined;
}, 2000);
});
},
},
});
</script>

9
src/components/admin/MemberSearchSelect.vue
View file

@ -1,10 +1,11 @@
<template> <template>
<div class="w-full"> <div class="w-full">
<Combobox v-model="selected" :disabled="disabled" multiple> <Combobox v-model="selected" :disabled="disabled" multiple>
<ComboboxLabel>{{ title }}</ComboboxLabel> <ComboboxLabel v-if="!showTitleAsPlaceholder">{{ title }}</ComboboxLabel>
<div class="relative mt-1"> <div class="relative" :class="{ 'mt-1': !showTitleAsPlaceholder }">
<ComboboxInput <ComboboxInput
class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none" class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
:placeholder="showTitleAsPlaceholder ? title : ''"
@input="query = $event.target.value" @input="query = $event.target.value"
/> />
<ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2"> <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
@ -101,6 +102,10 @@ export default defineComponent({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
showTitleAsPlaceholder: {
type: Boolean,
default: false,
},
}, },
emits: ["update:model-value", "add:difference", "remove:difference", "add:member", "add:memberByArray"], emits: ["update:model-value", "add:difference", "remove:difference", "add:member", "add:memberByArray"],
watch: { watch: {

19
src/components/admin/club/member/CreateMemberModal.vue
View file

@ -69,7 +69,15 @@
<input type="date" id="birthdate" required /> <input type="date" id="birthdate" required />
</div> </div>
<div> <div>
<label for="internalId">Interne ID (optional)</label> <div class="flex flex-row">
<label for="internalId" class="grow">
Interne ID (optional{{ lastId ? ` - zuletzte verwendet: ${lastId}` : "" }})
</label>
<div title="Es empfiehlt sich, die Interne Id mit Platzhaltern wie '0' vorne aufzufüllen.">
<InformationCircleIcon class="h-5 w-5" />
</div>
</div>
<input type="text" id="internalId" /> <input type="text" id="internalId" />
</div> </div>
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
@ -103,6 +111,7 @@ import { useMemberStore } from "@/stores/admin/club/member/member";
import type { CreateMemberViewModel } from "@/viewmodels/admin/club/member/member.models"; import type { CreateMemberViewModel } from "@/viewmodels/admin/club/member/member.models";
import { useSalutationStore } from "../../../../stores/admin/configuration/salutation"; import { useSalutationStore } from "../../../../stores/admin/configuration/salutation";
import type { SalutationViewModel } from "../../../../viewmodels/admin/configuration/salutation.models"; import type { SalutationViewModel } from "../../../../viewmodels/admin/configuration/salutation.models";
import { InformationCircleIcon } from "@heroicons/vue/24/outline";
</script> </script>
<script lang="ts"> <script lang="ts">
@ -112,6 +121,7 @@ export default defineComponent({
status: null as null | "loading" | { status: "success" | "failed"; reason?: string }, status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: undefined as any, timeout: undefined as any,
selectedSalutation: null as null | SalutationViewModel, selectedSalutation: null as null | SalutationViewModel,
lastId: "" as string,
}; };
}, },
computed: { computed: {
@ -119,6 +129,11 @@ export default defineComponent({
}, },
mounted() { mounted() {
this.fetchSalutations(); this.fetchSalutations();
this.fetchLastInternalId()
.then((res) => {
this.lastId = res.data;
})
.catch(() => {});
}, },
beforeUnmount() { beforeUnmount() {
try { try {
@ -127,7 +142,7 @@ export default defineComponent({
}, },
methods: { methods: {
...mapActions(useModalStore, ["closeModal"]), ...mapActions(useModalStore, ["closeModal"]),
...mapActions(useMemberStore, ["createMember"]), ...mapActions(useMemberStore, ["createMember", "fetchLastInternalId"]),
...mapActions(useSalutationStore, ["fetchSalutations"]), ...mapActions(useSalutationStore, ["fetchSalutations"]),
triggerCreate(e: any) { triggerCreate(e: any) {
if (!this.selectedSalutation) return; if (!this.selectedSalutation) return;

8
src/components/admin/configuration/newsletterConfig/NewsletterConfigListItem.vue
View file

@ -3,13 +3,13 @@
<div class="bg-primary p-2 text-white flex flex-row justify-between items-center"> <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
<p>Newsletter bei Type "{{ comType.type }}" versenden/exportieren als</p> <p>Newsletter bei Type "{{ comType.type }}" versenden/exportieren als</p>
<div v-if="can('create', 'configuration', 'newsletter_config')" class="flex flex-row justify-end w-16"> <div v-if="can('create', 'configuration', 'newsletter_config')" class="flex flex-row justify-end w-16">
<button v-if="status == null" type="submit" class="p-0! h-fit! w-fit!" title="speichern"> <button v-if="status == null" type="submit" class="p-0! h-fit! w-fit!" title="Änderung speichern">
<ArchiveBoxArrowDownIcon class="w-5 h-5 p-1 box-content pointer-events-none" /> <ArchiveBoxArrowDownIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
</button> </button>
<Spinner v-else-if="status == 'loading'" class="my-auto" /> <Spinner v-else-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" /> <SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" /> <FailureXMark v-else-if="status?.status == 'failed'" />
<button type="button" class="p-0! h-fit! w-fit!" title="zurücksetzen" @click="resetForm"> <button type="button" class="p-0! h-fit! w-fit!" title="Änderung zurücksetzen" @click="resetForm">
<ArchiveBoxXMarkIcon class="w-5 h-5 p-1 box-content pointer-events-none" /> <ArchiveBoxXMarkIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
</button> </button>
</div> </div>
@ -36,7 +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 { useModalStore } from "@/stores/modal"; import { useModalStore } from "@/stores/modal";
import { NewsletterConfigType } from "@/enums/newsletterConfigType"; import { NewsletterConfigEnum } from "@/enums/newsletterConfigEnum";
import type { AxiosResponse } from "axios"; import type { AxiosResponse } from "axios";
import type { CommunicationTypeViewModel } from "@/viewmodels/admin/configuration/communicationType.models"; import type { CommunicationTypeViewModel } from "@/viewmodels/admin/configuration/communicationType.models";
import { useAbilityStore } from "@/stores/ability"; import { useAbilityStore } from "@/stores/ability";
@ -62,7 +62,7 @@ export default defineComponent({
}, },
}, },
mounted() { mounted() {
this.configs = Object.values(NewsletterConfigType); this.configs = Object.values(NewsletterConfigEnum);
}, },
beforeUnmount() { beforeUnmount() {
try { try {

67
src/components/admin/management/setting/AppSetting.vue Normal file
View file

@ -0,0 +1,67 @@
<template>
<BaseSetting title="Anwendungs Einstellungen" :submit-function="submit" v-slot="{ enableEdit }">
<div class="w-full">
<label for="custom_login_message">Nachricht unter Login (optional)</label>
<input
id="custom_login_message"
type="text"
:readonly="!enableEdit"
:value="appSettings['app.custom_login_message']"
/>
</div>
<div class="w-full flex flex-row items-center gap-2">
<div
v-if="!enableEdit"
class="border-2 border-gray-500 rounded-sm"
:class="appSettings['app.show_link_to_calendar'] ? 'bg-gray-500' : 'h-3.5 w-3.5'"
>
<CheckIcon v-if="appSettings['app.show_link_to_calendar']" class="h-2.5 w-2.5 stroke-4 text-white" />
</div>
<input v-else id="show_link_to_calendar" type="checkbox" :checked="appSettings['app.show_link_to_calendar']" />
<label for="show_link_to_calendar">Kalender-Link anzeigen</label>
</div>
</BaseSetting>
</template>
<script setup lang="ts">
import { useAbilityStore } from "@/stores/ability";
import { useSettingStore } from "@/stores/admin/management/setting";
import { CheckIcon } from "@heroicons/vue/24/outline";
import { mapActions, mapState } from "pinia";
import { defineComponent } from "vue";
import BaseSetting from "./BaseSetting.vue";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
enableEdit: false as boolean,
status: undefined as undefined | "loading" | "success" | "failed",
};
},
computed: {
...mapState(useSettingStore, ["readByTopic"]),
...mapState(useAbilityStore, ["can"]),
appSettings() {
return this.readByTopic("app");
},
},
methods: {
...mapActions(useSettingStore, ["updateSettings"]),
submit(e: any) {
const formData = e.target.elements;
return this.updateSettings([
{
key: "app.custom_login_message",
value: formData.custom_login_message.value || null,
},
{
key: "app.show_link_to_calendar",
value: formData.show_link_to_calendar.checked || null,
},
]);
},
},
});
</script>

53
src/components/admin/management/setting/BackupSetting.vue Normal file
View file

@ -0,0 +1,53 @@
<template>
<BaseSetting title="Backup Einstellungen" :submit-function="submit" v-slot="{ enableEdit }">
<div class="w-full">
<label for="copies">Anzahl paralleler Backups (optional)</label>
<input id="copies" type="text" :readonly="!enableEdit" :value="backupSettings['backup.copies']" />
</div>
<div class="w-full">
<label for="interval">Intervall zur Backup-Erstellung (optional)</label>
<input id="interval" type="text" :readonly="!enableEdit" :value="backupSettings['backup.interval']" /></div
></BaseSetting>
</template>
<script setup lang="ts">
import { useAbilityStore } from "@/stores/ability";
import { useSettingStore } from "@/stores/admin/management/setting";
import { mapActions, mapState } from "pinia";
import { defineComponent } from "vue";
import BaseSetting from "./BaseSetting.vue";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
enableEdit: false as boolean,
status: undefined as undefined | "loading" | "success" | "failed",
};
},
computed: {
...mapState(useSettingStore, ["readByTopic"]),
...mapState(useAbilityStore, ["can"]),
backupSettings() {
return this.readByTopic("backup");
},
},
methods: {
...mapActions(useSettingStore, ["updateSettings"]),
submit(e: any) {
const formData = e.target.elements;
return this.updateSettings([
{
key: "backup.copies",
value: formData.copies.value || null,
},
{
key: "backup.interval",
value: formData.interval.value || null,
},
]);
},
},
});
</script>

87
src/components/admin/management/setting/BaseSetting.vue Normal file
View file

@ -0,0 +1,87 @@
<template>
<form ref="form" class="flex flex-col w-full" @submit.prevent="submit">
<div class="flex flex-row gap-2 items-center border-l-3 border-l-primary p-2 rounded-t-lg bg-red-200">
<p class="text-lg font-semibold grow">{{ title }}</p>
<Spinner v-if="status == 'loading'" />
<SuccessCheckmark v-else-if="status == 'success'" />
<FailureXMark v-else-if="status == 'failed'" />
<div v-else-if="enableEdit" class="flex flex-row gap-2">
<button type="submit" class="w-fit! h-fit! p-0!">
<CheckIcon class="h-5 w-5 cursor-pointer" />
</button>
<button
type="reset"
class="w-fit! h-fit! p-0!"
@click="
enableEdit = false;
$emit('reset');
"
>
<XMarkIcon class="h-5 w-5 cursor-pointer" />
</button>
</div>
<PencilSquareIcon
v-else-if="can('create', 'management', 'setting')"
class="h-5 w-5 cursor-pointer"
@click="enableEdit = true"
/>
</div>
<div class="border-l-3 border-l-primary p-2 rounded-b-lg">
<slot :enableEdit="enableEdit"></slot>
</div>
</form>
</template>
<script setup lang="ts">
import FailureXMark from "@/components/FailureXMark.vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import { useAbilityStore } from "@/stores/ability";
import { CheckIcon, PencilSquareIcon, XMarkIcon } from "@heroicons/vue/24/outline";
import { mapActions, mapState } from "pinia";
import { defineComponent } from "vue";
import type { PropType } from "vue";
</script>
<script lang="ts">
export default defineComponent({
props: {
title: {
type: String,
required: true,
},
submitFunction: {
type: Function as PropType<(e: any) => Promise<any>>,
required: true,
},
},
emits: ["reset"],
data() {
return {
enableEdit: false as boolean,
status: undefined as undefined | "loading" | "success" | "failed",
};
},
computed: {
...mapState(useAbilityStore, ["can"]),
},
methods: {
submit(e: any) {
this.status = "loading";
this.submitFunction(e)
.then(() => {
this.status = "success";
})
.catch(() => {
this.status = "failed";
})
.finally(() => {
setTimeout(() => {
if (this.status == "success") this.enableEdit = false;
this.status = undefined;
}, 2000);
});
},
},
});
</script>

152
src/components/admin/management/setting/ClubImageSetting.vue Normal file
View file

@ -0,0 +1,152 @@
<template>
<BaseSetting title="Vereins-Auftritt Einstellungen" :submit-function="submit" v-slot="{ enableEdit }" @reset="reset">
<div class="w-full">
<p>Vereins-Icon</p>
<div class="flex flex-row gap-2">
<AppIcon v-if="icon != '' && !overwriteIcon" class="h-10! max-w-full mx-auto" />
<div
v-else-if="!overwriteIcon"
class="flex h-10 w-full border-2 border-gray-300 rounded-md items-center justify-center text-sm"
:class="{ 'cursor-pointer': enableEdit }"
@click="enableEdit ? ($refs.icon as HTMLInputElement).click() : null"
>
Kein eigenes Icon ausgewählt
</div>
<img ref="icon_img" class="hidden w-full h-10 object-contain" />
<XMarkIcon
v-if="enableEdit && (icon != '' || overwriteIcon)"
class="h-5 w-5 cursor-pointer"
@click="resetImage('icon')"
/>
</div>
<input class="hidden!" type="file" ref="icon" accept="image/png" @change="previewImage('icon')" />
</div>
<div class="w-full">
<p>Vereins-Logo</p>
<div class="flex flex-row gap-2">
<AppLogo v-if="logo != '' && !overwriteLogo" class="h-10! max-w-full mx-auto" />
<div
v-else-if="!overwriteLogo"
class="flex h-10 w-full border-2 border-gray-300 rounded-md items-center justify-center text-sm"
:class="{ 'cursor-pointer': enableEdit }"
@click="enableEdit ? ($refs.logo as HTMLInputElement).click() : null"
>
Kein eigenes Logo ausgewählt
</div>
<img ref="logo_img" class="hidden w-full h-10 object-contain" />
<XMarkIcon
v-if="enableEdit && (logo != '' || overwriteLogo)"
class="h-5 w-5 cursor-pointer"
@click="resetImage('logo')"
/>
</div>
<input class="hidden!" type="file" ref="logo" accept="image/png" @change="previewImage('logo')" />
</div>
</BaseSetting>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import { useSettingStore } from "@/stores/admin/management/setting";
import AppIcon from "@/components/AppIcon.vue";
import AppLogo from "@/components/AppLogo.vue";
import { useAbilityStore } from "@/stores/ability";
import type { SettingString } from "@/types/settingTypes";
import BaseSetting from "./BaseSetting.vue";
import { XMarkIcon } from "@heroicons/vue/24/outline";
</script>
<script lang="ts">
export default defineComponent({
watch: {
clubSettings() {
this.reset();
},
},
data() {
return {
logo: "",
icon: "",
overwriteIcon: false as boolean,
overwriteLogo: false as boolean,
};
},
computed: {
...mapState(useSettingStore, ["readByTopic"]),
...mapState(useAbilityStore, ["can"]),
clubSettings() {
return this.readByTopic("club");
},
},
mounted() {
this.reset();
},
methods: {
...mapActions(useSettingStore, ["updateSettings", "uploadImage"]),
reset() {
this.icon = this.clubSettings["club.icon"];
this.overwriteIcon = false;
(this.$refs.icon_img as HTMLImageElement).style.display = "none";
(this.$refs.icon as HTMLInputElement).value = "";
this.logo = this.clubSettings["club.logo"];
this.overwriteLogo = false;
(this.$refs.logo_img as HTMLImageElement).style.display = "none";
(this.$refs.logo as HTMLInputElement).value = "";
},
resetImage(inputname: "icon" | "logo") {
if (inputname == "icon") {
this.icon = "";
this.overwriteIcon = false;
(this.$refs.icon_img as HTMLImageElement).style.display = "none";
(this.$refs.icon as HTMLInputElement).value = "";
} else {
this.logo = "";
this.overwriteLogo = false;
(this.$refs.logo_img as HTMLImageElement).style.display = "none";
(this.$refs.logo as HTMLInputElement).value = "";
}
},
previewImage(inputname: "icon" | "logo") {
let input = this.$refs[inputname] as HTMLInputElement;
let previewElement = this.$refs[inputname + "_img"] as HTMLImageElement;
if (input.files && input.files[0]) {
const reader = new FileReader();
reader.onload = function (e) {
previewElement.src = e.target?.result as string;
previewElement.style.display = "block";
};
reader.readAsDataURL(input.files[0]);
if (inputname == "icon") {
this.overwriteIcon = true;
} else {
this.overwriteLogo = true;
}
} else {
previewElement.src = "";
previewElement.style.display = "none";
}
},
submit(e: any) {
return this.uploadImage([
{
key: "club.icon",
value:
(this.$refs.icon as HTMLInputElement).files?.[0] ??
(this.icon != "" && !this.overwriteIcon ? "keep" : undefined),
},
{
key: "club.logo",
value:
(this.$refs.logo as HTMLInputElement).files?.[0] ??
(this.logo != "" && !this.overwriteLogo ? "keep" : undefined),
},
]);
},
},
});
</script>

89
src/components/admin/management/setting/ClubSetting.vue Normal file
View file

@ -0,0 +1,89 @@
<template>
<BaseSetting title="Vereins Einstellungen" :submit-function="submit" v-slot="{ enableEdit }">
<div class="w-full">
<label for="clubname">Vereins-Name (optional)</label>
<input id="clubname" type="text" :readonly="!enableEdit" :value="clubSettings['club.name']" />
</div>
<div class="w-full">
<label for="imprint">Vereins-Impressum Link (optional)</label>
<input id="imprint" type="url" :readonly="!enableEdit" :value="clubSettings['club.imprint']" />
</div>
<div class="w-full">
<label for="privacy">Vereins-Datenschutz Link (optional)</label>
<input id="privacy" type="url" :readonly="!enableEdit" :value="clubSettings['club.privacy']" />
</div>
<div class="w-full">
<label for="website">Vereins-Webseite Link (optional)</label>
<input id="website" type="url" :readonly="!enableEdit" :value="clubSettings['club.website']" /></div
></BaseSetting>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import { useSettingStore } from "@/stores/admin/management/setting";
import AppIcon from "@/components/AppIcon.vue";
import AppLogo from "@/components/AppLogo.vue";
import { useAbilityStore } from "@/stores/ability";
import type { SettingString } from "@/types/settingTypes";
import BaseSetting from "./BaseSetting.vue";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
overwriteIcon: false as boolean,
overwriteLogo: false as boolean,
};
},
computed: {
...mapState(useSettingStore, ["readByTopic"]),
...mapState(useAbilityStore, ["can"]),
clubSettings() {
return this.readByTopic("club");
},
},
methods: {
...mapActions(useSettingStore, ["updateSettings", "uploadImage"]),
previewImage(inputname: "icon" | "logo") {
let input = this.$refs[inputname] as HTMLInputElement;
let previewElement = this.$refs[inputname + "_img"] as HTMLImageElement;
if (input.files && input.files[0]) {
const reader = new FileReader();
reader.onload = function (e) {
previewElement.src = e.target?.result as string;
previewElement.style.display = "block";
};
reader.readAsDataURL(input.files[0]);
} else {
previewElement.src = "";
previewElement.style.display = "none";
}
},
submit(e: any) {
const formData = e.target.elements;
return this.updateSettings([
{
key: "club.name",
value: formData.clubname.value || null,
},
{
key: "club.imprint",
value: formData.imprint.value || null,
},
{
key: "club.privacy",
value: formData.privacy.value || null,
},
{
key: "club.website",
value: formData.website.value || null,
},
]);
},
},
});
</script>

100
src/components/admin/management/setting/MailSetting.vue Normal file
View file

@ -0,0 +1,100 @@
<template>
<BaseSetting title="E-Mail Einstellungen" :submit-function="submit" v-slot="{ enableEdit }">
<div class="w-full">
<label for="email">Mailadresse</label>
<input id="email" type="email" autocomplete="email" :readonly="!enableEdit" :value="mailSettings['mail.email']" />
</div>
<div class="w-full">
<label for="username">Benutzername</label>
<input
id="username"
type="text"
:readonly="!enableEdit"
autocomplete="username"
:value="mailSettings['mail.username']"
/>
</div>
<div class="w-full">
<label for="host">Server-Host</label>
<input id="host" type="text" :readonly="!enableEdit" :value="mailSettings['mail.host']" />
</div>
<div class="w-full">
<label for="port">Server-Port (25, 465, 587)</label>
<input id="port" type="number" :readonly="!enableEdit" :value="mailSettings['mail.port']" />
</div>
<div class="w-full flex flex-row items-center gap-2">
<div
v-if="!enableEdit"
class="border-2 border-gray-500 rounded-sm"
:class="mailSettings['mail.secure'] ? 'bg-gray-500' : 'h-3.5 w-3.5'"
>
<CheckIcon v-if="mailSettings['mail.secure']" class="h-2.5 w-2.5 stroke-4 text-white" />
</div>
<input v-else id="secure" type="checkbox" :checked="mailSettings['mail.secure']" />
<label for="secure">Secure-Verbindung (setzen bei Port 465)</label>
</div>
<div class="w-full">
<label for="password">Passwort (optional - leeres Feld setzt Passwort nicht zurück)</label>
<input id="password" type="password" :readonly="!enableEdit" autocomplete="new-password" />
</div>
</BaseSetting>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { CheckIcon } from "@heroicons/vue/24/outline";
import { mapActions, mapState } from "pinia";
import { useSettingStore } from "@/stores/admin/management/setting";
import { useAbilityStore } from "@/stores/ability";
import BaseSetting from "./BaseSetting.vue";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
enableEdit: false as boolean,
status: undefined as undefined | "loading" | "success" | "failed",
};
},
computed: {
...mapState(useSettingStore, ["readByTopic"]),
...mapState(useAbilityStore, ["can"]),
mailSettings() {
return this.readByTopic("mail");
},
},
methods: {
...mapActions(useSettingStore, ["updateSettings"]),
submit(e: any) {
const formData = e.target.elements;
return this.updateSettings([
{
key: "mail.email",
value: formData.email.value,
},
{
key: "mail.username",
value: formData.username.value,
},
{
key: "mail.host",
value: formData.host.value,
},
{
key: "mail.port",
value: formData.port.value,
},
{
key: "mail.secure",
value: formData.secure.checked,
},
{
key: "mail.password",
value: formData.password.value || null,
},
]);
},
},
});
</script>

76
src/components/admin/management/setting/SessionSetting.vue Normal file
View file

@ -0,0 +1,76 @@
<template>
<BaseSetting title="Login-Session Einstellungen" :submit-function="submit" v-slot="{ enableEdit }">
<div class="w-full">
<label for="jwt_expiration">JWT-Gültigkeitsdauer (optional)</label>
<input
id="jwt_expiration"
type="text"
:readonly="!enableEdit"
:value="sessionSettings['session.jwt_expiration']"
/>
</div>
<div class="w-full">
<label for="refresh_expiration">Session-Gültigkeitsdauer (optional)</label>
<input
id="refresh_expiration"
type="text"
:readonly="!enableEdit"
:value="sessionSettings['session.refresh_expiration']"
/>
</div>
<div class="w-full">
<label for="pwa_refresh_expiration">Sesion-Gültigkeitsdauer PWA (optional)</label>
<input
id="pwa_refresh_expiration"
type="text"
:readonly="!enableEdit"
:value="sessionSettings['session.pwa_refresh_expiration']"
/></div
></BaseSetting>
</template>
<script setup lang="ts">
import { useAbilityStore } from "@/stores/ability";
import { useSettingStore } from "@/stores/admin/management/setting";
import { mapActions, mapState } from "pinia";
import { defineComponent } from "vue";
import BaseSetting from "./BaseSetting.vue";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
enableEdit: false as boolean,
status: undefined as undefined | "loading" | "success" | "failed",
};
},
computed: {
...mapState(useSettingStore, ["readByTopic"]),
...mapState(useAbilityStore, ["can"]),
sessionSettings() {
return this.readByTopic("session");
},
},
methods: {
...mapActions(useSettingStore, ["updateSettings"]),
submit(e: any) {
const formData = e.target.elements;
return this.updateSettings([
{
key: "session.jwt_expiration",
value: formData.jwt_expiration.value || null,
},
{
key: "session.refresh_expiration",
value: formData.refresh_expiration.value || null,
},
{
key: "session.pwa_refresh_expiration",
value: formData.pwa_refresh_expiration.value || null,
},
]);
},
},
});
</script>

21
src/components/queryBuilder/JoinTable.vue
View file

@ -12,7 +12,7 @@
<ArrowsUpDownIcon class="text-gray-500 h-6 w-6 cursor-pointer" /> <ArrowsUpDownIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
</div> </div>
<select v-if="value.type == 'defined'" v-model="context" class="w-full"> <select v-if="type == 'defined'" v-model="context" class="w-full">
<option value="" disabled>Relation auswählen</option> <option value="" disabled>Relation auswählen</option>
<option <option
v-for="relation in activeTable?.relations" v-for="relation in activeTable?.relations"
@ -121,6 +121,17 @@ export default defineComponent({
} }
}, },
}, },
type: {
get(): string {
return this.modelValue.type ?? "defined";
},
set(val: "custom" | "defined") {
this.$emit("update:model-value", {
...this.modelValue,
type: val,
});
},
},
joinTable: { joinTable: {
get(): string { get(): string {
return this.modelValue.table; return this.modelValue.table;
@ -137,13 +148,17 @@ export default defineComponent({
if (!this.value.id) { if (!this.value.id) {
this.value.id = uuid(); this.value.id = uuid();
} }
if (!this.value.type) {
console.log("setting type");
this.type = "defined";
}
}, },
methods: { methods: {
swapJoinType(type: string) { swapJoinType(type: string) {
if (type == "defined") { if (type == "defined") {
this.value.type = "custom"; this.type = "custom";
} else { } else {
this.value.type = "defined"; this.type = "defined";
} }
}, },
}, },

70
src/components/setup/Account.vue Normal file
View file

@ -0,0 +1,70 @@
<template>
<form class="flex flex-col gap-2" @submit.prevent="setup">
<p class="text-center">Admin Account</p>
<div class="-space-y-px">
<div>
<input id="username" name="username" type="text" required placeholder="Benutzer" class="rounded-b-none!" />
</div>
<div>
<input id="mail" name="mail" type="email" required placeholder="Mailadresse" class="rounded-none!" />
</div>
<div>
<input id="firstname" name="firstname" type="text" required placeholder="Vorname" class="rounded-none!" />
</div>
<div>
<input id="lastname" name="lastname" type="text" required placeholder="Nachname" class="rounded-t-none!" />
</div>
</div>
<div class="flex flex-row gap-2">
<button type="submit" primary :disabled="setupStatus == 'loading' || setupStatus == 'success'">
Admin-Account anlegen
</button>
<Spinner v-if="setupStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="setupStatus == 'success'" />
<FailureXMark v-else-if="setupStatus == 'failed'" />
</div>
<p v-if="setupMessage" class="text-center">{{ setupMessage }}</p>
</form>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { mapActions } from "pinia";
import { useSetupStore } from "../../stores/setup";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
setupStatus: undefined as undefined | "loading" | "success" | "failed",
setupMessage: "" as string,
};
},
methods: {
...mapActions(useSetupStore, ["createAdmin"]),
setup(e: any) {
let formData = e.target.elements;
this.setupStatus = "loading";
this.setupMessage = "";
this.createAdmin({
username: formData.username.value,
mail: formData.mail.value,
firstname: formData.firstname.value,
lastname: formData.lastname.value,
})
.then((result) => {
// this.setupStatus = "success";
})
.catch((err) => {
this.setupStatus = "failed";
this.setupMessage = err.response.data;
});
},
},
});
</script>

66
src/components/setup/App.vue Normal file
View file

@ -0,0 +1,66 @@
<template>
<form class="flex flex-col gap-2" @submit.prevent="setup">
<p class="text-center">App Konfiguration</p>
<div class="-space-y-px">
<div>
<input id="login_message" name="login_message" type="text" placeholder="Nachricht unter Login (optional)" />
</div>
<div class="flex flex-row items-center gap-2 pt-1">
<input type="checkbox" id="show_cal_link" checked />
<label for="show_cal_link">Link zum Kalender anzeigen (optional)</label>
</div>
</div>
<p class="text-primary cursor-pointer ml-auto" @click="skip('app')">überspringen</p>
<div class="flex flex-row gap-2">
<button type="submit" primary :disabled="setupStatus == 'loading' || setupStatus == 'success'">
Anwendungsdaten speichern
</button>
<Spinner v-if="setupStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="setupStatus == 'success'" />
<FailureXMark v-else-if="setupStatus == 'failed'" />
</div>
<p v-if="setupMessage" class="text-center">{{ setupMessage }}</p>
</form>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { mapActions } from "pinia";
import { useSetupStore } from "../../stores/setup";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
setupStatus: undefined as undefined | "loading" | "success" | "failed",
setupMessage: "" as string,
};
},
methods: {
...mapActions(useSetupStore, ["setApp", "skip"]),
setup(e: any) {
let formData = e.target.elements;
this.setupStatus = "loading";
this.setupMessage = "";
this.setApp({
login_message: formData.login_message.value,
show_cal_link: formData.show_cal_link.checked,
})
.then((result) => {
// this.setupStatus = "success";
})
.catch((err) => {
this.setupStatus = "failed";
this.setupMessage = err.response.data;
});
},
},
});
</script>

99
src/components/setup/Club.vue Normal file
View file

@ -0,0 +1,99 @@
<template>
<form class="flex flex-col gap-2" @submit.prevent="setup">
<p class="text-center">Feuerwehr-/Vereinsdaten</p>
<div class="-space-y-px">
<div>
<input
id="name"
name="name"
type="text"
placeholder="Feuerwehr-/Vereinsname (optional)"
class="rounded-b-none!"
/>
</div>
<div>
<input
id="imprint"
name="imprint"
type="url"
placeholder="Link zum Impressum (optional)"
class="rounded-none!"
/>
</div>
<div>
<input
id="privacy"
name="privacy"
type="url"
placeholder="Link zur Datenschutzerklärung (optional)"
class="rounded-none!"
/>
</div>
<div>
<input
id="website"
name="website"
type="url"
placeholder="Link zur Webseite (optional)"
class="rounded-t-none!"
/>
</div>
</div>
<p class="text-primary cursor-pointer ml-auto" @click="skip('club')">überspringen</p>
<div class="flex flex-row gap-2">
<button type="submit" primary :disabled="setupStatus == 'loading' || setupStatus == 'success'">
Vereinsdaten speichern
</button>
<Spinner v-if="setupStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="setupStatus == 'success'" />
<FailureXMark v-else-if="setupStatus == 'failed'" />
</div>
<p v-if="setupMessage" class="text-center">{{ setupMessage }}</p>
</form>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { mapActions } from "pinia";
import { useSetupStore } from "../../stores/setup";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
setupStatus: undefined as undefined | "loading" | "success" | "failed",
setupMessage: "" as string,
};
},
methods: {
...mapActions(useSetupStore, ["setClub", "skip"]),
setup(e: any) {
let formData = e.target.elements;
this.setupStatus = "loading";
this.setupMessage = "";
this.setClub({
name: formData.name.value,
imprint: formData.imprint.value,
privacy: formData.privacy.value,
website: formData.website.value,
})
.then((result) => {
// this.setupStatus = "success";
})
.catch((err) => {
this.setupStatus = "failed";
this.setupMessage = err.response.data;
});
},
},
});
</script>

3
src/components/setup/Finished.vue Normal file
View file

@ -0,0 +1,3 @@
<template>
<p class="text-center">Sie haben einen Verifizierungslink per Mail erhalten.</p>
</template>

87
src/components/setup/Images.vue Normal file
View file

@ -0,0 +1,87 @@
<template>
<form class="flex flex-col gap-2" @submit.prevent="setup">
<p class="text-center">Feuerwehr-/Vereins-Auftritt</p>
<div class="flex flex-col gap-2">
<div class="flex flex-col gap-2">
<p>quadratisches Icon für App (optional)</p>
<img ref="icon_img" class="hidden w-full h-20 object-contain" />
<input class="hidden!" type="file" ref="icon" accept="image/*" @change="previewImage('icon')" />
<button type="button" primary-outline @click="($refs.icon as HTMLInputElement).click()">Icon auswählen</button>
</div>
<div class="flex flex-col gap-2">
<p>Logo (optional)</p>
<img ref="logo_img" class="hidden w-full h-20 object-contain" />
<input class="hidden!" type="file" ref="logo" accept="image/*" @change="previewImage('logo')" />
<button type="button" primary-outline @click="($refs.logo as HTMLInputElement).click()">Logo auswählen</button>
</div>
</div>
<br />
<p class="text-primary cursor-pointer ml-auto" @click="skip('appImages')">überspringen</p>
<div class="flex flex-row gap-2">
<button type="submit" primary :disabled="setupStatus == 'loading' || setupStatus == 'success'">
Bilder speichern
</button>
<Spinner v-if="setupStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="setupStatus == 'success'" />
<FailureXMark v-else-if="setupStatus == 'failed'" />
</div>
<p v-if="setupMessage" class="text-center">{{ setupMessage }}</p>
</form>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { mapActions } from "pinia";
import { useSetupStore } from "../../stores/setup";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
setupStatus: undefined as undefined | "loading" | "success" | "failed",
setupMessage: "" as string,
};
},
methods: {
...mapActions(useSetupStore, ["setClubImages", "skip"]),
previewImage(inputname: "icon" | "logo") {
let input = this.$refs[inputname] as HTMLInputElement;
let previewElement = this.$refs[inputname + "_img"] as HTMLImageElement;
if (input.files && input.files[0]) {
const reader = new FileReader();
reader.onload = function (e) {
previewElement.src = e.target?.result as string;
previewElement.style.display = "block";
};
reader.readAsDataURL(input.files[0]);
} else {
previewElement.src = "";
previewElement.style.display = "none";
}
},
setup(e: any) {
this.setupStatus = "loading";
this.setupMessage = "";
this.setClubImages({
icon: (this.$refs.icon as HTMLInputElement).files?.[0],
logo: (this.$refs.logo as HTMLInputElement).files?.[0],
})
.then((result) => {
// this.setupStatus = "success";
})
.catch((err) => {
this.setupStatus = "failed";
this.setupMessage = err.response.data;
});
},
},
});
</script>

95
src/components/setup/Mail.vue Normal file
View file

@ -0,0 +1,95 @@
<template>
<form class="flex flex-col gap-2" @submit.prevent="setup">
<p class="text-center">Mailversand</p>
<div class="-space-y-px">
<div class="mb-2">
<input id="mail" name="mail" type="email" placeholder="Mailadresse" required autocomplete="email" />
</div>
<div>
<input
id="user"
name="user"
type="text"
placeholder="Benutzername (kann auch Mail sein)"
required
autocomplete="username"
class="rounded-b-none!"
/>
</div>
<div>
<input
id="password"
name="password"
type="password"
placeholder="Passwort"
required
autocomplete="new-password"
class="rounded-none!"
/>
</div>
<div>
<input id="host" name="host" type="text" placeholder="Server-Host" required class="rounded-none!" />
</div>
<div>
<input id="port" name="port" type="number" placeholder="Port (25, 465, 587)" required class="rounded-t-none!" />
</div>
<div class="flex flex-row items-center gap-2 pt-1">
<input type="checkbox" id="secure" />
<label for="secure">SSL-Verbindung (setzen bei Port 465)</label>
</div>
</div>
<div class="flex flex-row gap-2">
<button type="submit" primary :disabled="setupStatus == 'loading' || setupStatus == 'success'">
Mailversand speichern
</button>
<Spinner v-if="setupStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="setupStatus == 'success'" />
<FailureXMark v-else-if="setupStatus == 'failed'" />
</div>
<p v-if="setupMessage" class="text-center">{{ setupMessage }}</p>
</form>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { mapActions } from "pinia";
import { useSetupStore } from "../../stores/setup";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
setupStatus: undefined as undefined | "loading" | "success" | "failed",
setupMessage: "" as string,
};
},
methods: {
...mapActions(useSetupStore, ["setMailConfig", "skip"]),
setup(e: any) {
let formData = e.target.elements;
this.setupStatus = "loading";
this.setupMessage = "";
this.setMailConfig({
host: formData.host.value,
port: formData.port.value,
secure: formData.secure.checked,
mail: formData.mail.value,
username: formData.user.value,
password: formData.password.value,
})
.then((result) => {
// this.setupStatus = "success";
})
.catch((err) => {
this.setupStatus = "failed";
this.setupMessage = err.response.data;
});
},
},
});
</script>

8
src/config.ts
View file

@ -1,15 +1,7 @@
export interface Config { export interface Config {
server_address: string; server_address: string;
app_name_overwrite: string;
imprint_link: string;
privacy_link: string;
custom_login_message: string;
} }
export const config: Config = { export const config: Config = {
server_address: import.meta.env.VITE_SERVER_ADDRESS, server_address: import.meta.env.VITE_SERVER_ADDRESS,
app_name_overwrite: import.meta.env.VITE_APP_NAME_OVERWRITE,
imprint_link: import.meta.env.VITE_IMPRINT_LINK,
privacy_link: import.meta.env.VITE_PRIVACY_LINK,
custom_login_message: import.meta.env.VITE_CUSTOM_LOGIN_MESSAGE,
}; };

5
src/enums/newsletterConfigEnum.ts Normal file
View file

@ -0,0 +1,5 @@
export enum NewsletterConfigEnum {
pdf = "pdf",
mail = "mail",
none = "none",
}

4
src/enums/newsletterConfigType.ts
View file

@ -1,4 +0,0 @@
export enum NewsletterConfigType {
pdf = "pdf",
mail = "mail",
}

7
src/helpers/crypto.ts Normal file
View file

@ -0,0 +1,7 @@
export async function hashString(message = ""): Promise<string> {
const msgUint8 = new TextEncoder().encode(message);
const hashBuffer = await window.crypto.subtle.digest("SHA-256", msgUint8);
const hashArray = Array.from(new Uint8Array(hashBuffer));
const hashHex = hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
return hashHex;
}

6
src/main.css
View file

@ -18,7 +18,7 @@
--error: #9a0d55; --error: #9a0d55;
--warning: #bb6210; --warning: #bb6210;
--info: #388994; --info: #388994;
--success: #73ad0f; --success: #7ac142;
} }
.dark { .dark {
--primary: #ff0d00; --primary: #ff0d00;
@ -27,10 +27,12 @@
--error: #9a0d55; --error: #9a0d55;
--warning: #bb6210; --warning: #bb6210;
--info: #4ccbda; --info: #4ccbda;
--success: #73ad0f; --success: #7ac142;
} }
} }
@custom-variant hover (&:hover);
/* ===== Scrollbar CSS ===== */ /* ===== Scrollbar CSS ===== */
/* Firefox */ /* Firefox */
* { * {

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/authGuard.ts
View file

@ -55,6 +55,7 @@ export async function isAuthenticatedPromise(forceRefresh: boolean = false): Pro
// check jwt expiry // check jwt expiry
const exp = decoded.exp ?? 0; const exp = decoded.exp ?? 0;
const correctedLocalTime = new Date().getTime(); const correctedLocalTime = new Date().getTime();
let failedRefresh = false;
if (exp < Math.floor(correctedLocalTime / 1000) || forceRefresh) { if (exp < Math.floor(correctedLocalTime / 1000) || forceRefresh) {
await refreshToken() await refreshToken()
.then(() => { .then(() => {
@ -63,13 +64,16 @@ export async function isAuthenticatedPromise(forceRefresh: boolean = false): Pro
.catch((err: string) => { .catch((err: string) => {
console.log("expired"); console.log("expired");
auth.setFailed(); auth.setFailed();
failedRefresh = true;
reject(err); reject(err);
}); });
} }
if (failedRefresh) return;
var { userId, firstname, lastname, mail, username, permissions, isOwner } = decoded; var { userId, firstname, lastname, mail, username, permissions, isOwner } = decoded;
if (Object.keys(permissions ?? {}).length === 0 && !isOwner) { if (Object.keys(permissions ?? {}).filter((p) => p != "adminByOwner").length === 0 && !isOwner) {
auth.setFailed(); auth.setFailed();
reject("nopermissions"); reject("nopermissions");
} }

13
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({
@ -642,6 +640,13 @@ const router = createRouter({
}, },
], ],
}, },
{
path: "settings",
name: "admin-management-setting",
component: () => import("@/views/admin/management/setting/Setting.vue"),
meta: { type: "read", section: "management", module: "setting" },
beforeEnter: [abilityAndNavUpdate],
},
{ {
path: "backup", path: "backup",
name: "admin-management-backup-route", name: "admin-management-backup-route",
@ -777,10 +782,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 };

3
src/stores/admin/club/member/member.ts
View file

@ -87,6 +87,9 @@ export const useMemberStore = defineStore("member", {
}) })
.catch((err) => {}); .catch((err) => {});
}, },
fetchLastInternalId() {
return http.get(`/admin/member/last/internalId`);
},
async printMemberByActiveId() { async printMemberByActiveId() {
return http.get(`/admin/member/${this.activeMember}/print`, { return http.get(`/admin/member/${this.activeMember}/print`, {
responseType: "blob", responseType: "blob",

11
src/stores/admin/club/queryBuilder.ts
View file

@ -2,6 +2,7 @@ import { defineStore } from "pinia";
import { http } from "@/serverCom"; import { http } from "@/serverCom";
import type { TableMeta } from "@/viewmodels/admin/configuration/query.models"; import type { TableMeta } from "@/viewmodels/admin/configuration/query.models";
import type { DynamicQueryStructure, FieldType } from "@/types/dynamicQueries"; import type { DynamicQueryStructure, FieldType } from "@/types/dynamicQueries";
import type { AxiosResponse } from "axios";
export const useQueryBuilderStore = defineStore("queryBuilder", { export const useQueryBuilderStore = defineStore("queryBuilder", {
state: () => { state: () => {
@ -58,6 +59,16 @@ export const useQueryBuilderStore = defineStore("queryBuilder", {
this.loadingData = "failed"; this.loadingData = "failed";
}); });
}, },
async sendQueryByStoreId(
id: string,
offset = 0,
count = 25,
noLimit: boolean = false
): Promise<AxiosResponse<any, any>> {
return await http.post(
`/admin/querybuilder/query/${id}?` + (noLimit ? `noLimit=true` : `offset=${offset}&count=${count}`)
);
},
clearResults() { clearResults() {
this.data = []; this.data = [];
this.totalLength = 0; this.totalLength = 0;

2
src/stores/admin/configuration/newsletterConfig.ts
View file

@ -6,7 +6,7 @@ import type {
import { http } from "@/serverCom"; import { http } from "@/serverCom";
import type { AxiosResponse } from "axios"; import type { AxiosResponse } from "axios";
export const useNewsletterConfigStore = defineStore("newsletterConfi", { export const useNewsletterConfigStore = defineStore("newsletterConfig", {
state: () => { state: () => {
return { return {
config: [] as Array<NewsletterConfigViewModel>, config: [] as Array<NewsletterConfigViewModel>,

103
src/stores/admin/management/setting.ts Normal file
View file

@ -0,0 +1,103 @@
import { defineStore } from "pinia";
import { http } from "@/serverCom";
import type { SettingString, SettingTopic, SettingValueMapping } from "@/types/settingTypes";
import type { AxiosResponse } from "axios";
export const useSettingStore = defineStore("setting", {
state: () => {
return {
settings: {} as { [key in SettingString]: SettingValueMapping[key] },
loading: "loading" as "loading" | "fetched" | "failed",
};
},
getters: {
readSetting:
(state) =>
<K extends SettingString>(key: K): SettingValueMapping[K] => {
return state.settings[key];
},
readByTopic:
(state) =>
<T extends SettingTopic>(
topic: T
): { [K in SettingString as K extends `${T}.${string}` ? K : never]: SettingValueMapping[K] } => {
return Object.entries(state.settings).reduce((acc, [key, value]) => {
const typedKey = key as SettingString;
if (key.startsWith(topic)) {
acc[typedKey] = value;
}
return acc;
}, {} as any);
},
},
actions: {
fetchSettings() {
this.loading = "loading";
http
.get("/admin/setting")
.then((result) => {
this.settings = result.data;
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
async getSetting(key: SettingString): Promise<AxiosResponse<any, any>> {
return await http.get(`/admin/setting/${key}`).then((res) => {
//@ts-expect-error
this.settings[key] = res.data;
return res;
});
},
async updateSetting<K extends SettingString>(
key: K,
value: SettingValueMapping[K]
): Promise<AxiosResponse<any, any>> {
return await http
.put("/admin/setting", {
setting: key,
value: value,
})
.then((res) => {
this.settings[key] = value;
return res;
});
},
async updateSettings<K extends SettingString>(
data: { key: K; value: SettingValueMapping[K] }[]
): Promise<AxiosResponse<any, any>> {
return await http.put("/admin/setting/multi", data).then((res) => {
for (const element of data) {
this.settings[element.key] = element.value;
}
return res;
});
},
async uploadImage(
data: { key: "club.logo" | "club.icon"; value?: File | "keep" }[]
): Promise<AxiosResponse<any, any>> {
const formData = new FormData();
for (let entry of data) {
if (entry.value) {
formData.append(typeof entry.value == "string" ? entry.key : entry.key.split(".")[1], entry.value);
}
}
return await http
.put("/admin/setting/images", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then((res) => {
for (const element of data) {
this.settings[element.key] = element.value ? "configured" : "";
}
return res;
});
},
async resetSetting(key: SettingString): Promise<AxiosResponse<any, any>> {
return await http.delete(`/admin/setting/${key}`);
},
},
});

1
src/stores/admin/navigation.ts
View file

@ -137,6 +137,7 @@ export const useNavigationStore = defineStore("navigation", {
...(abilityStore.can("read", "management", "user") ? [{ key: "user", title: "Benutzer" }] : []), ...(abilityStore.can("read", "management", "user") ? [{ key: "user", title: "Benutzer" }] : []),
...(abilityStore.can("read", "management", "role") ? [{ key: "role", title: "Rollen" }] : []), ...(abilityStore.can("read", "management", "role") ? [{ key: "role", title: "Rollen" }] : []),
...(abilityStore.can("read", "management", "webapi") ? [{ key: "webapi", title: "Webapi-Token" }] : []), ...(abilityStore.can("read", "management", "webapi") ? [{ key: "webapi", title: "Webapi-Token" }] : []),
...(abilityStore.can("read", "management", "setting") ? [{ key: "setting", title: "Einstellungen" }] : []),
...(abilityStore.can("read", "management", "backup") ? [{ key: "backup", title: "Backups" }] : []), ...(abilityStore.can("read", "management", "backup") ? [{ key: "backup", title: "Backups" }] : []),
...(abilityStore.isAdmin() ? [{ key: "version", title: "Version" }] : []), ...(abilityStore.isAdmin() ? [{ key: "version", title: "Version" }] : []),
], ],

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

@ -0,0 +1,34 @@
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: false as boolean,
serverOffline: false as boolean,
};
},
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(() => {
this.serverOffline = true;
});
},
},
});

130
src/stores/setup.ts Normal file
View file

@ -0,0 +1,130 @@
import { defineStore } from "pinia";
import { http } from "../serverCom";
import type { AxiosResponse } from "axios";
import { useConfigurationStore } from "./configuration";
export const useSetupStore = defineStore("setup", {
state: () => {
return {
dictionary: ["club", "clubImages", "app", "mail", "account", "finished"],
step: 0 as number,
successfull: 0 as number,
};
},
getters: {
stepIndex: (state) => (dict: string) => state.dictionary.findIndex((d) => d == dict),
},
actions: {
skip(dict: string) {
let myIndex = this.stepIndex(dict);
this.step += 1;
if (this.successfull <= myIndex) {
this.successfull = myIndex + 1;
}
},
async setClub(data: {
name?: string;
imprint?: string;
privacy?: string;
website?: string;
}): Promise<AxiosResponse<any, any>> {
let configStore = useConfigurationStore();
let myIndex = this.stepIndex("club");
const res = await http.post(`/setup/club`, {
name: data.name,
imprint: data.imprint,
privacy: data.privacy,
website: data.website,
});
configStore.configure();
this.step += 1;
if (this.successfull <= myIndex) {
this.successfull = myIndex;
}
return res;
},
async setClubImages(data: { icon?: File; logo?: File }): Promise<AxiosResponse<any, any>> {
let configStore = useConfigurationStore();
let myIndex = this.stepIndex("clubImages");
const formData = new FormData();
if (data.icon) {
formData.append("icon", data.icon);
}
if (data.logo) {
formData.append("logo", data.logo);
}
const res = await http.post(`/setup/club/images`, formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
configStore.configure();
this.step += 1;
if (this.successfull <= myIndex) {
this.successfull = myIndex;
}
return res;
},
async setApp(data: { login_message: string; show_cal_link: boolean }): Promise<AxiosResponse<any, any>> {
let myIndex = this.stepIndex("app");
const res = await http.post(`/setup/app`, {
custom_login_message: data.login_message,
show_link_to_calendar: data.show_cal_link,
});
this.step += 1;
if (this.successfull <= myIndex) {
this.successfull = myIndex;
}
return res;
},
async setMailConfig(data: {
host: string;
port: number;
secure: boolean;
mail: string;
username: string;
password: string;
}): Promise<AxiosResponse<any, any>> {
let myIndex = this.stepIndex("mail");
const res = await http.post(`/setup/mail`, {
host: data.host,
port: data.port,
secure: data.secure,
mail: data.mail,
username: data.username,
password: data.password,
});
this.step += 1;
if (this.successfull <= myIndex) {
this.successfull = myIndex;
}
return res;
},
async createAdmin(credentials: {
username: string;
mail: string;
firstname: string;
lastname: string;
}): Promise<AxiosResponse<any, any>> {
let myIndex = this.stepIndex("account");
const res = await http.post(`/setup/me`, {
username: credentials.username,
mail: credentials.mail,
firstname: credentials.firstname,
lastname: credentials.lastname,
});
this.step += 1;
if (this.successfull < myIndex) {
this.successfull = myIndex;
}
return res;
},
},
});

6
src/types/permissionTypes.ts
View file

@ -21,7 +21,8 @@ export type PermissionModule =
| "query_store" | "query_store"
| "template" | "template"
| "template_usage" | "template_usage"
| "backup"; | "backup"
| "setting";
export type PermissionType = "read" | "create" | "update" | "delete"; export type PermissionType = "read" | "create" | "update" | "delete";
@ -67,6 +68,7 @@ export const permissionModules: Array<PermissionModule> = [
"template", "template",
"template_usage", "template_usage",
"backup", "backup",
"setting",
]; ];
export const permissionTypes: Array<PermissionType> = ["read", "create", "update", "delete"]; export const permissionTypes: Array<PermissionType> = ["read", "create", "update", "delete"];
export const sectionsAndModules: SectionsAndModulesObject = { export const sectionsAndModules: SectionsAndModulesObject = {
@ -84,5 +86,5 @@ export const sectionsAndModules: SectionsAndModulesObject = {
"template_usage", "template_usage",
"newsletter_config", "newsletter_config",
], ],
management: ["user", "role", "webapi", "backup"], management: ["user", "role", "webapi", "backup", "setting"],
}; };

80
src/types/settingTypes.ts Normal file
View file

@ -0,0 +1,80 @@
export type SettingTopic = "club" | "app" | "session" | "mail" | "backup" | "security";
export type SettingString =
| "club.icon"
| "club.logo"
| "club.name"
| "club.imprint"
| "club.privacy"
| "club.website"
| "app.custom_login_message"
| "app.show_link_to_calendar"
| "session.jwt_expiration"
| "session.refresh_expiration"
| "session.pwa_refresh_expiration"
| "mail.email"
| "mail.username"
| "mail.password"
| "mail.host"
| "mail.port"
| "mail.secure"
| "backup.interval"
| "backup.copies";
export type SettingTypeAtom = "longstring" | "string" | "ms" | "number" | "boolean" | "url" | "email";
export type SettingType = SettingTypeAtom | `${SettingTypeAtom}/crypt` | `${SettingTypeAtom}/rand`;
export type SettingValueMapping = {
"club.icon": string;
"club.logo": string;
"club.name": string;
"club.imprint": string;
"club.privacy": string;
"club.website": string;
"app.custom_login_message": string;
"app.show_link_to_calendar": boolean;
"session.jwt_expiration": string;
"session.refresh_expiration": string;
"session.pwa_refresh_expiration": string;
"mail.email": string;
"mail.username": string;
"mail.password": string;
"mail.host": string;
"mail.port": number;
"mail.secure": boolean;
"backup.interval": number;
"backup.copies": number;
};
// Typsicherer Zugriff auf Settings
export type SettingDefinition<T extends SettingType | SettingTypeAtom[]> = {
type: T;
default?: string | number | boolean;
optional?: boolean;
min?: T extends "number" | `number/crypt` | `number/rand` ? number : never;
};
export type SettingsSchema = {
[key in SettingString]: SettingDefinition<SettingType | SettingTypeAtom[]>;
};
export const settingsType: SettingsSchema = {
"club.icon": { type: "string", optional: true },
"club.logo": { type: "string", optional: true },
"club.name": { type: "string", default: "FF Admin" },
"club.imprint": { type: "url", optional: true },
"club.privacy": { type: "url", optional: true },
"club.website": { type: "url", optional: true },
"app.custom_login_message": { type: "string", optional: true },
"app.show_link_to_calendar": { type: "boolean", default: true },
"session.jwt_expiration": { type: "ms", default: "15m" },
"session.refresh_expiration": { type: "ms", default: "1d" },
"session.pwa_refresh_expiration": { type: "ms", default: "5d" },
"mail.email": { type: "email", optional: false },
"mail.username": { type: "string", optional: false },
"mail.password": { type: "string/crypt", optional: false },
"mail.host": { type: "url", optional: false },
"mail.port": { type: "number", default: 587 },
"mail.secure": { type: "boolean", default: false },
"backup.interval": { type: "number", default: 1, min: 1 },
"backup.copies": { type: "number", default: 7, min: 1 },
};

3
src/viewmodels/admin/club/newsletter/newsletter.models.ts
View file

@ -1,5 +1,3 @@
import type { QueryViewModel } from "../../configuration/query.models";
export interface NewsletterViewModel { export interface NewsletterViewModel {
id: number; id: number;
title: string; title: string;
@ -9,7 +7,6 @@ export interface NewsletterViewModel {
newsletterSignatur: string; newsletterSignatur: string;
isSent: boolean; isSent: boolean;
recipientsByQueryId?: string | null; recipientsByQueryId?: string | null;
recipientsByQuery?: QueryViewModel | null;
} }
export interface CreateNewsletterViewModel { export interface CreateNewsletterViewModel {

6
src/viewmodels/admin/configuration/newsletterConfig.models.ts
View file

@ -1,13 +1,13 @@
import type { NewsletterConfigType } from "@/enums/newsletterConfigType"; import type { NewsletterConfigEnum } from "@/enums/newsletterConfigEnum";
import type { CommunicationTypeViewModel } from "./communicationType.models"; import type { CommunicationTypeViewModel } from "./communicationType.models";
export interface NewsletterConfigViewModel { export interface NewsletterConfigViewModel {
comTypeId: number; comTypeId: number;
config: NewsletterConfigType; config: NewsletterConfigEnum;
comType: CommunicationTypeViewModel; comType: CommunicationTypeViewModel;
} }
export interface SetNewsletterConfigViewModel { export interface SetNewsletterConfigViewModel {
comTypeId: number; comTypeId: number;
config: NewsletterConfigType; config: NewsletterConfigEnum;
} }

124
src/views/Login.vue
View file

@ -2,19 +2,34 @@
<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" }} {{ clubName }}
</h2> </h2>
</div> </div>
<form class="flex flex-col gap-2" @submit.prevent="login"> <form class="flex flex-col gap-2" @submit.prevent="submit">
<div class="-space-y-px"> <div class="-space-y-px">
<div> <div class="relative">
<input id="username" name="username" type="text" required placeholder="Benutzer" class="rounded-b-none!" />
</div>
<div>
<input <input
id="username"
name="username"
type="text"
required
placeholder="Benutzer"
:class="routine == '' ? '' : 'rounded-b-none!'"
:value="username"
:disabled="username != ''"
/>
<div v-if="usernameStatus" class="h-full flex items-center justify-center w-5 absolute top-0 right-2">
<Spinner v-if="usernameStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="usernameStatus == 'success'" />
<FailureXMark v-else-if="usernameStatus == 'failed'" />
</div>
</div>
<div v-if="routine != ''">
<input
v-if="routine == 'totp'"
id="totp" id="totp"
name="totp" name="totp"
type="text" type="text"
@ -23,13 +38,26 @@
class="rounded-t-none!" class="rounded-t-none!"
autocomplete="off" autocomplete="off"
/> />
<input
v-else
id="password"
name="password"
type="password"
required
placeholder="Passwort"
class="rounded-t-none!"
autocomplete="current-password"
/>
</div> </div>
</div> </div>
<RouterLink :to="{ name: 'reset-start' }" class="w-fit self-end text-primary">TOTP verloren</RouterLink> <p v-if="username != ''" class="w-fit self-end text-primary cursor-pointer" @click="resetRoutine">
Benutzer wechseln
</p>
<RouterLink :to="{ name: 'reset-start' }" class="w-fit self-end text-primary">Zugang verloren</RouterLink>
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
<button type="submit" primary :disabled="loginStatus == 'loading' || loginStatus == 'success'"> <button type="submit" primary :disabled="loginStatus == 'loading' || loginStatus == 'success'">
anmelden {{ routine == "" ? "Benutzer prüfen" : "anmelden" }}
</button> </button>
<Spinner v-if="loginStatus == 'loading'" class="my-auto" /> <Spinner v-if="loginStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="loginStatus == 'success'" /> <SuccessCheckmark v-else-if="loginStatus == 'success'" />
@ -50,7 +78,10 @@ import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue"; 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 AppLogo from "@/components/AppLogo.vue";
import { mapState } from "pinia";
import { useConfigurationStore } from "@/stores/configuration";
import { hashString } from "../helpers/crypto";
</script> </script>
<script lang="ts"> <script lang="ts">
@ -58,21 +89,90 @@ export default defineComponent({
data() { data() {
return { return {
loginStatus: undefined as undefined | "loading" | "success" | "failed", loginStatus: undefined as undefined | "loading" | "success" | "failed",
usernameStatus: undefined as undefined | "loading" | "success" | "failed",
loginError: "" as string, loginError: "" as string,
username: "" as string,
routine: "" as string,
}; };
}, },
computed: {
...mapState(useConfigurationStore, ["clubName"]),
},
mounted() { mounted() {
resetAllPiniaStores(); resetAllPiniaStores();
this.username = localStorage.getItem("username") ?? "";
this.routine = localStorage.getItem("routine") ?? "";
if (this.username != "") {
this.$http
.post(`/auth/kickof`, {
username: this.username,
})
.then((result) => {
this.usernameStatus = "success";
this.routine = result.data.routine;
localStorage.setItem("routine", result.data.routine);
})
.catch((err) => {
this.usernameStatus = "failed";
this.loginError = err.response?.data;
});
}
}, },
methods: { methods: {
login(e: any) { resetRoutine() {
this.routine = "";
this.username = "";
localStorage.removeItem("routine");
localStorage.removeItem("username");
},
submit(e: any) {
if (this.routine == "") this.kickof(e);
else this.login(e);
},
kickof(e: any) {
let formData = e.target.elements;
let username = formData.username.value;
this.usernameStatus = "loading";
this.loginError = "";
this.$http
.post(`/auth/kickof`, {
username: username,
})
.then((result) => {
this.usernameStatus = "success";
this.routine = result.data.routine;
this.username = username;
localStorage.setItem("routine", result.data.routine);
localStorage.setItem("username", username);
})
.catch((err) => {
this.usernameStatus = "failed";
this.loginError = err.response?.data;
})
.finally(() => {
setTimeout(() => {
this.usernameStatus = undefined;
this.loginError = "";
}, 2000);
});
},
async login(e: any) {
let formData = e.target.elements; let formData = e.target.elements;
this.loginStatus = "loading"; this.loginStatus = "loading";
this.loginError = ""; this.loginError = "";
let secret = "";
if (this.routine == "totp") {
secret = formData.totp.value;
} else {
secret = await hashString(formData.password.value);
}
this.$http this.$http
.post(`/auth/login`, { .post(`/auth/login`, {
username: formData.username.value, username: formData.username.value,
totp: formData.totp.value, secret: secret,
}) })
.then((result) => { .then((result) => {
this.loginStatus = "success"; this.loginStatus = "success";

105
src/views/account/LoginData.vue
View file

@ -6,29 +6,41 @@
</div> </div>
</template> </template>
<template #diffMain> <template #diffMain>
<div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden"> <Spinner v-if="loading" class="mx-auto" />
<div class="flex flex-col gap-2"> <div v-else class="flex flex-col w-full h-full gap-2 px-7 overflow-hidden">
<img :src="image" alt="totp" class="w-56 h-56 self-center" /> <div class="w-full flex flex-row gap-2 justify-center">
<p
<TextCopy :copyText="otp" /> class="w-1/2 p-0.5 pl-0 rounded-lg py-2.5 text-sm text-center font-medium leading-5 outline-hidden cursor-pointer"
:class="
tab == 'totp' ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200'
"
@click="tab = 'totp'"
>
TOTP
</p>
<p
class="w-1/2 p-0.5 rounded-lg py-2.5 text-sm text-center font-medium leading-5 outline-hidden cursor-pointer"
:class="
tab == 'password' ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : 'hover:bg-red-200'
"
@click="tab = 'password'"
>
Passwort
</p>
</div> </div>
<form class="flex flex-col gap-2" @submit.prevent="verify"> <ChangeToTOTP
<div class="-space-y-px"> v-if="currentRoutine == 'password' && tab == 'totp'"
<div> :currentRoutine="currentRoutine"
<input id="totp" name="totp" type="text" required placeholder="TOTP prüfen" /> @updateCurrent="currentRoutine = 'totp'"
</div> />
</div> <ChangeToPassword
v-else-if="currentRoutine == 'totp' && tab == 'password'"
<div class="flex flex-row gap-2"> :currentRoutine="currentRoutine"
<button type="submit" primary :disabled="verifyStatus == 'loading' || verifyStatus == 'success'"> @updateCurrent="currentRoutine = 'password'"
TOTP prüfen />
</button> <TotpCheckAndScan v-else-if="tab == 'totp'" />
<Spinner v-if="verifyStatus == 'loading'" class="my-auto" /> <PasswordChange v-else-if="tab == 'password'" />
<SuccessCheckmark v-else-if="verifyStatus == 'success'" /> <p v-else>etwas ist schief gelaufen</p>
<FailureXMark v-else-if="verifyStatus == 'failed'" />
</div>
<p v-if="verifyError" class="text-center">{{ verifyError }}</p>
</form>
</div> </div>
</template> </template>
</MainTemplate> </MainTemplate>
@ -42,53 +54,34 @@ 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 TextCopy from "@/components/TextCopy.vue"; import TextCopy from "@/components/TextCopy.vue";
import TotpCheckAndScan from "../../components/account/TotpCheckAndScan.vue";
import PasswordChange from "../../components/account/PasswordChange.vue";
import ChangeToPassword from "../../components/account/ChangeToPassword.vue";
import ChangeToTOTP from "../../components/account/ChangeToTOTP.vue";
</script> </script>
<script lang="ts"> <script lang="ts">
export default defineComponent({ export default defineComponent({
data() { data() {
return { return {
verification: "loading" as "success" | "loading" | "failed", loading: false,
image: undefined as undefined | string, tab: "",
otp: undefined as undefined | string, currentRoutine: "",
verifyStatus: undefined as undefined | "loading" | "success" | "failed",
verifyError: "" as string,
}; };
}, },
mounted() { mounted() {
this.loading = true;
this.$http this.$http
.get(`/user/totp`) .get(`/user/routine`)
.then((result) => { .then((result) => {
this.verification = "success"; this.tab = result.data.routine;
this.image = result.data.dataUrl; this.currentRoutine = result.data.routine;
this.otp = result.data.otp;
}) })
.catch((err) => { .catch((err) => {})
this.verification = "failed"; .finally(() => {
this.loading = false;
}); });
}, },
methods: { methods: {},
verify(e: any) {
let formData = e.target.elements;
this.verifyStatus = "loading";
this.verifyError = "";
this.$http
.post(`/user/verify`, {
totp: formData.totp.value,
})
.then((result) => {
this.verifyStatus = "success";
})
.catch((err) => {
this.verifyStatus = "failed";
this.verifyError = err.response.data;
})
.finally(() => {
setTimeout(() => {
this.verifyStatus = undefined;
}, 2000);
});
},
},
}); });
</script> </script>

9
src/views/account/View.vue
View file

@ -1,11 +1,7 @@
<template> <template>
<SidebarLayout> <SidebarLayout>
<template #sidebar> <template #sidebar>
<SidebarTemplate <SidebarTemplate mainTitle="Mein Account" :topTitle="clubName" :showTopList="isOwner">
mainTitle="Mein Account"
:topTitle="config.app_name_overwrite || 'FF Admin'"
:showTopList="isOwner"
>
<template v-if="isOwner" #topList> <template v-if="isOwner" #topList>
<RoutingLink <RoutingLink
title="Administration" title="Administration"
@ -42,13 +38,14 @@ import SidebarTemplate from "@/templates/Sidebar.vue";
import RoutingLink from "@/components/admin/RoutingLink.vue"; import RoutingLink from "@/components/admin/RoutingLink.vue";
import { RouterView } from "vue-router"; import { RouterView } from "vue-router";
import { useAbilityStore } from "@/stores/ability"; import { useAbilityStore } from "@/stores/ability";
import { config } from "@/config"; import { useConfigurationStore } from "@/stores/configuration";
</script> </script>
<script lang="ts"> <script lang="ts">
export default defineComponent({ export default defineComponent({
computed: { computed: {
...mapState(useAbilityStore, ["isOwner"]), ...mapState(useAbilityStore, ["isOwner"]),
...mapState(useConfigurationStore, ["clubName"]),
activeRouteName() { activeRouteName() {
return this.$route.name; return this.$route.name;
}, },

114
src/views/admin/club/newsletter/NewsletterRecipients.vue
View file

@ -4,52 +4,56 @@
<p v-else-if="loading == 'failed'" @click="fetchNewsletterRecipients" class="cursor-pointer"> <p v-else-if="loading == 'failed'" @click="fetchNewsletterRecipients" class="cursor-pointer">
&#8634; laden fehlgeschlagen &#8634; laden fehlgeschlagen
</p> </p>
<div class="flex flex-col gap-2 h-1/2">
<div v-if="!showMemberSelect" class="flex flex-row gap-2 items-center">
<select v-model="recipientsByQueryId"> <select v-model="recipientsByQueryId">
<option value="def">Optional</option> <option value="def">Optional</option>
<option v-for="query in queries" :key="query.id" :value="query.id">{{ query.title }}</option> <option v-for="query in queries" :key="query.id" :value="query.id">{{ query.title }}</option>
</select> </select>
<p>Empfänger durch gespeicherte Abfrage</p> <div title="Empfänger manuell hinzufügen" @click="showMemberSelect = true">
<div class="flex flex-col gap-2 grow overflow-y-auto"> <UserPlusIcon class="w-7 h-7 cursor-pointer" />
<div
v-for="member in queried"
:key="member.id"
class="flex flex-row h-fit w-full border border-primary rounded-md bg-primary p-2 text-white justify-between items-center"
>
<div>
<p>{{ member.lastname }}, {{ member.firstname }} {{ member.nameaffix ? `- ${member.nameaffix}` : "" }}</p>
<p>Newsletter senden an Typ: {{ member.sendNewsletter?.type.type }}</p>
</div>
</div>
</div> </div>
</div> </div>
<div class="flex flex-col gap-2 h-1/2"> <div v-else class="flex flex-row gap-2 items-center">
<MemberSearchSelect <MemberSearchSelect
title="weitere Empfänger suchen" title="weitere Empfänger suchen"
showTitleAsPlaceholder
v-model="recipients" v-model="recipients"
:disabled="!can('create', 'club', 'newsletter')" :disabled="!can('create', 'club', 'newsletter')"
/> />
<div title="Empfänger über Query hinzufügen" @click="showMemberSelect = false">
<p>Ausgewählte Empfänger</p> <ArchiveBoxIcon class="w-7 h-7 cursor-pointer" />
<div class="flex flex-col gap-2 grow overflow-y-auto">
<div
v-for="member in selected"
:key="member.id"
class="flex flex-row h-fit w-full border border-primary rounded-md bg-primary p-2 text-white justify-between items-center"
>
<div>
<p>{{ member.lastname }}, {{ member.firstname }} {{ member.nameaffix ? `- ${member.nameaffix}` : "" }}</p>
<p>Newsletter senden an Typ: {{ member.sendNewsletter?.type.type }}</p>
</div>
<TrashIcon
v-if="can('create', 'club', 'newsletter')"
class="w-5 h-5 p-1 box-content cursor-pointer"
@click="removeSelected(member.id)"
/>
</div>
</div> </div>
</div> </div>
<p v-if="!showMemberSelect">Empfänger durch gespeicherte Abfrage</p>
<p v-else>Ausgewählte Empfänger</p>
<div class="flex flex-col gap-2 grow overflow-y-auto">
<div
v-for="member in showRecipientsByMode"
:key="member.id"
class="flex flex-row gap-2 h-fit w-full border border-primary rounded-md bg-primary p-2 text-white items-center"
>
<ExclamationTriangleIcon v-if="member.sendNewsletter == null" class="w-7 h-7" />
<div class="grow">
<p>{{ member.lastname }}, {{ member.firstname }} {{ member.nameaffix ? `- ${member.nameaffix}` : "" }}</p>
<p>Newsletter senden an Typ: {{ member.sendNewsletter?.type.type ?? "---" }}</p>
</div>
<TrashIcon
v-if="can('create', 'club', 'newsletter') && showMemberSelect"
class="w-5 h-5 p-1 box-content cursor-pointer"
@click="removeSelected(member.id)"
/>
</div>
</div>
<div v-if="countOfNoConfig != 0" class="flex flex-row items-center gap-2 pt-3">
<ExclamationTriangleIcon class="text-red-500 w-5 h-5" />
<p>{{ countOfNoConfig }} Mitglieder der Auswahl haben keinen Newsletter-Versand konfiguriert!</p>
</div>
</div> </div>
</template> </template>
@ -67,7 +71,7 @@ import {
TransitionRoot, TransitionRoot,
} from "@headlessui/vue"; } from "@headlessui/vue";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid"; import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
import { TrashIcon } from "@heroicons/vue/24/outline"; import { ArchiveBoxIcon, ExclamationTriangleIcon, TrashIcon, UserPlusIcon } from "@heroicons/vue/24/outline";
import { useMemberStore } from "@/stores/admin/club/member/member"; import { useMemberStore } from "@/stores/admin/club/member/member";
import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models"; import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
import { useNewsletterStore } from "@/stores/admin/club/newsletter/newsletter"; import { useNewsletterStore } from "@/stores/admin/club/newsletter/newsletter";
@ -77,6 +81,7 @@ import { useQueryStoreStore } from "@/stores/admin/configuration/queryStore";
import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder"; import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
import cloneDeep from "lodash.clonedeep"; import cloneDeep from "lodash.clonedeep";
import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue"; import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue";
import type { FieldType } from "@/types/dynamicQueries";
</script> </script>
<script lang="ts"> <script lang="ts">
@ -84,22 +89,17 @@ export default defineComponent({
props: { props: {
newsletterId: String, newsletterId: String,
}, },
watch: {
recipientsByQuery() {
this.loadQuery();
},
},
data() { data() {
return { return {
query: "" as String, queryResult: [] as Array<{ id: FieldType; [key: string]: FieldType }>,
members: [] as Array<MemberViewModel>, members: [] as Array<MemberViewModel>,
showMemberSelect: false as boolean,
}; };
}, },
computed: { computed: {
...mapWritableState(useNewsletterRecipientsStore, ["recipients", "loading"]), ...mapWritableState(useNewsletterRecipientsStore, ["recipients", "loading"]),
...mapWritableState(useNewsletterStore, ["activeNewsletterObj"]), ...mapWritableState(useNewsletterStore, ["activeNewsletterObj"]),
...mapState(useQueryStoreStore, ["queries"]), ...mapState(useQueryStoreStore, ["queries"]),
...mapState(useQueryBuilderStore, ["data"]),
...mapState(useAbilityStore, ["can"]), ...mapState(useAbilityStore, ["can"]),
selected(): Array<MemberViewModel> { selected(): Array<MemberViewModel> {
return this.members return this.members
@ -114,10 +114,10 @@ export default defineComponent({
}, },
queried(): Array<MemberViewModel> { queried(): Array<MemberViewModel> {
if (this.recipientsByQueryId == "def") return []; if (this.recipientsByQueryId == "def") return [];
let keys = Object.keys(this.data?.[0] ?? {}); let keys = Object.keys(this.queryResult?.[0] ?? {});
let memberKey = keys.find((k) => k.includes("member_id")); let memberKey = keys.find((k) => k.includes("member_id"));
return this.members.filter((m) => return this.members.filter((m) =>
this.data this.queryResult
.map((t) => ({ .map((t) => ({
id: t.id, id: t.id,
...(memberKey ? { memberId: t[memberKey] } : {}), ...(memberKey ? { memberId: t[memberKey] } : {}),
@ -125,6 +125,17 @@ export default defineComponent({
.some((d) => (d.memberId ?? d.id) == m.id) .some((d) => (d.memberId ?? d.id) == m.id)
); );
}, },
showRecipientsByMode() {
return (this.showMemberSelect ? this.selected : this.queried).sort((a, b) => {
const aHasConfig = a.sendNewsletter != null;
const bHasConfig = b.sendNewsletter != null;
if (aHasConfig === bHasConfig) return 0;
return aHasConfig ? -1 : 1;
});
},
countOfNoConfig() {
return this.showRecipientsByMode.filter((member) => member.sendNewsletter == null).length;
},
recipientsByQueryId: { recipientsByQueryId: {
get() { get() {
return this.activeNewsletterObj?.recipientsByQueryId ?? "def"; return this.activeNewsletterObj?.recipientsByQueryId ?? "def";
@ -133,17 +144,12 @@ export default defineComponent({
if (this.activeNewsletterObj == undefined) return; if (this.activeNewsletterObj == undefined) return;
if (val == "def") { if (val == "def") {
this.activeNewsletterObj.recipientsByQueryId = null; this.activeNewsletterObj.recipientsByQueryId = null;
this.activeNewsletterObj.recipientsByQuery = null;
} else if (this.queries.find((q) => q.id == val)) { } else if (this.queries.find((q) => q.id == val)) {
this.activeNewsletterObj.recipientsByQueryId = val; this.activeNewsletterObj.recipientsByQueryId = val;
this.activeNewsletterObj.recipientsByQuery = cloneDeep(this.queries.find((q) => q.id == val)); this.loadQuery();
this.sendQuery(0, 0, this.recipientsByQuery?.query, true);
} }
}, },
}, },
recipientsByQuery() {
return this.activeNewsletterObj?.recipientsByQuery;
},
}, },
mounted() { mounted() {
// this.fetchNewsletterRecipients(); // this.fetchNewsletterRecipients();
@ -155,7 +161,7 @@ export default defineComponent({
...mapActions(useMemberStore, ["getAllMembers"]), ...mapActions(useMemberStore, ["getAllMembers"]),
...mapActions(useNewsletterRecipientsStore, ["fetchNewsletterRecipients"]), ...mapActions(useNewsletterRecipientsStore, ["fetchNewsletterRecipients"]),
...mapActions(useQueryStoreStore, ["fetchQueries"]), ...mapActions(useQueryStoreStore, ["fetchQueries"]),
...mapActions(useQueryBuilderStore, ["sendQuery"]), ...mapActions(useQueryBuilderStore, ["sendQueryByStoreId"]),
removeSelected(id: string) { removeSelected(id: string) {
let index = this.recipients.findIndex((s) => s == id); let index = this.recipients.findIndex((s) => s == id);
if (index != -1) { if (index != -1) {
@ -170,8 +176,12 @@ export default defineComponent({
.catch(() => {}); .catch(() => {});
}, },
loadQuery() { loadQuery() {
if (this.recipientsByQuery) { if (this.recipientsByQueryId != "def") {
this.sendQuery(0, 0, this.recipientsByQuery.query, true); this.sendQueryByStoreId(this.recipientsByQueryId, 0, 0, true)
.then((result) => {
this.queryResult = result.data.rows;
})
.catch(() => {});
} }
}, },
}, },

46
src/views/admin/management/setting/Setting.vue Normal file
View file

@ -0,0 +1,46 @@
<template>
<MainTemplate>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
<h1 class="font-bold text-xl h-8">Einstellungen</h1>
</div>
</template>
<template #main>
<p>Hinweis: Optionale Felder können leer gelassen werden und nutzen dann einen Fallback-Werte.</p>
<ClubImageSetting />
<ClubSetting />
<AppSetting />
<MailSetting />
<SessionSetting />
<BackupSetting />
</template>
</MainTemplate>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { useAbilityStore } from "@/stores/ability";
import { useSettingStore } from "@/stores/admin/management/setting";
import ClubSetting from "@/components/admin/management/setting/ClubSetting.vue";
import AppSetting from "@/components/admin/management/setting/AppSetting.vue";
import MailSetting from "@/components/admin/management/setting/MailSetting.vue";
import SessionSetting from "@/components/admin/management/setting/SessionSetting.vue";
import BackupSetting from "@/components/admin/management/setting/BackupSetting.vue";
import ClubImageSetting from "@/components/admin/management/setting/ClubImageSetting.vue";
</script>
<script lang="ts">
export default defineComponent({
computed: {
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.fetchSettings();
},
methods: {
...mapActions(useSettingStore, ["fetchSettings"]),
},
});
</script>

90
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>
@ -14,17 +14,62 @@
<p class="w-fit">Einladungslink nicht gültig - Melde dich bei einem Admin.</p> <p class="w-fit">Einladungslink nicht gültig - Melde dich bei einem Admin.</p>
</div> </div>
<form v-else class="flex flex-col gap-2" @submit.prevent="invite"> <form v-else class="flex flex-col gap-2" @submit.prevent="invite">
<div class="w-full flex flex-row gap-2 justify-center">
<p
class="w-1/2 p-0.5 pl-0 rounded-lg py-2.5 text-sm text-center font-medium leading-5 outline-hidden cursor-pointer"
:class="
tab == 'totp' ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200'
"
@click="tab = 'totp'"
>
TOTP
</p>
<p
class="w-1/2 p-0.5 rounded-lg py-2.5 text-sm text-center font-medium leading-5 outline-hidden cursor-pointer"
:class="
tab == 'password' ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : 'hover:bg-red-200'
"
@click="tab = 'password'"
>
Passwort
</p>
</div>
<p class="text-center">Dein Nutzername: {{ username }}</p> <p class="text-center">Dein Nutzername: {{ username }}</p>
<img :src="image" alt="totp" class="w-56 h-56 self-center" /> <div v-if="tab == 'totp'" class="flex flex-col gap-2">
<img :src="image" alt="totp" class="w-56 h-56 self-center" />
<TextCopy :copyText="otp" /> <TextCopy :copyText="otp" />
<div class="-space-y-px"> <div class="-space-y-px">
<div> <div>
<input id="totp" name="totp" type="text" required placeholder="TOTP" /> <input id="totp" name="totp" type="text" required placeholder="TOTP" />
</div>
</div> </div>
</div> </div>
<div v-else>
<input
id="password"
name="password"
type="password"
required
placeholder="Passwort"
class="rounded-b-none!"
autocomplete="new-password"
:class="notMatching ? 'border-red-600!' : ''"
/>
<input
id="password_rep"
name="password_rep"
type="password"
required
placeholder="Passwort wiederholen"
class="rounded-t-none!"
autocomplete="new-password"
:class="notMatching ? 'border-red-600!' : ''"
/>
<p v-if="notMatching">Passwörter stimmen nicht überein</p>
</div>
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
<button type="submit" primary :disabled="inviteStatus == 'loading' || inviteStatus == 'success'"> <button type="submit" primary :disabled="inviteStatus == 'loading' || inviteStatus == 'success'">
@ -49,6 +94,8 @@ 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";
import { hashString } from "@/helpers/crypto";
</script> </script>
<script lang="ts"> <script lang="ts">
@ -59,12 +106,14 @@ export default defineComponent({
}, },
data() { data() {
return { return {
tab: "totp",
verification: "loading" as "success" | "loading" | "failed", verification: "loading" as "success" | "loading" | "failed",
image: undefined as undefined | string, image: undefined as undefined | string,
otp: undefined as undefined | string, otp: undefined as undefined | string,
username: "" as string, username: "" as string,
inviteStatus: undefined as undefined | "loading" | "success" | "failed", inviteStatus: undefined as undefined | "loading" | "success" | "failed",
inviteError: "" as string, inviteError: "" as string,
notMatching: false as boolean,
}; };
}, },
mounted() { mounted() {
@ -88,15 +137,21 @@ export default defineComponent({
}); });
}, },
methods: { methods: {
invite(e: any) { async invite(e: any) {
let formData = e.target.elements; let secret = "";
if (this.tab == "totp") secret = this.totp(e);
else secret = await this.password(e);
if (secret == "") return;
this.inviteStatus = "loading"; this.inviteStatus = "loading";
this.inviteError = ""; this.inviteError = "";
this.$http this.$http
.put(`/invite`, { .put(`/invite`, {
token: this.token, token: this.token,
mail: this.mail, mail: this.mail,
totp: formData.totp.value, secret: secret,
routine: this.tab,
}) })
.then((result) => { .then((result) => {
this.inviteStatus = "success"; this.inviteStatus = "success";
@ -111,6 +166,23 @@ export default defineComponent({
this.inviteError = err.response.data; this.inviteError = err.response.data;
}); });
}, },
totp(e: any) {
let formData = e.target.elements;
return formData.totp.value;
},
async password(e: any) {
let formData = e.target.elements;
let new_pw = await hashString(formData.password.value);
let new_rep = await hashString(formData.password_rep.value);
if (new_pw != new_rep) {
this.notMatching = true;
return "";
}
this.notMatching = false;
return await hashString(formData.password.value);
},
}, },
}); });
</script> </script>

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

@ -2,8 +2,8 @@
<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">Zugang zurücksetzen</h2>
</div> </div>
<div v-if="verification == 'loading'" class="flex flex-col gap-2 items-center"> <div v-if="verification == 'loading'" class="flex flex-col gap-2 items-center">
@ -15,15 +15,61 @@
<RouterLink to="/reset" class="text-primary">Zum zurücksetzen Start</RouterLink> <RouterLink to="/reset" class="text-primary">Zum zurücksetzen Start</RouterLink>
</div> </div>
<form v-else class="flex flex-col gap-2" @submit.prevent="reset"> <form v-else class="flex flex-col gap-2" @submit.prevent="reset">
<img :src="image" alt="totp" class="w-56 h-56 self-center" /> <div class="w-full flex flex-row gap-2 justify-center">
<p
class="w-1/2 p-0.5 pl-0 rounded-lg py-2.5 text-sm text-center font-medium leading-5 outline-hidden cursor-pointer"
:class="
tab == 'totp' ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200'
"
@click="tab = 'totp'"
>
TOTP
</p>
<p
class="w-1/2 p-0.5 rounded-lg py-2.5 text-sm text-center font-medium leading-5 outline-hidden cursor-pointer"
:class="
tab == 'password' ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : 'hover:bg-red-200'
"
@click="tab = 'password'"
>
Passwort
</p>
</div>
<TextCopy :copyText="otp" /> <div v-if="tab == 'totp'" class="flex flex-col gap-2">
<img :src="image" alt="totp" class="w-56 h-56 self-center" />
<div class="-space-y-px"> <TextCopy :copyText="otp" />
<div>
<input id="totp" name="totp" type="text" required placeholder="TOTP" /> <div class="-space-y-px">
<div>
<input id="totp" name="totp" type="text" required placeholder="TOTP" />
</div>
</div> </div>
</div> </div>
<div v-else>
<input
id="password"
name="password"
type="password"
required
placeholder="Passwort"
class="rounded-b-none!"
autocomplete="new-password"
:class="notMatching ? 'border-red-600!' : ''"
/>
<input
id="password_rep"
name="password_rep"
type="password"
required
placeholder="Passwort wiederholen"
class="rounded-t-none!"
autocomplete="new-password"
:class="notMatching ? 'border-red-600!' : ''"
/>
<p v-if="notMatching">Passwörter stimmen nicht überein</p>
</div>
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
<button type="submit" primary :disabled="resetStatus == 'loading' || resetStatus == 'success'"> <button type="submit" primary :disabled="resetStatus == 'loading' || resetStatus == 'success'">
@ -49,6 +95,8 @@ 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";
import { hashString } from "@/helpers/crypto";
</script> </script>
<script lang="ts"> <script lang="ts">
@ -59,11 +107,13 @@ export default defineComponent({
}, },
data() { data() {
return { return {
tab: "totp",
verification: "loading" as "success" | "loading" | "failed", verification: "loading" as "success" | "loading" | "failed",
image: undefined as undefined | string, image: undefined as undefined | string,
otp: undefined as undefined | string, otp: undefined as undefined | string,
resetStatus: undefined as undefined | "loading" | "success" | "failed", resetStatus: undefined as undefined | "loading" | "success" | "failed",
resetError: "" as string, resetError: "" as string,
notMatching: false as boolean,
}; };
}, },
mounted() { mounted() {
@ -86,15 +136,21 @@ export default defineComponent({
}); });
}, },
methods: { methods: {
reset(e: any) { async reset(e: any) {
let formData = e.target.elements; let secret = "";
if (this.tab == "totp") secret = this.totp(e);
else secret = await this.password(e);
if (secret == "") return;
this.resetStatus = "loading"; this.resetStatus = "loading";
this.resetError = ""; this.resetError = "";
this.$http this.$http
.put(`/reset`, { .put(`/reset`, {
token: this.token, token: this.token,
mail: this.mail, mail: this.mail,
totp: formData.totp.value, secret: secret,
routine: this.tab,
}) })
.then((result) => { .then((result) => {
this.resetStatus = "success"; this.resetStatus = "success";
@ -109,6 +165,23 @@ export default defineComponent({
this.resetError = err.response.data; this.resetError = err.response.data;
}); });
}, },
totp(e: any) {
let formData = e.target.elements;
return formData.totp.value;
},
async password(e: any) {
let formData = e.target.elements;
let new_pw = await hashString(formData.password.value);
let new_rep = await hashString(formData.password_rep.value);
if (new_pw != new_rep) {
this.notMatching = true;
return "";
}
this.notMatching = false;
return await hashString(formData.password.value);
},
}, },
}); });
</script> </script>

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

@ -2,14 +2,14 @@
<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">Zugang zurücksetzen</h2>
</div> </div>
<form class="flex flex-col gap-2" @submit.prevent="reset"> <form class="flex flex-col gap-2" @submit.prevent="reset">
<div class="-space-y-px"> <div class="-space-y-px">
<div> <div>
<input id="username" name="username" type="text" required placeholder="Benutzer" /> <input id="username" name="username" type="text" required placeholder="Benutzer" :value="username" />
</div> </div>
</div> </div>
<RouterLink to="/" class="w-fit self-end text-primary">zum Login</RouterLink> <RouterLink to="/" class="w-fit self-end text-primary">zum Login</RouterLink>
@ -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">
@ -44,8 +45,12 @@ export default defineComponent({
return { return {
resetStatus: undefined as undefined | "loading" | "success" | "failed", resetStatus: undefined as undefined | "loading" | "success" | "failed",
resetMessage: "" as string, resetMessage: "" as string,
username: "" as string,
}; };
}, },
mounted() {
this.username = localStorage.getItem("username") ?? "";
},
methods: { methods: {
reset(e: any) { reset(e: any) {
let formData = e.target.elements; let formData = e.target.elements;

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

@ -2,36 +2,18 @@
<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>
<CheckProgressBar :total="dictionary.length" :step="step" :successfull="successfull" />
<form class="flex flex-col gap-2" @submit.prevent="setup"> <Club v-if="step == stepIndex('club')" />
<div class="-space-y-px"> <Images v-else-if="step == stepIndex('clubImages')" />
<div> <App v-else-if="step == stepIndex('app')" />
<input id="username" name="username" type="text" required placeholder="Benutzer" class="rounded-b-none!" /> <Mail v-else-if="step == stepIndex('mail')" />
</div> <Account v-else-if="step == stepIndex('account')" />
<div> <Finished v-else-if="step == stepIndex('finished')" />
<input id="mail" name="mail" type="email" required placeholder="Mailadresse" class="rounded-none!" /> <p v-else class="text-center">UI-Fehler - versuchen Sie einen Reload der Seite</p>
</div>
<div>
<input id="firstname" name="firstname" type="text" required placeholder="Vorname" class="rounded-none!" />
</div>
<div>
<input id="lastname" name="lastname" type="text" required placeholder="Nachname" class="rounded-t-none!" />
</div>
</div>
<div class="flex flex-row gap-2">
<button type="submit" primary :disabled="setupStatus == 'loading' || setupStatus == 'success'">
Admin-Account anlegen
</button>
<Spinner v-if="setupStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="setupStatus == 'success'" />
<FailureXMark v-else-if="setupStatus == 'failed'" />
</div>
<p v-if="setupMessage" class="text-center">{{ setupMessage }}</p>
</form>
<FormBottomBar /> <FormBottomBar />
</div> </div>
@ -40,41 +22,23 @@
<script setup lang="ts"> <script setup lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.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";
import App from "@/components/setup/App.vue";
import Account from "@/components/setup/Account.vue";
import CheckProgressBar from "@/components/CheckProgressBar.vue";
import { mapState } from "pinia";
import { useSetupStore } from "@/stores/setup";
import Club from "@/components/setup/Club.vue";
import Images from "@/components/setup/Images.vue";
import Finished from "@/components/setup/Finished.vue";
import Mail from "../../components/setup/Mail.vue";
</script> </script>
<script lang="ts"> <script lang="ts">
export default defineComponent({ export default defineComponent({
data() { computed: {
return { ...mapState(useSetupStore, ["step", "stepIndex", "successfull", "dictionary"]),
setupStatus: undefined as undefined | "loading" | "success" | "failed",
setupMessage: "" as string,
};
},
methods: {
setup(e: any) {
let formData = e.target.elements;
this.setupStatus = "loading";
this.setupMessage = "";
this.$http
.post(`/setup`, {
username: formData.username.value,
mail: formData.mail.value,
firstname: formData.firstname.value,
lastname: formData.lastname.value,
})
.then((result) => {
this.setupStatus = "success";
this.setupMessage = "Sie haben einen Verifizierungslink per Mail erhalten.";
})
.catch((err) => {
this.setupStatus = "failed";
this.setupMessage = err.response.data;
});
},
}, },
}); });
</script> </script>

5
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">
@ -92,7 +93,7 @@ export default defineComponent({
this.setupStatus = "loading"; this.setupStatus = "loading";
this.setupError = ""; this.setupError = "";
this.$http this.$http
.put(`/setup`, { .post(`/setup/finish`, {
token: this.token, token: this.token,
mail: this.mail, mail: this.mail,
totp: formData.totp.value, totp: formData.totp.value,

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\//,