src/views/setup/Verify.vue

@@ -15,6 +15,28 @@
         <RouterLink to="/setup" class="text-primary">Zum Einrichtungsstart</RouterLink>
       </div>
       <form v-else class="flex flex-col gap-2" @submit.prevent="setup">
+        <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>
+        <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" />
@@ -24,6 +46,30 @@
               <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="setupStatus == 'loading' || setupStatus == 'success'">
@@ -51,6 +97,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">
@@ -61,11 +108,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,
       setupStatus: undefined as undefined | "loading" | "success" | "failed",
       setupError: "" as string,
+      notMatching: false as boolean,
     };
   },
   mounted() {
@@ -79,6 +129,7 @@ export default defineComponent({
           this.verification = "success";
           this.image = result.data.dataUrl;
           this.otp = result.data.otp;
+          this.username = result.data.username;
         }, 1000);
       })
       .catch((err) => {
@@ -88,15 +139,21 @@ export default defineComponent({
       });
   },
   methods: {
-    setup(e: any) {
+    async setup(e: any) {
-      let formData = e.target.elements;
+      let secret = "";
+      if (this.tab == "totp") secret = this.totp(e);
+      else secret = await this.password(e);
+
+      if (secret == "") return;
+
       this.setupStatus = "loading";
       this.setupError = "";
       this.$http
         .post(`/setup/finish`, {
           token: this.token,
           mail: this.mail,
-          totp: formData.totp.value,
+          secret: secret,
+          routine: this.tab,
         })
         .then((result) => {
           this.setupStatus = "success";
@@ -111,6 +168,24 @@ export default defineComponent({
           this.setupError = 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>