2024-11-21 15:00:44 +00:00
22 changed files with 622 additions and 43 deletions
--- a/src/App.vue
+++ b/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>
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@ -1,10 +1,17 @@
 <template>
  <footer
-    v-if="authCheck && routeName.includes('admin')"
+    v-if="authCheck && (routeName.includes('admin') || routeName.includes('account'))"
    class="md:hidden flex flex-row h-16 min-h-16 justify-center md:justify-normal p-1 bg-white"
  >
    <div class="w-full flex flex-row gap-2 h-full align-middle">
-      <TopLevelLink v-for="item in topLevel" :key="item.key" :link="item" :disableSubLink="true" />
+      <TopLevelLink
+        v-if="routeName.includes('admin')"
+        v-for="item in topLevel"
+        :key="item.key"
+        :link="item"
+        :disableSubLink="true"
+      />
+      <TopLevelLink v-else :link="{ key: 'club', title: 'Zur Verwaltung' }" :disableSubLink="true" />
    </div>
  </footer>
 </template>
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@ -5,8 +5,9 @@
      <h1 v-if="false" class="font-bold text-3xl w-fit whitespace-nowrap">Mitgliederverwaltung</h1>
    </RouterLink>
    <div class="flex flex-row gap-2 items-center">
-      <div v-if="authCheck && routeName.includes('admin')" class="hidden md:flex flex-row gap-2 h-full align-middle">
-        <TopLevelLink v-for="item in topLevel" :key="item.key" :link="item" />
+      <div v-if="authCheck" class="hidden md:flex flex-row gap-2 h-full align-middle">
+        <TopLevelLink v-if="routeName.includes('admin')" v-for="item in topLevel" :key="item.key" :link="item" />
+        <TopLevelLink v-else :link="{ key: 'club', title: 'Zur Verwaltung' }" :disable-sub-link="true" />
      </div>
      <UserMenu v-if="authCheck" />
    </div>
--- a/src/components/UserMenu.vue
+++ b/src/components/UserMenu.vue
@ -26,7 +26,9 @@
            </RouterLink>
          </MenuItem>
          <MenuItem>
-            <button primary-outline @click="logoutAccount">ausloggen</button>
+            <span>
+              <button primary-outline @click="logoutAccount">ausloggen</button>
+            </span>
          </MenuItem>
        </div>
      </MenuItems>
--- a/src/components/admin/Permission.vue
+++ b/src/components/admin/Permission.vue
@ -1,5 +1,8 @@
 <template>
-  <div class="flex flex-col gap-2 max-w-2xl mx-auto w-full select-none">
+  <div
+    class="flex flex-col gap-2 max-w-2xl mx-auto w-full select-none"
+    :class="disableEdit ? ' pointer-events-none opacity-60 bg-gray-100/50' : ''"
+  >
    <div class="flex flex-row gap-2 h-fit w-full border border-gray-300 rounded-md p-2">
      <input type="checkbox" name="admin" id="admin" class="cursor-pointer" :checked="isAdmin" @change="toggleAdmin" />
      <label for="admin" class="cursor-pointer">Administratorrecht</label>
@ -8,7 +11,7 @@
      v-for="section in sections"
      :key="section"
      class="flex flex-col gap-2 h-fit w-full border border-primary rounded-md"
-      :class="isAdmin ? ' pointer-events-none opacity-60 bg-gray-100' : ''"
+      :class="isAdmin && !disableEdit ? ' pointer-events-none opacity-60 bg-gray-100' : ''"
    >
      <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
        <p>Abschnitt: {{ section }}</p>
@ -65,7 +68,7 @@
        </div>
      </div>
    </div>
-    <div class="flex flex-row gap-2 self-end pt-4">
+    <div v-if="!disableEdit" class="flex flex-row gap-2 self-end pt-4">
      <button primary-outline class="!w-fit" @click="reset" :disabled="canSaveOrReset">verwerfen</button>
      <button primary class="!w-fit" @click="submit" :disabled="status == 'loading' || canSaveOrReset">
        speichern
