Merge pull request 'reset totp' (#11) from #9-lost-totp into main

Reviewed-on: Ehrenamt/member-administration-ui#11

src/components/FormBottomBar.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="flex flex-col text-gray-400 text-sm mt-4 items-center">
+    <div class="flex flex-row gap-2 justify-center">
+      <a ref="https://jk-effects.com/privacy" target="_blank">Datenschutz</a>
+      <a ref="https://jk-effects.com/imprint" target="_blank">Impressum</a>
+    </div>
+    <a href="https://jk-effects.com" target="_blank"> &copy; Admin-Portal by JK Effects </a>
+  </div>
+</template>

src/components/TextCopy.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="flex relative">
+    <input type="text" :value="copyText" />
+    <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>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import { ClipboardIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    copyText: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      timeoutCopy: undefined as any,
+      copySuccess: false,
+    };
+  },
+  methods: {
+    copyToClipboard() {
+      navigator.clipboard.writeText(this.otp ?? "");
+      this.copySuccess = true;
+      this.timputCopy = setTimeout(() => {
+        this.copySuccess = false;
+      }, 2000);
+    },
+  },
+});
+</script>

src/router/index.ts

@@ -40,6 +40,24 @@ const router = createRouter({
         },
       ],
     },
+    {
+      path: "/reset",
+      name: "reset",
+      component: () => import("@/views/RouterView.vue"),
+      children: [
+        {
+          path: "",
+          name: "reset-start",
+          component: () => import("@/views/reset/Start.vue"),
+        },
+        {
+          path: "reset",
+          name: "reset-reset",
+          component: () => import("@/views/reset/Reset.vue"),
+          props: (route) => ({ mail: route.query.mail, token: route.query.token }),
+        },
+      ],
+    },
     {
       path: "/admin",
       name: "admin",

src/views/Login.vue

@@ -3,7 +3,7 @@
     <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-5xl font-extrabold text-gray-900">Mitgliederverwaltung</h2>
+        <h2 class="text-center text-4xl font-extrabold text-gray-900">Mitgliederverwaltung</h2>
       </div>
 
       <form class="flex flex-col gap-2" @submit.prevent="login">
@@ -23,6 +23,7 @@
             />
           </div>
         </div>
+        <RouterLink :to="{ name: 'reset-start' }" class="w-fit self-end text-primary">TOTP verloren</RouterLink>
 
         <div class="flex flex-row gap-2">
           <button type="submit" primary :disabled="loginStatus == 'loading' || loginStatus == 'success'">
@@ -35,13 +36,7 @@
         <p v-if="loginError" class="text-center">{{ loginError }}</p>
       </form>
 
-      <div class="flex flex-col text-gray-400 text-sm mt-4 items-center">
+      <FormBottomBar />
-        <div class="flex flex-row gap-2 justify-center">
-          <a href="#">Datenschutz</a>
-          <a href="#">Impressum</a>
-        </div>
-        <a href="#"> &copy; Admin-Portal by JK Effects </a>
-      </div>
     </div>
   </div>
 </template>
@@ -52,6 +47,7 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { resetAllPiniaStores } from "@/helpers/piniaReset";
+import FormBottomBar from "@/components/FormBottomBar.vue";
 </script>
 
 <script lang="ts">

src/views/reset/Reset.vue

@@ -0,0 +1,115 @@
+<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">TOTP zurücksetzen</h2>
+      </div>
+
+      <div v-if="verification == 'loading'" class="flex flex-col gap-2 items-center">
+        <p class="w-fit">Rücksetz-Link 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">Rücksetz-Link nicht gültig</p>
+        <RouterLink to="/reset" class="text-primary">Zum zurücksetzen Start</RouterLink>
+      </div>
+      <form v-else class="flex flex-col gap-2" @submit.prevent="reset">
+        <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="resetStatus == 'loading' || resetStatus == 'success'">
+            TOTP zurücksetzen
+          </button>
+          <Spinner v-if="resetStatus == 'loading'" class="my-auto" />
+          <SuccessCheckmark v-else-if="resetStatus == 'success'" />
+          <FailureXMark v-else-if="resetStatus == 'failed'" />
+        </div>
+        <p v-if="resetError" class="text-center">{{ resetError }}</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,
+      resetStatus: undefined as undefined | "loading" | "success" | "failed",
+      resetError: "" as string,
+    };
+  },
+  mounted() {
+    this.$http
+      .post(`/reset/verify`, {
+        token: this.token,
+        mail: this.mail,
+      })
+      .then((result) => {
+        setTimeout(() => {
+          this.verification = "success";
+          this.image = result.data.dataUrl;
+          this.otp = result.data.otp;
+        }, 1000);
+      })
+      .catch((err) => {
+        setTimeout(() => {
+          this.verification = "failed";
+        }, 1000);
+      });
+  },
+  methods: {
+    reset(e: any) {
+      let formData = e.target.elements;
+      this.resetStatus = "loading";
+      this.resetError = "";
+      this.$http
+        .put(`/reset`, {
+          token: this.token,
+          mail: this.mail,
+          totp: formData.totp.value,
+        })
+        .then((result) => {
+          this.resetStatus = "success";
+          localStorage.setItem("accessToken", result.data.accessToken);
+          localStorage.setItem("refreshToken", result.data.refreshToken);
+          setTimeout(() => {
+            this.$router.push(`/admin`);
+          }, 1000);
+        })
+        .catch((err) => {
+          this.resetStatus = "failed";
+          this.resetError = err.response.data;
+        });
+    },
+  },
+});
+</script>

