invite base operations

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-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>
 

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>