src/App.vue

@@ -16,7 +16,7 @@ import Header from "./components/Header.vue";
 import Footer from "./components/Footer.vue";
 import { mapState } from "pinia";
 import { useAuthStore } from "./stores/auth";
-import { isAuthenticatedPromise } from "./router/authGuards";
+import { isAuthenticatedPromise } from "./router/authGuard";
 import ContextMenu from "./components/ContextMenu.vue";
 import Modal from "./components/Modal.vue";
 </script>

src/components/UserMenu.vue

@@ -26,7 +26,9 @@
             </RouterLink>
           </MenuItem>
           <MenuItem>
+            <span>
               <button primary-outline @click="logoutAccount">ausloggen</button>
+            </span>
           </MenuItem>
         </div>
       </MenuItems>

src/main.css

@@ -56,8 +56,7 @@ body {
   @apply w-full h-full overflow-hidden flex flex-col;
 }
 
-/* :not([headlessui]):not([id*="headlessui"]):not([class*="headlessui"]) */
-button:not([class*="ql"] *):not([class*="fc"]),
+button:not([class*="ql"] *):not([class*="fc"]):not([headlessui]):not([id*="headlessui"]):not([class*="headlessui"]),
 a[button] {
   @apply relative box-border h-10 w-full flex justify-center py-2 px-4 text-sm font-medium rounded-md focus:outline-none focus:ring-0;
 }

src/router/adminGuard.ts

@@ -22,3 +22,16 @@ export async function abilityAndNavUpdate(to: any, from: any, next: any) {
     next(false);
   }
 }
+
+export async function isOwner(to: any, from: any, next: any) {
+  NProgress.start();
+  const ability = useAbilityStore();
+
+  if (ability.isOwner) {
+    NProgress.done();
+    next();
+  } else {
+    NProgress.done();
+    next(false);
+  }
+}

src/router/authGuard.ts

@@ -35,7 +35,7 @@ export async function isAuthenticated(to: any, from: any, next: any) {
     });
 }
 
