enable switch to pw totp in account settings

src/components/account/ChangeToPassword.vue

@@ -0,0 +1,93 @@
+<template>
+  <form class="flex flex-col gap-2" @submit.prevent="change">
+    <div class="-space-y-px">
+      <div>
+        <input
+          id="new"
+          name="new"
+          type="password"
+          required
+          placeholder="neues Passwort"
+          autocomplete="new-password"
+          class="rounded-b-none!"
+        />
+      </div>
+      <div>
+        <input
+          id="new_rep"
+          name="new_rep"
+          type="password"
+          required
+          placeholder="neues Passwort wiederholen"
+          autocomplete="new-password"
+          class="rounded-t-none!"
+        />
+      </div>
+    </div>
+
+    <div class="flex flex-row gap-2">
+      <button type="submit" primary :disabled="changeStatus == 'loading' || changeStatus == 'success'">
+        zu Passwort wechseln
+      </button>
+      <Spinner v-if="changeStatus == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="changeStatus == 'success'" />
+      <FailureXMark v-else-if="changeStatus == 'failed'" />
+    </div>
+    <p v-if="changeError" class="text-center">{{ changeError }}</p>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } 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 TextCopy from "@/components/TextCopy.vue";
+import { hashString } from "../../helpers/crypto";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    currentRoutine: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: ["updateCurrent"],
+  data() {
+    return {
+      verification: "loading" as "success" | "loading" | "failed",
+      changeStatus: undefined as undefined | "loading" | "success" | "failed",
+      changeError: "" as string,
+    };
+  },
+  mounted() {},
+  methods: {
+    async change(e: any) {
+      let formData = e.target.elements;
+      this.changeStatus = "loading";
+      this.changeError = "";
+      this.$http
+        .post(`/user/changeToPW`, {
+          newpassword: await hashString(formData.new.value),
+        })
+        .then((result) => {
+          this.changeStatus = "success";
+        })
+        .catch((err) => {
+          this.changeStatus = "failed";
+          this.changeError = err.response.data;
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.changeStatus = undefined;
+            this.$emit("updateCurrent");
+          }, 2000);
+        });
+    },
+  },
+});
+</script>

