From 61052805aeee284b3b3e15b944dbfbc0a5bdc3e3 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Sat, 23 Nov 2024 14:25:41 +0100
Subject: [PATCH 1/2] invite base operations

---
 src/components/Header.vue                     |   6 +-
 .../admin/user/user/InviteListItem.vue        |  46 +++++++
 .../admin/user/user/InviteUserModal.vue       |  93 ++++++++++++++
 src/router/index.ts                           |  33 +++--
 src/stores/admin/invite.ts                    |  34 +++++
 src/viewmodels/admin/invite.models.ts         |   7 ++
 src/views/admin/user/Invite.vue               |  39 ++++++
 src/views/admin/user/User.vue                 |  10 +-
 src/views/invite/Verify.vue                   | 118 ++++++++++++++++++
 9 files changed, 375 insertions(+), 11 deletions(-)
 create mode 100644 src/components/admin/user/user/InviteListItem.vue
 create mode 100644 src/components/admin/user/user/InviteUserModal.vue
 create mode 100644 src/stores/admin/invite.ts
 create mode 100644 src/viewmodels/admin/invite.models.ts
 create mode 100644 src/views/admin/user/Invite.vue
 create mode 100644 src/views/invite/Verify.vue

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 1c824c6..0512b4b 100644
--- a/src/components/Header.vue
+++ b/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>
diff --git a/src/components/admin/user/user/InviteListItem.vue b/src/components/admin/user/user/InviteListItem.vue
new file mode 100644
index 0000000..f1f9f87
--- /dev/null
+++ b/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>
diff --git a/src/components/admin/user/user/InviteUserModal.vue b/src/components/admin/user/user/InviteUserModal.vue
new file mode 100644
index 0000000..fa57b2a
--- /dev/null
+++ b/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>
diff --git a/src/router/index.ts b/src/router/index.ts
index 967efe1..9377bdd 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -41,19 +41,33 @@ const router = createRouter({
       ],
     },
     {
-      path: "/reset",
-      name: "reset",
+      path: "/setup",
+      name: "setup",
       component: () => import("@/views/RouterView.vue"),
+      beforeEnter: [isSetup],
       children: [
         {
           path: "",
-          name: "reset-start",
-          component: () => import("@/views/reset/Start.vue"),
+          name: "setup-create",
+          component: () => import("@/views/setup/Setup.vue"),
         },
         {
-          path: "reset",
-          name: "reset-reset",
-          component: () => import("@/views/reset/Reset.vue"),
+          path: "verify",
+          name: "setup-verify",
+          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",
diff --git a/src/stores/admin/invite.ts b/src/stores/admin/invite.ts
new file mode 100644
index 0000000..0600dc9
--- /dev/null
+++ b/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;
+      });
+    },
+  },
+});
diff --git a/src/viewmodels/admin/invite.models.ts b/src/viewmodels/admin/invite.models.ts
new file mode 100644
index 0000000..c6c860f
--- /dev/null
+++ b/src/viewmodels/admin/invite.models.ts
@@ -0,0 +1,7 @@
+export interface InviteViewModel {
+  id: number;
+  username: string;
+  mail: string;
+  firstname: string;
+  lastname: string;
+}
diff --git a/src/views/admin/user/Invite.vue b/src/views/admin/user/Invite.vue
new file mode 100644
index 0000000..a1f6fb3
--- /dev/null
+++ b/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>
diff --git a/src/views/admin/user/User.vue b/src/views/admin/user/User.vue
index 3b73671..6d1df32 100644
--- a/src/views/admin/user/User.vue
+++ b/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-outline class="!w-fit">offene Einladungen</button>
+          <button primary class="!w-fit" @click="inviteUser">Nutzer einladen</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>
 
diff --git a/src/views/invite/Verify.vue b/src/views/invite/Verify.vue
new file mode 100644
index 0000000..2a74ef8
--- /dev/null
+++ b/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>
-- 
2.45.2


From ed50d8e446aad1a551f0097549bef42f1f4dd7f5 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Sun, 24 Nov 2024 12:36:03 +0100
Subject: [PATCH 2/2] invite management

---
 src/components/admin/user/user/InviteListItem.vue | 4 +++-
 src/stores/admin/invite.ts                        | 4 ++--
 src/views/admin/user/User.vue                     | 4 ++++
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/admin/user/user/InviteListItem.vue b/src/components/admin/user/user/InviteListItem.vue
index f1f9f87..b7573d7 100644
--- a/src/components/admin/user/user/InviteListItem.vue
+++ b/src/components/admin/user/user/InviteListItem.vue
@@ -40,7 +40,9 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useInviteStore, ["deleteInvite"]),
-    triggerDeleteInvite() {},
+    triggerDeleteInvite() {
+      this.deleteInvite(this.invite.mail);
+    },
   },
 });
 </script>
diff --git a/src/stores/admin/invite.ts b/src/stores/admin/invite.ts
index 0600dc9..80526b4 100644
--- a/src/stores/admin/invite.ts
+++ b/src/stores/admin/invite.ts
@@ -24,8 +24,8 @@ export const useInviteStore = defineStore("invite", {
           this.loading = "failed";
         });
     },
-    deleteInvite(invite: number): Promise<AxiosResponse<any, any>> {
-      return http.delete(`/admin/invite/${invite}`).then((result) => {
+    deleteInvite(mail: string): Promise<AxiosResponse<any, any>> {
+      return http.delete(`/admin/invite/${mail}`).then((result) => {
         this.fetchInvites();
         return result;
       });
diff --git a/src/views/admin/user/User.vue b/src/views/admin/user/User.vue
index 6d1df32..9650cfd 100644
--- a/src/views/admin/user/User.vue
+++ b/src/views/admin/user/User.vue
@@ -41,6 +41,10 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useUserStore, ["fetchUsers"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    inviteUser() {
+      this.openModal(markRaw(defineAsyncComponent(() => import("@/components/admin/user/user/InviteUserModal.vue"))));
+    },
   },
 });
 </script>
-- 
2.45.2