Merge branch 'main' into rent-history

package-lock.json

@@ -16,6 +16,7 @@
         "axios": "^0.26.1",
         "core-js": "^3.8.3",
         "cssom": "^0.5.0",
+        "heroicons": "^1.0.6",
         "jwt-decode": "^3.1.2",
         "net": "^1.0.2",
         "roboto-fontface": "*",
@@ -7540,6 +7541,11 @@
         "he": "bin/he"
       }
     },
+    "node_modules/heroicons": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/heroicons/-/heroicons-1.0.6.tgz",
+      "integrity": "sha512-5bxTsG2hyNBF0l+BrFlZlR5YngQNMfl0ggJjIRkMSADBQbaZMoTg47OIQzq6f1mpEZ85HEIgSC4wt5AeFM9J2Q=="
+    },
     "node_modules/highlight.js": {
       "version": "10.7.3",
       "dev": true,
@@ -19967,6 +19973,11 @@
       "version": "1.2.0",
       "dev": true
     },
+    "heroicons": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/heroicons/-/heroicons-1.0.6.tgz",
+      "integrity": "sha512-5bxTsG2hyNBF0l+BrFlZlR5YngQNMfl0ggJjIRkMSADBQbaZMoTg47OIQzq6f1mpEZ85HEIgSC4wt5AeFM9J2Q=="
+    },
     "highlight.js": {
       "version": "10.7.3",
       "dev": true

package.json

@@ -17,6 +17,7 @@
     "axios": "^0.26.1",
     "core-js": "^3.8.3",
     "cssom": "^0.5.0",
+    "heroicons": "^1.0.6",
     "jwt-decode": "^3.1.2",
     "net": "^1.0.2",
     "roboto-fontface": "*",

src/components/BaseComponents/IconButton.vue

 <template>
-  <!-- Icon button -->
   <button
-    class="block w-fit text-white text-base bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-dark"
+    class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80"
+    :class="color"
   >
-    <div class="flex flex-row px-5 py-2.5 h-10">
-      <!-- Icon slot: Default content "Ban"-icon -->
-      <div class="h-6 w-6">
-        <slot>
-          <BanIcon />
-        </slot>
-      </div>
-      <p>{{ text }}</p>
+    <div class="w-5 h-5 mx-1">
+      <slot><BanIcon /></slot>
     </div>
+    <span class="mx-1">{{ text }}</span>
   </button>
 </template>
 
@@ -22,9 +17,21 @@ export default {
   name: "IconButton",
   props: {
     text: String,
+    buttonColor: String,
   },
   components: {
     BanIcon,
   },
+  computed: {
+    color() {
+      if (this.buttonColor === "red") {
+        return "bg-error-medium hover:bg-error-dark focus:ring-error-light";
+      }
+      if (this.buttonColor === "green") {
+        return "bg-success-medium hover:bg-success-dark focus:ring-success-light";
+      }
+      return "bg-primary-medium hover:bg-primary-dark focus:ring-primary-light";
+    },
+  },
 };
 </script>

src/components/BaseComponents/NavBar.vue

@@ -53,9 +53,7 @@ export default {
     async loadProfile() {
       if (this.$store.state.user.token !== null) {
         let user = parseUserFromToken(this.$store.state.user.token);
-        console.log(user);
         let id = user.accountId;
-        console.log(id);
         await this.$router.push("/profile/" + id);
       } else {
         await this.$router.push("/login");

src/components/BaseComponents/PaginationTemplate.vue

+<template>
+  <div v-if="totalPages() > 0">
+    <span
+      v-if="showPreviousLink()"
+      class="cursor-pointer inline-flex items-center p-2 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700"
+      @click="updatePage(currentPage - 1)"
+    >
+      Forrige
+    </span>
+    <label class="mx-2">{{ currentPage + 1 }} av {{ totalPages() }}</label>
+    <span
+      v-if="showNextLink()"
+      class="cursor-pointer inline-flex items-center p-2 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700"
+      @click="updatePage(currentPage + 1)"
+    >
+      Neste
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "paginationTemplate",
+  props: ["items", "currentPage", "pageSize"],
+  methods: {
+    updatePage(pageNumber) {
+      this.$emit("page:update", pageNumber);
+    },
+    totalPages() {
+      return Math.ceil(this.items.length / this.pageSize);
+    },
+    showPreviousLink() {
+      return this.currentPage == 0 ? false : true;
+    },
+    showNextLink() {
+      return this.currentPage == this.totalPages() - 1 ? false : true;
+    },
+  },
+};
+</script>

src/components/BaseComponents/RatingModal.vue

+<template>
+  <!-- Main modal -->
+  <div
+    v-if="visible"
+    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto inset-0 h-full"
+  >
+    <div class="relative w-full h-full max-w-2xl p-4 md:h-auto">
+      <!-- Modal content -->
+      <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+        <!-- Modal header -->
+        <div class="flex p-4 border-b rounded-t dark:border-gray-600">
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+            {{ name }}
+          </h3>
+          <button
+            @click="close()"
+            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+          >
+            <svg
+              class="w-5 h-5"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+          </button>
+        </div>
+        <!-- Modal body -->
+        <div class="p-6 space-y-6">
+          <p
+            class="text-lg text-base leading-relaxed text-gray-500 dark:text-gray-400"
+          >
+            {{ title }}
+          </p>
+        </div>
+
+        <div class="ml-6 mt-4">
+          <p
+            class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
+            v-show="renterIsReceiverOfRating"
+          >
+            Gi en vurdering til utleieren
+          </p>
+          <p
+            class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
+            v-show="!renterIsReceiverOfRating"
+          >
+            Gi en vurdering til leietakeren
+          </p>
+        </div>
+
+        <div class="flex justify-center px-4">
+          <textarea
+            class="w-full h-40 bg-gray-200 mb-4 ring-1 ring-gray-400 rounded-xl"
+          />
+        </div>
+
+        <div class="flex items-center justify-center mb-8">
+          <svg
+            class="w-10 h-10 text-warn cursor-pointer"
+            :class="rating[0]"
+            @click="setRating(1)"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+            ></path>
+          </svg>
+          <svg
+            class="w-10 h-10 text-warn cursor-pointer"
+            :class="rating[1]"
+            @click="setRating(2)"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+            ></path>
+          </svg>
+          <svg
+            class="w-10 h-10 text-warn cursor-pointer"
+            :class="rating[2]"
+            @click="setRating(3)"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+            ></path>
+          </svg>
+          <svg
+            class="w-10 h-10 text-warn cursor-pointer"
+            :class="rating[3]"
+            @click="setRating(4)"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+            ></path>
+          </svg>
+          <svg
+            class="w-10 h-10 text-warn cursor-pointer"
+            :class="rating[4]"
+            @click="setRating(5)"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+            ></path>
+          </svg>
+        </div>
+
+        <div class="flex justify-center mb-4">
+          <Button :text="'Send en vurdering'" @click="sendRating"></Button>
+        </div>
+
+        <!-- Modal footer -->
+        <div class="rounded-b border-t border-gray-200 dark:border-gray-600">
+          <!-- Slot: Add any html you want here -->
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Button from "@/components/BaseComponents/ColoredButton";
+import { postNewRating } from "@/utils/apiutil";
+
+export default {
+  name: "RatingModal",
+  data() {
+    return {
+      score: 3,
+      comment: "",
+      rating: [
+        "text-warn",
+        "text-warn",
+        "text-warn",
+        "text-gray-300",
+        "text-gray-300",
+      ],
+    };
+  },
+  props: {
+    visible: Boolean,
+    name: String,
+    title: String,
+    rentID: Number,
+    renterIsReceiverOfRating: Boolean,
+  },
+
+  components: {
+    Button,
+  },
+  methods: {
+    setRating(ratingNumber) {
+      this.score = ratingNumber;
+      for (let i = 0; i < 5; i++) {
+        if (i < ratingNumber) {
+          this.rating[i] = "text-warn";
+        } else {
+          this.rating[i] = "text-gray-300";
+        }
+      }
+    },
+    close() {
+      this.$emit("close");
+    },
+    async sendRating() {
+      const ratingInfo = {
+        score: this.score,
+        comment: this.comment,
+        renterIsReceiverOfRating: this.renterIsReceiverOfRating,
+        rentID: this.rentID,
+      };
+      await postNewRating(ratingInfo);
+
+      this.$router.push("/");
+    },
+  },
+};
+</script>

src/components/ChatComponents/ChatMessage.vue

@@ -33,7 +33,6 @@ export default {
   },
   methods: {
     color() {
-      console.log(this.userID);
       return this?.message.from == this.userID
         ? "bg-gray-300"
         : "bg-primary-medium";

src/components/ChatComponents/ChatProfile.vue

@@ -52,7 +52,6 @@ export default {
   },
   methods: {
     selectUser() {
-      console.log(this.conversation.recipient.userId);
       this.$emit("recipient", this.conversation.recipient.userId);
     },
   },

src/components/CommunityComponents/CommunityHamburger.vue

@@ -18,9 +18,9 @@
           >Se Medlemmer
         </router-link>
       </li>
-      <li id="adminGroup">
+      <li id="adminGroup" v-if="admin">
         <router-link
-          :to="'/community/' + communityID + '/memberlist'"
+          :to="'/community/' + communityID + '/admin'"
           class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
           >Administrer Gruppe</router-link
         >
@@ -39,24 +39,31 @@
 
 <script>
 import { LeaveCommunity } from "@/utils/apiutil";
+import CommunityAdminService from "@/services/community-admin.service";
 
 export default {
   name: "CommunityHamburger",
-  props: {
-    communityID: Number,
-  },
   data() {
     return {
       id: -1,
+      admin: false,
+      communityID: -1,
     };
   },
-
   methods: {
     leaveCommunity: async function () {
-      this.id = await this.$router.currentRoute.value.params.communityID;
+      this.id = this.$route.params.communityID;
       await LeaveCommunity(this.id);
       this.$router.push("/");
     },
   },
+  async mounted() {
+    this.admin = await CommunityAdminService.isUserAdmin(
+      this.$route.params.communityID
+    );
+  },
+  created() {
+    this.communityID = this.$route.params.communityID;
+  },
 };
 </script>

src/components/CommunityComponents/CommunityHeader.vue

 <template>
-  <div class="flex items-center justify-between mx-4">
+  <!-- TODO PUT A LOADER HERE -->
+  <div v-if="loading">LASTER...</div>
+  <div v-else class="flex items-center justify-between mx-4">
     <router-link
       :to="'/community/' + community.communityId"
       class="flex-1 min-w-0"
@@ -51,7 +53,7 @@
       <!-- If the user is member of the community, this hamburger menu will show -->
       <div v-if="member">
         <svg
-          @click="toggle"
+          @click="toggleHamburgerMenu()"
           xmlns="http://www.w3.org/2000/svg"
           class="w-9 h-9 cursor-pointer"
           fill="none"
@@ -70,6 +72,7 @@
           v-if="hamburgerOpen"
           class="origin-top-right absolute right-0"
           :community-i-d="community.communityId"
+          :admin="admin"
         />
         <!-- class="absolute" -->
       </div>
@@ -80,11 +83,13 @@
 <script>
 import CommunityHamburger from "@/components/CommunityComponents/CommunityHamburger";
 import ColoredButton from "@/components/BaseComponents/ColoredButton";
+import CommunityService from "@/services/community.service";
+import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal";
+import { parseCurrentUser } from "@/utils/token-utils";
 import {
   JoinOpenCommunity,
-  GetIfUserAlreadyInCommunity,
+  // GetIfUserAlreadyInCommunity,
 } from "@/utils/apiutil";
-import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal";
 
 export default {
   name: "CommunityHeader",
@@ -93,31 +98,39 @@ export default {
     ColoredButton,
     CustomFooterModal,
   },
+  computed: {
+    userid() {
+      return parseCurrentUser().accountId;
+    },
+  },
   data() {
     return {
       hamburgerOpen: false,
       dialogOpen: false,
-      member: true,
+      member: false,
+      community: {},
+      loading: true,
     };
   },
   props: {
-    adminStatus: Boolean,
-    community: {
-      communityId: Number,
-      name: String,
-      description: String,
-      visibility: Number,
-      location: String,
-      picture: String,
-    },
+    admin: Boolean,
   },
   methods: {
-    //To open and close the hamburger menu
-    toggle: function () {
-      if (this.hamburgerOpen) {
-        this.hamburgerOpen = false;
-      } else {
-        this.hamburgerOpen = true;
+    toggleHamburgerMenu() {
+      this.hamburgerOpen = !this.hamburgerOpen;
+    },
+    async load() {
+      this.community = await CommunityService.getCommunity(
+        this.$route.params.communityID
+      );
+      const members = await CommunityService.getCommunityMembers(
+        this.$route.params.communityID
+      );
+      for (let i = 0; i < members.length; i++) {
+        if (members[i].userId == this.userid) {
+          this.member = true;
+          return;
+        }
       }
     },
     joinCommunity: async function (id) {
@@ -128,18 +141,13 @@ export default {
         window.location.reload();
       }
     },
-    getIfUserInCommunity: async function () {
-      try {
-        this.member = await GetIfUserAlreadyInCommunity(
-          this.$router.currentRoute.value.params.communityID
-        );
-      } catch (error) {
-        console.log(error);
-      }
-    },
   },
-  beforeMount() {
-    this.getIfUserInCommunity();
+  // beforeMount() {
+  //   this.getIfUserInCommunity();
+  // },
+  async created() {
+    await this.load();
+    this.loading = false;
   },
 };
 </script>

src/components/CommunityComponents/CommunityHome.vue

 <template>
   <section class="w-full px-5 py-4 mx-auto rounded-md">
-    <CommunityHeader
-      :admin-status="false"
-      :community="community"
-      class="mb-5"
-    />
+    <CommunityHeader :admin="false" class="mb-5" />
 
     <!-- Search field -->
     <div class="relative" id="searchComponent">
@@ -26,19 +22,48 @@
         class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
         placeholder="Search"
         v-model="search"
+        @change="searchWritten"
       />
     </div>
 
-    <!-- Item cards -->
-    <div class="absolute inset-x-0 px-6 py-3">
-      <div
-        class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full place-items-center"
-      >
-        <ItemCard
-          v-for="item in searchedItems"
-          :key="item"
-          :item="item"
-          @click="goToItemInfoPage(item.listingID)"
+    <div class="absolute inset-x-0 px-5 py-3">
+      <!-- ItemCards -->
+      <div class="flex items-center justify-center w-screen">
+        <!-- Shows items based on pagination -->
+        <div
+          class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full"
+          v-if="showItems"
+        >
+          <ItemCard
+            v-for="item in visibleItems"
+            :key="item"
+            :item="item"
+            @click="goToItemInfoPage(item.listingID)"
+          />
+        </div>
+
+        <!-- Shows items based on search field input -->
+        <div
+          class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full place-items-center"
+          v-if="showSearchedItems"
+        >
+          <ItemCard
+            v-for="item in searchedItems"
+            :key="item"
+            :item="item"
+            @click="goToItemInfoPage(item.listingID)"
+          />
+        </div>
+      </div>
+
+      <!-- pagination -->
+      <div class="flex justify-center" v-if="showItems">
+        <PaginationTemplate
+          v-bind:items="items"
+          v-on:page:update="updatePage"
+          v-bind:currentPage="currentPage"
+          v-bind:pageSize="pageSize"
+          class="mt-10"
         />
       </div>
     </div>
@@ -46,8 +71,10 @@
 </template>
 
 <script>
-import CommunityHeader from "@/components/CommunityComponents/CommunityHeader.vue";
 import ItemCard from "@/components/ItemComponents/ItemCard";
+import CommunityHeader from "@/components/CommunityComponents/CommunityHeader";
+import PaginationTemplate from "@/components/BaseComponents/PaginationTemplate";
+
 import {
   GetCommunity,
   GetListingsInCommunity,
@@ -55,12 +82,11 @@ import {
 } from "@/utils/apiutil";
 export default {
   name: "SearchItemListComponent",
-
   components: {
     CommunityHeader,
     ItemCard,
+    PaginationTemplate,
   },
-
   computed: {
     searchedItems() {
       let filteredItems = [];
@@ -90,15 +116,22 @@ export default {
         title: "",
         pricePerDay: 0,
       },
-      search: "",
+
       communityID: -1,
       community: {},
+
+      showItems: true,
+      showSearchedItems: false,
+
+      //Variables connected to pagination
+      currentPage: 0,
+      pageSize: 12,
+      visibleItems: [],
     };
   },
   methods: {
-    getCommunityFromAPI: async function () {
-      this.communityID = await this.$router.currentRoute.value.params
-        .communityID;
+    async getCommunityFromAPI() {
+      this.communityID = this.$route.params.communityID;
       this.community = await GetCommunity(this.communityID);
     },
     getListingsOfCommunityFromAPI: async function () {
@@ -107,7 +140,6 @@ export default {
       this.items = await GetListingsInCommunity(this.communityID);
       for (var i = 0; i < this.items.length; i++) {
         let images = await getItemPictures(this.items[i].listingID);
-        console.log(images);
         if (images.length > 0) {
           this.items[i].img = images[0].picture;
         }
@@ -120,10 +152,38 @@ export default {
       let res = await getItemPictures(itemid);
       return res;
     },
+    searchWritten: function () {
+      //This method triggers when search input field is changed
+      if (this.search.length > 0) {
+        this.showItems = false;
+        this.showSearchedItems = true;
+      } else {
+        this.showItems = true;
+        this.showSearchedItems = false;
+      }
+    },
+
+    //Pagination
+    updatePage(pageNumber) {
+      this.currentPage = pageNumber;
+      this.updateVisibleTodos();
+    },
+    updateVisibleTodos() {
+      this.visibleItems = this.items.slice(
+        this.currentPage * this.pageSize,
+        this.currentPage * this.pageSize + this.pageSize
+      );
+
+      // if we have 0 visible items, go back a page
+      if (this.visibleItems.length === 0 && this.currentPage > 0) {
+        this.updatePage(this.currentPage - 1);
+      }
+    },
   },
-  beforeMount() {
-    this.getCommunityFromAPI(); //To get the id of the community before mounting the view
-    this.getListingsOfCommunityFromAPI();
+  async beforeMount() {
+    await this.getCommunityFromAPI(); //To get the id of the community before mounting the view
+    await this.getListingsOfCommunityFromAPI();
+    this.updateVisibleTodos();
   },
 };
 </script>

src/components/CommunityComponents/CommunityList.vue

@@ -8,6 +8,7 @@
 
 <script>
 import CommunityListItem from "@/components/CommunityComponents/CommunityListItem.vue";
+//import Join
 
 export default {
   name: "CommunityList",

src/components/CommunityComponents/CommunityListItem.vue

@@ -8,12 +8,19 @@
     <div class="flex justify-center p-2">
       <!-- If a user is not a member in the community, this button will show -->
       <ColoredButton
-        v-if="!member"
+        v-if="!member && community.visibility !== 0"
         :text="'Bli med'"
         @click="goToJoin(community.communityId)"
         class="m-2"
       />
 
+      <ColoredButton
+        v-if="!member && community.visibility === 0"
+        :text="'Spør om å bli med'"
+        @click="goToRequest(community.communityId)"
+        class="m-2"
+      />
+
       <!-- If a user is member this button will show -->
       <ColoredButton
         v-if="member"
@@ -96,6 +103,9 @@ export default {
         this.$router.push("/community/" + id);
       }
     },
+    goToRequest(id) {
+      this.$router.push("/community/" + id + "/private/join");
+    },
     toggleDialog() {
       this.dialogOpen = !this.dialogOpen;
     },

src/components/CommunityComponents/CommunityRequestForm.vue

+<template>
+  <div
+    class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
+  >
+    <!-- Component heading -->
+    <div
+      class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10"
+    >
+      Bli med i: {{ community.name }}
+    </div>
+
+    <!-- message -->
+    <div class="mt-6" :class="{ error: v$.message.$errors.length }">
+      <label
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+        id="messageLabel"
+      >
+        Melding til administrator av gruppa:
+      </label>
+      <textarea
+        id="message"
+        rows="4"
+        v-model="message"
+        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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+        required
+      ></textarea>
+
+      <!-- error message for message -->
+      <div
+        class="text-error"
+        v-for="(error, index) of v$.message.$errors"
+        :key="index"
+      >
+        <div class="text-error text-sm">
+          {{ error.$message }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Save item button -->
+    <div class="flex justify-center mt-10 float-right">
+      <Button @click="saveClicked" id="saveButton" :text="'Send'"> </Button>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import useVuelidate from "@vuelidate/core";
+import { required, helpers, maxLength } from "@vuelidate/validators";
+import Button from "@/components/BaseComponents/ColoredButton";
+import { tokenHeader } from "@/utils/token-utils";
+import { GetCommunity } from "@/utils/apiutil";
+
+export default {
+  name: "CommunityRequestForm.vue",
+
+  components: {
+    Button,
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+
+  validations() {
+    return {
+      message: {
+        required: helpers.withMessage(
+          () => "Meldingen kan ikke være tom",
+          required
+        ),
+        max: helpers.withMessage(
+          () => `Meldingen kan inneholde max 200 tegn`,
+          maxLength(200)
+        ),
+      },
+    };
+  },
+  data() {
+    return {
+      message: "",
+      communityId: null,
+      community: {},
+    };
+  },
+  computed: {},
+  methods: {
+    //TODO fix so that community id is set (not null)
+    async saveClicked() {
+      this.communityID = await this.$router.currentRoute.value.params
+        .communityID;
+
+      await axios.post(
+        process.env.VUE_APP_BASEURL +
+          `communities/${this.communityID}/private/join`,
+        { message: this.message },
+        { headers: tokenHeader() }
+      );
+    },
+    getCommunityFromAPI: async function () {
+      this.communityID = await this.$router.currentRoute.value.params
+        .communityID;
+      this.community = await GetCommunity(this.communityID);
+    },
+  },
+  async created() {
+    await this.getCommunityFromAPI(); //To get the id of the community before mounting the view
+  },
+};
+</script>

src/components/CommunityComponents/CommunitySettings.vue

+<template>
+  <div class="grid place-content-center h-48">
+    <IconButton
+      @click="deleteCommunity"
+      :buttonColor="'red'"
+      :text="'Slett felleskap'"
+    />
+  </div>
+</template>
+
+<script>
+// import CommunityAdminService from "@/services/community-admin.service";
+import IconButton from "@/components/BaseComponents/IconButton.vue";
+
+//TODO: OPEN CONFIRMATION DIALOG WHEN DELETING
+
+export default {
+  components: {
+    IconButton,
+  },
+  methods: {
+    deleteCommunity() {
+      console.log("DELETED");
+      // CommunityAdminService.deleteCommunity(this.$route.params.communityID);
+    },
+  },
+};
+</script>

src/components/CommunityComponents/MemberList.vue

 <template>
-  <CommunityHeader
-    :admin-status="false"
-    :community="community"
-    class="mb-5 mt-5"
-  />
-  <ul>
-    <li v-for="member in memberlist" :key="member.userId">
-      <user-list-item-card :admin="admin" :user="member" />
+  <div v-if="loading">LASTER...</div>
+  <ul v-else>
+    <li v-for="member in members" :key="member.userId">
+      <UserListItemCard :buttons="buttons" :user="member" />
     </li>
   </ul>
 </template>
 
 <script>
 import UserListItemCard from "@/components/UserProfileComponents/UserListItemCard.vue";
-import { GetMembersOfCommunity, GetCommunity } from "@/utils/apiutil";
-import CommunityHeader from "@/components/CommunityComponents/CommunityHeader.vue";
+import CommunityService from "@/services/community.service";
+import { GetMemberRequestsOfCommunity } from "@/utils/apiutil";
 
 export default {
-  data() {
-    return {
-      memberlist: [],
-      community: {},
-    };
-  },
+  name: "MemberList",
   components: {
-    CommunityHeader,
     UserListItemCard,
   },
   props: {
-    admin: Boolean,
+    buttons: Array,
+    requests: Boolean,
+  },
+  data() {
+    return {
+      members: [],
+      loading: false,
+    };
   },
   methods: {
-    getAllMembersOfCommunity: async function () {
-      this.memberlist = await GetMembersOfCommunity(
-        this.$router.currentRoute.value.params.id
+    async load() {},
+  },
+  async created() {
+    this.loading = true;
+    if (this.requests) {
+      this.members = await GetMemberRequestsOfCommunity(
+        this.$route.params.communityID
       );
-    },
-    getCommunity: async function () {
-      this.community = await GetCommunity(
-        this.$router.currentRoute.value.params.id
+    } else {
+      this.members = await CommunityService.getCommunityMembers(
+        this.$route.params.communityID
       );
-    },
-  },
-  beforeMount() {
-    this.getAllMembersOfCommunity();
-    this.getCommunity();
+    }
+    this.loading = false;
   },
 };
 </script>

src/components/FormComponents/LoginForm.vue

@@ -137,7 +137,6 @@ export default {
       this.v$.user.$touch();
 
       if (this.v$.user.$invalid) {
-        console.log("Ugyldig, avslutter...");
         return;
       }
 
@@ -153,8 +152,6 @@ export default {
       } else if (loginResponse.isLoggedIn === true) {
         this.$store.commit("saveToken", loginResponse.token);
         await this.$router.push("/");
-      } else {
-        console.log("Something went wrong");
       }
     },
   },

src/components/FormComponents/NewPasswordForm.vue

@@ -130,24 +130,16 @@ export default {
       this.v$.user.$touch();
 
       if (this.v$.user.$invalid) {
-        console.log("Invalid, exiting...");
         return;
       }
 
-      const newPasswordInfo = {
-        token: this.token,
-        newPassword: this.password,
-      };
+      const newPassword = this.user.password;
 
-      const newPasswordResponse = doNewPassword(newPasswordInfo);
+      const newPasswordResponse = await doNewPassword(newPassword);
 
-      if (newPasswordResponse.newPasswordSet === true) {
-        console.log("New password set");
+      if (newPasswordResponse != null) {
+        this.$store.commit("saveToken", newPasswordResponse);
         await this.$router.push("/");
-      } else if (newPasswordResponse.newPasswordSet === false) {
-        console.log("Couldn't set new password");
-      } else {
-        console.log("Something went wrong");
       }
     },
     validate() {

src/components/FormComponents/ResetPasswordForm.vue

@@ -83,7 +83,6 @@ export default {
       this.v$.email.$touch();
 
       if (this.v$.email.$invalid) {
-        console.log("Ugyldig, avslutter...");
         return;
       } else {
         this.$router.push("/");

src/components/ItemComponents/NewItemForm.vue

@@ -311,37 +311,19 @@ export default {
   },
   methods: {
     checkValidation: function () {
-      console.log("sjekker validering");
-
       this.v$.item.$touch();
       if (this.v$.item.$invalid || this.item.selectedGroups.length === 0) {
         if (this.item.selectedGroups.length === 0) {
           this.groupErrorMessage = "Velg gruppe/grupper";
         }
-        console.log("Invalid, avslutter...");
         return false;
       }
-
-      console.log("validert!");
       return true;
     },
 
     async saveClicked() {
-      console.log("Attempting to save item");
-
       if (this.checkValidation()) {
-        console.log("validert, videre...");
-
         this.checkUser();
-
-        console.log("Tittel: " + this.item.title);
-        console.log("Kategori: " + this.item.select);
-        console.log("Beskrivelse: " + this.item.description);
-        console.log("Addressen: " + this.item.address);
-        console.log("Pris: " + this.item.price);
-        console.log("bilder: " + this.item.images);
-        console.log("gruppe: " + this.item.selectedGroups);
-
         const itemInfo = {
           title: this.item.title,
           description: this.item.description,
@@ -351,12 +333,7 @@ export default {
           categoryNames: [],
           communityIDs: this.item.selectedGroups,
         };
-
-        console.log(itemInfo);
-
-        const postRequest = await postNewItem(itemInfo);
-
-        console.log("posted: " + postRequest);
+        await postNewItem(itemInfo);
 
         this.$router.push("/");
       }
@@ -368,7 +345,6 @@ export default {
     },
 
     addImage: function (event) {
-      console.log(event.target.files);
       this.item.images.push(URL.createObjectURL(event.target.files[0]));
     },
 
@@ -379,7 +355,6 @@ export default {
     onChangeGroup: function (e) {
       this.selectedGroupId = e.target.value;
       let alreadyInGroupList = false;
-      console.log("selected clicked");
 
       for (let i = 0; i <= this.item.selectedGroups.length; i++) {
         if (this.selectedGroupId == this.item.selectedGroups[i]) {