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>