@ -109,6 +112,10 @@ export default defineComponent({
      type: [Object, String, null] as PropType<null | "loading" | { status: "success" | "failed"; message?: string }>,
      default: null,
    },
+    disableEdit: {
+      type: Boolean,
+      default: false,
+    },
  },
  watch: {
    permissions() {
--- a/src/components/admin/RoutingLink.vue
+++ b/src/components/admin/RoutingLink.vue
@ -1,35 +1,36 @@
 <template>
-  <RouterLink v-if="link" :to="{ name: `admin-${activeNavigation}-${link.key}` }">
+  <RouterLink v-if="link" :to="link">
    <p
      class="cursor-pointer w-full px-2 py-3"
-      :class="
-        activeLink == link.key
-          ? 'rounded-r-lg bg-red-200 border-l-4 border-l-primary'
-          : 'pl-3 hover:bg-red-200 rounded-lg'
-      "
+      :class="active ? 'rounded-r-lg bg-red-200 border-l-4 border-l-primary' : 'pl-3 hover:bg-red-200 rounded-lg'"
    >
-      {{ link.title }}
+      {{ title }}
    </p>
  </RouterLink>
 </template>

 <script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { RouterLink } from "vue-router";
 import { mapState, mapActions } from "pinia";
 import { useNavigationStore, type navigationLinkModel } from "@/stores/admin/navigation";
 </script>

 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
-import { RouterLink } from "vue-router";
 export default defineComponent({
  props: {
-    link: {
-      type: Object as PropType<navigationLinkModel>,
-      default: null,
+    title: {
+      type: String,
+      default: "LINK",
+    },
+    link: {
+      type: [String, Object as PropType<{ name: string }>],
+      default: "/",
+    },
+    active: {
+      type: Boolean,
+      default: false,
    },
-  },
-  computed: {
-    ...mapState(useNavigationStore, ["activeLink", "activeNavigation"]),
  },
 });
 </script>
--- a/src/main.css
+++ b/src/main.css
@ -56,7 +56,7 @@ body {
  @apply w-full h-full overflow-hidden flex flex-col;
 }

-button:not([headlessui]):not([id*="headlessui"]):not([class*="headlessui"]):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;
 }
--- a/src/router/adminGuard.ts
+++ b/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);
+  }
+}
--- a/src/router/authGuards.ts
+++ b/src/router/authGuards.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");
--- a/src/router/index.ts
+++ b/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";
@ -450,6 +450,44 @@ const router = createRouter({
        },
      ],
    },
