enable password on invite or reset

src/views/Login.vue

@@ -46,7 +46,7 @@
               required
               placeholder="Passwort"
               class="rounded-t-none!"
-              autocomplete="off"
+              autocomplete="current-password"
             />
           </div>
         </div>

src/views/invite/Verify.vue

@@ -14,17 +14,59 @@
         <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 class="-space-y-px">
-          <div>
+            <div>
-            <input id="totp" name="totp" type="text" required placeholder="TOTP" />
+              <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"
+          />
+          <input
+            id="passwordrep"
+            name="passwordrep"
+            type="password"
+            required
+            placeholder="Passwort wiederholen"
+            class="rounded-t-none!"
+            autocomplete="new-password"
+          />
+        </div>
 
         <div class="flex flex-row gap-2">
           <button type="submit" primary :disabled="inviteStatus == 'loading' || inviteStatus == 'success'">
@@ -50,6 +92,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,6 +103,7 @@ export default defineComponent({
   },
   data() {
     return {
+      tab: "totp",
       verification: "loading" as "success" | "loading" | "failed",
       image: undefined as undefined | string,
       otp: undefined as undefined | string,
@@ -89,15 +133,19 @@ export default defineComponent({
       });
   },
   methods: {
-    invite(e: any) {
+    async invite(e: any) {
-      let formData = e.target.elements;
+      let secret = "";
+      if (this.tab == "totp") secret = this.totp(e);
+      else secret = await this.password(e);
+
       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 +160,14 @@ 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;
+      return await hashString(formData.password.value);
+    },
   },
 });
 </script>

src/views/reset/Reset.vue

@@ -15,15 +15,58 @@
         <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">
+          <TextCopy :copyText="otp" />
-          <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"
+          />
+          <input
+            id="passwordrep"
+            name="passwordrep"
+            type="password"
+            required
+            placeholder="Passwort wiederholen"
+            class="rounded-t-none!"
+            autocomplete="new-password"
+          />
+        </div>
 
         <div class="flex flex-row gap-2">
           <button type="submit" primary :disabled="resetStatus == 'loading' || resetStatus == 'success'">
@@ -50,6 +93,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,6 +104,7 @@ export default defineComponent({
   },
   data() {
     return {
+      tab: "totp",
       verification: "loading" as "success" | "loading" | "failed",
       image: undefined as undefined | string,
       otp: undefined as undefined | string,
@@ -87,15 +132,19 @@ export default defineComponent({
       });
   },
   methods: {
-    reset(e: any) {
+    async reset(e: any) {
-      let formData = e.target.elements;
+      let secret = "";
+      if (this.tab == "totp") secret = this.totp(e);
+      else secret = await this.password(e);
+
       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 +159,14 @@ 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;
+      return await hashString(formData.password.value);
+    },
   },
 });
 </script>

src/views/reset/Start.vue

@@ -9,7 +9,7 @@
       <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;