src/components/Header.vue

@@ -7,11 +7,7 @@
     <div class="flex flex-row gap-2 items-center">
       <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
+        <TopLevelLink v-else :link="{ key: 'club', title: 'Zur Verwaltung' }" :disable-sub-link="true" />
-          v-else-if="routeName.includes('account')"
-          :link="{ key: 'club', title: 'Zur Verwaltung' }"
-          :disable-sub-link="true"
-        />
       </div>
       <UserMenu v-if="authCheck" />
     </div>

src/components/admin/user/user/InviteListItem.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
-    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
-      <p>{{ invite.firstname }} {{ invite.lastname }}</p>
-      <div class="flex flex-row">
-        <div v-if="can('delete', 'user', 'user')" @click="triggerDeleteInvite">
-          <TrashIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
-        </div>
-      </div>
-    </div>
-    <div class="flex flex-col p-2">
-      <div class="flex flex-row gap-2">
-        <p class="min-w-16">Benutzer:</p>
-        <p class="grow overflow-hidden">{{ invite.username }}</p>
-      </div>
-      <div class="flex flex-row gap-2">
-        <p class="min-w-16">Mail:</p>
-        <p class="grow overflow-hidden">{{ invite.mail }}</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { defineComponent, type PropType } from "vue";
-import { mapState, mapActions } from "pinia";
-import type { InviteUserModal } from "@/viewmodels/admin/invite.models";
-import { PencilIcon, UserGroupIcon, WrenchScrewdriverIcon, TrashIcon } from "@heroicons/vue/24/outline";
-import { useAbilityStore } from "@/stores/ability";
-import { useInviteStore } from "@/stores/admin/invite";
-</script>
-
-<script lang="ts">
-export default defineComponent({
-  props: {
-    invite: { type: Object as PropType<InviteUserModal>, default: {} },
-  },
-  computed: {
-    ...mapState(useAbilityStore, ["can"]),
-  },
-  methods: {
-    ...mapActions(useInviteStore, ["deleteInvite"]),
-    triggerDeleteInvite() {
-      this.deleteInvite(this.invite.mail);
-    },
-  },
-});
-</script>

src/components/admin/user/user/InviteUserModal.vue

@@ -1,93 +0,0 @@
-<template>
-  <div class="w-full md:max-w-md">
-    <div class="flex flex-col items-center">
-      <p class="text-xl font-medium">Nutzer einladen?</p>
-    </div>
-    <br />
-
-    <form class="flex flex-col gap-4 py-2" @submit.prevent="invite">
-      <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 primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">
-          Nutzer einladen
-        </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>
-
-    <div class="flex flex-row justify-end">
-      <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { defineComponent } from "vue";
-import { mapState, mapActions } from "pinia";
-import { useModalStore } from "@/stores/modal";
-import Spinner from "@/components/Spinner.vue";
-import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
-import FailureXMark from "@/components/FailureXMark.vue";
-import { useUserStore } from "@/stores/admin/user";
-</script>
-
-<script lang="ts">
-export default defineComponent({
-  data() {
-    return {
-      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
-      timeout: undefined as any,
-    };
-  },
-  beforeUnmount() {
-    try {
-      clearTimeout(this.timeout);
-    } catch (error) {}
-  },
-  computed: {
-    ...mapState(useModalStore, ["data"]),
-  },
-  methods: {
-    ...mapActions(useModalStore, ["closeModal"]),
-    invite(e: any) {
-      let formData = e.target.elements;
-      this.status = "loading";
-      this.$http
-        .post(`/admin/invite`, {
-          username: formData.username.value,
-          mail: formData.mail.value,
-          firstname: formData.firstname.value,
-          lastname: formData.lastname.value,
-        })
-        .then((result) => {
-          this.status = { status: "success" };
-        })
-        .catch((err) => {
-          this.status = { status: "failed", reason: err.response.data };
-        })
-        .finally(() => {
-          setTimeout(() => {
-            this.closeModal();
-          }, 2000);
-        });
-    },
-  },
-});
-</script>

src/router/index.ts

