Merge with main

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/Rating.vue

@@ -31,7 +31,7 @@
     </li>
     <li>
       <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
-        Rating ikke tilgjengelig
+        Ingen vurderinger
       </p>
     </li>
   </ul>
@@ -47,7 +47,7 @@ export default {
   methods: {
     getFill(i) {
       if (i <= this.rating) {
-        return "w-5 h-5 text-warn";
+        return "w-5 h-5 text-warn-medium";
       }
       return "w-5 h-5 text-gray-300 dark:text-gray-500";
     },

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>
@@ -88,7 +88,7 @@
         {{ user.firstName }} {{ user.lastName }}
       </h5>
       <div>
-        <rating-component :rating="renterRating" :ratingType="'Leietaker'" />
+        <rating-component :rating="renterRating" :ratingType="'Leietaker'"/>
         <rating-component :rating="ownerRating" :ratingType="'Utleier'" />
       </div>
 
@@ -106,7 +106,8 @@
 <script>
 import RatingComponent from "@/components/UserProfileComponents/Rating.vue";
 import { parseCurrentUser } from "@/utils/token-utils";
-import { getUser, getAverageRating } from "@/utils/apiutil";
+import { getUser} from "@/utils/apiutil";
+import UserService from "@/services/user.service"
 
 export default {
   name: "LargeProfileCard",
@@ -135,10 +136,14 @@ export default {
         return;
       }
       this.user = await getUser(this.id);
-      let rating = await getAverageRating(this.id);
-      if (rating >= 0 && rating <= 5) {
-        this.renterRating = rating;
-        this.ownerRating = rating;
+      let ratingAsOwner = await UserService.getUserRatingAsOwner(this.id);
+      let ratingAsRenter = await UserService.getUserRatingAsRenter(this.id)
+
+      if (ratingAsOwner >= 0 && ratingAsOwner <= 5) {
+        this.ownerRating = ratingAsOwner;
+      }
+      if (ratingAsRenter >= 0 && ratingAsRenter <= 5){
+        this.renterRating = ratingAsRenter;
       }
     },
     getProfilePicture() {

src/services/community-admin.service.js

@@ -21,7 +21,8 @@ class CommunityAdminService {
   async acceptUserIntoCommunity(communityID, userID) {
     return await axios.post(
       API_URL + "communities/" + communityID + "/requests",
-      { params: { userId: userID } }
+      null,
+      { headers: tokenHeader(), params: { userId: userID } }
     );
   }
 
@@ -29,9 +30,8 @@ class CommunityAdminService {
   async rejectUserFromCommunity(communityID, userID) {
     return await axios.patch(
       API_URL + "communitites/" + communityID + "/requests/reject",
-      {
-        params: { userId: userID },
-      }
+      null,
+      { headers: tokenHeader(), params: { userId: userID } }
     );
   }
 

src/services/community.service.js

@@ -17,9 +17,24 @@ class CommunityService {
       });
   }
 
-  async getPublicCommunities() {
+  async getAllCommunities() {
     return await axios
-      .get(API_URL + "communities")
+      .get(API_URL + "communities", {
+        headers: tokenHeader(),
+      })
+      .then((response) => {
+        return response.data;
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }
+
+  async getUserCommunities() {
+    return await axios
+      .get(API_URL + "user/communities", {
+        headers: tokenHeader(),
+      })
       .then((response) => {
         return response.data;
       })

src/services/user.service.js

@@ -5,27 +5,27 @@ import axios from "axios";
 const API_URL = process.env.VUE_APP_BASEURL;
 
 class UserService {
-  async getUserFromId(userId) {
-    return await axios
-      .get(API_URL + "users/" + userId + "/profile", {
-        headers: tokenHeader(),
-      })
-      .then((res) => {
-        return res.data;
-      })
-      .catch((err) => console.error(err));
-  }
+    async getUserFromId(userId) {
+        return await axios
+            .get(API_URL + "users/" + userId + "/profile", {
+                headers: tokenHeader(),
+            })
+            .then((res) => {
+                return res.data;
+            })
+            .catch((err) => console.error(err));
+    }
 
-  async getUserRatingAverage(userId) {
-    return await axios
-      .get(API_URL + "rating/" + userId + "/average", {
-        headers: tokenHeader(),
-      })
-      .then((res) => {
-        return res.data;
-      })
-      .catch((err) => console.error(err));
-  }
+    async getUserRatingAverage(userId) {
+        return await axios
+            .get(API_URL + "rating/" + userId + "/average", {
+                headers: tokenHeader(),
+            })
+            .then((res) => {
+                return res.data;
+            })
+            .catch((err) => console.error(err));
+    }
 
   async setListingToDeleted(listingId){
     return await axios
@@ -38,9 +38,29 @@ class UserService {
   }
   //TODO
   async getUserRatingAsOwner() {}
+    async getUserRatingAsOwner(userId) {
+        return await axios
+            .get(API_URL + "rating/" + userId + "/average/owner", {
+                headers: tokenHeader(),
+            })
+            .then((res) => {
+                return res.data;
+            })
+            .catch((err) => console.error(err))
+    }
 
-  //TODO
-  async getUserRatingAsRenter() {}
+    async getUserRatingAsRenter(userId) {
+        return await axios
+            .get(API_URL + "rating/" + userId + "/average/renter", {
+                headers: tokenHeader(),
+            })
+            .then((res) => {
+                return res.data;
+            })
+            .catch((err) => console.error(err))
+    }
 }
-
-export default new UserService();
+    export
+    default
+    new
+    UserService();
\ No newline at end of file

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) {

src/views/CommunityViews/CommunityView.vue

@@ -32,15 +32,9 @@
   <!-- Search field -->
   <div class="relative mt-1 mx-2" id="searchComponent">
     <span class="absolute inset-y-0 left-0 flex items-center pl-3">
-      <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
-        <path
-          d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        ></path>
-      </svg>
+      <div class="w-5 h-5 text-gray-400">
+        <SearchIcon />
+      </div>
     </span>
 
     <input
@@ -74,9 +68,9 @@
 
 <script>
 import CommunityList from "@/components/CommunityComponents/CommunityList.vue";
-import { getMyGroups, getVisibleGroups } from "@/utils/apiutil";
-import { UserAddIcon } from "@heroicons/vue/outline";
+import { UserAddIcon, SearchIcon } from "@heroicons/vue/outline";
 import PaginationTemplate from "@/components/BaseComponents/PaginationTemplate";
+import CommunityService from "@/services/community.service";
 
 export default {
   name: "HomeView",
@@ -102,6 +96,7 @@ export default {
     CommunityList,
     UserAddIcon,
     PaginationTemplate,
+    SearchIcon,
   },
   computed: {
     searchPublicCommunities() {
@@ -152,26 +147,21 @@ export default {
         this.updatePageMyCommunities(this.currentPageMyCommunities - 1);
       }
     },
-    //Triggers when search field input is changed
-    searchWritten: function () {
+    searchWritten() {
       //This method triggers when search input field is changed
-      if (this.search.length > 0) {
-        this.showPaginated = false;
-        this.showSearched = true;
-      } else {
-        this.showPaginated = true;
-        this.showSearched = false;
-      }
+      this.showPaginated = this.search.length < 1;
+      this.showSearched = this.search.length > 0;
+    },
+    async load() {
+      this.publicCommunities = await CommunityService.getAllCommunities();
+      this.loggedIn = this.$store.state.user.token !== null;
+      if (!this.loggedIn) return;
+      this.myCommunities = await CommunityService.getUserCommunities();
     },
   },
-  async beforeMount() {
-    this.publicCommunities = await getVisibleGroups();
-    this.loggedIn = this.$store.state.user.token !== null;
-    if (!this.loggedIn) return;
-    this.myCommunities = await getMyGroups();
-
-    // Double loop is bad; find a better way to do this
-    // Loops through both arrays and removes myCommunities from public
+  async mounted() {
+    await this.load();
+    //Double loop not bad :)
     for (var i = 0; i < this.publicCommunities.length; i++) {
       for (var j = 0; j < this.myCommunities.length; j++) {
         if (

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>
 `;