fix: false positive auth true by existing expired jwt

Reviewed-on: #88

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ff-admin",
-  "version": "1.4.1",
+  "version": "1.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ff-admin",
-      "version": "1.4.1",
+      "version": "1.4.0",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@fullcalendar/core": "^6.1.15",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ff-admin",
-  "version": "1.4.1",
+  "version": "1.4.0",
   "description": "Feuerwehr/Verein Mitgliederverwaltung UI",
   "type": "module",
   "scripts": {

src/components/admin/MemberSearchSelect.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="w-full">
     <Combobox v-model="selected" :disabled="disabled" multiple>
-      <ComboboxLabel>{{ title }}</ComboboxLabel>
-      <div class="relative mt-1">
+      <ComboboxLabel v-if="!showTitleAsPlaceholder">{{ title }}</ComboboxLabel>
+      <div class="relative" :class="{ 'mt-1': !showTitleAsPlaceholder }">
         <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"
+          :placeholder="showTitleAsPlaceholder ? title : ''"
           @input="query = $event.target.value"
         />
         <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
@@ -101,6 +102,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    showTitleAsPlaceholder: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["update:model-value", "add:difference", "remove:difference", "add:member", "add:memberByArray"],
   watch: {

src/components/admin/configuration/newsletterConfig/NewsletterConfigListItem.vue

@@ -3,13 +3,13 @@
     <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>
       <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" />
         </button>
         <Spinner v-else-if="status == 'loading'" class="my-auto" />
         <SuccessCheckmark v-else-if="status?.status == 'success'" />
         <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" />
         </button>
       </div>
@@ -36,7 +36,7 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { useModalStore } from "@/stores/modal";
-import { NewsletterConfigType } from "@/enums/newsletterConfigType";
+import { NewsletterConfigEnum } from "@/enums/newsletterConfigEnum";
 import type { AxiosResponse } from "axios";
 import type { CommunicationTypeViewModel } from "@/viewmodels/admin/configuration/communicationType.models";
 import { useAbilityStore } from "@/stores/ability";
@@ -62,7 +62,7 @@ export default defineComponent({
     },
   },
   mounted() {
-    this.configs = Object.values(NewsletterConfigType);
+    this.configs = Object.values(NewsletterConfigEnum);
   },
   beforeUnmount() {
     try {

src/enums/newsletterConfigEnum.ts

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

src/enums/newsletterConfigType.ts

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

src/router/authGuard.ts

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

src/stores/admin/club/queryBuilder.ts

@@ -2,6 +2,7 @@ import { defineStore } from "pinia";
 import { http } from "@/serverCom";
 import type { TableMeta } from "@/viewmodels/admin/configuration/query.models";
 import type { DynamicQueryStructure, FieldType } from "@/types/dynamicQueries";
+import type { AxiosResponse } from "axios";
 
 export const useQueryBuilderStore = defineStore("queryBuilder", {
   state: () => {
@@ -58,6 +59,16 @@ export const useQueryBuilderStore = defineStore("queryBuilder", {
           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() {
       this.data = [];
       this.totalLength = 0;

src/stores/admin/configuration/newsletterConfig.ts

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

src/viewmodels/admin/club/newsletter/newsletter.models.ts

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

src/viewmodels/admin/configuration/newsletterConfig.models.ts

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

src/views/admin/club/newsletter/NewsletterRecipients.vue

@@ -4,51 +4,55 @@
     <p v-else-if="loading == 'failed'" @click="fetchNewsletterRecipients" class="cursor-pointer">
       &#8634; laden fehlgeschlagen
     </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">
         <option value="def">Optional</option>
         <option v-for="query in queries" :key="query.id" :value="query.id">{{ query.title }}</option>
       </select>
-      <p>Empfänger durch gespeicherte Abfrage</p>
-      <div class="flex flex-col gap-2 grow overflow-y-auto">
-        <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 title="Empfänger manuell hinzufügen" @click="showMemberSelect = true">
+        <UserPlusIcon class="w-7 h-7 cursor-pointer" />
       </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
         title="weitere Empfänger suchen"
+        showTitleAsPlaceholder
         v-model="recipients"
         :disabled="!can('create', 'club', 'newsletter')"
       />
+      <div title="Empfänger über Query hinzufügen" @click="showMemberSelect = false">
+        <ArchiveBoxIcon class="w-7 h-7 cursor-pointer" />
+      </div>
+    </div>
+
+    <p v-if="!showMemberSelect">Empfänger durch gespeicherte Abfrage</p>
+    <p v-else>Ausgewählte Empfänger</p>
 
-      <p>Ausgewählte Empfänger</p>
     <div class="flex flex-col gap-2 grow overflow-y-auto">
       <div
-          v-for="member in selected"
+        v-for="member in showRecipientsByMode"
         :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"
+        class="flex flex-row gap-2 h-fit w-full border border-primary rounded-md bg-primary p-2 text-white items-center"
       >
-          <div>
+        <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>
+          <p>Newsletter senden an Typ: {{ member.sendNewsletter?.type.type ?? "---" }}</p>
         </div>
 
         <TrashIcon
-            v-if="can('create', 'club', 'newsletter')"
+          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>
 </template>
@@ -67,7 +71,7 @@ import {
   TransitionRoot,
 } from "@headlessui/vue";
 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 type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
 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 cloneDeep from "lodash.clonedeep";
 import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue";
+import type { FieldType } from "@/types/dynamicQueries";
 </script>
 
 <script lang="ts">
@@ -84,22 +89,17 @@ export default defineComponent({
   props: {
     newsletterId: String,
   },
-  watch: {
-    recipientsByQuery() {
-      this.loadQuery();
-    },
-  },
   data() {
     return {
-      query: "" as String,
+      queryResult: [] as Array<{ id: FieldType; [key: string]: FieldType }>,
       members: [] as Array<MemberViewModel>,
+      showMemberSelect: false as boolean,
     };
   },
   computed: {
     ...mapWritableState(useNewsletterRecipientsStore, ["recipients", "loading"]),
     ...mapWritableState(useNewsletterStore, ["activeNewsletterObj"]),
     ...mapState(useQueryStoreStore, ["queries"]),
-    ...mapState(useQueryBuilderStore, ["data"]),
     ...mapState(useAbilityStore, ["can"]),
     selected(): Array<MemberViewModel> {
       return this.members
@@ -114,10 +114,10 @@ export default defineComponent({
     },
     queried(): Array<MemberViewModel> {
       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"));
       return this.members.filter((m) =>
-        this.data
+        this.queryResult
           .map((t) => ({
             id: t.id,
             ...(memberKey ? { memberId: t[memberKey] } : {}),
@@ -125,6 +125,17 @@ export default defineComponent({
           .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: {
       get() {
         return this.activeNewsletterObj?.recipientsByQueryId ?? "def";
@@ -133,17 +144,12 @@ export default defineComponent({
         if (this.activeNewsletterObj == undefined) return;
         if (val == "def") {
           this.activeNewsletterObj.recipientsByQueryId = null;
-          this.activeNewsletterObj.recipientsByQuery = null;
         } else if (this.queries.find((q) => q.id == val)) {
           this.activeNewsletterObj.recipientsByQueryId = val;
-          this.activeNewsletterObj.recipientsByQuery = cloneDeep(this.queries.find((q) => q.id == val));
-          this.sendQuery(0, 0, this.recipientsByQuery?.query, true);
+          this.loadQuery();
         }
       },
     },
-    recipientsByQuery() {
-      return this.activeNewsletterObj?.recipientsByQuery;
-    },
   },
   mounted() {
     // this.fetchNewsletterRecipients();
@@ -155,7 +161,7 @@ export default defineComponent({
     ...mapActions(useMemberStore, ["getAllMembers"]),
     ...mapActions(useNewsletterRecipientsStore, ["fetchNewsletterRecipients"]),
     ...mapActions(useQueryStoreStore, ["fetchQueries"]),
-    ...mapActions(useQueryBuilderStore, ["sendQuery"]),
+    ...mapActions(useQueryBuilderStore, ["sendQueryByStoreId"]),
     removeSelected(id: string) {
       let index = this.recipients.findIndex((s) => s == id);
       if (index != -1) {
@@ -170,8 +176,12 @@ export default defineComponent({
         .catch(() => {});
     },
     loadQuery() {
-      if (this.recipientsByQuery) {
-        this.sendQuery(0, 0, this.recipientsByQuery.query, true);
+      if (this.recipientsByQueryId != "def") {
+        this.sendQueryByStoreId(this.recipientsByQueryId, 0, 0, true)
+          .then((result) => {
+            this.queryResult = result.data.rows;
+          })
+          .catch(() => {});
       }
     },
   },