src/views/reset/Start.vue

@@ -0,0 +1,69 @@
+<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">TOTP zurücksetzen</h2>
+      </div>
+
+      <form class="flex flex-col gap-2" @submit.prevent="reset">
+        <div class="-space-y-px">
+          <div>
+            <input id="username" name="username" type="text" required placeholder="Benutzer" />
+          </div>
+        </div>
+        <RouterLink to="/" class="w-fit self-end text-primary">zum Login</RouterLink>
+
+        <div class="flex flex-row gap-2">
+          <button type="submit" primary :disabled="resetStatus == 'loading' || resetStatus == 'success'">
+            TOTP zurücksetzen
+          </button>
+          <Spinner v-if="resetStatus == 'loading'" class="my-auto" />
+          <SuccessCheckmark v-else-if="resetStatus == 'success'" />
+          <FailureXMark v-else-if="resetStatus == 'failed'" />
+        </div>
+        <p v-if="resetMessage" class="text-center">{{ resetMessage }}</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 FormBottomBar from "@/components/FormBottomBar.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      resetStatus: undefined as undefined | "loading" | "success" | "failed",
+      resetMessage: "" as string,
+    };
+  },
+  methods: {
+    reset(e: any) {
+      let formData = e.target.elements;
+      this.resetStatus = "loading";
+      this.resetMessage = "";
+      this.$http
+        .post(`/reset`, {
+          username: formData.username.value,
+        })
+        .then((result) => {
+          this.resetStatus = "success";
+          this.resetMessage = "Sie haben einen Verifizierungslink per Mail erhalten.";
+        })
+        .catch((err) => {
+          this.resetStatus = "failed";
+          this.resetMessage = err.response.data;
+        });
+    },
+  },
+});
+</script>

src/views/setup/Setup.vue

@@ -3,7 +3,7 @@
     <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-5xl font-extrabold text-gray-900">Einrichtung</h2>
+        <h2 class="text-center text-4xl font-extrabold text-gray-900">Einrichtung</h2>
       </div>
 
       <form class="flex flex-col gap-2" @submit.prevent="setup">
@@ -33,13 +33,7 @@
         <p v-if="setupMessage" class="text-center">{{ setupMessage }}</p>
       </form>
 
-      <div class="flex flex-col text-gray-400 text-sm mt-4 items-center">
+      <FormBottomBar />
-        <div class="flex flex-row gap-2 justify-center">
-          <a href="#">Datenschutz</a>
-          <a href="#">Impressum</a>
-        </div>
-        <a href="#"> &copy; Admin-Portal by JK Effects </a>
-      </div>
     </div>
   </div>
 </template>
@@ -49,6 +43,7 @@ import { defineComponent } from "vue";
 import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
+import FormBottomBar from "@/components/FormBottomBar.vue";
 </script>
 
 <script lang="ts">

src/views/setup/Verify.vue

@@ -3,7 +3,7 @@
     <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-5xl font-extrabold text-gray-900">Einrichtung</h2>
+        <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">
@@ -46,13 +46,7 @@
         <RouterLink to="/setup" class="text-primary self-end">Zum Einrichtungsstart</RouterLink>
       </form>
 
-      <div class="flex flex-col text-gray-400 text-sm mt-4 items-center">
+      <FormBottomBar />
-        <div class="flex flex-row gap-2 justify-center">
-          <a href="#">Datenschutz</a>
-          <a href="#">Impressum</a>
-        </div>
-        <a href="#"> &copy; Admin-Portal by JK Effects </a>
-      </div>
     </div>
   </div>
 </template>
@@ -64,6 +58,7 @@ 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";
 </script>
 
 <script lang="ts">