check if password and repeat match

src/components/account/ChangeToPassword.vue

@@ -10,6 +10,7 @@
           placeholder="neues Passwort"
           autocomplete="new-password"
           class="rounded-b-none!"
+          :class="notMatching ? 'border-red-600!' : ''"
         />
       </div>
       <div>
@@ -21,8 +22,10 @@
           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">
@@ -62,12 +65,22 @@ export default defineComponent({
       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

src/components/account/PasswordChange.vue

@@ -21,6 +21,7 @@
           placeholder="neues Passwort"
           autocomplete="new-password"
           class="rounded-none!"
+          :class="notMatching ? 'border-red-600!' : ''"
         />
       </div>
       <div>
@@ -32,8 +33,10 @@
           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">
@@ -65,12 +68,22 @@ export default defineComponent({
       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

src/views/invite/Verify.vue

@@ -56,16 +56,19 @@
             placeholder="Passwort"
             class="rounded-b-none!"
             autocomplete="new-password"
+            :class="notMatching ? 'border-red-600!' : ''"
           />
           <input
-            id="passwordrep"
+            id="password_rep"
-            name="passwordrep"
+            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">
@@ -110,6 +113,7 @@ export default defineComponent({
       username: "" as string,
       inviteStatus: undefined as undefined | "loading" | "success" | "failed",
       inviteError: "" as string,
+      notMatching: false as boolean,
     };
   },
   mounted() {
@@ -138,6 +142,8 @@ export default defineComponent({
       if (this.tab == "totp") secret = this.totp(e);
       else secret = await this.password(e);
 
+      if (secret == "") return;
+
       this.inviteStatus = "loading";
       this.inviteError = "";
       this.$http
@@ -166,6 +172,15 @@ export default defineComponent({
     },
     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);
     },
   },

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">
@@ -56,16 +56,19 @@
             placeholder="Passwort"
             class="rounded-b-none!"
             autocomplete="new-password"
+            :class="notMatching ? 'border-red-600!' : ''"
           />
           <input
-            id="passwordrep"
+            id="password_rep"
-            name="passwordrep"
+            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">
@@ -110,6 +113,7 @@ export default defineComponent({
       otp: undefined as undefined | string,
       resetStatus: undefined as undefined | "loading" | "success" | "failed",
       resetError: "" as string,
+      notMatching: false as boolean,
     };
   },
   mounted() {
@@ -137,6 +141,8 @@ export default defineComponent({
       if (this.tab == "totp") secret = this.totp(e);
       else secret = await this.password(e);
 
+      if (secret == "") return;
+
       this.resetStatus = "loading";
       this.resetError = "";
       this.$http
@@ -165,6 +171,15 @@ export default defineComponent({
     },
     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);
     },
   },

src/views/reset/Start.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>
 
       <form class="flex flex-col gap-2" @submit.prevent="reset">