Merge branch 'change-password' into 'main'

Change password 2

See merge request !92

src/components/FormComponents/NewPasswordForm.vue

@@ -8,8 +8,35 @@
       Endre passord
     </h3>
 
+    <div
+      id="oldPasswordField"
+      :class="{ error: v$.user.oldPassword.$errors.length }"
+    >
+      <label
+        for="oldPassword"
+        class="block text-sm text-gray-800 dark:text-gray-200"
+        >Gammelt passord</label
+      >
+      <input
+        type="password"
+        v-model="v$.user.oldPassword.$model"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
+      />
+      <!-- error message -->
+      <div v-for="(error, index) of v$.user.oldPassword.$errors" :key="index">
+        <div
+          class="text-red-600 text-sm"
+          v-show="showError"
+          id="oldPasswordErrorId"
+        >
+          {{ error.$message }}
+        </div>
+      </div>
+    </div>
+
     <div
       id="firstPasswordField"
+      class="mt-4"
       :class="{ error: v$.user.password.$errors.length }"
     >
       <label
@@ -71,6 +98,12 @@
         :text="'Sett ny passord'"
       />
     </div>
+    <div class="flex items-center justify-center text-center bg-gray-50">
+      <label
+        class="mx-2 text-sm font-bold text-error-medium dark:text-primary-light hover:underline"
+        >{{ message }}</label
+      >
+    </div>
   </div>
 </template>
 
@@ -93,6 +126,9 @@ export default {
   validations() {
     return {
       user: {
+        oldPassword: {
+          required: helpers.withMessage(`Feltet må være utfylt`, required),
+        },
         password: {
           required: helpers.withMessage(`Feltet må være utfylt`, required),
           minLength: helpers.withMessage(
@@ -112,7 +148,9 @@ export default {
   },
   data() {
     return {
+      message: "",
       user: {
+        oldPassword: "",
         password: "",
         rePassword: "",
       },
@@ -133,13 +171,24 @@ export default {
         return;
       }
 
-      const newPassword = this.user.password;
+      const newPassword = {
+        newPassword: this.user.password,
+        oldPassword: this.user.oldPassword,
+      };
 
       const newPasswordResponse = await doNewPassword(newPassword);
 
-      if (newPasswordResponse != null) {
-        this.$store.commit("saveToken", newPasswordResponse);
+      if (newPasswordResponse.correctPassword) {
+        //New password was set
+        this.message = "";
+        this.$store.commit("saveToken", newPasswordResponse.token);
         await this.$router.push("/");
+      } else if (!newPasswordResponse.correctPassword) {
+        //The old password was not correct
+        this.message = "Det gamle passordet stemmer ikke for denne brukeren";
+      } else {
+        //Ops something went wrong
+        this.message = "Ops noe gikk galt";
       }
     },
     validate() {

src/components/UserProfileComponents/UserProfile.vue

@@ -70,7 +70,7 @@
           <li>
             <router-link
               to=""
-              class="block py-2 px-4 text-sm text-error hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+              class="block py-2 px-4 text-sm text-error-dark hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
               >Slett bruker</router-link
             >
           </li>

src/utils/apiutil.js

@@ -85,21 +85,25 @@ export function getAverageRating(userid) {
     });
 }
 export async function doNewPassword(password) {
+  const auth = { correctPassword: false, token: "" };
   let res = await axios({
     method: "put",
-    url: API_URL + "user/profile/password",
+    url: API_URL + "user/password/change",
     headers: tokenHeader(),
     data: {
       password: password,
     },
   })
     .then((response) => {
-      return response;
+      auth.correctPassword = true;
+      auth.token = response.data;
+      return auth;
     })
     .catch((error) => {
-      console.error(error);
+      console.log(error);
+      return auth;
     });
-  return res.data;
+  return res;
 }
 
 export function postNewItem(itemInfo) {

tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap

@@ -11,6 +11,24 @@ exports[`NewPasswordForm component renders correctly 1`] = `
   </h3>
   <div
     class=""
+    id="oldPasswordField"
+  >
+    <label
+      class="block text-sm text-gray-800 dark:text-gray-200"
+      for="oldPassword"
+    >
+      Gammelt passord
+    </label>
+    <input
+      class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
+      type="password"
+    />
+    <!-- error message -->
+    
+    
+  </div>
+  <div
+    class="mt-4"
     id="firstPasswordField"
   >
     <label
@@ -59,5 +77,12 @@ exports[`NewPasswordForm component renders correctly 1`] = `
       Sett ny passord
     </button>
   </div>
+  <div
+    class="flex items-center justify-center text-center bg-gray-50"
+  >
+    <label
+      class="mx-2 text-sm font-bold text-error-medium dark:text-primary-light hover:underline"
+    />
+  </div>
 </div>
 `;