src/components/Header.vue

@@ -7,7 +7,11 @@
     <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 v-else :link="{ key: 'club', title: 'Zur Verwaltung' }" :disable-sub-link="true" />
+        <TopLevelLink
+          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

@@ -0,0 +1,46 @@
+<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() {},
+  },
+});
+</script>

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

@@ -0,0 +1,93 @@
+<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,19 +41,33 @@ const router = createRouter({
       ],
     },
     {
-      path: "/reset",
+      path: "/setup",
-      name: "reset",
+      name: "setup",
       component: () => import("@/views/RouterView.vue"),
+      beforeEnter: [isSetup],
       children: [
         {
           path: "",
-          name: "reset-start",
+          name: "setup-create",
-          component: () => import("@/views/reset/Start.vue"),
+          component: () => import("@/views/setup/Setup.vue"),
         },
         {
-          path: "reset",
+          path: "verify",
-          name: "reset-reset",
+          name: "setup-verify",
-          component: () => import("@/views/reset/Reset.vue"),
+          component: () => import("@/views/setup/Verify.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 }),
         },
       ],
@@ -403,6 +417,11 @@ 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

@@ -0,0 +1,34 @@
+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(invite: number): Promise<AxiosResponse<any, any>> {
+      return http.delete(`/admin/invite/${invite}`).then((result) => {
+        this.fetchInvites();
+        return result;
+      });
+    },
+  },
+});

src/viewmodels/admin/invite.models.ts

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

src/views/admin/user/Invite.vue

@@ -0,0 +1,39 @@
+<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,8 +11,10 @@
           <UserListItem v-for="user in users" :key="user.id" :user="user" />
         </div>
         <div class="flex flex-row gap-4">
-          <button primary class="!w-fit">Nutzer einladen</button>
+          <button primary class="!w-fit" @click="inviteUser">Nutzer einladen</button>
-          <button primary-outline class="!w-fit">offene Einladungen</button>
+          <RouterLink button primary-outline :to="{ name: 'admin-user-user-invites' }" class="!w-fit">
+            offene Einladungen
+          </RouterLink>
         </div>
       </div>
     </template>
@@ -20,10 +22,12 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, markRaw, defineAsyncComponent } 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>
 

src/views/invite/Verify.vue

@@ -0,0 +1,118 @@
+<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>