+    {
+      path: "/account",
+      name: "account",
+      component: () => import("@/views/account/View.vue"),
+      beforeEnter: [isAuthenticated],
+      children: [
+        {
+          path: "",
+          name: "account-default",
+          component: () => import("@/views/account/ViewSelect.vue"),
+        },
+        {
+          path: "me",
+          name: "account-me",
+          component: () => import("@/views/account/Me.vue"),
+        },
+        {
+          path: "logindata",
+          name: "account-logindata",
+          component: () => import("@/views/account/LoginData.vue"),
+        },
+        {
+          path: "permission",
+          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",
+          component: () => import("@/views/notFound.vue"),
+        },
+      ],
+    },
    {
      path: "/nopermissions",
      name: "nopermissions",
--- a/src/serverCom.ts
+++ b/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";
--- a/src/stores/admin/navigation.ts
+++ b/src/stores/admin/navigation.ts
@ -88,7 +88,7 @@ export const useNavigationStore = defineStore("navigation", {
          main: [
            ...(abilityStore.can("read", "club", "member") ? [{ key: "member", title: "Mitglieder" }] : []),
            ...(abilityStore.can("read", "club", "calendar") ? [{ key: "calendar", title: "Kalender" }] : []),
-            ...(abilityStore.can("read", "club", "protocoll") ? [{ key: "protocol", title: "Protokolle" }] : []),
+            ...(abilityStore.can("read", "club", "protocol") ? [{ key: "protocol", title: "Protokolle" }] : []),
            ...(abilityStore.can("read", "club", "newsletter") ? [{ key: "newsletter", title: "Newsletter" }] : []),
          ],
        },
--- a/src/templates/Main.vue
+++ b/src/templates/Main.vue
@ -2,7 +2,11 @@
  <div v-if="!defaultRoute && showBack" class="flex md:hidden flex-row items-baseline">
    <RouterLink
      v-if="!defaultRoute && showBack"
-      :to="{ name: `${rootRoute}-${activeNavigation}-default` }"
+      :to="{
+        name:
+          overviewFullOverwrite ??
+          `${rootRoute}${useStagedOverviewLink ? '-' + (overviewOverwrite ?? activeNavigation) : ''}-default`,
+      }"
      class="mid:hidden text-primary"
    >
      zur Übersicht
@ -31,10 +35,18 @@ import { useNavigationStore } from "@/stores/admin/navigation";
 <script lang="ts">
 export default defineComponent({
  props: {
-    header: {
+    overviewFullOverwrite: {
      type: String,
      default: null,
    },
+    overviewOverwrite: {
+      type: String,
+      default: null,
+    },
+    useStagedOverviewLink: {
+      type: Boolean,
+      default: true,
+    },
    showBack: {
      type: Boolean,
      default: true,
--- a/src/views/account/Administration.vue
+++ b/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>
--- a/src/views/account/LoginData.vue
+++ b/src/views/account/LoginData.vue
@ -0,0 +1,112 @@
+<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">Meine Anmeldedaten</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden">
+        <div class="flex flex-col gap-2">
+          <img :src="image" alt="totp" class="w-56 h-56 self-center" />
+
+          <div class="flex relative">
+            <input type="text" :value="otp" />
+            <ClipboardIcon
+              class="w-5 h-5 p-2 box-content absolute right-1 top-1/2 -translate-y-1/2 bg-white cursor-pointer"
+              @click="copyToClipboard"
+            />
+            <div v-if="copySuccess" class="absolute w-5 h-5 right-3 top-[10px]">
+              <SuccessCheckmark />
+            </div>
+          </div>
+        </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>
+      </div>
+    </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 { ClipboardIcon } from "@heroicons/vue/24/outline";
+</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,
+      copySuccess: false,
+      timeoutCopy: undefined as any,
+    };
+  },
+  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);
+        });
+    },
+    copyToClipboard() {
+      navigator.clipboard.writeText(this.otp ?? "");
+      this.copySuccess = true;
+      this.timeoutCopy = setTimeout(() => {
+        this.copySuccess = false;
+      }, 2000);
+    },
+  },
+});
+</script>
--- a/src/views/account/Me.vue
+++ b/src/views/account/Me.vue
@ -0,0 +1,125 @@
+<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">Mein Account</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-if="user != null"
+        class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
+        @submit.prevent="triggerUpdateUser"
+      >
+        <div>
+          <label for="username">Nutzername</label>
+          <input type="text" id="username" required v-model="user.username" />
+        </div>
+        <div>
+          <label for="firstname">Vorname</label>
+          <input type="text" id="firstname" required v-model="user.firstname" />
+        </div>
+        <div>
+          <label for="lastname">Nachname</label>
+          <input type="text" id="lastname" required v-model="user.lastname" />
+        </div>
+        <div>
+          <label for="mail">Mailadresse</label>
+          <input type="email" id="mail" required v-model="user.mail" />
+        </div>
+        <div class="flex flex-row justify-end gap-2">
+          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+            verwerfen
+          </button>
+          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+            speichern
+          </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 cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isEqual";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      origin: null as null | UserViewModel,
+      user: null as null | UserViewModel,
+      timeout: null as any,
+    };
+  },
+  computed: {
+    canSaveOrReset(): boolean {
+      return isEqual(this.origin, this.user);
+    },
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    resetForm() {
+      this.user = cloneDeep(this.origin);
+    },
+    fetchItem() {
+      this.$http
+        .get(`/user/me`)
+        .then((result) => {
+          this.loading = "fetched";
+          this.user = result.data;
+          this.origin = cloneDeep(result.data);
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    triggerUpdateUser(e: any) {
+      if (this.user == null) return;
+      let formData = e.target.elements;
+      this.status = "loading";
+      this.$http
+        .patch(`/user/me`, {
+          username: formData.username.value,
+          firstname: formData.firstname.value,
+          lastname: formData.lastname.value,
+          mail: formData.mail.value,
+        })
+        .then(() => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>
--- a/src/views/account/Permission.vue
+++ b/src/views/account/Permission.vue
@ -0,0 +1,31 @@
+<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">Meine Berechtigungen</h1>
+      </div>
+    </template>
+    <template #main>
+      <Permission :permissions="permissions" :disableEdit="true" />
+    </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 Permission from "@/components/admin/Permission.vue";
+import { useAbilityStore } from "@/stores/ability";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["permissions"]),
+  },
+});
+</script>
--- a/src/views/account/View.vue
+++ b/src/views/account/View.vue
@ -0,0 +1,52 @@
+<template>
+  <SidebarLayout>
+    <template #sidebar>
+      <SidebarTemplate mainTitle="Mein Account" topTitle="Mitgliederverwaltung" :showTopList="isOwner">
+        <template v-if="isOwner" #topList>
+          <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'" />
+          <RoutingLink
+            title="Anmeldedaten"
+            :link="{ name: 'account-logindata' }"
+            :active="activeRouteName == 'account-logindata'"
+          />
+          <RoutingLink
+            title="Meine Berechtigungen"
+            :link="{ name: 'account-permission' }"
+            :active="activeRouteName == 'account-permission'"
+          />
+        </template>
+      </SidebarTemplate>
+    </template>
+    <template #main>
+      <RouterView />
+    </template>
+  </SidebarLayout>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import SidebarLayout from "@/layouts/Sidebar.vue";
+import SidebarTemplate from "@/templates/Sidebar.vue";
+import RoutingLink from "@/components/admin/RoutingLink.vue";
+import { RouterView } from "vue-router";
+import { useAbilityStore } from "@/stores/ability";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useAbilityStore, ["isOwner"]),
+    activeRouteName() {
+      return this.$route.name;
+    },
+  },
+});
+</script>
--- a/src/views/account/ViewSelect.vue
+++ b/src/views/account/ViewSelect.vue
@ -0,0 +1,3 @@
+<template>
+  <div class="w-full h-full bg-white rounded-md flex items-center justify-center">bitte auswählen</div>
+</template>
--- a/src/views/admin/View.vue
+++ b/src/views/admin/View.vue
@ -7,10 +7,22 @@
        :showTopList="activeNavigationObject.top != null"
      >
        <template #topList>