@@ -41,33 +41,19 @@ const router = createRouter({
       ],
     },
     {
-      path: "/setup",
+      path: "/reset",
-      name: "setup",
+      name: "reset",
       component: () => import("@/views/RouterView.vue"),
-      beforeEnter: [isSetup],
       children: [
         {
           path: "",
-          name: "setup-create",
+          name: "reset-start",
-          component: () => import("@/views/setup/Setup.vue"),
+          component: () => import("@/views/reset/Start.vue"),
         },
         {
-          path: "verify",
+          path: "reset",
-          name: "setup-verify",
+          name: "reset-reset",
-          component: () => import("@/views/setup/Verify.vue"),
+          component: () => import("@/views/reset/Reset.vue"),
-          props: (route) => ({ mail: route.query.mail, token: route.query.token }),
-        },
-      ],
-    },
-    {
-      path: "/invite",
-      name: "invite",
-      component: () => import("@/views/RouterView.vue"),
-      children: [
-        {
-          path: "verify",
-          name: "invite-verify",
-          component: () => import("@/views/invite/Verify.vue"),
           props: (route) => ({ mail: route.query.mail, token: route.query.token }),
         },
       ],
@@ -417,11 +403,6 @@ const router = createRouter({
                   name: "admin-user-user",
                   component: () => import("@/views/admin/user/User.vue"),
                 },
-                {
-                  path: "invites",
-                  name: "admin-user-user-invites",
-                  component: () => import("@/views/admin/user/Invite.vue"),
-                },
                 {
                   path: ":id/edit",
                   name: "admin-user-user-edit",

src/stores/admin/invite.ts

@@ -1,34 +0,0 @@
-import { defineStore } from "pinia";
-import type { InviteViewModel } from "@/viewmodels/admin/invite.models";
-import { http } from "@/serverCom";
-import type { PermissionObject } from "@/types/permissionTypes";
-import type { AxiosResponse } from "axios";
-
-export const useInviteStore = defineStore("invite", {
-  state: () => {
-    return {
-      invites: [] as Array<InviteViewModel>,
-      loading: "loading" as "loading" | "fetched" | "failed",
-    };
-  },
-  actions: {
-    fetchInvites() {
-      this.loading = "loading";
-      http
-        .get("/admin/invite")
-        .then((result) => {
-          this.invites = result.data;
-          this.loading = "fetched";
-        })
-        .catch((err) => {
-          this.loading = "failed";
-        });
-    },
-    deleteInvite(mail: string): Promise<AxiosResponse<any, any>> {
-      return http.delete(`/admin/invite/${mail}`).then((result) => {
-        this.fetchInvites();
-        return result;
-      });
-    },
-  },
-});

src/viewmodels/admin/invite.models.ts

@@ -1,7 +0,0 @@
-export interface InviteViewModel {
-  id: number;
-  username: string;
-  mail: string;
-  firstname: string;
-  lastname: string;
-}

src/views/admin/user/Invite.vue

@@ -1,39 +0,0 @@
-<template>
-  <MainTemplate>
-    <template #headerInsert>
-      <RouterLink :to="{ name: 'admin-user-user' }" class="text-primary">zurück zur Nutzerliste</RouterLink>
-    </template>
-    <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">offene Einladungen</h1>
-      </div>
-    </template>
-    <template #diffMain>
-      <div class="flex flex-col gap-2 grow overflow-y-scroll px-7">
-        <InviteListItem v-for="invite in invites" :key="invite.id" :invite="invite" />
-      </div>
-    </template>
-  </MainTemplate>
-</template>
-
-<script setup lang="ts">
-import { defineComponent, markRaw, defineAsyncComponent } from "vue";
-import { mapState, mapActions } from "pinia";
-import MainTemplate from "@/templates/Main.vue";
-import { useInviteStore } from "@/stores/admin/invite";
-import InviteListItem from "@/components/admin/user/user/InviteListItem.vue";
-</script>
-
-<script lang="ts">
-export default defineComponent({
-  computed: {
-    ...mapState(useInviteStore, ["invites"]),
-  },
-  mounted() {
-    this.fetchInvites();
-  },
-  methods: {
-    ...mapActions(useInviteStore, ["fetchInvites"]),
-  },
-});
-</script>

src/views/admin/user/User.vue

@@ -11,10 +11,8 @@
           <UserListItem v-for="user in users" :key="user.id" :user="user" />
         </div>
         <div class="flex flex-row gap-4">
-          <button primary class="!w-fit" @click="inviteUser">Nutzer einladen</button>
+          <button primary class="!w-fit">Nutzer einladen</button>
-          <RouterLink button primary-outline :to="{ name: 'admin-user-user-invites' }" class="!w-fit">
+          <button primary-outline class="!w-fit">offene Einladungen</button>
-            offene Einladungen
-          </RouterLink>
         </div>
       </div>
     </template>
@@ -22,12 +20,10 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent, markRaw, defineAsyncComponent } from "vue";
+import { defineComponent } from "vue";
-import { RouterLink } from "vue-router";
 import { mapState, mapActions } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import { useUserStore } from "@/stores/admin/user";
-import { useModalStore } from "@/stores/modal";
 import UserListItem from "@/components/admin/user/user/UserListItem.vue";
 </script>
 
@@ -41,10 +37,6 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useUserStore, ["fetchUsers"]),
-    ...mapActions(useModalStore, ["openModal"]),
-    inviteUser() {
-      this.openModal(markRaw(defineAsyncComponent(() => import("@/components/admin/user/user/InviteUserModal.vue"))));
-    },
   },
 });
 </script>

