src/router/index.ts

@@ -459,9 +459,17 @@ const router = createRouter({
         {
           path: "",
           name: "account-default",
-          component: () => import("@/views/admin/ViewSelect.vue"),
+          component: () => import("@/views/account/ViewSelect.vue"),
-          meta: { type: "read", section: "club" },
+        },
-          beforeEnter: [abilityAndNavUpdate],
+        {
+          path: "me",
+          name: "account-me",
+          component: () => import("@/views/account/ViewSelect.vue"),
+        },
+        {
+          path: "logindata",
+          name: "account-logindata",
+          component: () => import("@/views/account/LoginData.vue"),
         },
         {
           path: ":pathMatch(.*)*",

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,9 +35,17 @@ import { useNavigationStore } from "@/stores/admin/navigation";
 <script lang="ts">
 export default defineComponent({
   props: {
-    header: {
+    overviewFullOverwrite: {
       type: String,
-      default: null,
+      default: "",
+    },
+    overviewOverwrite: {
+      type: String,
+      default: "",
+    },
+    useStagedOverviewLink: {
+      type: Boolean,
+      default: true,
     },
     showBack: {
       type: Boolean,

src/views/account/LoginData.vue

@@ -0,0 +1,112 @@
+<template>
+  <MainTemplate>
+    <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>

src/views/account/View.vue

@@ -7,7 +7,11 @@
         </template>
         <template #list>
           <RoutingLink title="Mein Account" :link="{ name: 'account' }" :active="activeRouteName == 'account'" />
-          <RoutingLink title="Anmeldedaten" :link="{ name: 'account' }" :active="activeRouteName == 'account'" />
+          <RoutingLink
+            title="Anmeldedaten"
+            :link="{ name: 'account-logindata' }"
+            :active="activeRouteName == 'account-logindata'"
+          />
         </template>
       </SidebarTemplate>
     </template>

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