-export async function isAuthenticatedPromise(): Promise<Payload> {
+export async function isAuthenticatedPromise(forceRefresh: boolean = false): Promise<Payload> {
   return new Promise<Payload>(async (resolve, reject) => {
     const auth = useAuthStore();
     const account = useAccountStore();
@@ -55,7 +55,7 @@ export async function isAuthenticatedPromise(): Promise<Payload> {
       // check jwt expiry
       const exp = decoded.exp ?? 0;
       const correctedLocalTime = new Date().getTime();
-      if (exp < Math.floor(correctedLocalTime / 1000)) {
+      if (exp < Math.floor(correctedLocalTime / 1000) || forceRefresh) {
         await refreshToken()
           .then(() => {
             console.log("fetched new token");

src/router/index.ts

@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import Login from "@/views/Login.vue";
 
-import { isAuthenticated } from "./authGuards";
+import { isAuthenticated } from "./authGuard";
 import { loadAccountData } from "./accountGuard";
 import { isSetup } from "./setupGuard";
 import { abilityAndNavUpdate } from "./adminGuard";
@@ -476,6 +476,11 @@ const router = createRouter({
           name: "account-permission",
           component: () => import("@/views/account/Permission.vue"),
         },
+        {
+          path: "administration",
+          name: "account-administration",
+          component: () => import("@/views/account/Administration.vue"),
+        },
         {
           path: ":pathMatch(.*)*",
           name: "account-404",

src/serverCom.ts

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { isAuthenticatedPromise, type Payload } from "./router/authGuards";
+import { isAuthenticatedPromise, type Payload } from "./router/authGuard";
 import router from "./router";
 
 let devMode = process.env.NODE_ENV === "development";

src/views/account/Administration.vue

@@ -0,0 +1,162 @@
+<template>
+  <MainTemplate :useStagedOverviewLink="false">
+    <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">Administration übertragen</h1>
+      </div>
+    </template>
+    <template #main>
+      <Spinner v-if="loading == 'loading'" class="mx-auto" />
+      <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
+      <form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerTransfer">
+        <div class="w-full">
+          <Combobox v-model="selected">
+            <ComboboxLabel>Nutzer suchen</ComboboxLabel>
+            <div class="relative mt-1">
+              <ComboboxInput
+                class="rounded-md shadow-sm 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-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+                :displayValue="(person) => person.firstname + ' ' + person.lastname"
+                @input="query = $event.target.value"
+              />
+              <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
+                <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+              </ComboboxButton>
+              <TransitionRoot
+                leave="transition ease-in duration-100"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+                @after-leave="query = ''"
+              >
+                <ComboboxOptions
+                  class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm"
+                >
+                  <ComboboxOption v-if="filtered.length === 0" as="template" disabled>
+                    <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                      <span class="font-normal block truncate">Keine Auswahl</span>
+                    </li>
+                  </ComboboxOption>
+
+                  <ComboboxOption
+                    v-for="user in filtered"
+                    as="template"
+                    :key="user.id"
+                    :value="user"
+                    v-slot="{ selected, active }"
+                  >
+                    <li
+                      class="relative cursor-default select-none py-2 pl-10 pr-4"
+                      :class="{
+                        'bg-primary text-white': active,
+                        'text-gray-900': !active,
+                      }"
+                    >
+                      <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                        {{ user.firstname }} {{ user.lastname }} {{ user.nameaffix }}
+                      </span>
+                      <span
+                        v-if="selected"
+                        class="absolute inset-y-0 left-0 flex items-center pl-3"
+                        :class="{ 'text-white': active, 'text-primary': !active }"
+                      >
+                        <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                      </span>
+                    </li>
+                  </ComboboxOption>
+                </ComboboxOptions>
+              </TransitionRoot>
+            </div>
+          </Combobox>
+        </div>
+        <div class="flex flex-row justify-end gap-2">
+          <button primary-outline type="reset" class="!w-fit" @click="selected = undefined">abbrechen</button>
+          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || selected == undefined">
+            übertragen
+          </button>
+          <Spinner v-if="status == 'loading'" class="my-auto" />
+          <SuccessCheckmark v-else-if="status?.status == 'success'" />
+          <FailureXMark v-else-if="status?.status == 'failed'" />
+        </div>
+      </form>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, markRaw, defineAsyncComponent } 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 { useUserStore } from "@/stores/admin/user";
+import { isAuthenticatedPromise } from "@/router/authGuard";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import type { UserViewModel } from "@/viewmodels/admin/user.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      query: "" as String,
+      selected: undefined as UserViewModel | undefined,
+    };
+  },
+  computed: {
+    ...mapState(useUserStore, ["users", "loading"]),
+    filtered(): Array<UserViewModel> {
+      return this.query === ""
+        ? this.users
+        : this.users.filter((user) =>
+            (user.firstname + " " + user.lastname)
+              .toLowerCase()
+              .replace(/\s+/g, "")
+              .includes(this.query.toLowerCase().replace(/\s+/g, ""))
+          );
+    },
+    sorted(): Array<MemberViewModel> {
+      return this.selected.sort((a, b) => {
+        if (a.lastname < b.lastname) return -1;
+        if (a.lastname > b.lastname) return 1;
+        if (a.firstname < b.firstname) return -1;
+        if (a.firstname > b.firstname) return 1;
+        return 0;
+      });
+    },
+  },
+  mounted() {
+    this.fetchUsers();
+  },
+  methods: {
+    ...mapActions(useUserStore, ["fetchUsers"]),
+    triggerTransfer(e: any) {
+      if (this.selected == undefined) return;
+      this.status = "loading";
+      this.$http
+        .put(`/user/transferOwner`, {
+          toId: this.selected.id,
+        })
+        .then(() => {
+          isAuthenticatedPromise(true).catch(() => {});
+          this.status = { status: "success" };
+          setTimeout(() => {
+            this.$router.push({ name: "account-default" });
+          }, 2000);
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

src/views/account/View.vue

@@ -3,7 +3,11 @@
     <template #sidebar>
       <SidebarTemplate mainTitle="Mein Account" topTitle="Mitgliederverwaltung" :showTopList="isOwner">
         <template v-if="isOwner" #topList>
-          <RoutingLink title="Administration" :link="{ name: 'account' }" :active="activeRouteName == 'account'" />
+          <RoutingLink
+            title="Administration"
+            :link="{ name: 'account-administration' }"
+            :active="activeRouteName == 'account-administration'"
+          />
         </template>
         <template #list>
           <RoutingLink title="Mein Account" :link="{ name: 'account-me' }" :active="activeRouteName == 'account-me'" />

src/views/admin/club/protocol/ProtocolPresence.vue

@@ -95,7 +95,7 @@ import { TrashIcon } from "@heroicons/vue/24/outline";
 import { useProtocolStore } from "@/stores/admin/protocol";
 import { useMemberStore } from "@/stores/admin/member";
 import type { MemberViewModel } from "@/viewmodels/admin/member.models";
-import { useProtocolPresenceStore } from "../../../../stores/admin/protocolPresence";
+import { useProtocolPresenceStore } from "@/stores/admin/protocolPresence";
 </script>
 
 <script lang="ts">