-          <RoutingLink v-for="item in activeNavigationObject.top" :key="item.key" :link="item" />
+          <RoutingLink
+            v-for="item in activeNavigationObject.top"
+            :key="item.key"
+            :title="item.title"
+            :link="{ name: `admin-${activeNavigation}-${item.key}` }"
+            :active="activeLink == item.key"
+          />
        </template>
        <template #list>
-          <RoutingLink v-for="item in activeNavigationObject.main" :key="item.key" :link="item" />
+          <RoutingLink
+            v-for="item in activeNavigationObject.main"
+            :key="item.key"
+            :title="item.title"
+            :link="{ name: `admin-${activeNavigation}-${item.key}` }"
+            :active="activeLink == item.key"
+          />
        </template>
      </SidebarTemplate>
    </template>
@ -33,14 +45,13 @@ import { RouterView } from "vue-router";

 <script lang="ts">
 export default defineComponent({
-  props: {
-    contestId: {
-      type: String,
-      default: "",
-    },
-  },
  computed: {
-    ...mapState(useNavigationStore, ["activeNavigationObject", "activeTopLevelObject", "activeLink"]),
+    ...mapState(useNavigationStore, [
+      "activeNavigationObject",
+      "activeTopLevelObject",
+      "activeLink",
+      "activeNavigation",
+    ]),
  },
  created() {
    useAbilityStore().$subscribe(() => {
--- a/src/views/admin/club/protocol/ProtocolPresence.vue
+++ b/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">
--- a/src/views/setup/Verify.vue
+++ b/src/views/setup/Verify.vue
@ -23,7 +23,9 @@
            class="w-5 h-5 p-2 box-content absolute right-1 top-1/2 -translate-y-1/2 bg-white cursor-pointer"
            @click="copyToClipboard"
          />
-          <SuccessCheckmark v-if="copySuccess" class="absolute right-3 top-[10px]" />
+          <div v-if="copySuccess" class="absolute w-5 h-5 right-3 top-[10px]">
+            <SuccessCheckmark />
+          </div>
        </div>

        <div class="-space-y-px">