src/views/invite/Verify.vue

@@ -1,118 +0,0 @@
-<template>
-  <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="flex flex-col items-center gap-4">
-        <img src="/FFW-Logo.svg" alt="LOGO" class="h-36" />
-        <h2 class="text-center text-4xl font-extrabold text-gray-900">Einrichtung</h2>
-      </div>
-
-      <div v-if="verification == 'loading'" class="flex flex-col gap-2 items-center">
-        <p class="w-fit">Einladungslink wird verifiziert</p>
-        <Spinner class="my-auto" />
-      </div>
-      <div v-else-if="verification == 'failed'" class="flex flex-col gap-2 items-center">
-        <p class="w-fit">Einladungslink nicht gültig - Melde dich bei einem Admin.</p>
-      </div>
-      <form v-else class="flex flex-col gap-2" @submit.prevent="invite">
-        <p class="text-center">Dein Nutzername: {{ username }}</p>
-
-        <img :src="image" alt="totp" class="w-56 h-56 self-center" />
-
-        <TextCopy :copyText="otp" />
-
-        <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="inviteStatus == 'loading' || inviteStatus == 'success'">
-            Einladung fertigstellen
-          </button>
-          <Spinner v-if="inviteStatus == 'loading'" class="my-auto" />
-          <SuccessCheckmark v-else-if="inviteStatus == 'success'" />
-          <FailureXMark v-else-if="inviteStatus == 'failed'" />
-        </div>
-        <p v-if="inviteError" class="text-center">{{ inviteError }}</p>
-      </form>
-
-      <FormBottomBar />
-    </div>
-  </div>
-</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 { RouterLink } from "vue-router";
-import { ClipboardIcon } from "@heroicons/vue/24/outline";
-import FormBottomBar from "@/components/FormBottomBar.vue";
-import TextCopy from "@/components/TextCopy.vue";
-</script>
-
-<script lang="ts">
-export default defineComponent({
-  props: {
-    token: String,
-    mail: String,
-  },
-  data() {
-    return {
-      verification: "loading" as "success" | "loading" | "failed",
-      image: undefined as undefined | string,
-      otp: undefined as undefined | string,
-      username: "" as string,
-      inviteStatus: undefined as undefined | "loading" | "success" | "failed",
-      inviteError: "" as string,
-    };
-  },
-  mounted() {
-    this.$http
-      .post(`/invite/verify`, {
-        token: this.token,
-        mail: this.mail,
-      })
-      .then((result) => {
-        setTimeout(() => {
-          this.verification = "success";
-          this.image = result.data.dataUrl;
-          this.otp = result.data.otp;
-          this.username = result.data.username;
-        }, 1000);
-      })
-      .catch((err) => {
-        setTimeout(() => {
-          this.verification = "failed";
-        }, 1000);
-      });
-  },
-  methods: {
-    invite(e: any) {
-      let formData = e.target.elements;
-      this.inviteStatus = "loading";
-      this.inviteError = "";
-      this.$http
-        .put(`/invite`, {
-          token: this.token,
-          mail: this.mail,
-          totp: formData.totp.value,
-        })
-        .then((result) => {
-          this.inviteStatus = "success";
-          localStorage.setItem("accessToken", result.data.accessToken);
-          localStorage.setItem("refreshToken", result.data.refreshToken);
-          setTimeout(() => {
-            this.$router.push(`/admin`);
-          }, 1000);
-        })
-        .catch((err) => {
-          this.inviteStatus = "failed";
-          this.inviteError = err.response.data;
-        });
-    },
-  },
-});
-</script>