src/components/account/ChangeToTOTP.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="flex flex-col gap-2 grow">
+    <img :src="image" alt="totp" class="w-56 h-56 self-center" />
+
+    <TextCopy :copyText="otp" />
+  </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" />
+      </div>
+    </div>
+
+    <div class="flex flex-row gap-2">
+      <button type="submit" primary :disabled="verifyStatus == 'loading' || verifyStatus == 'success'">
+        zu TOTP wechseln
+      </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>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } 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 TextCopy from "@/components/TextCopy.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    currentRoutine: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: ["updateCurrent"],
+  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,
+    };
+  },
+  mounted() {
+    this.$http
+      .get(`/user/changeToTOTP`)
+      .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/changeToTOTP`, {
+          otp: this.otp,
+          totp: formData.totp.value,
+        })
+        .then((result) => {
+          this.verifyStatus = "success";
+        })
+        .catch((err) => {
+          this.verifyStatus = "failed";
+          this.verifyError = err.response.data;
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.verifyStatus = undefined;
+            this.$emit("updateCurrent");
+          }, 2000);
+        });
+    },
+  },
+});
+</script>

src/components/account/PasswordChange.vue

@@ -0,0 +1,96 @@
+<template>
+  <form class="flex flex-col gap-2" @submit.prevent="change">
+    <div class="-space-y-px">
+      <div>
+        <input
+          id="current"
+          name="current"
+          type="password"
+          required
+          placeholder="aktuelles Passwort"
+          autocomplete="current-password"
+          class="rounded-b-none!"
+        />
+      </div>
+      <div>
+        <input
+          id="new"
+          name="new"
+          type="password"
+          required
+          placeholder="neues Passwort"
+          autocomplete="new-password"
+          class="rounded-none!"
+        />
+      </div>
+      <div>
+        <input
+          id="new_rep"
+          name="new_rep"
+          type="password"
+          required
+          placeholder="neues Passwort wiederholen"
+          autocomplete="new-password"
+          class="rounded-t-none!"
+        />
+      </div>
+    </div>
+
+    <div class="flex flex-row gap-2">
+      <button type="submit" primary :disabled="changeStatus == 'loading' || changeStatus == 'success'">
+        Passwort ändern
+      </button>
+      <Spinner v-if="changeStatus == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="changeStatus == 'success'" />
+      <FailureXMark v-else-if="changeStatus == 'failed'" />
+    </div>
+    <p v-if="changeError" class="text-center">{{ changeError }}</p>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } 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 { hashString } from "../../helpers/crypto";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      verification: "loading" as "success" | "loading" | "failed",
+      changeStatus: undefined as undefined | "loading" | "success" | "failed",
+      changeError: "" as string,
+    };
+  },
+  mounted() {},
+  methods: {
+    async change(e: any) {
+      let formData = e.target.elements;
+      this.changeStatus = "loading";
+      this.changeError = "";
+      this.$http
+        .post(`/user/changepw`, {
+          current: await hashString(formData.current.value),
+          newpassword: await hashString(formData.new.value),
+        })
+        .then((result) => {
+          this.changeStatus = "success";
+        })
+        .catch((err) => {
+          this.changeStatus = "failed";
+          this.changeError = err.response.data;
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.changeStatus = undefined;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>

src/components/account/TotpCheckAndScan.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="flex flex-col gap-2 grow">
+    <img :src="image" alt="totp" class="w-56 h-56 self-center" />
+
+    <TextCopy :copyText="otp" />
+  </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>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } 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 TextCopy from "@/components/TextCopy.vue";
+</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,
+    };
+  },
+  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);
+        });
+    },
+  },
+});
+</script>

src/views/Login.vue

@@ -102,6 +102,22 @@ export default defineComponent({
     resetAllPiniaStores();
     this.username = localStorage.getItem("username") ?? "";
     this.routine = localStorage.getItem("routine") ?? "";
+
+    if (this.username != "") {
+      this.$http
+        .post(`/auth/kickof`, {
+          username: this.username,
+        })
+        .then((result) => {
+          this.usernameStatus = "success";
+          this.routine = result.data.routine;
+          localStorage.setItem("routine", result.data.routine);
+        })
+        .catch((err) => {
+          this.usernameStatus = "failed";
+          this.loginError = err.response?.data;
+        });
+    }
   },
   methods: {
     resetRoutine() {

src/views/account/LoginData.vue

@@ -6,29 +6,41 @@
       </div>
     </template>
     <template #diffMain>
-      <div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden">
+      <Spinner v-if="loading" class="mx-auto" />
-        <div class="flex flex-col gap-2">
+      <div v-else class="flex flex-col w-full h-full gap-2 px-7 overflow-hidden">
-          <img :src="image" alt="totp" class="w-56 h-56 self-center" />
+        <div class="w-full flex flex-row gap-2 justify-center">
-
+          <p
-          <TextCopy :copyText="otp" />
+            class="w-1/2 p-0.5 pl-0 rounded-lg py-2.5 text-sm text-center font-medium leading-5 outline-hidden cursor-pointer"
+            :class="
+              tab == 'totp' ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200'
+            "
+            @click="tab = 'totp'"
+          >
+            TOTP
+          </p>
+          <p
+            class="w-1/2 p-0.5 rounded-lg py-2.5 text-sm text-center font-medium leading-5 outline-hidden cursor-pointer"
+            :class="
+              tab == 'password' ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : 'hover:bg-red-200'
+            "
+            @click="tab = 'password'"
+          >
+            Passwort
+          </p>
         </div>
-        <form class="flex flex-col gap-2" @submit.prevent="verify">
+        <ChangeToTOTP
-          <div class="-space-y-px">
+          v-if="currentRoutine == 'password' && tab == 'totp'"
-            <div>
+          :currentRoutine="currentRoutine"
-              <input id="totp" name="totp" type="text" required placeholder="TOTP prüfen" />
+          @updateCurrent="currentRoutine = 'totp'"
-            </div>
+        />
-          </div>
+        <ChangeToPassword
-
+          v-else-if="currentRoutine == 'totp' && tab == 'password'"
-          <div class="flex flex-row gap-2">
+          :currentRoutine="currentRoutine"
-            <button type="submit" primary :disabled="verifyStatus == 'loading' || verifyStatus == 'success'">
+          @updateCurrent="currentRoutine = 'password'"
-              TOTP prüfen
+        />
-            </button>
+        <TotpCheckAndScan v-else-if="tab == 'totp'" />
-            <Spinner v-if="verifyStatus == 'loading'" class="my-auto" />
+        <PasswordChange v-else-if="tab == 'password'" />
-            <SuccessCheckmark v-else-if="verifyStatus == 'success'" />
+        <p v-else>etwas ist schief gelaufen</p>
-            <FailureXMark v-else-if="verifyStatus == 'failed'" />
-          </div>
-          <p v-if="verifyError" class="text-center">{{ verifyError }}</p>
-        </form>
       </div>
     </template>
   </MainTemplate>
@@ -42,53 +54,34 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import TextCopy from "@/components/TextCopy.vue";
+import TotpCheckAndScan from "../../components/account/TotpCheckAndScan.vue";
+import PasswordChange from "../../components/account/PasswordChange.vue";
+import ChangeToPassword from "../../components/account/ChangeToPassword.vue";
+import ChangeToTOTP from "../../components/account/ChangeToTOTP.vue";
 </script>
 
 <script lang="ts">
 export default defineComponent({
   data() {
     return {
-      verification: "loading" as "success" | "loading" | "failed",
+      loading: false,
-      image: undefined as undefined | string,
+      tab: "",
-      otp: undefined as undefined | string,
+      currentRoutine: "",
-      verifyStatus: undefined as undefined | "loading" | "success" | "failed",
-      verifyError: "" as string,
     };
   },
   mounted() {
+    this.loading = true;
     this.$http
-      .get(`/user/totp`)
+      .get(`/user/routine`)
       .then((result) => {
-        this.verification = "success";
+        this.tab = result.data.routine;
-        this.image = result.data.dataUrl;
+        this.currentRoutine = result.data.routine;
-        this.otp = result.data.otp;
       })
-      .catch((err) => {
+      .catch((err) => {})
-        this.verification = "failed";
+      .finally(() => {
+        this.loading = false;
       });
   },
-  methods: {
+  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);
-        });
-    },
-  },
 });
 </script>