Merge pull request 'feature/#66-static-user-login' (#91) from feature/#66-static-user-login into develop

Reviewed-on: #91

src/components/account/ChangeToPassword.vue

@@ -0,0 +1,106 @@
+<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!"
+          :class="notMatching ? 'border-red-600!' : ''"
+        />
+      </div>
+      <div>
+        <input
+          id="new_rep"
+          name="new_rep"
+          type="password"
+          required
+          placeholder="neues Passwort wiederholen"
+          autocomplete="new-password"
+          class="rounded-t-none!"
+          :class="notMatching ? 'border-red-600!' : ''"
+        />
+      </div>
+      <p v-if="notMatching">Passwörter stimmen nicht überein</p>
+    </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,
+      notMatching: false as boolean,
+    };
+  },
+  mounted() {},
+  methods: {
+    async change(e: any) {
+      let formData = e.target.elements;
+
+      let new_pw = await hashString(formData.new.value);
+      let new_rep = await hashString(formData.new_rep.value);
+      if (new_pw != new_rep) {
+        this.notMatching = true;
+        return;
+      }
+      this.notMatching = false;
+
+      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,109 @@
+<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!"
+          :class="notMatching ? 'border-red-600!' : ''"
+        />
+      </div>
+      <div>
+        <input
+          id="new_rep"
+          name="new_rep"
+          type="password"
+          required
+          placeholder="neues Passwort wiederholen"
+          autocomplete="new-password"
+          class="rounded-t-none!"
+          :class="notMatching ? 'border-red-600!' : ''"
+        />
+      </div>
+      <p v-if="notMatching">Passwörter stimmen nicht überein</p>
+    </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,
+      notMatching: false as boolean,
+    };
+  },
+  mounted() {},
+  methods: {
+    async change(e: any) {
+      let formData = e.target.elements;
+
+      let new_pw = await hashString(formData.new.value);
+      let new_rep = await hashString(formData.new_rep.value);
+      if (new_pw != new_rep) {
+        this.notMatching = true;
+        return;
+      }
+      this.notMatching = false;
+
+      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/helpers/crypto.ts

@@ -0,0 +1,7 @@
+export async function hashString(message = ""): Promise<string> {
+  const msgUint8 = new TextEncoder().encode(message);
+  const hashBuffer = await window.crypto.subtle.digest("SHA-256", msgUint8);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  const hashHex = hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
+  return hashHex;
+}

src/views/Login.vue

@@ -8,13 +8,28 @@
         </h2>
       </div>
 
-      <form class="flex flex-col gap-2" @submit.prevent="login">
+      <form class="flex flex-col gap-2" @submit.prevent="submit">
         <div class="-space-y-px">
-          <div>
-            <input id="username" name="username" type="text" required placeholder="Benutzer" class="rounded-b-none!" />
-          </div>
-          <div>
+          <div class="relative">
             <input
+              id="username"
+              name="username"
+              type="text"
+              required
+              placeholder="Benutzer"
+              :class="routine == '' ? '' : 'rounded-b-none!'"
+              :value="username"
+              :disabled="username != ''"
+            />
+            <div v-if="usernameStatus" class="h-full flex items-center justify-center w-5 absolute top-0 right-2">
+              <Spinner v-if="usernameStatus == 'loading'" class="my-auto" />
+              <SuccessCheckmark v-else-if="usernameStatus == 'success'" />
+              <FailureXMark v-else-if="usernameStatus == 'failed'" />
+            </div>
+          </div>
+          <div v-if="routine != ''">
+            <input
+              v-if="routine == 'totp'"
               id="totp"
               name="totp"
               type="text"
@@ -23,13 +38,26 @@
               class="rounded-t-none!"
               autocomplete="off"
             />
+            <input
+              v-else
+              id="password"
+              name="password"
+              type="password"
+              required
+              placeholder="Passwort"
+              class="rounded-t-none!"
+              autocomplete="current-password"
+            />
           </div>
         </div>
-        <RouterLink :to="{ name: 'reset-start' }" class="w-fit self-end text-primary">TOTP verloren</RouterLink>
+        <p v-if="username != ''" class="w-fit self-end text-primary cursor-pointer" @click="resetRoutine">
+          Benutzer wechseln
+        </p>
+        <RouterLink :to="{ name: 'reset-start' }" class="w-fit self-end text-primary">Zugang verloren</RouterLink>
 
         <div class="flex flex-row gap-2">
           <button type="submit" primary :disabled="loginStatus == 'loading' || loginStatus == 'success'">
-            anmelden
+            {{ routine == "" ? "Benutzer prüfen" : "anmelden" }}
           </button>
           <Spinner v-if="loginStatus == 'loading'" class="my-auto" />
           <SuccessCheckmark v-else-if="loginStatus == 'success'" />
@@ -53,6 +81,7 @@ import FormBottomBar from "@/components/FormBottomBar.vue";
 import AppLogo from "@/components/AppLogo.vue";
 import { mapState } from "pinia";
 import { useConfigurationStore } from "@/stores/configuration";
+import { hashString } from "../helpers/crypto";
 </script>
 
 <script lang="ts">
@@ -60,7 +89,10 @@ export default defineComponent({
   data() {
     return {
       loginStatus: undefined as undefined | "loading" | "success" | "failed",
+      usernameStatus: undefined as undefined | "loading" | "success" | "failed",
       loginError: "" as string,
+      username: "" as string,
+      routine: "" as string,
     };
   },
   computed: {
@@ -68,16 +100,79 @@ export default defineComponent({
   },
   mounted() {
     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: {
-    login(e: any) {
+    resetRoutine() {
+      this.routine = "";
+      this.username = "";
+      localStorage.removeItem("routine");
+      localStorage.removeItem("username");
+    },
+    submit(e: any) {
+      if (this.routine == "") this.kickof(e);
+      else this.login(e);
+    },
+    kickof(e: any) {
+      let formData = e.target.elements;
+      let username = formData.username.value;
+      this.usernameStatus = "loading";
+      this.loginError = "";
+      this.$http
+        .post(`/auth/kickof`, {
+          username: username,
+        })
+        .then((result) => {
+          this.usernameStatus = "success";
+          this.routine = result.data.routine;
+          this.username = username;
+          localStorage.setItem("routine", result.data.routine);
+          localStorage.setItem("username", username);
+        })
+        .catch((err) => {
+          this.usernameStatus = "failed";
+          this.loginError = err.response?.data;
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.usernameStatus = undefined;
+            this.loginError = "";
+          }, 2000);
+        });
+    },
+    async login(e: any) {
       let formData = e.target.elements;
       this.loginStatus = "loading";
       this.loginError = "";
+
+      let secret = "";
+      if (this.routine == "totp") {
+        secret = formData.totp.value;
+      } else {
+        secret = await hashString(formData.password.value);
+      }
+
       this.$http
         .post(`/auth/login`, {
           username: formData.username.value,
-          totp: formData.totp.value,
+          secret: secret,
         })
         .then((result) => {
           this.loginStatus = "success";

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">
-        <div class="flex flex-col gap-2">
-          <img :src="image" alt="totp" class="w-56 h-56 self-center" />
-
-          <TextCopy :copyText="otp" />
+      <Spinner v-if="loading" class="mx-auto" />
+      <div v-else class="flex flex-col w-full h-full gap-2 px-7 overflow-hidden">
+        <div class="w-full flex flex-row gap-2 justify-center">
+          <p
+            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">
-          <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>
+        <ChangeToTOTP
+          v-if="currentRoutine == 'password' && tab == 'totp'"
+          :currentRoutine="currentRoutine"
+          @updateCurrent="currentRoutine = 'totp'"
+        />
+        <ChangeToPassword
+          v-else-if="currentRoutine == 'totp' && tab == 'password'"
+          :currentRoutine="currentRoutine"
+          @updateCurrent="currentRoutine = 'password'"
+        />
+        <TotpCheckAndScan v-else-if="tab == 'totp'" />
+        <PasswordChange v-else-if="tab == 'password'" />
+        <p v-else>etwas ist schief gelaufen</p>
       </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",
-      image: undefined as undefined | string,
-      otp: undefined as undefined | string,
-      verifyStatus: undefined as undefined | "loading" | "success" | "failed",
-      verifyError: "" as string,
+      loading: false,
+      tab: "",
+      currentRoutine: "",
     };
   },
   mounted() {
+    this.loading = true;
     this.$http
-      .get(`/user/totp`)
+      .get(`/user/routine`)
       .then((result) => {
-        this.verification = "success";
-        this.image = result.data.dataUrl;
-        this.otp = result.data.otp;
+        this.tab = result.data.routine;
+        this.currentRoutine = result.data.routine;
       })
-      .catch((err) => {
-        this.verification = "failed";
+      .catch((err) => {})
+      .finally(() => {
+        this.loading = false;
       });
   },
-  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);
-        });
-    },
-  },
+  methods: {},
 });
 </script>

src/views/invite/Verify.vue

@@ -14,17 +14,62 @@
         <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">
+        <div class="w-full flex flex-row gap-2 justify-center">
+          <p
+            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>
         <p class="text-center">Dein Nutzername: {{ username }}</p>
 
-        <img :src="image" alt="totp" class="w-56 h-56 self-center" />
+        <div v-if="tab == 'totp'" class="flex flex-col gap-2">
+          <img :src="image" alt="totp" class="w-56 h-56 self-center" />
 
-        <TextCopy :copyText="otp" />
+          <TextCopy :copyText="otp" />
 
-        <div class="-space-y-px">
-          <div>
-            <input id="totp" name="totp" type="text" required placeholder="TOTP" />
+          <div class="-space-y-px">
+            <div>
+              <input id="totp" name="totp" type="text" required placeholder="TOTP" />
+            </div>
           </div>
         </div>
+        <div v-else>
+          <input
+            id="password"
+            name="password"
+            type="password"
+            required
+            placeholder="Passwort"
+            class="rounded-b-none!"
+            autocomplete="new-password"
+            :class="notMatching ? 'border-red-600!' : ''"
+          />
+          <input
+            id="password_rep"
+            name="password_rep"
+            type="password"
+            required
+            placeholder="Passwort wiederholen"
+            class="rounded-t-none!"
+            autocomplete="new-password"
+            :class="notMatching ? 'border-red-600!' : ''"
+          />
+          <p v-if="notMatching">Passwörter stimmen nicht überein</p>
+        </div>
 
         <div class="flex flex-row gap-2">
           <button type="submit" primary :disabled="inviteStatus == 'loading' || inviteStatus == 'success'">
@@ -50,6 +95,7 @@ import FailureXMark from "@/components/FailureXMark.vue";
 import FormBottomBar from "@/components/FormBottomBar.vue";
 import TextCopy from "@/components/TextCopy.vue";
 import AppLogo from "@/components/AppLogo.vue";
+import { hashString } from "@/helpers/crypto";
 </script>
 
 <script lang="ts">
@@ -60,12 +106,14 @@ export default defineComponent({
   },
   data() {
     return {
+      tab: "totp",
       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,
+      notMatching: false as boolean,
     };
   },
   mounted() {
@@ -89,15 +137,21 @@ export default defineComponent({
       });
   },
   methods: {
-    invite(e: any) {
-      let formData = e.target.elements;
+    async invite(e: any) {
+      let secret = "";
+      if (this.tab == "totp") secret = this.totp(e);
+      else secret = await this.password(e);
+
+      if (secret == "") return;
+
       this.inviteStatus = "loading";
       this.inviteError = "";
       this.$http
         .put(`/invite`, {
           token: this.token,
           mail: this.mail,
-          totp: formData.totp.value,
+          secret: secret,
+          routine: this.tab,
         })
         .then((result) => {
           this.inviteStatus = "success";
@@ -112,6 +166,23 @@ export default defineComponent({
           this.inviteError = err.response.data;
         });
     },
+    totp(e: any) {
+      let formData = e.target.elements;
+      return formData.totp.value;
+    },
+    async password(e: any) {
+      let formData = e.target.elements;
+
+      let new_pw = await hashString(formData.password.value);
+      let new_rep = await hashString(formData.password_rep.value);
+      if (new_pw != new_rep) {
+        this.notMatching = true;
+        return "";
+      }
+      this.notMatching = false;
+
+      return await hashString(formData.password.value);
+    },
   },
 });
 </script>

src/views/reset/Reset.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">
         <AppLogo />
-        <h2 class="text-center text-4xl font-extrabold text-gray-900">TOTP zurücksetzen</h2>
+        <h2 class="text-center text-4xl font-extrabold text-gray-900">Zugang zurücksetzen</h2>
       </div>
 
       <div v-if="verification == 'loading'" class="flex flex-col gap-2 items-center">
@@ -15,15 +15,61 @@
         <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" />
+        <div class="w-full flex flex-row gap-2 justify-center">
+          <p
+            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>
 
-        <TextCopy :copyText="otp" />
+        <div v-if="tab == 'totp'" class="flex flex-col gap-2">
+          <img :src="image" alt="totp" class="w-56 h-56 self-center" />
 
-        <div class="-space-y-px">
-          <div>
-            <input id="totp" name="totp" type="text" required placeholder="TOTP" />
+          <TextCopy :copyText="otp" />
+
+          <div class="-space-y-px">
+            <div>
+              <input id="totp" name="totp" type="text" required placeholder="TOTP" />
+            </div>
           </div>
         </div>
+        <div v-else>
+          <input
+            id="password"
+            name="password"
+            type="password"
+            required
+            placeholder="Passwort"
+            class="rounded-b-none!"
+            autocomplete="new-password"
+            :class="notMatching ? 'border-red-600!' : ''"
+          />
+          <input
+            id="password_rep"
+            name="password_rep"
+            type="password"
+            required
+            placeholder="Passwort wiederholen"
+            class="rounded-t-none!"
+            autocomplete="new-password"
+            :class="notMatching ? 'border-red-600!' : ''"
+          />
+          <p v-if="notMatching">Passwörter stimmen nicht überein</p>
+        </div>
 
         <div class="flex flex-row gap-2">
           <button type="submit" primary :disabled="resetStatus == 'loading' || resetStatus == 'success'">
@@ -50,6 +96,7 @@ import { RouterLink } from "vue-router";
 import FormBottomBar from "@/components/FormBottomBar.vue";
 import TextCopy from "@/components/TextCopy.vue";
 import AppLogo from "@/components/AppLogo.vue";
+import { hashString } from "@/helpers/crypto";
 </script>
 
 <script lang="ts">
@@ -60,11 +107,13 @@ export default defineComponent({
   },
   data() {
     return {
+      tab: "totp",
       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,
+      notMatching: false as boolean,
     };
   },
   mounted() {
@@ -87,15 +136,21 @@ export default defineComponent({
       });
   },
   methods: {
-    reset(e: any) {
-      let formData = e.target.elements;
+    async reset(e: any) {
+      let secret = "";
+      if (this.tab == "totp") secret = this.totp(e);
+      else secret = await this.password(e);
+
+      if (secret == "") return;
+
       this.resetStatus = "loading";
       this.resetError = "";
       this.$http
         .put(`/reset`, {
           token: this.token,
           mail: this.mail,
-          totp: formData.totp.value,
+          secret: secret,
+          routine: this.tab,
         })
         .then((result) => {
           this.resetStatus = "success";
@@ -110,6 +165,23 @@ export default defineComponent({
           this.resetError = err.response.data;
         });
     },
+    totp(e: any) {
+      let formData = e.target.elements;
+      return formData.totp.value;
+    },
+    async password(e: any) {
+      let formData = e.target.elements;
+
+      let new_pw = await hashString(formData.password.value);
+      let new_rep = await hashString(formData.password_rep.value);
+      if (new_pw != new_rep) {
+        this.notMatching = true;
+        return "";
+      }
+      this.notMatching = false;
+
+      return await hashString(formData.password.value);
+    },
   },
 });
 </script>

src/views/reset/Start.vue

@@ -3,13 +3,13 @@
     <div class="max-w-md w-full space-y-8 pb-20">
       <div class="flex flex-col items-center gap-4">
         <AppLogo />
-        <h2 class="text-center text-4xl font-extrabold text-gray-900">TOTP zurücksetzen</h2>
+        <h2 class="text-center text-4xl font-extrabold text-gray-900">Zugang 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" />
+            <input id="username" name="username" type="text" required placeholder="Benutzer" :value="username" />
           </div>
         </div>
         <RouterLink to="/" class="w-fit self-end text-primary">zum Login</RouterLink>
@@ -45,8 +45,12 @@ export default defineComponent({
     return {
       resetStatus: undefined as undefined | "loading" | "success" | "failed",
       resetMessage: "" as string,
+      username: "" as string,
     };
   },
+  mounted() {
+    this.username = localStorage.getItem("username") ?? "";
+  },
   methods: {
     reset(e: any) {
       let formData = e.target.elements;