added current password field

Author: supalarry

frontend/src/components/app/settings/AccountInput.vue

@@ -34,12 +34,16 @@
             <textarea style="resize: none;" rows="4" type="text" placeholder="Biography" v-model="currentValue" class="matcha-input md:max-w-sm block"></textarea>
             <span class="matcha-input-error">{{ errors[0] }}</span>
           </ValidationProvider>
+          <ValidationProvider v-if="type === 'password'" name="Current Password" rules="required" v-slot="{errors}">
+            <input type="password" placeholder="Current Password" v-model="passwordOld" class="matcha-input md:max-w-sm">
+            <span class="matcha-input-error">{{ errors[0] }}</span>
+          </ValidationProvider>
           <ValidationProvider v-if="type === 'password'" name="Password" rules="required|min:6|validPassword" v-slot="{errors}">
-            <input type="password" placeholder="New Password" v-model="currentValue" class="matcha-input md:max-w-sm">
+            <input type="password" placeholder="New Password" v-model="currentValue" class="matcha-input md:max-w-sm mt-4">
             <span class="matcha-input-error">{{ passwordErrorHandler(errors[0]) }}</span>
           </ValidationProvider>
           <ValidationProvider v-if="type === 'password'" name="Repeat Password" rules="required|confirmed:Password" v-slot="{errors}">
-            <input type="password" placeholder="Repeat Password" v-model="passwordRepeat" class="matcha-input mt-4">
+            <input type="password" placeholder="Repeat New Password" v-model="passwordRepeat" class="matcha-input">
             <span class="matcha-input-error">{{ passwordErrorHandler(errors[0]) }}</span>
           </ValidationProvider>
         </div>
@@ -57,6 +61,7 @@ export default {
     currentValueBackup: '',
     currentValue: '',
     passwordRepeat: '',
+    passwordOld: '',
   }),
   methods: {
     startEditing() {
@@ -67,17 +72,21 @@ export default {
       if (this.type === 'password') {
         this.currentValue = '';
         this.passwordRepeat = '';
+        this.passwordOld = '';
       }
       this.currentValue = this.currentValueBackup;
       this.edit = false;
     },
     onSubmit() {
       this.edit = false;
       this.currentValueBackup = this.currentValue;
-      this.$emit('saveSingleChoice', this.type, this.currentValue);
-      if (this.type === 'password') {
+      if (this.type !== 'password') {
+        this.$emit('saveSingleChoice', this.type, this.currentValue);
+      } else {
+        this.$emit('saveSingleChoiceOldGiven', this.type, this.currentValue, this.passwordOld);
         this.currentValue = '';
         this.passwordRepeat = '';
+        this.passwordOld = '';
       }
     },
     passwordErrorHandler(error) {

frontend/src/views/app/Settings.vue

@@ -51,7 +51,7 @@
         <AccountInput
           v-bind:name="'Password'"
           v-bind:type="'password'"
-          v-on:saveSingleChoice="saveSingleChoice"
+          v-on:saveSingleChoiceOldGiven="saveSingleChoiceOldGiven"
           v-bind:currentValuePassed="''"></AccountInput>
       </section>
       <section v-if="getShow === 'profile'" class="flex flex-col items-start z-10 absolute bg-white-matcha w-full top-0 left-0 md:ml-4 md:relative md:shadow-md md:rounded-md">
@@ -233,11 +233,9 @@ export default {
       } else if (key === 'lastName') {
         await this.$http.patch('/profile/edit/last_name', { last_name: value });
       } else if (key === 'email') {
-        await this.$http.patch('/profile/edit/email', { email: value });
+        await this.$http.put('/profile/edit/email', { email: value });
       } else if (key === 'username') {
         await this.$http.patch('/profile/edit/username', { username: value });
-      } else if (key === 'password') {
-        await this.$http.patch('/profile/edit/password', { password: value });
       } else if (key === 'bio') {
         await this.$http.patch('/profile/edit/bio', { bio: value });
       } else if (key === 'gender') {
@@ -248,6 +246,15 @@ export default {
       const user = await this.$http.get(`/users/${this.$store.getters.getLoggedInUser.id}`);
       await this.$store.dispatch('login', user.data);
     },
+    async saveSingleChoiceOldGiven(...args) {
+      const [key, value, old] = args;
+      if (key === 'password') {
+        await this.$http.put('/profile/edit/password', {
+          old_password: old,
+          new_password: value,
+        });
+      }
+    },
     async saveMultipleChoice(...args) {
       const [key, value] = args;
       if (key === 'interests') {